William Valentin
130711a377
- README: add Web UI Dashboard section, update features list with all current capabilities (multi-channel, media pipeline, sandboxing, etc.), expand model providers table, update architecture diagram - CHANGELOG: add P7 entries (dashboard SPA, 4 new gateway handlers) - state.json: add P7 entry with all 6 phases and file lists, update overall_progress to reflect P0-P7 completion - web-ui-dashboard.md: mark as completed with detailed phase outcomes
117 lines
5.1 KiB
Markdown
117 lines
5.1 KiB
Markdown
# Flynn Web UI / Control Dashboard
|
|
|
|
**Date:** 2026-02-07
|
|
**Priority:** P7
|
|
**Status:** Completed
|
|
|
|
## Overview
|
|
|
|
Upgrade the existing minimal web UI (`src/gateway/ui/`) into a proper control dashboard with:
|
|
1. **Dashboard** — system health, sessions, tools, channels, usage stats
|
|
2. **Chat** — real-time streaming chat with token-by-token content, session management
|
|
3. **Sessions** — browse/switch/delete sessions, view history
|
|
4. **Settings** — view/edit configuration, manage channels, view/edit hooks
|
|
|
|
## Architecture
|
|
|
|
### Tech Stack
|
|
|
|
- **No build step** — vanilla HTML/CSS/JS (consistent with existing UI)
|
|
- **SPA routing** — hash-based (`#/`, `#/chat`, `#/sessions`, `#/settings`)
|
|
- **WebSocket** — reuse existing JSON-RPC protocol for all data
|
|
- **CSS** — extend existing `style.css` design system (dark theme, design tokens)
|
|
- **Marked.js** — CDN for markdown rendering (already used)
|
|
- **Highlight.js** — CDN for syntax highlighting in code blocks
|
|
|
|
### File Structure
|
|
|
|
```
|
|
src/gateway/ui/
|
|
├── index.html # SPA shell (nav + router)
|
|
├── style.css # Extended design system
|
|
├── app.js # SPA router + WebSocket client
|
|
├── pages/
|
|
│ ├── dashboard.js # Dashboard page
|
|
│ ├── chat.js # Chat page
|
|
│ ├── sessions.js # Sessions browser
|
|
│ └── settings.js # Settings page
|
|
└── lib/
|
|
└── ws-client.js # WebSocket RPC client (shared)
|
|
```
|
|
|
|
### Backend Changes
|
|
|
|
1. **`content` streaming events** — `agent.send` should emit `content` events with text chunks as the model generates them. Currently only emits `tool_start`, `tool_end`, `done`. Requires wiring the model client's streaming iterator through the agent.
|
|
|
|
2. **New gateway methods**:
|
|
- `sessions.delete` — clear a session's history
|
|
- `sessions.switch` — switch the connection's active session
|
|
- `system.channels` — list active channel adapters and their status
|
|
- `system.usage` — aggregated usage stats (tokens, cost)
|
|
- `config.channels` — channel-specific configuration view
|
|
|
|
3. **Static file serving** — extend `static.ts` to serve `.js` files from subdirectories (already supports `.js`, but need to handle nested paths under `pages/` and `lib/`)
|
|
|
|
4. **Content-type additions** — add `.png`, `.ico`, `.woff2` to `CONTENT_TYPES` in `static.ts` (for future assets).
|
|
|
|
## Implementation Phases
|
|
|
|
### Phase 1: Backend enhancements — DONE
|
|
- Added `sessions.delete` handler (clears session history)
|
|
- Added `sessions.switch` handler (switches WS connection to different session)
|
|
- Added `system.channels` handler (lists active channel adapters and status)
|
|
- Added `system.usage` handler (aggregated usage stats)
|
|
- Extended `static.ts` with `.mjs`, `.png`, `.ico`, `.woff2` content types
|
|
- Wired `channelRegistry` into `GatewayServerConfig` (duck-typed interface)
|
|
- Note: Streaming `content` events deferred — chat page works with `done` event containing full response
|
|
|
|
### Phase 2: SPA shell + WebSocket client — DONE
|
|
- Rewrote `index.html` as SPA shell with sidebar nav and hash router
|
|
- Created `lib/ws-client.js` — promise-based JSON-RPC client with auto-reconnect, event streaming
|
|
- Created `app.js` — page router with lifecycle (render/teardown), connection status indicator
|
|
- Extended `style.css` with ~500 lines for SPA layout, sidebar, stats grid, chat, sessions, settings
|
|
|
|
### Phase 3: Dashboard page — DONE
|
|
- Health cards (status, version, uptime, connections, sessions, tools)
|
|
- Channel status cards with colored dots
|
|
- Usage summary section
|
|
- Auto-refresh every 10 seconds
|
|
|
|
### Phase 4: Chat page — DONE
|
|
- Session selector dropdown with new session button
|
|
- Load history button
|
|
- Streaming tool events (collapsible with spinner/checkmark)
|
|
- Markdown rendering with syntax highlighting (marked.js + highlight.js)
|
|
- Enter to send, Shift+Enter for newline, auto-resizing textarea
|
|
- Works with `done` event (full response), ready for future `content` streaming events
|
|
|
|
### Phase 5: Sessions page — DONE
|
|
- Session list table with ID, message count, and actions
|
|
- Click to view full session history
|
|
- Delete button with confirmation dialog
|
|
|
|
### Phase 6: Settings page — DONE
|
|
- Editable hook patterns (confirm/log/silent) with save button via `config.patch`
|
|
- Tool list table with name and description
|
|
- Channel status grid
|
|
- Read-only redacted config JSON viewer
|
|
|
|
## Files Created/Modified
|
|
|
|
### New Files
|
|
- `src/gateway/ui/app.js` — SPA router
|
|
- `src/gateway/ui/lib/ws-client.js` — WebSocket RPC client
|
|
- `src/gateway/ui/pages/dashboard.js` — Dashboard page
|
|
- `src/gateway/ui/pages/chat.js` — Chat page
|
|
- `src/gateway/ui/pages/sessions.js` — Sessions page
|
|
- `src/gateway/ui/pages/settings.js` — Settings page
|
|
|
|
### Modified Files
|
|
- `src/gateway/ui/index.html` — Rewritten as SPA shell
|
|
- `src/gateway/ui/style.css` — Extended with ~500 lines
|
|
- `src/gateway/static.ts` — Added content types
|
|
- `src/gateway/server.ts` — Added `channelRegistry` to config
|
|
- `src/gateway/handlers/system.ts` — Added `system.channels` and `system.usage`
|
|
- `src/gateway/handlers/sessions.ts` — Added `sessions.delete` and `sessions.switch`
|
|
- `src/daemon/index.ts` — Wired channelRegistry into gateway
|