PyPI - bareagent-cli - Versions diffs - 0.1.0__py3-none-any.whl - Mend

bareagent-cli 0.1.0__py3-none-any.whl

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (121) hide show

bareagent/__init__.py +10 -0
bareagent/concurrency/__init__.py +6 -0
bareagent/concurrency/background.py +97 -0
bareagent/concurrency/notification.py +61 -0
bareagent/concurrency/scheduler.py +136 -0
bareagent/config.toml +299 -0
bareagent/core/__init__.py +1 -0
bareagent/core/config_paths.py +49 -0
bareagent/core/context.py +127 -0
bareagent/core/fileutil.py +103 -0
bareagent/core/goal.py +214 -0
bareagent/core/handlers/__init__.py +1 -0
bareagent/core/handlers/bash.py +79 -0
bareagent/core/handlers/file_edit.py +47 -0
bareagent/core/handlers/file_read.py +270 -0
bareagent/core/handlers/file_write.py +34 -0
bareagent/core/handlers/glob_search.py +30 -0
bareagent/core/handlers/goal.py +60 -0
bareagent/core/handlers/grep_search.py +52 -0
bareagent/core/handlers/memory.py +71 -0
bareagent/core/handlers/plan.py +106 -0
bareagent/core/handlers/search_utils.py +77 -0
bareagent/core/handlers/skill.py +87 -0
bareagent/core/handlers/subagent_send.py +70 -0
bareagent/core/handlers/web_fetch.py +126 -0
bareagent/core/handlers/web_search.py +165 -0
bareagent/core/handlers/workflow.py +190 -0
bareagent/core/loop.py +535 -0
bareagent/core/retry.py +131 -0
bareagent/core/sandbox.py +27 -0
bareagent/core/schema.py +21 -0
bareagent/core/tools.py +779 -0
bareagent/core/workflow.py +517 -0
bareagent/core/workflow_registry.py +219 -0
bareagent/debug/__init__.py +0 -0
bareagent/debug/interaction_log.py +263 -0
bareagent/debug/viewer.html +1750 -0
bareagent/debug/web_viewer.py +157 -0
bareagent/hooks/__init__.py +32 -0
bareagent/hooks/config.py +118 -0
bareagent/hooks/engine.py +197 -0
bareagent/hooks/errors.py +14 -0
bareagent/hooks/events.py +22 -0
bareagent/lsp/__init__.py +63 -0
bareagent/lsp/config.py +134 -0
bareagent/lsp/coord.py +118 -0
bareagent/lsp/diagnostics.py +240 -0
bareagent/lsp/errors.py +24 -0
bareagent/lsp/manager.py +866 -0
bareagent/lsp/tools.py +629 -0
bareagent/lsp/workspace_edit.py +305 -0
bareagent/main.py +4205 -0
bareagent/mcp/__init__.py +69 -0
bareagent/mcp/_sse.py +69 -0
bareagent/mcp/client.py +341 -0
bareagent/mcp/config.py +169 -0
bareagent/mcp/errors.py +32 -0
bareagent/mcp/manager.py +318 -0
bareagent/mcp/protocol.py +187 -0
bareagent/mcp/registry.py +557 -0
bareagent/mcp/transport/__init__.py +15 -0
bareagent/mcp/transport/base.py +149 -0
bareagent/mcp/transport/http_legacy.py +192 -0
bareagent/mcp/transport/http_streamable.py +217 -0
bareagent/mcp/transport/stdio.py +202 -0
bareagent/memory/__init__.py +1 -0
bareagent/memory/compact.py +203 -0
bareagent/memory/conversation_io.py +226 -0
bareagent/memory/embedding.py +194 -0
bareagent/memory/persistent.py +515 -0
bareagent/memory/token_counter.py +67 -0
bareagent/memory/token_tracker.py +262 -0
bareagent/memory/transcript.py +100 -0
bareagent/permission/__init__.py +1 -0
bareagent/permission/guard.py +329 -0
bareagent/permission/rules.py +19 -0
bareagent/planning/__init__.py +19 -0
bareagent/planning/agent_types.py +169 -0
bareagent/planning/skill_gen.py +141 -0
bareagent/planning/skill_store.py +173 -0
bareagent/planning/skills.py +146 -0
bareagent/planning/subagent.py +355 -0
bareagent/planning/subagent_registry.py +77 -0
bareagent/planning/tasks.py +348 -0
bareagent/planning/todo.py +153 -0
bareagent/planning/worktree.py +122 -0
bareagent/provider/__init__.py +1 -0
bareagent/provider/anthropic.py +348 -0
bareagent/provider/base.py +136 -0
bareagent/provider/factory.py +130 -0
bareagent/provider/openai.py +881 -0
bareagent/provider/presets.py +72 -0
bareagent/provider/setup.py +356 -0
bareagent/skills/.gitkeep +1 -0
bareagent/skills/code-review/SKILL.md +68 -0
bareagent/skills/git/SKILL.md +68 -0
bareagent/skills/test/SKILL.md +70 -0
bareagent/team/__init__.py +17 -0
bareagent/team/autonomous.py +193 -0
bareagent/team/mailbox.py +239 -0
bareagent/team/manager.py +155 -0
bareagent/team/protocols.py +129 -0
bareagent/tracing/__init__.py +12 -0
bareagent/tracing/_api.py +92 -0
bareagent/tracing/_proxy.py +60 -0
bareagent/tracing/composite.py +115 -0
bareagent/tracing/json_file.py +115 -0
bareagent/tracing/langfuse.py +139 -0
bareagent/tracing/otel.py +107 -0
bareagent/tracing/setup.py +85 -0
bareagent/ui/__init__.py +24 -0
bareagent/ui/console.py +167 -0
bareagent/ui/prompt.py +78 -0
bareagent/ui/protocol.py +24 -0
bareagent/ui/stream.py +66 -0
bareagent/ui/theme.py +240 -0
bareagent_cli-0.1.0.dist-info/METADATA +331 -0
bareagent_cli-0.1.0.dist-info/RECORD +121 -0
bareagent_cli-0.1.0.dist-info/WHEEL +4 -0
bareagent_cli-0.1.0.dist-info/entry_points.txt +2 -0
bareagent_cli-0.1.0.dist-info/licenses/LICENSE +21 -0

bareagent/debug/viewer.html ADDED Viewed

