From 4d2fcc9a3b2b4e21d0e3be98a5e370586be9eae1 Mon Sep 17 00:00:00 2001 From: teernisse Date: Wed, 25 Feb 2026 10:01:29 -0500 Subject: [PATCH] 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. --- dashboard-preact.html | 1212 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 1212 insertions(+) create mode 100644 dashboard-preact.html diff --git a/dashboard-preact.html b/dashboard-preact.html new file mode 100644 index 0000000..1799ca4 --- /dev/null +++ b/dashboard-preact.html @@ -0,0 +1,1212 @@ + + + + + + Agent Mission Control + + + + + + + + + + + +
+ + + +