feat(web): mermaid diagram lightbox on click

docs/tooling/mermaid-lightbox-dogfood.md

@@ -0,0 +1,56 @@
+# Mermaid lightbox dogfood (Playwright)
+
+Two Playwright targets:
+
+| Target | What it exercises | Command |
+|--------|-------------------|---------|
+| **Component (Vite)** | `MermaidDiagram` in isolation on dev server | `npm run test:mermaid-lightbox:playwright` |
+| **Live session (hub)** | Real chat thread, click-to-zoom | `npm run test:mermaid-lightbox:live` |
+
+## Live session (production-shaped)
+
+**Session URL (after seed):**
+
+`{HAPI_URL}/sessions/a7370000-0000-4000-8000-000000000737`
+
+Default `HAPI_URL` for live tests: `http://127.0.0.1:3006` (daily driver).  
+For tailnet: `HAPI_URL=https://hapi.tail9944ee.ts.net` (seed **that** hub's DB first).
+
+### 1. Seed fixtures (hub DB)
+
+On the machine that owns `HAPI_DB_PATH` (usually `~/.hapi/hapi.db`):
+
+```bash
+bun run seed:mermaid-lightbox:session
+```
+
+Inserts 15 assistant messages (one per diagram type). Re-run to replace messages in that session.
+
+### 2. Deploy web with your branch
+
+```bash
+hapi-driver-rebuild --build-web
+# activate soup when ready (restarts hub)
+```
+
+Hard-refresh the browser after web changes.
+
+### 3. Run live Playwright
+
+```bash
+HAPI_LIVE=1 HAPI_URL=http://127.0.0.1:3006 npm run test:mermaid-lightbox:live
+```
+
+Requires `~/.hapi/settings.json` `cliApiToken` (or `HAPI_ACCESS_TOKEN`).
+
+**Pass criteria:** dialog opens, SVG in **shadow root** (`[data-mermaid-lightbox]`), expands vs inline, sequence has multiple actors/lines.
+
+If tests report `legacy` or `empty` lightbox, the served web bundle predates the shadow-DOM fix — rebuild driver.
+
+## Isolation page (not chat)
+
+Only for component regression; **not** the same as chat:
+
+`http://127.0.0.1:5173/mermaid-lightbox-e2e.html?case=sequence` (Vite dev, not on tailnet dist unless you add the HTML to a build).
+
+Diagram sources: `web/src/dev/mermaid-lightbox-cases.ts`

package.json

@@ -25,6 +25,9 @@
         "test:shared": "cd shared && bun run test",
         "test:e2e": "playwright test",
         "test:e2e:ui": "playwright test --ui",
+        "test:mermaid-lightbox:playwright": "timeout 600 node scripts/dev/mermaid-lightbox-playwright.mjs",
+        "test:mermaid-lightbox:live": "timeout 900 env HAPI_LIVE=1 playwright test -c web/playwright.live.config.ts",
+        "seed:mermaid-lightbox:session": "bun run scripts/dev/mermaid-lightbox-seed-session-db.ts",
         "clean-session": "bun run hub/scripts/cleanup-sessions.ts",
         "release-all": "cd cli && bun run release-all"
     },

scripts/dev/mermaid-lightbox-live-playwright.mjs

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+/** Bounded wrapper: Playwright against a real HAPI chat session (no Vite). */
+import { spawnSync } from 'node:child_process'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const REPO_ROOT = resolve(dirname(fileURLToPath(import.meta.url)), '../..')
+const npmBin = process.env.NPM_BIN ?? 'npm'
+
+const result = spawnSync(
+    npmBin,
+    ['run', 'test:mermaid-lightbox:live'],
+    {
+        cwd: REPO_ROOT,
+        stdio: 'inherit',
+        env: { ...process.env, PATH: process.env.PATH, HAPI_LIVE: '1' },
+    },
+)
+
+process.exit(result.status === null ? 1 : result.status)

scripts/dev/mermaid-lightbox-playwright.mjs

@@ -0,0 +1,26 @@
+#!/usr/bin/env node
+/**
+ * Bounded wrapper for mermaid lightbox Playwright (web/e2e).
+ * Vite lifecycle is owned by web/playwright.config.ts webServer — not this process.
+ *
+ * Usage (from repo root):
+ *   npm run test:mermaid-lightbox:playwright
+ */
+import { spawnSync } from 'node:child_process'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const WEB_DIR = resolve(dirname(fileURLToPath(import.meta.url)), '../../web')
+const npmBin = process.env.NPM_BIN ?? 'npm'
+
+const result = spawnSync(
+    npmBin,
+    ['run', 'test:mermaid-lightbox:e2e'],
+    {
+        cwd: WEB_DIR,
+        stdio: 'inherit',
+        env: { ...process.env, PATH: process.env.PATH },
+    },
+)
+
+process.exit(result.status === null ? 1 : result.status)

