feat: Add Claude Code terminal integration to dashboard

- Add embedded Claude Code terminal with xterm.js for full CLI experience
- Create WebSocket PTY backend for real-time terminal communication
- Add terminal status endpoint to check CLI availability
- Update dashboard to use Claude Code terminal instead of API chat
- Add optimization control panel with start/stop/validate actions
- Add study context provider for global state management
- Update frontend with new dependencies (xterm.js addons)
- Comprehensive README documentation for all new features

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

atomizer-dashboard/frontend/src/components/layout/Sidebar.tsx

@@ -1,31 +1,109 @@
-import { NavLink } from 'react-router-dom';
-import { LayoutDashboard, Settings, FileText, Activity } from 'lucide-react';
+import { NavLink, useNavigate } from 'react-router-dom';
+import {
+  Home,
+  Activity,
+  FileText,
+  BarChart3,
+  ChevronLeft,
+  Play,
+  CheckCircle,
+  Clock,
+  Zap
+} from 'lucide-react';
 import clsx from 'clsx';
+import { useStudy } from '../../context/StudyContext';
 
 export const Sidebar = () => {
-  const navItems = [
-    { to: '/dashboard', icon: Activity, label: 'Live Dashboard' },
-    { to: '/configurator', icon: Settings, label: 'Configurator' },
-    { to: '/results', icon: FileText, label: 'Results Viewer' },
-  ];
+  const { selectedStudy, clearStudy } = useStudy();
+  const navigate = useNavigate();
+
+  const handleBackToHome = () => {
+    clearStudy();
+    navigate('/');
+  };
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case 'running':
+        return <Play className="w-3 h-3 text-green-400" />;
+      case 'completed':
+        return <CheckCircle className="w-3 h-3 text-blue-400" />;
+      default:
+        return <Clock className="w-3 h-3 text-dark-400" />;
+    }
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'running':
+        return 'text-green-400';
+      case 'completed':
+        return 'text-blue-400';
+      default:
+        return 'text-dark-400';
+    }
+  };
+
+  // Navigation items depend on whether a study is selected
+  const navItems = selectedStudy
+    ? [
+        { to: '/dashboard', icon: Activity, label: 'Live Tracker' },
+        { to: '/results', icon: FileText, label: 'Reports' },
+        { to: '/analytics', icon: BarChart3, label: 'Analytics' },
+      ]
+    : [
+        { to: '/', icon: Home, label: 'Select Study' },
+      ];
 
   return (
     <aside className="w-64 bg-dark-800 border-r border-dark-600 flex flex-col h-screen fixed left-0 top-0">
+      {/* Header */}
       <div className="p-6 border-b border-dark-600">
         <div className="flex items-center gap-3">
           <div className="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center">
-            <LayoutDashboard className="w-5 h-5 text-white" />
+            <Zap className="w-5 h-5 text-white" />
           </div>
           <h1 className="text-xl font-bold text-white tracking-tight">Atomizer</h1>
         </div>
         <p className="text-xs text-dark-300 mt-1 ml-11">Optimization Platform</p>
       </div>
 
+      {/* Selected Study Info */}
+      {selectedStudy && (
+        <div className="p-4 border-b border-dark-600">
+          <button
+            onClick={handleBackToHome}
+            className="flex items-center gap-2 text-sm text-dark-400 hover:text-white
+                       transition-colors mb-3 group"
+          >
+            <ChevronLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
+            Change Study
+          </button>
+
+          <div className="bg-dark-700 rounded-lg p-3">
+            <div className="text-xs font-medium text-dark-400 uppercase mb-1">Active Study</div>
+            <div className="text-white font-medium truncate">{selectedStudy.name}</div>
+            <div className="flex items-center gap-2 mt-2">
+              <span className={`flex items-center gap-1 text-xs ${getStatusColor(selectedStudy.status)}`}>
+                {getStatusIcon(selectedStudy.status)}
+                {selectedStudy.status}
+              </span>
+              <span className="text-dark-500">|</span>
+              <span className="text-xs text-dark-400">
+                {selectedStudy.progress.current}/{selectedStudy.progress.total}
+              </span>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Navigation */}
       <nav className="flex-1 p-4 space-y-1">
         {navItems.map((item) => (
           <NavLink
             key={item.to}
             to={item.to}
+            end={item.to === '/'}
             className={({ isActive }) =>
               clsx(
                 'flex items-center gap-3 px-4 py-3 rounded-lg transition-colors duration-200',
@@ -41,6 +119,7 @@ export const Sidebar = () => {
         ))}
       </nav>
 
+      {/* Footer Status */}
       <div className="p-4 border-t border-dark-600">
         <div className="bg-dark-700 rounded-lg p-4">
           <div className="text-xs font-medium text-dark-400 uppercase mb-2">System Status</div>
@@ -48,8 +127,14 @@ export const Sidebar = () => {
             <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
             Backend Online
           </div>
+          {selectedStudy && selectedStudy.status === 'running' && (
+            <div className="flex items-center gap-2 text-sm text-green-400 mt-1">
+              <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+              Optimization Running
+            </div>
+          )}
         </div>
       </div>
     </aside>
   );
-};
+};