Antoine/Atomizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Dashboard improvements and configuration updates

Browse Source 
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>
This commit is contained in:
Anto01
2025-12-20 13:47:05 -05:00
parent 1612991d0d
commit 7c700c4606
19 changed files with 478 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
atomizer-dashboard/frontend/src/components/ClaudeTerminal.tsx
View File

@@ -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);

22
atomizer-dashboard/frontend/src/components/ConvergencePlot.tsx
View File

@@ -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 [];

8
atomizer-dashboard/frontend/src/components/GlobalClaudeTerminal.tsx
View File

@@ -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}

34
atomizer-dashboard/frontend/src/components/MarkdownRenderer.tsx
View File

@@ -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';
}}
/>
),
}}

4
atomizer-dashboard/frontend/src/components/layout/MainLayout.tsx
View File

@@ -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>

13
atomizer-dashboard/frontend/src/components/plotly/PlotlyConvergencePlot.tsx
View File

@@ -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}`;

5
atomizer-dashboard/frontend/src/context/StudyContext.tsx
View File

@@ -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
}

2
atomizer-dashboard/frontend/src/pages/Analysis.tsx
View File

@@ -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>

20
atomizer-dashboard/frontend/src/pages/Dashboard.tsx
View File

@@ -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>

355
atomizer-dashboard/frontend/src/pages/Home.tsx
View File

@@ -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>
);
};

2
atomizer-dashboard/frontend/src/pages/Results.tsx
View File

@@ -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>

2
atomizer-dashboard/frontend/src/pages/Setup.tsx
View File

@@ -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>

1
atomizer-dashboard/frontend/src/types/index.ts
View File

@@ -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;

2
atomizer-dashboard/frontend/vite.config.ts
View File

@@ -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,