npm - @agentstep/agent-sdk - Versions diffs - 0.1.0 - Mend

@agentstep/agent-sdk 0.1.0

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 (105) hide show

package/package.json +45 -0
package/src/auth/middleware.ts +38 -0
package/src/backends/claude/args.ts +88 -0
package/src/backends/claude/index.ts +193 -0
package/src/backends/claude/permission-hook.ts +152 -0
package/src/backends/claude/tool-bridge.ts +211 -0
package/src/backends/claude/translator.ts +209 -0
package/src/backends/claude/wrapper-script.ts +45 -0
package/src/backends/codex/args.ts +69 -0
package/src/backends/codex/auth.ts +35 -0
package/src/backends/codex/index.ts +57 -0
package/src/backends/codex/setup.ts +37 -0
package/src/backends/codex/translator.ts +223 -0
package/src/backends/codex/wrapper-script.ts +26 -0
package/src/backends/factory/args.ts +45 -0
package/src/backends/factory/auth.ts +30 -0
package/src/backends/factory/index.ts +56 -0
package/src/backends/factory/setup.ts +34 -0
package/src/backends/factory/translator.ts +139 -0
package/src/backends/factory/wrapper-script.ts +33 -0
package/src/backends/gemini/args.ts +44 -0
package/src/backends/gemini/auth.ts +30 -0
package/src/backends/gemini/index.ts +53 -0
package/src/backends/gemini/setup.ts +34 -0
package/src/backends/gemini/translator.ts +139 -0
package/src/backends/gemini/wrapper-script.ts +26 -0
package/src/backends/opencode/args.ts +53 -0
package/src/backends/opencode/auth.ts +53 -0
package/src/backends/opencode/index.ts +70 -0
package/src/backends/opencode/mcp.ts +67 -0
package/src/backends/opencode/setup.ts +54 -0
package/src/backends/opencode/translator.ts +168 -0
package/src/backends/opencode/wrapper-script.ts +46 -0
package/src/backends/registry.ts +38 -0
package/src/backends/shared/ndjson.ts +29 -0
package/src/backends/shared/translator-types.ts +69 -0
package/src/backends/shared/wrap-prompt.ts +17 -0
package/src/backends/types.ts +85 -0
package/src/config/index.ts +95 -0
package/src/db/agents.ts +185 -0
package/src/db/api_keys.ts +78 -0
package/src/db/batch.ts +142 -0
package/src/db/client.ts +81 -0
package/src/db/environments.ts +127 -0
package/src/db/events.ts +208 -0
package/src/db/memory.ts +143 -0
package/src/db/migrations.ts +295 -0
package/src/db/proxy.ts +37 -0
package/src/db/sessions.ts +295 -0
package/src/db/vaults.ts +110 -0
package/src/errors.ts +53 -0
package/src/handlers/agents.ts +194 -0
package/src/handlers/batch.ts +41 -0
package/src/handlers/docs.ts +87 -0
package/src/handlers/environments.ts +154 -0
package/src/handlers/events.ts +234 -0
package/src/handlers/index.ts +12 -0
package/src/handlers/memory.ts +141 -0
package/src/handlers/openapi.ts +14 -0
package/src/handlers/sessions.ts +223 -0
package/src/handlers/stream.ts +76 -0
package/src/handlers/threads.ts +26 -0
package/src/handlers/ui/app.js +984 -0
package/src/handlers/ui/index.html +112 -0
package/src/handlers/ui/style.css +164 -0
package/src/handlers/ui.ts +1281 -0
package/src/handlers/vaults.ts +99 -0
package/src/http.ts +35 -0
package/src/index.ts +104 -0
package/src/init.ts +227 -0
package/src/openapi/registry.ts +8 -0
package/src/openapi/schemas.ts +625 -0
package/src/openapi/spec.ts +691 -0
package/src/providers/apple.ts +220 -0
package/src/providers/daytona.ts +217 -0
package/src/providers/docker.ts +264 -0
package/src/providers/e2b.ts +203 -0
package/src/providers/fly.ts +276 -0
package/src/providers/modal.ts +222 -0
package/src/providers/podman.ts +206 -0
package/src/providers/registry.ts +28 -0
package/src/providers/shared.ts +11 -0
package/src/providers/sprites.ts +55 -0
package/src/providers/types.ts +73 -0
package/src/providers/vercel.ts +208 -0
package/src/proxy/forward.ts +111 -0
package/src/queue/index.ts +111 -0
package/src/sessions/actor.ts +53 -0
package/src/sessions/bus.ts +155 -0
package/src/sessions/driver.ts +818 -0
package/src/sessions/grader.ts +120 -0
package/src/sessions/interrupt.ts +14 -0
package/src/sessions/sweeper.ts +136 -0
package/src/sessions/threads.ts +126 -0
package/src/sessions/tools.ts +50 -0
package/src/shutdown.ts +78 -0
package/src/sprite/client.ts +294 -0
package/src/sprite/exec.ts +161 -0
package/src/sprite/lifecycle.ts +339 -0
package/src/sprite/pool.ts +65 -0
package/src/sprite/setup.ts +159 -0
package/src/state.ts +61 -0
package/src/types.ts +339 -0
package/src/util/clock.ts +7 -0
package/src/util/ids.ts +11 -0

package/src/handlers/ui.ts ADDED Viewed

