refactor(dashboard): extract modular Preact component structure

Replace the monolithic single-file dashboards (dashboard.html, dashboard-preact.html) with a proper modular directory structure: dashboard/ index.html - Entry point, loads main.js main.js - App bootstrap, mounts <App> to #root styles.css - Global styles (dark theme, typography) components/ App.js - Root component, state management, polling Header.js - Top bar with refresh/timing info Sidebar.js - Project tree navigation SessionCard.js - Individual session card with status/actions SessionGroup.js - Group sessions by project path Modal.js - Full conversation viewer overlay ChatMessages.js - Message list with role styling MessageBubble.js - Individual message with markdown QuestionBlock.js - User question input with quick options EmptyState.js - "No sessions" placeholder OptionButton.js - Quick response button component SimpleInput.js - Text input with send button lib/ preact.js - Preact + htm ESM bundle (CDN shim) markdown.js - Lightweight markdown-to-HTML renderer utils/ api.js - fetch wrappers for /api/* endpoints formatting.js - Time formatting, truncation helpers status.js - Session status logic, action availability This structure enables: - Browser-native ES modules (no build step required) - Component reuse and isolation - Easier styling and theming - IDE support for component navigation Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-25 15:01:35 -05:00
parent 9cd91f6b4e
commit da08d7a588
22 changed files with 1961 additions and 3000 deletions
--- a/dashboard/components/ChatMessages.js
+++ b/dashboard/components/ChatMessages.js
@@ -0,0 +1,70 @@
+import { html, useRef, useEffect } from '../lib/preact.js';
+import { getUserMessageBg } from '../utils/status.js';
+import { MessageBubble, filterDisplayMessages } from './MessageBubble.js';
+
+export function ChatMessages({ messages, status }) {
+  const containerRef = useRef(null);
+  const userBgClass = getUserMessageBg(status);
+  const wasAtBottomRef = useRef(true);
+  const prevMessagesLenRef = useRef(0);
+
+  // Scroll to bottom on initial mount
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    // Always scroll to bottom on first render
+    container.scrollTop = container.scrollHeight;
+  }, []);
+
+  // Check if scrolled to bottom before render
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const checkScroll = () => {
+      const threshold = 50;
+      const isAtBottom = container.scrollHeight - container.scrollTop - container.clientHeight < threshold;
+      wasAtBottomRef.current = isAtBottom;
+    };
+
+    container.addEventListener('scroll', checkScroll);
+    return () => container.removeEventListener('scroll', checkScroll);
+  }, []);
+
+  // Scroll to bottom on new messages if user was at bottom
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || !messages) return;
+
+    const hasNewMessages = messages.length > prevMessagesLenRef.current;
+    prevMessagesLenRef.current = messages.length;
+
+    if (hasNewMessages && wasAtBottomRef.current) {
+      container.scrollTop = container.scrollHeight;
+    }
+  }, [messages]);
+
+  if (!messages || messages.length === 0) {
+    return html`
+      <div class="flex h-full items-center justify-center rounded-xl border border-dashed border-selection/70 bg-bg/30 px-4 text-center text-sm text-dim">
+        No messages yet
+      </div>
+    `;
+  }
+
+  const displayMessages = filterDisplayMessages(messages).slice(-20);
+
+  return html`
+    <div ref=${containerRef} class="h-full space-y-2.5 overflow-y-auto overflow-x-hidden pr-0.5">
+      ${displayMessages.map((msg, i) => html`
+        <${MessageBubble}
+          key=${i}
+          msg=${msg}
+          userBg=${userBgClass}
+          compact=${true}
+        />
+      `)}
+    </div>
+  `;
+}