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>

dashboard/components/MessageBubble.js

@@ -0,0 +1,54 @@
+import { html } from '../lib/preact.js';
+import { renderContent, renderToolCalls, renderThinking } from '../lib/markdown.js';
+
+/**
+ * Single message bubble used by both the card chat view and modal view.
+ * All message rendering logic lives here — card and modal only differ in
+ * container layout, not in how individual messages are rendered.
+ *
+ * @param {object}  msg       - Message object: { role, content, thinking, tool_calls, timestamp }
+ * @param {string}  userBg    - Tailwind classes for user message background
+ * @param {boolean} compact   - true = card view (smaller), false = modal view (larger)
+ * @param {function} formatTime - Optional timestamp formatter (modal only)
+ */
+export function MessageBubble({ msg, userBg, compact = false, formatTime }) {
+  const isUser = msg.role === 'user';
+  const pad = compact ? 'px-3 py-2.5' : 'px-4 py-3';
+  const maxW = compact ? 'max-w-[92%]' : 'max-w-[86%]';
+
+  return html`
+    <div class="flex ${isUser ? 'justify-end' : 'justify-start'} animate-fade-in-up">
+      <div
+        class="${maxW} rounded-2xl ${pad} ${
+          isUser
+            ? `${userBg} rounded-br-md shadow-[0_3px_8px_rgba(16,24,36,0.22)]`
+            : 'border border-selection/75 bg-surface2/75 text-fg rounded-bl-md'
+        }"
+      >
+        <div class="mb-1 font-mono text-micro uppercase tracking-[0.14em] text-dim">
+          ${isUser ? 'Operator' : 'Agent'}
+        </div>
+        ${msg.thinking && renderThinking(msg.thinking)}
+        <div class="whitespace-pre-wrap break-words text-ui font-chat">
+          ${renderContent(msg.content)}
+        </div>
+        ${renderToolCalls(msg.tool_calls)}
+        ${formatTime && msg.timestamp && html`
+          <div class="mt-2 font-mono text-label text-dim">
+            ${formatTime(msg.timestamp)}
+          </div>
+        `}
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * Filter messages for display — removes tool-call-only messages
+ * that have no text or thinking (would render as empty bubbles).
+ */
+export function filterDisplayMessages(messages) {
+  return messages.filter(msg =>
+    msg.content || msg.thinking || msg.role === 'user'
+  );
+}