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

feat: Add session management and global Claude terminal

Browse Source 
Phase 1 - Accurate study status detection:
- Add is_optimization_running() to check for active processes
- Add get_accurate_study_status() with proper status logic
- Status now: not_started, running, paused, completed
- Add "paused" status styling (orange) to Home page

Phase 2 - Global Claude terminal:
- Create ClaudeTerminalContext for app-level state
- Create GlobalClaudeTerminal floating component
- Terminal persists across page navigation
- Shows green indicator when connected
- Remove inline terminal from Dashboard

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Antoine
2025-12-05 12:56:34 -05:00
parent fb2d06236a
commit 5c660ff270
8 changed files with 292 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
atomizer-dashboard/backend/api/routes/optimization.py
View File

@@ -34,6 +34,63 @@ def get_results_dir(study_dir: Path) -> Path:
return results_dir
def is_optimization_running(study_id: str) -> bool:
"""Check if an optimization process is currently running for a study.
Looks for Python processes running run_optimization.py with the study_id in the command line.
"""
study_dir = STUDIES_DIR / study_id
for proc in psutil.process_iter(['pid', 'name', 'cmdline', 'cwd']):
try:
cmdline = proc.info.get('cmdline') or []
cmdline_str = ' '.join(cmdline) if cmdline else ''
# Check if this is a Python process running run_optimization.py for this study
if 'python' in cmdline_str.lower() and 'run_optimization' in cmdline_str:
if study_id in cmdline_str or str(study_dir) in cmdline_str:
return True
except (psutil.NoSuchProcess, psutil.AccessDenied):
continue
return False
def get_accurate_study_status(study_id: str, trial_count: int, total_trials: int, has_db: bool) -> str:
"""Determine accurate study status based on multiple factors.
Status can be:
- not_started: No database or 0 trials
- running: Active process found
- paused: Has trials but no active process and not completed
- completed: Reached trial target
- failed: Has error indicators (future enhancement)
Args:
study_id: The study identifier
trial_count: Number of completed trials
total_trials: Target number of trials from config
has_db: Whether the study database exists
Returns:
Status string: "not_started", "running", "paused", or "completed"
"""
# No database or no trials = not started
if not has_db or trial_count == 0:
return "not_started"
# Check if we've reached the target
if trial_count >= total_trials:
return "completed"
# Check if process is actively running
if is_optimization_running(study_id):
return "running"
# Has trials but not running and not complete = paused
return "paused"
@router.get("/studies")
async def list_studies():
"""List all available optimization studies"""
@@ -66,12 +123,13 @@ async def list_studies():
study_db = results_dir / "study.db"
history_file = results_dir / "optimization_history_incremental.json"
status = "not_started"
trial_count = 0
best_value = None
has_db = False
# Protocol 10: Read from Optuna SQLite database
if study_db.exists():
has_db = True
try:
# Use timeout to avoid blocking on locked databases
conn = sqlite3.connect(str(study_db), timeout=2.0)
@@ -97,19 +155,12 @@ async def list_studies():
conn.close()
# Determine status
total_trials = config.get('optimization_settings', {}).get('n_trials', 50)
if trial_count >= total_trials:
status = "completed"
else:
status = "running" # Simplified - would need process check
except Exception as e:
print(f"Warning: Failed to read Optuna database for {study_dir.name}: {e}")
status = "error"
# Legacy: Read from JSON history
elif history_file.exists():
has_db = True
with open(history_file) as f:
history = json.load(f)
trial_count = len(history)
@@ -118,19 +169,15 @@ async def list_studies():
best_trial = min(history, key=lambda x: x['objective'])
best_value = best_trial['objective']
# Determine status
total_trials = config.get('trials', {}).get('n_trials', 50)
if trial_count >= total_trials:
status = "completed"
else:
status = "running" # Simplified - would need process check
# Get total trials from config (supports both formats)
total_trials = (
config.get('optimization_settings', {}).get('n_trials') or
config.get('trials', {}).get('n_trials', 50)
)
# Get accurate status using process detection
status = get_accurate_study_status(study_dir.name, trial_count, total_trials, has_db)
# Get creation date from directory or config modification time
created_at = None
try:
@@ -240,7 +287,7 @@ async def get_study_status(study_id: str):
conn.close()
total_trials = config.get('optimization_settings', {}).get('n_trials', 50)
status = "completed" if trial_count >= total_trials else "running"
status = get_accurate_study_status(study_id, trial_count, total_trials, True)
return {
"study_id": study_id,
@@ -639,6 +686,82 @@ async def get_pareto_front(study_id: str):
except Exception as e:
raise HTTPException(status_code=500, detail=f"Failed to get Pareto front: {str(e)}")
@router.get("/studies/{study_id}/nn-pareto-front")
async def get_nn_pareto_front(study_id: str):
"""Get NN surrogate Pareto front from nn_pareto_front.json"""
try:
study_dir = STUDIES_DIR / study_id
results_dir = get_results_dir(study_dir)
nn_pareto_file = results_dir / "nn_pareto_front.json"
if not nn_pareto_file.exists():
return {"has_nn_results": False, "pareto_front": []}
with open(nn_pareto_file) as f:
nn_pareto = json.load(f)
# Transform to match Trial interface format
transformed = []
for trial in nn_pareto:
transformed.append({
"trial_number": trial.get("trial_number"),
"values": [trial.get("mass"), trial.get("frequency")],
"params": trial.get("params", {}),
"user_attrs": {
"source": "NN",
"feasible": trial.get("feasible", False),
"predicted_stress": trial.get("predicted_stress"),
"predicted_displacement": trial.get("predicted_displacement"),
"mass": trial.get("mass"),
"frequency": trial.get("frequency")
},
"constraint_satisfied": trial.get("feasible", False),
"source": "NN"
})
return {
"has_nn_results": True,
"pareto_front": transformed,
"count": len(transformed)
}
except FileNotFoundError:
raise HTTPException(status_code=404, detail=f"Study {study_id} not found")
except Exception as e:
raise HTTPException(status_code=500, detail=f"Failed to get NN Pareto front: {str(e)}")
@router.get("/studies/{study_id}/nn-state")
async def get_nn_optimization_state(study_id: str):
"""Get NN optimization state/summary from nn_optimization_state.json"""
try:
study_dir = STUDIES_DIR / study_id
results_dir = get_results_dir(study_dir)
nn_state_file = results_dir / "nn_optimization_state.json"
if not nn_state_file.exists():
return {"has_nn_state": False}
with open(nn_state_file) as f:
state = json.load(f)
return {
"has_nn_state": True,
"total_fea_count": state.get("total_fea_count", 0),
"total_nn_count": state.get("total_nn_count", 0),
"pareto_front_size": state.get("pareto_front_size", 0),
"best_mass": state.get("best_mass"),
"best_frequency": state.get("best_frequency"),
"timestamp": state.get("timestamp")
}
except FileNotFoundError:
raise HTTPException(status_code=404, detail=f"Study {study_id} not found")
except Exception as e:
raise HTTPException(status_code=500, detail=f"Failed to get NN state: {str(e)}")
@router.post("/studies")
async def create_study(
config: str = Form(...),

31
atomizer-dashboard/frontend/src/App.tsx
View File

@@ -1,7 +1,9 @@
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { StudyProvider } from './context/StudyContext';
import { ClaudeTerminalProvider } from './context/ClaudeTerminalContext';
import { MainLayout } from './components/layout/MainLayout';
import { GlobalClaudeTerminal } from './components/GlobalClaudeTerminal';
import Home from './pages/Home';
import Dashboard from './pages/Dashboard';
import Results from './pages/Results';
@@ -19,19 +21,24 @@ function App() {
return (
<QueryClientProvider client={queryClient}>
<StudyProvider>
<BrowserRouter>
<Routes>
{/* Home page - no sidebar layout */}
<Route path="/" element={<Home />} />
<ClaudeTerminalProvider>
<BrowserRouter>
<Routes>
{/* Home page - no sidebar layout */}
<Route path="/" element={<Home />} />
{/* Study pages - with sidebar layout */}
<Route element={<MainLayout />}>
<Route path="dashboard" element={<Dashboard />} />
<Route path="results" element={<Results />} />
<Route path="analytics" element={<Dashboard />} />
</Route>
</Routes>
</BrowserRouter>
{/* Study pages - with sidebar layout */}
<Route element={<MainLayout />}>
<Route path="dashboard" element={<Dashboard />} />
<Route path="results" element={<Results />} />
<Route path="analytics" element={<Dashboard />} />
</Route>
</Routes>
{/* Global Claude Terminal - persists across navigation */}
<GlobalClaudeTerminal />
</BrowserRouter>
</ClaudeTerminalProvider>
</StudyProvider>
</QueryClientProvider>
);

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

@@ -13,6 +13,7 @@ import {
FolderOpen
} from 'lucide-react';
import { useStudy } from '../context/StudyContext';
import { useClaudeTerminal } from '../context/ClaudeTerminalContext';
interface ClaudeTerminalProps {
isExpanded?: boolean;
@@ -26,17 +27,24 @@ export const ClaudeTerminal: React.FC<ClaudeTerminalProps> = ({
onClose
}) => {
const { selectedStudy } = useStudy();
const { setIsConnected: setGlobalConnected } = useClaudeTerminal();
const terminalRef = useRef<HTMLDivElement>(null);
const xtermRef = useRef<Terminal | null>(null);
const fitAddonRef = useRef<FitAddon | null>(null);
const wsRef = useRef<WebSocket | null>(null);
const [isConnected, setIsConnected] = useState(false);
const [isConnected, setIsConnectedLocal] = useState(false);
const [isConnecting, setIsConnecting] = useState(false);
const [_error, setError] = useState<string | null>(null);
const [cliAvailable, setCliAvailable] = useState<boolean | null>(null);
const [contextSet, setContextSet] = useState(false);
const [settingContext, setSettingContext] = useState(false);
// Sync local connection state to global context
const setIsConnected = useCallback((connected: boolean) => {
setIsConnectedLocal(connected);
setGlobalConnected(connected);
}, [setGlobalConnected]);
// Check CLI availability
useEffect(() => {
fetch('/api/terminal/status')
@@ -251,9 +259,13 @@ export const ClaudeTerminal: React.FC<ClaudeTerminalProps> = ({
if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN || !selectedStudy?.id) return;
setSettingContext(true);
// Send context message - Claude should use CLAUDE.md and .claude/skills/ for guidance
const contextMessage = `Context: Working on study "${selectedStudy.id}" at studies/${selectedStudy.id}/. ` +
`Read .claude/skills/ for task protocols. Use atomizer conda env. Acknowledge briefly.`;
// Send context message with POS bootstrap instructions and study context
const contextMessage =
`You are helping with Atomizer optimization. ` +
`First read: .claude/skills/00_BOOTSTRAP.md for task routing. ` +
`Then follow the Protocol Execution Framework. ` +
`Study context: Working on "${selectedStudy.id}" at studies/${selectedStudy.id}/. ` +
`Use atomizer conda env. Acknowledge briefly.`;
wsRef.current.send(JSON.stringify({ type: 'input', data: contextMessage + '\n' }));
// Mark as done after Claude has had time to process

50
atomizer-dashboard/frontend/src/components/GlobalClaudeTerminal.tsx Normal file
View File

@@ -0,0 +1,50 @@
import React from 'react';
import { useClaudeTerminal } from '../context/ClaudeTerminalContext';
import { ClaudeTerminal } from './ClaudeTerminal';
import { Terminal } from 'lucide-react';
/**
* GlobalClaudeTerminal - A floating terminal that persists across page navigation
*
* This component renders at the App level and maintains the Claude Code session
* even when the user navigates between pages. It can be minimized to a floating
* button or expanded to a side panel.
*/
export const GlobalClaudeTerminal: React.FC = () => {
const { isOpen, setIsOpen, isExpanded, setIsExpanded, isConnected } = useClaudeTerminal();
// Floating button when terminal is closed
if (!isOpen) {
return (
<button
onClick={() => setIsOpen(true)}
className={`fixed bottom-6 right-6 p-4 rounded-full shadow-lg transition-all z-50 ${
isConnected
? 'bg-green-600 hover:bg-green-500'
: 'bg-primary-600 hover:bg-primary-500'
}`}
title={isConnected ? 'Claude Terminal (Connected)' : 'Open Claude Terminal'}
>
<Terminal className="w-6 h-6 text-white" />
{isConnected && (
<span className="absolute -top-1 -right-1 w-3 h-3 bg-green-400 rounded-full border-2 border-dark-900 animate-pulse" />
)}
</button>
);
}
// Terminal panel
return (
<div className={`fixed z-50 transition-all duration-200 ${
isExpanded
? 'inset-4'
: 'bottom-6 right-6 w-[650px] h-[500px]'
}`}>
<ClaudeTerminal
isExpanded={isExpanded}
onToggleExpand={() => setIsExpanded(!isExpanded)}
onClose={() => setIsOpen(false)}
/>
</div>
);
};

42
atomizer-dashboard/frontend/src/context/ClaudeTerminalContext.tsx Normal file
View File

@@ -0,0 +1,42 @@
import React, { createContext, useContext, useState, ReactNode } from 'react';
interface ClaudeTerminalContextType {
// Terminal visibility state
isOpen: boolean;
setIsOpen: (open: boolean) => void;
isExpanded: boolean;
setIsExpanded: (expanded: boolean) => void;
// Connection state (updated by the terminal component)
isConnected: boolean;
setIsConnected: (connected: boolean) => void;
}
const ClaudeTerminalContext = createContext<ClaudeTerminalContextType | undefined>(undefined);
export const ClaudeTerminalProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
const [isOpen, setIsOpen] = useState(false);
const [isExpanded, setIsExpanded] = useState(false);
const [isConnected, setIsConnected] = useState(false);
return (
<ClaudeTerminalContext.Provider value={{
isOpen,
setIsOpen,
isExpanded,
setIsExpanded,
isConnected,
setIsConnected
}}>
{children}
</ClaudeTerminalContext.Provider>
);
};
export const useClaudeTerminal = () => {
const context = useContext(ClaudeTerminalContext);
if (context === undefined) {
throw new Error('useClaudeTerminal must be used within a ClaudeTerminalProvider');
}
return context;
};

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

@@ -4,9 +4,9 @@ import { Terminal } from 'lucide-react';
import { useOptimizationWebSocket } from '../hooks/useWebSocket';
import { apiClient } from '../api/client';
import { useStudy } from '../context/StudyContext';
import { useClaudeTerminal } from '../context/ClaudeTerminalContext';
import { Card } from '../components/common/Card';
import { ControlPanel } from '../components/dashboard/ControlPanel';
import { ClaudeTerminal } from '../components/ClaudeTerminal';
import { ParetoPlot } from '../components/ParetoPlot';
import { ParallelCoordinatesPlot } from '../components/ParallelCoordinatesPlot';
import { ParameterImportanceChart } from '../components/ParameterImportanceChart';
@@ -64,9 +64,8 @@ export default function Dashboard() {
// Chart library toggle: 'recharts' (faster) or 'plotly' (more interactive but slower)
const [chartLibrary, setChartLibrary] = useState<'plotly' | 'recharts'>('recharts');
// Claude chat panel state
const [chatOpen, setChatOpen] = useState(false);
const [chatExpanded, setChatExpanded] = useState(false);
// Claude terminal from global context
const { isOpen: claudeTerminalOpen, setIsOpen: setClaudeTerminalOpen, isConnected: claudeConnected } = useClaudeTerminal();
const showAlert = (type: 'success' | 'warning', message: string) => {
const id = alertIdCounter;
@@ -353,16 +352,21 @@ export default function Dashboard() {
<div className="flex gap-2">
{/* Claude Code Terminal Toggle Button */}
<button
onClick={() => setChatOpen(!chatOpen)}
onClick={() => setClaudeTerminalOpen(!claudeTerminalOpen)}
className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors ${
chatOpen
claudeTerminalOpen
? 'bg-primary-600 text-white'
: 'bg-dark-700 text-dark-200 hover:bg-dark-600 hover:text-white border border-dark-600'
: claudeConnected
? 'bg-green-700 text-white border border-green-600'
: 'bg-dark-700 text-dark-200 hover:bg-dark-600 hover:text-white border border-dark-600'
}`}
title="Open Claude Code terminal"
title={claudeConnected ? 'Claude Terminal (Connected)' : 'Open Claude Code terminal'}
>
<Terminal className="w-4 h-4" />
<span className="hidden sm:inline">Claude Code</span>
{claudeConnected && !claudeTerminalOpen && (
<span className="w-2 h-2 bg-green-400 rounded-full animate-pulse" />
)}
</button>
{selectedStudyId && (
<StudyReportViewer studyId={selectedStudyId} />
@@ -417,10 +421,10 @@ export default function Dashboard() {
<ControlPanel onStatusChange={refreshStudies} horizontal />
</div>
{/* Main Layout: Charts + Claude Terminal */}
<div className={`grid gap-4 ${chatOpen ? 'grid-cols-12' : 'grid-cols-1'}`}>
{/* Main Layout: Charts (Claude Terminal is now global/floating) */}
<div className="grid gap-4 grid-cols-1">
{/* Main Content - Charts stacked vertically */}
<main className={chatOpen ? 'col-span-7' : 'col-span-1'}>
<main>
{/* Study Name Header + Metrics in one row */}
<div className="mb-4 pb-3 border-b border-dark-600 flex items-center justify-between">
<div>
@@ -790,17 +794,6 @@ export default function Dashboard() {
/>
</div>
</main>
{/* Claude Code Terminal - Right Sidebar (wider for better visibility) */}
{chatOpen && (
<aside className="col-span-5 h-[calc(100vh-12rem)] sticky top-4">
<ClaudeTerminal
isExpanded={chatExpanded}
onToggleExpand={() => setChatExpanded(!chatExpanded)}
onClose={() => setChatOpen(false)}
/>
</aside>
)}
</div>
</div>
);

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

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
import {
FolderOpen,
Play,
Pause,
CheckCircle,
Clock,
AlertCircle,
@@ -64,6 +65,8 @@ const Home: React.FC = () => {
switch (status) {
case 'running':
return <Play className="w-3.5 h-3.5" />;
case 'paused':
return <Pause className="w-3.5 h-3.5" />;
case 'completed':
return <CheckCircle className="w-3.5 h-3.5" />;
case 'not_started':
@@ -81,6 +84,12 @@ const Home: React.FC = () => {
card: 'border-green-500/30 hover:border-green-500/50',
glow: 'shadow-green-500/10'
};
case 'paused':
return {
badge: 'bg-orange-500/20 text-orange-400 border-orange-500/30',
card: 'border-orange-500/30 hover:border-orange-500/50',
glow: 'shadow-orange-500/10'
};
case 'completed':
return {
badge: 'bg-blue-500/20 text-blue-400 border-blue-500/30',

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:8001', // Use 127.0.0.1 instead of localhost
target: 'http://127.0.0.1:8000', // Use 127.0.0.1 instead of localhost
changeOrigin: true,
secure: false,
ws: true,