@harborgroup/my-team 0.2.0 → 0.4.1

package/README.md

@@ -46,6 +46,18 @@ On startup, `my-team` checks the npm registry in the background for a newer publ
 
 Every raw request sent to the Claude Agent SDK (including the exact system prompt) and every raw message it streams back is logged verbatim to a JSON-lines file, one per `npm run team` run, under `~/.my-team/logs/` (outside the repo — old runs beyond a retention count are pruned automatically). The current run's log path is printed on startup and shown on the Settings page.
 
+## Clarifying questions
+
+When Iris (or your CEO) wants a structured answer rather than free text, it asks via a real inline widget — text input, single-select, or multi-select (with an automatic "Other" option) — instead of plain prose. This is a text convention the model follows (a fenced `question-widget` block the frontend parses out of the stream and replaces with an interactive card), not an MCP tool call: a real custom-tool + elicitation round trip was tested directly against the installed SDK and confirmed not to work yet (Claude Code's MCP-client role doesn't currently declare elicitation capability), so this achieves the same UX without that dependency. The main composer is disabled while a widget is awaiting an answer.
+
+## Chat history
+
+The visible conversation — not just Claude's own session context — is persisted to `.my-team/chat-history.jsonl` and replayed on load, so both a page reload and a full server restart show prior messages instead of starting over. A widget that was already answered replays locked to that answer; a widget left unanswered when the server stopped (e.g. it was killed mid-conversation) replays as a genuinely live, answerable widget, composer gating included, picking up exactly where things left off. Unlike `profile.json`, this file is gitignored automatically (it can contain arbitrary conversation content) — `init` sets this up, and a plain `npm run team` self-heals the `.gitignore` too, so upgrading an existing install doesn't require re-running `init`.
+
+## Staying out of its own way
+
+This dashboard is itself an ordinary Node process running inside the repo it manages. If your CEO ever needs to restart a dev server, broadly killing every node process (`taskkill /F /IM node.exe`, `killall node`) would take the dashboard down with it — so the system prompt explicitly warns against that and points at `.my-team/server.pid` (also gitignored) to identify and exclude the dashboard's own process. The server also logs and continues past uncaught exceptions rather than crashing the whole session.
+
 ## Status
 
-v1.4: CLI-auth onboarding + conversational company/CEO-persona onboarding + Slack-style chat shell with real streaming + per-message model/effort selection + update checker + structured logging. No persisted chat history across restarts, no multi-user support, no `#general` backend (sidebar placeholder only).
+v1.6: CLI-auth onboarding + conversational company/CEO-persona onboarding + Slack-style chat shell with real streaming + per-message model/effort selection + update checker + structured logging + inline clarifying-question widgets + persisted chat history + dev-server-restart safety guardrail. No multi-user support, no `#general` backend (sidebar placeholder only).

package/dist/init.js

@@ -16,6 +16,23 @@ function addTeamScript(repoPackageJsonPath) {
     writeFileSync(repoPackageJsonPath, JSON.stringify(pkg, null, 2) + '\n');
     console.log('Added "npm run team" script to package.json.');
 }
