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 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Agent Mission Control</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet">
+
+  <!-- Tailwind CDN -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            bg: '#060d1a',
+            surface: '#0e1728',
+            surface2: '#16233a',
+            selection: '#2a3c5c',
+            fg: '#d9e3f7',
+            bright: '#f7faff',
+            dim: '#92a6c9',
+            active: '#69c39a',
+            attention: '#d4ad5d',
+            starting: '#79a6ff',
+            done: '#d19189',
+          },
+          fontFamily: {
+            display: ['Space Grotesk', 'IBM Plex Sans', 'sans-serif'],
+            sans: ['IBM Plex Sans', 'system-ui', 'sans-serif'],
+            mono: ['IBM Plex Mono', 'SFMono-Regular', 'Menlo', 'monospace'],
+          },
+          fontSize: {
+            micro: ['clamp(0.68rem, 0.05vw + 0.66rem, 0.78rem)', { lineHeight: '1.35' }],
+            label: ['clamp(0.76rem, 0.07vw + 0.74rem, 0.86rem)', { lineHeight: '1.4' }],
+            ui: ['clamp(0.84rem, 0.09vw + 0.81rem, 0.94rem)', { lineHeight: '1.45' }],
+            body: ['clamp(0.88rem, 0.1vw + 0.85rem, 0.98rem)', { lineHeight: '1.55' }],
+            chat: ['clamp(0.92rem, 0.12vw + 0.89rem, 1.02rem)', { lineHeight: '1.6' }],
+          },
+          boxShadow: {
+            panel: '0 8px 18px rgba(10, 14, 20, 0.28)',
+            halo: '0 0 0 1px rgba(117, 138, 166, 0.12), 0 6px 14px rgba(10, 14, 20, 0.24)',
+          },
+          keyframes: {
+            float: {
+              '0%, 100%': { transform: 'translateY(0)' },
+              '50%': { transform: 'translateY(-4px)' },
+            },
+            fadeInUp: {
+              '0%': { opacity: '0', transform: 'translateY(10px)' },
+              '100%': { opacity: '1', transform: 'translateY(0)' },
+            },
+          },
+          animation: {
+            float: 'float 6s ease-in-out infinite',
+            'fade-in-up': 'fadeInUp 0.35s ease-out',
+          },
+        }
+      },
+      safelist: [
+        'bg-attention/30',
+        'bg-active/30',
+        'bg-starting/30',
+        'bg-done/30',
+        'bg-attention/18',
+        'bg-active/18',
+        'bg-starting/18',
+        'bg-done/18',
+        'bg-selection/80',
+        'border-attention/40',
+        'border-active/40',
+        'border-starting/40',
+        'border-done/40',
+        'border-l-attention',
+        'border-l-active',
+        'border-l-starting',
+        'border-l-done',
+        'text-attention',
+        'text-active',
+        'text-starting',
+        'text-done',
+        'border-emerald-500/30',
+        'bg-emerald-500/10',
+        'text-emerald-400',
+        'border-violet-500/30',
+        'bg-violet-500/10',
+        'text-violet-400',
+      ]
+    }
+  </script>
+
+  <style>
+    html {
+      font-size: 16px;
+    }
+
+    :root {
+      --bg-flat: #060d1a;
+      --glass-border: rgba(137, 171, 226, 0.24);
+    }
+
+    * {
+      scrollbar-width: thin;
+      scrollbar-color: #4e658d #0f1a2d;
+    }
+
+    body {
+      margin: 0;
+      font-family: 'IBM Plex Sans', system-ui, sans-serif;
+      background: var(--bg-flat);
+      min-height: 100vh;
+      color: #d9e3f7;
+      letter-spacing: 0.01em;
+    }
+
+    #app {
+      position: relative;
+      min-height: 100vh;
+    }
+
+    #app > * {
+      position: relative;
+      z-index: 1;
+    }
+
+    ::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+
+    ::-webkit-scrollbar-track {
+      background: #0f1a2d;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background: #4e658d;
+      border-radius: 4px;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background: #617ba8;
+    }
+
+    @keyframes pulse-attention {
+      0%, 100% {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+      }
+      50% {
+        opacity: 0.62;
+        transform: scale(1.12) translateY(-1px);
+      }
+    }
+
+    .pulse-attention {
+      animation: pulse-attention 2s ease-in-out infinite;
+    }
+
+    .glass-panel {
+      backdrop-filter: blur(10px);
+      border: 1px solid var(--glass-border);
+      background: rgba(11, 20, 35, 0.94);
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(177, 204, 252, 0.06);
+    }
+  </style>
+</head>
+<body class="min-h-screen text-fg antialiased">
+  <div id="app"></div>
+
+  <script type="module">
+    import { h, render } from 'https://esm.sh/preact@10.19.3';
+    import { useState, useEffect, useRef, useCallback } from 'https://esm.sh/preact@10.19.3/hooks';
+    import htm from 'https://esm.sh/htm@3.1.1';
+
+    const html = htm.bind(h);
+
+    // API Constants
+    const API_STATE = '/api/state';
+    const API_DISMISS = '/api/dismiss/';
+    const API_RESPOND = '/api/respond/';
+    const API_CONVERSATION = '/api/conversation/';
+    const POLL_MS = 3000;
+
+    // -----------------------------
+    // Helper Functions
+    // -----------------------------
+    function formatDuration(isoStart) {
+      if (!isoStart) return '';
+      const start = new Date(isoStart);
+      const now = new Date();
+      const mins = Math.max(0, Math.floor((now - start) / 60000));
+      if (mins < 60) return mins + 'm';
+      const hrs = Math.floor(mins / 60);
+      const remainMins = mins % 60;
+      return hrs + 'h ' + remainMins + 'm';
+    }
+
+    function formatTime(isoTime) {
+      if (!isoTime) return '';
+      const date = new Date(isoTime);
+      return date.toLocaleTimeString('en-US', {
+        hour: 'numeric',
+        minute: '2-digit',
+        hour12: true
+      });
+    }
+
+    // Render markdown-ish content with basic styling
+    function renderContent(content) {
+      if (!content) return '';
+
+      // Split by code blocks first
+      const parts = content.split(/(```[\s\S]*?```|`[^`]+`)/g);
+
+      return parts.map((part, i) => {
+        // Multi-line code block
+        if (part.startsWith('```') && part.endsWith('```')) {
+          const code = part.slice(3, -3).replace(/^\w+\n/, ''); // Remove language identifier
+          return html`<pre key=${i} class="my-2 overflow-x-auto whitespace-pre-wrap rounded-xl border border-selection/75 bg-bg/65 p-3 font-mono text-xs leading-relaxed">${code}</pre>`;
+        }
+        // Inline code
+        if (part.startsWith('`') && part.endsWith('`')) {
+          return html`<code key=${i} class="rounded border border-selection/80 bg-bg/55 px-1.5 py-0.5 font-mono text-[0.9em]">${part.slice(1, -1)}</code>`;
+        }
+        // Regular text - preserve line breaks
+        return part.split('\n').map((line, j) =>
+          j === 0 ? line : html`<br key="${i}-${j}" />${line}`
+        );
+      });
+    }
+
+    // -----------------------------
+    // Helper: Get user message background class based on status
+    // -----------------------------
+    function getUserMessageBg(status) {
+      switch (status) {
+        case 'needs_attention': return 'bg-attention/20 border border-attention/35 text-bright';
+        case 'active': return 'bg-active/20 border border-active/30 text-bright';
+        case 'starting': return 'bg-starting/20 border border-starting/30 text-bright';
+        case 'done': return 'bg-done/20 border border-done/30 text-bright';
+        default: return 'bg-selection/80 border border-selection text-bright';
+      }
+    }
+
+    // -----------------------------
+    // Helper: Status display metadata
+    // -----------------------------
+    function getStatusMeta(status) {
+      switch (status) {
+        case 'needs_attention':
+          return {
+            label: 'Needs attention',
+            dot: 'bg-attention pulse-attention',
+            badge: 'bg-attention/18 text-attention border-attention/40',
+            borderColor: '#d4ad5d',
+          };
+        case 'active':
+          return {
+            label: 'Active',
+            dot: 'bg-active',
+            badge: 'bg-active/18 text-active border-active/40',
+            borderColor: '#69c39a',
+          };
+        case 'starting':
+          return {
+            label: 'Starting',
+            dot: 'bg-starting',
+            badge: 'bg-starting/18 text-starting border-starting/40',
+            borderColor: '#79a6ff',
+          };
+        case 'done':
+          return {
+            label: 'Done',
+            dot: 'bg-done',
+            badge: 'bg-done/18 text-done border-done/40',
+            borderColor: '#d19189',
+          };
+        default:
+          return {
+            label: status || 'Unknown',
+            dot: 'bg-dim',
+            badge: 'bg-selection text-dim border-selection',
+            borderColor: '#2a3c5c',
+          };
+      }
+    }
+
+    // -----------------------------
+    // ChatMessages Component
+    // -----------------------------
+    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>
+        `;
+      }
+
+      // Show last 20 messages only
+      const displayMessages = 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`
+            <div
+              key=${i}
+              class="flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'} animate-fade-in-up"
+            >
+              <div
+                class="max-w-[92%] whitespace-pre-wrap break-words rounded-2xl px-3 py-2.5 text-ui ${
+                  msg.role === 'user'
+                    ? `${userBgClass} 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">
+                  ${msg.role === 'user' ? 'Operator' : 'Agent'}
+                </div>
+                ${msg.content}
+              </div>
+            </div>
+          `)}
+        </div>
+      `;
+    }
+
+    // -----------------------------
+    // Header Component
+    // -----------------------------
+    function Header({ sessions }) {
+      const [clock, setClock] = useState(() => new Date());
+
+      useEffect(() => {
+        const timer = setInterval(() => setClock(new Date()), 30000);
+        return () => clearInterval(timer);
+      }, []);
+
+      const counts = {
+        attention: sessions.filter(s => s.status === 'needs_attention').length,
+        active: sessions.filter(s => s.status === 'active').length,
+        starting: sessions.filter(s => s.status === 'starting').length,
+        done: sessions.filter(s => s.status === 'done').length,
+      };
+      const total = sessions.length;
+
+      return html`
+        <header class="sticky top-0 z-50 px-4 pt-4 sm:px-6 sm:pt-6">
+          <div class="glass-panel rounded-2xl px-4 py-4 sm:px-6">
+            <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+              <div class="min-w-0">
+                <div class="inline-flex items-center gap-2 rounded-full border border-starting/40 bg-starting/10 px-3 py-1 text-micro font-medium uppercase tracking-[0.24em] text-starting">
+                  <span class="h-1.5 w-1.5 rounded-full bg-starting animate-float"></span>
+                  Control Plane
+                </div>
+                <h1 class="mt-3 truncate font-display text-xl font-semibold text-bright sm:text-2xl">
+                  Agent Mission Control
+                </h1>
+                <p class="mt-1 text-sm text-dim">
+                  ${total} live session${total === 1 ? '' : 's'} • Updated ${clock.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })}
+                </p>
+              </div>
+
+              <div class="grid grid-cols-2 gap-2 text-xs sm:grid-cols-4 sm:gap-3">
+                <div class="rounded-xl border border-attention/40 bg-attention/12 px-3 py-2 text-attention">
+                  <div class="font-mono text-lg font-medium tabular-nums text-bright">${counts.attention}</div>
+                  <div class="text-micro uppercase tracking-[0.16em]">Attention</div>
+                </div>
+                <div class="rounded-xl border border-active/40 bg-active/12 px-3 py-2 text-active">
+                  <div class="font-mono text-lg font-medium tabular-nums text-bright">${counts.active}</div>
+                  <div class="text-micro uppercase tracking-[0.16em]">Active</div>
+                </div>
+                <div class="rounded-xl border border-starting/40 bg-starting/12 px-3 py-2 text-starting">
+                  <div class="font-mono text-lg font-medium tabular-nums text-bright">${counts.starting}</div>
+                  <div class="text-micro uppercase tracking-[0.16em]">Starting</div>
+                </div>
+                <div class="rounded-xl border border-done/40 bg-done/12 px-3 py-2 text-done">
+                  <div class="font-mono text-lg font-medium tabular-nums text-bright">${counts.done}</div>
+                  <div class="text-micro uppercase tracking-[0.16em]">Done</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </header>
+      `;
+    }
+
+    // -----------------------------
+    // OptionButton Component
+    // -----------------------------
+    function OptionButton({ number, label, description, onClick }) {
+      return html`
+        <button
+          onClick=${onClick}
+          class="group w-full rounded-xl border border-selection/70 bg-surface2/55 p-3.5 text-left transition-all duration-200 hover:-translate-y-0.5 hover:border-starting/55 hover:bg-surface2/90 hover:shadow-halo"
+        >
+          <div class="flex items-baseline gap-2.5">
+            <span class="font-mono text-starting">${number}.</span>
+            <span class="font-medium text-bright">${label}</span>
+          </div>
+          ${description && html`
+            <p class="mt-1 pl-5 text-sm text-dim">${description}</p>
+          `}
+        </button>
+      `;
+    }
+
+    // -----------------------------
+    // QuestionBlock Component
+    // -----------------------------
+    function QuestionBlock({ questions, sessionId, onRespond }) {
+      const [freeformText, setFreeformText] = useState('');
+
+      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 border-attention/40 bg-attention/10 px-2 py-1 font-mono text-micro uppercase tracking-[0.15em] text-attention">
+              ${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);
+                }
+              }}
+              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:border-attention/70 focus:outline-none"
+              style="min-height: 38px; max-height: 150px;"
+            />
+            <button
+              type="submit"
+              class="shrink-0 rounded-xl bg-attention px-3 py-2 text-sm font-medium text-[#16110a] transition-all hover:-translate-y-0.5 hover:brightness-110"
+            >
+              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>
+      `;
+    }
+
+    // -----------------------------
+    // SimpleInput Component (for cards without pending questions)
+    // -----------------------------
+    function SimpleInput({ sessionId, onRespond }) {
+      const [text, setText] = useState('');
+
+      const handleSubmit = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (text.trim()) {
+          onRespond(sessionId, text.trim(), true, 0);
+          setText('');
+        }
+      };
+
+      return html`
+        <form onSubmit=${handleSubmit} class="flex items-end gap-2.5" onClick=${(e) => e.stopPropagation()}>
+          <textarea
+            value=${text}
+            onInput=${(e) => {
+              setText(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();
+                handleSubmit(e);
+              }
+            }}
+            placeholder="Send a message..."
+            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:border-active/70 focus:outline-none"
+            style="min-height: 38px; max-height: 150px;"
+          />
+          <button
+            type="submit"
+            class="shrink-0 rounded-xl bg-active px-3 py-2 text-sm font-medium text-[#08140f] transition-all hover:-translate-y-0.5 hover:brightness-110"
+          >
+            Send
+          </button>
+        </form>
+      `;
+    }
+
+    // -----------------------------
+    // SessionCard Component
+    // -----------------------------
+    function SessionCard({ session, onClick, conversation, onFetchConversation, onRespond, onDismiss }) {
+      const hasQuestions = session.pending_questions && session.pending_questions.length > 0;
+      const scrollRef = useRef(null);
+      const statusMeta = getStatusMeta(session.status);
+
+      // Fetch conversation when card mounts
+      useEffect(() => {
+        if (!conversation && onFetchConversation) {
+          onFetchConversation(session.session_id, session.project_dir, session.agent || 'claude');
+        }
+      }, [session.session_id, session.project_dir, session.agent, conversation, onFetchConversation]);
+
+      // Scroll chat to bottom when conversation loads or updates
+      useEffect(() => {
+        if (scrollRef.current && conversation && conversation.length > 0) {
+          scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+        }
+      }, [conversation]);
+
+      const handleDismissClick = (e) => {
+        e.stopPropagation();
+        onDismiss(session.session_id);
+      };
+
+      return html`
+        <div
+          class="glass-panel flex h-[460px] w-full max-w-full cursor-pointer flex-col overflow-hidden rounded-xl border border-selection/70 transition-all duration-200 hover:border-starting/35 hover:shadow-panel"
+          style=${{ borderLeftWidth: '3px', borderLeftColor: statusMeta.borderColor }}
+          onClick=${() => onClick(session)}
+        >
+          <!-- Card Header -->
+          <div class="shrink-0 border-b border-selection/70 px-4 py-3">
+            <div class="flex items-start justify-between gap-2.5">
+              <div class="min-w-0">
+                <div class="flex items-center gap-2.5">
+                  <span class="h-2 w-2 shrink-0 rounded-full ${statusMeta.dot}"></span>
+                  <span class="truncate font-display text-base font-medium text-bright">${session.project || session.name || 'Session'}</span>
+                </div>
+                <div class="mt-2 flex flex-wrap items-center gap-2">
+                  <span class="rounded-full border px-2.5 py-1 font-mono text-micro uppercase tracking-[0.14em] ${statusMeta.badge}">
+                    ${statusMeta.label}
+                  </span>
+                  <span class="rounded-full border px-2.5 py-1 font-mono text-micro uppercase tracking-[0.14em] ${session.agent === 'codex' ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-400' : 'border-violet-500/30 bg-violet-500/10 text-violet-400'}">
+                    ${session.agent === 'codex' ? 'codex' : 'claude'}
+                  </span>
+                  ${session.cwd && html`
+                    <span class="truncate rounded-full border border-selection bg-bg/40 px-2.5 py-1 font-mono text-micro text-dim">
+                      ${session.cwd.split('/').slice(-2).join('/')}
+                    </span>
+                  `}
+                </div>
+              </div>
+              <div class="flex items-center gap-3 shrink-0 pt-0.5">
+                <span class="font-mono text-xs tabular-nums text-dim">${formatDuration(session.started_at)}</span>
+                ${session.status === 'done' && html`
+                  <button
+                    onClick=${handleDismissClick}
+                    class="flex h-7 w-7 items-center justify-center rounded-lg border border-selection/80 text-dim transition-colors hover:border-done/40 hover:bg-done/10 hover:text-bright"
+                    title="Dismiss"
+                  >
+                    <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                    </svg>
+                  </button>
+                `}
+              </div>
+            </div>
+          </div>
+
+          <!-- Card Content Area (Chat) -->
+          <div ref=${scrollRef} class="flex-1 min-h-0 overflow-y-auto bg-surface px-4 py-4">
+            <${ChatMessages} messages=${conversation || []} status=${session.status} />
+          </div>
+
+          <!-- Card Footer (Input or Questions) -->
+          <div class="shrink-0 border-t border-selection/70 bg-bg/55 p-4 ${hasQuestions ? 'max-h-[300px] overflow-y-auto' : ''}">
+            ${hasQuestions ? html`
+              <${QuestionBlock}
+                questions=${session.pending_questions}
+                sessionId=${session.session_id}
+                onRespond=${onRespond}
+              />
+            ` : html`
+              <${SimpleInput}
+                sessionId=${session.session_id}
+                onRespond=${onRespond}
+              />
+            `}
+          </div>
+        </div>
+      `;
+    }
+
+    // -----------------------------
+    // SessionGroup Component
+    // -----------------------------
+    function SessionGroup({ title, sessions, onCardClick, statusColor, conversations, onFetchConversation, onRespond, onDismiss }) {
+      if (sessions.length === 0) return null;
+
+      const textColor = statusColor.replace('bg-', 'text-');
+
+      return html`
+        <section class="mb-12">
+          <div class="mb-5 flex items-center gap-2 border-b border-selection/50 pb-3">
+            <span class="h-2.5 w-2.5 rounded-full ${statusColor} ${title.toLowerCase().includes('attention') ? 'pulse-attention' : ''}"></span>
+            <h2 class="font-mono text-label font-medium uppercase tracking-[0.2em] ${textColor}">${title}</h2>
+            <span class="rounded-full border border-selection/80 bg-bg/55 px-2 py-0.5 font-mono text-micro text-dim">${sessions.length}</span>
+          </div>
+
+          <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
+            ${sessions.map(session => html`
+              <${SessionCard}
+                key=${session.session_id}
+                session=${session}
+                onClick=${onCardClick}
+                conversation=${conversations[session.session_id]}
+                onFetchConversation=${onFetchConversation}
+                onRespond=${onRespond}
+                onDismiss=${onDismiss}
+              />
+            `)}
+          </div>
+        </section>
+      `;
+    }
+
+    // -----------------------------
+    // Modal Component
+    // -----------------------------
+    function Modal({ session, conversations, conversationLoading, onClose, onSendMessage, onRefreshConversation }) {
+      const [inputValue, setInputValue] = useState('');
+      const [sending, setSending] = useState(false);
+      const inputRef = useRef(null);
+
+      if (!session) return null;
+
+      const conversation = conversations[session.session_id] || [];
+      const hasPendingQuestions = session.pending_questions && session.pending_questions.length > 0;
+      const optionCount = hasPendingQuestions ? session.pending_questions[0]?.options?.length || 0 : 0;
+      const status = getStatusMeta(session.status);
+
+      // Track if user has scrolled away from bottom
+      const wasAtBottomRef = useRef(true);
+      const prevConversationLenRef = useRef(0);
+      const chatContainerRef = useRef(null);
+
+      // Initialize scroll position to bottom on mount (no animation)
+      useEffect(() => {
+        if (chatContainerRef.current) {
+          chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
+        }
+      }, []);
+
+      // Track scroll position
+      useEffect(() => {
+        const container = chatContainerRef.current;
+        if (!container) return;
+
+        const handleScroll = () => {
+          const threshold = 50;
+          wasAtBottomRef.current = container.scrollHeight - container.scrollTop - container.clientHeight < threshold;
+        };
+
+        container.addEventListener('scroll', handleScroll);
+        return () => container.removeEventListener('scroll', handleScroll);
+      }, []);
+
+      // Only scroll to bottom on NEW messages, and only if user was already at bottom
+      useEffect(() => {
+        const container = chatContainerRef.current;
+        if (!container || !conversation) return;
+
+        const hasNewMessages = conversation.length > prevConversationLenRef.current;
+        prevConversationLenRef.current = conversation.length;
+
+        if (hasNewMessages && wasAtBottomRef.current) {
+          container.scrollTop = container.scrollHeight;
+        }
+      }, [conversation]);
+
+      // Focus input when modal opens
+      useEffect(() => {
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      }, [session]);
+
+      // Handle keyboard events
+      useEffect(() => {
+        const handleKeyDown = (e) => {
+          // Escape closes modal
+          if (e.key === 'Escape') {
+            onClose();
+          }
+        };
+
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+      }, [onClose]);
+
+      // Handle input key events
+      const handleInputKeyDown = (e) => {
+        // Enter sends message (unless Shift+Enter for newline)
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          handleSend();
+        }
+      };
+
+      // Send message
+      const handleSend = async () => {
+        const text = inputValue.trim();
+        if (!text || sending) return;
+
+        setSending(true);
+        try {
+          if (onSendMessage) {
+            await onSendMessage(session.session_id, text, true, optionCount);
+          }
+          setInputValue('');
+          // Refresh conversation after sending
+          if (onRefreshConversation) {
+            await onRefreshConversation(session.session_id, session.project_dir, session.agent || 'claude');
+          }
+        } catch (err) {
+          console.error('Failed to send message:', err);
+        } finally {
+          setSending(false);
+        }
+      };
+
+      return html`
+        <div
+          class="fixed inset-0 z-50 flex items-center justify-center bg-[#02050d]/84 p-4 backdrop-blur-sm"
+          onClick=${(e) => e.target === e.currentTarget && onClose()}
+        >
+          <div
+            class="glass-panel flex max-h-[90vh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-selection/80"
+            style=${{ borderLeftWidth: '3px', borderLeftColor: status.borderColor }}
+            onClick=${(e) => e.stopPropagation()}
+          >
+            <!-- Modal Header -->
+            <div class="flex items-center justify-between border-b border-selection/70 px-5 py-4">
+              <div class="flex-1 min-w-0">
+                <div class="mb-1 flex items-center gap-3">
+                  <h2 class="truncate font-display text-xl font-semibold text-bright">${session.project || session.name || session.session_id}</h2>
+                  <div class="flex items-center gap-2 rounded-full border px-2.5 py-1 text-xs ${status.badge}">
+                    <span class="h-2 w-2 rounded-full ${status.dot}"></span>
+                    <span class="font-mono uppercase tracking-[0.14em]">${status.label}</span>
+                  </div>
+                </div>
+                <div class="flex items-center gap-4 text-sm text-dim">
+                  <span class="truncate font-mono">${session.cwd || 'No working directory'}</span>
+                  ${session.started_at && html`
+                    <span class="flex-shrink-0 font-mono">Running ${formatDuration(session.started_at)}</span>
+                  `}
+                </div>
+              </div>
+              <button
+                class="ml-4 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl border border-selection/70 text-dim transition-colors hover:border-done/35 hover:bg-done/10 hover:text-bright"
+                onClick=${onClose}
+              >
+                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                </svg>
+              </button>
+            </div>
+
+            <!-- Modal Content -->
+            <div ref=${chatContainerRef} class="flex-1 overflow-y-auto overflow-x-hidden bg-[linear-gradient(180deg,rgba(9,18,34,0.82),rgba(5,10,20,0.9))] p-5">
+              ${conversationLoading ? html`
+                <div class="flex items-center justify-center py-12">
+                  <div class="font-mono text-dim">Loading conversation...</div>
+                </div>
+              ` : conversation.length > 0 ? html`
+                <div class="space-y-4">
+                  ${conversation.map((msg, i) => html`
+                    <div
+                      key=${i}
+                      class="flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'} animate-fade-in-up"
+                    >
+                      <div
+                        class="max-w-[86%] rounded-2xl px-4 py-3 ${
+                          msg.role === 'user'
+                            ? `${getUserMessageBg(session.status)} rounded-br-md shadow-[0_4px_10px_rgba(16,24,36,0.24)]`
+                            : 'border border-selection/75 bg-surface2/78 text-fg rounded-bl-md'
+                        }"
+                      >
+                        <div class="mb-1 font-mono text-micro uppercase tracking-[0.16em] text-dim">
+                          ${msg.role === 'user' ? 'Operator' : 'Agent'}
+                        </div>
+                        <div class="whitespace-pre-wrap break-words text-micro">
+                          ${renderContent(msg.content)}
+                        </div>
+                        ${msg.timestamp && html`
+                          <div class="mt-2 font-mono text-label text-dim">
+                            ${formatTime(msg.timestamp)}
+                          </div>
+                        `}
+                      </div>
+                    </div>
+                  `)}
+                </div>
+              ` : html`
+                <p class="text-dim text-center py-12">No conversation messages</p>
+              `}
+            </div>
+
+            <!-- Modal Footer -->
+            <div class="border-t border-selection/70 bg-bg/55 p-4">
+              ${hasPendingQuestions && html`
+                <div class="mb-3 rounded-xl border border-attention/40 bg-attention/12 px-3 py-2 text-sm text-attention">
+                  Agent is waiting for a response
+                </div>
+              `}
+              <div class="flex items-end gap-2.5">
+                <textarea
+                  ref=${inputRef}
+                  value=${inputValue}
+                  onInput=${(e) => {
+                    setInputValue(e.target.value);
+                    e.target.style.height = 'auto';
+                    e.target.style.height = Math.min(e.target.scrollHeight, 150) + 'px';
+                  }}
+                  onKeyDown=${handleInputKeyDown}
+                  placeholder=${hasPendingQuestions ? "Type your response..." : "Send a message..."}
+                  rows="1"
+                  class="flex-1 resize-none overflow-hidden rounded-xl border border-selection/75 bg-bg/70 px-4 py-2 text-sm text-fg placeholder:text-dim focus:border-active/70 focus:outline-none"
+                  style="min-height: 42px; max-height: 150px;"
+                  disabled=${sending}
+                />
+                <button
+                  class="rounded-xl bg-active px-4 py-2 font-medium text-[#08140f] transition-all hover:-translate-y-0.5 hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50"
+                  onClick=${handleSend}
+                  disabled=${sending || !inputValue.trim()}
+                >
+                  ${sending ? 'Sending...' : 'Send'}
+                </button>
+              </div>
+              <div class="mt-2 font-mono text-label text-dim">
+                Press Enter to send, Shift+Enter for new line, Escape to close
+              </div>
+            </div>
+          </div>
+        </div>
+      `;
+    }
+
+    // -----------------------------
+    // Empty State Component
+    // -----------------------------
+    function EmptyState() {
+      return html`
+        <div class="glass-panel mx-auto flex max-w-2xl flex-col items-center justify-center rounded-3xl px-8 py-20 text-center">
+          <div class="mb-6 flex h-20 w-20 items-center justify-center rounded-2xl border border-selection/80 bg-bg/40 shadow-halo">
+            <svg class="h-9 w-9 text-dim" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+                    d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
+            </svg>
+          </div>
+          <h2 class="mb-2 font-display text-2xl font-semibold text-bright">No Active Sessions</h2>
+          <p class="max-w-lg text-dim">
+            Agent sessions will appear here when they connect. Start a Claude Code session to see it in the dashboard.
+          </p>
+        </div>
+      `;
+    }
+
+    // -----------------------------
+    // App Component
+    // -----------------------------
+    function App() {
+      const [sessions, setSessions] = useState([]);
+      const [modalSession, setModalSession] = useState(null);
+      const [conversations, setConversations] = useState({});
+      const [conversationLoading, setConversationLoading] = useState(false);
+      const [loading, setLoading] = useState(true);
+      const [error, setError] = useState(null);
+
+      // Silent conversation refresh (no loading state, used for background polling)
+      // Defined early so fetchState can reference it
+      const refreshConversationSilent = useCallback(async (sessionId, projectDir, agent = 'claude') => {
+        try {
+          let url = API_CONVERSATION + encodeURIComponent(sessionId);
+          const params = new URLSearchParams();
+          if (projectDir) params.set('project_dir', projectDir);
+          if (agent) params.set('agent', agent);
+          if (params.toString()) url += '?' + params.toString();
+          const response = await fetch(url);
+          if (!response.ok) return;
+          const data = await response.json();
+          setConversations(prev => ({
+            ...prev,
+            [sessionId]: data.messages || []
+          }));
+        } catch (err) {
+          // Silent failure for background refresh
+        }
+      }, []);
+
+      // Fetch state from API
+      const fetchState = useCallback(async () => {
+        try {
+          const response = await fetch(API_STATE);
+          if (!response.ok) {
+            throw new Error(`HTTP ${response.status}`);
+          }
+          const data = await response.json();
+          const newSessions = data.sessions || [];
+          setSessions(newSessions);
+          setError(null);
+
+          // Update modalSession if it's still open (to get latest pending_questions, etc.)
+          setModalSession(prev => {
+            if (!prev) return null;
+            const updatedSession = newSessions.find(s => s.session_id === prev.session_id);
+            return updatedSession || prev;
+          });
+
+          // Refresh conversations for active/attention sessions (they're actively changing)
+          for (const session of newSessions) {
+            if (session.status === 'active' || session.status === 'needs_attention') {
+              // Force refresh conversation in background (no loading indicator)
+              refreshConversationSilent(session.session_id, session.project_dir, session.agent || 'claude');
+            }
+          }
+        } catch (err) {
+          console.error('Failed to fetch state:', err);
+          setError(err.message);
+        } finally {
+          setLoading(false);
+        }
+      }, [refreshConversationSilent]);
+
+      // Fetch conversation for a session
+      const fetchConversation = useCallback(async (sessionId, projectDir, agent = 'claude', showLoading = false, force = false) => {
+        // Skip if already fetched and not forcing refresh
+        if (!force && conversations[sessionId]) return;
+
+        if (showLoading) {
+          setConversationLoading(true);
+        }
+
+        try {
+          let url = API_CONVERSATION + encodeURIComponent(sessionId);
+          const params = new URLSearchParams();
+          if (projectDir) params.set('project_dir', projectDir);
+          if (agent) params.set('agent', agent);
+          if (params.toString()) url += '?' + params.toString();
+          const response = await fetch(url);
+          if (!response.ok) {
+            console.warn('Failed to fetch conversation for', sessionId);
+            return;
+          }
+          const data = await response.json();
+          setConversations(prev => ({
+            ...prev,
+            [sessionId]: data.messages || []
+          }));
+        } catch (err) {
+          console.error('Error fetching conversation:', err);
+        } finally {
+          if (showLoading) {
+            setConversationLoading(false);
+          }
+        }
+      }, [conversations]);
+
+      // Respond to a session's pending question
+      const respondToSession = useCallback(async (sessionId, text, isFreeform = false, optionCount = 0) => {
+        const payload = { text };
+        if (isFreeform) {
+          payload.freeform = true;
+          payload.optionCount = optionCount;
+        }
+        try {
+          const res = await fetch(API_RESPOND + encodeURIComponent(sessionId), {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload)
+          });
+          const data = await res.json();
+          if (data.ok) {
+            // Trigger refresh
+            fetchState();
+          }
+        } catch (err) {
+          console.error('Error responding to session:', err);
+        }
+      }, [fetchState]);
+
+      // Dismiss a session
+      const dismissSession = useCallback(async (sessionId) => {
+        try {
+          const res = await fetch(API_DISMISS + encodeURIComponent(sessionId), {
+            method: 'POST'
+          });
+          const data = await res.json();
+          if (data.ok) {
+            // Trigger refresh
+            fetchState();
+          }
+        } catch (err) {
+          console.error('Error dismissing session:', err);
+        }
+      }, [fetchState]);
+
+      // Poll for updates
+      useEffect(() => {
+        fetchState();
+        const interval = setInterval(fetchState, POLL_MS);
+        return () => clearInterval(interval);
+      }, [fetchState]);
+
+      // Group sessions by status
+      const attentionSessions = sessions.filter(s => s.status === 'needs_attention');
+      const activeSessions = sessions.filter(s => s.status === 'active');
+      const startingSessions = sessions.filter(s => s.status === 'starting');
+      const doneSessions = sessions.filter(s => s.status === 'done');
+
+      // Handle card click - open modal and fetch conversation if not cached
+      const handleCardClick = useCallback(async (session) => {
+        setModalSession(session);
+
+        // Fetch conversation if not already cached
+        if (!conversations[session.session_id]) {
+          await fetchConversation(session.session_id, session.project_dir, session.agent || 'claude', true);
+        }
+      }, [conversations, fetchConversation]);
+
+      // Refresh conversation (force re-fetch, used after sending messages)
+      const refreshConversation = useCallback(async (sessionId, projectDir, agent = 'claude') => {
+        // Force refresh by clearing cache first
+        setConversations(prev => {
+          const updated = { ...prev };
+          delete updated[sessionId];
+          return updated;
+        });
+        await fetchConversation(sessionId, projectDir, agent, false, true);
+      }, [fetchConversation]);
+
+      const handleCloseModal = useCallback(() => {
+        setModalSession(null);
+      }, []);
+
+      return html`
+        <div class="pb-10">
+          <${Header} sessions=${sessions} />
+
+          <main class="px-4 pb-6 pt-6 sm:px-6">
+            ${loading ? html`
+              <div class="glass-panel flex items-center justify-center rounded-2xl py-24">
+                <div class="font-mono text-dim">Loading sessions...</div>
+              </div>
+            ` : error ? html`
+              <div class="glass-panel flex items-center justify-center rounded-2xl py-24">
+                <div class="text-center">
+                  <p class="mb-2 font-display text-lg text-attention">Failed to connect to API</p>
+                  <p class="font-mono text-sm text-dim">${error}</p>
+                </div>
+              </div>
+            ` : sessions.length === 0 ? html`
+              <${EmptyState} />
+            ` : html`
+              <${SessionGroup}
+                title="Needs Attention"
+                sessions=${attentionSessions}
+                onCardClick=${handleCardClick}
+                statusColor="bg-attention"
+                conversations=${conversations}
+                onFetchConversation=${fetchConversation}
+                onRespond=${respondToSession}
+                onDismiss=${dismissSession}
+              />
+              <${SessionGroup}
+                title="Active"
+                sessions=${activeSessions}
+                onCardClick=${handleCardClick}
+                statusColor="bg-active"
+                conversations=${conversations}
+                onFetchConversation=${fetchConversation}
+                onRespond=${respondToSession}
+                onDismiss=${dismissSession}
+              />
+              <${SessionGroup}
+                title="Starting"
+                sessions=${startingSessions}
+                onCardClick=${handleCardClick}
+                statusColor="bg-starting"
+                conversations=${conversations}
+                onFetchConversation=${fetchConversation}
+                onRespond=${respondToSession}
+                onDismiss=${dismissSession}
+              />
+              <${SessionGroup}
+                title="Done"
+                sessions=${doneSessions}
+                onCardClick=${handleCardClick}
+                statusColor="bg-done"
+                conversations=${conversations}
+                onFetchConversation=${fetchConversation}
+                onRespond=${respondToSession}
+                onDismiss=${dismissSession}
+              />
+            `}
+          </main>
+        </div>
+
+        <${Modal}
+          session=${modalSession}
+          conversations=${conversations}
+          conversationLoading=${conversationLoading}
+          onClose=${handleCloseModal}
+          onSendMessage=${respondToSession}
+          onRefreshConversation=${refreshConversation}
+        />
+      `;
+    }
+
+    // Mount the app
+    render(html`<${App} />`, document.getElementById('app'));
+  </script>
+</body>
+</html>
