pi-trace-viewer 0.1.0

package/web/render-helpers.js

@@ -0,0 +1,276 @@
+/* global marked */
+export function renderEntry(entry, allEntries = []) {
+  const timestamp = `<div class="message-timestamp">${formatTime(entry?.timestamp)}</div>`;
+  const link = entry?.id ? `<button class="copy-link" data-copy-link="${escapeAttr(entry.id)}" title="Copy link">#</button>` : "";
+  if (entry?.type === "message") {
+    const message = entry.message || {};
+    if (message.role === "user") return `<article id="entry-${escapeAttr(entry.id)}" class="entry user-message">${link}${timestamp}${renderContent(message.content, "user")}</article>`;
+    if (message.role === "assistant") return `<article id="entry-${escapeAttr(entry.id)}" class="entry assistant-message">${link}${timestamp}${renderContent(message.content, "assistant")}${message.errorMessage ? `<div class="tool-block error"><div class="tool-content">${escapeHtml(message.errorMessage)}</div></div>` : ""}</article>`;
+    if (message.role === "toolResult") {
+      return `<article id="entry-${escapeAttr(entry.id)}" class="entry"><details class="tool-block ${message.isError ? "error" : "success"}"><summary><span class="tool-name">${escapeHtml(message.toolName || "tool")}</span> result${message.isError ? " · error" : ""}</summary><div class="tool-content">${renderContent(message.content, "tool")}</div></details></article>`;
+    }
+    return fallbackEntry(entry, "message");
+  }
+  if (entry?.type === "custom_message") {
+    const open = entry.display ? " open" : "";
+    const hidden = entry.display ? "" : " hidden-custom";
+    const label = entry.display ? "custom message" : "hidden custom message";
+    return `<article id="entry-${escapeAttr(entry.id)}" class="entry"><details class="custom-message${hidden}"${open}><summary><span class="tool-name">${escapeHtml(entry.customType || "custom")}</span> ${label}</summary><div class="summary-content">${renderContent(entry.content, "custom")}${renderDetails(entry.details)}</div></details></article>`;
+  }
+  if (entry?.type === "custom") {
+    return `<article id="entry-${escapeAttr(entry.id)}" class="entry"><details class="custom-message custom-state"><summary><span class="tool-name">${escapeHtml(entry.customType || "custom")}</span> custom state</summary><div class="summary-content"><pre class="json-block">${json(entry.data ?? null)}</pre></div></details></article>`;
+  }
+  if (entry?.type === "compaction") return `<article id="entry-${escapeAttr(entry.id)}" class="entry"><details class="compaction"><summary>[compaction] Compacted from ${number(entry.tokensBefore)} tokens</summary><div class="summary-content">${renderMarkdownText(entry.summary, "Compaction summary")}</div></details></article>`;
+  if (entry?.type === "branch_summary") return `<article id="entry-${escapeAttr(entry.id)}" class="entry"><details class="branch-summary" open><summary>Branch Summary</summary><div class="summary-content">${renderMarkdownText(entry.summary, "Branch summary")}</div></details></article>`;
+  if (entry?.type === "model_change") return `<div id="entry-${escapeAttr(entry.id)}" class="entry model-change">${timestamp}Switched to model: ${escapeHtml(`${entry.provider}/${entry.modelId}`)}</div>`;
+  if (entry?.type === "thinking_level_change") return `<div id="entry-${escapeAttr(entry.id)}" class="entry setting-change">Thinking level: ${escapeHtml(entry.thinkingLevel)}</div>`;
+  if (entry?.type === "session_info") return `<div id="entry-${escapeAttr(entry.id)}" class="entry setting-change">${timestamp}Session name: ${escapeHtml(entry.name || "(cleared)")}</div>`;
+  if (entry?.type === "label") return `<div id="entry-${escapeAttr(entry.id)}" class="entry setting-change">${timestamp}Label: ${escapeHtml(entry.label || "(cleared)")}</div>`;
+  return fallbackEntry(entry, entry?.type || "unknown");
+}
+
+export function renderContent(content, role) {
+  if (typeof content === "string") return renderMarkdownText(content, `${role} markdown`);
+  if (!Array.isArray(content)) return `<pre class="json-block">${json(content ?? null)}</pre>`;
+  let html = "";
+  const images = [];
+  for (const block of content) {
+    if (typeof block === "string") html += renderMarkdownText(block, `${role} markdown`);
+    else if (!block || typeof block !== "object") html += `<pre class="json-block">${json(block ?? null)}</pre>`;
+    else if (block.type === "text") html += renderMarkdownText(block.text || "", `${role} markdown`);
+    else if (block.type === "thinking") html += `<details class="thinking-block"><summary>thinking</summary><div class="thinking-content">${escapeHtml(block.thinking || "")}</div></details>`;
+    else if (block.type === "toolCall") html += `<details class="tool-block" open><summary><span class="tool-name">${escapeHtml(block.name || "tool")}</span> call</summary><pre class="json-block">${json(block.arguments ?? {})}</pre></details>`;
+    else if (block.type === "image" && block.data) images.push(`<img class="message-image" alt="${escapeAttr(role)} attachment" src="data:${escapeAttr(block.mimeType || "image/png")};base64,${escapeAttr(block.data)}">`);
+    else html += `<details class="provider-block"><summary>${escapeHtml(block.type || "content block")}</summary><pre class="json-block">${json(block)}</pre></details>`;
+  }
+  return html + (images.length ? `<div class="message-images">${images.join("")}</div>` : "");
+}
+
+export function renderPiContext(context) {
+  const messages = Array.isArray(context?.messages) ? context.messages : [];
+  const tools = Array.isArray(context?.tools) ? context.tools : [];
+  return `<div class="structured-context">
+    <details class="context-section" open><summary>System prompt</summary><div class="context-section-body">${renderMarkdownText(context?.systemPrompt || "", "System prompt source")}</div></details>
+    <section class="context-section"><div class="context-section-title">Messages <span>${messages.length}</span></div><div class="context-messages">${messages.map((message, index) => renderContextMessage(message, index)).join("") || `<div class="unavailable">No messages</div>`}</div></section>
+    <details class="context-section"><summary>Tools (${tools.length})</summary><div class="context-section-body tool-definition-list">${tools.map((tool) => `<details class="tool-definition"><summary>${escapeHtml(tool?.name || "unnamed tool")}</summary><p>${escapeHtml(tool?.description || "")}</p><pre class="json-block">${json(tool?.parameters || {})}</pre></details>`).join("") || "No tools"}</div></details>
+  </div>`;
+}
+
+export function renderCompactionContext(context) {
+  const messages = Array.isArray(context?.messagesToSummarize) ? context.messagesToSummarize : [];
+  const prefix = Array.isArray(context?.turnPrefixMessages) ? context.turnPrefixMessages : [];
+  return `<div class="structured-context">
+    <div class="context-note"><strong>Compaction preparation</strong>Pi exposes the source messages and cut-point metadata here. The exact generated prompt is visible in Provider Payload when the provider hook was captured.</div>
+    <section class="provider-meta">
+      <div><span>reason</span><strong>${escapeHtml(context?.reason)}</strong></div><div><span>tokens before</span><strong>${number(context?.tokensBefore)}</strong></div><div><span>split turn</span><strong>${context?.isSplitTurn ? "yes" : "no"}</strong></div><div><span>retry after</span><strong>${context?.willRetry ? "yes" : "no"}</strong></div>
+    </section>
+    ${context?.customInstructions ? `<details class="context-section"><summary>Custom compaction instructions</summary><div class="context-section-body">${renderMarkdownText(context.customInstructions, "Instruction source")}</div></details>` : ""}
+    ${context?.previousSummary ? `<details class="context-section"><summary>Previous summary</summary><div class="context-section-body">${renderMarkdownText(context.previousSummary, "Previous summary source")}</div></details>` : ""}
+    <section class="context-section"><div class="context-section-title">Messages to summarize <span>${messages.length}</span></div><div class="context-messages">${messages.map((message, index) => renderContextMessage(message, index)).join("") || `<div class="unavailable">No history messages in this compaction pass.</div>`}</div></section>
+    ${prefix.length ? `<section class="context-section"><div class="context-section-title">Split-turn prefix <span>${prefix.length}</span></div><div class="context-messages">${prefix.map((message, index) => renderContextMessage(message, index)).join("")}</div></section>` : ""}
+    <details class="context-section"><summary>Cut point and settings</summary><div class="context-section-body"><pre class="json-block">${json({ firstKeptEntryId: context?.firstKeptEntryId, settings: context?.settings, fileOps: context?.fileOps })}</pre></div></details>
+  </div>`;
+}
+
+export function renderContextMessage(message, index) {
+  const role = message?.role || message?.type || "unknown";
+  const customType = message?.customType ? ` · ${message.customType}` : "";
+  const tool = message?.toolName ? ` · ${message.toolName}` : "";
+  const source = message?.content ?? message?.summary ?? message?.text ?? message;
+  return `<details class="context-message role-${roleClass(role)}"><summary class="context-message-head"><span>#${index + 1}</span><span class="role-badge">${escapeHtml(role + customType + tool)}</span>${message?.isError ? `<span class="error-label">error</span>` : ""}<span class="context-message-preview">${escapeHtml(truncate(contentText(source) || "(no text)", 130))}</span></summary><div class="context-message-body">${renderContent(source, role)}</div><details class="message-raw-json"><summary>Message JSON</summary><pre class="json-block">${json(message)}</pre></details></details>`;
+}
+
+export function renderProviderPayload(payload) {
+  if (!payload || typeof payload !== "object") return `<div class="provider-scalar">${escapeHtml(String(payload ?? "null"))}</div>`;
+  const input = Array.isArray(payload.input) ? payload.input : Array.isArray(payload.messages) ? payload.messages : typeof payload.prompt === "string" ? [payload.prompt] : [];
+  const instructions = payload.instructions ?? payload.system;
+  const tools = Array.isArray(payload.tools) ? payload.tools : [];
+  const meta = {};
+  for (const key of ["model", "temperature", "top_p", "max_tokens", "max_output_tokens", "reasoning", "tool_choice", "parallel_tool_calls", "store", "stream"]) if (payload[key] !== undefined) meta[key] = payload[key];
+  return `<div class="structured-context provider-context">
+    <section class="provider-meta">${Object.entries(meta).map(([key, value]) => `<div><span>${escapeHtml(key)}</span><strong>${escapeHtml(typeof value === "object" ? safeStringify(value) : value)}</strong></div>`).join("") || `<div><span>format</span><strong>generic payload</strong></div>`}</section>
+    ${instructions !== undefined ? `<details class="context-section" open><summary>Instructions / system</summary><div class="context-section-body">${renderProviderContent(instructions, "instructions")}</div></details>` : ""}
+    <section class="context-section"><div class="context-section-title">Backend input <span>${input.length}</span></div><div class="context-messages">${input.map((item, index) => renderProviderItem(item, index)).join("") || `<div class="unavailable">No recognized input/messages field. Use Raw JSON below.</div>`}</div></section>
+    ${tools.length ? `<details class="context-section"><summary>Backend tools (${tools.length})</summary><div class="context-section-body tool-definition-list">${tools.map((tool) => { const definition = tool?.function || tool || {}; return `<details class="tool-definition"><summary>${escapeHtml(definition.name || tool?.type || "tool")}</summary><p>${escapeHtml(definition.description || "")}</p><pre class="json-block">${json(definition.parameters || definition.input_schema || tool)}</pre></details>`; }).join("")}</div></details>` : ""}
+  </div>`;
+}
+
+export function renderProviderContent(content, label) {
+  if (typeof content === "string") return renderMarkdownText(content, `${label} source`);
+  if (!Array.isArray(content)) return `<pre class="json-block">${json(content)}</pre>`;
+  return content.map((block) => {
+    if (typeof block === "string") return renderMarkdownText(block, `${label} source`);
+    const text = block?.text ?? block?.input_text ?? block?.output_text;
+    if (typeof text === "string") return renderMarkdownText(text, `${block.type || label} source`);
+    if (["function_call", "tool_use"].includes(block?.type)) return `<details class="tool-block" open><summary><span class="tool-name">${escapeHtml(block.name || "tool")}</span> call</summary><pre class="json-block">${json(block.arguments ?? block.input ?? {})}</pre></details>`;
+    if (["function_call_output", "tool_result"].includes(block?.type)) return `<details class="tool-block success"><summary>tool result</summary>${renderProviderContent(block.output ?? block.content ?? "", "tool result")}</details>`;
+    return `<details class="provider-block"><summary>${escapeHtml(block?.type || "content block")}</summary><pre class="json-block">${json(block)}</pre></details>`;
+  }).join("");
+}
+
+export function renderProviderItem(item, index) {
+  if (typeof item === "string") return `<details class="context-message role-user"><summary class="context-message-head"><span>#${index + 1}</span><span class="role-badge">prompt</span><span class="context-message-preview">${escapeHtml(truncate(item, 130))}</span></summary><div class="context-message-body">${renderMarkdownText(item, "Prompt source")}</div></details>`;
+  const role = item?.role || item?.type || "input item";
+  const name = item?.name ? ` · ${item.name}` : "";
+  if (["function_call", "tool_use"].includes(item?.type)) {
+    const args = typeof item.arguments === "string" ? parseJson(item.arguments) : item.arguments ?? item.input ?? {};
+    return `<details class="context-message role-${roleClass(role)}"><summary class="context-message-head"><span>#${index + 1}</span><span class="role-badge">${escapeHtml(role + name)}</span><span class="context-message-preview">${escapeHtml(truncate(safeStringify(args), 130))}</span></summary><div class="context-message-body"><pre class="json-block">${json(args)}</pre></div></details>`;
+  }
+  if (["function_call_output", "tool_result"].includes(item?.type)) {
+    const output = item.output ?? item.content ?? "";
+    return `<details class="context-message role-${roleClass(role)}"><summary class="context-message-head"><span>#${index + 1}</span><span class="role-badge">${escapeHtml(role + name)}</span><span class="context-message-preview">${escapeHtml(truncate(providerContentText(output), 130))}</span></summary><div class="context-message-body">${renderProviderContent(output, role)}</div></details>`;
+  }
+  const content = item?.content ?? item?.text ?? item?.arguments ?? item?.output ?? item;
+  return `<details class="context-message role-${roleClass(role)}"><summary class="context-message-head"><span>#${index + 1}</span><span class="role-badge">${escapeHtml(role + name)}</span><span class="context-message-preview">${escapeHtml(truncate(providerContentText(content), 130))}</span></summary><div class="context-message-body">${renderProviderContent(content, role)}</div></details>`;
+}
+
+export function describeEntry(entry, toolCalls) {
+  if (entry?.type === "message") return describeMessageEntry(entry, toolCalls);
+  if (entry?.type === "custom_message") {
+    const label = entry.display ? "custom: " : "hidden custom: ";
+    return { className: entry.display ? "tree-custom" : "tree-custom tree-hidden-custom", lines: [{ className: "line-custom", label, text: `${entry.customType || "custom"} · ${contentText(entry.content) || "(no text)"}` }] };
+  }
+  if (entry?.type === "custom") return { className: "tree-custom", lines: [{ className: "line-custom", label: "state: ", text: `${entry.customType || "custom"} · ${truncate(safeStringify(entry.data ?? null), 120)}` }] };
+  if (entry?.type === "compaction") return { className: "tree-compaction", lines: [{ className: "line-compaction", label: "compact: ", text: `${Math.round((entry.tokensBefore || 0) / 1000)}k tokens` }] };
+  if (entry?.type === "branch_summary") return { className: "tree-branch", lines: [{ className: "line-branch", label: "branch: ", text: entry.summary || "summary" }] };
+  if (entry?.type === "model_change") return { className: "tree-setting", lines: [{ className: "line-setting", label: "model: ", text: `${entry.provider}/${entry.modelId}` }] };
+  if (entry?.type === "thinking_level_change") return { className: "tree-setting", lines: [{ className: "line-setting", label: "thinking: ", text: entry.thinkingLevel || "" }] };
+  if (entry?.type === "session_info") return { className: "tree-setting", lines: [{ className: "line-setting", label: "name: ", text: entry.name || "(cleared)" }] };
+  if (entry?.type === "label") return { className: "tree-setting", lines: [{ className: "line-setting", label: "label: ", text: entry.label || "(cleared)" }] };
+  return { className: "tree-setting", lines: [{ className: "line-setting", label: `${entry?.type || "unknown"}: `, text: truncate(safeStringify(entry ?? null), 160) }] };
+}
+
+export function contentText(content) {
+  if (typeof content === "string") return content;
+  if (!Array.isArray(content)) return typeof content === "object" ? safeStringify(content ?? "") : String(content ?? "");
+  return content.map((block) => {
+    if (typeof block === "string") return block;
+    return block?.text || block?.thinking || (block?.type === "toolCall" ? `${block.name}(${safeStringify(block.arguments)})` : block?.type === "image" ? "[image]" : block?.type || "");
+  }).join(" ").replace(/\s+/g, " ").trim();
+}
+
+export function providerContentText(content) {
+  if (typeof content === "string") return content;
+  if (!Array.isArray(content)) return safeStringify(content ?? "");
+  return content.map((block) => {
+    if (typeof block === "string") return block;
+    const direct = block?.text ?? block?.input_text ?? block?.output_text;
+    if (direct !== undefined) return String(direct);
+    const nested = block?.output ?? block?.content;
+    if (typeof nested === "string") return nested;
+    if (block?.name) return `${block.name} ${safeStringify(block.arguments ?? block.input ?? {})}`;
+    return block?.type || "content block";
+  }).join(" ").replace(/\s+/g, " ").trim();
+}
+
+export function renderMarkdownText(value, rawLabel = "Raw Markdown") {
+  const source = String(value || "");
+  return `<div class="markdown-pair"><div class="markdown">${markdown(source)}</div><details class="raw-markdown"><summary>${escapeHtml(rawLabel)}</summary><pre>${escapeHtml(source)}</pre></details></div>`;
+}
+
+export function unavailableHtml(message) {
+  return `<div class="unavailable"><strong>Unavailable at extension level</strong>${escapeHtml(message)}</div>`;
+}
+
+export function json(value) {
+  return escapeHtml(safeStringify(value));
+}
+
+export function escapeHtml(value) {
+  return String(value ?? "").replace(/[&<>"']/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[char]);
+}
+
+export function escapeAttr(value) {
+  return escapeHtml(value);
+}
+
+export function number(value) {
+  return new Intl.NumberFormat("en-US").format(value || 0);
+}
+
+export function truncate(value, length) {
+  const text = String(value || "").replace(/\s+/g, " ").trim();
+  return text.length > length ? `${text.slice(0, length)}…` : text;
+}
+
+export function formatTime(value) {
+  return value ? new Date(value).toLocaleString() : "unknown";
+}
+
+export function formatClock(value) {
+  return value ? new Date(value).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" }) : "";
+}
+
+function describeMessageEntry(entry, toolCalls) {
+  const role = entry.message?.role;
+  const content = Array.isArray(entry.message?.content) ? entry.message.content : [];
+  if (role === "user") return { className: "tree-user", lines: [{ className: "line-user", label: "user: ", text: contentText(entry.message?.content) || "(empty)" }] };
+  if (role === "assistant") {
+    const text = content.filter((block) => block?.type === "text").map((block) => block.text).join(" ").replace(/\s+/g, " ").trim();
+    const thinking = content.filter((block) => block?.type === "thinking").map((block) => block.thinking).join(" ").replace(/\s+/g, " ").trim();
+    const lines = [];
+    if (thinking) lines.push({ className: "line-thinking", label: "thinking: ", text: thinking });
+    if (text) lines.push({ className: entry.message?.stopReason === "error" ? "line-error" : "line-assistant", label: "assistant: ", text });
+    if (!lines.length) lines.push({ className: entry.message?.stopReason === "error" ? "line-error" : "line-assistant", label: "assistant: ", text: entry.message?.errorMessage ? entry.message.errorMessage : "(no text)" });
+    for (const block of content.filter((item) => item?.type === "toolCall")) lines.push({ className: "line-tool-call", label: "call: ", text: formatToolCall(block.name || "tool", block.arguments || {}) });
+    return { className: entry.message?.stopReason === "error" ? "tree-error" : "tree-assistant", lines };
+  }
+  const linked = entry.message?.toolCallId ? toolCalls.get(entry.message.toolCallId) : null;
+  const toolName = entry.message?.toolName || linked?.name || role || "message";
+  const callDescription = linked ? formatToolCall(linked.name, linked.arguments) : `[${toolName}]`;
+  const result = contentText(entry.message?.content);
+  return { className: entry.message?.isError ? "tree-tool-result tree-error" : "tree-tool-result", lines: [{ className: entry.message?.isError ? "line-tool-error" : "line-tool-result", label: "result: ", text: `${callDescription}${result ? ` · ${result}` : ""}` }] };
+}
+
+function fallbackEntry(entry, label) {
+  const id = entry?.id ? ` id="entry-${escapeAttr(entry.id)}"` : "";
+  return `<article${id} class="entry"><details class="custom-message custom-state"><summary>${escapeHtml(label)} entry</summary><div class="summary-content"><pre class="json-block">${json(entry ?? null)}</pre></div></details></article>`;
+}
+
+function renderDetails(details) {
+  if (details === undefined) return "";
+  return `<details class="message-raw-json"><summary>Details JSON</summary><pre class="json-block">${json(details)}</pre></details>`;
+}
+
+function formatToolCall(name, args) {
+  const compact = (value, length = 90) => String(value ?? "").replace(/[\n\t]+/g, " ").trim().slice(0, length);
+  if (["read", "write", "edit"].includes(name)) return `[${name}: ${compact(args.path || args.file_path)}]`;
+  if (name === "bash") return `[bash: ${compact(args.command)}${String(args.command || "").length > 90 ? "…" : ""}]`;
+  if (name === "grep") return `[grep: /${compact(args.pattern, 45)}/ in ${compact(args.path || ".", 45)}]`;
+  if (name === "find") return `[find: ${compact(args.pattern, 45)} in ${compact(args.path || ".", 45)}]`;
+  const serialized = safeStringify(args || {});
+  return `[${name}: ${compact(serialized)}${serialized.length > 90 ? "…" : ""}]`;
+}
+
+function roleClass(value) {
+  return String(value || "unknown").replace(/[^a-zA-Z0-9_-]/g, "-");
+}
+
+function markdown(value) {
+  const fallback = typeof marked === "undefined" ? undefined : marked;
+  const parser = globalThis.marked?.parse ? globalThis.marked : fallback;
+  return parser?.parse ? parser.parse(escapeHtml(String(value || ""))) : `<p>${escapeHtml(value)}</p>`;
+}
+
+function parseJson(value) {
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
+
+function safeStringify(value) {
+  const seen = new WeakSet();
+  try {
+    return JSON.stringify(value, (_key, item) => {
+      if (typeof item === "bigint") return `${item.toString()}n`;
+      if (!item || typeof item !== "object") return item;
+      if (seen.has(item)) return "[Circular]";
+      seen.add(item);
+      return item;
+    }, 2) ?? "null";
+  } catch (error) {
+    return JSON.stringify({ error: error instanceof Error ? error.message : String(error) }, null, 2);
+  }
+}

package/web/styles.css

@@ -0,0 +1,318 @@
+:root {
+  --accent: #8abeb7;
+  --border: #5f87ff;
+  --border-accent: #00d7ff;
+  --border-muted: #505050;
+  --success: #b5bd68;
+  --error: #cc6666;
+  --warning: #f0c674;
+  --muted: #929292;
+  --dim: #666;
+  --text: #d4d4d4;
+  --selected-bg: #3a3a4a;
+  --message-user-bg: #30383d;
+  --message-assistant-bg: #34352d;
+  --message-tool-call-bg: #382f29;
+  --message-tool-result-bg: #263534;
+  --message-compaction-bg: #3c3728;
+  --message-branch-bg: #312d3d;
+  --user-bg: var(--message-user-bg);
+  --custom-bg: #2d2838;
+  --tool-bg: #282832;
+  --tool-success-bg: #283228;
+  --tool-error-bg: #3c2828;
+  --page-bg: #18181e;
+  --card-bg: #1e1e24;
+  --info-bg: #3c3728;
+  --topbar-height: 42px;
+  --sidebar-width: 400px;
+  --line-height: 18px;
+}
+
+* { box-sizing: border-box; }
+html { color-scheme: dark; }
+body {
+  margin: 0;
+  background: var(--page-bg);
+  color: var(--text);
+  font: 12px/var(--line-height) ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
+}
+button, input, select { font: inherit; }
+button, select { color: inherit; }
+button { cursor: pointer; }
+button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
+  outline: 2px solid var(--border-accent);
+  outline-offset: 1px;
+}
+.hidden { display: none !important; }
+.skip-link { position: fixed; z-index: 200; top: 5px; left: 5px; padding: 7px 10px; background: var(--card-bg); color: var(--text); border: 2px solid var(--border-accent); transform: translateY(-150%); }
+.skip-link:focus { transform: none; }
+.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+
+.topbar {
+  position: sticky;
+  z-index: 30;
+  top: 0;
+  height: var(--topbar-height);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--dim);
+  background: #1b1b21;
+}
+.brand { display: flex; align-items: center; gap: 8px; min-width: 118px; color: var(--accent); font-weight: 700; letter-spacing: .08em; }
+.brand-mark { width: 10px; height: 10px; border: 1px solid var(--accent); box-shadow: inset 0 0 0 2px var(--page-bg); background: var(--accent); }
+.mode-switch { display: flex; align-self: stretch; }
+.mode-btn { position: relative; min-width: 92px; border: 0; background: transparent; color: var(--muted); }
+.mode-btn:hover { color: var(--text); background: #24242c; }
+.mode-btn.active { color: var(--text); }
+.mode-btn.active::after { content: ""; position: absolute; inset: auto 12px 0; height: 2px; background: var(--border-accent); }
+.topbar-spacer { flex: 1; }
+.session-picker-label { color: var(--muted); }
+#session-picker { max-width: 320px; min-width: 180px; border: 1px solid var(--border-muted); background: var(--card-bg); padding: 4px 26px 4px 8px; }
+.live-status { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); min-width: 82px; }
+.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); }
+.live-status.live { color: var(--success); }
+.live-status.live .status-dot { background: var(--success); box-shadow: 0 0 7px rgba(181,189,104,.45); }
+.live-status.offline { color: var(--error); }
+.live-status.offline .status-dot { background: var(--error); }
+.icon-btn, .sidebar-toggle { width: 30px; height: 30px; display: grid; place-items: center; padding: 6px; border: 1px solid var(--border-muted); background: transparent; }
+.icon-btn:hover, .sidebar-toggle:hover { background: var(--selected-bg); border-color: var(--muted); }
+.icon-btn svg, .sidebar-toggle svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+
+#app { display: flex; min-height: calc(100vh - var(--topbar-height)); }
+#sidebar {
+  position: sticky;
+  top: var(--topbar-height);
+  width: var(--sidebar-width);
+  min-width: var(--sidebar-width);
+  height: calc(100vh - var(--topbar-height));
+  display: flex;
+  flex-direction: column;
+  background: var(--card-bg);
+}
+.sidebar-header { padding: 10px; border-bottom: 1px solid var(--border-muted); }
+.sidebar-search { width: 100%; height: 30px; padding: 5px 8px; border: 1px solid var(--border-muted); background: var(--page-bg); color: var(--text); }
+.sidebar-search::placeholder { color: var(--dim); }
+.sidebar-filters { display: flex; gap: 4px; padding-top: 8px; overflow-x: auto; }
+.filter-btn, .call-filter, .detail-tab, .small-btn {
+  min-height: 27px;
+  padding: 3px 7px;
+  white-space: nowrap;
+  border: 1px solid var(--border-muted);
+  background: transparent;
+  color: var(--muted);
+}
+.filter-btn:hover, .call-filter:hover, .detail-tab:hover, .small-btn:hover { color: var(--text); border-color: var(--muted); }
+.filter-btn.active, .call-filter.active, .detail-tab.active { color: var(--text); border-color: var(--border); background: var(--selected-bg); }
+.tree-container { flex: 1; min-height: 0; overflow: auto; padding: 6px 0 18px; scrollbar-gutter: stable; }
+.tree-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 5px;
+  width: max-content;
+  min-width: 100%;
+  min-height: 25px;
+  padding: 3px 10px;
+  border-left: 2px solid transparent;
+  color: var(--muted);
+  cursor: pointer;
+}
+.tree-row:hover { background: #292930; color: var(--text); }
+.tree-row.active { background: rgba(58,58,74,.72); border-left-color: var(--border-accent); color: var(--text); }
+.tree-row.on-branch:not(.active) { border-left-color: var(--border-muted); }
+.tree-prefix { flex: none; white-space: pre; color: var(--dim); line-height: 24px; }
+.tree-icon { flex: 0 0 9px; color: var(--dim); text-align: center; line-height: 24px; }
+.tree-lines { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; white-space: nowrap; }
+.tree-line { min-height: 22px; padding: 2px 7px; border-left: 2px solid transparent; border-radius: 2px; }
+.tree-line-label { font-weight: 700; }
+.line-user { background: var(--message-user-bg); border-left-color: #7aa7a2; color: #d8e4e2; }
+.line-user .tree-line-label { color: #91c7c0; }
+.line-assistant { background: var(--message-assistant-bg); border-left-color: #b5bd68; color: var(--text); }
+.line-assistant .tree-line-label { color: #c5cb70; }
+.line-thinking { background: var(--message-assistant-bg); border-left-color: #8f9560; color: var(--muted); font-style: italic; }
+.line-thinking .tree-line-label { color: #aeb56b; }
+.line-tool-call { background: var(--message-tool-call-bg); border-left-color: #de935f; color: #dfc2a9; }
+.line-tool-call .tree-line-label { color: #de935f; }
+.line-tool-result { background: var(--message-tool-result-bg); border-left-color: #5f9f98; color: #a9c9c5; }
+.line-tool-result .tree-line-label { color: #7fbab3; }
+.line-tool-error, .line-error { background: #3c2828; border-left-color: var(--error); color: #e2abab; }
+.line-compaction { background: var(--message-compaction-bg); border-left-color: var(--warning); color: #e0cf9d; }
+.line-branch { background: var(--message-branch-bg); border-left-color: #b294bb; color: #c8b3d0; }
+.line-custom { background: var(--custom-bg); border-left-color: #b294bb; color: #c8b3d0; }
+.line-custom .tree-line-label { color: #d0b0da; }
+.line-setting { background: #292930; border-left-color: var(--dim); color: var(--muted); }
+.call-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; margin-left: auto; flex: none; padding-left: 12px; color: var(--dim); font-size: 10px; }
+.call-status { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--warning); }
+.call-status.success { background: var(--success); }
+.call-status.error { border-radius: 0; background: var(--error); }
+.call-tree-row { align-items: flex-start; padding-block: 6px; border-bottom: 1px solid #292930; }
+.call-tree-row.call-compaction { background: rgba(60,55,40,.38); }
+.call-tree-row.call-branch_summary { background: rgba(49,45,61,.4); }
+.call-tree-content { display: flex; flex-direction: column; min-width: 300px; max-width: 620px; white-space: nowrap; }
+.call-tree-title { color: var(--text); font-weight: 700; }
+.call-tree-trigger { color: var(--accent); }
+.call-tree-activity { color: var(--muted); }
+.tree-status { min-height: 28px; padding: 5px 10px; border-top: 1px solid var(--border-muted); color: var(--dim); }
+#sidebar-resizer { position: sticky; top: var(--topbar-height); width: 6px; height: calc(100vh - var(--topbar-height)); cursor: col-resize; border-left: 1px solid var(--dim); background: var(--page-bg); }
+#sidebar-resizer:hover { background: var(--border); }
+#content { min-width: 0; flex: 1; padding: 22px clamp(16px, 4vw, 64px) 80px; }
+.sidebar-toggle, #sidebar-overlay { display: none; }
+
+.session-header { margin-bottom: 22px; padding: 14px 16px; border: 1px solid var(--border-muted); background: var(--card-bg); }
+.session-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
+.session-title { margin: 0; font-size: 15px; color: var(--accent); }
+.session-badge { padding: 1px 6px; border: 1px solid var(--border-muted); color: var(--muted); }
+.session-badge.active { color: var(--success); border-color: var(--success); }
+.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 5px 18px; }
+.info-label { color: var(--muted); margin-right: 7px; }
+.info-value { overflow-wrap: anywhere; }
+.trace-warning { color: var(--warning); }
+.header-actions { display: flex; gap: 6px; margin-left: auto; }
+.header-disclosure { margin-top: 10px; border-top: 1px solid var(--border-muted); padding-top: 8px; }
+.header-disclosure summary { color: var(--warning); cursor: pointer; }
+.header-disclosure pre { max-height: 420px; overflow: auto; white-space: pre-wrap; color: var(--muted); }
+
+#messages { max-width: 1100px; margin: auto; }
+.entry { position: relative; margin: 0 0 16px; scroll-margin-top: 58px; }
+.message-timestamp { margin-bottom: 3px; color: var(--dim); font-size: 10px; }
+.user-message { margin-left: clamp(20px, 8vw, 100px); padding: 10px 12px; background: var(--message-user-bg); border-left: 2px solid #7aa7a2; }
+.assistant-message { padding: 10px 12px; background: var(--message-assistant-bg); border-left: 2px solid #b5bd68; }
+.entry.highlight { animation: flash 1.2s ease-out; }
+@keyframes flash { 0%, 35% { background: rgba(0,215,255,.12); } 100% { background: transparent; } }
+.markdown { overflow-wrap: anywhere; }
+.markdown > :first-child { margin-top: 0; }
+.markdown > :last-child { margin-bottom: 0; }
+.markdown p, .markdown ul, .markdown ol, .markdown pre, .markdown blockquote { margin: 8px 0; }
+.markdown h1, .markdown h2, .markdown h3, .markdown h4 { margin: 16px 0 7px; color: var(--warning); line-height: 1.3; }
+.markdown h1 { font-size: 17px; } .markdown h2 { font-size: 15px; } .markdown h3 { font-size: 13px; }
+.markdown a { color: #81a2be; }
+.markdown code { color: var(--accent); background: #24242c; padding: 1px 3px; }
+.markdown pre, .json-block { overflow: auto; padding: 10px; border: 1px solid var(--border-muted); background: #141419; color: var(--text); tab-size: 2; }
+.markdown pre code { padding: 0; background: transparent; color: inherit; }
+.markdown blockquote { padding-left: 10px; border-left: 2px solid var(--muted); color: var(--muted); }
+.markdown table { border-collapse: collapse; max-width: 100%; }
+.markdown th, .markdown td { padding: 4px 7px; border: 1px solid var(--border-muted); }
+.markdown-pair + .markdown-pair { margin-top: 8px; }
+.raw-markdown { margin-top: 5px; border-top: 1px dashed #3f3f48; color: var(--dim); }
+.raw-markdown summary { width: max-content; padding: 3px 0; cursor: pointer; font-size: 10px; }
+.raw-markdown pre { max-height: 360px; margin: 3px 0 0; padding: 9px; overflow: auto; white-space: pre-wrap; border: 1px solid var(--border-muted); background: #141419; color: var(--muted); }
+.thinking-block, .tool-block, .compaction, .branch-summary, .custom-message { margin: 8px 0; border: 1px solid var(--border-muted); }
+.thinking-block { background: var(--message-assistant-bg); }
+.tool-block { background: var(--message-tool-call-bg); }
+.thinking-block summary, .tool-block summary, .compaction summary, .branch-summary summary, .custom-message summary { padding: 6px 9px; cursor: pointer; color: var(--muted); }
+.thinking-block[open] summary, .tool-block[open] summary, .compaction[open] summary, .branch-summary[open] summary, .custom-message[open] summary { border-bottom: 1px solid var(--border-muted); color: var(--text); }
+.thinking-content, .tool-content, .summary-content { padding: 9px; white-space: pre-wrap; overflow-wrap: anywhere; }
+.thinking-content { color: var(--muted); font-style: italic; }
+.tool-block.success { background: var(--message-tool-result-bg); }
+.tool-block.error { background: var(--tool-error-bg); border-color: var(--error); }
+.tool-name { color: var(--accent); font-weight: 700; }
+.model-change, .setting-change { margin: 12px 0; padding: 5px 9px; border-left: 2px solid var(--dim); color: var(--muted); }
+.compaction { border-left: 2px solid var(--warning); background: var(--message-compaction-bg); }
+.branch-summary { border-left: 2px solid #b294bb; background: var(--message-branch-bg); }
+.custom-message { border-left: 2px solid #b294bb; background: var(--custom-bg); }
+.custom-message.hidden-custom { border-left-color: var(--dim); background: #26252e; }
+.custom-state { border-left-color: var(--dim); }
+.message-images { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
+.message-image { max-width: 320px; max-height: 240px; object-fit: contain; cursor: zoom-in; border: 1px solid var(--border-muted); }
+.copy-link { position: absolute; top: 0; right: 0; opacity: 0; border: 0; background: var(--card-bg); color: var(--muted); }
+.entry:hover .copy-link, .copy-link:focus { opacity: 1; }
+
+.call-header { max-width: 1250px; margin: 0 auto 14px; padding: 14px 16px; border: 1px solid var(--border-muted); background: var(--card-bg); }
+.call-header-top { display: flex; align-items: center; gap: 9px; }
+.call-title { margin: 0; font-size: 15px; color: var(--accent); }
+.call-id { color: var(--dim); }
+.status-pill { padding: 1px 6px; border: 1px solid var(--warning); color: var(--warning); }
+.status-pill.success { border-color: var(--success); color: var(--success); }
+.status-pill.error { border-color: var(--error); color: var(--error); }
+.source-pill { padding: 1px 6px; border: 1px solid #8b734d; color: #c9aa72; }
+.call-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px 16px; margin-top: 10px; }
+.detail-tabs { position: sticky; top: var(--topbar-height); z-index: 5; display: flex; gap: 5px; max-width: 1250px; margin: auto; padding: 8px 0; background: var(--page-bg); overflow-x: auto; }
+.detail-panel { max-width: 1250px; margin: auto; }
+.compare-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
+.context-view-switch { display: flex; width: max-content; margin: 0 0 8px; border: 1px solid var(--border-muted); background: var(--card-bg); }
+.context-view-btn { min-height: 30px; padding: 4px 10px; border: 0; border-right: 1px solid var(--border-muted); background: transparent; color: var(--muted); }
+.context-view-btn:last-child { border-right: 0; }
+.context-view-btn:hover { color: var(--text); background: #292930; }
+.context-view-btn.active { color: var(--page-bg); background: var(--accent); }
+.context-single-panel { width: 100%; }
+.data-panel { min-width: 0; border: 1px solid var(--border-muted); background: var(--card-bg); }
+.panel-heading { position: sticky; top: 77px; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-bottom: 1px solid var(--border-muted); background: var(--card-bg); color: var(--warning); }
+.panel-heading .small-btn { margin-left: auto; min-height: 23px; }
+.panel-subtitle { color: var(--dim); font-size: 10px; }
+.data-panel .json-block { margin: 0; border: 0; max-height: calc(100vh - 155px); }
+.structured-context { display: grid; gap: 10px; padding: 10px; }
+.context-section { min-width: 0; margin: 0; border: 1px solid #3d3d46; background: #1b1b21; }
+.context-section > summary, .context-section-title { padding: 7px 9px; cursor: pointer; color: var(--warning); border-bottom: 1px solid #35353d; }
+.context-section-title { cursor: default; }
+.context-section-title span { color: var(--dim); }
+.context-section-body { padding: 9px; }
+.context-messages { display: grid; gap: 8px; padding: 8px; }
+.context-message { min-width: 0; border: 1px solid #41414a; background: #202027; }
+.context-message.role-user { border-left: 2px solid #7aa7a2; background: var(--message-user-bg); }
+.context-message.role-assistant { border-left: 2px solid #b5bd68; background: var(--message-assistant-bg); }
+.context-message.role-function_call, .context-message.role-tool_use { border-left: 2px solid #de935f; background: var(--message-tool-call-bg); }
+.context-message.role-toolResult, .context-message.role-function_call_output, .context-message.role-tool_result { border-left: 2px solid #5f9f98; background: var(--message-tool-result-bg); }
+.context-message-head { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 7px; cursor: pointer; color: var(--dim); }
+.context-message[open] > .context-message-head { border-bottom: 1px solid #34343c; }
+.role-badge { color: var(--accent); }
+.error-label { color: var(--error); }
+.context-message-preview { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
+.context-message-body { padding: 8px; }
+.message-raw-json { margin: 0 8px 8px; color: var(--dim); }
+.message-raw-json summary, .raw-json-disclosure summary { cursor: pointer; padding: 4px 0; font-size: 10px; }
+.structured-context .json-block { max-height: 320px; border: 1px solid var(--border-muted); }
+.tool-definition-list { display: grid; gap: 6px; }
+.tool-definition { padding: 5px 7px; border: 1px solid #3d3d46; background: #202027; }
+.tool-definition summary { cursor: pointer; color: var(--accent); }
+.tool-definition p { color: var(--muted); }
+.provider-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 5px; }
+.provider-meta div { display: flex; justify-content: space-between; gap: 8px; padding: 4px 6px; background: #24242c; }
+.provider-meta span { color: var(--dim); }
+.provider-meta strong { overflow-wrap: anywhere; color: var(--text); font-weight: 400; }
+.provider-block { margin: 6px 0; border: 1px solid var(--border-muted); }
+.provider-block summary { padding: 5px 7px; cursor: pointer; color: var(--muted); }
+.context-note { padding: 9px 10px; border: 1px solid #514a36; background: var(--message-compaction-bg); color: var(--muted); }
+.context-note strong { display: block; color: var(--warning); }
+.raw-json-disclosure { margin: 0 10px 10px; padding-top: 5px; border-top: 1px dashed #44444d; color: var(--dim); }
+.raw-json-disclosure > .json-block { margin-top: 4px; border: 1px solid var(--border-muted); }
+.unavailable { padding: 18px; color: var(--muted); }
+.unavailable strong { display: block; margin-bottom: 5px; color: var(--warning); }
+.event-list { display: grid; gap: 8px; }
+.stream-event { border: 1px solid var(--border-muted); background: var(--card-bg); }
+.stream-event-head { display: flex; gap: 10px; padding: 5px 8px; border-bottom: 1px solid #34343c; color: var(--muted); }
+.stream-event-type { color: var(--accent); }
+.stream-event pre { margin: 0; padding: 8px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
+.empty-state { max-width: 520px; margin: 18vh auto; text-align: center; color: var(--muted); }
+.empty-state h1 { color: var(--text); font-size: 18px; }
+.empty-glyph { color: var(--accent); font-size: 48px; }
+.image-modal { display: none; position: fixed; z-index: 100; inset: 0; place-items: center; padding: 40px; background: rgba(0,0,0,.86); }
+.image-modal.open { display: grid; }
+.image-modal img { max-width: 95vw; max-height: 90vh; }
+.modal-close { position: fixed; top: 16px; right: 18px; width: 36px; height: 36px; border: 1px solid var(--muted); background: var(--card-bg); font-size: 22px; }
+.toast { position: fixed; z-index: 110; right: 14px; bottom: 14px; max-width: 420px; padding: 8px 11px; border: 1px solid var(--border-muted); background: var(--card-bg); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .15s, transform .15s; }
+.toast.show { opacity: 1; transform: none; }
+
+@media (max-width: 850px) {
+  .brand { min-width: auto; }
+  .brand { font-size: 0; }
+  .brand-mark { display: block; }
+  .session-picker-label { display: none; }
+  #session-picker { min-width: 100px; max-width: 180px; }
+  .live-status { min-width: auto; font-size: 0; }
+  #sidebar { position: fixed; z-index: 25; left: 0; top: var(--topbar-height); transform: translateX(-100%); transition: transform .18s ease; }
+  #sidebar { width: min(var(--sidebar-width), calc(100vw - 28px)); min-width: min(var(--sidebar-width), calc(100vw - 28px)); }
+  body.sidebar-open #sidebar { transform: none; }
+  #sidebar-resizer { display: none; }
+  .sidebar-toggle { display: grid; position: fixed; z-index: 24; top: 50px; left: 8px; background: var(--card-bg); }
+  #sidebar-overlay { position: fixed; z-index: 20; inset: var(--topbar-height) 0 0; background: rgba(0,0,0,.55); }
+  body.sidebar-open #sidebar-overlay { display: block; }
+  #content { padding: 54px 14px 60px; }
+  .compare-grid { grid-template-columns: 1fr; }
+  .panel-heading { top: 112px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
+}