@geminixiang/mama 0.2.0-beta.6 → 0.2.0-beta.8

package/dist/session-view/portal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"portal.d.ts","sourceRoot":"","sources":["../../src/session-view/portal.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,MAAM,CAAC;AAQ5D,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,YAAY,CAAC;AAEhE,wBAAsB,wBAAwB,CAC5C,GAAG,EAAE,eAAe,EACpB,GAAG,EAAE,cAAc,EACnB,GAAG,EAAE,GAAG,EACR,qBAAqB,CAAC,EAAE,6BAA6B,GACpD,OAAO,CAAC,OAAO,CAAC,CA6DlB;AA4FD,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG;IAC1C,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;CACjB,CA8BA","sourcesContent":["import type { IncomingMessage, ServerResponse } from \"http\";\nimport * as log from \"../log.js\";\nimport {\n  loadSessionViewModel,\n  resolveRequestedSessionFile,\n  type SessionViewItem,\n  type SessionViewRelation,\n} from \"./service.js\";\nimport type { InMemorySessionViewTokenStore } from \"./store.js\";\n\nexport async function handleSessionViewRequest(\n  req: IncomingMessage,\n  res: ServerResponse,\n  url: URL,\n  sessionViewTokenStore?: InMemorySessionViewTokenStore,\n): Promise<boolean> {\n  if (req.method !== \"GET\" || url.pathname !== \"/session\") {\n    return false;\n  }\n\n  const token = url.searchParams.get(\"token\")?.trim();\n  if (!token || !sessionViewTokenStore) {\n    res.writeHead(400, { \"Content-Type\": \"text/html; charset=utf-8\" });\n    res.end(\n      renderStatusPage(\"Session unavailable\", \"This session link is invalid or has expired.\"),\n    );\n    return true;\n  }\n\n  const entry = sessionViewTokenStore.peek(token);\n  if (!entry) {\n    res.writeHead(400, { \"Content-Type\": \"text/html; charset=utf-8\" });\n    res.end(\n      renderStatusPage(\"Session unavailable\", \"This session link is invalid or has expired.\"),\n    );\n    return true;\n  }\n\n  const requestedSession = url.searchParams.get(\"session\");\n  let targetSessionFile: string | null;\n  try {\n    targetSessionFile = resolveRequestedSessionFile(entry.sessionFile, requestedSession);\n  } catch (error) {\n    log.logWarning(\n      `[${entry.conversationId}] Corrupted session file referenced for ${entry.sessionFile}`,\n      error instanceof Error ? error.message : String(error),\n    );\n    res.writeHead(500, { \"Content-Type\": \"text/html; charset=utf-8\" });\n    res.end(\n      renderStatusPage(\"Session unavailable\", \"The selected session file appears to be corrupted.\"),\n    );\n    return true;\n  }\n  if (!targetSessionFile) {\n    res.writeHead(400, { \"Content-Type\": \"text/html; charset=utf-8\" });\n    res.end(renderStatusPage(\"Session unavailable\", \"The selected session link is invalid.\"));\n    return true;\n  }\n\n  try {\n    const model = loadSessionViewModel(targetSessionFile);\n    res.writeHead(200, {\n      \"Content-Type\": \"text/html; charset=utf-8\",\n      \"Cache-Control\": \"no-store\",\n    });\n    res.end(renderSessionPage(model, entry.token, entry.expiresAt));\n  } catch (error) {\n    log.logWarning(\n      `[${entry.conversationId}] Failed to render session ${entry.sessionFile}`,\n      error instanceof Error ? error.message : String(error),\n    );\n    res.writeHead(500, { \"Content-Type\": \"text/html; charset=utf-8\" });\n    res.end(renderStatusPage(\"Session unavailable\", \"The session could not be loaded right now.\"));\n  }\n\n  return true;\n}\n\nfunction renderSessionPage(\n  model: {\n    title: string;\n    sessionId: string;\n    fileName: string;\n    createdAt: string;\n    updatedAt: string;\n    entryCount: number;\n    items: SessionViewItem[];\n    parent?: SessionViewRelation;\n    forks: SessionViewRelation[];\n  },\n  token: string,\n  expiresAt: number,\n): string {\n  const items =\n    model.items.length > 0\n      ? model.items.map((item) => renderItem(item, token)).join(\"\\n\")\n      : `<div class=\"system-event\"><span class=\"event-dot\"></span><span class=\"event-text\">No messages yet — send one to the bot, then refresh.</span></div>`;\n\n  const relatedSections = model.parent\n    ? `<section class=\"related-card stack\">\n        <p class=\"eyebrow\">Forked from</p>\n        ${renderRelationCard(model.parent, token)}\n      </section>`\n    : \"\";\n\n  return renderHtmlDocument(\n    `${model.title} · Session Viewer`,\n    `<header class=\"hero-card\">\n      <div class=\"hero-top\">\n        <div class=\"hero-title-group\">\n          <span class=\"hero-wordmark\">mama</span>\n          <h1 class=\"hero-title\">${esc(model.title)}</h1>\n        </div>\n        <button class=\"refresh-btn\" onclick=\"window.location.reload()\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M12.5 2.5A6 6 0 1 0 13 7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/><path d=\"M10 2.5h2.5V5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          Refresh\n        </button>\n      </div>\n      <div class=\"stat-row\">\n        ${renderSummaryItem(\"ID\", model.sessionId.slice(0, 8))}\n        ${renderSummaryItem(\"File\", model.fileName)}\n        ${renderSummaryItem(\"Created\", formatDate(model.createdAt))}\n        ${renderSummaryItem(\"Updated\", formatDate(model.updatedAt))}\n        ${renderSummaryItem(\"Entries\", String(model.entryCount))}\n        ${renderSummaryItem(\"Expires\", formatDate(new Date(expiresAt).toISOString()))}\n      </div>\n    </header>\n\n    ${relatedSections}\n\n    <main class=\"timeline-shell\">\n      <div class=\"timeline-list\">\n        ${items}\n      </div>\n    </main>`,\n  );\n}\n\nfunction renderSummaryItem(label: string, value: string): string {\n  return `<span class=\"stat-chip\"><span class=\"stat-label\">${esc(label)}</span><strong class=\"stat-value\">${esc(value)}</strong></span>`;\n}\n\nfunction renderRelationCard(relation: SessionViewRelation, token: string): string {\n  const href = `/session?token=${encodeURIComponent(token)}&session=${encodeURIComponent(relation.fileName)}`;\n  const summary = relation.summary ? `<p class=\"related-summary\">${esc(relation.summary)}</p>` : \"\";\n  return `<a class=\"related-link\" href=\"${href}\">\n    <span class=\"related-copy\">\n      <strong class=\"related-title\">${esc(relation.title)}</strong>\n      ${summary}\n      <span class=\"related-meta\">${esc(formatDate(relation.updatedAt))} · ${esc(String(relation.entryCount))} entries · ${esc(relation.fileName)}</span>\n    </span>\n    <span class=\"related-arrow\" aria-hidden=\"true\">→</span>\n  </a>`;\n}\n\nfunction renderForkLinks(relations: SessionViewRelation[] | undefined, token: string): string {\n  if (!relations || relations.length === 0) return \"\";\n  return `<div class=\"fork-links\">${relations\n    .map((relation) => {\n      const href = `/session?token=${encodeURIComponent(token)}&session=${encodeURIComponent(relation.fileName)}`;\n      return `<a class=\"fork-link\" href=\"${href}\" title=\"Open ${esc(relation.title)}\">\n        <span class=\"fork-dot\" aria-hidden=\"true\"></span>\n        <span class=\"fork-text\">Thread</span>\n      </a>`;\n    })\n    .join(\"\")}</div>`;\n}\n\nexport function parseUserBody(raw: string): {\n  timestamp: string | null;\n  username: string | null;\n  threadTs: string | null;\n  header: string | null;\n  content: string;\n} {\n  // [timestamp] [username] [in-thread:ts]: content\n  let m = raw.match(\n    /^\\[([0-9]{4}-[0-9]{2}-[0-9]{2} [0-9]{2}:[0-9]{2}:[0-9]{2}[+-][0-9]{2}:[0-9]{2})\\]\\s*\\[([^\\]]+)\\](?:\\s*\\[in-thread:([^\\]]+)\\])?:\\s*([\\s\\S]*)$/,\n  );\n  if (m) {\n    const header = [`[${m[1]}]`, `[${m[2]}]`, m[3] ? `[in-thread:${m[3]}]` : \"\"]\n      .filter(Boolean)\n      .join(\" \");\n    return {\n      timestamp: m[1],\n      username: m[2],\n      threadTs: m[3] ?? null,\n      header,\n      content: m[4],\n    };\n  }\n  // [username] [in-thread:ts]: content\n  m = raw.match(/^\\[([^\\]]+)\\](?:\\s*\\[in-thread:([^\\]]+)\\])?:\\s*([\\s\\S]*)$/);\n  if (m) {\n    const header = [`[${m[1]}]`, m[2] ? `[in-thread:${m[2]}]` : \"\"].filter(Boolean).join(\" \");\n    return {\n      timestamp: null,\n      username: m[1],\n      threadTs: m[2] ?? null,\n      header,\n      content: m[3],\n    };\n  }\n  return { timestamp: null, username: null, threadTs: null, header: null, content: raw };\n}\n\ntype ParsedUserBody = ReturnType<typeof parseUserBody>;\n\nfunction renderItem(item: SessionViewItem, token?: string): string {\n  if (item.kind === \"system\") {\n    const parts = [item.title, item.body].filter((x): x is string => Boolean(x)).map(esc);\n    const time = item.meta\n      ? ` · <time class=\"event-time\">${esc(formatDate(item.meta))}</time>`\n      : \"\";\n    return `<div class=\"system-event\"><span class=\"event-dot\"></span><span class=\"event-text\">${parts.join(\" — \")}</span>${time}</div>`;\n  }\n\n  if (item.kind === \"tool\") {\n    const toneClass = item.tone === \"err\" ? \" tone-err\" : item.tone === \"ok\" ? \" tone-ok\" : \"\";\n    const body = item.body ? `<pre class=\"tool-output${toneClass}\">${esc(item.body)}</pre>` : \"\";\n    const time = item.meta ? `<time class=\"tool-time\">${esc(formatDate(item.meta))}</time>` : \"\";\n    return `<div class=\"tool-block\">\n  <div class=\"tool-header\">\n    <span class=\"tool-icon\"><svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\"><path d=\"M1.5 2L5 5.5 1.5 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 9h2.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg></span>\n    <span class=\"tool-name\">${esc(item.title)}</span>\n    ${time}\n  </div>\n  ${body}\n</div>`;\n  }\n\n  const time = item.meta ? `<time class=\"msg-time\">${esc(formatDate(item.meta))}</time>` : \"\";\n\n  if (item.kind === \"user\") {\n    const parsed: ParsedUserBody = item.body\n      ? parseUserBody(item.body)\n      : { timestamp: null, username: null, threadTs: null, header: null, content: \"\" };\n    const { username, threadTs, header, content } = parsed;\n    const initial = username ? esc(username.slice(0, 2).toUpperCase()) : \"U\";\n    const rawHeader = header ? `<div class=\"msg-raw-header\">${esc(header)}</div>` : \"\";\n    const body = content ? `<pre class=\"msg-body\">${esc(content)}</pre>` : \"\";\n    const threadBadge = threadTs\n      ? `<div class=\"thread-badge\" title=\"Thread ${esc(threadTs)}\">Thread · <code>${esc(threadTs)}</code></div>`\n      : \"\";\n    const forks = renderForkLinks(item.forks, token ?? \"\");\n    return `<div class=\"msg-row msg-user\">\n  <div class=\"user-bubble\">\n    ${rawHeader}\n    ${threadBadge}\n    ${body}\n    ${forks}\n    ${time}\n  </div>\n  <div class=\"msg-avatar user-avatar\" title=\"${username ? esc(username) : \"User\"}\">${initial}</div>\n</div>`;\n  }\n\n  // assistant\n  const body = item.body ? `<pre class=\"msg-body\">${esc(item.body)}</pre>` : \"\";\n  const forks = renderForkLinks(item.forks, token ?? \"\");\n  return `<div class=\"msg-row msg-assistant\">\n  <div class=\"msg-avatar asst-avatar\" aria-hidden=\"true\">A</div>\n  <div class=\"asst-card\">\n    ${body}\n    ${forks}\n    ${time}\n  </div>\n</div>`;\n}\n\nfunction renderStatusPage(title: string, message: string): string {\n  return renderHtmlDocument(\n    title,\n    `<section class=\"card stack\">\n      <p class=\"eyebrow\">mama</p>\n      <h1>${esc(title)}</h1>\n      <div class=\"status err\">${esc(message)}</div>\n    </section>`,\n  );\n}\n\nfunction renderHtmlDocument(title: string, shellContent: string): string {\n  return `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  <title>${esc(title)}</title>\n  <style>${styles}</style>\n</head>\n<body>\n  <main class=\"shell\">\n    ${shellContent}\n  </main>\n</body>\n</html>`;\n}\n\nfunction formatDate(value: string): string {\n  const date = new Date(value);\n  if (Number.isNaN(date.getTime())) return value;\n  return date.toLocaleString();\n}\n\nfunction esc(value: string): string {\n  return value\n    .replaceAll(\"&\", \"&amp;\")\n    .replaceAll(\"<\", \"&lt;\")\n    .replaceAll(\">\", \"&gt;\")\n    .replaceAll('\"', \"&quot;\")\n    .replaceAll(\"'\", \"&#39;\");\n}\n\nconst styles = `\n  @import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;600&family=DM+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');\n\n  :root {\n    --bg: #f0ece3;\n    --surface: #ffffff;\n    --border: rgba(0, 0, 0, 0.08);\n    --text: #18181b;\n    --muted: #71717a;\n    --subtle: #a1a1aa;\n\n    --user-bg: #18181b;\n    --user-text: #fafafa;\n    --user-time: rgba(250, 250, 250, 0.5);\n\n    --asst-border: #22c55e;\n    --asst-avatar-bg: #f0fdf4;\n    --asst-avatar-text: #16a34a;\n\n    --tool-bg: #0d1117;\n    --tool-header: #161b22;\n    --tool-text: #c9d1d9;\n    --tool-accent: #58a6ff;\n    --tool-ok: #3fb950;\n    --tool-err: #f85149;\n    --tool-time: #484f58;\n\n    --ok-bg: #f0fdf4;\n    --ok-text: #15803d;\n    --err-bg: #fef2f2;\n    --err-text: #b91c1c;\n  }\n\n  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n  body {\n    min-height: 100vh;\n    padding: 40px 20px 80px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    background-color: var(--bg);\n    background-image:\n      radial-gradient(ellipse 80% 40% at 50% -10%, rgba(255,255,255,0.6) 0%, transparent 70%);\n    color: var(--text);\n    font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif;\n    font-size: 15px;\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  .shell {\n    width: 100%;\n    max-width: 780px;\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n\n  /* ── Hero ─────────────────────────────────────────────────────────────── */\n\n  .hero-card {\n    padding: 28px 32px 24px;\n    border: 1px solid var(--border);\n    border-radius: 20px;\n    background: var(--surface);\n    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);\n  }\n\n  .hero-top {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: 16px;\n    margin-bottom: 20px;\n  }\n\n  .hero-wordmark {\n    display: block;\n    margin-bottom: 6px;\n    color: var(--subtle);\n    font-size: 0.72rem;\n    font-weight: 600;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n  }\n\n  .hero-title {\n    font-family: 'Lora', Georgia, serif;\n    font-size: clamp(1.4rem, 2.5vw, 1.75rem);\n    font-weight: 600;\n    line-height: 1.2;\n    letter-spacing: -0.01em;\n    color: var(--text);\n    text-wrap: balance;\n  }\n\n  .refresh-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    flex-shrink: 0;\n    padding: 7px 14px;\n    border: 1px solid var(--border);\n    border-radius: 999px;\n    background: transparent;\n    color: var(--muted);\n    font: 500 0.8rem/1 'DM Sans', sans-serif;\n    cursor: pointer;\n    transition: color 120ms, border-color 120ms, background 120ms;\n    white-space: nowrap;\n  }\n\n  .refresh-btn:hover {\n    color: var(--text);\n    border-color: rgba(0,0,0,0.2);\n    background: rgba(0,0,0,0.03);\n  }\n\n  .refresh-btn:focus-visible {\n    outline: 2px solid var(--text);\n    outline-offset: 2px;\n  }\n\n  .stat-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n  }\n\n  .stat-chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 4px 10px;\n    border: 1px solid var(--border);\n    border-radius: 999px;\n    background: #f4f4f5;\n    font-size: 0.775rem;\n    line-height: 1;\n  }\n\n  .stat-label {\n    color: var(--muted);\n    font-weight: 500;\n  }\n\n  .stat-value {\n    color: var(--text);\n    font-weight: 600;\n  }\n\n  /* ── Timeline shell ───────────────────────────────────────────────────── */\n\n  .fork-links {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    margin-top: 10px;\n  }\n\n  .fork-link {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 5px 10px;\n    border-radius: 999px;\n    border: 1px solid rgba(239, 68, 68, 0.18);\n    background: rgba(254, 242, 242, 0.95);\n    color: #b91c1c;\n    text-decoration: none;\n    font-size: 0.74rem;\n    font-weight: 600;\n    line-height: 1;\n    transition: transform 120ms, background 120ms, border-color 120ms;\n  }\n\n  .fork-link:hover {\n    transform: translateY(-1px);\n    background: #fff1f2;\n    border-color: rgba(239, 68, 68, 0.28);\n  }\n\n  .fork-dot {\n    width: 7px;\n    height: 7px;\n    border-radius: 50%;\n    background: #ef4444;\n    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);\n    flex-shrink: 0;\n  }\n\n  .fork-text {\n    white-space: nowrap;\n  }\n\n  .related-card {\n    padding: 18px 20px;\n    border: 1px solid var(--border);\n    border-radius: 18px;\n    background: rgba(255,255,255,0.78);\n    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);\n    backdrop-filter: blur(12px);\n  }\n\n  .related-list {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n  }\n\n  .related-link {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n    padding: 12px 14px;\n    border-radius: 14px;\n    border: 1px solid var(--border);\n    background: rgba(255,255,255,0.82);\n    color: inherit;\n    text-decoration: none;\n    transition: transform 120ms, border-color 120ms, box-shadow 120ms, background 120ms;\n  }\n\n  .related-link:hover {\n    transform: translateY(-1px);\n    border-color: rgba(0,0,0,0.16);\n    background: #fff;\n    box-shadow: 0 8px 18px rgba(0,0,0,0.05);\n  }\n\n  .related-copy {\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n  }\n\n  .related-title {\n    color: var(--text);\n    font-size: 0.94rem;\n    line-height: 1.3;\n  }\n\n  .related-summary {\n    color: var(--muted);\n    font-size: 0.82rem;\n    line-height: 1.45;\n  }\n\n  .related-meta {\n    color: var(--subtle);\n    font-size: 0.74rem;\n    line-height: 1.4;\n  }\n\n  .related-arrow {\n    flex-shrink: 0;\n    color: var(--subtle);\n    font-size: 1rem;\n  }\n\n  .timeline-shell {\n    padding: 20px 0;\n  }\n\n  .timeline-list {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n  }\n\n  /* ── Message rows ─────────────────────────────────────────────────────── */\n\n  .msg-row {\n    display: flex;\n    align-items: flex-end;\n    gap: 8px;\n    padding: 2px 0;\n  }\n\n  /* ── User messages ────────────────────────────────────────────────────── */\n\n  .msg-user {\n    justify-content: flex-end;\n  }\n\n  .user-bubble {\n    max-width: 85%;\n    padding: 12px 16px;\n    border-radius: 18px 18px 4px 18px;\n    background: var(--user-bg);\n    color: var(--user-text);\n    box-shadow: 0 1px 2px rgba(0,0,0,0.12);\n  }\n\n  .msg-raw-header {\n    margin-bottom: 8px;\n    color: rgba(250, 250, 250, 0.72);\n    font-family: 'JetBrains Mono', ui-monospace, monospace;\n    font-size: 0.72rem;\n    line-height: 1.5;\n    white-space: pre-wrap;\n    word-break: break-word;\n  }\n\n  .thread-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    margin-bottom: 8px;\n    padding: 4px 10px;\n    border-radius: 999px;\n    background: rgba(255,255,255,0.22);\n    color: var(--user-text);\n    font-size: 0.68rem;\n    font-weight: 700;\n    letter-spacing: 0.01em;\n  }\n\n  .thread-badge code {\n    font-family: 'JetBrains Mono', ui-monospace, monospace;\n    font-size: 0.66rem;\n    background: rgba(255,255,255,0.16);\n    padding: 1px 6px;\n    border-radius: 999px;\n    color: inherit;\n  }\n\n  .msg-user .msg-body {\n    font-family: 'DM Sans', system-ui, sans-serif;\n    font-size: 0.9rem;\n    line-height: 1.6;\n    white-space: pre-wrap;\n    word-break: break-word;\n    color: var(--user-text);\n  }\n\n  .msg-user .msg-time {\n    display: block;\n    margin-top: 6px;\n    font-size: 0.72rem;\n    color: var(--user-time);\n    text-align: right;\n  }\n\n  /* ── Avatars ──────────────────────────────────────────────────────────── */\n\n  .msg-avatar {\n    flex: 0 0 28px;\n    width: 28px;\n    height: 28px;\n    border-radius: 50%;\n    font-size: 0.68rem;\n    font-weight: 700;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    letter-spacing: 0;\n    flex-shrink: 0;\n  }\n\n  .user-avatar {\n    background: #eff6ff;\n    border: 1.5px solid #93c5fd;\n    color: #1d4ed8;\n  }\n\n  .asst-avatar {\n    background: var(--asst-avatar-bg);\n    border: 1.5px solid var(--asst-border);\n    color: var(--asst-avatar-text);\n    margin-bottom: 2px;\n  }\n\n  /* ── Assistant messages ───────────────────────────────────────────────── */\n\n  .msg-assistant {\n    align-items: flex-end;\n    gap: 8px;\n    max-width: 85%;\n  }\n\n  .asst-card {\n    min-width: 0;\n    padding: 14px 18px;\n    border: 1px solid var(--border);\n    border-radius: 18px 18px 18px 4px;\n    background: var(--surface);\n    box-shadow: 0 1px 3px rgba(0,0,0,0.04);\n  }\n\n  .msg-assistant .msg-body {\n    font-family: 'DM Sans', system-ui, sans-serif;\n    font-size: 0.9rem;\n    line-height: 1.65;\n    white-space: pre-wrap;\n    word-break: break-word;\n    color: var(--text);\n  }\n\n  .msg-assistant .msg-time {\n    display: block;\n    margin-top: 8px;\n    font-size: 0.72rem;\n    color: var(--subtle);\n  }\n\n  /* ── Tool blocks ──────────────────────────────────────────────────────── */\n\n  .tool-block {\n    max-width: 92%;\n    margin-left: 36px;\n    border-radius: 10px;\n    overflow: hidden;\n    border: 1px solid rgba(255,255,255,0.06);\n    box-shadow: 0 2px 8px rgba(0,0,0,0.16);\n    margin: 6px 0;\n  }\n\n  .tool-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 14px;\n    background: var(--tool-header);\n    border-bottom: 1px solid rgba(255,255,255,0.06);\n    overflow: hidden;\n  }\n\n  .tool-icon {\n    color: var(--tool-accent);\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n  }\n\n  .tool-name {\n    flex: 1;\n    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;\n    font-size: 0.75rem;\n    font-weight: 500;\n    color: var(--tool-accent);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .tool-time {\n    flex-shrink: 0;\n    font-family: 'JetBrains Mono', ui-monospace, monospace;\n    font-size: 0.7rem;\n    color: var(--tool-time);\n  }\n\n  .tool-output {\n    display: block;\n    padding: 12px 14px;\n    background: var(--tool-bg);\n    color: var(--tool-text);\n    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;\n    font-size: 0.78rem;\n    line-height: 1.6;\n    white-space: pre-wrap;\n    word-break: break-word;\n    overflow-x: auto;\n    max-height: 400px;\n    overflow-y: auto;\n  }\n\n  .tool-output.tone-ok { color: var(--tool-ok); }\n  .tool-output.tone-err { color: var(--tool-err); }\n\n  /* ── System events ────────────────────────────────────────────────────── */\n\n  .system-event {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    padding: 10px 0;\n    color: var(--subtle);\n    font-size: 0.775rem;\n  }\n\n  .event-dot {\n    width: 4px;\n    height: 4px;\n    border-radius: 50%;\n    background: var(--subtle);\n    flex-shrink: 0;\n    opacity: 0.6;\n  }\n\n  .event-text {\n    color: var(--muted);\n  }\n\n  .event-time {\n    color: var(--subtle);\n    font-style: normal;\n  }\n\n  /* ── Status page ──────────────────────────────────────────────────────── */\n\n  .card {\n    padding: 28px 32px;\n    border: 1px solid var(--border);\n    border-radius: 20px;\n    background: var(--surface);\n    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);\n  }\n\n  .stack > * + * { margin-top: 14px; }\n\n  .eyebrow {\n    color: var(--subtle);\n    font-size: 0.72rem;\n    font-weight: 600;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n  }\n\n  h1 {\n    font-family: 'Lora', Georgia, serif;\n    font-size: clamp(1.4rem, 2.5vw, 1.75rem);\n    font-weight: 600;\n    letter-spacing: -0.01em;\n    line-height: 1.2;\n  }\n\n  p { color: var(--muted); font-size: 0.9rem; line-height: 1.5; }\n\n  .status {\n    padding: 12px 16px;\n    border-radius: 10px;\n    font-size: 0.9rem;\n  }\n\n  .status.err {\n    background: var(--err-bg);\n    color: var(--err-text);\n    border: 1px solid rgba(185, 28, 28, 0.12);\n  }\n\n  /* ── Responsive ───────────────────────────────────────────────────────── */\n\n  @media (max-width: 600px) {\n    body { padding: 20px 12px 60px; }\n\n    .hero-card, .card { padding: 20px; border-radius: 16px; }\n\n    .hero-top { flex-direction: column; gap: 12px; }\n\n    .refresh-btn { align-self: flex-start; }\n\n    .user-bubble { max-width: 88%; }\n\n    .asst-avatar { display: none; }\n\n    .asst-card { border-radius: 4px 14px 14px 14px; }\n  }\n`;\n"]}
+{"version":3,"file":"portal.d.ts","sourceRoot":"","sources":["../../src/session-view/portal.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,MAAM,CAAC;AAG5D,OAAO,KAAK,EAAE,GAAG,EAAyB,UAAU,EAAuB,MAAM,eAAe,CAAC;AASjG,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,YAAY,CAAC;AA4DhE,MAAM,WAAW,6BAA6B;IAC5C,OAAO,EAAE,UAAU,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;CAC9C;AAED,wBAAsB,wBAAwB,CAC5C,GAAG,EAAE,eAAe,EACpB,GAAG,EAAE,cAAc,EACnB,GAAG,EAAE,GAAG,EACR,qBAAqB,CAAC,EAAE,6BAA6B,EACrD,WAAW,CAAC,EAAE,6BAA6B,GAC1C,OAAO,CAAC,OAAO,CAAC,CAkFlB;AA0ID,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG;IAC1C,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;CACjB,CA8BA","sourcesContent":["import type { IncomingMessage, ServerResponse } from \"http\";\nimport { basename } from \"path\";\nimport MarkdownIt from \"markdown-it\";\nimport type { Bot, BotAdapters, BotEvent, BotHandler, ChatResponseContext } from \"../adapter.js\";\nimport * as log from \"../log.js\";\nimport { inferConversationKind } from \"../session-policy.js\";\nimport {\n  loadSessionViewModel,\n  resolveRequestedSessionFile,\n  type SessionViewItem,\n  type SessionViewRelation,\n} from \"./service.js\";\nimport type { InMemorySessionViewTokenStore } from \"./store.js\";\n\nconst markdown = new MarkdownIt({\n  html: false,\n  linkify: true,\n  breaks: true,\n});\n\nconst defaultLinkOpen = markdown.renderer.rules.link_open;\ntype LinkOpenRule = NonNullable<typeof defaultLinkOpen>;\nmarkdown.renderer.rules.link_open = (...args: Parameters<LinkOpenRule>) => {\n  const [tokens, idx, options, env, self] = args;\n  const token = tokens[idx];\n  token.attrSet(\"target\", \"_blank\");\n  token.attrSet(\"rel\", \"noreferrer noopener\");\n  return defaultLinkOpen\n    ? defaultLinkOpen(tokens, idx, options, env, self)\n    : self.renderToken(tokens, idx, options);\n};\n\ntype SessionStreamEvent =\n  | { type: \"status\"; running: boolean }\n  | { type: \"user\"; html: string }\n  | { type: \"assistant\"; html: string }\n  | { type: \"assistant_remove\" }\n  | { type: \"tool\"; html: string }\n  | { type: \"system\"; html: string }\n  | {\n      type: \"refresh\";\n      timelineHtml: string;\n      updatedAt: string;\n      entryCount: number;\n      running: boolean;\n    }\n  | { type: \"error\"; message: string };\n\nclass SessionViewStreamHub {\n  private listeners = new Map<string, Set<(event: SessionStreamEvent) => void>>();\n\n  subscribe(key: string, listener: (event: SessionStreamEvent) => void): () => void {\n    const set = this.listeners.get(key) ?? new Set<(event: SessionStreamEvent) => void>();\n    set.add(listener);\n    this.listeners.set(key, set);\n    return () => {\n      const current = this.listeners.get(key);\n      if (!current) return;\n      current.delete(listener);\n      if (current.size === 0) this.listeners.delete(key);\n    };\n  }\n\n  publish(key: string, event: SessionStreamEvent): void {\n    const set = this.listeners.get(key);\n    if (!set) return;\n    for (const listener of set) listener(event);\n  }\n}\n\nconst sessionViewStreamHub = new SessionViewStreamHub();\n\nexport interface SessionViewInteractiveOptions {\n  handler: BotHandler;\n  botsByPlatform: Partial<Record<string, Bot>>;\n}\n\nexport async function handleSessionViewRequest(\n  req: IncomingMessage,\n  res: ServerResponse,\n  url: URL,\n  sessionViewTokenStore?: InMemorySessionViewTokenStore,\n  interactive?: SessionViewInteractiveOptions,\n): Promise<boolean> {\n  if (req.method === \"POST\" && url.pathname === \"/session/message\") {\n    await handleSessionMessageRequest(req, res, sessionViewTokenStore, interactive);\n    return true;\n  }\n\n  if (req.method === \"GET\" && url.pathname === \"/session/stream\") {\n    await handleSessionStreamRequest(req, res, url, sessionViewTokenStore, interactive);\n    return true;\n  }\n\n  if (req.method !== \"GET\" || url.pathname !== \"/session\") {\n    return false;\n  }\n\n  const token = url.searchParams.get(\"token\")?.trim();\n  if (!token || !sessionViewTokenStore) {\n    res.writeHead(400, { \"Content-Type\": \"text/html; charset=utf-8\" });\n    res.end(\n      renderStatusPage(\"Session unavailable\", \"This session link is invalid or has expired.\"),\n    );\n    return true;\n  }\n\n  const entry = sessionViewTokenStore.peek(token);\n  if (!entry) {\n    res.writeHead(400, { \"Content-Type\": \"text/html; charset=utf-8\" });\n    res.end(\n      renderStatusPage(\"Session unavailable\", \"This session link is invalid or has expired.\"),\n    );\n    return true;\n  }\n\n  const requestedSession = url.searchParams.get(\"session\");\n  let targetSessionFile: string | null;\n  try {\n    targetSessionFile = resolveRequestedSessionFile(entry.sessionFile, requestedSession);\n  } catch (error) {\n    log.logWarning(\n      `[${entry.conversationId}] Corrupted session file referenced for ${entry.sessionFile}`,\n      error instanceof Error ? error.message : String(error),\n    );\n    res.writeHead(500, { \"Content-Type\": \"text/html; charset=utf-8\" });\n    res.end(\n      renderStatusPage(\"Session unavailable\", \"The selected session file appears to be corrupted.\"),\n    );\n    return true;\n  }\n  if (!targetSessionFile) {\n    res.writeHead(400, { \"Content-Type\": \"text/html; charset=utf-8\" });\n    res.end(renderStatusPage(\"Session unavailable\", \"The selected session link is invalid.\"));\n    return true;\n  }\n\n  try {\n    const model = loadSessionViewModel(targetSessionFile);\n    const displayedSessionKey = resolveDisplayedSessionKey(entry, targetSessionFile);\n    const isRunning = interactive?.handler.isRunning(displayedSessionKey) ?? false;\n    res.writeHead(200, {\n      \"Content-Type\": \"text/html; charset=utf-8\",\n      \"Cache-Control\": \"no-store\",\n    });\n    res.end(\n      renderSessionPage(\n        model,\n        entry.token,\n        entry.expiresAt,\n        isRunning,\n        displayedSessionKey,\n        entry.conversationId,\n      ),\n    );\n  } catch (error) {\n    log.logWarning(\n      `[${entry.conversationId}] Failed to render session ${entry.sessionFile}`,\n      error instanceof Error ? error.message : String(error),\n    );\n    res.writeHead(500, { \"Content-Type\": \"text/html; charset=utf-8\" });\n    res.end(renderStatusPage(\"Session unavailable\", \"The session could not be loaded right now.\"));\n  }\n\n  return true;\n}\n\nfunction resolveDisplayedSessionKey(\n  entry: { platform: string; conversationId: string; sessionKey: string },\n  sessionFile: string,\n): string {\n  if (entry.platform === \"slack\") {\n    const fileName = basename(sessionFile, \".jsonl\");\n    if (/^\\d+\\.\\d+$/.test(fileName)) {\n      return `${entry.conversationId}:${fileName}`;\n    }\n    return entry.conversationId;\n  }\n  return entry.sessionKey;\n}\n\nfunction sessionStreamKey(entry: {\n  platform: string;\n  conversationId: string;\n  sessionKey: string;\n}): string {\n  return `${entry.platform}:${entry.conversationId}:${entry.sessionKey}`;\n}\n\nfunction renderTimelineItems(items: SessionViewItem[], token: string): string {\n  return items.length > 0\n    ? items.map((item) => renderItem(item, token)).join(\"\\n\")\n    : `<div class=\"system-event\"><span class=\"event-dot\"></span><span class=\"event-text\">No messages yet — send one to the bot, then refresh.</span></div>`;\n}\n\nfunction renderSessionPage(\n  model: {\n    title: string;\n    sessionId: string;\n    fileName: string;\n    createdAt: string;\n    updatedAt: string;\n    entryCount: number;\n    items: SessionViewItem[];\n    parent?: SessionViewRelation;\n    forks: SessionViewRelation[];\n  },\n  token: string,\n  expiresAt: number,\n  isRunning: boolean,\n  displayedSessionKey: string,\n  conversationId: string,\n): string {\n  const items = renderTimelineItems(model.items, token);\n\n  const relatedSections = model.parent\n    ? `<section class=\"related-card stack\">\n        <p class=\"eyebrow\">Forked from</p>\n        ${renderRelationCard(model.parent, token)}\n      </section>`\n    : \"\";\n\n  return renderHtmlDocument(\n    `${model.title} · Session Viewer`,\n    `<header class=\"hero-card\">\n      <div class=\"hero-top\">\n        <div class=\"hero-title-group\">\n          <span class=\"hero-wordmark\">mama</span>\n          <h1 class=\"hero-title\">${esc(model.title)}</h1>\n          <div class=\"hero-meta-line\">\n            <span>Created ${esc(formatDate(model.createdAt))}</span>\n            <span>Updated <strong data-session-updated>${esc(formatDate(model.updatedAt))}</strong></span>\n            <span><strong data-session-entries>${esc(String(model.entryCount))}</strong> entries</span>\n          </div>\n        </div>\n        <div class=\"hero-side\">\n          <span class=\"hero-badge hero-badge-status${isRunning ? \" is-running\" : \"\"}\"><span class=\"hero-badge-dot\"></span><strong data-session-status>${esc(isRunning ? \"Running\" : \"Idle\")}</strong></span>\n          <span class=\"hero-badge\">${esc(displayedSessionKey === conversationId ? \"Channel\" : \"Thread\")}</span>\n        </div>\n      </div>\n      <div class=\"hero-detail-row\">\n        <span class=\"hero-detail\"><span class=\"hero-detail-label\">Session</span><code>${esc(model.sessionId.slice(0, 8))}</code></span>\n        <span class=\"hero-detail\"><span class=\"hero-detail-label\">File</span><code>${esc(model.fileName)}</code></span>\n        <span class=\"hero-detail\"><span class=\"hero-detail-label\">Expires</span><span>${esc(formatDate(new Date(expiresAt).toISOString()))}</span></span>\n      </div>\n    </header>\n\n    ${relatedSections}\n\n    <main class=\"timeline-shell\">\n      <div class=\"timeline-list\" data-timeline-list>\n        ${items}\n      </div>\n    </main>\n\n    <button class=\"jump-latest-btn\" type=\"button\" hidden data-jump-latest aria-label=\"Jump to latest\" title=\"Jump to latest\">↓</button>\n\n    <section class=\"composer-card\">\n      <div class=\"composer-copy\">\n        <p class=\"eyebrow\">Interactive preview</p>\n        <p>Ask mama in this same session. Replies stay in Session View and do not post back to Slack.</p>\n      </div>\n      <form class=\"composer-form\" data-session-composer>\n        <input type=\"hidden\" name=\"token\" value=\"${esc(token)}\">\n        <input type=\"hidden\" name=\"session\" value=\"${esc(model.fileName)}\">\n        <input type=\"hidden\" name=\"sessionKey\" value=\"${esc(displayedSessionKey)}\">\n        <textarea name=\"text\" rows=\"3\" placeholder=\"Ask a follow-up…\" required></textarea>\n        <div class=\"composer-actions\">\n          <span class=\"composer-status\" data-composer-status></span>\n          <button class=\"composer-send-btn\" type=\"submit\" aria-label=\"Send\" title=\"Send\">↑</button>\n        </div>\n      </form>\n    </section>`,\n    isRunning,\n  );\n}\n\nfunction renderRelationCard(relation: SessionViewRelation, token: string): string {\n  const href = `/session?token=${encodeURIComponent(token)}&session=${encodeURIComponent(relation.fileName)}`;\n  const summary = relation.summary ? `<p class=\"related-summary\">${esc(relation.summary)}</p>` : \"\";\n  return `<a class=\"related-link\" href=\"${href}\">\n    <span class=\"related-copy\">\n      <strong class=\"related-title\">${esc(relation.title)}</strong>\n      ${summary}\n      <span class=\"related-meta\">${esc(formatDate(relation.updatedAt))} · ${esc(String(relation.entryCount))} entries · ${esc(relation.fileName)}</span>\n    </span>\n    <span class=\"related-arrow\" aria-hidden=\"true\">→</span>\n  </a>`;\n}\n\nfunction renderForkLinks(relations: SessionViewRelation[] | undefined, token: string): string {\n  if (!relations || relations.length === 0) return \"\";\n  return `<div class=\"fork-links\">${relations\n    .map((relation) => {\n      const href = `/session?token=${encodeURIComponent(token)}&session=${encodeURIComponent(relation.fileName)}`;\n      return `<a class=\"fork-link\" href=\"${href}\" title=\"Open ${esc(relation.title)}\">\n        <span class=\"fork-dot\" aria-hidden=\"true\"></span>\n        <span class=\"fork-text\">Thread</span>\n      </a>`;\n    })\n    .join(\"\")}</div>`;\n}\n\nexport function parseUserBody(raw: string): {\n  timestamp: string | null;\n  username: string | null;\n  threadTs: string | null;\n  header: string | null;\n  content: string;\n} {\n  // [timestamp] [username] [in-thread:ts]: content\n  let m = raw.match(\n    /^\\[([0-9]{4}-[0-9]{2}-[0-9]{2} [0-9]{2}:[0-9]{2}:[0-9]{2}[+-][0-9]{2}:[0-9]{2})\\]\\s*\\[([^\\]]+)\\](?:\\s*\\[in-thread:([^\\]]+)\\])?:\\s*([\\s\\S]*)$/,\n  );\n  if (m) {\n    const header = [`[${m[1]}]`, `[${m[2]}]`, m[3] ? `[in-thread:${m[3]}]` : \"\"]\n      .filter(Boolean)\n      .join(\" \");\n    return {\n      timestamp: m[1],\n      username: m[2],\n      threadTs: m[3] ?? null,\n      header,\n      content: m[4],\n    };\n  }\n  // [username] [in-thread:ts]: content\n  m = raw.match(/^\\[([^\\]]+)\\](?:\\s*\\[in-thread:([^\\]]+)\\])?:\\s*([\\s\\S]*)$/);\n  if (m) {\n    const header = [`[${m[1]}]`, m[2] ? `[in-thread:${m[2]}]` : \"\"].filter(Boolean).join(\" \");\n    return {\n      timestamp: null,\n      username: m[1],\n      threadTs: m[2] ?? null,\n      header,\n      content: m[3],\n    };\n  }\n  return { timestamp: null, username: null, threadTs: null, header: null, content: raw };\n}\n\ntype ParsedUserBody = ReturnType<typeof parseUserBody>;\n\nfunction renderItem(item: SessionViewItem, token?: string): string {\n  if (item.kind === \"system\") {\n    const parts = [item.title, item.body].filter((x): x is string => Boolean(x)).map(esc);\n    const time = item.meta\n      ? ` · <time class=\"event-time\">${esc(formatDate(item.meta))}</time>`\n      : \"\";\n    return `<div class=\"system-event\"><span class=\"event-dot\"></span><span class=\"event-text\">${parts.join(\" — \")}</span>${time}</div>`;\n  }\n\n  if (item.kind === \"tool\") {\n    const toneClass = item.tone === \"err\" ? \" tone-err\" : item.tone === \"ok\" ? \" tone-ok\" : \"\";\n    const body = item.body ? `<pre class=\"tool-output${toneClass}\">${esc(item.body)}</pre>` : \"\";\n    const time = item.meta ? `<time class=\"tool-time\">${esc(formatDate(item.meta))}</time>` : \"\";\n    return `<div class=\"tool-block\">\n  <div class=\"tool-header\">\n    <span class=\"tool-icon\"><svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\"><path d=\"M1.5 2L5 5.5 1.5 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 9h2.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg></span>\n    <span class=\"tool-name\">${esc(item.title)}</span>\n    ${time}\n  </div>\n  ${body}\n</div>`;\n  }\n\n  const time = item.meta ? `<time class=\"msg-time\">${esc(formatDate(item.meta))}</time>` : \"\";\n\n  if (item.kind === \"user\") {\n    const parsed: ParsedUserBody = item.body\n      ? parseUserBody(item.body)\n      : { timestamp: null, username: null, threadTs: null, header: null, content: \"\" };\n    const { username, threadTs, header, content } = parsed;\n    const initial = username ? esc(username.slice(0, 2).toUpperCase()) : \"U\";\n    const rawHeader = header ? `<div class=\"msg-raw-header\">${esc(header)}</div>` : \"\";\n    const body = content ? renderMarkdownBlock(content, \"user\") : \"\";\n    const threadBadge = threadTs\n      ? `<div class=\"thread-badge\" title=\"Thread ${esc(threadTs)}\">Thread · <code>${esc(threadTs)}</code></div>`\n      : \"\";\n    const forks = renderForkLinks(item.forks, token ?? \"\");\n    return `<div class=\"msg-row msg-user\">\n  <div class=\"user-bubble\">\n    ${rawHeader}\n    ${threadBadge}\n    ${body}\n    ${forks}\n    ${time}\n  </div>\n  <div class=\"msg-avatar user-avatar\" title=\"${username ? esc(username) : \"User\"}\">${initial}</div>\n</div>`;\n  }\n\n  // assistant\n  const body = item.body ? renderMarkdownBlock(item.body, \"assistant\") : \"\";\n  const forks = renderForkLinks(item.forks, token ?? \"\");\n  return `<div class=\"msg-row msg-assistant\">\n  <div class=\"msg-avatar asst-avatar\" aria-hidden=\"true\">A</div>\n  <div class=\"asst-card\">\n    ${body}\n    ${forks}\n    ${time}\n  </div>\n</div>`;\n}\n\nfunction renderMarkdownBlock(text: string, variant: \"user\" | \"assistant\"): string {\n  return `<div class=\"msg-body markdown-body markdown-${variant}\">${markdown.render(text)}</div>`;\n}\n\nfunction renderLiveUserMessage(text: string, userName: string): string {\n  const initial = esc(userName.slice(0, 2).toUpperCase());\n  return `<div class=\"msg-row msg-user\" data-live-item>\n  <div class=\"user-bubble\">\n    ${renderMarkdownBlock(text, \"user\")}\n  </div>\n  <div class=\"msg-avatar user-avatar\" title=\"${esc(userName)}\">${initial}</div>\n</div>`;\n}\n\nfunction renderLiveAssistantMessage(text: string): string {\n  return `<div class=\"msg-row msg-assistant\" data-live-assistant>\n  <div class=\"msg-avatar asst-avatar\" aria-hidden=\"true\">A</div>\n  <div class=\"asst-card\">\n    ${renderMarkdownBlock(text, \"assistant\")}\n  </div>\n</div>`;\n}\n\nfunction renderLiveToolResult(result: {\n  toolName: string;\n  result: string;\n  isError: boolean;\n}): string {\n  const toneClass = result.isError ? \" tone-err\" : \" tone-ok\";\n  return `<div class=\"tool-block\" data-live-item>\n  <div class=\"tool-header\">\n    <span class=\"tool-icon\"><svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\"><path d=\"M1.5 2L5 5.5 1.5 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 9h2.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg></span>\n    <span class=\"tool-name\">${esc(result.toolName)}</span>\n  </div>\n  <pre class=\"tool-output${toneClass}\">${esc(result.result)}</pre>\n</div>`;\n}\n\nfunction renderLiveSystemEvent(text: string, tone: \"default\" | \"err\" = \"default\"): string {\n  const cls = tone === \"err\" ? \" system-event-err\" : \"\";\n  return `<div class=\"system-event${cls}\" data-live-item><span class=\"event-dot\"></span><span class=\"event-text\">${esc(text)}</span></div>`;\n}\n\nasync function handleSessionStreamRequest(\n  req: IncomingMessage,\n  res: ServerResponse,\n  url: URL,\n  sessionViewTokenStore?: InMemorySessionViewTokenStore,\n  interactive?: SessionViewInteractiveOptions,\n): Promise<void> {\n  const token = url.searchParams.get(\"token\")?.trim() ?? \"\";\n  if (!token || !sessionViewTokenStore || !interactive) {\n    res.writeHead(400, { \"Content-Type\": \"text/plain; charset=utf-8\" });\n    res.end(\"Session stream unavailable\");\n    return;\n  }\n\n  const entry = sessionViewTokenStore.peek(token);\n  if (!entry) {\n    res.writeHead(400, { \"Content-Type\": \"text/plain; charset=utf-8\" });\n    res.end(\"Invalid session token\");\n    return;\n  }\n\n  const requestedSession = url.searchParams.get(\"session\");\n  const targetSessionFile = resolveRequestedSessionFile(entry.sessionFile, requestedSession);\n  if (!targetSessionFile) {\n    res.writeHead(400, { \"Content-Type\": \"text/plain; charset=utf-8\" });\n    res.end(\"Invalid session file\");\n    return;\n  }\n  const activeSessionKey = resolveDisplayedSessionKey(entry, targetSessionFile);\n  const streamKey = sessionStreamKey({ ...entry, sessionKey: activeSessionKey });\n  res.writeHead(200, {\n    \"Content-Type\": \"text/event-stream; charset=utf-8\",\n    \"Cache-Control\": \"no-store\",\n    Connection: \"keep-alive\",\n  });\n  res.write(\n    `data: ${JSON.stringify({ type: \"status\", running: interactive.handler.isRunning(activeSessionKey) })}\\n\\n`,\n  );\n\n  const unsubscribe = sessionViewStreamHub.subscribe(streamKey, (event) => {\n    res.write(`data: ${JSON.stringify(event)}\\n\\n`);\n  });\n  const heartbeat = setInterval(() => {\n    res.write(\": keep-alive\\n\\n\");\n  }, 15000);\n\n  req.on(\"close\", () => {\n    clearInterval(heartbeat);\n    unsubscribe();\n  });\n}\n\nasync function handleSessionMessageRequest(\n  req: IncomingMessage,\n  res: ServerResponse,\n  sessionViewTokenStore?: InMemorySessionViewTokenStore,\n  interactive?: SessionViewInteractiveOptions,\n): Promise<void> {\n  if (!sessionViewTokenStore || !interactive) {\n    json(res, 503, { ok: false, error: \"Session chat is not configured.\" });\n    return;\n  }\n\n  let body: { token?: string; text?: string; session?: string; sessionKey?: string };\n  try {\n    body = JSON.parse(await readRequestBody(req)) as {\n      token?: string;\n      text?: string;\n      session?: string;\n      sessionKey?: string;\n    };\n  } catch {\n    json(res, 400, { ok: false, error: \"Invalid request body.\" });\n    return;\n  }\n\n  const token = body.token?.trim() ?? \"\";\n  const text = body.text?.trim() ?? \"\";\n  const requestedSession = body.session?.trim() || null;\n  const requestedSessionKey = body.sessionKey?.trim() || \"\";\n  if (!token || !text) {\n    json(res, 400, { ok: false, error: \"Missing token or text.\" });\n    return;\n  }\n\n  const entry = sessionViewTokenStore.peek(token);\n  if (!entry) {\n    json(res, 400, { ok: false, error: \"This session link is invalid or has expired.\" });\n    return;\n  }\n\n  const targetSessionFile = resolveRequestedSessionFile(entry.sessionFile, requestedSession);\n  if (!targetSessionFile) {\n    json(res, 400, { ok: false, error: \"Invalid session file.\" });\n    return;\n  }\n  const activeSessionKey = resolveDisplayedSessionKey(entry, targetSessionFile);\n  if (requestedSessionKey && requestedSessionKey !== activeSessionKey) {\n    json(res, 400, { ok: false, error: \"Session target mismatch.\" });\n    return;\n  }\n\n  const bot = interactive.botsByPlatform[entry.platform];\n  if (!bot) {\n    json(res, 503, { ok: false, error: `No bot configured for ${entry.platform}.` });\n    return;\n  }\n\n  const streamKey = sessionStreamKey({ ...entry, sessionKey: activeSessionKey });\n  const conversationKind = inferConversationKind(entry.platform, entry.conversationId);\n  const ts = (Date.now() / 1000).toFixed(6);\n  const platformInfo = bot.getPlatformInfo();\n  const platformUserName =\n    entry.platformUserName ||\n    platformInfo.users.find((user) => user.id === entry.platformUserId)?.userName ||\n    platformInfo.users.find((user) => user.id === entry.platformUserId)?.displayName ||\n    \"unknown\";\n  const responseCtx = createSessionViewResponseContext((event) => {\n    sessionViewStreamHub.publish(streamKey, event);\n  });\n  const event: BotEvent = {\n    type: \"session_view\",\n    conversationId: entry.conversationId,\n    conversationKind,\n    ts,\n    user: entry.platformUserId,\n    text,\n    attachments: [],\n    sessionKey: activeSessionKey,\n    ...(activeSessionKey.includes(\":\")\n      ? { thread_ts: activeSessionKey.split(\":\").slice(1).join(\":\") }\n      : {}),\n  };\n  const adapters: BotAdapters = {\n    message: {\n      id: ts,\n      sessionKey: activeSessionKey,\n      conversationKind,\n      userId: entry.platformUserId,\n      userName: platformUserName,\n      text,\n      attachments: [],\n      threadTs: event.thread_ts,\n    },\n    responseCtx,\n    platform: { ...platformInfo, diagnostics: { showUsageSummary: false } },\n  };\n\n  sessionViewStreamHub.publish(streamKey, { type: \"status\", running: true });\n  sessionViewStreamHub.publish(streamKey, {\n    type: \"user\",\n    html: renderLiveUserMessage(text, platformUserName),\n  });\n\n  void interactive.handler\n    .handleEvent(event, bot, adapters, false)\n    .then(() => {\n      if (!targetSessionFile) {\n        sessionViewStreamHub.publish(streamKey, { type: \"status\", running: false });\n        return;\n      }\n      const model = loadSessionViewModel(targetSessionFile);\n      sessionViewStreamHub.publish(streamKey, {\n        type: \"refresh\",\n        timelineHtml: renderTimelineItems(model.items, token),\n        updatedAt: formatDate(model.updatedAt),\n        entryCount: model.entryCount,\n        running: false,\n      });\n    })\n    .catch((error) => {\n      log.logWarning(\n        `[${entry.conversationId}] Session view message failed`,\n        error instanceof Error ? error.message : String(error),\n      );\n      sessionViewStreamHub.publish(streamKey, {\n        type: \"error\",\n        message: error instanceof Error ? error.message : String(error),\n      });\n      sessionViewStreamHub.publish(streamKey, { type: \"status\", running: false });\n    });\n\n  json(res, 202, { ok: true, accepted: true });\n}\n\nfunction createSessionViewResponseContext(\n  publish: (event: SessionStreamEvent) => void,\n): ChatResponseContext {\n  let accumulatedText = \"\";\n\n  return {\n    respond: async (text: string) => {\n      accumulatedText = accumulatedText ? `${accumulatedText}\\n${text}` : text;\n      publish({ type: \"assistant\", html: renderLiveAssistantMessage(accumulatedText) });\n    },\n    replaceResponse: async (text: string) => {\n      accumulatedText = text;\n      publish({ type: \"assistant\", html: renderLiveAssistantMessage(accumulatedText) });\n    },\n    respondDiagnostic: async (text: string, options?: { style?: \"muted\" | \"error\" }) => {\n      if (options?.style === \"error\") {\n        publish({ type: \"system\", html: renderLiveSystemEvent(text, \"err\") });\n      }\n    },\n    respondToolResult: async (result) => {\n      publish({ type: \"tool\", html: renderLiveToolResult(result) });\n    },\n    setTyping: async () => {\n      publish({ type: \"status\", running: true });\n    },\n    setWorking: async (working: boolean) => {\n      publish({ type: \"status\", running: working });\n    },\n    uploadFile: async () => {},\n    deleteResponse: async () => {\n      accumulatedText = \"\";\n      publish({ type: \"assistant_remove\" });\n    },\n  };\n}\n\nfunction readRequestBody(req: IncomingMessage): Promise<string> {\n  return new Promise((resolve, reject) => {\n    let data = \"\";\n    req.setEncoding(\"utf8\");\n    req.on(\"data\", (chunk) => {\n      data += chunk;\n      if (data.length > 1024 * 1024) {\n        reject(new Error(\"Request body too large\"));\n        req.destroy();\n      }\n    });\n    req.on(\"end\", () => resolve(data));\n    req.on(\"error\", reject);\n  });\n}\n\nfunction json(res: ServerResponse, status: number, body: unknown): void {\n  res.writeHead(status, {\n    \"Content-Type\": \"application/json; charset=utf-8\",\n    \"Cache-Control\": \"no-store\",\n  });\n  res.end(JSON.stringify(body));\n}\n\nfunction renderStatusPage(title: string, message: string): string {\n  return renderHtmlDocument(\n    title,\n    `<section class=\"card stack\">\n      <p class=\"eyebrow\">mama</p>\n      <h1>${esc(title)}</h1>\n      <div class=\"status err\">${esc(message)}</div>\n    </section>`,\n    false,\n  );\n}\n\nfunction renderHtmlDocument(title: string, shellContent: string, isRunning: boolean): string {\n  return `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  <title>${esc(title)}</title>\n  <style>${styles}</style>\n</head>\n<body data-session-running=\"${isRunning ? \"true\" : \"false\"}\">\n  <main class=\"shell\">\n    ${shellContent}\n  </main>\n  <script>\n    const form = document.querySelector('[data-session-composer]');\n    const timelineList = document.querySelector('[data-timeline-list]');\n    const jumpLatestBtn = document.querySelector('[data-jump-latest]');\n    const statusEl = document.querySelector('[data-session-status]');\n    const updatedEl = document.querySelector('[data-session-updated]');\n    const entriesEl = document.querySelector('[data-session-entries]');\n    const composerStatus = form?.querySelector('[data-composer-status]');\n    const textarea = form?.querySelector('textarea[name=\"text\"]');\n    const submitButton = form?.querySelector('button[type=\"submit\"]');\n    let liveAssistant = null;\n    let running = document.body.dataset.sessionRunning === 'true';\n\n    const isNearBottom = () => window.innerHeight + window.scrollY >= document.body.offsetHeight - 120;\n    const scrollToLatest = (behavior = 'smooth') => window.scrollTo({ top: document.body.scrollHeight, behavior });\n    const toggleJumpButton = () => {\n      if (!jumpLatestBtn) return;\n      jumpLatestBtn.hidden = isNearBottom();\n    };\n    const updateFollowState = () => {\n      if (isNearBottom()) scrollToLatest('smooth');\n      else toggleJumpButton();\n    };\n    const canSubmit = () => Boolean(textarea && textarea.value.trim()) && !running;\n    const updateSubmitButtonState = () => {\n      if (submitButton) submitButton.disabled = !canSubmit();\n    };\n    const setRunning = (value) => {\n      running = value;\n      document.body.dataset.sessionRunning = value ? 'true' : 'false';\n      if (statusEl) statusEl.textContent = value ? 'Running' : 'Idle';\n      updateSubmitButtonState();\n      if (composerStatus && !value && composerStatus.textContent === 'Thinking…') {\n        composerStatus.textContent = '';\n      }\n    };\n\n    jumpLatestBtn?.addEventListener('click', () => {\n      scrollToLatest('smooth');\n      toggleJumpButton();\n    });\n    window.addEventListener('scroll', toggleJumpButton, { passive: true });\n\n    if (textarea) {\n      const resize = () => {\n        textarea.style.height = 'auto';\n        textarea.style.height = Math.min(textarea.scrollHeight, 240) + 'px';\n      };\n      textarea.addEventListener('input', () => {\n        resize();\n        updateSubmitButtonState();\n      });\n      textarea.addEventListener('keydown', (event) => {\n        if (event.key === 'Enter' && !event.shiftKey) {\n          event.preventDefault();\n          if (!running) form?.requestSubmit();\n        }\n      });\n      resize();\n    }\n\n    setRunning(running);\n    updateSubmitButtonState();\n\n    const streamUrl = form\n      ? '/session/stream?token=' + encodeURIComponent(form.token.value) + '&session=' + encodeURIComponent(form.session.value)\n      : null;\n    if (streamUrl) {\n      const source = new EventSource(streamUrl);\n      source.onmessage = (event) => {\n        const payload = JSON.parse(event.data);\n        switch (payload.type) {\n          case 'status':\n            setRunning(Boolean(payload.running));\n            if (payload.running && composerStatus) composerStatus.textContent = 'Thinking…';\n            break;\n          case 'user':\n          case 'tool':\n          case 'system': {\n            timelineList?.insertAdjacentHTML('beforeend', payload.html);\n            updateFollowState();\n            break;\n          }\n          case 'assistant': {\n            if (!liveAssistant || !liveAssistant.isConnected) {\n              timelineList?.insertAdjacentHTML('beforeend', payload.html);\n              liveAssistant = timelineList?.querySelector('[data-live-assistant]:last-of-type') || null;\n            } else {\n              liveAssistant.outerHTML = payload.html;\n              liveAssistant = timelineList?.querySelector('[data-live-assistant]:last-of-type') || null;\n            }\n            updateFollowState();\n            break;\n          }\n          case 'assistant_remove':\n            if (liveAssistant?.isConnected) liveAssistant.remove();\n            liveAssistant = null;\n            break;\n          case 'refresh':\n            if (timelineList) timelineList.innerHTML = payload.timelineHtml;\n            liveAssistant = null;\n            if (updatedEl) updatedEl.textContent = payload.updatedAt;\n            if (entriesEl) entriesEl.textContent = String(payload.entryCount);\n            setRunning(Boolean(payload.running));\n            if (composerStatus) composerStatus.textContent = '';\n            updateFollowState();\n            break;\n          case 'error':\n            if (composerStatus) composerStatus.textContent = payload.message || 'Something went wrong';\n            setRunning(false);\n            break;\n        }\n      };\n    }\n\n    form?.addEventListener('submit', async (event) => {\n      event.preventDefault();\n      if (!textarea || !composerStatus) return;\n      const text = textarea.value.trim();\n      if (!text || running) return;\n      composerStatus.textContent = 'Sending…';\n      updateSubmitButtonState();\n      try {\n        const response = await fetch('/session/message', {\n          method: 'POST',\n          headers: { 'Content-Type': 'application/json' },\n          body: JSON.stringify({ token: form.token.value, session: form.session.value, sessionKey: form.sessionKey.value, text }),\n        });\n        const payload = await response.json();\n        if (!response.ok || !payload.ok) throw new Error(payload.error || 'Request failed');\n        textarea.value = '';\n        textarea.style.height = 'auto';\n        composerStatus.textContent = 'Thinking…';\n        setRunning(true);\n        updateSubmitButtonState();\n        scrollToLatest('smooth');\n      } catch (err) {\n        composerStatus.textContent = err && err.message ? err.message : String(err);\n        submitButton.disabled = false;\n      }\n    });\n\n    toggleJumpButton();\n  </script>\n</body>\n</html>`;\n}\n\nfunction formatDate(value: string): string {\n  const date = new Date(value);\n  if (Number.isNaN(date.getTime())) return value;\n  return date.toLocaleString();\n}\n\nfunction esc(value: string): string {\n  return value\n    .replaceAll(\"&\", \"&amp;\")\n    .replaceAll(\"<\", \"&lt;\")\n    .replaceAll(\">\", \"&gt;\")\n    .replaceAll('\"', \"&quot;\")\n    .replaceAll(\"'\", \"&#39;\");\n}\n\nconst styles = `\n  @import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;600&family=DM+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');\n\n  :root {\n    --bg: #f0ece3;\n    --surface: #ffffff;\n    --border: rgba(0, 0, 0, 0.08);\n    --text: #18181b;\n    --muted: #71717a;\n    --subtle: #a1a1aa;\n\n    --user-bg: #18181b;\n    --user-text: #fafafa;\n    --user-time: rgba(250, 250, 250, 0.5);\n\n    --asst-border: #22c55e;\n    --asst-avatar-bg: #f0fdf4;\n    --asst-avatar-text: #16a34a;\n\n    --tool-bg: #0d1117;\n    --tool-header: #161b22;\n    --tool-text: #c9d1d9;\n    --tool-accent: #58a6ff;\n    --tool-ok: #3fb950;\n    --tool-err: #f85149;\n    --tool-time: #484f58;\n\n    --ok-bg: #f0fdf4;\n    --ok-text: #15803d;\n    --err-bg: #fef2f2;\n    --err-text: #b91c1c;\n  }\n\n  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n  body {\n    min-height: 100vh;\n    padding: 40px 20px 80px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    overflow-x: hidden;\n    background-color: var(--bg);\n    background-image:\n      radial-gradient(ellipse 80% 40% at 50% -10%, rgba(255,255,255,0.6) 0%, transparent 70%);\n    color: var(--text);\n    font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif;\n    font-size: 15px;\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  .shell {\n    width: 100%;\n    max-width: 780px;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n\n  /* ── Hero ─────────────────────────────────────────────────────────────── */\n\n  .hero-card {\n    padding: 28px 32px 24px;\n    border: 1px solid var(--border);\n    border-radius: 20px;\n    background: var(--surface);\n    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);\n  }\n\n  .hero-top {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: 20px;\n    margin-bottom: 18px;\n  }\n\n  .hero-wordmark {\n    display: block;\n    margin-bottom: 6px;\n    color: var(--subtle);\n    font-size: 0.72rem;\n    font-weight: 600;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n  }\n\n  .hero-title {\n    font-family: 'Lora', Georgia, serif;\n    font-size: clamp(1.4rem, 2.5vw, 1.75rem);\n    font-weight: 600;\n    line-height: 1.2;\n    letter-spacing: -0.01em;\n    color: var(--text);\n    text-wrap: balance;\n    margin-bottom: 8px;\n  }\n\n  .hero-meta-line {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px 14px;\n    color: var(--muted);\n    font-size: 0.82rem;\n    line-height: 1.4;\n  }\n\n  .hero-meta-line strong {\n    color: var(--text);\n    font-weight: 600;\n  }\n\n  .hero-side {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    gap: 8px;\n    flex-shrink: 0;\n  }\n\n  .hero-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 6px 11px;\n    border: 1px solid var(--border);\n    border-radius: 999px;\n    background: rgba(255,255,255,0.7);\n    font-size: 0.78rem;\n    color: var(--muted);\n    line-height: 1;\n  }\n\n  .hero-badge strong {\n    color: var(--text);\n    font-weight: 600;\n  }\n\n  .hero-badge-status.is-running {\n    background: #fff7ed;\n    border-color: rgba(217, 119, 6, 0.18);\n    color: #9a3412;\n  }\n\n  .hero-badge-dot {\n    width: 7px;\n    height: 7px;\n    border-radius: 50%;\n    background: #a1a1aa;\n    flex-shrink: 0;\n  }\n\n  .hero-badge-status.is-running .hero-badge-dot {\n    background: #d97706;\n    box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.14);\n  }\n\n  .hero-detail-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n    padding-top: 14px;\n    border-top: 1px solid rgba(0, 0, 0, 0.06);\n  }\n\n  .hero-detail {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    min-width: 0;\n    padding: 6px 10px;\n    border-radius: 12px;\n    background: rgba(0, 0, 0, 0.025);\n    color: var(--muted);\n    font-size: 0.78rem;\n  }\n\n  .hero-detail-label {\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n    font-size: 0.68rem;\n    color: var(--subtle);\n  }\n\n  .hero-detail code {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    font-family: 'JetBrains Mono', ui-monospace, monospace;\n    font-size: 0.74rem;\n    color: var(--text);\n  }\n\n  /* ── Timeline shell ───────────────────────────────────────────────────── */\n\n  .fork-links {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    margin-top: 10px;\n  }\n\n  .fork-link {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 5px 10px;\n    border-radius: 999px;\n    border: 1px solid rgba(239, 68, 68, 0.18);\n    background: rgba(254, 242, 242, 0.95);\n    color: #b91c1c;\n    text-decoration: none;\n    font-size: 0.74rem;\n    font-weight: 600;\n    line-height: 1;\n    transition: transform 120ms, background 120ms, border-color 120ms;\n  }\n\n  .fork-link:hover {\n    transform: translateY(-1px);\n    background: #fff1f2;\n    border-color: rgba(239, 68, 68, 0.28);\n  }\n\n  .fork-dot {\n    width: 7px;\n    height: 7px;\n    border-radius: 50%;\n    background: #ef4444;\n    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);\n    flex-shrink: 0;\n  }\n\n  .fork-text {\n    white-space: nowrap;\n  }\n\n  .related-card {\n    padding: 18px 20px;\n    border: 1px solid var(--border);\n    border-radius: 18px;\n    background: rgba(255,255,255,0.78);\n    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);\n    backdrop-filter: blur(12px);\n  }\n\n  .related-list {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n  }\n\n  .related-link {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n    padding: 12px 14px;\n    border-radius: 14px;\n    border: 1px solid var(--border);\n    background: rgba(255,255,255,0.82);\n    color: inherit;\n    text-decoration: none;\n    transition: transform 120ms, border-color 120ms, box-shadow 120ms, background 120ms;\n  }\n\n  .related-link:hover {\n    transform: translateY(-1px);\n    border-color: rgba(0,0,0,0.16);\n    background: #fff;\n    box-shadow: 0 8px 18px rgba(0,0,0,0.05);\n  }\n\n  .related-copy {\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n  }\n\n  .related-title {\n    color: var(--text);\n    font-size: 0.94rem;\n    line-height: 1.3;\n  }\n\n  .related-summary {\n    color: var(--muted);\n    font-size: 0.82rem;\n    line-height: 1.45;\n  }\n\n  .related-meta {\n    color: var(--subtle);\n    font-size: 0.74rem;\n    line-height: 1.4;\n  }\n\n  .related-arrow {\n    flex-shrink: 0;\n    color: var(--subtle);\n    font-size: 1rem;\n  }\n\n  .timeline-shell {\n    padding: 20px 0;\n  }\n\n  .timeline-list {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    min-width: 0;\n  }\n\n  /* ── Message rows ─────────────────────────────────────────────────────── */\n\n  .msg-row {\n    display: flex;\n    align-items: flex-end;\n    gap: 8px;\n    padding: 2px 0;\n    min-width: 0;\n  }\n\n  /* ── User messages ────────────────────────────────────────────────────── */\n\n  .msg-user {\n    justify-content: flex-end;\n  }\n\n  .user-bubble {\n    max-width: 85%;\n    min-width: 0;\n    padding: 12px 16px;\n    border-radius: 18px 18px 4px 18px;\n    background: var(--user-bg);\n    color: var(--user-text);\n    box-shadow: 0 1px 2px rgba(0,0,0,0.12);\n  }\n\n  .msg-raw-header {\n    margin-bottom: 8px;\n    color: rgba(250, 250, 250, 0.72);\n    font-family: 'JetBrains Mono', ui-monospace, monospace;\n    font-size: 0.72rem;\n    line-height: 1.5;\n    white-space: pre-wrap;\n    word-break: break-word;\n  }\n\n  .thread-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    margin-bottom: 8px;\n    padding: 4px 10px;\n    border-radius: 999px;\n    background: rgba(255,255,255,0.22);\n    color: var(--user-text);\n    font-size: 0.68rem;\n    font-weight: 700;\n    letter-spacing: 0.01em;\n  }\n\n  .thread-badge code {\n    font-family: 'JetBrains Mono', ui-monospace, monospace;\n    font-size: 0.66rem;\n    background: rgba(255,255,255,0.16);\n    padding: 1px 6px;\n    border-radius: 999px;\n    color: inherit;\n  }\n\n  .msg-user .msg-body {\n    color: var(--user-text);\n  }\n\n  .msg-user .msg-time {\n    display: block;\n    margin-top: 6px;\n    font-size: 0.72rem;\n    color: var(--user-time);\n    text-align: right;\n  }\n\n  /* ── Avatars ──────────────────────────────────────────────────────────── */\n\n  .msg-avatar {\n    flex: 0 0 28px;\n    width: 28px;\n    height: 28px;\n    border-radius: 50%;\n    font-size: 0.68rem;\n    font-weight: 700;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    letter-spacing: 0;\n    flex-shrink: 0;\n  }\n\n  .user-avatar {\n    background: #eff6ff;\n    border: 1.5px solid #93c5fd;\n    color: #1d4ed8;\n  }\n\n  .asst-avatar {\n    background: var(--asst-avatar-bg);\n    border: 1.5px solid var(--asst-border);\n    color: var(--asst-avatar-text);\n    margin-bottom: 2px;\n  }\n\n  /* ── Assistant messages ───────────────────────────────────────────────── */\n\n  .msg-assistant {\n    align-items: flex-end;\n    gap: 8px;\n    max-width: 85%;\n  }\n\n  .asst-card {\n    min-width: 0;\n    max-width: 100%;\n    padding: 14px 18px;\n    border: 1px solid var(--border);\n    border-radius: 18px 18px 18px 4px;\n    background: var(--surface);\n    box-shadow: 0 1px 3px rgba(0,0,0,0.04);\n  }\n\n  .msg-assistant .msg-body {\n    color: var(--text);\n  }\n\n  .msg-assistant .msg-time {\n    display: block;\n    margin-top: 8px;\n    font-size: 0.72rem;\n    color: var(--subtle);\n  }\n\n  /* ── Tool blocks ──────────────────────────────────────────────────────── */\n\n  .tool-block {\n    max-width: 92%;\n    margin-left: 36px;\n    border-radius: 10px;\n    overflow: hidden;\n    border: 1px solid rgba(255,255,255,0.06);\n    box-shadow: 0 2px 8px rgba(0,0,0,0.16);\n    margin: 6px 0;\n  }\n\n  .tool-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 14px;\n    background: var(--tool-header);\n    border-bottom: 1px solid rgba(255,255,255,0.06);\n    overflow: hidden;\n  }\n\n  .tool-icon {\n    color: var(--tool-accent);\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n  }\n\n  .tool-name {\n    flex: 1;\n    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;\n    font-size: 0.75rem;\n    font-weight: 500;\n    color: var(--tool-accent);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .tool-time {\n    flex-shrink: 0;\n    font-family: 'JetBrains Mono', ui-monospace, monospace;\n    font-size: 0.7rem;\n    color: var(--tool-time);\n  }\n\n  .tool-output {\n    display: block;\n    padding: 12px 14px;\n    background: var(--tool-bg);\n    color: var(--tool-text);\n    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;\n    font-size: 0.78rem;\n    line-height: 1.6;\n    white-space: pre-wrap;\n    word-break: break-word;\n    overflow-x: auto;\n    max-height: 400px;\n    overflow-y: auto;\n  }\n\n  .tool-output.tone-ok { color: var(--tool-ok); }\n  .tool-output.tone-err { color: var(--tool-err); }\n\n  /* ── Markdown blocks ──────────────────────────────────────────────────── */\n\n  .markdown-body {\n    font-family: 'DM Sans', system-ui, sans-serif;\n    font-size: 0.9rem;\n    line-height: 1.65;\n    word-break: break-word;\n  }\n\n  .markdown-body > *:first-child { margin-top: 0; }\n  .markdown-body > *:last-child { margin-bottom: 0; }\n  .markdown-body p,\n  .markdown-body ul,\n  .markdown-body ol,\n  .markdown-body blockquote,\n  .markdown-body pre,\n  .markdown-body table,\n  .markdown-body hr {\n    margin: 0 0 0.85em;\n  }\n\n  .markdown-body h1,\n  .markdown-body h2,\n  .markdown-body h3,\n  .markdown-body h4,\n  .markdown-body h5,\n  .markdown-body h6 {\n    margin: 0 0 0.55em;\n    line-height: 1.25;\n    font-weight: 700;\n    letter-spacing: -0.01em;\n  }\n\n  .markdown-body h1 { font-size: 1.4rem; }\n  .markdown-body h2 { font-size: 1.22rem; }\n  .markdown-body h3 { font-size: 1.08rem; }\n  .markdown-body h4,\n  .markdown-body h5,\n  .markdown-body h6 { font-size: 0.95rem; }\n\n  .markdown-body ul,\n  .markdown-body ol {\n    padding-left: 1.3em;\n  }\n\n  .markdown-body li + li {\n    margin-top: 0.22em;\n  }\n\n  .markdown-body blockquote {\n    padding-left: 12px;\n    border-left: 3px solid rgba(34, 197, 94, 0.35);\n    opacity: 0.95;\n  }\n\n  .markdown-body a {\n    color: inherit;\n    text-decoration: underline;\n    text-underline-offset: 2px;\n  }\n\n  .markdown-body code {\n    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;\n    font-size: 0.82em;\n    padding: 0.16em 0.38em;\n    border-radius: 6px;\n  }\n\n  .markdown-body pre {\n    overflow-x: auto;\n    border-radius: 12px;\n    padding: 12px 14px;\n  }\n\n  .markdown-body pre code {\n    display: block;\n    padding: 0;\n    border-radius: 0;\n    background: transparent;\n    font-size: 0.82rem;\n    line-height: 1.6;\n  }\n\n  .markdown-body table {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: 0.85rem;\n  }\n\n  .markdown-body th,\n  .markdown-body td {\n    padding: 8px 10px;\n    border: 1px solid rgba(0, 0, 0, 0.08);\n    text-align: left;\n    vertical-align: top;\n  }\n\n  .markdown-body img {\n    max-width: 100%;\n    border-radius: 12px;\n  }\n\n  .markdown-user code {\n    background: rgba(255,255,255,0.14);\n    color: var(--user-text);\n  }\n\n  .markdown-user pre {\n    background: rgba(255,255,255,0.08);\n    border: 1px solid rgba(255,255,255,0.08);\n  }\n\n  .markdown-user table th,\n  .markdown-user table td {\n    border-color: rgba(255,255,255,0.16);\n  }\n\n  .markdown-assistant code {\n    background: #f4f4f5;\n    color: #27272a;\n  }\n\n  .markdown-assistant pre {\n    background: #0f172a;\n    color: #e5e7eb;\n  }\n\n  .markdown-assistant table th,\n  .markdown-assistant table td {\n    border-color: rgba(0, 0, 0, 0.08);\n  }\n\n  /* ── System events ────────────────────────────────────────────────────── */\n\n  .system-event {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    padding: 10px 0;\n    color: var(--subtle);\n    font-size: 0.775rem;\n  }\n\n  .event-dot {\n    width: 4px;\n    height: 4px;\n    border-radius: 50%;\n    background: var(--subtle);\n    flex-shrink: 0;\n    opacity: 0.6;\n  }\n\n  .event-text {\n    color: var(--muted);\n  }\n\n  .system-event-err .event-text {\n    color: var(--err-text);\n  }\n\n  .event-time {\n    color: var(--subtle);\n    font-style: normal;\n  }\n\n  /* ── Status page ──────────────────────────────────────────────────────── */\n\n  .card {\n    padding: 28px 32px;\n    border: 1px solid var(--border);\n    border-radius: 20px;\n    background: var(--surface);\n    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);\n  }\n\n  .stack > * + * { margin-top: 14px; }\n\n  .eyebrow {\n    color: var(--subtle);\n    font-size: 0.72rem;\n    font-weight: 600;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n  }\n\n  h1 {\n    font-family: 'Lora', Georgia, serif;\n    font-size: clamp(1.4rem, 2.5vw, 1.75rem);\n    font-weight: 600;\n    letter-spacing: -0.01em;\n    line-height: 1.2;\n  }\n\n  p { color: var(--muted); font-size: 0.9rem; line-height: 1.5; }\n\n  .status {\n    padding: 12px 16px;\n    border-radius: 10px;\n    font-size: 0.9rem;\n  }\n\n  .status.err {\n    background: var(--err-bg);\n    color: var(--err-text);\n    border: 1px solid rgba(185, 28, 28, 0.12);\n  }\n\n  /* ── Composer ─────────────────────────────────────────────────────────── */\n\n  .composer-card {\n    padding: 8px 2px 0;\n    border: none;\n    border-radius: 0;\n    background: transparent;\n    box-shadow: none;\n  }\n\n  .jump-latest-btn {\n    position: fixed;\n    left: 50%;\n    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);\n    z-index: 10;\n    width: 42px;\n    height: 42px;\n    border: 1px solid var(--border);\n    border-radius: 999px;\n    background: var(--bg);\n    color: var(--text);\n    font: 700 1rem/1 'DM Sans', sans-serif;\n    box-shadow: 0 10px 30px rgba(0,0,0,0.12);\n    cursor: pointer;\n    backdrop-filter: blur(10px);\n    transform: translateX(-50%);\n    outline: none;\n    appearance: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  .jump-latest-btn:hover {\n    transform: translateX(-50%) translateY(-1px);\n    background: #e8e3d9;\n  }\n\n  .jump-latest-btn:focus,\n  .jump-latest-btn:active {\n    outline: none;\n  }\n\n  .jump-latest-btn:focus-visible {\n    box-shadow: 0 10px 30px rgba(0,0,0,0.12), 0 0 0 3px rgba(0,0,0,0.08);\n  }\n\n  .composer-copy { margin-bottom: 12px; color: var(--muted); }\n\n  .composer-form textarea {\n    width: 100%;\n    resize: none;\n    overflow-y: auto;\n    min-height: 84px;\n    padding: 12px 14px;\n    border: 1px solid var(--border);\n    border-radius: 14px;\n    font: inherit;\n    color: var(--text);\n    background: #fafafa;\n  }\n\n  .composer-form textarea:focus {\n    outline: 2px solid rgba(34, 197, 94, 0.18);\n    border-color: rgba(34, 197, 94, 0.45);\n  }\n\n  .composer-actions {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n    margin-top: 10px;\n  }\n\n  .composer-status { color: var(--muted); font-size: 13px; }\n  .composer-actions button:disabled { opacity: 0.55; cursor: wait; }\n\n  .composer-send-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 42px;\n    height: 42px;\n    border: none;\n    border-radius: 999px;\n    background: #d97706;\n    color: #ffffff;\n    font: 700 1rem/1 'DM Sans', sans-serif;\n    cursor: pointer;\n    box-shadow: 0 10px 24px rgba(217, 119, 6, 0.26);\n    transition: transform 120ms, filter 120ms, box-shadow 120ms, background 120ms;\n  }\n\n  .composer-send-btn:hover:not(:disabled) {\n    transform: translateY(-1px);\n    filter: saturate(1.06) brightness(0.98);\n    box-shadow: 0 12px 28px rgba(217, 119, 6, 0.32);\n  }\n\n  .composer-send-btn:focus-visible {\n    outline: 2px solid rgba(217, 119, 6, 0.28);\n    outline-offset: 3px;\n  }\n\n  .composer-send-btn:disabled {\n    background: #d4d4d8;\n    color: rgba(24, 24, 27, 0.45);\n    box-shadow: none;\n    transform: none;\n    filter: none;\n    cursor: not-allowed;\n    opacity: 1;\n  }\n\n  /* ── Responsive ───────────────────────────────────────────────────────── */\n\n  @media (max-width: 600px) {\n    body { padding: 20px 12px 60px; }\n\n    .hero-card, .card { padding: 20px; border-radius: 16px; }\n\n    .hero-top { flex-direction: column; gap: 12px; }\n    .hero-side { align-items: flex-start; }\n    .hero-detail-row { gap: 8px; }\n\n    .user-bubble,\n    .msg-assistant,\n    .tool-block { max-width: 100%; }\n\n    .asst-avatar { display: none; }\n\n    .asst-card { border-radius: 4px 14px 14px 14px; }\n  }\n`;\n"]}