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

feat: Add Claude Code terminal integration to dashboard

Browse Source 
- 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>
This commit is contained in:
Antoine
2025-12-04 15:02:13 -05:00
parent 8cbdbcad78
commit 9eed4d81eb
23 changed files with 5060 additions and 339 deletions
Download Patch File Download Diff File Expand all files Collapse all files

296
atomizer-dashboard/README.md
View File

@@ -4,20 +4,29 @@ Real-time optimization monitoring and control dashboard for the Atomizer optimiz
## Features
### ✅ Live Dashboard (Current)
### Core Dashboard
- **Real-time WebSocket streaming** - Instant updates on new trials
- **Interactive charts** - Convergence plots and parameter space visualization
- **Interactive charts** - Convergence, Pareto front, parallel coordinates, parameter importance
- **Chart library toggle** - Switch between Plotly (interactive) and Recharts (fast)
- **Pruning alerts** - Toast notifications for failed trials
- **Data export** - Download trial history as JSON or CSV
- **Study discovery** - Automatically detects all active studies
- **Connection monitoring** - WebSocket status indicator
### 🔮 Future Features
- React + TypeScript frontend
- Study Configurator page
- Results Report Viewer
- LLM chat interface for configuration
- Study control (start/stop/pause)
### Optimization Control
- **Start/Kill optimization** - Launch or force-kill optimization processes
- **Validate top N** - Run FEA validation on best neural network predictions
- **Process monitoring** - Real-time status of running optimizations
- **Console output** - Live logs from optimization process
### Claude Code Integration
- **Embedded terminal** - Full Claude Code CLI in the dashboard
- **Context-aware** - Automatically loads CLAUDE.md and .claude/ skills
- **WebSocket PTY** - Real terminal emulation with xterm.js
### Study Reports
- **Markdown viewer** - View study README and reports
- **Auto-generated reports** - Generate OPTIMIZATION_REPORT.md
---
@@ -29,23 +38,27 @@ cd atomizer-dashboard/backend
pip install -r requirements.txt
```
### 2. Start the Backend
### 2. Install Frontend Dependencies
```bash
cd atomizer-dashboard/frontend
npm install
```
### 3. Start the Backend
```bash
# From backend directory
python -m uvicorn api.main:app --reload --host 0.0.0.0 --port 8000
```
### 3. Access the Dashboard
Open your browser: **http://localhost:8000**
### 4. Monitor an Optimization
### 4. Start the Frontend
```bash
# In a separate terminal
cd ../..
python studies/circular_plate_frequency_tuning/run_optimization.py
# From frontend directory
npm run dev
```
The dashboard will automatically detect the running study and stream updates in real-time!
### 5. Access the Dashboard
- **Frontend**: http://localhost:5173
- **API docs**: http://localhost:8000/docs
---
@@ -54,18 +67,14 @@ The dashboard will automatically detect the running study and stream updates in
### Backend Stack
- **FastAPI** - Modern async Python web framework
- **Uvicorn** - ASGI server
- **Watchdog** - File system event monitoring
- **WebSockets** - Bidirectional real-time communication
- **WebSockets** - Real-time communication
- **psutil** - Process management
### Current Frontend
- **HTML/CSS/JavaScript** - Single-page application
- **Chart.js** - Interactive charts
- **WebSocket API** - Real-time data streaming
### Planned Frontend
### Frontend Stack
- **React 18** + **Vite** + **TypeScript**
- **TailwindCSS** - Utility-first CSS
- **Recharts** - React charting library
- **Recharts** / **Plotly** - Charting libraries
- **xterm.js** - Terminal emulator
- **React Query** - Server state management
---
@@ -74,18 +83,36 @@ The dashboard will automatically detect the running study and stream updates in
```
atomizer-dashboard/
├── backend/ ✅ COMPLETE
├── backend/
│ ├── api/
│ │ ├── main.py # FastAPI app entry
│ │ ├── main.py # FastAPI app entry
│ │ ├── routes/
│ │ │ └── optimization.py # REST endpoints
│ │ │ ├── optimization.py # Study REST endpoints
│ │ │ ├── claude.py # Claude chat API (legacy)
│ │ │ └── terminal.py # Claude Code terminal WebSocket
│ │ ├── services/
│ │ │ └── claude_agent.py # Anthropic API agent (legacy)
│ │ └── websocket/
│ │ └── optimization_stream.py # WebSocket + file watching
│ ├── requirements.txt
│ └── README.md # Backend API docs
│ │ └── optimization_stream.py # Real-time trial streaming
│ └── requirements.txt
│
├── frontend/
│ ├── src/
│ │ ├── components/
│ │ │ ├── ClaudeTerminal.tsx # Claude Code terminal
│ │ │ ├── ConsoleOutput.tsx # Optimization logs
│ │ │ ├── StudyReportViewer.tsx # Markdown report viewer
│ │ │ ├── dashboard/
│ │ │ │ ├── ControlPanel.tsx # Start/Stop/Validate
│ │ │ │ └── MetricCard.tsx
│ │ │ └── plotly/ # Plotly chart components
│ │ ├── pages/
│ │ │ ├── Home.tsx # Study selection
│ │ │ └── Dashboard.tsx # Main monitoring view
│ │ └── context/
│ │ └── StudyContext.tsx # Global study state
│ └── package.json
│
├── dashboard-test.html ✅ Basic live dashboard
├── dashboard-enhanced.html ✅ Enhanced with charts & export
└── README.md (this file)
```
@@ -94,118 +121,77 @@ atomizer-dashboard/
## API Documentation
### REST Endpoints
#### Studies
- `GET /api/optimization/studies` - List all studies
- `GET /api/optimization/studies/{id}/status` - Get study status
- `GET /api/optimization/studies/{id}/history` - Get trial history
- `GET /api/optimization/studies/{id}/pruning` - Get pruning diagnostics
- `GET /api/optimization/studies/{id}/config` - Get optimization config
- `GET /api/optimization/studies/{id}/readme` - Get study README
- `GET /api/optimization/studies/{id}/report` - Get generated report
- `GET /api/optimization/studies/{id}/console` - Get console output
- `GET /api/optimization/studies/{id}/process` - Get process status
- `GET /api/optimization/studies/{id}/metadata` - Get study metadata
- `GET /api/optimization/studies/{id}/pareto-front` - Get Pareto front
### WebSocket Endpoint
- `ws://localhost:8000/api/ws/optimization/{study_id}` - Real-time trial stream
#### Control
- `POST /api/optimization/studies/{id}/start` - Start optimization
- `POST /api/optimization/studies/{id}/stop` - Kill optimization process
- `POST /api/optimization/studies/{id}/validate` - Validate top N predictions
- `POST /api/optimization/studies/{id}/report/generate` - Generate report
- `POST /api/optimization/studies/{id}/optuna-dashboard` - Launch Optuna dashboard
**Message Types**:
- `connected` - Initial connection confirmation
- `trial_completed` - New trial finished
- `new_best` - New best trial found
- `progress` - Progress update (X/Y trials)
- `trial_pruned` - Trial pruned with diagnostics
#### Claude Code
- `GET /api/terminal/status` - Check Claude CLI availability
- `WebSocket /api/terminal/claude` - Terminal session
### WebSocket Endpoints
- `ws://localhost:8000/api/ws/optimization/{study_id}` - Trial stream
- `ws://localhost:8000/api/terminal/claude` - Claude Code terminal
---
## Dashboard Features
## Claude Code Terminal
### Convergence Chart
Line chart showing:
- **Objective value** progression over trials
- **Best so far** trajectory
- Real-time updates without animation lag
The dashboard includes an embedded Claude Code terminal that provides the full CLI experience:
### Parameter Space Chart
Scatter plot showing:
- 2D visualization of first two design variables
- Points colored by objective value
- Best trial highlighted in green
### Features
- Real terminal emulation with xterm.js
- WebSocket-based PTY communication
- Automatic context loading (CLAUDE.md, .claude/skills/)
- Expand/minimize mode
### Pruning Alerts
- Toast notifications for pruned trials
- Auto-dismiss after 5 seconds
- Warning styling (orange) with pruning cause
### Requirements
- Claude Code CLI installed: `npm install -g @anthropic-ai/claude-code`
- Authenticated with Claude Code
### Data Export
- **Export JSON** - Download complete trial history
- **Export CSV** - Export as spreadsheet-compatible format
- Success alerts on export
### Metrics Dashboard
- **Total Trials** - Number of completed trials
- **Best Value** - Best objective value found
- **Avg Objective** - Average objective value
- **Pruned** - Number of failed trials
### Usage
1. Click "Claude Code" button in dashboard header
2. Click "Connect" to start a session
3. Claude starts in Atomizer root with full context
4. Use all Claude Code features (tools, file editing, etc.)
---
## Testing
## Control Panel
### Verify Backend is Running
```bash
curl http://localhost:8000/health
# Should return: {"status":"healthy"}
### Start Optimization
Launches `run_optimization.py` with configurable options:
- Max iterations
- FEA batch size
- Tuning trials
- Ensemble size
- Patience
- Fresh start option
curl http://localhost:8000/api/optimization/studies
# Should return: {"studies":[...]}
```
### Kill Process
Force-kills the optimization process and all child processes:
- Gets child processes before killing parent
- Kills children bottom-up
- Uses SIGKILL for immediate termination
### Test WebSocket Connection
```bash
# Using wscat (npm install -g wscat)
wscat -c ws://localhost:8000/api/ws/optimization/circular_plate_frequency_tuning
# Or using Python
python -c "
import asyncio
import websockets
import json
async def test():
uri = 'ws://localhost:8000/api/ws/optimization/circular_plate_frequency_tuning'
async with websockets.connect(uri) as ws:
while True:
msg = await ws.recv()
print(json.loads(msg))
asyncio.run(test())
"
```
---
## Documentation
- [Master Plan](../docs/DASHBOARD_MASTER_PLAN.md) - Complete architecture roadmap
- [Implementation Status](../docs/DASHBOARD_IMPLEMENTATION_STATUS.md) - Current progress
- [Session Summary](../docs/DASHBOARD_SESSION_SUMMARY.md) - Implementation notes
- [Backend API](backend/README.md) - Detailed API documentation
---
## Next Steps
### Short Term
1. Build full React + Vite + TypeScript frontend
2. Migrate to Recharts for React-compatible charts
3. Add parameter importance visualization
4. Polish UI/UX with TailwindCSS
### Medium Term
5. Build Study Configurator page
6. Build Results Report Viewer page
7. Add study control (start/stop/pause)
8. Implement authentication
### Long Term
9. Add LLM chat interface for configuration
10. Deploy with Docker
11. Add user management
12. Implement study templates
### Validate Top N
Runs FEA validation on the best N neural network predictions to verify accuracy.
---
@@ -214,23 +200,49 @@ asyncio.run(test())
### Dashboard shows "Failed to fetch"
- Ensure backend is running: `http://localhost:8000/health`
- Check CORS settings in `backend/api/main.py`
- Access dashboard via `http://localhost:8000` (not `file://`)
### WebSocket not connecting
- Verify backend is running on port 8000
- Check firewall settings
- Look for errors in browser console (F12)
### No studies appearing
- Ensure studies directory exists: `studies/`
- Check study has `1_setup/optimization_config.json`
- Verify `2_results/optimization_history_incremental.json` exists
### Claude Code terminal not connecting
- Verify Claude CLI is installed: `claude --version`
- Check that you're authenticated with Claude Code
- Look for errors in browser console
### Charts not updating
- Check WebSocket connection status in dashboard
- Verify file watcher is running (check backend console)
- Ensure optimization is actually running and creating trials
- Check WebSocket connection status
- Verify optimization is running
- Check backend console for errors
### Process won't stop
- Use "Kill Process" button (force kill)
- Check Task Manager for orphaned processes
---
**Status**: ✅ Live dashboard functional and ready for use!
## Development
### Running Tests
```bash
# Backend
cd backend
pytest
# Frontend
cd frontend
npm run test
```
### Building for Production
```bash
# Frontend
cd frontend
npm run build
```
### Type Checking
```bash
cd frontend
npx tsc --noEmit
```
---
**Status**: Full React dashboard with Claude Code integration