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/QuestionBlock.js

@@ -0,0 +1,94 @@
+import { html, useState } from '../lib/preact.js';
+import { getStatusMeta } from '../utils/status.js';
+import { OptionButton } from './OptionButton.js';
+
+export function QuestionBlock({ questions, sessionId, status, onRespond }) {
+  const [freeformText, setFreeformText] = useState('');
+  const [focused, setFocused] = useState(false);
+  const meta = getStatusMeta(status);
+
+  if (!questions || questions.length === 0) return null;
+
+  // Only show the first question (sequential, not parallel)
+  const question = questions[0];
+  const remainingCount = questions.length - 1;
+  const options = question.options || [];
+
+  const handleOptionClick = (optionLabel) => {
+    onRespond(sessionId, optionLabel, false, options.length);
+  };
+
+  const handleFreeformSubmit = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (freeformText.trim()) {
+      onRespond(sessionId, freeformText.trim(), true, options.length);
+      setFreeformText('');
+    }
+  };
+
+  return html`
+    <div class="space-y-3" onClick=${(e) => e.stopPropagation()}>
+      <!-- Question Header Badge -->
+      ${question.header && html`
+        <span class="inline-flex rounded-full border px-2 py-1 font-mono text-micro uppercase tracking-[0.15em] ${meta.badge}">
+          ${question.header}
+        </span>
+      `}
+
+      <!-- Question Text -->
+      <p class="font-medium text-bright">${question.question || question.text}</p>
+
+      <!-- Options -->
+      ${options.length > 0 && html`
+        <div class="space-y-2">
+          ${options.map((opt, i) => html`
+            <${OptionButton}
+              key=${i}
+              number=${i + 1}
+              label=${opt.label || opt}
+              description=${opt.description}
+              onClick=${() => handleOptionClick(opt.label || opt)}
+            />
+          `)}
+        </div>
+      `}
+
+      <!-- Freeform Input -->
+      <form onSubmit=${handleFreeformSubmit} class="flex items-end gap-2.5">
+        <textarea
+          value=${freeformText}
+          onInput=${(e) => {
+            setFreeformText(e.target.value);
+            e.target.style.height = 'auto';
+            e.target.style.height = e.target.scrollHeight + 'px';
+          }}
+          onKeyDown=${(e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+              e.preventDefault();
+              handleFreeformSubmit(e);
+            }
+          }}
+          onFocus=${() => setFocused(true)}
+          onBlur=${() => setFocused(false)}
+          placeholder="Type a response..."
+          rows="1"
+          class="flex-1 resize-none overflow-hidden rounded-xl border border-selection/75 bg-bg/70 px-3 py-2 text-sm text-fg placeholder:text-dim focus:outline-none"
+          style=${{ minHeight: '38px', maxHeight: '150px', borderColor: focused ? meta.borderColor : undefined }}
+        />
+        <button
+          type="submit"
+          class="shrink-0 rounded-xl px-3 py-2 text-sm font-medium transition-all hover:-translate-y-0.5 hover:brightness-110"
+          style=${{ backgroundColor: meta.borderColor, color: '#0a0f18' }}
+        >
+          Send
+        </button>
+      </form>
+
+      <!-- More Questions Indicator -->
+      ${remainingCount > 0 && html`
+        <p class="font-mono text-label text-dim">+ ${remainingCount} more question${remainingCount > 1 ? 's' : ''} after this</p>
+      `}
+    </div>
+  `;
+}