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/pages/Results.tsx

@@ -1,151 +1,242 @@
 import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { Card } from '../components/common/Card';
 import { Button } from '../components/common/Button';
-import { Download, FileText, Image, RefreshCw } from 'lucide-react';
+import {
+  Download,
+  FileText,
+  RefreshCw,
+  Sparkles,
+  Loader2,
+  AlertTriangle,
+  CheckCircle,
+  Copy
+} from 'lucide-react';
 import { apiClient } from '../api/client';
-import { Study } from '../types';
+import { useStudy } from '../context/StudyContext';
+import ReactMarkdown from 'react-markdown';
 
 export default function Results() {
-  const [studies, setStudies] = useState<Study[]>([]);
-  const [selectedStudyId, setSelectedStudyId] = useState<string | null>(null);
+  const { selectedStudy } = useStudy();
+  const navigate = useNavigate();
   const [reportContent, setReportContent] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
+  const [generating, setGenerating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+  const [lastGenerated, setLastGenerated] = useState<string | null>(null);
 
+  // Redirect if no study selected
   useEffect(() => {
-    apiClient.getStudies()
-      .then(data => {
-        setStudies(data.studies);
-        if (data.studies.length > 0) {
-          const completed = data.studies.find(s => s.status === 'completed');
-          setSelectedStudyId(completed?.id || data.studies[0].id);
-        }
-      })
-      .catch(console.error);
-  }, []);
-
-  useEffect(() => {
-    if (selectedStudyId) {
-      setLoading(true);
-      apiClient.getStudyReport(selectedStudyId)
-        .then(data => {
-          setReportContent(data.content);
-          setLoading(false);
-        })
-        .catch(err => {
-          console.error('Failed to fetch report:', err);
-          // Fallback for demo if report doesn't exist
-          setReportContent(`# Optimization Report: ${selectedStudyId}
-
-## Executive Summary
-The optimization study successfully converged after 45 trials. The best design achieved a mass reduction of 15% while maintaining all constraints.
-
-## Key Findings
-- **Best Objective Value**: 115.185 Hz
-- **Critical Parameter**: Plate Thickness (sensitivity: 0.85)
-- **Constraint Margins**: All safety factors > 1.2
-
-## Recommendations
-Based on the results, we recommend proceeding with the design from Trial #45. Further refinement could be achieved by narrowing the bounds for 'thickness'.
-          `);
-          setLoading(false);
-        });
+    if (!selectedStudy) {
+      navigate('/');
     }
-  }, [selectedStudyId]);
+  }, [selectedStudy, navigate]);
+
+  // Load report when study changes
+  useEffect(() => {
+    if (selectedStudy) {
+      loadReport();
+    }
+  }, [selectedStudy]);
+
+  const loadReport = async () => {
+    if (!selectedStudy) return;
 
-  const handleRegenerate = () => {
-    if (!selectedStudyId) return;
     setLoading(true);
-    // In a real app, this would call an endpoint to trigger report generation
-    setTimeout(() => {
+    setError(null);
+
+    try {
+      const data = await apiClient.getStudyReport(selectedStudy.id);
+      setReportContent(data.content);
+      if (data.generated_at) {
+        setLastGenerated(data.generated_at);
+      }
+    } catch (err: any) {
+      // No report yet - show placeholder
+      setReportContent(null);
+    } finally {
       setLoading(false);
-    }, 2000);
+    }
   };
 
+  const handleGenerate = async () => {
+    if (!selectedStudy) return;
+
+    setGenerating(true);
+    setError(null);
+
+    try {
+      const data = await apiClient.generateReport(selectedStudy.id);
+      setReportContent(data.content);
+      if (data.generated_at) {
+        setLastGenerated(data.generated_at);
+      }
+    } catch (err: any) {
+      setError(err.message || 'Failed to generate report');
+    } finally {
+      setGenerating(false);
+    }
+  };
+
+  const handleCopy = async () => {
+    if (reportContent) {
+      await navigator.clipboard.writeText(reportContent);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const handleDownload = () => {
+    if (!reportContent || !selectedStudy) return;
+
+    const blob = new Blob([reportContent], { type: 'text/markdown' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${selectedStudy.id}_report.md`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  if (!selectedStudy) {
+    return null;
+  }
+
   return (
-    <div className="container mx-auto h-[calc(100vh-100px)] flex flex-col">
+    <div className="h-full flex flex-col">
+      {/* Header */}
       <header className="mb-6 flex items-center justify-between">
         <div>
-          <h1 className="text-3xl font-bold text-primary-400">Results Viewer</h1>
-          <p className="text-dark-300 mt-1">Analyze completed optimization studies</p>
+          <h1 className="text-2xl font-bold text-white">Optimization Report</h1>
+          <p className="text-dark-400 mt-1">{selectedStudy.name}</p>
         </div>
         <div className="flex gap-2">
-          <Button 
-            variant="secondary" 
-            icon={<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />}
-            onClick={handleRegenerate}
-            disabled={loading || !selectedStudyId}
+          <Button
+            variant="primary"
+            icon={generating ? <Loader2 className="w-4 h-4 animate-spin" /> : <Sparkles className="w-4 h-4" />}
+            onClick={handleGenerate}
+            disabled={generating}
           >
-            Regenerate
-          </Button>
-          <Button variant="secondary" icon={<Download className="w-4 h-4" />}>
-            Export Data
+            {generating ? 'Generating...' : reportContent ? 'Update Report' : 'Generate Report'}
           </Button>
+          {reportContent && (
+            <>
+              <Button
+                variant="secondary"
+                icon={copied ? <CheckCircle className="w-4 h-4 text-green-400" /> : <Copy className="w-4 h-4" />}
+                onClick={handleCopy}
+              >
+                {copied ? 'Copied!' : 'Copy'}
+              </Button>
+              <Button
+                variant="secondary"
+                icon={<Download className="w-4 h-4" />}
+                onClick={handleDownload}
+              >
+                Download
+              </Button>
+            </>
+          )}
         </div>
       </header>
 
-      <div className="grid grid-cols-12 gap-6 flex-1 min-h-0">
-        {/* Sidebar - Study Selection */}
-        <aside className="col-span-3 flex flex-col gap-4">
-          <Card title="Select Study" className="flex-1 overflow-hidden flex flex-col">
-            <div className="space-y-2 overflow-y-auto flex-1 pr-2">
-              {studies.map(study => (
-                <button
-                  key={study.id}
-                  onClick={() => setSelectedStudyId(study.id)}
-                  className={`w-full text-left p-3 rounded-lg transition-colors ${
-                    selectedStudyId === study.id
-                      ? 'bg-primary-900/30 text-primary-100 border border-primary-700/50'
-                      : 'text-dark-300 hover:bg-dark-700'
-                  }`}
-                >
-                  <div className="font-medium truncate">{study.name}</div>
-                  <div className="text-xs text-dark-400 mt-1 capitalize">{study.status}</div>
-                </button>
-              ))}
-            </div>
-          </Card>
-        </aside>
+      {/* Error Message */}
+      {error && (
+        <div className="mb-4 p-4 bg-red-900/20 border border-red-800/30 rounded-lg">
+          <div className="flex items-center gap-2 text-red-400">
+            <AlertTriangle className="w-5 h-5" />
+            <span>{error}</span>
+          </div>
+        </div>
+      )}
 
-        {/* Main Content - Report Viewer */}
-        <main className="col-span-9 flex flex-col gap-6 overflow-hidden">
-          <Card className="flex-1 overflow-hidden flex flex-col">
-            <div className="flex items-center justify-between border-b border-dark-600 pb-4 mb-4">
-              <h2 className="text-xl font-semibold text-white flex items-center gap-2">
-                <FileText className="w-5 h-5 text-primary-400" />
-                Optimization Report
-              </h2>
-              <div className="flex gap-2">
-                <button className="p-2 text-dark-300 hover:text-white hover:bg-dark-700 rounded-lg" title="View Charts">
-                  <Image className="w-5 h-5" />
-                </button>
+      {/* Main Content */}
+      <div className="flex-1 min-h-0">
+        <Card className="h-full overflow-hidden flex flex-col">
+          <div className="flex items-center justify-between border-b border-dark-600 pb-4 mb-4">
+            <h2 className="text-lg font-semibold text-white flex items-center gap-2">
+              <FileText className="w-5 h-5 text-primary-400" />
+              Report Content
+            </h2>
+            {lastGenerated && (
+              <span className="text-xs text-dark-400">
+                Last generated: {new Date(lastGenerated).toLocaleString()}
+              </span>
+            )}
+          </div>
+
+          <div className="flex-1 overflow-y-auto pr-4 custom-scrollbar">
+            {loading ? (
+              <div className="h-full flex flex-col items-center justify-center text-dark-300">
+                <RefreshCw className="w-8 h-8 animate-spin mb-3" />
+                <span>Loading report...</span>
               </div>
-            </div>
-            
-            <div className="flex-1 overflow-y-auto pr-4 custom-scrollbar">
-              {loading ? (
-                <div className="h-full flex items-center justify-center text-dark-300">
-                  <RefreshCw className="w-8 h-8 animate-spin mb-2" />
-                  <span className="ml-2">Loading report...</span>
-                </div>
-              ) : reportContent ? (
-                <div className="prose prose-invert max-w-none">
-                  {/* Simple markdown rendering for now */}
-                  {reportContent.split('\n').map((line, i) => {
-                    if (line.startsWith('# ')) return <h1 key={i} className="text-2xl font-bold text-white mt-6 mb-4">{line.substring(2)}</h1>;
-                    if (line.startsWith('## ')) return <h2 key={i} className="text-xl font-bold text-primary-200 mt-6 mb-3">{line.substring(3)}</h2>;
-                    if (line.startsWith('- ')) return <li key={i} className="ml-4 text-dark-100">{line.substring(2)}</li>;
-                    return <p key={i} className="text-dark-200 mb-2">{line}</p>;
-                  })}
-                </div>
-              ) : (
-                <div className="h-full flex items-center justify-center text-dark-300">
-                  Select a study to view results
-                </div>
-              )}
-            </div>
-          </Card>
-        </main>
+            ) : reportContent ? (
+              <div className="prose prose-invert prose-sm max-w-none
+                              prose-headings:text-white prose-headings:font-semibold
+                              prose-p:text-dark-300 prose-strong:text-white
+                              prose-code:text-primary-400 prose-code:bg-dark-700 prose-code:px-1 prose-code:rounded
+                              prose-pre:bg-dark-700 prose-pre:border prose-pre:border-dark-600
+                              prose-a:text-primary-400 prose-a:no-underline hover:prose-a:underline
+                              prose-ul:text-dark-300 prose-ol:text-dark-300
+                              prose-li:text-dark-300
+                              prose-table:border-collapse prose-th:border prose-th:border-dark-600 prose-th:p-2 prose-th:bg-dark-700
+                              prose-td:border prose-td:border-dark-600 prose-td:p-2
+                              prose-hr:border-dark-600">
+                <ReactMarkdown>{reportContent}</ReactMarkdown>
+              </div>
+            ) : (
+              <div className="h-full flex flex-col items-center justify-center text-dark-400">
+                <FileText className="w-16 h-16 mb-4 opacity-50" />
+                <h3 className="text-lg font-medium text-dark-300 mb-2">No Report Generated</h3>
+                <p className="text-sm text-center mb-6 max-w-md">
+                  Click "Generate Report" to create an AI-generated analysis of your optimization results.
+                </p>
+                <Button
+                  variant="primary"
+                  icon={<Sparkles className="w-4 h-4" />}
+                  onClick={handleGenerate}
+                  disabled={generating}
+                >
+                  Generate Report
+                </Button>
+              </div>
+            )}
+          </div>
+        </Card>
+      </div>
+
+      {/* Study Stats */}
+      <div className="mt-4 grid grid-cols-4 gap-4">
+        <div className="bg-dark-800 rounded-lg p-4 border border-dark-600">
+          <div className="text-xs text-dark-400 uppercase mb-1">Total Trials</div>
+          <div className="text-2xl font-bold text-white">{selectedStudy.progress.current}</div>
+        </div>
+        <div className="bg-dark-800 rounded-lg p-4 border border-dark-600">
+          <div className="text-xs text-dark-400 uppercase mb-1">Best Value</div>
+          <div className="text-2xl font-bold text-primary-400">
+            {selectedStudy.best_value?.toFixed(4) || 'N/A'}
+          </div>
+        </div>
+        <div className="bg-dark-800 rounded-lg p-4 border border-dark-600">
+          <div className="text-xs text-dark-400 uppercase mb-1">Target</div>
+          <div className="text-2xl font-bold text-dark-300">
+            {selectedStudy.target?.toFixed(4) || 'N/A'}
+          </div>
+        </div>
+        <div className="bg-dark-800 rounded-lg p-4 border border-dark-600">
+          <div className="text-xs text-dark-400 uppercase mb-1">Status</div>
+          <div className={`text-lg font-bold capitalize ${
+            selectedStudy.status === 'completed' ? 'text-green-400' :
+            selectedStudy.status === 'running' ? 'text-blue-400' : 'text-dark-400'
+          }`}>
+            {selectedStudy.status}
+          </div>
+        </div>
       </div>
     </div>
   );
-}
+}