feat: Dashboard improvements and configuration updates

Dashboard:
- Enhanced terminal components (ClaudeTerminal, GlobalClaudeTerminal)
- Improved MarkdownRenderer for better documentation display
- Updated convergence plots (ConvergencePlot, PlotlyConvergencePlot)
- Refined Home, Analysis, Dashboard, Setup, Results pages
- Added StudyContext improvements
- Updated vite.config for better dev experience

Configuration:
- Updated CLAUDE.md with latest instructions
- Enhanced launch_dashboard.py
- Updated config.py settings

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

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

atomizer-dashboard/backend/api/routes/terminal.py

@@ -20,9 +20,43 @@ router = APIRouter()
 _terminal_sessions: dict = {}
 
 # Path to Atomizer root (for loading prompts)
-ATOMIZER_ROOT = os.path.dirname(os.path.dirname(os.path.dirname(
-    os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
-)))
+# Go up 5 levels: terminal.py -> routes -> api -> backend -> atomizer-dashboard -> Atomizer
+_file_path = os.path.abspath(__file__)
+ATOMIZER_ROOT = os.path.normpath(os.path.dirname(os.path.dirname(os.path.dirname(
+    os.path.dirname(os.path.dirname(_file_path))
+))))
+STUDIES_DIR = os.path.join(ATOMIZER_ROOT, "studies")
+# Debug: print the resolved path at module load
+print(f"[Terminal] ATOMIZER_ROOT resolved to: {ATOMIZER_ROOT}")
+
+
+def resolve_study_path(study_id: str) -> str:
+    """Find study folder by scanning topic directories.
+
+    Returns relative path from ATOMIZER_ROOT (e.g., 'studies/M1_Mirror/m1_mirror_adaptive_V14').
+    """
+    # First check direct path (flat structure)
+    direct_path = os.path.join(STUDIES_DIR, study_id)
+    if os.path.isdir(direct_path):
+        setup_dir = os.path.join(direct_path, "1_setup")
+        config_file = os.path.join(direct_path, "optimization_config.json")
+        if os.path.exists(setup_dir) or os.path.exists(config_file):
+            return f"studies/{study_id}"
+
+    # Scan topic folders for nested structure
+    if os.path.isdir(STUDIES_DIR):
+        for topic_name in os.listdir(STUDIES_DIR):
+            topic_path = os.path.join(STUDIES_DIR, topic_name)
+            if os.path.isdir(topic_path) and not topic_name.startswith('.'):
+                study_path = os.path.join(topic_path, study_id)
+                if os.path.isdir(study_path):
+                    setup_dir = os.path.join(study_path, "1_setup")
+                    config_file = os.path.join(study_path, "optimization_config.json")
+                    if os.path.exists(setup_dir) or os.path.exists(config_file):
+                        return f"studies/{topic_name}/{study_id}"
+
+    # Fallback to flat path
+    return f"studies/{study_id}"
 
 
 def get_session_prompt(study_name: str = None) -> str:
@@ -54,19 +88,21 @@ def get_session_prompt(study_name: str = None) -> str:
     ]
 
     if study_name:
+        # Resolve actual study path (handles nested folder structure)
+        study_path = resolve_study_path(study_name)
         prompt_lines.extend([
             f"## Current Study: `{study_name}`",
             "",
-            f"**Directory**: `studies/{study_name}/`",
+            f"**Directory**: `{study_path}/`",
             "",
             "Key files:",
-            f"- `studies/{study_name}/1_setup/optimization_config.json` - Configuration",
-            f"- `studies/{study_name}/2_results/study.db` - Optuna database",
-            f"- `studies/{study_name}/README.md` - Study documentation",
+            f"- `{study_path}/1_setup/optimization_config.json` - Configuration",
+            f"- `{study_path}/3_results/study.db` - Optuna database",
+            f"- `{study_path}/README.md` - Study documentation",
             "",
             "Quick status check:",
             "```bash",
-            f"python -c \"import optuna; s=optuna.load_study('{study_name}', 'sqlite:///studies/{study_name}/2_results/study.db'); print(f'Trials: {{len(s.trials)}}, Best: {{s.best_value}}')\"",
+            f"python -c \"import optuna; s=optuna.load_study('{study_name}', 'sqlite:///{study_path}/3_results/study.db'); print(f'Trials: {{len(s.trials)}}, Best: {{s.best_value}}')\"",
             "```",
             "",
         ])