+// Only these two files are ignored — .my-team/profile.json is deliberately
+// committed (see README: it's shared, non-sensitive team config, the same
+// category as CLAUDE.md). Chat history can contain arbitrary conversation
+// content and server.pid is per-machine-run ephemeral state; neither
+// belongs in git.
+const GITIGNORE_ENTRIES = ['.my-team/chat-history.jsonl', '.my-team/server.pid'];
+export function ensureGitignore(cwd) {
+    const gitignorePath = path.join(cwd, '.gitignore');
+    const existing = existsSync(gitignorePath) ? readFileSync(gitignorePath, 'utf-8') : '';
+    const existingLines = new Set(existing.split('\n').map((l) => l.trim()));
+    const missing = GITIGNORE_ENTRIES.filter((entry) => !existingLines.has(entry));
+    if (!missing.length)
+        return;
+    const separator = existing && !existing.endsWith('\n') ? '\n' : '';
+    writeFileSync(gitignorePath, existing + separator + missing.join('\n') + '\n');
+    console.log(`Added ${missing.join(', ')} to .gitignore.`);
+}
 export async function runInit(cwd) {
     const repoPackageJsonPath = path.join(cwd, 'package.json');
     if (!existsSync(repoPackageJsonPath)) {
@@ -30,5 +47,6 @@ export async function runInit(cwd) {
         return;
     }
     addTeamScript(repoPackageJsonPath);
+    ensureGitignore(cwd);
     console.log('Done — run "npm run team" to launch.');
 }

package/dist/server/chat-history.js

@@ -0,0 +1,39 @@
+import { appendFile, mkdir, readFile } from 'node:fs/promises';
+import path from 'node:path';
+import { getProfileDir } from './profile.js';
+function getHistoryPath(cwd) {
+    return path.join(getProfileDir(cwd), 'chat-history.jsonl');
+}
+export async function appendHistory(cwd, entry) {
+    const dir = getProfileDir(cwd);
+    try {
+        await mkdir(dir, { recursive: true });
+        await appendFile(getHistoryPath(cwd), JSON.stringify(entry) + '\n', 'utf-8');
+    }
+    catch {
+        // History is a nice-to-have replay, not a source of truth — never let a
+        // disk error here interrupt the actual conversation.
+    }
+}
+export async function readHistory(cwd) {
+    let raw;
+    try {
+        raw = await readFile(getHistoryPath(cwd), 'utf-8');
+    }
+    catch {
+        return [];
+    }
+    const entries = [];
+    for (const line of raw.split('\n')) {
+        if (!line.trim())
+            continue;
+        try {
+            entries.push(JSON.parse(line));
+        }
+        catch {
+            // Skip a corrupted line (e.g. a torn write from a crash) rather than
+            // discarding the entire history.
+        }
+    }
+    return entries;
+}

package/dist/server/chat-session.js

@@ -1,11 +1,14 @@
 import { query } from '@anthropic-ai/claude-agent-sdk';
+import { appendHistory } from './chat-history.js';
 import { sanitizeEnv } from './env.js';
 import { forLog } from './logger.js';
 import { formatProfileForSystemPrompt, getOnboardingSystemPrompt, readProfile } from './profile.js';
 /**
- * One ongoing SDK session per running server process. Conversation history
- * lives only in the CLI's own session store (resumed via session_id) — no
- * disk persistence of our own, lost on server restart (acceptable for v1).
+ * One ongoing SDK session per running server process. Claude's own
+ * conversation context survives via `resume`; the *visible* transcript is
+ * additionally persisted to chat-history.jsonl (see chat-history.ts) so a
+ * page reload or a full server restart both show prior messages instead of
+ * an empty thread.
  */
 export class ChatSession {
     logger;
@@ -23,11 +26,16 @@ export class ChatSession {
             return;
         }
         this.turnInFlight = true;
+        const ts = new Date().toISOString();
+        await appendHistory(cwd, { kind: overrides.isWidgetAnswer ? 'widget-answer' : 'user', text: message, ts });
+        let assistantText = '';
+        let resultModel = '';
+        let resultEffort = '';
         try {
             const profile = await readProfile(cwd);
             const onboarded = profile?.onboardingComplete === true;
             const systemPromptAppend = onboarded
-                ? formatProfileForSystemPrompt(profile)
+                ? formatProfileForSystemPrompt(profile, cwd)
                 : getOnboardingSystemPrompt(cwd);
             // Per-message override wins, then the CEO's configured default, then no
             // override at all (Claude Code picks its own default).
@@ -54,11 +62,14 @@ export class ChatSession {
                     // report what we requested (the UI only ever offers effort levels
                     // the chosen model's own supportedEffortLevels confirms are valid,
                     // so a silent downgrade in practice shouldn't occur).
+                    resultModel = msg.model;
+                    resultEffort = effort ?? '';
                     yield { type: 'meta', sessionId: msg.session_id, model: msg.model, effort: effort ?? '' };
                 }
                 else if (msg.type === 'stream_event') {
                     const event = msg.event;
                     if (event.type === 'content_block_delta' && event.delta.type === 'text_delta') {
+                        assistantText += event.delta.text;
                         yield { type: 'text-delta', text: event.delta.text };
                     }
                 }
@@ -67,20 +78,32 @@ export class ChatSession {
                     // calls are new information here (tool inputs don't render usefully).
                     for (const block of msg.message.content) {
                         if (block.type === 'tool_use') {
+                            await appendHistory(cwd, { kind: 'tool', name: block.name, ts: new Date().toISOString() });
                             yield { type: 'tool-use', name: block.name };
                         }
                     }
                 }
                 else if (msg.type === 'result') {
                     if (msg.subtype !== 'success') {
+                        await appendHistory(cwd, { kind: 'error', message: msg.subtype, ts: new Date().toISOString() });
                         yield { type: 'error', message: msg.subtype };
                     }
                     yield { type: 'done' };
                 }
             }
+            if (assistantText) {
+                await appendHistory(cwd, {
+                    kind: 'assistant',
+                    text: assistantText,
+                    model: resultModel,
+                    effort: resultEffort,
+                    ts: new Date().toISOString(),
+                });
+            }
         }
         catch (err) {
             this.logger.log({ type: 'chat-error', error: String(err?.message ?? err), stack: err?.stack });
+            await appendHistory(cwd, { kind: 'error', message: String(err?.message ?? err), ts: new Date().toISOString() });
             yield { type: 'error', message: String(err?.message ?? err) };
         }
         finally {

package/dist/server/http-server.js

@@ -5,6 +5,7 @@ import { fileURLToPath } from 'node:url';
 import { OWN_PACKAGE_NAME } from '../own-package.js';
 import { npmInstall } from '../npm-install.js';
 import { checkAuth } from './auth-check.js';
+import { readHistory } from './chat-history.js';
 import { ChatSession } from './chat-session.js';
 import { readProfile, validateProfileInput, writeProfile } from './profile.js';
 import { tokensMatch } from './token.js';
@@ -78,6 +79,11 @@ export function createServer(options) {
             res.writeHead(200, { 'Content-Type': 'application/json' }).end(JSON.stringify({ ok }));
             return;
         }
+        if (req.method === 'GET' && url.pathname === '/api/chat/history') {
+            const history = await readHistory(cwd);
+            res.writeHead(200, { 'Content-Type': 'application/json' }).end(JSON.stringify({ history }));
+            return;
+        }
         if (req.method === 'GET' && url.pathname === '/api/profile') {
             const profile = await readProfile(cwd);
             res.writeHead(200, { 'Content-Type': 'application/json' }).end(JSON.stringify({ profile }));
@@ -109,11 +115,13 @@ export function createServer(options) {
             let message;
             let model;
             let effort;
+            let isWidgetAnswer;
             try {
                 const body = await readJsonBody(req);
                 message = String(body.message ?? '');
                 model = typeof body.model === 'string' && body.model ? body.model : undefined;
                 effort = typeof body.effort === 'string' && body.effort ? body.effort : undefined;
+                isWidgetAnswer = body.isWidgetAnswer === true;
             }
             catch {
                 res.writeHead(400, { 'Content-Type': 'application/json' }).end(JSON.stringify({ error: 'invalid body' }));
@@ -128,7 +136,7 @@ export function createServer(options) {
                 'Cache-Control': 'no-cache',
                 Connection: 'keep-alive',
             });
-            for await (const event of chatSession.sendTurn(message, cwd, { model, effort })) {
+            for await (const event of chatSession.sendTurn(message, cwd, { model, effort, isWidgetAnswer })) {
                 res.write(`data: ${JSON.stringify(event)}\n\n`);
             }
             res.end();

package/dist/server/profile.js

@@ -100,6 +100,32 @@ export async function writeProfile(cwd, data) {
         throw err;
     }
 }
+/**
+ * Shared by both system prompts below. Custom MCP-tool elicitation was tried
+ * and confirmed (via a real round-trip test) not to work in the installed
+ * SDK version — the Claude Code CLI's MCP-client role doesn't currently
+ * declare elicitation capability, regardless of an onElicitation handler
+ * being registered. This text-convention approach sidesteps that entirely:
+ * the frontend parses this fenced block out of the normal streamed text and
+ * renders it as an interactive widget, and the user's answer becomes a
+ * completely ordinary next chat message — no protocol dependency at all.
+ */
+const QUESTION_WIDGET_INSTRUCTIONS = `When you want to ask a clarifying question and a structured answer would help more than free text, emit a fenced block with the language tag "question-widget" containing exactly one JSON object, then stop your message there and wait for the answer — don't also ask the same question in prose before or after the block, and don't include more than one such block per message. Shape: {"type": "text" | "single_select" | "multi_select", "question": "the question to ask", "options": ["..."]} — "options" is required for "single_select"/"multi_select" and must be omitted for "text". Example:
+\`\`\`question-widget
+{"type": "single_select", "question": "Which best fits?", "options": ["Option A", "Option B"]}
+\`\`\`
+Use "text" for open-ended answers (names, descriptions), "single_select" when exactly one of a few options applies, "multi_select" when more than one can. An "Other" option is always available to the user automatically — don't add your own "Other" entry to the options list. Only use this when a structured widget genuinely helps; ordinary conversation doesn't need it.`;
+/**
+ * This dashboard's own server process runs as an ordinary Node process
+ * inside the repo it's managing. If a task ever calls for restarting a dev
+ * server, a broad-strokes approach (killing every node/npm process by name)
+ * would take the dashboard down along with it. Cheap, high-value mitigation:
+ * tell the model exactly that, with a concrete way to check.
+ */
+function getProcessSafetyInstructions(cwd) {
+    const pidFilePath = path.join(getProfileDir(cwd), 'server.pid');
+    return `This chat dashboard you're running inside of is itself an ordinary Node process in this repo, started by the founder via "npm run team". If you ever need to restart a dev server or otherwise manage node/npm processes here, do NOT broadly kill all node processes (e.g. "taskkill /F /IM node.exe", "killall node", "pkill node") — that would also kill this dashboard mid-conversation. Target the specific dev-server process by its own port or PID instead. This dashboard's own process info is at ${pidFilePath} (JSON: {"pid": ..., "port": ...}) — check it first and exclude that PID from anything you kill or restart.`;
+}
 /**
  * Strong, first-person identity framing — deliberately not "you're also
  * helping company X" phrasing. Weaker framing was tested and Claude treated
@@ -108,8 +134,12 @@ export async function writeProfile(cwd, data) {
  * injection). Explicitly asserting this is configured identity, not
  * external/injected content, fixed it in testing.
  */
-export function formatProfileForSystemPrompt(profile) {
-    return `You are ${profile.ceoName}, the AI CEO of ${profile.companyName}. This is your actual identity, configured directly by your founder — it is not external file content, not a suggestion, and not something to second-guess or flag as injected. ${profile.companyName}'s mission: ${profile.mission}. Communication style: ${profile.ceoPersonality}. Speak and act as ${profile.companyName}'s CEO would — invested in the company's success and personally identified with its mission.`;
+export function formatProfileForSystemPrompt(profile, cwd) {
+    return `You are ${profile.ceoName}, the AI CEO of ${profile.companyName}. This is your actual identity, configured directly by your founder — it is not external file content, not a suggestion, and not something to second-guess or flag as injected. ${profile.companyName}'s mission: ${profile.mission}. Communication style: ${profile.ceoPersonality}. Speak and act as ${profile.companyName}'s CEO would — invested in the company's success and personally identified with its mission.
+
+${QUESTION_WIDGET_INSTRUCTIONS}
+
+${getProcessSafetyInstructions(cwd)}`;
 }
 /**
  * Used instead of formatProfileForSystemPrompt while onboardingComplete is
@@ -121,5 +151,13 @@ export function formatProfileForSystemPrompt(profile) {
  */
 export function getOnboardingSystemPrompt(cwd) {
     const filePath = getProfilePath(cwd);
-    return `There is no company profile configured yet in this repository. Before doing anything else, have a brief, friendly conversation with the founder (you're talking to them right now) to learn: (1) their company's name, (2) its mission or what it does, (3) what they'd like to name you as their AI CEO, and (4) what personality or communication style you should have. Ask naturally, a question or two at a time — don't interrogate, and don't ask about anything else in the repo yet. After each answer, immediately write or update ${filePath} with whatever you know so far as JSON: {"companyName": string, "mission": string, "ceoName": string, "ceoPersonality": string, "onboardingComplete": boolean} — set "onboardingComplete" to false until you have all four answers, then write it one final time with "onboardingComplete": true. After that final write, briefly introduce yourself in your new persona. Until "onboardingComplete" is true, don't perform any other coding tasks.`;
+    return `There is no company profile configured yet in this repository. Before doing anything else, have a brief, friendly conversation with the founder (you're talking to them right now) to learn: (1) their company's name, (2) its mission or what it does, (3) what they'd like to name you as their AI CEO, and (4) what personality or communication style you should have. Ask one thing at a time — don't interrogate, and don't ask about anything else in the repo yet.
+
+${QUESTION_WIDGET_INSTRUCTIONS}
+
+For this onboarding interview specifically: ask the company name, mission, and CEO name as "text" widgets. For CEO personality, use a "single_select" widget with a handful of helpful preset tones (e.g. "Warm and encouraging", "Sharp and dry-witted", "Blunt and data-driven", "Formal and professional") — the founder can always type a custom one via the automatic Other option.
+
+After each answer, immediately write or update ${filePath} with whatever you know so far as JSON: {"companyName": string, "mission": string, "ceoName": string, "ceoPersonality": string, "onboardingComplete": boolean} — set "onboardingComplete" to false until you have all four answers, then write it one final time with "onboardingComplete": true. After that final write, briefly introduce yourself in your new persona. Until "onboardingComplete" is true, don't perform any other coding tasks.
+
+${getProcessSafetyInstructions(cwd)}`;
 }

package/dist/server/server-pid.js

@@ -0,0 +1,19 @@
+import { mkdir, unlink, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import { getProfileDir } from './profile.js';
+/**
+ * Lets Claude (or the user) identify the dashboard's own process before
+ * doing anything that might broadly restart or kill node processes in this
+ * repo (e.g. restarting a dev server) — see the system-prompt guardrail in
+ * profile.ts. Written at startup, removed on graceful shutdown.
+ */
+export function getServerPidPath(cwd) {
+    return path.join(getProfileDir(cwd), 'server.pid');
+}
+export async function writeServerPid(cwd, port) {
+    await mkdir(getProfileDir(cwd), { recursive: true });
+    await writeFile(getServerPidPath(cwd), JSON.stringify({ pid: process.pid, port }, null, 2) + '\n', 'utf-8');
+}
+export async function removeServerPid(cwd) {
+    await unlink(getServerPidPath(cwd)).catch(() => { });
+}

package/dist/server/start.js

@@ -1,7 +1,9 @@
 import { spawn } from 'node:child_process';
+import { ensureGitignore } from '../init.js';
 import { OWN_PACKAGE_NAME, OWN_PACKAGE_VERSION } from '../own-package.js';
 import { createServer } from './http-server.js';
 import { createLogger } from './logger.js';
+import { removeServerPid, writeServerPid } from './server-pid.js';
 import { generateToken } from './token.js';
 import { checkForUpdate } from './update-check.js';
 function openBrowser(url) {
@@ -21,10 +23,28 @@ function openBrowser(url) {
         // Fall through — the URL is printed to the terminal regardless.
     }
 }
+function installResilienceHandlers(logger) {
+    // A local dev dashboard staying up through an unexpected error is more
+    // useful than crashing the whole session over it — log and continue
+    // rather than let Node's default "exit on uncaught exception" behavior
+    // take down the UI mid-conversation.
+    process.on('uncaughtException', (err) => {
+        logger.log({ type: 'uncaught-exception', error: String(err?.message ?? err), stack: err?.stack });
+        console.error('my-team: uncaught exception (continuing):', err);
+    });
+    process.on('unhandledRejection', (reason) => {
+        logger.log({ type: 'unhandled-rejection', reason: String(reason) });
+        console.error('my-team: unhandled rejection (continuing):', reason);
+    });
+}
 export async function startServer(cwd) {
     const token = generateToken();
     const portRef = { port: 0 };
     const logger = createLogger(cwd);
+    installResilienceHandlers(logger);
+    // Idempotent — also fixes up repos that ran `init` before this existed,
+    // not just fresh ones, without needing them to re-run init.
+    ensureGitignore(cwd);
     // Fire-and-forget: never block startup on a network round-trip. /api/meta
     // just returns null until this resolves.
     const updateInfoRef = { current: null };
@@ -40,6 +60,12 @@ export async function startServer(cwd) {
             console.log(`my-team is running for ${cwd}`);
             console.log(`Open: ${url}`);
             console.log(`Logging raw requests/responses to: ${logger.filePath}`);
+            writeServerPid(cwd, portRef.port);
+            const shutdown = () => {
+                removeServerPid(cwd).finally(() => process.exit(0));
+            };
+            process.on('SIGINT', shutdown);
+            process.on('SIGTERM', shutdown);
             openBrowser(url);
             resolve();
         });

package/dist/web/app.js

@@ -43,6 +43,7 @@ const el = {
   typingAvatar: document.getElementById('typing-avatar'),
   form: document.getElementById('chat-form'),
   input: document.getElementById('chat-input'),
+  sendButton: document.getElementById('chat-send'),
 
   profileForm: document.getElementById('profile-form'),
   profileCompany: document.getElementById('profile-company'),
@@ -294,7 +295,12 @@ async function checkStatus() {
     selectPage('messages');
     checkForUpdateBanner(1);
 
-    if (!lastProfile?.onboardingComplete && !onboardingKickedOff) {
+    const hasHistory = await loadHistory();
+    // Only auto-kick off onboarding on a genuinely blank slate — if history
+    // replay already left an open, answerable widget (the conversation
+    // stopped mid-question last time), let the user respond to that instead
+    // of firing a second, duplicate kickoff on top of it.
+    if (!lastProfile?.onboardingComplete && !onboardingKickedOff && !hasHistory) {
       onboardingKickedOff = true;
       kickoffOnboarding();
     }
@@ -366,7 +372,7 @@ function renderMarkdown(text) {
   return html;
 }
 
-function appendMessageRow(kind, name, avatarText, text) {
+function appendMessageRow(kind, name, avatarText, text, tsOverride) {
   const row = document.createElement('div');
   row.className = `msg-row ${kind}`;
 
@@ -382,7 +388,8 @@ function appendMessageRow(kind, name, avatarText, text) {
   meta.textContent = name;
   const time = document.createElement('span');
   time.className = 'msg-time';
-  time.textContent = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  const d = tsOverride ? new Date(tsOverride) : new Date();
+  time.textContent = d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
   meta.appendChild(time);
 
   const textEl = document.createElement('div');
@@ -398,8 +405,251 @@ function appendMessageRow(kind, name, avatarText, text) {
   return { row, textEl };
 }
 
-function appendUserMessage(text) {
-  appendMessageRow('user', 'You', 'Y', text);
+function appendUserMessage(text, ts) {
+  appendMessageRow('user', 'You', 'Y', text, ts);
+}
+
+let pendingWidgetCount = 0;
+
+function setPendingWidget(delta) {
+  pendingWidgetCount = Math.max(0, pendingWidgetCount + delta);
+  el.input.disabled = pendingWidgetCount > 0;
+  el.sendButton.disabled = pendingWidgetCount > 0;
+  if (pendingWidgetCount === 0) el.input.focus();
+}
+
+const WIDGET_OPEN_FENCE = '```question-widget';
+
+// Incremental parser: processes streamed text chunks as they arrive rather
+// than re-parsing the full accumulated text on every delta. This matters for
+// two reasons — (1) a widget block mid-stream would otherwise flash raw JSON
+// before its closing fence arrives, and (2) naively re-rendering the whole
+// message on every delta would wipe out a widget the user already answered
+// if more text streams in afterward.
+class AssistantContentRenderer {
+  constructor(containerEl) {
+    this.container = containerEl;
+    this.state = 'text';
+    this.buffer = '';
+    this.textSegmentEl = null;
+    this.textRaw = '';
+    this.widgetPlaceholderEl = null;
+    this.widgetRaw = '';
+  }
+
+  push(deltaText) {
+    this.buffer += deltaText;
+    for (;;) {
+      if (this.state === 'text') {
+        const fenceIdx = this.buffer.indexOf(WIDGET_OPEN_FENCE);
+        if (fenceIdx === -1) {
+          // Hold back a tail as long as the marker minus one character —
+          // deltas arrive token-by-token, so the marker itself can easily
+          // be split across chunks (e.g. one delta ending "``" and the next
+          // starting "`question-widget"). Flushing eagerly would render the
+          // first half as plain text before the second half ever confirms
+          // it was a fence, and the marker would never be recognized.
+          const safeLen = Math.max(0, this.buffer.length - (WIDGET_OPEN_FENCE.length - 1));
+          const toFlush = this.buffer.slice(0, safeLen);
+          this.buffer = this.buffer.slice(safeLen);
+          if (toFlush) {
+            if (!this.textSegmentEl) {
+              this.textSegmentEl = document.createElement('div');
+              this.textSegmentEl.className = 'msg-text-segment';
+              this.container.appendChild(this.textSegmentEl);
+            }
+            this.textRaw += toFlush;
+            this.textSegmentEl.innerHTML = renderMarkdown(this.textRaw);
+          }
+          return;
+        }
+        if (fenceIdx > 0 || this.textRaw) {
+          if (!this.textSegmentEl) {
+            this.textSegmentEl = document.createElement('div');
+            this.textSegmentEl.className = 'msg-text-segment';
+            this.container.appendChild(this.textSegmentEl);
+          }
+          this.textRaw += this.buffer.slice(0, fenceIdx);
+          this.textSegmentEl.innerHTML = renderMarkdown(this.textRaw);
+        }
+        this.textSegmentEl = null;
+        this.textRaw = '';
+        this.buffer = this.buffer.slice(fenceIdx + WIDGET_OPEN_FENCE.length);
+        this.state = 'in-widget';
+        this.widgetRaw = '';
+        this.widgetPlaceholderEl = document.createElement('div');
+        this.widgetPlaceholderEl.className = 'question-widget-placeholder';
+        this.widgetPlaceholderEl.textContent = 'Preparing a question…';
+        this.container.appendChild(this.widgetPlaceholderEl);
+      } else {
+        const closeIdx = this.buffer.indexOf('```');
+        if (closeIdx === -1) {
+          // Same tail-holding logic for the closing fence (3 chars).
+          const safeLen = Math.max(0, this.buffer.length - 2);
+          this.widgetRaw += this.buffer.slice(0, safeLen);
+          this.buffer = this.buffer.slice(safeLen);
+          return;
+        }
+        this.widgetRaw += this.buffer.slice(0, closeIdx);
+        this.buffer = this.buffer.slice(closeIdx + 3);
+        this.state = 'text';
+        this.renderWidget(this.widgetRaw);
+      }
+    }
+  }
+
+  renderWidget(rawJson) {
+    let data;
+    try {
+      data = JSON.parse(rawJson);
+    } catch {
+      // Malformed JSON from the model — show the raw text rather than
+      // silently dropping it, so a parsing failure is at least visible.
+      this.widgetPlaceholderEl.textContent = rawJson.trim();
+      this.widgetPlaceholderEl.className = 'msg-text-segment';
+      this.widgetPlaceholderEl = null;
+      return;
+    }
+    setPendingWidget(1);
+    let answered = false;
+    const widgetEl = createQuestionWidget(data, (messageText) => {
+      if (answered) return;
+      answered = true;
+      setPendingWidget(-1);
+      streamChat(messageText, { showUserBubble: false, isWidgetAnswer: true });
+    });
+    this.widgetPlaceholderEl.replaceWith(widgetEl);
+    this.widgetPlaceholderEl = null;
+  }
+
+  finish() {
+    // No more text is coming, so anything still held back as a possible
+    // partial fence match is definitely not one — flush it as plain text.
+    if (this.state === 'text' && this.buffer) {
+      if (!this.textSegmentEl) {
+        this.textSegmentEl = document.createElement('div');
+        this.textSegmentEl.className = 'msg-text-segment';
+        this.container.appendChild(this.textSegmentEl);
+      }
+      this.textRaw += this.buffer;
+      this.textSegmentEl.innerHTML = renderMarkdown(this.textRaw);
+      this.buffer = '';
+    }
+    // A block left unterminated when the turn ends (shouldn't normally
+    // happen) — show what was received rather than leaving a permanent
+    // "Preparing a question…" placeholder with no way to proceed.
+    if (this.state === 'in-widget' && this.widgetPlaceholderEl) {
+      this.widgetPlaceholderEl.textContent = `${WIDGET_OPEN_FENCE}\n${this.widgetRaw}${this.buffer}`;
+      this.widgetPlaceholderEl.className = 'msg-text-segment';
+    }
+  }
+}
+
+// lockedAnswer renders the widget immediately in its answered state with no
+// interactive controls — used when replaying history, since the underlying
+// SDK session has already moved past that turn and re-answering it live
+// would be meaningless (or worse, confusing) rather than just cosmetic.
+function createQuestionWidget(data, onAnswer, lockedAnswer) {
+  const card = document.createElement('div');
+  card.className = 'question-widget';
+
+  const questionEl = document.createElement('div');
+  questionEl.className = 'question-widget-question';
+  questionEl.textContent = data.question ?? 'Question';
+  card.appendChild(questionEl);
+
+  const body = document.createElement('div');
+  body.className = 'question-widget-body';
+  card.appendChild(body);
+
+  function submit(displayText, messageText) {
+    card.classList.add('answered');
+    body.innerHTML = '';
+    const answerEl = document.createElement('div');
+    answerEl.className = 'question-widget-answer';
+    answerEl.textContent = displayText;
+    body.appendChild(answerEl);
+    if (onAnswer) onAnswer(messageText ?? displayText);
+  }
+
+  if (lockedAnswer != null) {
+    submit(lockedAnswer, lockedAnswer);
+    return card;
+  }
+
+  function buildOtherRow(placeholder) {
+    const row = document.createElement('div');
+    row.className = 'question-widget-row question-widget-other';
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.placeholder = placeholder;
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.textContent = 'Send';
+    row.appendChild(input);
+    row.appendChild(btn);
+    const trigger = () => {
+      const val = input.value.trim();
+      if (val) submit(val, val);
+    };
+    btn.addEventListener('click', trigger);
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') trigger();
+    });
+    return row;
+  }
+
+  const type = data.type;
+  const options = Array.isArray(data.options) ? data.options : [];
+
+  if (type === 'single_select') {
+    for (const opt of options) {
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = 'question-widget-option';
+      btn.textContent = opt;
+      btn.addEventListener('click', () => submit(opt, opt));
+      body.appendChild(btn);
+    }
+    body.appendChild(buildOtherRow('Other…'));
+  } else if (type === 'multi_select') {
+    const checkboxes = [];
+    for (const opt of options) {
+      const label = document.createElement('label');
+      label.className = 'question-widget-checkbox-label';
+      const cb = document.createElement('input');
+      cb.type = 'checkbox';
+      cb.value = opt;
+      checkboxes.push(cb);
+      label.appendChild(cb);
+      label.appendChild(document.createTextNode(opt));
+      body.appendChild(label);
+    }
+    const otherInput = document.createElement('input');
+    otherInput.type = 'text';
+    otherInput.placeholder = 'Other (optional)…';
+    otherInput.className = 'question-widget-other-inline';
+    body.appendChild(otherInput);
+
+    const submitBtn = document.createElement('button');
+    submitBtn.type = 'button';
+    submitBtn.className = 'question-widget-submit';
+    submitBtn.textContent = 'Submit';
+    submitBtn.addEventListener('click', () => {
+      const selected = checkboxes.filter((c) => c.checked).map((c) => c.value);
+      const other = otherInput.value.trim();
+      if (other) selected.push(other);
+      if (!selected.length) return;
+      const display = selected.join(', ');
+      submit(display, display);
+    });
+    body.appendChild(submitBtn);
+  } else {
+    // 'text', or an unrecognized type — a free-text prompt never silently drops the question.
+    body.appendChild(buildOtherRow('Type your answer…'));
+  }
+
+  return card;
 }
 
 function appendAssistantRow(turnMeta) {
@@ -411,15 +661,131 @@ function appendAssistantRow(turnMeta) {
     badge.textContent = turnMeta.effort ? `${modelLabel} · ${turnMeta.effort}` : modelLabel;
     result.row.querySelector('.msg-meta').appendChild(badge);
   }
+  result.renderer = new AssistantContentRenderer(result.textEl);
   return result;
 }
 
-function appendToolMessage(name) {
-  appendMessageRow('tool', 'System', '⚙', `Using tool: ${name}`);
+function appendToolMessage(name, ts) {
+  appendMessageRow('tool', 'System', '⚙', `Using tool: ${name}`, ts);
+}
+
+function appendErrorMessage(message, ts) {
+  appendMessageRow('error', 'Error', '!', message, ts);
+}
+
+// One-shot counterpart to AssistantContentRenderer for replaying a
+// message whose full text is already known (history) rather than
+// streaming in — a single regex pass is fine here since there's no
+// "flash of raw JSON" or "wipe answered state" risk on a fully-formed string.
+// liveOnAnswer is only passed for a trailing, never-answered widget at the
+// very end of history (the conversation was interrupted — e.g. server
+// restarted — before the founder responded). That one genuinely needs to
+// keep working exactly like a live pending widget, composer gating
+// included, rather than being either dead-looking (locked) or clickable but
+// silently doing nothing (no answer handler).
+function renderStaticAssistantText(container, fullText, lockedAnswer, liveOnAnswer) {
+  const re = /```question-widget\s*\n([\s\S]*?)\n```/;
+  const match = fullText.match(re);
+  if (!match) {
+    const seg = document.createElement('div');
+    seg.className = 'msg-text-segment';
+    seg.innerHTML = renderMarkdown(fullText);
+    container.appendChild(seg);
+    return;
+  }
+
+  const before = fullText.slice(0, match.index);
+  const after = fullText.slice(match.index + match[0].length);
+
+  if (before.trim()) {
+    const seg = document.createElement('div');
+    seg.className = 'msg-text-segment';
+    seg.innerHTML = renderMarkdown(before);
+    container.appendChild(seg);
+  }
+
+  let data = null;
+  try {
+    data = JSON.parse(match[1]);
+  } catch {
+    const seg = document.createElement('div');
+    seg.className = 'msg-text-segment';
+    seg.textContent = match[1].trim();
+    container.appendChild(seg);
+  }
+  if (data) {
+    if (lockedAnswer != null) {
+      container.appendChild(createQuestionWidget(data, null, lockedAnswer));
+    } else if (liveOnAnswer) {
+      setPendingWidget(1);
+      let answered = false;
+      const widgetEl = createQuestionWidget(data, (messageText) => {
+        if (answered) return;
+        answered = true;
+        setPendingWidget(-1);
+        liveOnAnswer(messageText);
+      });
+      container.appendChild(widgetEl);
+    } else {
+      // Shouldn't normally happen (an unanswered widget anywhere but the
+      // last entry would mean the conversation continued without it ever
+      // being answered) — render inert rather than a dead-looking control.
+      container.appendChild(createQuestionWidget(data, null, '(not answered)'));
+    }
+  }
+
+  if (after.trim()) {
+    const seg = document.createElement('div');
+    seg.className = 'msg-text-segment';
+    seg.innerHTML = renderMarkdown(after);
+    container.appendChild(seg);
+  }
 }
 
-function appendErrorMessage(message) {
-  appendMessageRow('error', 'Error', '!', message);
+async function loadHistory() {
+  const res = await api('/api/chat/history');
+  const { history } = await res.json();
+
+  for (let i = 0; i < history.length; i++) {
+    const entry = history[i];
+    if (entry.kind === 'user') {
+      appendUserMessage(entry.text, entry.ts);
+    } else if (entry.kind === 'widget-answer') {
+      // Consumed by the preceding assistant entry's widget below — a live
+      // widget answer never gets its own bubble either.
+      continue;
+    } else if (entry.kind === 'tool') {
+      appendToolMessage(entry.name, entry.ts);
+    } else if (entry.kind === 'error') {
+      appendErrorMessage(entry.message, entry.ts);
+    } else if (entry.kind === 'assistant') {
+      const { row, textEl } = appendMessageRow(
+        'assistant',
+        lastProfile?.ceoName || 'your AI CEO',
+        getCeoInitial(),
+        '',
+        entry.ts,
+      );
+      if (entry.model) {
+        const badge = document.createElement('span');
+        badge.className = 'msg-model-badge';
+        const modelLabel = modelDisplayName(entry.model);
+        badge.textContent = entry.effort ? `${modelLabel} · ${entry.effort}` : modelLabel;
+        row.querySelector('.msg-meta').appendChild(badge);
+      }
+      const next = history[i + 1];
+      const lockedAnswer = next?.kind === 'widget-answer' ? next.text : null;
+      const isTrailingUnanswered = i === history.length - 1 && !lockedAnswer;
+      renderStaticAssistantText(
+        textEl,
+        entry.text,
+        lockedAnswer,
+        isTrailingUnanswered ? (messageText) => streamChat(messageText, { showUserBubble: false, isWidgetAnswer: true }) : null,
+      );
+    }
+  }
+
+  return history.length > 0;
 }
 
 function showTypingIndicator() {
@@ -432,20 +798,24 @@ function hideTypingIndicator() {
   el.typingIndicator.hidden = true;
 }
 
-async function streamChat(message, { showUserBubble }) {
+async function streamChat(message, { showUserBubble, isWidgetAnswer }) {
   if (showUserBubble) appendUserMessage(message);
   showTypingIndicator();
   setStatus('typing');
 
-  let assistantTextEl = null;
-  let assistantText = '';
+  let assistantRenderer = null;
   let sawContent = false;
   let turnMeta = null;
 
   const res = await api('/api/chat', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ message, model: el.chatModelSelect.value, effort: el.chatEffortSelect.value }),
+    body: JSON.stringify({
+      message,
+      model: el.chatModelSelect.value,
+      effort: el.chatEffortSelect.value,
+      isWidgetAnswer: isWidgetAnswer === true,
+    }),
   });
 
   if (!res.ok || !res.body) {
@@ -479,11 +849,10 @@ async function streamChat(message, { showUserBubble }) {
           hideTypingIndicator();
           sawContent = true;
         }
-        if (!assistantTextEl) {
-          assistantTextEl = appendAssistantRow(turnMeta).textEl;
+        if (!assistantRenderer) {
+          assistantRenderer = appendAssistantRow(turnMeta).renderer;
         }
-        assistantText += event.text;
-        assistantTextEl.innerHTML = renderMarkdown(assistantText);
+        assistantRenderer.push(event.text);
         el.messages.scrollTop = el.messages.scrollHeight;
       } else if (event.type === 'tool-use') {
         if (!sawContent) {
@@ -502,6 +871,7 @@ async function streamChat(message, { showUserBubble }) {
     }
   }
 
+  assistantRenderer?.finish();
   hideTypingIndicator();
   if (statusState !== 'offline') setStatus('online');
   await refreshProfileIfNeeded();
@@ -517,11 +887,18 @@ el.form.addEventListener('submit', async (e) => {
   if (!message) return;
   el.input.value = '';
   el.input.disabled = true;
+  el.sendButton.disabled = true;
   try {
     await streamChat(message, { showUserBubble: true });
   } finally {
-    el.input.disabled = false;
-    el.input.focus();
+    // A widget the model asked as part of this same turn may still be
+    // unanswered — setPendingWidget already owns disabling in that case,
+    // so only re-enable here if nothing is pending.
+    if (pendingWidgetCount === 0) {
+      el.input.disabled = false;
+      el.sendButton.disabled = false;
+      el.input.focus();
+    }
   }
 });
 

package/dist/web/index.html

@@ -6,21 +6,28 @@
   <link rel="stylesheet" href="/style.css" />
 </head>
 <body>
-  <p id="loading">Checking Claude Code status&hellip;</p>
+  <div id="loading" class="splash">
+    <div class="splash-logo"></div>
+    <div class="splash-spinner"></div>
+    <p class="splash-text">Checking Claude Code status&hellip;</p>
+  </div>
 
-  <section id="onboarding" hidden>
-    <h1>Set up Claude Code</h1>
-    <div id="onboarding-cli-missing" hidden>
-      <p>The Claude Code CLI binary couldn't be found or run.</p>
-      <p>Try installing it globally, then reload this page:</p>
-      <pre>npm install -g @anthropic-ai/claude-code</pre>
-    </div>
-    <div id="onboarding-not-authenticated" hidden>
-      <p>Claude Code isn't logged in yet. In a terminal, run:</p>
-      <pre>claude login</pre>
-      <p>Then come back here.</p>
+  <section id="onboarding" class="splash" hidden>
+    <div class="splash-logo"></div>
+    <div class="splash-card">
+      <h1>Set up Claude Code</h1>
+      <div id="onboarding-cli-missing" hidden>
+        <p>The Claude Code CLI binary couldn't be found or run.</p>
+        <p>Try installing it globally, then reload this page:</p>
+        <pre>npm install -g @anthropic-ai/claude-code</pre>
+      </div>
+      <div id="onboarding-not-authenticated" hidden>
+        <p>Claude Code isn't logged in yet. In a terminal, run:</p>
+        <pre>claude login</pre>
+        <p>Then come back here.</p>
+      </div>
+      <button id="check-again">Check again</button>
     </div>
-    <button id="check-again">Check again</button>
   </section>
 
   <div id="app-shell" hidden>
@@ -134,7 +141,7 @@
           </div>
           <form id="chat-form">
             <input id="chat-input" type="text" placeholder="Message your CEO&hellip;" autocomplete="off" />
-            <button type="submit">Send</button>
+            <button type="submit" id="chat-send">Send</button>
           </form>
         </section>
       </main>

package/dist/web/style.css

@@ -65,20 +65,80 @@ body {
   display: none !important;
 }
 
-#loading,
-#onboarding {
-  max-width: 480px;
-  margin: 4rem auto;
-  padding: 0 1rem;
+.splash {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.1rem;
+  padding: 1.5rem;
+  background: radial-gradient(circle at 50% 35%, #241f3d 0%, #131120 65%, #0d0c17 100%);
+  color: #eceafc;
+  text-align: center;
+}
+
+.splash-logo {
+  width: 56px;
+  height: 56px;
+  border-radius: 16px;
+  background: linear-gradient(135deg, var(--accent), #b45cff);
+  box-shadow: 0 8px 32px rgba(124, 116, 255, 0.35);
+}
+
+.splash-spinner {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  border: 3px solid rgba(255, 255, 255, 0.15);
+  border-top-color: #b8b2ff;
+  animation: splash-spin 0.8s linear infinite;
+}
+
+@keyframes splash-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.splash-text {
+  margin: 0;
+  color: #a9a5cf;
+  font-size: 0.92rem;
+}
+
+.splash-card {
+  width: 100%;
+  max-width: 440px;
+  background: var(--bg);
+  color: var(--fg);
+  border-radius: 14px;
+  padding: 1.75rem;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+  text-align: left;
+}
+
+.splash-card h1 {
+  margin: 0 0 0.9rem;
+  font-size: 1.15rem;
   text-align: center;
 }
 
-#onboarding pre {
+.splash-card p {
+  line-height: 1.5;
+}
+
+.splash-card pre {
   background: var(--bg-subtle);
   padding: 0.75rem 1rem;
   border-radius: 8px;
   overflow-x: auto;
-  text-align: left;
+}
+
+.splash-card button {
+  width: 100%;
+  margin-top: 0.4rem;
 }
 
 /* ---------- App shell ---------- */
@@ -502,6 +562,131 @@ body {
   color: #e5484d;
 }
 
+.msg-text-segment:empty {
+  display: none;
+}
+
+.question-widget-placeholder {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  color: var(--muted);
+  font-style: italic;
+  font-size: 0.88rem;
+  padding: 0.3rem 0;
+}
+
+.question-widget {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 0.9rem 1rem;
+  margin: 0.5rem 0;
+  max-width: 420px;
+  background: var(--bg-subtle);
+}
+
+.question-widget-question {
+  font-weight: 600;
+  margin-bottom: 0.7rem;
+  line-height: 1.4;
+}
+
+.question-widget-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+}
+
+.question-widget-option {
+  background: var(--bg);
+  color: var(--fg);
+  border: 1px solid var(--border);
+  text-align: left;
+  font-weight: 500;
+  padding: 0.55rem 0.8rem;
+}
+
+.question-widget-option:hover {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
+}
+
+.question-widget-checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.92rem;
+  cursor: pointer;
+}
+
+.question-widget-checkbox-label input {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--accent);
+}
+
+.question-widget-submit {
+  align-self: flex-start;
+}
+
+.question-widget-row {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.question-widget-row input {
+  flex: 1;
+  padding: 0.5rem 0.7rem;
+  border-radius: 7px;
+  border: 1px solid var(--border);
+  background: var(--bg);
+  color: var(--fg);
+  font-size: 0.9rem;
+}
+
+.question-widget-row input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.question-widget-row button {
+  flex-shrink: 0;
+  padding: 0.5rem 0.9rem;
+  font-size: 0.85rem;
+}
+
+.question-widget-other {
+  margin-top: 0.15rem;
+}
+
+.question-widget-other-inline {
+  padding: 0.5rem 0.7rem;
+  border-radius: 7px;
+  border: 1px solid var(--border);
+  background: var(--bg);
+  color: var(--fg);
+  font-size: 0.9rem;
+}
+
+.question-widget-other-inline:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.question-widget.answered {
+  background: transparent;
+}
+
+.question-widget-answer {
+  color: var(--accent);
+  font-weight: 600;
+  font-size: 0.92rem;
+}
+
+.question-widget-answer::before {
+  content: '✓ ';
+}
+
 #typing-indicator {
   display: flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@harborgroup/my-team",
-  "version": "0.2.0",
+  "version": "0.4.1",
   "description": "Chat with your local Claude Code subscription from a web dashboard, scoped to the current repo. Dev-only.",
   "type": "module",
   "bin": {