feat(dashboard): rewrite UI with Preact for reactive session monitoring

Browse Source

Replace vanilla JS dashboard with a modern Preact-based implementation:

- Component architecture: Header, SessionCard, SessionGroup, Modal,
  ChatMessages, QuestionBlock, SimpleInput, OptionButton, EmptyState
- Status-grouped display: sessions organized by needs_attention, active,
  starting, and done with color-coded visual indicators
- Real-time conversation view: fetch and display chat history from
  Claude Code JSONL logs with auto-scroll on new messages
- Inline response input: send messages directly from cards without
  opening modal, supports both structured options and freeform text
- Modal detail view: full conversation with markdown rendering,
  timestamps, and keyboard navigation (Enter to send, Escape to close)
- Smart polling: 3-second state refresh with silent conversation
  updates for active sessions to minimize UI flicker
- Flexoki color scheme: custom dark theme with attention (amber),
  active (green), starting (blue), and done (purple) status colors
- Berkeley Mono font stack with graceful fallbacks
- Tailwind CSS via CDN with custom color configuration
- Responsive card layout with fixed 600px height and overflow handling

The dashboard provides a unified view for monitoring multiple Claude
Code sessions, detecting when agents need human input, and responding
directly via Zellij pane injection.

...

This commit is contained in:

teernisse

2026-02-25 10:01:29 -05:00

parent b2a5712202

commit 4d2fcc9a3b

1 changed files with 1212 additions and 0 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

1212

dashboard-preact.html Normal file

File diff suppressed because it is too large Load Diff