scripts/dev/mermaid-lightbox-seed-session-db.ts

@@ -0,0 +1,85 @@
+/**
+ * Seed assistant messages with mermaid fixtures into a hub SQLite DB.
+ * Run on the host that owns HAPI_DB_PATH (usually the hub machine).
+ *
+ *   HAPI_DB_PATH=~/.hapi/hapi.db SESSION_ID=<uuid> bun run scripts/dev/mermaid-lightbox-seed-session-db.ts
+ */
+import { Database } from 'bun:sqlite'
+import { randomUUID } from 'node:crypto'
+import { homedir } from 'node:os'
+import { join } from 'node:path'
+import {
+    MERMAID_LIGHTBOX_CASE_IDS,
+    MERMAID_LIGHTBOX_CASES,
+} from '../../web/src/dev/mermaid-lightbox-cases'
+
+const dbPath = process.env.HAPI_DB_PATH ?? join(homedir(), '.hapi', 'hapi.db')
+/** Stable id for mermaid Playwright live session (create if missing). */
+const sessionId = process.env.SESSION_ID ?? 'a7370000-0000-4000-8000-000000000737'
+const sessionTag = 'mermaid-lightbox-e2e'
+
+function agentMermaidEnvelope(caseId: string, code: string) {
+    const text = `<!-- mermaid-e2e:${caseId} -->\n\`\`\`mermaid\n${code.trim()}\n\`\`\``
+    return {
+        role: 'agent',
+        content: {
+            type: 'output',
+            data: {
+                type: 'assistant',
+                uuid: randomUUID(),
+                parentUuid: null,
+                isSidechain: false,
+                message: {
+                    content: [{ type: 'text', text }],
+                },
+            },
+        },
+    }
+}
+
+const db = new Database(dbPath)
+const now = Date.now()
+const existing = db.prepare('SELECT id, tag FROM sessions WHERE id = ?').get(sessionId) as
+    | { id: string; tag: string | null }
+    | undefined
+
+if (existing && existing.tag !== sessionTag) {
+    throw new Error(
+        `Refusing to seed mermaid fixtures into session ${sessionId}: tag is `
+            + `${JSON.stringify(existing.tag)}, expected ${JSON.stringify(sessionTag)}. `
+            + `Unset SESSION_ID or use a session created by this script.`,
+    )
+}
+
+if (!existing) {
+    db.prepare(`
+        INSERT INTO sessions (
+            id, tag, namespace, created_at, updated_at, active, seq
+        ) VALUES (?, ?, 'default', ?, ?, 0, 0)
+    `).run(sessionId, sessionTag, now, now)
+    console.log(`created session ${sessionId} (${sessionTag})`)
+}
+
+const insert = db.prepare(`
+    INSERT INTO messages (id, session_id, content, created_at, seq, local_id, invoked_at, scheduled_at)
+    VALUES (?, ?, ?, ?, ?, NULL, ?, NULL)
+`)
+
+db.prepare('DELETE FROM messages WHERE session_id = ?').run(sessionId)
+
+let seqRow = db.prepare('SELECT COALESCE(MAX(seq), 0) AS maxSeq FROM messages WHERE session_id = ?').get(sessionId) as {
+    maxSeq: number
+}
+
+for (const caseId of MERMAID_LIGHTBOX_CASE_IDS) {
+    const code = MERMAID_LIGHTBOX_CASES[caseId]
+    const envelope = agentMermaidEnvelope(caseId, code)
+    const seq = (seqRow.maxSeq ?? 0) + 1
+    seqRow = { maxSeq: seq }
+    const messageId = randomUUID()
+    insert.run(messageId, sessionId, JSON.stringify(envelope), now, seq, now)
+    console.log(`seeded ${caseId} @ seq ${seq}`)
+}
+
+db.prepare('UPDATE sessions SET updated_at = ? WHERE id = ?').run(now, sessionId)
+console.log(`Done. Open: /sessions/${sessionId}`)

web/.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 dist/
 dev-dist/
+test-results/

