feat(dashboard): React Vite real-time monitoring dashboard

[renakaagusta]

Summary

• Adds dashboard/ React + Vite + TypeScript + Tailwind web app for monitoring Claude Code activity in real time
• Adds lightweight /dashboard/* aiohttp endpoints to ApiServer (no NaCl encryption, Bearer/query-param token auth)
• Wires new endpoints into orchestrator/lifecycle.py via existing setter pattern

What's in the dashboard

Page	Description
Status	Provider, model, uptime, connection counts — auto-refreshes every 5s
Live Stream	Real-time Claude Code output via WebSocket terminal; DOM-direct append avoids React re-renders per chunk
Sessions & Tasks	Active sessions from sessions.json and task list from TaskHub — refreshes every 3s
Logs	Browse and read ~/.ductor/logs/ files

New Python endpoints

Method	Path	Auth
GET	/dashboard/status	Bearer
GET	/dashboard/sessions	Bearer
GET	/dashboard/tasks	Bearer
GET	/dashboard/logs	Bearer
GET	/dashboard/logs/{filename}	Bearer
WS	/dashboard/stream	?token= query param

All dashboard endpoints reuse the existing config.api.token for auth. The WebSocket uses query-param token because browsers cannot set custom headers on WebSocket upgrade requests.

Usage

# 1. Enable API in ~/.ductor/config/config.json
#    "api": { "enabled": true, "token": "your-token", "allow_public": false }

# 2. Restart ductor
ductor restart

# 3. Run dashboard
cd dashboard
npm install
npm run dev
# → http://localhost:5173

# 4. Set token in browser console
localStorage.setItem('ductor_token', 'your-token')

Architecture decisions

• No NaCl in browser: The existing /ws uses NaCl Box E2E encryption — impractical to implement in a browser. Dedicated /dashboard/* endpoints with simple Bearer token auth are appropriate for local use.
• DOM-direct streaming: The Terminal component appends text nodes directly to a <pre> ref, bypassing React reconciler. Only the latest chunk is React state — preventing one re-render per streamed character.
• Auto-reconnect: useWebSocket hook uses exponential backoff (1s → 30s cap) with unmount-safe cleanup.
• Zero new Python deps: All backend changes use only aiohttp (already a core dependency).

Post-Deploy Monitoring & Validation

• Logs: ductor logs — watch for Dashboard WebSocket connected / disconnected messages
• Expected healthy signals: GET /dashboard/status returns 200 with "status": "ok"; WS /dashboard/stream connects and receives {"type": "ping"} immediately
• Failure signals: 401 = wrong token; 503 = api.enabled: false; WS disconnect loop = check api.token is set
• No production impact: Dashboard is opt-in via api.enabled: true, localhost-only by default

---

🤖 Generated with Claude Code