@@ -99,8 +135,10 @@ def get_session_prompt(study_name: str = None) -> str:
 try:
     from winpty import PtyProcess
     HAS_WINPTY = True
-except ImportError:
+    print("[Terminal] winpty is available")
+except ImportError as e:
     HAS_WINPTY = False
+    print(f"[Terminal] winpty not available: {e}")
 
 
 class TerminalSession:
@@ -120,6 +158,15 @@ class TerminalSession:
         self.websocket = websocket
         self._running = True
 
+        # Validate working directory exists
+        if not os.path.isdir(self.working_dir):
+            await self.websocket.send_json({
+                "type": "error",
+                "message": f"Working directory does not exist: {self.working_dir}"
+            })
+            self._running = False
+            return
+
         try:
             if self._use_winpty:
                 # Use winpty for proper PTY on Windows
@@ -143,7 +190,8 @@ class TerminalSession:
                 )
             elif sys.platform == "win32":
                 # Fallback: Windows without winpty - use subprocess
-                # Run claude with --dangerously-skip-permissions for non-interactive mode
+                import shutil
+                claude_cmd = shutil.which("claude") or "claude"
                 self.process = subprocess.Popen(
                     ["cmd.exe", "/k", claude_cmd],
                     stdin=subprocess.PIPE,
@@ -157,6 +205,8 @@ class TerminalSession:
             else:
                 # On Unix, use pty
                 import pty
+                import shutil
+                claude_cmd = shutil.which("claude") or "claude"
                 master_fd, slave_fd = pty.openpty()
                 self.process = subprocess.Popen(
                     [claude_cmd],
@@ -467,6 +517,9 @@ async def get_context(study_id: str = None):
     """
     prompt = get_session_prompt(study_id)
 
+    # Resolve study path for nested folder structure
+    study_path = resolve_study_path(study_id) if study_id else None
+
     return {
         "study_id": study_id,
         "prompt": prompt,
@@ -476,8 +529,8 @@ async def get_context(study_id: str = None):
             ".claude/skills/02_CONTEXT_LOADER.md",
         ],
         "study_files": [
-            f"studies/{study_id}/1_setup/optimization_config.json",
-            f"studies/{study_id}/2_results/study.db",
-            f"studies/{study_id}/README.md",
-        ] if study_id else []
+            f"{study_path}/1_setup/optimization_config.json",
+            f"{study_path}/3_results/study.db",
+            f"{study_path}/README.md",
+        ] if study_path else []
     }

atomizer-dashboard/frontend/src/components/ClaudeTerminal.tsx

@@ -161,15 +161,12 @@ export const ClaudeTerminal: React.FC<ClaudeTerminalProps> = ({
     setIsConnecting(true);
     setError(null);
 
-    // Always use Atomizer root as working directory so Claude has access to:
-    // - CLAUDE.md (system instructions)
-    // - .claude/skills/ (skill definitions)
+    // Let backend determine the working directory (ATOMIZER_ROOT)
     // Pass study_id as parameter so we can inform Claude about the context
-    const workingDir = 'C:/Users/Antoine/Atomizer';
-    const studyParam = selectedStudy?.id ? `&study_id=${selectedStudy.id}` : '';
+    const studyParam = selectedStudy?.id ? `?study_id=${selectedStudy.id}` : '';
 
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const ws = new WebSocket(`${protocol}//${window.location.host}/api/terminal/claude?working_dir=${workingDir}${studyParam}`);
+    const ws = new WebSocket(`${protocol}//${window.location.host}/api/terminal/claude${studyParam}`);
 
     ws.onopen = () => {
       setIsConnected(true);

atomizer-dashboard/frontend/src/components/ConvergencePlot.tsx

@@ -20,8 +20,13 @@ interface Trial {
   trial_number: number;
   values: number[];
   state?: string;
+  constraint_satisfied?: boolean;
+  user_attrs?: Record<string, any>;
 }
 
+// Penalty threshold - objectives above this are considered failed/penalty trials
+const PENALTY_THRESHOLD = 100000;
+
 interface ConvergencePlotProps {
   trials: Trial[];
   objectiveIndex?: number;
@@ -38,9 +43,22 @@ export function ConvergencePlot({
   const convergenceData = useMemo(() => {
     if (!trials || trials.length === 0) return [];
 
-    // Sort by trial number
+    // Sort by trial number, filtering out failed/penalty trials
     const sortedTrials = [...trials]
-      .filter(t => t.values && t.values.length > objectiveIndex && t.state !== 'FAIL')
+      .filter(t => {
+        // Must have valid values
+        if (!t.values || t.values.length <= objectiveIndex) return false;
+        // Filter out failed state
+        if (t.state === 'FAIL') return false;
+        // Filter out penalty values (e.g., 1000000 = solver failure)
+        const val = t.values[objectiveIndex];
+        if (val >= PENALTY_THRESHOLD) return false;
+        // Filter out constraint violations
+        if (t.constraint_satisfied === false) return false;
+        // Filter out pruned trials
+        if (t.user_attrs?.pruned === true || t.user_attrs?.fail_reason) return false;
+        return true;
+      })
       .sort((a, b) => a.trial_number - b.trial_number);
 
     if (sortedTrials.length === 0) return [];

atomizer-dashboard/frontend/src/components/GlobalClaudeTerminal.tsx

@@ -33,12 +33,14 @@ export const GlobalClaudeTerminal: React.FC = () => {
     );
   }
 
-  // Terminal panel
+  // Terminal panel - responsive sizing
+  // On mobile portrait: full width with small margins
+  // On tablet/desktop: fixed size panel
   return (
     <div className={`fixed z-50 transition-all duration-200 ${
       isExpanded
-        ? 'inset-4'
-        : 'bottom-6 right-6 w-[650px] h-[500px]'
+        ? 'inset-2 sm:inset-4'
+        : 'bottom-2 right-2 left-2 h-[400px] sm:bottom-6 sm:right-6 sm:left-auto sm:w-[650px] sm:h-[500px]'
     }`}>
       <ClaudeTerminal
         isExpanded={isExpanded}

atomizer-dashboard/frontend/src/components/MarkdownRenderer.tsx

@@ -10,13 +10,34 @@ import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 interface MarkdownRendererProps {
   content: string;
   className?: string;
+  studyId?: string; // Optional study ID for resolving relative image paths
 }
 
 /**
  * Shared markdown renderer with syntax highlighting, GFM, and LaTeX support.
  * Used by both the Home page (README display) and Results page (reports).
  */
-export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({ content, className = '' }) => {
+export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({ content, className = '', studyId }) => {
+  // Helper to resolve image URLs - converts relative paths to API endpoints
+  const resolveImageSrc = (src: string | undefined): string => {
+    if (!src) return '';
+
+    // If it's already an absolute URL or data URL, return as-is
+    if (src.startsWith('http://') || src.startsWith('https://') || src.startsWith('data:')) {
+      return src;
+    }
+
+    // If we have a studyId, route through the API
+    if (studyId) {
+      // Remove leading ./ or / from the path
+      const cleanPath = src.replace(/^\.?\//, '');
+      return `/api/optimization/studies/${studyId}/image/${cleanPath}`;
+    }
+
+    // Fallback: return original src
+    return src;
+  };
+
   return (
     <article className={`markdown-body max-w-none ${className}`}>
       <ReactMarkdown
@@ -165,12 +186,17 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({ content, cla
           hr: () => (
             <hr className="my-8 border-dark-600" />
           ),
-          // Images
+          // Images - resolve relative paths through API
           img: ({ src, alt }) => (
             <img
-              src={src}
-              alt={alt}
+              src={resolveImageSrc(src)}
+              alt={alt || ''}
               className="my-4 rounded-lg max-w-full h-auto border border-dark-600"
+              loading="lazy"
+              onError={(e) => {
+                // Hide broken images
+                (e.target as HTMLImageElement).style.display = 'none';
+              }}
             />
           ),
         }}

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

@@ -5,8 +5,8 @@ export const MainLayout = () => {
   return (
     <div className="min-h-screen bg-dark-900 text-dark-50 font-sans">
       <Sidebar />
-      <main className="ml-64 min-h-screen">
-        <div className="max-w-7xl mx-auto p-8">
+      <main className="ml-64 min-h-screen p-6">
+        <div className="max-w-6xl">
           <Outlet />
         </div>
       </main>

atomizer-dashboard/frontend/src/components/plotly/PlotlyConvergencePlot.tsx

@@ -19,8 +19,12 @@ interface Trial {
   params: Record<string, number>;
   user_attrs?: Record<string, any>;
   source?: 'FEA' | 'NN' | 'V10_FEA';
+  constraint_satisfied?: boolean;
 }
 
+// Penalty threshold - objectives above this are considered failed/penalty trials
+const PENALTY_THRESHOLD = 100000;
+
 interface PlotlyConvergencePlotProps {
   trials: Trial[];
   objectiveIndex?: number;
@@ -58,6 +62,15 @@ export function PlotlyConvergencePlot({
       const val = t.values?.[objectiveIndex] ?? t.user_attrs?.[objectiveName] ?? null;
       if (val === null || !isFinite(val)) return;
 
+      // Filter out failed/penalty trials:
+      // 1. Objective above penalty threshold (e.g., 1000000 = solver failure)
+      // 2. constraint_satisfied explicitly false
+      // 3. user_attrs indicates pruned/failed
+      const isPenalty = val >= PENALTY_THRESHOLD;
+      const isFailed = t.constraint_satisfied === false;
+      const isPruned = t.user_attrs?.pruned === true || t.user_attrs?.fail_reason;
+      if (isPenalty || isFailed || isPruned) return;
+
       const source = t.source || t.user_attrs?.source || 'FEA';
       const hoverText = `Trial #${t.trial_number}<br>${objectiveName}: ${val.toFixed(4)}<br>Source: ${source}`;
 

atomizer-dashboard/frontend/src/context/StudyContext.tsx

@@ -58,7 +58,9 @@ export const StudyProvider: React.FC<{ children: ReactNode }> = ({ children }) =
   useEffect(() => {
     const init = async () => {
       try {
+        console.log('[StudyContext] Fetching studies...');
         const response = await apiClient.getStudies();
+        console.log('[StudyContext] Got studies:', response.studies.length, response.studies);
         setStudies(response.studies);
 
         // Restore last selected study from localStorage
@@ -70,8 +72,9 @@ export const StudyProvider: React.FC<{ children: ReactNode }> = ({ children }) =
           }
         }
       } catch (error) {
-        console.error('Failed to initialize studies:', error);
+        console.error('[StudyContext] Failed to initialize studies:', error);
       } finally {
+        console.log('[StudyContext] Initialization complete, isLoading=false');
         setIsLoading(false);
         setIsInitialized(true); // Mark as initialized AFTER localStorage restoration
       }

atomizer-dashboard/frontend/src/pages/Analysis.tsx

@@ -227,7 +227,7 @@ export default function Analysis() {
   const isMultiObjective = (metadata?.objectives?.length || 0) > 1;
 
   return (
-    <div className="w-full max-w-[2400px] mx-auto px-4">
+    <div className="w-full">
       {/* Header */}
       <header className="mb-6 flex items-center justify-between border-b border-dark-600 pb-4">
         <div>

atomizer-dashboard/frontend/src/pages/Dashboard.tsx

@@ -375,7 +375,7 @@ export default function Dashboard() {
   };
 
   return (
-    <div className="w-full max-w-[2400px] mx-auto px-4">
+    <div className="w-full">
       {/* Alerts */}
       <div className="fixed top-4 right-4 z-50 space-y-2">
         {alerts.map(alert => (
@@ -436,13 +436,21 @@ export default function Dashboard() {
             <StudyReportViewer studyId={selectedStudyId} />
           )}
           <button
-            onClick={() => {
-              // Open Optuna dashboard on port 8081
-              // Note: The dashboard needs to be started separately with the correct study database
-              window.open('http://localhost:8081', '_blank');
+            onClick={async () => {
+              if (!selectedStudyId) return;
+              try {
+                // Launch Optuna dashboard via API, then open the returned URL
+                const result = await apiClient.launchOptunaDashboard(selectedStudyId);
+                window.open(result.url || 'http://localhost:8081', '_blank');
+              } catch (err) {
+                // If launch fails (maybe already running), try opening directly
+                console.warn('Failed to launch dashboard:', err);
+                window.open('http://localhost:8081', '_blank');
+              }
             }}
             className="btn-secondary"
-            title="Open Optuna Dashboard (runs on port 8081)"
+            title="Launch Optuna Dashboard for this study"
+            disabled={!selectedStudyId}
           >
             Optuna Dashboard
           </button>

atomizer-dashboard/frontend/src/pages/Home.tsx

@@ -10,11 +10,16 @@ import {
   FileText,
   ChevronDown,
   ChevronUp,
+  ChevronRight,
   Target,
   Activity,
   BarChart3,
   TrendingUp,
-  ArrowRight
+  ArrowRight,
+  Folder,
+  FolderOpen,
+  Maximize2,
+  X
 } from 'lucide-react';
 import { useStudy } from '../context/StudyContext';
 import { Study } from '../types';
@@ -28,8 +33,64 @@ const Home: React.FC = () => {
   const [readmeLoading, setReadmeLoading] = useState(false);
   const [sortField, setSortField] = useState<'name' | 'status' | 'trials' | 'bestValue'>('trials');
   const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc');
+  const [expandedTopics, setExpandedTopics] = useState<Set<string>>(new Set());
+  const [isFullscreen, setIsFullscreen] = useState(false);
   const navigate = useNavigate();
 
+  // Group studies by topic, sorted by most recent first
+  const studiesByTopic = useMemo(() => {
+    const grouped: Record<string, Study[]> = {};
+    studies.forEach(study => {
+      const topic = study.topic || 'Other';
+      if (!grouped[topic]) grouped[topic] = [];
+      grouped[topic].push(study);
+    });
+
+    // Sort studies within each topic by last_modified (most recent first)
+    Object.keys(grouped).forEach(topic => {
+      grouped[topic].sort((a, b) => {
+        const aTime = a.last_modified ? new Date(a.last_modified).getTime() : 0;
+        const bTime = b.last_modified ? new Date(b.last_modified).getTime() : 0;
+        return bTime - aTime; // Descending (most recent first)
+      });
+    });
+
+    // Get most recent study time for each topic (for topic sorting)
+    const topicMostRecent: Record<string, number> = {};
+    Object.keys(grouped).forEach(topic => {
+      const mostRecent = grouped[topic][0]?.last_modified;
+      topicMostRecent[topic] = mostRecent ? new Date(mostRecent).getTime() : 0;
+    });
+
+    // Sort topics by most recent study (most recent first), 'Other' always last
+    const sortedTopics = Object.keys(grouped).sort((a, b) => {
+      if (a === 'Other') return 1;
+      if (b === 'Other') return -1;
+      return topicMostRecent[b] - topicMostRecent[a]; // Descending (most recent first)
+    });
+
+    const result: Record<string, Study[]> = {};
+    sortedTopics.forEach(topic => {
+      result[topic] = grouped[topic];
+    });
+    return result;
+  }, [studies]);
+
+  // Topics start collapsed by default - no initialization needed
+  // Users can expand topics by clicking on them
+
+  const toggleTopic = (topic: string) => {
+    setExpandedTopics(prev => {
+      const next = new Set(prev);
+      if (next.has(topic)) {
+        next.delete(topic);
+      } else {
+        next.add(topic);
+      }
+      return next;
+    });
+  };
+
   // Load README when a study is selected for preview
   useEffect(() => {
     if (selectedPreview) {
@@ -235,113 +296,105 @@ const Home: React.FC = () => {
                 <p className="text-sm mt-1 text-dark-500">Create a new study to get started</p>
               </div>
             ) : (
-              <div className="overflow-x-auto max-h-[500px] overflow-y-auto">
-                <table className="w-full">
-                  <thead className="sticky top-0 bg-dark-750 z-10">
-                    <tr className="border-b border-dark-600">
-                      <th
-                        className="text-left py-3 px-4 text-dark-400 font-medium cursor-pointer hover:text-white transition-colors"
-                        onClick={() => handleSort('name')}
-                      >
-                        <div className="flex items-center gap-1">
-                          Study Name
-                          {sortField === 'name' && (
-                            sortDir === 'asc' ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />
-                          )}
-                        </div>
-                      </th>
-                      <th
-                        className="text-left py-3 px-4 text-dark-400 font-medium cursor-pointer hover:text-white transition-colors"
-                        onClick={() => handleSort('status')}
-                      >
-                        <div className="flex items-center gap-1">
-                          Status
-                          {sortField === 'status' && (
-                            sortDir === 'asc' ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />
-                          )}
-                        </div>
-                      </th>
-                      <th
-                        className="text-left py-3 px-4 text-dark-400 font-medium cursor-pointer hover:text-white transition-colors"
-                        onClick={() => handleSort('trials')}
-                      >
-                        <div className="flex items-center gap-1">
-                          Progress
-                          {sortField === 'trials' && (
-                            sortDir === 'asc' ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />
-                          )}
-                        </div>
-                      </th>
-                      <th
-                        className="text-left py-3 px-4 text-dark-400 font-medium cursor-pointer hover:text-white transition-colors"
-                        onClick={() => handleSort('bestValue')}
-                      >
-                        <div className="flex items-center gap-1">
-                          Best
-                          {sortField === 'bestValue' && (
-                            sortDir === 'asc' ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />
-                          )}
-                        </div>
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {sortedStudies.map((study) => {
-                      const completionPercent = study.progress.total > 0
-                        ? Math.round((study.progress.current / study.progress.total) * 100)
-                        : 0;
+              <div className="max-h-[500px] overflow-y-auto">
+                {Object.entries(studiesByTopic).map(([topic, topicStudies]) => {
+                  const isExpanded = expandedTopics.has(topic);
+                  const topicTrials = topicStudies.reduce((sum, s) => sum + s.progress.current, 0);
+                  const runningCount = topicStudies.filter(s => s.status === 'running').length;
 
-                      return (
-                        <tr
-                          key={study.id}
-                          onClick={() => setSelectedPreview(study)}
-                          className={`border-b border-dark-700 hover:bg-dark-750 transition-colors cursor-pointer ${
-                            selectedPreview?.id === study.id ? 'bg-primary-900/20' : ''
-                          }`}
-                        >
-                          <td className="py-3 px-4">
-                            <div className="flex flex-col">
-                              <span className="text-white font-medium truncate max-w-[200px]">
-                                {study.name || study.id}
-                              </span>
-                              {study.name && (
-                                <span className="text-xs text-dark-500 truncate max-w-[200px]">{study.id}</span>
-                              )}
-                            </div>
-                          </td>
-                          <td className="py-3 px-4">
-                            <span className={`inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(study.status)}`}>
-                              {getStatusIcon(study.status)}
-                              {study.status}
+                  return (
+                    <div key={topic} className="border-b border-dark-600 last:border-b-0">
+                      {/* Topic Header */}
+                      <button
+                        onClick={() => toggleTopic(topic)}
+                        className="w-full px-4 py-3 flex items-center justify-between hover:bg-dark-750 transition-colors"
+                      >
+                        <div className="flex items-center gap-3">
+                          {isExpanded ? (
+                            <FolderOpen className="w-5 h-5 text-primary-400" />
+                          ) : (
+                            <Folder className="w-5 h-5 text-dark-400" />
+                          )}
+                          <span className="text-white font-medium">{topic.replace(/_/g, ' ')}</span>
+                          <span className="text-dark-500 text-sm">({topicStudies.length})</span>
+                          {runningCount > 0 && (
+                            <span className="flex items-center gap-1 text-xs text-green-400 bg-green-500/10 px-2 py-0.5 rounded-full">
+                              <Play className="w-3 h-3" />
+                              {runningCount} running
                             </span>
-                          </td>
-                          <td className="py-3 px-4">
-                            <div className="flex items-center gap-2">
-                              <div className="flex-1 h-2 bg-dark-600 rounded-full overflow-hidden max-w-[80px]">
-                                <div
-                                  className={`h-full transition-all ${
-                                    completionPercent >= 100 ? 'bg-green-500' :
-                                    completionPercent >= 50 ? 'bg-primary-500' :
-                                    'bg-yellow-500'
-                                  }`}
-                                  style={{ width: `${Math.min(completionPercent, 100)}%` }}
-                                />
+                          )}
+                        </div>
+                        <div className="flex items-center gap-4">
+                          <span className="text-dark-400 text-sm">{topicTrials.toLocaleString()} trials</span>
+                          {isExpanded ? (
+                            <ChevronDown className="w-4 h-4 text-dark-400" />
+                          ) : (
+                            <ChevronRight className="w-4 h-4 text-dark-400" />
+                          )}
+                        </div>
+                      </button>
+
+                      {/* Topic Studies */}
+                      {isExpanded && (
+                        <div className="bg-dark-850">
+                          {topicStudies.map((study) => {
+                            const completionPercent = study.progress.total > 0
+                              ? Math.round((study.progress.current / study.progress.total) * 100)
+                              : 0;
+
+                            return (
+                              <div
+                                key={study.id}
+                                onClick={() => setSelectedPreview(study)}
+                                className={`px-4 py-3 pl-12 flex items-center gap-4 border-t border-dark-700 hover:bg-dark-700 transition-colors cursor-pointer ${
+                                  selectedPreview?.id === study.id ? 'bg-primary-900/20' : ''
+                                }`}
+                              >
+                                {/* Study Name */}
+                                <div className="flex-1 min-w-0">
+                                  <span className="text-white font-medium truncate block">
+                                    {study.name || study.id}
+                                  </span>
+                                  {study.name && (
+                                    <span className="text-xs text-dark-500 truncate block">{study.id}</span>
+                                  )}
+                                </div>
+
+                                {/* Status */}
+                                <span className={`inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(study.status)}`}>
+                                  {getStatusIcon(study.status)}
+                                  {study.status}
+                                </span>
+
+                                {/* Progress */}
+                                <div className="flex items-center gap-2 w-32">
+                                  <div className="flex-1 h-2 bg-dark-600 rounded-full overflow-hidden">
+                                    <div
+                                      className={`h-full transition-all ${
+                                        completionPercent >= 100 ? 'bg-green-500' :
+                                        completionPercent >= 50 ? 'bg-primary-500' :
+                                        'bg-yellow-500'
+                                      }`}
+                                      style={{ width: `${Math.min(completionPercent, 100)}%` }}
+                                    />
+                                  </div>
+                                  <span className="text-dark-400 text-xs font-mono w-14 text-right">
+                                    {study.progress.current}/{study.progress.total}
+                                  </span>
+                                </div>
+
+                                {/* Best Value */}
+                                <span className={`font-mono text-sm w-20 text-right ${study.best_value !== null ? 'text-primary-400' : 'text-dark-500'}`}>
+                                  {study.best_value !== null ? study.best_value.toExponential(2) : 'N/A'}
+                                </span>
                               </div>
-                              <span className="text-dark-400 text-sm font-mono w-16">
-                                {study.progress.current}/{study.progress.total}
-                              </span>
-                            </div>
-                          </td>
-                          <td className="py-3 px-4">
-                            <span className={`font-mono text-sm ${study.best_value !== null ? 'text-primary-400' : 'text-dark-500'}`}>
-                              {study.best_value !== null ? study.best_value.toExponential(3) : 'N/A'}
-                            </span>
-                          </td>
-                        </tr>
-                      );
-                    })}
-                  </tbody>
-                </table>
+                            );
+                          })}
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
               </div>
             )}
           </div>
@@ -375,21 +428,30 @@ const Home: React.FC = () => {
                 </div>
 
                 {/* Study Quick Stats */}
-                <div className="px-6 py-3 border-b border-dark-600 flex items-center gap-6 text-sm">
-                  <div className="flex items-center gap-2">
-                    {getStatusIcon(selectedPreview.status)}
-                    <span className="text-dark-300 capitalize">{selectedPreview.status}</span>
-                  </div>
-                  <div className="flex items-center gap-2 text-dark-400">
-                    <Activity className="w-4 h-4" />
-                    <span>{selectedPreview.progress.current} / {selectedPreview.progress.total} trials</span>
-                  </div>
-                  {selectedPreview.best_value !== null && (
-                    <div className="flex items-center gap-2 text-primary-400">
-                      <Target className="w-4 h-4" />
-                      <span>Best: {selectedPreview.best_value.toExponential(4)}</span>
+                <div className="px-6 py-3 border-b border-dark-600 flex items-center justify-between text-sm">
+                  <div className="flex items-center gap-6">
+                    <div className="flex items-center gap-2">
+                      {getStatusIcon(selectedPreview.status)}
+                      <span className="text-dark-300 capitalize">{selectedPreview.status}</span>
                     </div>
-                  )}
+                    <div className="flex items-center gap-2 text-dark-400">
+                      <Activity className="w-4 h-4" />
+                      <span>{selectedPreview.progress.current} / {selectedPreview.progress.total} trials</span>
+                    </div>
+                    {selectedPreview.best_value !== null && (
+                      <div className="flex items-center gap-2 text-primary-400">
+                        <Target className="w-4 h-4" />
+                        <span>Best: {selectedPreview.best_value.toExponential(4)}</span>
+                      </div>
+                    )}
+                  </div>
+                  <button
+                    onClick={() => setIsFullscreen(true)}
+                    className="p-2 hover:bg-dark-700 rounded-lg transition-colors text-dark-400 hover:text-white"
+                    title="View fullscreen"
+                  >
+                    <Maximize2 className="w-4 h-4" />
+                  </button>
                 </div>
 
                 {/* README Content */}
@@ -400,7 +462,7 @@ const Home: React.FC = () => {
                       Loading documentation...
                     </div>
                   ) : (
-                    <MarkdownRenderer content={readme} />
+                    <MarkdownRenderer content={readme} studyId={selectedPreview.id} />
                   )}
                 </div>
               </>
@@ -416,6 +478,59 @@ const Home: React.FC = () => {
           </div>
         </div>
       </main>
+
+      {/* Fullscreen README Modal */}
+      {isFullscreen && selectedPreview && (
+        <div className="fixed inset-0 z-50 bg-dark-900/95 backdrop-blur-sm overflow-hidden">
+          <div className="h-full flex flex-col">
+            {/* Modal Header */}
+            <div className="flex-shrink-0 px-8 py-4 border-b border-dark-700 flex items-center justify-between bg-dark-800">
+              <div className="flex items-center gap-4">
+                <div className="w-10 h-10 bg-dark-700 rounded-lg flex items-center justify-center">
+                  <FileText className="w-5 h-5 text-primary-400" />
+                </div>
+                <div>
+                  <h2 className="text-xl font-semibold text-white">
+                    {selectedPreview.name || selectedPreview.id}
+                  </h2>
+                  <p className="text-dark-400 text-sm">Study Documentation</p>
+                </div>
+              </div>
+              <div className="flex items-center gap-3">
+                <button
+                  onClick={() => handleSelectStudy(selectedPreview)}
+                  className="flex items-center gap-2 px-4 py-2 bg-primary-600 hover:bg-primary-500
+                             text-white rounded-lg transition-all font-medium"
+                >
+                  Open Study
+                  <ArrowRight className="w-4 h-4" />
+                </button>
+                <button
+                  onClick={() => setIsFullscreen(false)}
+                  className="p-2 hover:bg-dark-700 rounded-lg transition-colors text-dark-400 hover:text-white"
+                  title="Close fullscreen"
+                >
+                  <X className="w-5 h-5" />
+                </button>
+              </div>
+            </div>
+
+            {/* Modal Content */}
+            <div className="flex-1 overflow-y-auto p-8">
+              <div className="max-w-4xl mx-auto">
+                {readmeLoading ? (
+                  <div className="flex items-center justify-center py-16 text-dark-400">
+                    <RefreshCw className="w-6 h-6 animate-spin mr-3" />
+                    Loading documentation...
+                  </div>
+                ) : (
+                  <MarkdownRenderer content={readme} studyId={selectedPreview.id} />
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };

atomizer-dashboard/frontend/src/pages/Results.tsx

@@ -295,7 +295,7 @@ export default function Results() {
   const visibleParams = showAllParams ? paramEntries : paramEntries.slice(0, 6);
 
   return (
-    <div className="h-full flex flex-col max-w-[2400px] mx-auto px-4">
+    <div className="h-full flex flex-col w-full">
       {/* Header */}
       <header className="mb-6 flex items-center justify-between border-b border-dark-600 pb-4">
         <div>

atomizer-dashboard/frontend/src/pages/Setup.tsx

@@ -249,7 +249,7 @@ export default function Setup() {
   }, 1) || 0;
 
   return (
-    <div className="w-full max-w-[2400px] mx-auto px-4">
+    <div className="w-full">
       {/* Header */}
       <header className="mb-6 flex items-center justify-between border-b border-dark-600 pb-4">
         <div>

atomizer-dashboard/frontend/src/types/index.ts

@@ -2,6 +2,7 @@
 export interface Study {
   id: string;
   name: string;
+  topic: string | null;  // Topic folder name for grouping (e.g., 'M1_Mirror', 'Simple_Bracket')
   status: 'not_started' | 'running' | 'paused' | 'completed';
   progress: {
     current: number;

atomizer-dashboard/frontend/vite.config.ts

@@ -10,7 +10,7 @@ export default defineConfig({
     strictPort: false, // Allow fallback to next available port
     proxy: {
       '/api': {
-        target: 'http://127.0.0.1:8000', // Use 127.0.0.1 instead of localhost
+        target: 'http://127.0.0.1:8000', // Backend port
         changeOrigin: true,
         secure: false,
         ws: true,