teernisse 4d2fcc9a3b feat(dashboard): rewrite UI with Preact for reactive session monitoring ...

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.

2026-02-25 11:21:15 -05:00

47 KiB

Raw Blame History

View Raw