@@ -0,0 +1,1281 @@
+// AUTO-GENERATED by scripts/build-ui.ts — do not edit directly.
+// Edit packages/agent-sdk/src/handlers/ui/{index.html,style.css,app.js} instead.
+const HTML_TEMPLATE = `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta http-equiv="cache-control" content="no-store, no-cache, must-revalidate" />
+  <meta http-equiv="pragma" content="no-cache" />
+  <meta http-equiv="expires" content="0" />
+  <title>AgentStep Gateway</title>
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0%25' stop-color='%23eafb6e'/><stop offset='100%25' stop-color='%23b8fc5e'/></linearGradient></defs><circle cx='50' cy='50' r='40' fill='url(%23g)'/></svg>" />
+  <script src="https://cdn.jsdelivr.net/npm/marked@15/marked.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/dompurify@3/dist/purify.min.js"></script>
+  <link rel="preconnect" href="https://rsms.me/" />
+  <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+  <style>*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+:root {
+  --bg: #0a0a0a; --surface: #171717; --surface2: #1e1e1e;
+  --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.14);
+  --heading: #fafafa; --body: #d4d4d4; --muted: #a3a3a3; --dim: #636363;
+  --accent: rgb(163, 230, 53); --accent-hover: rgb(190, 242, 100);
+  --error: #f87171; --success: #4ade80;
+  --font: 'Inter', -apple-system, sans-serif;
+  --mono: 'Geist Mono', 'SF Mono', ui-monospace, monospace;
+}
+html, body { height: 100%; background: var(--bg); color: var(--body); font-family: var(--font); font-size: 14px; -webkit-font-smoothing: antialiased; }
+a { color: var(--accent); text-decoration: none; }
+input, select, textarea, button { font-family: inherit; font-size: inherit; }
+/* Layout */
+#app { display: flex; flex-direction: column; height: 100vh; }
+.header { display: flex; align-items: center; height: 48px; border-bottom: 1px solid var(--border); padding: 0 16px; gap: 12px; flex-shrink: 0; }
+.header h1 { font-size: 16px; font-weight: 600; color: var(--heading); }
+.header .key-input { margin-left: auto; display: flex; align-items: center; gap: 8px; }
+.header input[type="text"], .header input[type="password"] { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; color: var(--body); font-size: 12px; width: 200px; }
+/* Tabs */
+.tabs { display: flex; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
+.tab { padding: 8px 16px; font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent; transition: all 0.15s; }
+.tab:hover { color: var(--heading); }
+.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
+/* Content */
+.content { flex: 1; overflow: hidden; display: flex; }
+.panel { display: none; flex: 1; overflow: hidden; }
+.panel.active { display: flex; }
+/* Chat */
+.chat-layout { display: flex; flex: 1; overflow: hidden; }
+.chat-sidebar { width: 220px; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; }
+.chat-sidebar-header { display: flex; align-items: center; height: 40px; padding: 0 12px; border-bottom: 1px solid var(--border); gap: 8px; }
+.chat-sidebar-header span { flex: 1; font-size: 12px; font-weight: 500; color: var(--muted); }
+.session-list { flex: 1; overflow-y: auto; padding: 4px; }
+.session-item { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 12px; }
+.session-item:hover { background: var(--surface); }
+.session-item.active { background: var(--surface2); }
+.session-item .title { color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.session-item .meta { font-size: 10px; color: var(--dim); display: flex; justify-content: space-between; }
+.chat-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+.messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
+.message { max-width: 720px; width: 100%; margin: 0 auto; }
+.message.user { }
+.message.assistant { }
+.message-content { padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.6; word-break: break-word; }
+.message.user .message-content { white-space: pre-wrap; }
+.message.user .message-content { background: var(--surface2); color: var(--body); }
+.message.assistant .message-content { color: var(--heading); }
+.message.tool .message-content { background: var(--surface); color: var(--muted); font-family: var(--mono); font-size: 11px; border: 1px solid var(--border); }
+.message.error .message-content { background: #dc2626; color: #fff; border-radius: 8px; }
+.message.error .message-role { color: #dc2626; }
+.message-role { font-size: 10px; font-weight: 500; color: var(--dim); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
+.typing { display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--muted); font-size: 13px; max-width: 720px; margin: 0 auto; }
+.typing-dots { display: flex; gap: 3px; }
+.typing-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: bounce 1.2s infinite; }
+.typing-dot:nth-child(2) { animation-delay: 0.15s; }
+.typing-dot:nth-child(3) { animation-delay: 0.3s; }
+@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }
+.chat-input-area { padding: 12px 16px; border-top: 1px solid var(--border); }
+.chat-input-wrap { max-width: 720px; margin: 0 auto; display: flex; gap: 8px; }
+.chat-input-wrap textarea { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; color: var(--body); resize: none; min-height: 42px; max-height: 150px; }
+.chat-input-wrap textarea:focus { outline: none; border-color: var(--accent); }
+.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 12px; color: var(--dim); }
+.empty-state svg { opacity: 0.3; }
+/* Config */
+.config-layout { flex: 1; display: flex; gap: 1px; background: var(--border); overflow: hidden; }
+.config-col { flex: 1; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; padding: 16px; background: var(--bg); }
+.config-col h2 { font-size: 14px; font-weight: 600; color: var(--heading); display: flex; align-items: center; justify-content: space-between; }
+.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
+.card-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
+.card-item:last-child { border-bottom: none; }
+.card-item .name { font-size: 13px; color: var(--heading); }
+.card-item .detail { font-size: 11px; color: var(--dim); font-family: var(--mono); }
+/* Events */
+.events-layout { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+.events-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
+.events-list { flex: 1; overflow-y: auto; }
+.event-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 16px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 12px; }
+.event-row:hover { background: var(--surface); }
+.event-row .seq { color: var(--dim); font-family: var(--mono); font-size: 10px; width: 28px; text-align: right; flex-shrink: 0; padding-top: 2px; }
+.event-row .delta { color: var(--dim); font-family: var(--mono); font-size: 10px; flex-shrink: 0; padding-top: 2px; }
+.event-row .tokens { color: #a78bfa; font-family: var(--mono); font-size: 10px; flex-shrink: 0; padding-top: 2px; }
+.event-row .preview { flex: 1; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.event-detail { padding: 4px 16px 8px 52px; }
+.event-detail pre { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 8px; font-family: var(--mono); font-size: 10px; color: var(--body); overflow-x: auto; max-height: 200px; overflow-y: auto; white-space: pre-wrap; }
+/* Badges */
+.badge { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 500; font-family: var(--mono); }
+.badge-user { background: #1e3a5f; color: #60a5fa; }
+.badge-agent { background: #064e3b; color: #34d399; }
+.badge-status { background: #422006; color: #fbbf24; }
+.badge-error { background: #450a0a; color: #f87171; }
+.badge-span { background: #2e1065; color: #a78bfa; }
+.badge-idle { background: var(--surface2); color: var(--muted); }
+.badge-running { background: #064e3b; color: #34d399; }
+/* Markdown in messages */
+.message-content strong { color: var(--heading); font-weight: 600; }
+.message-content em { font-style: italic; }
+.message-content code { background: var(--surface); padding: 1px 5px; border-radius: 4px; font-family: var(--mono); font-size: 0.9em; }
+.message-content pre { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; margin: 8px 0; overflow-x: auto; font-family: var(--mono); font-size: 12px; line-height: 1.5; }
+.message-content pre code { background: none; padding: 0; }
+.message-content a { color: var(--accent); text-decoration: underline; }
+/* Reset ALL margins inside message content — browser defaults cause spacing issues */
+.message-content p, .message-content ul, .message-content ol,
+.message-content li, .message-content h1, .message-content h2,
+.message-content h3, .message-content h4, .message-content blockquote {
+  margin: 0 !important; padding: 0 !important;
+}
+.message-content ul, .message-content ol { padding-left: 1.5em !important; margin: 2px 0 !important; }
+.message-content li { line-height: 1.5; }
+.message-content p + p { margin-top: 8px !important; }
+.message-content p + ul, .message-content p + ol { margin-top: 2px !important; }
+.message-content ul + p, .message-content ol + p { margin-top: 8px !important; }
+.message-content h1, .message-content h2, .message-content h3 { color: var(--heading); margin: 8px 0 2px !important; }
+.message-content h1 { font-size: 1.3em; } .message-content h2 { font-size: 1.15em; } .message-content h3 { font-size: 1.05em; }
+.badge-running { background: #064e3b; color: #34d399; }
+/* Buttons */
+.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 20px; border-radius: 10px; font-size: 13px; font-weight: 600; border: none; cursor: pointer; transition: all 0.15s; }
+.btn-primary { background: linear-gradient(135deg, #e2f751, #a5fb3c); color: #0a0a0a; }
+.btn-primary:hover { background: linear-gradient(135deg, #eafb6e, #b8fc5e); box-shadow: 0 0 16px 2px rgba(165, 251, 60, 0.25); }
+.btn-secondary { background: var(--surface); color: var(--body); border: 1px solid var(--border); }
+.btn-secondary:hover { background: var(--surface2); }
+.btn-danger { background: transparent; color: var(--error); border: 1px solid var(--error); }
+.btn-danger:hover { background: rgba(248,113,113,0.1); }
+.btn-sm { padding: 4px 8px; font-size: 11px; }
+.btn-icon { padding: 4px; border-radius: 6px; background: none; border: none; color: var(--muted); cursor: pointer; }
+.btn-icon:hover { color: var(--heading); background: var(--surface); }
+/* Forms */
+.form-group { display: flex; flex-direction: column; gap: 4px; }
+.form-label { font-size: 11px; font-weight: 500; color: var(--muted); }
+.form-input, .form-select, .form-textarea { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; color: var(--body); font-size: 13px; }
+.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--accent); }
+.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 28px; }
+/* Modal */
+.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 100; }
+.modal { background: var(--bg); border: 1px solid var(--border-strong); border-radius: 12px; padding: 20px; width: 380px; max-width: 90vw; display: flex; flex-direction: column; gap: 16px; }
+.modal h2 { font-size: 16px; font-weight: 600; color: var(--heading); }
+.modal p { font-size: 12px; color: var(--muted); }
+.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
+/* Toast */
+.toast { position: fixed; bottom: 16px; right: 16px; padding: 10px 16px; border-radius: 8px; font-size: 12px; z-index: 200; animation: fadeIn 0.2s; }
+.toast-error { background: #450a0a; color: var(--error); border: 1px solid var(--error); }
+.toast-success { background: #052e16; color: var(--success); border: 1px solid var(--success); }
+@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
+/* Scrollbar */
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+</style>
+</head>
+<body>
+<div id="app">
+  <!-- Header -->
+  <div class="header">
+    <h1>AgentStep Gateway</h1>
+    <div class="key-input">
+      <label style="font-size:11px;color:var(--dim);margin-right:4px">API Key</label>
+      <input type="password" id="apiKeyInput" placeholder="ck_..." />
+      <button class="btn-icon" onclick="toggleKeyVisibility()" id="keyEyeBtn" title="Show/hide key"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg></button>
+    </div>
+  </div>
+  <!-- Tabs -->
+  <div class="tabs">
+    <button class="tab active" data-tab="chat">Chat</button>
+    <button class="tab" data-tab="config">Config</button>
+    <button class="tab" data-tab="events">Events</button>
+  </div>
+  <!-- Content -->
+  <div class="content">
+    <!-- Chat Panel -->
+    <div class="panel active" id="panel-chat">
+      <div class="chat-layout">
+        <div class="chat-sidebar">
+          <div class="chat-sidebar-header">
+            <span>Sessions</span>
+            <button class="btn-icon" onclick="loadSessions()" title="Refresh"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg></button>
+            <button class="btn-icon" onclick="showNewSessionModal()" title="New"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg></button>
+          </div>
+          <div class="session-list" id="sessionList"></div>
+        </div>
+        <div class="chat-main">
+          <div class="messages" id="messages">
+            <div class="empty-state" id="chatEmpty">
+              <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#a3e635" opacity="0.3"/><circle cx="50" cy="50" r="20" fill="#a3e635" opacity="0.6"/></svg>
+              <p style="font-size:16px;font-weight:600;margin-bottom:4px">AgentStep Gateway</p>
+              <p style="font-size:12px">Select a session to continue, or click + to start a new one</p>
+            </div>
+          </div>
+          <div class="chat-input-area" id="chatInputArea" style="display:none">
+            <div class="chat-input-wrap">
+              <textarea id="chatInput" placeholder="Message..." rows="1" onkeydown="handleChatKey(event)"></textarea>
+              <button class="btn btn-primary" onclick="sendMessage()">Send</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Config Panel -->
+    <div class="panel" id="panel-config">
+      <div class="config-layout">
+        <div class="config-col">
+          <h2>Agents <button class="btn btn-sm btn-secondary" onclick="showCreateAgentModal()">+ New</button></h2>
+          <div class="card" id="agentsList"><p style="color:var(--dim);font-size:12px">Loading...</p></div>
+        </div>
+        <div class="config-col">
+          <h2>Environments <button class="btn btn-sm btn-secondary" onclick="showCreateEnvModal()">+ New</button></h2>
+          <div class="card" id="envsList"><p style="color:var(--dim);font-size:12px">Loading...</p></div>
+        </div>
+        <div class="config-col">
+          <h2>Secrets <button class="btn btn-sm btn-secondary" onclick="showCreateVaultModal()">+ New</button></h2>
+          <div class="card" id="vaultsList"><p style="color:var(--dim);font-size:12px">Loading...</p></div>
+        </div>
+      </div>
+    </div>
+    <!-- Events Panel -->
+    <div class="panel" id="panel-events">
+      <div class="events-layout">
+        <div class="events-toolbar">
+          <select class="form-select" id="eventsSessionSelect" onchange="loadEvents()" style="width:280px">
+            <option value="">Select session...</option>
+          </select>
+          <button class="btn btn-sm btn-secondary" onclick="copyEvents()">Copy JSON</button>
+          <span id="eventsStats" style="margin-left:auto;font-size:11px;color:var(--dim)"></span>
+        </div>
+        <div class="events-list" id="eventsList">
+          <div class="empty-state">
+            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
+            <p>Select a session to inspect events</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- Modals container -->
+<div id="modals"></div>
+__INJECT__
+<script>// ── Icons (inline SVGs — Lucide-compatible) ──
+const ICON = {
+  eye: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>',
+  eyeOff: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>',
+  x: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',
+  refresh: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>',
+  plus: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>',
+  pencil: '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></svg>',
+  trash: '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>',
+};
+// ── State ──
+// Server-injected key ALWAYS wins over localStorage
+let apiKey = "";
+if (window.__MA_API_KEY__) {
+  apiKey = window.__MA_API_KEY__;
+  localStorage.setItem("ma-api-key", apiKey);
+} else {
+  apiKey = localStorage.getItem("ma-api-key") || "";
+}
+let sessions = [];
+let activeSessionId = null;
+let sseReader = null;
+let sseAbort = null;
+let isRunning = false;
+let agents = [];
+let environments = [];
+let allEvents = [];
+let expandedEventIds = new Set();
+let seenMessageTexts = new Set();
+let lastAppendedRole = "";
+let onboardingStep = 0;
+let onboardVaultId = null;
+let onboardBackend = "claude";
+// ── Init ──
+document.getElementById("apiKeyInput").value = apiKey;
+document.getElementById("apiKeyInput").addEventListener("input", (e) => {
+  apiKey = e.target.value;
+  localStorage.setItem("ma-api-key", apiKey);
+});
+document.querySelectorAll(".tab").forEach((t) =>
+  t.addEventListener("click", () => switchTab(t.dataset.tab))
+);
+if (apiKey) { checkOnboarding(); }
+// ── API wrapper ──
+async function api(path, opts = {}) {
+  const headers = { "content-type": "application/json" };
+  if (apiKey) headers["x-api-key"] = apiKey;
+  const res = await fetch(path, { ...opts, headers: { ...headers, ...opts.headers } });
+  if (!res.ok) {
+    let msg = \`HTTP \${res.status}\`;
+    try { const e = await res.json(); if (e.error?.message) msg = e.error.message; } catch {}
+    if (res.status === 401) { showToast(msg, "error"); }
+    throw new Error(msg);
+  }
+  return res.json();
+}
+// ── Tabs ──
+function switchTab(name) {
+  document.querySelectorAll(".tab").forEach((t) => t.classList.toggle("active", t.dataset.tab === name));
+  document.querySelectorAll(".panel").forEach((p) => p.classList.toggle("active", p.id === \`panel-\${name}\`));
+  if (name === "config") { loadResources(); loadVaults(); }
+  if (name === "events") loadSessionsForEvents();
+}
+// ── Toast ──
+function showToast(msg, type = "success") {
+  const el = document.createElement("div");
+  el.className = \`toast toast-\${type}\`;
+  el.textContent = msg;
+  document.body.appendChild(el);
+  setTimeout(() => el.remove(), 3000);
+}
+function clearKey() { apiKey = ""; localStorage.removeItem("ma-api-key"); document.getElementById("apiKeyInput").value = ""; }
+function toggleKeyVisibility() { const el = document.getElementById("apiKeyInput"); el.type = el.type === "password" ? "text" : "password"; }
+// ═══════════════════════════════════════════════════════════════════
+// ONBOARDING
+// ═══════════════════════════════════════════════════════════════════
+async function checkOnboarding() {
+  try {
+    const [a, e] = await Promise.all([api("/v1/agents?limit=1"), api("/v1/environments?limit=1")]);
+    if ((a.data || []).length === 0 || (e.data || []).filter(x => x.state === "ready").length === 0) {
+      agents = a.data || [];
+      environments = (e.data || []).filter(x => x.state === "ready");
+      onboardingStep = agents.length === 0 ? 0 : environments.length === 0 ? 1 : 2;
+      renderOnboarding();
+    } else {
+      loadSessions();
+      loadResources();
+    }
+  } catch (e) { loadSessions(); loadResources(); }
+}
+let onboardProvider = "docker";
+function renderOnboarding() {
+  const el = document.getElementById("messages");
+  const steps = ["Agent", "Environment", "Secrets", "Chat"];
+  const stepIndicator = steps.map((s, i) =>
+    \`<span style="display:inline-flex;align-items:center;gap:6px">\` +
+    \`<span style="display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:2px solid \${i < onboardingStep ? 'var(--success)' : i === onboardingStep ? 'var(--heading)' : 'var(--border-strong)'};font-size:11px;color:\${i < onboardingStep ? 'var(--success)' : i === onboardingStep ? 'var(--heading)' : 'var(--dim)'}">\${i < onboardingStep ? '✓' : i + 1}</span>\` +
+    \`<span style="font-size:12px;font-weight:500;color:\${i <= onboardingStep ? 'var(--heading)' : 'var(--dim)'}">\${s}</span>\` +
+    (i < steps.length - 1 ? \`<span style="color:var(--dim);margin:0 4px">→</span>\` : '') +
+    \`</span>\`
+  ).join("");
+  let content = "";
+  if (onboardingStep === 0) {
+    content = \`
+      <h2 style="font-size:18px;font-weight:600;color:var(--heading)">Create your first agent</h2>
+      <p style="font-size:13px;color:var(--muted);margin-top:4px">Pick a backend and model to get started.</p>
+      <div style="display:flex;flex-direction:column;gap:12px;margin-top:16px;width:100%">
+        <div class="form-group"><label class="form-label">Name</label><input class="form-input" id="obAgentName" value="Coder" style="width:100%" /></div>
+        <div class="form-group"><label class="form-label">Backend</label>
+          <select class="form-select" id="obBackend" onchange="updateObModels()" style="width:100%">
+            <option value="claude">Claude — Max subscription or API key</option>
+            <option value="opencode">OpenCode — Multi-provider</option>
+            <option value="codex">Codex — GPT-5.4 models</option>
+            <option value="gemini">Gemini — Google AI models</option>
+            <option value="factory">Factory — Multi-provider Droid</option>
+          </select>
+        </div>
+        <div class="form-group"><label class="form-label">Model</label><select class="form-select" id="obModel" style="width:100%"></select></div>
+        <button class="btn btn-primary" onclick="onboardCreateAgent()" style="width:100%">Create Agent</button>
+      </div>\`;
+  } else if (onboardingStep === 1) {
+    content = \`
+      <h2 style="font-size:18px;font-weight:600;color:var(--heading)">Set up an environment</h2>
+      <p style="font-size:13px;color:var(--muted);margin-top:4px">Where should your agent run?</p>
+      <div style="display:flex;flex-direction:column;gap:12px;margin-top:16px;width:100%">
+        <div class="form-group"><label class="form-label">Name</label><input class="form-input" id="obEnvName" value="dev" style="width:100%" /></div>
+        <div class="form-group"><label class="form-label">Provider</label>
+          <select class="form-select" id="obProvider" onchange="onboardProvider=this.value" style="width:100%">
+            <option value="docker">Docker — Local containers (~3s)</option>
+            <option value="sprites">sprites.dev — Cloud containers (~2s)</option>
+            <option value="apple">Apple Containers — macOS 26+ (~1s)</option>
+          </select>
+        </div>
+        <button class="btn btn-primary" onclick="onboardCreateEnv()" style="width:100%">Create Environment</button>
+      </div>\`;
+  } else if (onboardingStep === 2) {
+    // Build adaptive secret fields based on backend + provider
+    const fields = [];
+    const backendKeys = { claude: [{ key: "ANTHROPIC_API_KEY", label: "Anthropic API Key", placeholder: "sk-ant-...", alt: "or CLAUDE_CODE_OAUTH_TOKEN" }], opencode: [{ key: "OPENAI_API_KEY", label: "OpenAI API Key", placeholder: "sk-..." }], codex: [{ key: "OPENAI_API_KEY", label: "OpenAI API Key", placeholder: "sk-..." }], gemini: [{ key: "GEMINI_API_KEY", label: "Gemini API Key", placeholder: "AIza..." }], factory: [{ key: "FACTORY_API_KEY", label: "Factory API Key", placeholder: "fk-..." }] };
+    const providerKeys = { sprites: [{ key: "SPRITE_TOKEN", label: "Sprites.dev Token", placeholder: "user/org/.../token" }] };
+    (backendKeys[onboardBackend] || []).forEach(f => fields.push(f));
+    (providerKeys[onboardProvider] || []).forEach(f => fields.push(f));
+    const fieldHtml = fields.map((f, i) => \`
+      <div class="form-group">
+        <label class="form-label">\${f.label}\${f.alt ? \` <span style="color:var(--dim);font-weight:400">\${f.alt}</span>\` : ''}</label>
+        <input class="form-input" id="obSecret\${i}" type="password" placeholder="\${f.placeholder}" data-key="\${f.key}" style="width:100%" />
+      </div>\`).join("");
+    content = \`
+      <h2 style="font-size:18px;font-weight:600;color:var(--heading)">Add your secrets</h2>
+      <p style="font-size:13px;color:var(--muted);margin-top:4px">Keys are stored in a vault and injected into the container at runtime.</p>
+      <div style="display:flex;flex-direction:column;gap:12px;margin-top:16px;width:100%">
+        \${fieldHtml}
+        <button class="btn btn-primary" onclick="onboardSaveSecrets(\${fields.length})" style="width:100%">Save & Continue</button>
+        <button class="btn btn-secondary" onclick="onboardingStep=3;renderOnboarding()" style="width:100%">Skip (use server .env)</button>
+      </div>\`;
+  } else if (onboardingStep === 3) {
+    content = \`
+      <h2 style="font-size:18px;font-weight:600;color:var(--heading)">Ready to go!</h2>
+      <p style="font-size:13px;color:var(--muted);margin-top:4px">Your agent and environment are set up.</p>
+      <div style="background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px;margin-top:16px;width:100%;font-size:13px;display:flex;flex-direction:column;gap:6px">
+        <div style="display:flex;justify-content:space-between"><span style="color:var(--muted)">Agent</span><span style="color:var(--heading)">\${esc(agents[0]?.name || "")}</span></div>
+        <div style="display:flex;justify-content:space-between"><span style="color:var(--muted)">Backend</span><span style="font-family:var(--mono);font-size:11px">\${agents[0]?.backend || ""}</span></div>
+        <div style="display:flex;justify-content:space-between"><span style="color:var(--muted)">Model</span><span style="font-family:var(--mono);font-size:11px">\${agents[0]?.model || ""}</span></div>
+        <div style="display:flex;justify-content:space-between"><span style="color:var(--muted)">Environment</span><span style="color:var(--heading)">\${esc(environments[0]?.name || "")}</span></div>
+        \${onboardVaultId ? '<div style="display:flex;justify-content:space-between"><span style="color:var(--muted)">Secrets</span><span style="color:var(--success)">✓ Vault configured</span></div>' : '<div style="display:flex;justify-content:space-between"><span style="color:var(--muted)">Secrets</span><span style="color:var(--dim)">Using server .env</span></div>'}
+      </div>
+      <button class="btn btn-primary" onclick="onboardStart()" style="width:100%;margin-top:16px">Start Chatting</button>\`;
+  }
+  el.innerHTML = \`
+    <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:24px;padding:24px;max-width:440px;margin:0 auto">
+      <div style="display:flex;align-items:center;gap:4px">\${stepIndicator}</div>
+      \${content}
+    </div>\`;
+  if (onboardingStep === 0) setTimeout(updateObModels, 0);
+}
+function updateObModels() {
+  const backend = document.getElementById("obBackend")?.value || "claude";
+  const models = MODELS[backend] || MODELS.claude;
+  const el = document.getElementById("obModel");
+  if (el) el.innerHTML = models.map(m => \`<option value="\${m}">\${m}</option>\`).join("");
+}
+async function onboardCreateAgent() {
+  const name = document.getElementById("obAgentName")?.value?.trim();
+  const backend = document.getElementById("obBackend")?.value;
+  const model = document.getElementById("obModel")?.value;
+  if (!name) return;
+  try {
+    const body = { name, model, backend };
+    if (backend === "claude") body.tools = [{ type: "agent_toolset_20260401" }];
+    await api("/v1/agents", { method: "POST", body: JSON.stringify(body) });
+    const a = await api("/v1/agents?limit=50");
+    agents = a.data || [];
+    onboardBackend = backend;
+    onboardingStep = 1; // → environment step
+    renderOnboarding();
+    showToast("Agent created");
+  } catch (e) { showToast(e.message, "error"); }
+}
+async function onboardSaveSecrets(fieldCount) {
+  try {
+    // Collect all non-empty fields
+    const entries = [];
+    for (let i = 0; i < fieldCount; i++) {
+      const el = document.getElementById(\`obSecret\${i}\`);
+      if (el && el.value.trim()) {
+        let key = el.dataset.key;
+        const val = el.value.trim();
+        // Claude oauth token detection
+        if (key === "ANTHROPIC_API_KEY" && val.startsWith("sk-ant-oat")) {
+          key = "CLAUDE_CODE_OAUTH_TOKEN";
+        }
+        entries.push({ key, value: val });
+      }
+    }
+    if (entries.length === 0) { onboardingStep = 3; renderOnboarding(); return; }
+    // Create vault + set entries
+    const vault = await api("/v1/vaults", { method: "POST", body: JSON.stringify({ agent_id: agents[0].id, name: "secrets" }) });
+    onboardVaultId = vault.id;
+    for (const e of entries) {
+      await api(\`/v1/vaults/\${vault.id}/entries/\${e.key}\`, { method: "PUT", body: JSON.stringify({ value: e.value }) });
+    }
+    onboardingStep = 3;
+    renderOnboarding();
+    showToast(\`\${entries.length} secret(s) saved to vault\`);
+  } catch (e) { showToast(e.message, "error"); }
+}
+async function onboardCreateEnv() {
+  const name = document.getElementById("obEnvName")?.value?.trim();
+  const provider = document.getElementById("obProvider")?.value;
+  if (!name) return;
+  try {
+    await api("/v1/environments", { method: "POST", body: JSON.stringify({ name, config: { type: "cloud", provider } }) });
+    // Poll for ready state
+    showToast("Environment created — preparing...");
+    const check = async () => {
+      const e = await api("/v1/environments?limit=50");
+      environments = (e.data || []).filter(x => x.state === "ready");
+      if (environments.length > 0) {
+        onboardingStep = 2; // → secrets step
+        renderOnboarding();
+      } else {
+        setTimeout(check, 2000);
+      }
+    };
+    setTimeout(check, 2000);
+  } catch (e) { showToast(e.message, "error"); }
+}
+async function onboardStart() {
+  if (!agents[0] || !environments[0]) return;
+  try {
+    const sessionBody = { agent: agents[0].id, environment_id: environments[0].id };
+    if (onboardVaultId) sessionBody.vault_ids = [onboardVaultId];
+    const data = await api("/v1/sessions", { method: "POST", body: JSON.stringify(sessionBody) });
+    // Restore chat DOM (onboarding replaced #messages innerHTML)
+    const el = document.getElementById("messages");
+    el.innerHTML = '<div class="empty-state" id="chatEmpty" style="display:none"></div><div id="typing" style="display:none"></div><div id="messagesEnd"></div>';
+    document.getElementById("chatInputArea").style.display = "block";
+    await loadSessions();
+    await loadResources();
+    selectSession(data.id);
+    showToast("Session created — start chatting!");
+  } catch (e) { showToast(e.message, "error"); }
+}
+// ═══════════════════════════════════════════════════════════════════
+// CHAT
+// ═══════════════════════════════════════════════════════════════════
+async function loadSessions() {
+  try {
+    const data = await api("/v1/sessions?limit=50&order=desc");
+    sessions = data.data || [];
+    renderSessionList();
+  } catch (e) { console.error(e); }
+}
+function renderSessionList() {
+  const el = document.getElementById("sessionList");
+  if (!sessions.length) { el.innerHTML = '<p style="padding:12px;text-align:center;font-size:11px;color:var(--dim)">No sessions</p>'; return; }
+  el.innerHTML = sessions.map((s) => \`
+    <div class="session-item \${s.id === activeSessionId ? 'active' : ''}" onclick="selectSession('\${esc(s.id)}')">
+      <div class="title">\${esc(s.title || s.id.slice(0, 16))}</div>
+      <div class="meta">
+        <span class="badge badge-\${s.status}">\${s.status}</span>
+        <span>\${new Date(s.created_at).toLocaleDateString()}</span>
+      </div>
+    </div>
+  \`).join("");
+}
+async function selectSession(id) {
+  activeSessionId = id;
+  seenMessageTexts.clear();
+  lastAppendedRole = "";
+  renderSessionList();
+  document.getElementById("chatEmpty").style.display = "none";
+  document.getElementById("chatInputArea").style.display = "block";
+  disconnectSSE();
+  // Load history
+  try {
+    const data = await api(\`/v1/sessions/\${id}/events?limit=200&order=asc\`);
+    const msgs = [];
+    for (const evt of (data.data || [])) {
+      const m = eventToMessage(evt);
+      if (m) msgs.push(m);
+    }
+    renderMessages(msgs);
+    const lastSeq = data.data?.length ? data.data[data.data.length - 1].seq : 0;
+    connectSSE(id, lastSeq);
+  } catch (e) { showToast(e.message, "error"); }
+}
+function eventToMessage(evt) {
+  if (evt.type === "user.message") {
+    const text = (evt.content || []).map((b) => b.text || "").join("");
+    return { role: "user", content: text, type: evt.type };
+  }
+  if (evt.type === "agent.message") {
+    const text = (evt.content || []).map((b) => b.text || "").join("");
+    if (text) return { role: "assistant", content: text, type: evt.type };
+  }
+  if (evt.type === "agent.tool_use" || evt.type === "agent.custom_tool_use") {
+    return { role: "tool", content: \`Using \${evt.name || "tool"}\`, type: evt.type };
+  }
+  if (evt.type === "session.status_running") { isRunning = true; renderTyping(); }
+  if (evt.type === "session.status_idle") { isRunning = false; renderTyping(); loadSessions(); }
+  if (evt.type === "session.error") {
+    isRunning = false; renderTyping(); loadSessions();
+    const errorMsg = evt.error?.message || evt.payload?.error?.message || "An unknown error occurred";
+    return { role: "error", content: errorMsg, type: evt.type };
+  }
+  return null;
+}
+function renderMessages(msgs) {
+  const el = document.getElementById("messages");
+  let html = "";
+  let prevRole = "";
+  for (const m of msgs) {
+    const rendered = m.role === "assistant" ? renderMarkdown(m.content) : esc(m.content);
+    const showRole = m.role !== prevRole && !(m.role === "tool" && prevRole === "assistant");
+    const roleHtml = showRole ? \`<div class="message-role">\${m.role === "tool" ? "agent" : m.role}</div>\` : "";
+    html += \`<div class="message \${m.role}">
+      \${roleHtml}
+      <div class="message-content">\${rendered}</div>
+    </div>\`;
+    prevRole = m.role === "tool" ? "assistant" : m.role; // tool doesn't break assistant grouping
+  }
+  html += '<div id="typing" style="display:none"><div class="typing"><div class="typing-dots"><div class="typing-dot"></div><div class="typing-dot"></div><div class="typing-dot"></div></div>Agent is thinking...</div></div>';
+  html += '<div id="messagesEnd"></div>';
+  el.innerHTML = html;
+  scrollToBottom();
+}
+function appendMessage(m) {
+  // Deduplicate: skip if we've already shown this exact role+content
+  const dedupKey = \`\${m.role}:\${m.content}\`;
+  if (seenMessageTexts.has(dedupKey)) return;
+  seenMessageTexts.add(dedupKey);
+  const typing = document.getElementById("typing");
+  const end = document.getElementById("messagesEnd");
+  if (!typing || !end) return;
+  const div = document.createElement("div");
+  div.className = \`message \${m.role}\`;
+  const rendered = m.role === "assistant" ? renderMarkdown(m.content) : esc(m.content);
+  const effectiveRole = m.role === "tool" ? "assistant" : m.role;
+  const showRole = effectiveRole !== lastAppendedRole;
+  const roleHtml = showRole ? \`<div class="message-role">\${m.role === "tool" ? "agent" : m.role}</div>\` : "";
+  div.innerHTML = \`\${roleHtml}<div class="message-content">\${rendered}</div>\`;
+  lastAppendedRole = effectiveRole;
+  typing.before(div);
+  scrollToBottom();
+}
+function renderTyping() {
+  const el = document.getElementById("typing");
+  if (el) el.style.display = isRunning ? "block" : "none";
+  if (isRunning) scrollToBottom();
+}
+function scrollToBottom() {
+  const el = document.getElementById("messagesEnd");
+  if (el) el.scrollIntoView({ behavior: "smooth" });
+}
+async function sendMessage() {
+  const input = document.getElementById("chatInput");
+  const text = input.value.trim();
+  if (!text || !activeSessionId) return;
+  input.value = "";
+  appendMessage({ role: "user", content: text });
+  try {
+    await api(\`/v1/sessions/\${activeSessionId}/events\`, {
+      method: "POST",
+      body: JSON.stringify({ events: [{ type: "user.message", content: [{ type: "text", text }] }] }),
+    });
+  } catch (e) { showToast(e.message, "error"); }
+}
+function handleChatKey(e) {
+  if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); sendMessage(); }
+}
+// ── SSE ──
+function connectSSE(sessionId, afterSeq) {
+  disconnectSSE();
+  const ctrl = new AbortController();
+  sseAbort = ctrl;
+  fetch(\`/v1/sessions/\${sessionId}/stream?after_seq=\${afterSeq}\`, {
+    headers: { "x-api-key": apiKey },
+    signal: ctrl.signal,
+  }).then((res) => {
+    const reader = res.body.getReader();
+    sseReader = reader;
+    const decoder = new TextDecoder();
+    let buffer = "";
+    function pump() {
+      reader.read().then(({ done, value }) => {
+        if (done) return;
+        buffer += decoder.decode(value, { stream: true });
+        const parts = buffer.split("\\n\\n");
+        buffer = parts.pop();
+        for (const part of parts) {
+          const evt = parseSSE(part);
+          if (evt && evt.type !== "ping") {
+            const m = eventToMessage(evt);
+            if (m) appendMessage(m);
+          }
+        }
+        pump();
+      }).catch(() => {});
+    }
+    pump();
+  }).catch(() => {});
+}
+function disconnectSSE() {
+  if (sseAbort) { sseAbort.abort(); sseAbort = null; }
+  sseReader = null;
+}
+function parseSSE(block) {
+  let data = null;
+  for (const line of block.split("\\n")) {
+    if (line.startsWith("data: ")) {
+      try { data = JSON.parse(line.slice(6)); } catch {}
+    }
+  }
+  return data;
+}
+// ── New Session Modal ──
+async function showNewSessionModal() {
+  await loadResources();
+  const html = \`<div class="modal-overlay" onclick="if(event.target===this)closeModal()">
+    <div class="modal">
+      <h2>New Session</h2>
+      <div class="form-group">
+        <label class="form-label">Agent</label>
+        <select class="form-select" id="modalAgent">\${agents.map((a) => \`<option value="\${a.id}">\${esc(a.name)}</option>\`).join("")}</select>
+      </div>
+      <div class="form-group">
+        <label class="form-label">Environment</label>
+        <select class="form-select" id="modalEnv">\${environments.filter((e) => e.state === "ready").map((e) => \`<option value="\${e.id}">\${esc(e.name)}</option>\`).join("")}</select>
+      </div>
+      <div class="modal-actions">
+        <button class="btn btn-secondary" onclick="closeModal()">Cancel</button>
+        <button class="btn btn-primary" onclick="createSession()">Create</button>
+      </div>
+    </div>
+  </div>\`;
+  document.getElementById("modals").innerHTML = html;
+}
+async function createSession() {
+  const agentId = document.getElementById("modalAgent").value;
+  const envId = document.getElementById("modalEnv").value;
+  if (!agentId || !envId) return;
+  try {
+    // Auto-attach agent's vaults so secrets are available
+    const vaultsData = await api(\`/v1/vaults?agent_id=\${agentId}\`);
+    const vaultIds = (vaultsData.data || []).map(v => v.id);
+    const body = { agent: agentId, environment_id: envId };
+    if (vaultIds.length > 0) body.vault_ids = vaultIds;
+    const data = await api("/v1/sessions", { method: "POST", body: JSON.stringify(body) });
+    closeModal();
+    await loadSessions();
+    selectSession(data.id);
+    showToast("Session created");
+  } catch (e) { showToast(e.message, "error"); }
+}
+function closeModal() { document.getElementById("modals").innerHTML = ""; }
+// ═══════════════════════════════════════════════════════════════════
+// CONFIG
+// ═══════════════════════════════════════════════════════════════════
+async function loadResources() {
+  try {
+    const [a, e] = await Promise.all([api("/v1/agents?limit=50"), api("/v1/environments?limit=50")]);
+    agents = a.data || [];
+    environments = e.data || [];
+    renderAgents();
+    renderEnvs();
+  } catch (e) { console.error(e); }
+}
+function renderAgents() {
+  const el = document.getElementById("agentsList");
+  if (!agents.length) { el.innerHTML = '<p style="color:var(--dim);font-size:12px;padding:8px">No agents yet</p>'; return; }
+  el.innerHTML = agents.map((a) => \`
+    <div class="card-item">
+      <div><div class="name">\${esc(a.name)}</div><div class="detail">\${esc(a.model)} / \${a.backend}</div></div>
+      <div style="display:flex;gap:4px">
+        <button class="btn btn-sm btn-secondary" onclick="showAgentConfig('\${esc(a.id)}')">Config</button>
+        <button class="btn btn-sm btn-danger" onclick="deleteAgent('\${esc(a.id)}')">Delete</button>
+      </div>
+    </div>
+  \`).join("");
+}
+function toYaml(obj, indent = 0) {
+  const pad = "  ".repeat(indent);
+  const lines = [];
+  for (const [k, v] of Object.entries(obj)) {
+    if (v === null || v === undefined) continue;
+    if (Array.isArray(v)) {
+      if (v.length === 0) continue;
+      lines.push(\`\${pad}\${k}:\`);
+      v.forEach(item => {
+        if (typeof item === "object") {
+          lines.push(\`\${pad}  -\`);
+          lines.push(toYaml(item, indent + 2).replace(/^/, \`\${pad}    \`).replace(/\\n/g, \`\\n\`));
+        } else {
+          lines.push(\`\${pad}  - \${item}\`);
+        }
+      });
+    } else if (typeof v === "object") {
+      if (Object.keys(v).length === 0) continue;
+      lines.push(\`\${pad}\${k}:\`);
+      lines.push(toYaml(v, indent + 1));
+    } else {
+      lines.push(\`\${pad}\${k}: \${v}\`);
+    }
+  }
+  return lines.join("\\n");
+}
+let _configModalData = {};
+function showAgentConfig(id) {
+  const agent = agents.find(a => a.id === id);
+  if (!agent) return;
+  _configModalData = { yaml: toYaml(agent), json: JSON.stringify(agent, null, 2) };
+  document.getElementById("modals").innerHTML = \`
+    <div class="modal-overlay" onclick="if(event.target===this)closeModal()">
+      <div class="modal" style="max-width:800px;width:90vw;max-height:80vh;display:flex;flex-direction:column">
+        <div class="modal-header">
+          <h3>\${esc(agent.name)} — Config</h3>
+          <button class="btn-icon" onclick="closeModal()">\${ICON.x}</button>
+        </div>
+        <pre style="flex:1;overflow:auto;margin:0;padding:16px;background:var(--surface);border-radius:6px;font-size:12px;font-family:var(--mono);color:var(--body);white-space:pre-wrap;border:1px solid var(--border)">\${esc(_configModalData.yaml)}</pre>
+        <div class="modal-actions" style="margin-top:12px">
+          <button class="btn btn-secondary" onclick="navigator.clipboard.writeText(_configModalData.yaml);showToast('Copied')">Copy YAML</button>
+          <button class="btn btn-secondary" onclick="navigator.clipboard.writeText(_configModalData.json);showToast('Copied')">Copy JSON</button>
+          <button class="btn btn-primary" onclick="closeModal()">Close</button>
+        </div>
+      </div>
+    </div>\`;
+}
+function renderEnvs() {
+  const el = document.getElementById("envsList");
+  if (!environments.length) { el.innerHTML = '<p style="color:var(--dim);font-size:12px;padding:8px">No environments yet</p>'; return; }
+  el.innerHTML = environments.map((e) => \`
+    <div class="card-item">
+      <div><div class="name">\${esc(e.name)}</div><div class="detail">\${e.state}\${e.config?.provider ? ' / ' + e.config.provider : ''}</div></div>
+      <button class="btn btn-sm btn-danger" onclick="deleteEnv('\${esc(e.id)}')">Delete</button>
+    </div>
+  \`).join("");
+}
+const MODELS = { claude: ["claude-sonnet-4-6","claude-opus-4-6","claude-haiku-4-5"], opencode: ["anthropic/claude-sonnet-4-6","openai/gpt-4o-mini"], codex: ["gpt-5.4-mini","gpt-5.4"], gemini: ["gemini-3.1-pro-preview","gemini-3","gemini-2.5-flash"], factory: ["claude-sonnet-4-6","gpt-5.4","gemini-3.1-pro-preview"] };
+function showCreateAgentModal() {
+  document.getElementById("modals").innerHTML = \`<div class="modal-overlay" onclick="if(event.target===this)closeModal()">
+    <div class="modal">
+      <h2>Create Agent</h2>
+      <div class="form-group"><label class="form-label">Name</label><input class="form-input" id="agentName" value="Coder" /></div>
+      <div class="form-group"><label class="form-label">Backend</label>
+        <select class="form-select" id="agentBackend" onchange="updateModelOptions()">
+          <option value="claude">Claude</option><option value="opencode">OpenCode</option><option value="codex">Codex</option><option value="gemini">Gemini</option><option value="factory">Factory</option>
+        </select>
+      </div>
+      <div class="form-group"><label class="form-label">Model</label><select class="form-select" id="agentModel"></select></div>
+      <div class="modal-actions">
+        <button class="btn btn-secondary" onclick="closeModal()">Cancel</button>
+        <button class="btn btn-primary" onclick="createAgent()">Create</button>
+      </div>
+    </div>
+  </div>\`;
+  updateModelOptions();
+}
+function updateModelOptions() {
+  const backend = document.getElementById("agentBackend").value;
+  const models = MODELS[backend] || MODELS.claude;
+  document.getElementById("agentModel").innerHTML = models.map((m) => \`<option value="\${m}">\${m}</option>\`).join("");
+}
+async function createAgent() {
+  const name = document.getElementById("agentName").value.trim();
+  const backend = document.getElementById("agentBackend").value;
+  const model = document.getElementById("agentModel").value;
+  if (!name) return;
+  try {
+    const body = { name, model, backend };
+    if (backend === "claude") body.tools = [{ type: "agent_toolset_20260401" }];
+    await api("/v1/agents", { method: "POST", body: JSON.stringify(body) });
+    closeModal(); loadResources(); showToast("Agent created");
+  } catch (e) { showToast(e.message, "error"); }
+}
+async function deleteAgent(id) {
+  try { await api(\`/v1/agents/\${id}\`, { method: "DELETE" }); loadResources(); showToast("Agent deleted"); }
+  catch (e) { showToast(e.message, "error"); }
+}
+function showCreateEnvModal() {
+  document.getElementById("modals").innerHTML = \`<div class="modal-overlay" onclick="if(event.target===this)closeModal()">
+    <div class="modal">
+      <h2>Create Environment</h2>
+      <div class="form-group"><label class="form-label">Name</label><input class="form-input" id="envName" value="dev" style="width:100%" /></div>
+      <div class="form-group"><label class="form-label">Provider</label>
+        <select class="form-select" id="envProvider" onchange="toggleEnvToken()" style="width:100%">
+          <option value="docker">Docker — Local containers</option>
+          <option value="sprites">sprites.dev — Cloud containers</option>
+          <option value="apple">Apple Containers — macOS 26+</option>
+          <option value="e2b">E2B — AI sandboxes</option>
+          <option value="vercel">Vercel Sandbox — Firecracker VMs</option>
+          <option value="daytona">Daytona — Dev environments</option>
+          <option value="fly">Fly.io — Global VMs</option>
+          <option value="modal">Modal — Serverless containers</option>
+        </select>
+      </div>
+      <div class="form-group" id="envTokenGroup" style="display:none">
+        <label class="form-label" id="envTokenLabel">Token</label>
+        <input class="form-input" id="envToken" type="password" style="width:100%" />
+        <p style="font-size:10px;color:var(--dim);margin-top:2px">Saved to vault for this environment.</p>
+      </div>
+      <div class="modal-actions">
+        <button class="btn btn-secondary" onclick="closeModal()">Cancel</button>
+        <button class="btn btn-primary" onclick="createEnv()">Create</button>
+      </div>
+    </div>
+  </div>\`;
+}
+const PROVIDER_TOKENS = {
+  sprites: { key: "SPRITE_TOKEN", label: "Sprites.dev Token", placeholder: "user/org/.../token" },
+  e2b: { key: "E2B_API_KEY", label: "E2B API Key", placeholder: "e2b_..." },
+  vercel: { key: "VERCEL_TOKEN", label: "Vercel Token", placeholder: "..." },
+  daytona: { key: "DAYTONA_API_KEY", label: "Daytona API Key", placeholder: "..." },
+  fly: { key: "FLY_API_TOKEN", label: "Fly.io API Token", placeholder: "fo1_..." },
+  modal: { key: "MODAL_TOKEN_ID", label: "Modal Token ID", placeholder: "..." },
+};
+function toggleEnvToken() {
+  const provider = document.getElementById("envProvider")?.value;
+  const group = document.getElementById("envTokenGroup");
+  const label = document.getElementById("envTokenLabel");
+  const input = document.getElementById("envToken");
+  const info = PROVIDER_TOKENS[provider];
+  if (info) {
+    group.style.display = "block";
+    label.textContent = info.label;
+    input.placeholder = info.placeholder;
+  } else {
+    group.style.display = "none";
+  }
+}
+async function createEnv() {
+  const name = document.getElementById("envName").value.trim();
+  const provider = document.getElementById("envProvider").value;
+  const token = document.getElementById("envToken")?.value?.trim();
+  if (!name) return;
+  try {
+    const tokenInfo = PROVIDER_TOKENS[provider];
+    if (token && tokenInfo && agents.length > 0) {
+      let vaultId = null;
+      const existing = await api("/v1/vaults?limit=50");
+      const found = (existing.data || []).find(v => v.name === "secrets");
+      if (found) { vaultId = found.id; }
+      else { const vault = await api("/v1/vaults", { method: "POST", body: JSON.stringify({ agent_id: agents[0].id, name: "secrets" }) }); vaultId = vault.id; }
+      await api("/v1/vaults/" + vaultId + "/entries/" + tokenInfo.key, { method: "PUT", body: JSON.stringify({ value: token }) });
+    }
+    await api("/v1/environments", { method: "POST", body: JSON.stringify({ name, config: { type: "cloud", provider } }) });
+    closeModal(); loadResources(); loadVaults(); showToast("Environment created");
+  } catch (e) { showToast(e.message, "error"); }
+}
+async function deleteEnv(id) {
+  try {
+    await api(\`/v1/environments/\${id}\`, { method: "DELETE" });
+    loadResources(); showToast("Environment deleted");
+  } catch (e) {
+    if (e.message && e.message.includes("active sessions")) {
+      if (confirm("This environment has active sessions. Archive them and delete?")) {
+        try {
+          const data = await api(\`/v1/sessions?environment_id=\${id}&limit=100\`);
+          for (const s of (data.data || [])) {
+            try { await api(\`/v1/sessions/\${s.id}/archive\`, { method: "POST" }); } catch {}
+          }
+          await api(\`/v1/environments/\${id}\`, { method: "DELETE" });
+          loadResources(); loadSessions(); showToast("Environment and sessions cleaned up");
+        } catch (e2) { showToast(e2.message, "error"); }
+      }
+    } else {
+      showToast(e.message, "error");
+    }
+  }
+}
+// ── Vaults/Secrets ──
+let vaults = [];
+async function loadVaults() {
+  try {
+    const data = await api("/v1/vaults?limit=50");
+    vaults = data.data || [];
+    renderVaults();
+  } catch (e) { console.error(e); }
+}
+async function renderVaults() {
+  const el = document.getElementById("vaultsList");
+  if (!el) return;
+  if (!vaults.length) { el.innerHTML = '<p style="color:var(--dim);font-size:12px;padding:8px">No vaults yet</p>'; return; }
+  let html = "";
+  for (const v of vaults) {
+    try {
+      const entries = await api(\`/v1/vaults/\${v.id}/entries\`);
+      const entryHtml = (entries.data || []).map(e =>
+        \`<div style="display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px solid var(--border)">
+          <span style="font-family:var(--mono);font-size:11px;color:var(--accent)">\${esc(e.key)}</span>
+          <div style="display:flex;gap:4px;align-items:center">
+            <span style="font-size:10px;color:var(--dim)">\${e.value.slice(0,8)}...\${e.value.slice(-4)}</span>
+            <button class="btn-icon" onclick="editVaultEntry('\${esc(v.id)}','\${esc(e.key)}')" title="Edit" style="font-size:10px">\${ICON.pencil}</button>
+            <button class="btn-icon" onclick="deleteVaultEntry('\${esc(v.id)}','\${esc(e.key)}')" title="Delete" style="font-size:10px">\${ICON.trash}</button>
+          </div>
+        </div>\`
+      ).join("");
+      html += \`<div style="margin-bottom:8px">
+        <div class="card-item">
+          <div><div class="name">\${esc(v.name)}</div><div class="detail">\${(entries.data || []).length} entries</div></div>
+          <div style="display:flex;gap:4px">
+            <button class="btn btn-sm btn-secondary" onclick="showAddEntryModal('\${esc(v.id)}')">+ Entry</button>
+            <button class="btn btn-sm btn-danger" onclick="deleteVault('\${esc(v.id)}')">Delete</button>
+          </div>
+        </div>
+        \${entryHtml}
+      </div>\`;
+    } catch (e) { console.error(e); }
+  }
+  el.innerHTML = html || '<p style="color:var(--dim);font-size:12px;padding:8px">No vaults</p>';
+}
+function showCreateVaultModal() {
+  document.getElementById("modals").innerHTML = \`<div class="modal-overlay" onclick="if(event.target===this)closeModal()">
+    <div class="modal">
+      <h2>Create Vault</h2>
+      <div class="form-group"><label class="form-label">Agent</label>
+        <select class="form-select" id="vaultAgent" style="width:100%">\${agents.map(a => \`<option value="\${a.id}">\${esc(a.name)}</option>\`).join("")}</select>
+      </div>
+      <div class="form-group"><label class="form-label">Vault Name</label><input class="form-input" id="vaultName" value="secrets" style="width:100%" /></div>
+      <div class="modal-actions">
+        <button class="btn btn-secondary" onclick="closeModal()">Cancel</button>
+        <button class="btn btn-primary" onclick="createVault()">Create</button>
+      </div>
+    </div>
+  </div>\`;
+}
+async function createVault() {
+  const agentId = document.getElementById("vaultAgent")?.value;
+  const name = document.getElementById("vaultName")?.value?.trim();
+  if (!agentId || !name) return;
+  try {
+    await api("/v1/vaults", { method: "POST", body: JSON.stringify({ agent_id: agentId, name }) });
+    closeModal(); loadVaults(); showToast("Vault created");
+  } catch (e) { showToast(e.message, "error"); }
+}
+async function deleteVault(id) {
+  try { await api(\`/v1/vaults/\${id}\`, { method: "DELETE" }); loadVaults(); showToast("Vault deleted"); }
+  catch (e) { showToast(e.message, "error"); }
+}
+function showAddEntryModal(vaultId) {
+  document.getElementById("modals").innerHTML = \`<div class="modal-overlay" onclick="if(event.target===this)closeModal()">
+    <div class="modal">
+      <h2>Add Secret</h2>
+      <div class="form-group"><label class="form-label">Key</label>
+        <select class="form-select" id="entryKey" style="width:100%">
+          <option value="ANTHROPIC_API_KEY">ANTHROPIC_API_KEY</option>
+          <option value="CLAUDE_CODE_OAUTH_TOKEN">CLAUDE_CODE_OAUTH_TOKEN</option>
+          <option value="OPENAI_API_KEY">OPENAI_API_KEY</option>
+          <option value="SPRITE_TOKEN">SPRITE_TOKEN</option>
+          <option value="custom">Custom key...</option>
+        </select>
+      </div>
+      <div class="form-group" id="customKeyGroup" style="display:none"><label class="form-label">Custom Key Name</label><input class="form-input" id="customKeyName" style="width:100%" /></div>
+      <div class="form-group"><label class="form-label">Value</label><input class="form-input" id="entryValue" type="password" style="width:100%" /></div>
+      <div class="modal-actions">
+        <button class="btn btn-secondary" onclick="closeModal()">Cancel</button>
+        <button class="btn btn-primary" onclick="addEntry('\${esc(vaultId)}')">Save</button>
+      </div>
+    </div>
+  </div>\`;
+  document.getElementById("entryKey").addEventListener("change", (e) => {
+    document.getElementById("customKeyGroup").style.display = e.target.value === "custom" ? "block" : "none";
+  });
+}
+async function addEntry(vaultId) {
+  let key = document.getElementById("entryKey")?.value;
+  if (key === "custom") key = document.getElementById("customKeyName")?.value?.trim();
+  const value = document.getElementById("entryValue")?.value;
+  if (!key || !value) { showToast("Key and value required", "error"); return; }
+  try {
+    await api(\`/v1/vaults/\${vaultId}/entries/\${key}\`, { method: "PUT", body: JSON.stringify({ value }) });
+    closeModal(); loadVaults(); showToast("Secret saved");
+  } catch (e) { showToast(e.message, "error"); }
+}
+function editVaultEntry(vaultId, key) {
+  document.getElementById("modals").innerHTML = \`<div class="modal-overlay" onclick="if(event.target===this)closeModal()">
+    <div class="modal">
+      <h2>Edit \${esc(key)}</h2>
+      <div class="form-group"><label class="form-label">New Value</label><input class="form-input" id="editEntryValue" type="password" style="width:100%" /></div>
+      <div class="modal-actions">
+        <button class="btn btn-secondary" onclick="closeModal()">Cancel</button>
+        <button class="btn btn-primary" onclick="updateEntry('\${esc(vaultId)}','\${esc(key)}')">Save</button>
+      </div>
+    </div>
+  </div>\`;
+}
+async function updateEntry(vaultId, key) {
+  const value = document.getElementById("editEntryValue")?.value;
+  if (!value) { showToast("Value required", "error"); return; }
+  try {
+    await api(\`/v1/vaults/\${vaultId}/entries/\${key}\`, { method: "PUT", body: JSON.stringify({ value }) });
+    closeModal(); loadVaults(); showToast("Secret updated");
+  } catch (e) { showToast(e.message, "error"); }
+}
+async function deleteVaultEntry(vaultId, key) {
+  try { await api(\`/v1/vaults/\${vaultId}/entries/\${key}\`, { method: "DELETE" }); loadVaults(); showToast("Secret deleted"); }
+  catch (e) { showToast(e.message, "error"); }
+}
+// ═══════════════════════════════════════════════════════════════════
+// EVENTS
+// ═══════════════════════════════════════════════════════════════════
+async function loadSessionsForEvents() {
+  try {
+    const data = await api("/v1/sessions?limit=50&order=desc");
+    const select = document.getElementById("eventsSessionSelect");
+    select.innerHTML = '<option value="">Select session...</option>' +
+      (data.data || []).map((s) => \`<option value="\${s.id}">\${esc(s.title || s.id.slice(0, 20))} (\${s.status})</option>\`).join("");
+  } catch (e) { console.error(e); }
+}
+async function loadEvents() {
+  const sessionId = document.getElementById("eventsSessionSelect").value;
+  if (!sessionId) return;
+  try {
+    const data = await api(\`/v1/sessions/\${sessionId}/events?limit=200&order=asc\`);
+    allEvents = (data.data || []).map((evt, i, arr) => ({
+      ...evt,
+      deltaMs: i > 0 && evt.processed_at && arr[i-1].processed_at
+        ? new Date(evt.processed_at) - new Date(arr[i-1].processed_at)
+        : null,
+    }));
+    expandedEventIds.clear();
+    renderEvents();
+  } catch (e) { showToast(e.message, "error"); }
+}
+function renderEvents() {
+  const el = document.getElementById("eventsList");
+  const stats = document.getElementById("eventsStats");
+  if (!allEvents.length) { el.innerHTML = '<div class="empty-state"><p>No events</p></div>'; stats.textContent = ""; return; }
+  let totalIn = 0, totalOut = 0;
+  allEvents.forEach((e) => {
+    if (e.model_usage) { totalIn += e.model_usage.input_tokens || 0; totalOut += e.model_usage.output_tokens || 0; }
+  });
+  stats.textContent = \`\${allEvents.length} events\` + (totalIn ? \` · \${totalIn}↓ \${totalOut}↑ tokens\` : "");
+  el.innerHTML = allEvents.map((evt) => {
+    const expanded = expandedEventIds.has(evt.id);
+    const badge = badgeClass(evt.type);
+    let preview = "";
+    if (evt.type === "user.message" || evt.type === "agent.message") {
+      const text = (evt.content || []).map((b) => b.text || "").join("");
+      preview = text.length > 100 ? text.slice(0, 100) + "..." : text;
+    } else if (evt.name) { preview = evt.name; }
+    let tokens = "";
+    if (evt.model_usage) tokens = \`<span class="tokens">\${evt.model_usage.input_tokens || 0}↓ \${evt.model_usage.output_tokens || 0}↑</span>\`;
+    return \`<div class="event-row" onclick="toggleEvent('\${esc(evt.id)}')">
+      <span class="seq">\${evt.seq}</span>
+      <span class="badge \${badge}">\${evt.type}</span>
+      <span class="preview">\${esc(preview)}</span>
+      \${tokens}
+      \${evt.deltaMs != null ? \`<span class="delta">+\${evt.deltaMs}ms</span>\` : ''}
+    </div>
+    \${expanded ? \`<div class="event-detail"><pre>\${esc(JSON.stringify(evt, null, 2))}</pre></div>\` : ''}\`;
+  }).join("");
+}
+function toggleEvent(id) {
+  expandedEventIds.has(id) ? expandedEventIds.delete(id) : expandedEventIds.add(id);
+  renderEvents();
+}
+function badgeClass(type) {
+  if (type.startsWith("user.")) return "badge-user";
+  if (type.startsWith("agent.")) return "badge-agent";
+  if (type.startsWith("session.error")) return "badge-error";
+  if (type.startsWith("session.")) return "badge-status";
+  if (type.startsWith("span.")) return "badge-span";
+  return "badge-idle";
+}
+function copyEvents() {
+  navigator.clipboard.writeText(JSON.stringify(allEvents, null, 2));
+  showToast("Copied JSON");
+}
+// ── Util ──
+function esc(s) { if (!s) return ""; const d = document.createElement("div"); d.textContent = s; return d.innerHTML; }
+function renderMarkdown(text) {
+  if (typeof marked !== "undefined") {
+    const html = marked.parse(text);
+    return typeof DOMPurify !== "undefined" ? DOMPurify.sanitize(html) : html;
+  }
+  return '<p>' + esc(text).replace(/\\n\\n/g, '</p><p>').replace(/\\n/g, '<br>') + '</p>';
+}
+</script>
+</body>
+</html>
+`;
+const UI_VERSION = "77929c44";
+export async function handleGetUI(opts?: { apiKey?: string }): Promise<Response> {
+  const inject = opts?.apiKey
+    ? `<script>window.__MA_API_KEY__ = "${opts.apiKey}";</script>`
+    : "";
+  const html = HTML_TEMPLATE.replace("__INJECT__", inject);
+  return new Response(html, {
+    headers: {
+      "content-type": "text/html; charset=utf-8",
+      "cache-control": "no-store, no-cache, must-revalidate, max-age=0",
+      "pragma": "no-cache",
+      "expires": "0",
+      "etag": UI_VERSION,
+    },
+  });
+}