@@ -0,0 +1,1750 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>BareAgent Debug Viewer</title>
+    <style>
+      :root {
+        --bg: #1e1e2e;
+        --bg-elevated: #181825;
+        --bg-panel: rgba(30, 30, 46, 0.92);
+        --bg-soft: #313244;
+        --bg-code: #11111b;
+        --text: #cdd6f4;
+        --text-dim: #a6adc8;
+        --text-muted: #9399b2;
+        --accent: #89b4fa;
+        --accent-strong: #74c7ec;
+        --system: #cba6f7;
+        --user: #89b4fa;
+        --assistant: #a6e3a1;
+        --tool: #89dceb;
+        --warning: #f9e2af;
+        --shadow: 0 18px 45px rgba(17, 17, 27, 0.38);
+        --radius-lg: 22px;
+        --radius-md: 16px;
+        --radius-sm: 12px;
+        --border: rgba(205, 214, 244, 0.1);
+        --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
+        --font-body: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+        --font-mono: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        min-height: 100%;
+        margin: 0;
+        background:
+          radial-gradient(circle at top left, rgba(203, 166, 247, 0.18), transparent 28%),
+          radial-gradient(circle at top right, rgba(137, 220, 235, 0.12), transparent 24%),
+          linear-gradient(180deg, #181825 0%, #1e1e2e 55%, #11111b 100%);
+        color: var(--text);
+        font-family: var(--font-body);
+      }
+      body {
+        min-width: 800px;
+      }
+      .shell {
+        position: relative;
+        min-height: 100vh;
+        padding: 28px;
+        overflow: hidden;
+      }
+      .shell::before {
+        content: "";
+        position: absolute;
+        inset: 18px;
+        border: 1px solid rgba(205, 214, 244, 0.06);
+        border-radius: 28px;
+        pointer-events: none;
+      }
+      .header {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        align-items: end;
+        justify-content: space-between;
+        gap: 20px;
+        margin-bottom: 22px;
+      }
+      .header-copy h1 {
+        margin: 0;
+        font-family: var(--font-display);
+        font-size: clamp(2rem, 3vw, 3rem);
+        font-weight: 600;
+        letter-spacing: 0.02em;
+      }
+      .header-copy p {
+        max-width: 46rem;
+        margin: 8px 0 0;
+        color: var(--text-dim);
+        line-height: 1.6;
+      }
+      .header-actions {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex-wrap: wrap;
+        justify-content: end;
+      }
+      .locale-switch {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 6px;
+        border: 1px solid rgba(137, 180, 250, 0.18);
+        border-radius: 999px;
+        background: rgba(24, 24, 37, 0.78);
+        box-shadow: var(--shadow);
+        backdrop-filter: blur(12px);
+      }
+      .locale-button {
+        padding: 9px 12px;
+        border: 0;
+        border-radius: 999px;
+        background: transparent;
+        color: var(--text-muted);
+        font-family: var(--font-body);
+        font-size: 0.82rem;
+        font-weight: 600;
+        letter-spacing: 0.04em;
+        cursor: pointer;
+        transition: background 160ms ease, color 160ms ease, transform 160ms ease;
+      }
+      .locale-button:hover,
+      .locale-button:focus-visible {
+        background: rgba(49, 50, 68, 0.72);
+        color: var(--text);
+        transform: translateY(-1px);
+        outline: none;
+      }
+      .locale-button.active {
+        background: linear-gradient(180deg, rgba(137, 180, 250, 0.2), rgba(17, 17, 27, 0.82));
+        color: var(--accent-strong);
+      }
+      .status-pill {
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+        padding: 12px 16px;
+        border: 1px solid rgba(137, 180, 250, 0.24);
+        border-radius: 999px;
+        background: rgba(24, 24, 37, 0.82);
+        color: var(--text-dim);
+        box-shadow: var(--shadow);
+        backdrop-filter: blur(12px);
+      }
+      .status-dot {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: var(--warning);
+        box-shadow: 0 0 16px rgba(249, 226, 175, 0.45);
+      }
+      .layout {
+        position: relative;
+        z-index: 1;
+        display: grid;
+        grid-template-columns: 320px minmax(0, 1fr);
+        gap: 20px;
+        align-items: start;
+      }
+      .panel {
+        position: relative;
+        border: 1px solid var(--border);
+        border-radius: var(--radius-lg);
+        background: linear-gradient(180deg, rgba(49, 50, 68, 0.58), rgba(24, 24, 37, 0.92));
+        box-shadow: var(--shadow);
+        backdrop-filter: blur(14px);
+      }
+      .panel-header {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        gap: 12px;
+        padding: 22px 24px 16px;
+      }
+      .panel-header h2 {
+        margin: 0;
+        font-family: var(--font-display);
+        font-size: 1.45rem;
+        font-weight: 600;
+      }
+      .panel-header p,
+      .panel-header span {
+        margin: 0;
+        color: var(--text-muted);
+        font-size: 0.92rem;
+      }
+      .session-list {
+        display: grid;
+        gap: 12px;
+        padding: 0 16px 18px;
+      }
+      .session-button {
+        width: 100%;
+        padding: 16px 16px 15px;
+        border: 1px solid transparent;
+        border-radius: var(--radius-md);
+        background: rgba(17, 17, 27, 0.58);
+        color: var(--text);
+        text-align: left;
+        cursor: pointer;
+        transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
+      }
+      .session-button:hover,
+      .session-button:focus-visible {
+        border-color: rgba(137, 180, 250, 0.35);
+        background: rgba(49, 50, 68, 0.78);
+        transform: translateY(-1px);
+        outline: none;
+      }
+      .session-button.active {
+        border-color: rgba(137, 180, 250, 0.48);
+        background: linear-gradient(180deg, rgba(137, 180, 250, 0.18), rgba(30, 30, 46, 0.88));
+      }
+      .session-name {
+        display: block;
+        font-family: var(--font-mono);
+        font-size: 0.94rem;
+        word-break: break-word;
+      }
+      .session-meta {
+        display: flex;
+        justify-content: space-between;
+        gap: 12px;
+        margin-top: 10px;
+        color: var(--text-muted);
+        font-size: 0.82rem;
+      }
+      .timeline-shell {
+        padding-bottom: 18px;
+      }
+      .timeline-meta {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+      }
+      .meta-chip {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        padding: 7px 11px;
+        border-radius: 999px;
+        background: rgba(17, 17, 27, 0.56);
+        color: var(--text-muted);
+        font-size: 0.82rem;
+      }
+      .timeline {
+        display: grid;
+        gap: 14px;
+        padding: 0 18px;
+      }
+      .empty-state {
+        margin: 0 18px;
+        padding: 38px 22px;
+        border: 1px dashed rgba(205, 214, 244, 0.15);
+        border-radius: var(--radius-md);
+        background: rgba(17, 17, 27, 0.34);
+        color: var(--text-muted);
+        text-align: center;
+        line-height: 1.7;
+      }
+      .interaction-card {
+        border: 1px solid rgba(205, 214, 244, 0.08);
+        border-radius: var(--radius-lg);
+        background: linear-gradient(180deg, rgba(17, 17, 27, 0.88), rgba(30, 30, 46, 0.92));
+        box-shadow: 0 12px 28px rgba(17, 17, 27, 0.34);
+        overflow: hidden;
+      }
+      .card-toggle {
+        width: 100%;
+        padding: 20px 20px 18px;
+        border: 0;
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+        text-align: left;
+      }
+      .card-toggle:hover,
+      .card-toggle:focus-visible {
+        background: rgba(49, 50, 68, 0.22);
+        outline: none;
+      }
+      .card-header {
+        display: flex;
+        justify-content: space-between;
+        gap: 18px;
+      }
+      .card-title {
+        display: flex;
+        align-items: baseline;
+        gap: 12px;
+        flex-wrap: wrap;
+      }
+      .card-seq {
+        font-family: var(--font-display);
+        font-size: 1.25rem;
+        color: var(--accent-strong);
+      }
+      .card-time {
+        color: var(--text-muted);
+        font-family: var(--font-mono);
+        font-size: 0.84rem;
+      }
+      .card-summary {
+        display: grid;
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+        gap: 10px;
+        margin-top: 18px;
+      }
+      .summary-item {
+        padding: 12px 12px 11px;
+        border-radius: var(--radius-sm);
+        background: rgba(49, 50, 68, 0.34);
+      }
+      .summary-label {
+        display: block;
+        margin-bottom: 8px;
+        color: var(--text-muted);
+        font-size: 0.75rem;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+      .summary-value {
+        display: block;
+        font-family: var(--font-mono);
+        font-size: 0.95rem;
+      }
+      .card-detail {
+        display: none;
+        border-top: 1px solid rgba(205, 214, 244, 0.08);
+        background: rgba(17, 17, 27, 0.46);
+      }
+      .interaction-card.expanded .card-detail {
+        display: block;
+      }
+      .tab-strip {
+        display: flex;
+        gap: 10px;
+        flex-wrap: wrap;
+        padding: 18px 20px 0;
+      }
+      .tab-button {
+        padding: 10px 14px;
+        border: 1px solid rgba(205, 214, 244, 0.1);
+        border-radius: 999px;
+        background: rgba(30, 30, 46, 0.84);
+        color: var(--text-dim);
+        cursor: pointer;
+      }
+      .tab-button.active {
+        border-color: rgba(137, 180, 250, 0.34);
+        background: rgba(137, 180, 250, 0.16);
+        color: var(--text);
+      }
+      .tab-panel {
+        display: none;
+        padding: 20px;
+      }
+      .tab-panel.active {
+        display: block;
+      }
+      .detail-grid {
+        display: grid;
+        gap: 16px;
+      }
+      .detail-block {
+        padding: 16px;
+        border: 1px solid rgba(205, 214, 244, 0.08);
+        border-radius: var(--radius-md);
+        background: rgba(30, 30, 46, 0.72);
+      }
+      .detail-block h3,
+      .detail-block h4 {
+        margin: 0 0 12px;
+        font-size: 0.96rem;
+        letter-spacing: 0.03em;
+      }
+      .role-badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 5px 10px;
+        border-radius: 999px;
+        font-size: 0.74rem;
+        font-weight: 700;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+      }
+      .role-system {
+        color: var(--system);
+        background: rgba(203, 166, 247, 0.1);
+      }
+      .role-user {
+        color: var(--user);
+        background: rgba(137, 180, 250, 0.1);
+      }
+      .role-assistant {
+        color: var(--assistant);
+        background: rgba(166, 227, 161, 0.1);
+      }
+      .role-tool,
+      .role-tool_result {
+        color: var(--tool);
+        background: rgba(137, 220, 235, 0.12);
+      }
+      .message-list,
+      .tool-call-list {
+        display: grid;
+        gap: 14px;
+      }
+      .message-item,
+      .tool-call-item {
+        padding: 14px;
+        border-radius: var(--radius-md);
+        background: rgba(17, 17, 27, 0.56);
+        border: 1px solid rgba(205, 214, 244, 0.08);
+      }
+      .message-head,
+      .tool-call-head {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        margin-bottom: 12px;
+      }
+      .message-body {
+        color: var(--text-dim);
+        line-height: 1.65;
+      }
+      .message-body > *:first-child,
+      .detail-block > *:first-child {
+        margin-top: 0;
+      }
+      .message-body > *:last-child,
+      .detail-block > *:last-child {
+        margin-bottom: 0;
+      }
+      .message-body pre,
+      .json-block,
+      .code-block {
+        margin: 0;
+        padding: 14px 15px;
+        border-radius: var(--radius-sm);
+        background: var(--bg-code);
+        color: var(--text);
+        font-family: var(--font-mono);
+        font-size: 0.9rem;
+        line-height: 1.55;
+        white-space: pre-wrap;
+        word-break: break-word;
+        overflow-x: auto;
+      }
+      .thinking-block {
+        color: var(--text-muted);
+        font-style: italic;
+      }
+      .tools-box details {
+        border-radius: var(--radius-sm);
+        background: rgba(17, 17, 27, 0.56);
+        border: 1px solid rgba(205, 214, 244, 0.08);
+      }
+      .tools-box summary {
+        padding: 14px 16px;
+        cursor: pointer;
+        color: var(--text-dim);
+      }
+      .tools-box summary::marker {
+        color: var(--accent);
+      }
+      .tools-box .json-block {
+        border-top: 1px solid rgba(205, 214, 244, 0.08);
+        border-radius: 0 0 var(--radius-sm) var(--radius-sm);
+      }
+      .loading-note,
+      .error-note {
+        padding: 16px;
+        border-radius: var(--radius-md);
+        font-size: 0.92rem;
+      }
+      .loading-note {
+        background: rgba(137, 180, 250, 0.08);
+        color: var(--text-dim);
+      }
+      .error-note {
+        background: rgba(243, 139, 168, 0.1);
+        color: #f38ba8;
+      }
+      .footer-note {
+        padding: 16px 24px 22px;
+        color: var(--text-muted);
+        font-size: 0.85rem;
+      }
+      @media (max-width: 1080px) {
+        body {
+          min-width: 0;
+        }
+        .shell {
+          padding: 16px;
+        }
+        .layout {
+          grid-template-columns: 1fr;
+        }
+        .card-summary {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+      }
+      @media (max-width: 720px) {
+        .header {
+          align-items: start;
+          flex-direction: column;
+        }
+        .header-actions {
+          width: 100%;
+          justify-content: space-between;
+        }
+        .card-header {
+          flex-direction: column;
+        }
+        .card-summary {
+          grid-template-columns: 1fr;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="shell">
+      <header class="header">
+        <div class="header-copy">
+          <h1 id="page-title">BareAgent Debug Viewer</h1>
+          <p id="page-subtitle">
+            Inspect saved request and response payloads, expand a single interaction, and
+            watch new activity stream in over Server-Sent Events.
+          </p>
+        </div>
+        <div class="header-actions">
+          <div class="locale-switch" id="locale-switch" role="group" aria-label="Switch language">
+            <button class="locale-button active" id="locale-en" type="button" data-locale="en">EN</button>
+            <button class="locale-button" id="locale-zh" type="button" data-locale="zh">中文</button>
+          </div>
+          <div class="status-pill" id="connection-status">
+            <span class="status-dot" id="status-dot"></span>
+            <span id="status-text">Connecting to event stream...</span>
+          </div>
+        </div>
+      </header>
+      <main class="layout">
+        <aside class="panel">
+          <div class="panel-header">
+            <div>
+              <h2 id="sessions-title">Sessions</h2>
+              <p id="sessions-subtitle">Recorded debug timelines</p>
+            </div>
+            <span id="session-count">0 loaded</span>
+          </div>
+          <div class="session-list" id="session-list">
+            <div class="empty-state">Loading session index...</div>
+          </div>
+          <div class="footer-note" id="sessions-footer-note">
+            Session selection refreshes the interaction timeline on the right.
+          </div>
+        </aside>
+        <section class="panel timeline-shell">
+          <div class="panel-header">
+            <div>
+              <h2 id="timeline-title">Interactions</h2>
+              <p id="timeline-subtitle">Choose a session to inspect its timeline.</p>
+            </div>
+            <div class="timeline-meta">
+              <span class="meta-chip" id="timeline-session-chip">No session selected</span>
+              <span class="meta-chip" id="timeline-count-chip">0 interactions</span>
+            </div>
+          </div>
+          <div class="timeline" id="timeline">
+            <div class="empty-state">
+              The timeline will appear here after a session is selected.
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+    <template id="session-template">
+      <button class="session-button" type="button">
+        <span class="session-name"></span>
+        <span class="session-meta">
+          <span class="session-count"></span>
+          <span class="session-latest"></span>
+        </span>
+      </button>
+    </template>
+    <template id="interaction-template">
+      <article class="interaction-card">
+        <button class="card-toggle" type="button">
+          <div class="card-header">
+            <div class="card-title">
+              <span class="card-seq"></span>
+              <span class="card-time"></span>
+            </div>
+            <span class="meta-chip card-state"></span>
+          </div>
+          <div class="card-summary">
+            <div class="summary-item">
+              <span class="summary-label">Tokens</span>
+              <span class="summary-value summary-tokens"></span>
+            </div>
+            <div class="summary-item">
+              <span class="summary-label">Duration</span>
+              <span class="summary-value summary-duration"></span>
+            </div>
+            <div class="summary-item">
+              <span class="summary-label">Tool Calls</span>
+              <span class="summary-value summary-tool-calls"></span>
+            </div>
+            <div class="summary-item">
+              <span class="summary-label">Messages</span>
+              <span class="summary-value summary-messages"></span>
+            </div>
+          </div>
+        </button>
+        <div class="card-detail">
+          <div class="tab-strip">
+            <button class="tab-button active" type="button" data-tab="request">Request</button>
+            <button class="tab-button" type="button" data-tab="response">Response</button>
+            <button class="tab-button" type="button" data-tab="raw">Raw JSON</button>
+          </div>
+          <section class="tab-panel active" data-panel="request">
+            <div class="detail-grid request-panel"></div>
+          </section>
+          <section class="tab-panel" data-panel="response">
+            <div class="detail-grid response-panel"></div>
+          </section>
+          <section class="tab-panel" data-panel="raw">
+            <pre class="json-block raw-panel"></pre>
+          </section>
+        </div>
+      </article>
+    </template>
+    <script>
+      const LOCALE_STORAGE_KEY = "bareagent-debug-viewer-locale";
+      const translations = {
+        en: {
+          documentTitle: "BareAgent Debug Viewer",
+          pageTitle: "BareAgent Debug Viewer",
+          pageSubtitle:
+            "Inspect saved request and response payloads, expand a single interaction, and watch new activity stream in over Server-Sent Events.",
+          localeSwitcherLabel: "Switch language",
+          sessionsTitle: "Sessions",
+          sessionsSubtitle: "Recorded debug timelines",
+          sessionsFooterNote: "Session selection refreshes the interaction timeline on the right.",
+          sessionIndexLoading: "Loading session index...",
+          sessionsEmpty: "No debug sessions have been recorded yet.",
+          clickToLoad: "Click to load",
+          noCachedTimeline: "No cached timeline",
+          latestSeq: "Latest #{seq}",
+          timelineTitle: "Interactions",
+          timelineTitleForSession: "Interactions for {sessionId}",
+          timelineSubtitleIdle: "Choose a session to inspect its timeline.",
+          timelineSubtitleActive: "Click a card to expand request, response, and raw JSON payloads.",
+          timelineSubtitleLoadError: "This session timeline could not be loaded from the debug viewer API.",
+          timelineEmpty: "The timeline will appear here after a session is selected.",
+          noSessionSelected: "No session selected",
+          loadingInteractions: "Loading interactions...",
+          noInteractions: "No interactions found for this session.",
+          sessionLoadError: "Failed to load session timeline: {message}",
+          summaryTokens: "Tokens",
+          summaryDuration: "Duration",
+          summaryToolCalls: "Tool Calls",
+          summaryMessages: "Messages",
+          tabRequest: "Request",
+          tabResponse: "Response",
+          tabRaw: "Raw JSON",
+          statusConnecting: "Connecting to event stream...",
+          statusLive: "Live updates connected",
+          statusRetrying: "Event stream reconnecting...",
+          unknownTime: "Unknown time",
+          noContent: "No content",
+          noMessages: "No messages recorded.",
+          noToolSchemas: "No tool schemas were sent with this request.",
+          toolSchemas: "Tool Schemas ({count})",
+          noToolCalls: "No tool calls in this response.",
+          systemPrompt: "System Prompt",
+          noSystemPrompt: "No explicit system prompt found.",
+          messages: "Messages",
+          tools: "Tools",
+          requestUnavailable: "Request payload is not available.",
+          responseUnavailable: "Response has not been logged yet.",
+          responseText: "Text",
+          noAssistantText: "No assistant text in this response.",
+          responseThinking: "Thinking",
+          noThinking: "No thinking trace recorded.",
+          responseToolCalls: "Tool Calls",
+          responseMetrics: "Response Metrics",
+          inputTokens: "Input Tokens",
+          outputTokens: "Output Tokens",
+          responseError: "Error: {message}",
+          loadingRequestPayload: "Loading request payload...",
+          loadingResponsePayload: "Loading response payload...",
+          loadingRawJson: "Loading raw JSON...",
+          bootSessionsError: "Failed to load sessions from the debug viewer API.",
+          bootTimelineError: "The timeline could not be loaded.",
+          interactionLoadError: "Failed to load interaction: {message}",
+          stateError: "error",
+          statePending: "pending",
+          stateComplete: "complete",
+          roleSystem: "system",
+          roleUser: "user",
+          roleAssistant: "assistant",
+          roleTool: "tool",
+          roleUnknown: "unknown",
+        },
+        zh: {
+          documentTitle: "BareAgent 调试查看器",
+          pageTitle: "BareAgent 调试查看器",
+          pageSubtitle: "查看已保存的请求与响应载荷，展开单次交互详情，并通过 Server-Sent Events 观察实时更新。",
+          localeSwitcherLabel: "切换语言",
+          sessionsTitle: "会话",
+          sessionsSubtitle: "已记录的调试时间线",
+          sessionsFooterNote: "切换左侧会话后，右侧时间线会同步刷新。",
+          sessionIndexLoading: "正在加载会话索引...",
+          sessionsEmpty: "当前还没有记录任何调试会话。",
+          clickToLoad: "点击加载",
+          noCachedTimeline: "暂无缓存时间线",
+          latestSeq: "最新 #{seq}",
+          timelineTitle: "交互",
+          timelineTitleForSession: "{sessionId} 的交互",
+          timelineSubtitleIdle: "选择一个会话以查看它的时间线。",
+          timelineSubtitleActive: "点击卡片可展开查看请求、响应和原始 JSON 载荷。",
+          timelineSubtitleLoadError: "无法从调试查看器 API 加载该会话的时间线。",
+          timelineEmpty: "选择会话后即可在这里查看时间线。",
+          noSessionSelected: "尚未选择会话",
+          loadingInteractions: "正在加载交互...",
+          noInteractions: "该会话下没有交互记录。",
+          sessionLoadError: "加载会话时间线失败：{message}",
+          summaryTokens: "Token",
+          summaryDuration: "耗时",
+          summaryToolCalls: "工具调用",
+          summaryMessages: "消息",
+          tabRequest: "请求",
+          tabResponse: "响应",
+          tabRaw: "原始 JSON",
+          statusConnecting: "正在连接事件流...",
+          statusLive: "实时更新已连接",
+          statusRetrying: "事件流正在重连...",
+          unknownTime: "未知时间",
+          noContent: "没有内容",
+          noMessages: "没有记录任何消息。",
+          noToolSchemas: "这次请求没有携带任何工具 Schema。",
+          toolSchemas: "工具 Schema（{count}）",
+          noToolCalls: "这次响应没有工具调用。",
+          systemPrompt: "系统提示词",
+          noSystemPrompt: "未找到显式系统提示词。",
+          messages: "消息",
+          tools: "工具",
+          requestUnavailable: "请求载荷不可用。",
+          responseUnavailable: "响应尚未记录。",
+          responseText: "文本",
+          noAssistantText: "这次响应没有助手文本。",
+          responseThinking: "思考",
+          noThinking: "没有记录思考轨迹。",
+          responseToolCalls: "工具调用",
+          responseMetrics: "响应指标",
+          inputTokens: "输入 Token",
+          outputTokens: "输出 Token",
+          responseError: "错误：{message}",
+          loadingRequestPayload: "正在加载请求载荷...",
+          loadingResponsePayload: "正在加载响应载荷...",
+          loadingRawJson: "正在加载原始 JSON...",
+          bootSessionsError: "无法从调试查看器 API 加载会话。",
+          bootTimelineError: "时间线加载失败。",
+          interactionLoadError: "加载交互失败：{message}",
+          stateError: "错误",
+          statePending: "等待中",
+          stateComplete: "完成",
+          roleSystem: "系统",
+          roleUser: "用户",
+          roleAssistant: "助手",
+          roleTool: "工具",
+          roleUnknown: "未知",
+        },
+      };
+      function normalizeLocale(locale) {
+        if (typeof locale !== "string") {
+          return null;
+        }
+        const normalized = locale.toLowerCase();
+        if (normalized.startsWith("zh")) {
+          return "zh";
+        }
+        if (normalized.startsWith("en")) {
+          return "en";
+        }
+        return null;
+      }
+      function resolveInitialLocale() {
+        try {
+          const stored = localStorage.getItem(LOCALE_STORAGE_KEY);
+          if (stored) {
+            const resolved = normalizeLocale(stored);
+            if (resolved) {
+              return resolved;
+            }
+          }
+        } catch (_error) {
+          // Ignore localStorage access failures and fall back to browser preferences.
+        }
+        const browserLocales = Array.isArray(navigator.languages) && navigator.languages.length > 0
+          ? navigator.languages
+          : [navigator.language];
+        for (const locale of browserLocales) {
+          const resolved = normalizeLocale(locale);
+          if (resolved) {
+            return resolved;
+          }
+        }
+        return "en";
+      }
+      const state = {
+        locale: resolveInitialLocale(),
+        sessions: [],
+        activeSessionId: null,
+        interactionsBySession: new Map(),
+        detailCache: new Map(),
+        expandedKey: null,
+        activeTabs: new Map(),
+        loadingSession: false,
+        sessionsRequestId: 0,
+        sessionRequestIds: new Map(),
+        sessionErrors: new Map(),
+        detailRequestIds: new Map(),
+        connectionStatusKind: "connecting",
+        bootError: false,
+        booting: true,
+      };
+      const elements = {
+        pageTitle: document.getElementById("page-title"),
+        pageSubtitle: document.getElementById("page-subtitle"),
+        sessionsTitle: document.getElementById("sessions-title"),
+        sessionsSubtitle: document.getElementById("sessions-subtitle"),
+        sessionsFooterNote: document.getElementById("sessions-footer-note"),
+        sessionList: document.getElementById("session-list"),
+        sessionCount: document.getElementById("session-count"),
+        timeline: document.getElementById("timeline"),
+        timelineTitle: document.getElementById("timeline-title"),
+        timelineSubtitle: document.getElementById("timeline-subtitle"),
+        timelineSessionChip: document.getElementById("timeline-session-chip"),
+        timelineCountChip: document.getElementById("timeline-count-chip"),
+        localeSwitch: document.getElementById("locale-switch"),
+        localeButtons: Array.from(document.querySelectorAll(".locale-button")),
+        statusText: document.getElementById("status-text"),
+        statusDot: document.getElementById("status-dot"),
+        sessionTemplate: document.getElementById("session-template"),
+        interactionTemplate: document.getElementById("interaction-template"),
+      };
+      function t(key, params = {}) {
+        const active = translations[state.locale] || translations.en;
+        const fallback = translations.en;
+        const template = active[key] || fallback[key] || key;
+        return template.replace(/\{(\w+)\}/g, (_match, name) => String(params[name] ?? ""));
+      }
+      function currentLanguageTag() {
+        return state.locale === "zh" ? "zh-CN" : "en";
+      }
+      function persistLocale(locale) {
+        try {
+          localStorage.setItem(LOCALE_STORAGE_KEY, locale);
+        } catch (_error) {
+          // Ignore localStorage access failures.
+        }
+      }
+      function formatLoadedCount(count) {
+        return state.locale === "zh" ? `已加载 ${count} 个` : `${count} loaded`;
+      }
+      function formatInteractionCount(count) {
+        return state.locale === "zh"
+          ? `${count} 次交互`
+          : `${count} interaction${count === 1 ? "" : "s"}`;
+      }
+      function formatLatestSeq(seq) {
+        return t("latestSeq", { seq });
+      }
+      function formatMessageToolSummary(messageCount, toolCount) {
+        return state.locale === "zh"
+          ? `${messageCount} 条消息 / ${toolCount} 个工具`
+          : `${messageCount} msg / ${toolCount} tools`;
+      }
+      function formatRoleLabel(role) {
+        const normalized = String(role || "unknown").toLowerCase();
+        const key = `role${normalized.charAt(0).toUpperCase()}${normalized.slice(1)}`;
+        return translations[state.locale][key] || translations.en[key] || translations[state.locale].roleUnknown;
+      }
+      function formatMessageOrdinal(index) {
+        return state.locale === "zh" ? `消息 ${index}` : `Message ${index}`;
+      }
+      function formatToolCallLabel(toolName, index) {
+        return state.locale === "zh"
+          ? `${toolName}（#${index}）`
+          : `${toolName} (#${index})`;
+      }
+      function applyLocale() {
+        document.documentElement.lang = currentLanguageTag();
+        document.title = t("documentTitle");
+        elements.pageTitle.textContent = t("pageTitle");
+        elements.pageSubtitle.textContent = t("pageSubtitle");
+        elements.sessionsTitle.textContent = t("sessionsTitle");
+        elements.sessionsSubtitle.textContent = t("sessionsSubtitle");
+        elements.sessionsFooterNote.textContent = t("sessionsFooterNote");
+        elements.localeSwitch.setAttribute("aria-label", t("localeSwitcherLabel"));
+        elements.localeButtons.forEach((button) => {
+          button.classList.toggle("active", button.dataset.locale === state.locale);
+        });
+        setConnectionStatus(state.connectionStatusKind);
+        renderSessions();
+        renderTimeline();
+      }
+      function setLocale(locale) {
+        const normalized = normalizeLocale(locale) || "en";
+        if (normalized === state.locale) {
+          return;
+        }
+        state.locale = normalized;
+        persistLocale(normalized);
+        applyLocale();
+      }
+      function detailKey(sessionId, seq) {
+        return `${sessionId}:${seq}`;
+      }
+      async function fetchJson(path) {
+        const response = await fetch(path, {
+          headers: { Accept: "application/json" },
+        });
+        if (!response.ok) {
+          throw new Error(`${response.status} ${response.statusText}`);
+        }
+        return response.json();
+      }
+      function formatTimestamp(value) {
+        if (typeof value === "number" && Number.isFinite(value)) {
+          return new Date(value * 1000).toLocaleString(currentLanguageTag());
+        }
+        if (typeof value === "string" && value.trim()) {
+          const parsed = Date.parse(value);
+          if (!Number.isNaN(parsed)) {
+            return new Date(parsed).toLocaleString(currentLanguageTag());
+          }
+          return value;
+        }
+        return t("unknownTime");
+      }
+      function formatDuration(value) {
+        const numeric = Number(value);
+        if (!Number.isFinite(numeric) || numeric < 0) {
+          return "--";
+        }
+        if (numeric >= 1000) {
+          return state.locale === "zh"
+            ? `${(numeric / 1000).toFixed(2)} 秒`
+            : `${(numeric / 1000).toFixed(2)} s`;
+        }
+        return state.locale === "zh"
+          ? `${numeric.toFixed(2)} 毫秒`
+          : `${numeric.toFixed(2)} ms`;
+      }
+      function formatTokens(inputTokens, outputTokens) {
+        const input = Number(inputTokens);
+        const output = Number(outputTokens);
+        if (!Number.isFinite(input) && !Number.isFinite(output)) {
+          return "--";
+        }
+        return state.locale === "zh"
+          ? `${Number.isFinite(input) ? input : 0} 输入 / ${Number.isFinite(output) ? output : 0} 输出`
+          : `${Number.isFinite(input) ? input : 0} in / ${Number.isFinite(output) ? output : 0} out`;
+      }
+      function normalizeSummary(entry) {
+        return {
+          seq: Number(entry?.seq ?? 0),
+          timestamp: entry?.timestamp ?? null,
+          message_count: Number(entry?.message_count ?? 0),
+          tool_count: Number(entry?.tool_count ?? 0),
+          input_tokens: Number(entry?.input_tokens ?? 0),
+          output_tokens: Number(entry?.output_tokens ?? 0),
+          duration_ms: Number(entry?.duration_ms ?? 0),
+          tool_call_count: Number(entry?.tool_call_count ?? 0),
+          has_error: Boolean(entry?.has_error),
+          has_response: Object.prototype.hasOwnProperty.call(entry || {}, "input_tokens"),
+        };
+      }
+      function getSessionSummaries(sessionId) {
+        return state.interactionsBySession.get(sessionId) || [];
+      }
+      function getSessionMeta(sessionId) {
+        const summaries = getSessionSummaries(sessionId);
+        if (summaries.length === 0) {
+          return {
+            countText: t("clickToLoad"),
+            latestText: t("noCachedTimeline"),
+          };
+        }
+        const latest = summaries[summaries.length - 1];
+        return {
+          countText: formatInteractionCount(summaries.length),
+          latestText: formatLatestSeq(latest.seq),
+        };
+      }
+      function setConnectionStatus(kind) {
+        state.connectionStatusKind = kind;
+        const labels = {
+          connecting: t("statusConnecting"),
+          live: t("statusLive"),
+          retrying: t("statusRetrying"),
+        };
+        elements.statusText.textContent = labels[kind] || labels.connecting;
+        const colors = {
+          connecting: "#f9e2af",
+          live: "#a6e3a1",
+          retrying: "#f38ba8",
+        };
+        const color = colors[kind] || colors.connecting;
+        elements.statusDot.style.background = color;
+        elements.statusDot.style.boxShadow = `0 0 16px ${color}55`;
+      }
+      function clearElement(node) {
+        while (node.firstChild) {
+          node.removeChild(node.firstChild);
+        }
+      }
+      function createTextBlock(text, className = "code-block") {
+        const pre = document.createElement("pre");
+        pre.className = className;
+        pre.textContent = String(text ?? "");
+        return pre;
+      }
+      function createJsonBlock(value) {
+        return createTextBlock(JSON.stringify(value, null, 2), "json-block");
+      }
+      function createNote(text, className) {
+        const div = document.createElement("div");
+        div.className = className;
+        div.textContent = text;
+        return div;
+      }
+      function createDetailBlock(title, bodyNode) {
+        const section = document.createElement("section");
+        section.className = "detail-block";
+        const heading = document.createElement("h3");
+        heading.textContent = title;
+        section.appendChild(heading);
+        section.appendChild(bodyNode);
+        return section;
+      }
+      function createRoleBadge(role) {
+        const badge = document.createElement("span");
+        const normalized = String(role || "unknown").replace(/[^a-z0-9_]+/gi, "_");
+        badge.className = `role-badge role-${normalized}`;
+        badge.textContent = formatRoleLabel(role);
+        return badge;
+      }
+      function appendContentValue(container, value) {
+        if (value === null || value === undefined || value === "") {
+          container.appendChild(createNote(t("noContent"), "loading-note"));
+          return;
+        }
+        if (typeof value === "string") {
+          container.appendChild(createTextBlock(value));
+          return;
+        }
+        if (Array.isArray(value)) {
+          if (value.length === 0) {
+            container.appendChild(createNote(t("noContent"), "loading-note"));
+            return;
+          }
+          value.forEach((item) => {
+            if (item && typeof item === "object" && item.type === "text") {
+              container.appendChild(createTextBlock(item.text || ""));
+              return;
+            }
+            container.appendChild(createJsonBlock(item));
+          });
+          return;
+        }
+        container.appendChild(createJsonBlock(value));
+      }
+      function flattenContentToText(content) {
+        if (content === null || content === undefined) {
+          return "";
+        }
+        if (typeof content === "string") {
+          return content;
+        }
+        if (Array.isArray(content)) {
+          return content
+            .map((item) => {
+              if (item && typeof item === "object" && item.type === "text") {
+                return String(item.text || "");
+              }
+              return JSON.stringify(item, null, 2);
+            })
+            .filter(Boolean)
+            .join("\n\n");
+        }
+        return JSON.stringify(content, null, 2);
+      }
+      function collectSystemPrompt(messages) {
+        const systemTexts = (Array.isArray(messages) ? messages : [])
+          .filter((message) => message && message.role === "system")
+          .map((message) => flattenContentToText(message.content))
+          .filter(Boolean);
+        return systemTexts.join("\n\n");
+      }
+      function renderMessages(messages) {
+        const list = document.createElement("div");
+        list.className = "message-list";
+        if (!Array.isArray(messages) || messages.length === 0) {
+          list.appendChild(createNote(t("noMessages"), "loading-note"));
+          return list;
+        }
+        messages.forEach((message, index) => {
+          const item = document.createElement("article");
+          item.className = "message-item";
+          const head = document.createElement("div");
+          head.className = "message-head";
+          head.appendChild(createRoleBadge(message?.role || "unknown"));
+          const ordinal = document.createElement("span");
+          ordinal.className = "card-time";
+          ordinal.textContent = formatMessageOrdinal(index + 1);
+          head.appendChild(ordinal);
+          const body = document.createElement("div");
+          body.className = "message-body";
+          appendContentValue(body, message?.content);
+          item.appendChild(head);
+          item.appendChild(body);
+          list.appendChild(item);
+        });
+        return list;
+      }
+      function renderTools(tools) {
+        const wrapper = document.createElement("div");
+        wrapper.className = "tools-box";
+        if (!Array.isArray(tools) || tools.length === 0) {
+          wrapper.appendChild(createNote(t("noToolSchemas"), "loading-note"));
+          return wrapper;
+        }
+        const details = document.createElement("details");
+        const summary = document.createElement("summary");
+        summary.textContent = t("toolSchemas", { count: tools.length });
+        details.appendChild(summary);
+        details.appendChild(createJsonBlock(tools));
+        wrapper.appendChild(details);
+        return wrapper;
+      }
+      function renderToolCalls(toolCalls) {
+        const list = document.createElement("div");
+        list.className = "tool-call-list";
+        if (!Array.isArray(toolCalls) || toolCalls.length === 0) {
+          list.appendChild(createNote(t("noToolCalls"), "loading-note"));
+          return list;
+        }
+        toolCalls.forEach((toolCall, index) => {
+          const item = document.createElement("article");
+          item.className = "tool-call-item";
+          const head = document.createElement("div");
+          head.className = "tool-call-head";
+          head.appendChild(createRoleBadge("tool"));
+          const label = document.createElement("span");
+          label.className = "card-time";
+          const toolName = toolCall?.name || `tool_${index + 1}`;
+          label.textContent = formatToolCallLabel(toolName, index + 1);
+          head.appendChild(label);
+          item.appendChild(head);
+          item.appendChild(createJsonBlock(toolCall));
+          list.appendChild(item);
+        });
+        return list;
+      }
+      function renderRequestPanel(panel, interaction) {
+        clearElement(panel);
+        const request = interaction?.request;
+        if (!request) {
+          panel.appendChild(createNote(t("requestUnavailable"), "error-note"));
+          return;
+        }
+        const systemPrompt = collectSystemPrompt(request.messages);
+        panel.appendChild(
+          createDetailBlock(
+            t("systemPrompt"),
+            systemPrompt ? createTextBlock(systemPrompt) : createNote(t("noSystemPrompt"), "loading-note")
+          )
+        );
+        panel.appendChild(createDetailBlock(t("messages"), renderMessages(request.messages)));
+        panel.appendChild(createDetailBlock(t("tools"), renderTools(request.tools)));
+      }
+      function renderResponsePanel(panel, interaction, summary) {
+        clearElement(panel);
+        const response = interaction?.response;
+        if (interaction?.viewer_error_message) {
+          panel.appendChild(
+            createNote(
+              t("interactionLoadError", { message: interaction.viewer_error_message }),
+              "error-note"
+            )
+          );
+          return;
+        }
+        if (!response) {
+          panel.appendChild(createNote(t("responseUnavailable"), "loading-note"));
+          return;
+        }
+        panel.appendChild(
+          createDetailBlock(
+            t("responseText"),
+            response.text ? createTextBlock(response.text) : createNote(t("noAssistantText"), "loading-note")
+          )
+        );
+        panel.appendChild(
+          createDetailBlock(
+            t("responseThinking"),
+            response.thinking
+              ? createTextBlock(response.thinking, "code-block thinking-block")
+              : createNote(t("noThinking"), "loading-note")
+          )
+        );
+        panel.appendChild(createDetailBlock(t("responseToolCalls"), renderToolCalls(response.tool_calls)));
+        const stats = document.createElement("div");
+        stats.className = "message-list";
+        const metrics = [
+          [t("inputTokens"), summary.input_tokens],
+          [t("outputTokens"), summary.output_tokens],
+          [t("summaryDuration"), formatDuration(summary.duration_ms)],
+        ];
+        metrics.forEach(([label, value]) => {
+          const row = document.createElement("article");
+          row.className = "message-item";
+          const head = document.createElement("div");
+          head.className = "message-head";
+          const heading = document.createElement("strong");
+          heading.textContent = label;
+          head.appendChild(heading);
+          row.appendChild(head);
+          row.appendChild(createTextBlock(String(value)));
+          stats.appendChild(row);
+        });
+        panel.appendChild(createDetailBlock(t("responseMetrics"), stats));
+        if (response.error) {
+          panel.appendChild(createNote(t("responseError", { message: response.error }), "error-note"));
+        }
+      }
+      function renderRawPanel(panel, interaction) {
+        panel.textContent = JSON.stringify(interaction, null, 2);
+      }
+      function setActiveTab(key, tabName) {
+        state.activeTabs.set(key, tabName);
+        renderTimeline();
+      }
+      function getCardState(summary) {
+        if (summary.has_error) {
+          return t("stateError");
+        }
+        if (!summary.has_response) {
+          return t("statePending");
+        }
+        return t("stateComplete");
+      }
+      function updateTimelineHeader() {
+        if (!state.activeSessionId) {
+          elements.timelineTitle.textContent = t("timelineTitle");
+          elements.timelineSubtitle.textContent = t("timelineSubtitleIdle");
+          elements.timelineSessionChip.textContent = t("noSessionSelected");
+          elements.timelineCountChip.textContent = formatInteractionCount(0);
+          return;
+        }
+        const summaries = getSessionSummaries(state.activeSessionId);
+        const sessionError = state.sessionErrors.get(state.activeSessionId);
+        elements.timelineTitle.textContent = t("timelineTitleForSession", { sessionId: state.activeSessionId });
+        elements.timelineSubtitle.textContent = sessionError
+          ? t("timelineSubtitleLoadError")
+          : t("timelineSubtitleActive");
+        elements.timelineSessionChip.textContent = state.activeSessionId;
+        elements.timelineCountChip.textContent = formatInteractionCount(summaries.length);
+      }
+      function renderSessions() {
+        clearElement(elements.sessionList);
+        elements.sessionCount.textContent = formatLoadedCount(state.sessions.length);
+        if (state.bootError && state.sessions.length === 0) {
+          elements.sessionList.appendChild(createNote(t("bootSessionsError"), "error-note"));
+          return;
+        }
+        if (state.booting && state.sessions.length === 0) {
+          elements.sessionList.appendChild(createNote(t("sessionIndexLoading"), "empty-state"));
+          return;
+        }
+        if (state.sessions.length === 0) {
+          elements.sessionList.appendChild(createNote(t("sessionsEmpty"), "empty-state"));
+          return;
+        }
+        state.sessions.forEach((sessionId) => {
+          const fragment = elements.sessionTemplate.content.cloneNode(true);
+          const button = fragment.querySelector(".session-button");
+          const name = fragment.querySelector(".session-name");
+          const count = fragment.querySelector(".session-count");
+          const latest = fragment.querySelector(".session-latest");
+          const meta = getSessionMeta(sessionId);
+          name.textContent = sessionId;
+          count.textContent = meta.countText;
+          latest.textContent = meta.latestText;
+          if (sessionId === state.activeSessionId) {
+            button.classList.add("active");
+          }
+          button.addEventListener("click", async () => {
+            if (state.activeSessionId === sessionId) {
+              return;
+            }
+            state.activeSessionId = sessionId;
+            state.expandedKey = null;
+            renderSessions();
+            renderTimeline();
+            await loadSession(sessionId);
+          });
+          elements.sessionList.appendChild(fragment);
+        });
+      }
+      function renderTimeline() {
+        updateTimelineHeader();
+        clearElement(elements.timeline);
+        if (state.bootError && !state.activeSessionId) {
+          elements.timeline.appendChild(createNote(t("bootTimelineError"), "error-note"));
+          return;
+        }
+        if (!state.activeSessionId) {
+          elements.timeline.appendChild(createNote(t("timelineEmpty"), "empty-state"));
+          return;
+        }
+        const summaries = getSessionSummaries(state.activeSessionId);
+        const sessionError = state.sessionErrors.get(state.activeSessionId);
+        if (state.loadingSession && summaries.length === 0) {
+          elements.timeline.appendChild(createNote(t("loadingInteractions"), "empty-state"));
+          return;
+        }
+        if (sessionError) {
+          elements.timeline.appendChild(
+            createNote(t("sessionLoadError", { message: sessionError }), "error-note")
+          );
+          return;
+        }
+        if (summaries.length === 0) {
+          elements.timeline.appendChild(createNote(t("noInteractions"), "empty-state"));
+          return;
+        }
+        summaries.forEach((summary) => {
+          const fragment = elements.interactionTemplate.content.cloneNode(true);
+          const card = fragment.querySelector(".interaction-card");
+          const toggle = fragment.querySelector(".card-toggle");
+          const stateChip = fragment.querySelector(".card-state");
+          const seqText = `#${summary.seq}`;
+          const key = detailKey(state.activeSessionId, summary.seq);
+          fragment.querySelector(".card-seq").textContent = seqText;
+          fragment.querySelector(".card-time").textContent = formatTimestamp(summary.timestamp);
+          fragment.querySelector(".summary-tokens").textContent = formatTokens(summary.input_tokens, summary.output_tokens);
+          fragment.querySelector(".summary-duration").textContent = formatDuration(summary.duration_ms);
+          fragment.querySelector(".summary-tool-calls").textContent = String(summary.tool_call_count);
+          fragment.querySelector(".summary-messages").textContent = formatMessageToolSummary(
+            summary.message_count,
+            summary.tool_count
+          );
+          fragment.querySelectorAll(".summary-label")[0].textContent = t("summaryTokens");
+          fragment.querySelectorAll(".summary-label")[1].textContent = t("summaryDuration");
+          fragment.querySelectorAll(".summary-label")[2].textContent = t("summaryToolCalls");
+          fragment.querySelectorAll(".summary-label")[3].textContent = t("summaryMessages");
+          fragment.querySelector('[data-tab="request"]').textContent = t("tabRequest");
+          fragment.querySelector('[data-tab="response"]').textContent = t("tabResponse");
+          fragment.querySelector('[data-tab="raw"]').textContent = t("tabRaw");
+          stateChip.textContent = getCardState(summary);
+          if (key === state.expandedKey) {
+            card.classList.add("expanded");
+          }
+          toggle.addEventListener("click", async () => {
+            if (state.expandedKey === key) {
+              state.expandedKey = null;
+              renderTimeline();
+              return;
+            }
+            state.expandedKey = key;
+            if (!state.activeTabs.has(key)) {
+              state.activeTabs.set(key, "request");
+            }
+            renderTimeline();
+            await loadInteractionDetail(state.activeSessionId, summary.seq);
+          });
+          const tabButtons = fragment.querySelectorAll(".tab-button");
+          const tabPanels = fragment.querySelectorAll(".tab-panel");
+          const activeTab = state.activeTabs.get(key) || "request";
+          tabButtons.forEach((button) => {
+            const isActive = button.dataset.tab === activeTab;
+            button.classList.toggle("active", isActive);
+            button.addEventListener("click", () => setActiveTab(key, button.dataset.tab));
+          });
+          tabPanels.forEach((panel) => {
+            panel.classList.toggle("active", panel.dataset.panel === activeTab);
+          });
+          if (key === state.expandedKey) {
+            const requestPanel = fragment.querySelector(".request-panel");
+            const responsePanel = fragment.querySelector(".response-panel");
+            const rawPanel = fragment.querySelector(".raw-panel");
+            const interaction = state.detailCache.get(key);
+            if (!interaction) {
+              requestPanel.appendChild(createNote(t("loadingRequestPayload"), "loading-note"));
+              responsePanel.appendChild(createNote(t("loadingResponsePayload"), "loading-note"));
+              rawPanel.textContent = t("loadingRawJson");
+            } else {
+              renderRequestPanel(requestPanel, interaction);
+              renderResponsePanel(responsePanel, interaction, summary);
+              renderRawPanel(rawPanel, interaction);
+            }
+          }
+          elements.timeline.appendChild(fragment);
+        });
+      }
+      async function refreshSessions() {
+        const requestId = ++state.sessionsRequestId;
+        const sessions = await fetchJson("/api/sessions");
+        if (requestId !== state.sessionsRequestId) {
+          return;
+        }
+        state.bootError = false;
+        state.sessions = Array.isArray(sessions) ? sessions : [];
+        if (!state.activeSessionId || !state.sessions.includes(state.activeSessionId)) {
+          state.activeSessionId = state.sessions[state.sessions.length - 1] || null;
+          state.expandedKey = null;
+        }
+        renderSessions();
+      }
+      async function loadSession(sessionId) {
+        state.loadingSession = state.activeSessionId === sessionId;
+        renderTimeline();
+        const requestId = (state.sessionRequestIds.get(sessionId) || 0) + 1;
+        state.sessionRequestIds.set(sessionId, requestId);
+        try {
+          const summaries = await fetchJson(`/api/sessions/${encodeURIComponent(sessionId)}`);
+          if (state.sessionRequestIds.get(sessionId) !== requestId) {
+            return;
+          }
+          const normalized = Array.isArray(summaries) ? summaries.map(normalizeSummary) : [];
+          state.interactionsBySession.set(sessionId, normalized);
+          state.sessionErrors.delete(sessionId);
+          if (state.expandedKey) {
+            const [expandedSessionId, expandedSeqText] = state.expandedKey.split(":");
+            if (expandedSessionId === sessionId) {
+              const expandedSeq = Number(expandedSeqText);
+              const stillExists = normalized.some((item) => item.seq === expandedSeq);
+              if (!stillExists) {
+                state.expandedKey = null;
+              }
+            }
+          }
+        } catch (error) {
+          if (state.sessionRequestIds.get(sessionId) !== requestId) {
+            return;
+          }
+          state.sessionErrors.set(
+            sessionId,
+            error instanceof Error ? error.message : "Unknown session load error"
+          );
+        } finally {
+          if (state.activeSessionId === sessionId) {
+            state.loadingSession = false;
+          }
+          renderSessions();
+          renderTimeline();
+        }
+      }
+      async function loadInteractionDetail(sessionId, seq) {
+        const key = detailKey(sessionId, seq);
+        const requestId = (state.detailRequestIds.get(key) || 0) + 1;
+        state.detailRequestIds.set(key, requestId);
+        try {
+          const detail = await fetchJson(`/api/interactions/${encodeURIComponent(sessionId)}/${seq}`);
+          if (state.detailRequestIds.get(key) !== requestId) {
+            return;
+          }
+          state.detailCache.set(key, detail);
+        } catch (error) {
+          state.detailCache.set(key, {
+            request: null,
+            response: null,
+            viewer_error_message: error instanceof Error ? error.message : "",
+          });
+        }
+        if (state.expandedKey === key) {
+          renderTimeline();
+        }
+      }
+      async function handleIncomingEvent(payload) {
+        const sessionId = payload && payload.session_id ? String(payload.session_id) : "";
+        const seq = Number(payload?.seq);
+        try {
+          await refreshSessions();
+          if (sessionId && (!state.activeSessionId || state.activeSessionId === sessionId)) {
+            if (!state.activeSessionId) {
+              state.activeSessionId = sessionId;
+            }
+            await loadSession(sessionId);
+            if (state.expandedKey === detailKey(sessionId, seq)) {
+              await loadInteractionDetail(sessionId, seq);
+            }
+          }
+        } catch (error) {
+          console.error("Failed to refresh after SSE event", error);
+        }
+      }
+      function connectEvents() {
+        setConnectionStatus("connecting");
+        const source = new EventSource("/api/events");
+        source.onopen = () => {
+          setConnectionStatus("live");
+        };
+        source.onmessage = async (event) => {
+          try {
+            const payload = JSON.parse(event.data);
+            await handleIncomingEvent(payload);
+          } catch (error) {
+            console.error("Failed to process SSE event", error);
+          }
+        };
+        source.onerror = () => {
+          setConnectionStatus("retrying");
+        };
+      }
+      async function boot() {
+        applyLocale();
+        try {
+          await refreshSessions();
+          if (state.activeSessionId) {
+            await loadSession(state.activeSessionId);
+          }
+        } catch (error) {
+          console.error(error);
+          state.bootError = true;
+        } finally {
+          state.booting = false;
+        }
+        applyLocale();
+        connectEvents();
+      }
+      elements.localeButtons.forEach((button) => {
+        button.addEventListener("click", () => setLocale(button.dataset.locale || "en"));
+      });
+      boot();
+    </script>
+  </body>
+</html>