web/e2e-fixtures/mermaid-lightbox-e2e.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Mermaid lightbox e2e</title>
+  <style>
+    body { margin: 0; background: #1a1d21; color: #edf1f5; font-family: system-ui, sans-serif; }
+    #root { padding: 24px; max-width: 960px; }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="../src/dev/mermaid-lightbox-e2e.tsx"></script>
+</body>
+</html>

web/e2e-fixtures/mermaid-lightbox-smoke.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Mermaid lightbox smoke</title>
+  <style>
+    body { margin: 0; background: #1a1d21; color: #edf1f5; font-family: system-ui, sans-serif; }
+    #root { padding: 24px; max-width: 720px; }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="../src/dev/mermaid-lightbox-smoke.tsx"></script>
+</body>
+</html>

web/e2e/helpers/hapi-live.ts

@@ -0,0 +1,82 @@
+import { readFileSync } from 'node:fs'
+import { homedir } from 'node:os'
+import { join } from 'node:path'
+import type { Page } from '@playwright/test'
+
+export function getHapiBaseUrl(): string {
+    return (process.env.HAPI_URL ?? 'http://127.0.0.1:3006').replace(/\/$/, '')
+}
+
+export function getMermaidTestSessionId(): string {
+    return process.env.SESSION_ID ?? 'a7370000-0000-4000-8000-000000000737'
+}
+
+export function readCliAccessToken(): string {
+    if (process.env.HAPI_ACCESS_TOKEN?.trim()) {
+        return process.env.HAPI_ACCESS_TOKEN.trim()
+    }
+    const settingsPath = process.env.HAPI_SETTINGS_PATH ?? join(homedir(), '.hapi', 'settings.json')
+    const settings = JSON.parse(readFileSync(settingsPath, 'utf8')) as { cliApiToken?: string }
+    if (!settings.cliApiToken) {
+        throw new Error(`Missing cliApiToken in ${settingsPath}`)
+    }
+    return settings.cliApiToken
+}
+
+export async function installHapiAuth(page: Page, baseUrl: string, accessToken: string) {
+    await page.addInitScript(({ token, url }) => {
+        localStorage.setItem(`hapi_access_token::${url}`, token)
+    }, { token: accessToken, url: baseUrl })
+}
+
+export async function scrollChatToBottom(page: Page) {
+    for (let i = 0; i < 24; i += 1) {
+        const found = await page.locator('[data-mermaid-diagram][data-rendered="true"]').count()
+        if (found > 0) break
+        await page.evaluate(() => {
+            const scrollers = [...document.querySelectorAll('*')].filter(
+                (el) => el.scrollHeight > el.clientHeight + 80,
+            )
+            scrollers.sort((a, b) => b.scrollHeight - a.scrollHeight)
+            const target = scrollers[0]
+            if (target) target.scrollTop = target.scrollHeight
+            window.scrollTo(0, document.body.scrollHeight)
+        })
+        await page.waitForTimeout(400)
+    }
+}
+
+export type LiveLightboxMetrics = {
+    inlineW: number
+    inlineH: number
+    lightboxW: number
+    lightboxH: number
+    hasShadowSvg: boolean
+    shapeTotal: number
+    coverage: number
+}
+
+export async function readLiveLightboxMetrics(page: Page): Promise<LiveLightboxMetrics> {
+    return page.evaluate(() => {
+        const inlineSvg = document.querySelector('[data-mermaid-diagram][data-rendered="true"] svg')
+        const inlineBox = inlineSvg?.getBoundingClientRect()
+        const host = document.querySelector('[data-mermaid-lightbox]')
+        const lightboxSvg = host?.shadowRoot?.querySelector('svg')
+        const lightboxBox = lightboxSvg?.getBoundingClientRect()
+        const vw = window.visualViewport?.width ?? window.innerWidth
+        const vh = window.visualViewport?.height ?? window.innerHeight
+        const shapes =
+            (lightboxSvg?.querySelectorAll('rect').length ?? 0)
+            + (lightboxSvg?.querySelectorAll('path').length ?? 0)
+            + (lightboxSvg?.querySelectorAll('line').length ?? 0)
+        return {
+            inlineW: inlineBox?.width ?? 0,
+            inlineH: inlineBox?.height ?? 0,
+            lightboxW: lightboxBox?.width ?? 0,
+            lightboxH: lightboxBox?.height ?? 0,
+            hasShadowSvg: Boolean(lightboxSvg),
+            shapeTotal: shapes,
+            coverage: Math.max((lightboxBox?.width ?? 0) / vw, (lightboxBox?.height ?? 0) / vh),
+        }
+    })
+}