npm - @poncho-ai/cli - Versions diffs - 0.12.0 → 0.14.0 - Mend

@poncho-ai/cli 0.12.0 → 0.14.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 (12) hide show

package/.turbo/turbo-build.log +5 -5
package/CHANGELOG.md +36 -0
package/dist/{chunk-XIFWXRUB.js → chunk-A32BXZKP.js} +1577 -196
package/dist/cli.js +1 -1
package/dist/index.js +1 -1
package/dist/{run-interactive-ink-64QEOUXL.js → run-interactive-ink-SLWDVTDX.js} +1 -1
package/package.json +4 -3
package/src/api-docs.ts +674 -0
package/src/index.ts +413 -40
package/src/init-feature-context.ts +5 -0
package/src/init-onboarding.ts +23 -2
package/src/web-ui.ts +559 -155

package/dist/{chunk-XIFWXRUB.js → chunk-A32BXZKP.js} RENAMED Viewed

@@ -22,6 +22,11 @@ import {
   resolveStateConfig
 } from "@poncho-ai/harness";
 import { getTextContent } from "@poncho-ai/sdk";
+import {
+  AgentBridge,
+  ResendAdapter,
+  SlackAdapter
+} from "@poncho-ai/messaging";
 import Busboy from "busboy";
 import { Command } from "commander";
 import dotenv from "dotenv";
@@ -254,7 +259,8 @@ var renderWebUiHtml = (options) => {
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
-  <meta name="theme-color" content="#000000">
+  <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
+  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <meta name="apple-mobile-web-app-title" content="${agentName}">
@@ -264,12 +270,168 @@ var renderWebUiHtml = (options) => {
   <title>${agentName}</title>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata:400,700">
   <style>
+    :root {
+      color-scheme: light dark;
+      --bg: #000;
+      --bg-alt: #0a0a0a;
+      --bg-elevated: #111;
+      --fg: #ededed;
+      --fg-strong: #fff;
+      --fg-2: #888;
+      --fg-3: #999;
+      --fg-4: #777;
+      --fg-5: #666;
+      --fg-6: #555;
+      --fg-7: #444;
+      --fg-8: #333;
+      --fg-tool: #8a8a8a;
+      --fg-tool-code: #bcbcbc;
+      --fg-tool-item: #d6d6d6;
+      --fg-approval-label: #b0b0b0;
+      --fg-approval-input: #cfcfcf;
+      --fg-approval-btn: #f0f0f0;
+      --accent: #ededed;
+      --accent-fg: #000;
+      --accent-hover: #fff;
+      --stop-bg: #4a4a4a;
+      --stop-fg: #fff;
+      --stop-hover: #565656;
+      --border-1: rgba(255,255,255,0.06);
+      --border-2: rgba(255,255,255,0.08);
+      --border-3: rgba(255,255,255,0.1);
+      --border-4: rgba(255,255,255,0.12);
+      --border-5: rgba(255,255,255,0.18);
+      --border-focus: rgba(255,255,255,0.2);
+      --border-hover: rgba(255,255,255,0.25);
+      --border-drag: rgba(255,255,255,0.4);
+      --surface-1: rgba(255,255,255,0.02);
+      --surface-2: rgba(255,255,255,0.03);
+      --surface-3: rgba(255,255,255,0.04);
+      --surface-4: rgba(255,255,255,0.06);
+      --surface-5: rgba(255,255,255,0.08);
+      --surface-6: rgba(255,255,255,0.1);
+      --surface-7: rgba(255,255,255,0.12);
+      --surface-8: rgba(255,255,255,0.14);
+      --chip-bg: rgba(0,0,0,0.6);
+      --chip-bg-hover: rgba(0,0,0,0.75);
+      --backdrop: rgba(0,0,0,0.6);
+      --lightbox-bg: rgba(0,0,0,0.85);
+      --inset-1: rgba(0,0,0,0.16);
+      --inset-2: rgba(0,0,0,0.25);
+      --file-badge-bg: rgba(0,0,0,0.2);
+      --file-badge-fg: rgba(255,255,255,0.8);
+      --error: #ff4444;
+      --error-soft: #ff6b6b;
+      --error-alt: #ff6666;
+      --error-bg: rgba(255,68,68,0.08);
+      --error-border: rgba(255,68,68,0.25);
+      --tool-done: #6a9955;
+      --tool-error: #f48771;
+      --approve: #78e7a6;
+      --approve-border: rgba(58,208,122,0.45);
+      --deny: #f59b9b;
+      --deny-border: rgba(224,95,95,0.45);
+      --scrollbar: rgba(255,255,255,0.1);
+      --scrollbar-hover: rgba(255,255,255,0.16);
+    }
+    @media (prefers-color-scheme: light) {
+      :root {
+        --bg: #ffffff;
+        --bg-alt: #f5f5f5;
+        --bg-elevated: #e8e8e8;
+        --fg: #1a1a1a;
+        --fg-strong: #000;
+        --fg-2: #666;
+        --fg-3: #555;
+        --fg-4: #777;
+        --fg-5: #888;
+        --fg-6: #888;
+        --fg-7: #aaa;
+        --fg-8: #bbb;
+        --fg-tool: #666;
+        --fg-tool-code: #444;
+        --fg-tool-item: #333;
+        --fg-approval-label: #666;
+        --fg-approval-input: #444;
+        --fg-approval-btn: #1a1a1a;
+        --accent: #1a1a1a;
+        --accent-fg: #fff;
+        --accent-hover: #000;
+        --stop-bg: #d4d4d4;
+        --stop-fg: #333;
+        --stop-hover: #c4c4c4;
+        --border-1: rgba(0,0,0,0.06);
+        --border-2: rgba(0,0,0,0.08);
+        --border-3: rgba(0,0,0,0.1);
+        --border-4: rgba(0,0,0,0.1);
+        --border-5: rgba(0,0,0,0.15);
+        --border-focus: rgba(0,0,0,0.2);
+        --border-hover: rgba(0,0,0,0.2);
+        --border-drag: rgba(0,0,0,0.3);
+        --surface-1: rgba(0,0,0,0.02);
+        --surface-2: rgba(0,0,0,0.03);
+        --surface-3: rgba(0,0,0,0.03);
+        --surface-4: rgba(0,0,0,0.04);
+        --surface-5: rgba(0,0,0,0.05);
+        --surface-6: rgba(0,0,0,0.07);
+        --surface-7: rgba(0,0,0,0.08);
+        --surface-8: rgba(0,0,0,0.1);
+        --chip-bg: rgba(255,255,255,0.8);
+        --chip-bg-hover: rgba(255,255,255,0.9);
+        --backdrop: rgba(0,0,0,0.3);
+        --lightbox-bg: rgba(0,0,0,0.75);
+        --inset-1: rgba(0,0,0,0.04);
+        --inset-2: rgba(0,0,0,0.06);
+        --file-badge-bg: rgba(0,0,0,0.05);
+        --file-badge-fg: rgba(0,0,0,0.7);
+        --error: #dc2626;
+        --error-soft: #ef4444;
+        --error-alt: #ef4444;
+        --error-bg: rgba(220,38,38,0.06);
+        --error-border: rgba(220,38,38,0.2);
+        --tool-done: #16a34a;
+        --tool-error: #dc2626;
+        --approve: #16a34a;
+        --approve-border: rgba(22,163,74,0.35);
+        --deny: #dc2626;
+        --deny-border: rgba(220,38,38,0.3);
+        --scrollbar: rgba(0,0,0,0.12);
+        --scrollbar-hover: rgba(0,0,0,0.2);
+      }
+    }
     * { box-sizing: border-box; margin: 0; padding: 0; }
     html, body { height: 100vh; overflow: hidden; overscroll-behavior: none; touch-action: pan-y; }
     body {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
-      background: #000;
-      color: #ededed;
+      background: var(--bg);
+      color: var(--fg);
       font-size: 14px;
       line-height: 1.5;
       -webkit-font-smoothing: antialiased;
@@ -277,7 +439,7 @@ var renderWebUiHtml = (options) => {
     }
     button, input, textarea { font: inherit; color: inherit; }
     .hidden { display: none !important; }
-    a { color: #ededed; }
+    a { color: var(--fg); }
     /* Auth */
     .auth {
@@ -285,39 +447,39 @@ var renderWebUiHtml = (options) => {
       display: grid;
       place-items: center;
       padding: 20px;
-      background: #000;
+      background: var(--bg);
     }
     .auth-card {
       width: min(400px, 90vw);
     }
     .auth-shell {
-      background: #0a0a0a;
-      border: 1px solid rgba(255,255,255,0.1);
+      background: var(--bg-alt);
+      border: 1px solid var(--border-3);
       border-radius: 9999px;
       display: flex;
       align-items: center;
       padding: 4px 6px 4px 18px;
       transition: border-color 0.15s;
     }
-    .auth-shell:focus-within { border-color: rgba(255,255,255,0.2); }
+    .auth-shell:focus-within { border-color: var(--border-focus); }
     .auth-input {
       flex: 1;
       background: transparent;
       border: 0;
       outline: none;
-      color: #ededed;
+      color: var(--fg);
       padding: 10px 0 8px;
       font-size: 14px;
       margin-top: -2px;
     }
-    .auth-input::placeholder { color: #444; }
+    .auth-input::placeholder { color: var(--fg-7); }
     .auth-submit {
       width: 32px;
       height: 32px;
-      background: #ededed;
+      background: var(--accent);
       border: 0;
       border-radius: 50%;
-      color: #000;
+      color: var(--accent-fg);
       cursor: pointer;
       display: grid;
       place-items: center;
@@ -325,19 +487,19 @@ var renderWebUiHtml = (options) => {
       margin-bottom: 2px;
       transition: background 0.15s;
     }
-    .auth-submit:hover { background: #fff; }
-    .error { color: #ff4444; font-size: 13px; min-height: 16px; }
+    .auth-submit:hover { background: var(--accent-hover); }
+    .error { color: var(--error); font-size: 13px; min-height: 16px; }
     .message-error {
-      background: rgba(255,68,68,0.08);
-      border: 1px solid rgba(255,68,68,0.25);
+      background: var(--error-bg);
+      border: 1px solid var(--error-border);
       border-radius: 10px;
-      color: #ff6b6b;
+      color: var(--error-soft);
       padding: 12px 16px;
       font-size: 13px;
       line-height: 1.5;
       max-width: 600px;
     }
-    .message-error strong { color: #ff4444; }
+    .message-error strong { color: var(--error); }
     /* Layout - use fixed positioning with explicit dimensions */
     .shell {
@@ -369,8 +531,8 @@ var renderWebUiHtml = (options) => {
     }
     .sidebar {
       width: 260px;
-      background: #000;
-      border-right: 1px solid rgba(255,255,255,0.06);
+      background: var(--bg);
+      border-right: 1px solid var(--border-1);
       display: flex;
       flex-direction: column;
       padding: 12px 8px;
@@ -378,7 +540,7 @@ var renderWebUiHtml = (options) => {
     .new-chat-btn {
       background: transparent;
       border: 0;
-      color: #888;
+      color: var(--fg-2);
       border-radius: 12px;
       height: 36px;
       padding: 0 10px;
@@ -389,7 +551,7 @@ var renderWebUiHtml = (options) => {
       cursor: pointer;
       transition: background 0.15s, color 0.15s;
     }
-    .new-chat-btn:hover { color: #ededed; }
+    .new-chat-btn:hover { color: var(--fg); }
     .new-chat-btn svg { width: 16px; height: 16px; }
     .conversation-list {
       flex: 1;
@@ -409,16 +571,16 @@ var renderWebUiHtml = (options) => {
       cursor: pointer;
       font-size: 13px;
       line-height: 36px;
-      color: #555;
+      color: var(--fg-6);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       position: relative;
       transition: color 0.15s;
     }
-    .conversation-item:hover { color: #999; }
+    .conversation-item:hover { color: var(--fg-3); }
     .conversation-item.active {
-      color: #ededed;
+      color: var(--fg);
     }
     .conversation-item .delete-btn {
       position: absolute;
@@ -426,9 +588,9 @@ var renderWebUiHtml = (options) => {
       top: 0;
       bottom: 0;
       opacity: 0;
-      background: #000;
+      background: var(--bg);
       border: 0;
-      color: #444;
+      color: var(--fg-7);
       padding: 0 8px;
       border-radius: 0 4px 4px 0;
       cursor: pointer;
@@ -439,7 +601,7 @@ var renderWebUiHtml = (options) => {
       transition: opacity 0.15s, color 0.15s;
     }
     .conversation-item:hover .delete-btn { opacity: 1; }
-    .conversation-item.active .delete-btn { background: rgba(0,0,0,1); }
+    .conversation-item.active .delete-btn { background: var(--bg); }
     .conversation-item .delete-btn::before {
       content: "";
       position: absolute;
@@ -447,23 +609,23 @@ var renderWebUiHtml = (options) => {
       top: 0;
       bottom: 0;
       width: 24px;
-      background: linear-gradient(to right, transparent, #000);
+      background: linear-gradient(to right, transparent, var(--bg));
       pointer-events: none;
     }
     .conversation-item.active .delete-btn::before {
-      background: linear-gradient(to right, transparent, rgba(0,0,0,1));
+      background: linear-gradient(to right, transparent, var(--bg));
     }
-    .conversation-item .delete-btn:hover { color: #888; }
+    .conversation-item .delete-btn:hover { color: var(--fg-2); }
     .conversation-item .delete-btn.confirming {
       opacity: 1;
       width: auto;
       padding: 0 8px;
       font-size: 11px;
-      color: #ff4444;
+      color: var(--error);
       border-radius: 3px;
     }
     .conversation-item .delete-btn.confirming:hover {
-      color: #ff6666;
+      color: var(--error-alt);
     }
     .sidebar-footer {
       margin-top: auto;
@@ -472,7 +634,7 @@ var renderWebUiHtml = (options) => {
     .logout-btn {
       background: transparent;
       border: 0;
-      color: #555;
+      color: var(--fg-6);
       width: 100%;
       padding: 8px 10px;
       text-align: left;
@@ -481,10 +643,10 @@ var renderWebUiHtml = (options) => {
       font-size: 13px;
       transition: color 0.15s, background 0.15s;
     }
-    .logout-btn:hover { color: #888; }
+    .logout-btn:hover { color: var(--fg-2); }
     /* Main */
-    .main { flex: 1; display: flex; flex-direction: column; min-width: 0; max-width: 100%; background: #000; overflow: hidden; }
+    .main { flex: 1; display: flex; flex-direction: column; min-width: 0; max-width: 100%; background: var(--bg); overflow: hidden; }
     .topbar {
       height: calc(52px + env(safe-area-inset-top, 0px));
       padding-top: env(safe-area-inset-top, 0px);
@@ -493,8 +655,8 @@ var renderWebUiHtml = (options) => {
       justify-content: center;
       font-size: 13px;
       font-weight: 500;
-      color: #888;
-      border-bottom: 1px solid rgba(255,255,255,0.06);
+      color: var(--fg-2);
+      border-bottom: 1px solid var(--border-1);
       position: relative;
       flex-shrink: 0;
     }
@@ -513,7 +675,7 @@ var renderWebUiHtml = (options) => {
       bottom: 4px; /* Position from bottom of topbar content area */
       background: transparent;
       border: 0;
-      color: #666;
+      color: var(--fg-5);
       width: 44px;
       height: 44px;
       border-radius: 6px;
@@ -523,7 +685,7 @@ var renderWebUiHtml = (options) => {
       z-index: 10;
       -webkit-tap-highlight-color: transparent;
     }
-    .sidebar-toggle:hover { color: #ededed; }
+    .sidebar-toggle:hover { color: var(--fg); }
     .topbar-new-chat {
       display: none;
       position: absolute;
@@ -531,7 +693,7 @@ var renderWebUiHtml = (options) => {
       bottom: 4px;
       background: transparent;
       border: 0;
-      color: #666;
+      color: var(--fg-5);
       width: 44px;
       height: 44px;
       border-radius: 6px;
@@ -540,7 +702,7 @@ var renderWebUiHtml = (options) => {
       z-index: 10;
       -webkit-tap-highlight-color: transparent;
     }
-    .topbar-new-chat:hover { color: #ededed; }
+    .topbar-new-chat:hover { color: var(--fg); }
     .topbar-new-chat svg { width: 16px; height: 16px; }
     /* Messages */
@@ -552,8 +714,8 @@ var renderWebUiHtml = (options) => {
     .assistant-avatar {
       width: 24px;
       height: 24px;
-      background: #ededed;
-      color: #000;
+      background: var(--accent);
+      color: var(--accent-fg);
       border-radius: 6px;
       display: grid;
       place-items: center;
@@ -564,7 +726,7 @@ var renderWebUiHtml = (options) => {
     }
     .assistant-content {
       line-height: 1.65;
-      color: #ededed;
+      color: var(--fg);
       font-size: 14px;
       min-width: 0;
       max-width: 100%;
@@ -576,32 +738,32 @@ var renderWebUiHtml = (options) => {
     .assistant-content p:last-child { margin-bottom: 0; }
     .assistant-content ul, .assistant-content ol { margin: 8px 0; padding-left: 20px; }
     .assistant-content li { margin: 4px 0; }
-    .assistant-content strong { font-weight: 600; color: #fff; }
+    .assistant-content strong { font-weight: 600; color: var(--fg-strong); }
     .assistant-content h2 {
       font-size: 16px;
       font-weight: 600;
       letter-spacing: -0.02em;
       margin: 20px 0 8px;
-      color: #fff;
+      color: var(--fg-strong);
     }
     .assistant-content h3 {
       font-size: 14px;
       font-weight: 600;
       letter-spacing: -0.01em;
       margin: 16px 0 6px;
-      color: #fff;
+      color: var(--fg-strong);
     }
     .assistant-content code {
-      background: rgba(255,255,255,0.06);
-      border: 1px solid rgba(255,255,255,0.06);
+      background: var(--surface-4);
+      border: 1px solid var(--border-1);
       padding: 2px 5px;
       border-radius: 4px;
       font-family: ui-monospace, "SF Mono", "Fira Code", monospace;
       font-size: 0.88em;
     }
     .assistant-content pre {
-      background: #0a0a0a;
-      border: 1px solid rgba(255,255,255,0.06);
+      background: var(--bg-alt);
+      border: 1px solid var(--border-1);
       padding: 14px 16px;
       border-radius: 8px;
       overflow-x: auto;
@@ -618,33 +780,33 @@ var renderWebUiHtml = (options) => {
       margin: 8px 0;
       font-size: 12px;
       line-height: 1.45;
-      color: #8a8a8a;
+      color: var(--fg-tool);
     }
     .tool-activity-inline code {
       font-family: ui-monospace, "SF Mono", "Fira Code", monospace;
-      background: rgba(255,255,255,0.04);
-      border: 1px solid rgba(255,255,255,0.08);
+      background: var(--surface-3);
+      border: 1px solid var(--border-2);
       padding: 4px 8px;
       border-radius: 6px;
-      color: #bcbcbc;
+      color: var(--fg-tool-code);
       font-size: 11px;
     }
     .tool-status {
-      color: #8a8a8a;
+      color: var(--fg-tool);
       font-style: italic;
     }
     .tool-done {
-      color: #6a9955;
+      color: var(--tool-done);
     }
     .tool-error {
-      color: #f48771;
+      color: var(--tool-error);
     }
     .assistant-content table {
       border-collapse: collapse;
       width: 100%;
       margin: 14px 0;
       font-size: 13px;
-      border: 1px solid rgba(255,255,255,0.08);
+      border: 1px solid var(--border-2);
       border-radius: 8px;
       overflow: hidden;
       display: block;
@@ -653,17 +815,17 @@ var renderWebUiHtml = (options) => {
       white-space: nowrap;
     }
     .assistant-content th {
-      background: rgba(255,255,255,0.06);
+      background: var(--surface-4);
       padding: 10px 12px;
       text-align: left;
       font-weight: 600;
-      border-bottom: 1px solid rgba(255,255,255,0.12);
-      color: #fff;
+      border-bottom: 1px solid var(--border-4);
+      color: var(--fg-strong);
       min-width: 100px;
     }
     .assistant-content td {
       padding: 10px 12px;
-      border-bottom: 1px solid rgba(255,255,255,0.06);
+      border-bottom: 1px solid var(--border-1);
       width: 100%;
       min-width: 100px;
     }
@@ -671,22 +833,22 @@ var renderWebUiHtml = (options) => {
       border-bottom: none;
     }
     .assistant-content tbody tr:hover {
-      background: rgba(255,255,255,0.02);
+      background: var(--surface-1);
     }
     .assistant-content hr {
       border: 0;
-      border-top: 1px solid rgba(255,255,255,0.1);
+      border-top: 1px solid var(--border-3);
       margin: 20px 0;
     }
     .tool-activity {
       margin-top: 12px;
       margin-bottom: 12px;
-      border: 1px solid rgba(255,255,255,0.08);
-      background: rgba(255,255,255,0.03);
+      border: 1px solid var(--border-2);
+      background: var(--surface-2);
       border-radius: 10px;
       font-size: 12px;
       line-height: 1.45;
-      color: #bcbcbc;
+      color: var(--fg-tool-code);
       width: 300px;
     }
     .assistant-content > .tool-activity:first-child {
@@ -711,12 +873,12 @@ var renderWebUiHtml = (options) => {
       font-size: 11px;
       text-transform: uppercase;
       letter-spacing: 0.06em;
-      color: #8a8a8a;
+      color: var(--fg-tool);
       font-weight: 600;
     }
     .tool-activity-caret {
       margin-left: auto;
-      color: #8a8a8a;
+      color: var(--fg-tool);
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -738,28 +900,28 @@ var renderWebUiHtml = (options) => {
     }
     .tool-activity-item {
       font-family: ui-monospace, "SF Mono", "Fira Code", monospace;
-      background: rgba(255,255,255,0.04);
+      background: var(--surface-3);
       border-radius: 6px;
       padding: 4px 7px;
-      color: #d6d6d6;
+      color: var(--fg-tool-item);
     }
     .approval-requests {
-      border-top: 1px solid rgba(255,255,255,0.08);
+      border-top: 1px solid var(--border-2);
       padding: 10px 12px 12px;
       display: grid;
       gap: 8px;
-      background: rgba(0,0,0,0.16);
+      background: var(--inset-1);
     }
     .approval-requests-label {
       font-size: 11px;
       text-transform: uppercase;
       letter-spacing: 0.06em;
-      color: #b0b0b0;
+      color: var(--fg-approval-label);
       font-weight: 600;
     }
     .approval-request-item {
-      border: 1px solid rgba(255,255,255,0.1);
-      background: rgba(255,255,255,0.03);
+      border: 1px solid var(--border-3);
+      background: var(--surface-2);
       border-radius: 8px;
       padding: 8px;
       display: grid;
@@ -767,15 +929,15 @@ var renderWebUiHtml = (options) => {
     }
     .approval-request-tool {
       font-size: 12px;
-      color: #fff;
+      color: var(--fg-strong);
       font-weight: 600;
       overflow-wrap: anywhere;
     }
     .approval-request-input {
       font-family: ui-monospace, "SF Mono", "Fira Code", monospace;
       font-size: 11px;
-      color: #cfcfcf;
-      background: rgba(0,0,0,0.25);
+      color: var(--fg-approval-input);
+      background: var(--inset-2);
       border-radius: 6px;
       padding: 6px;
       overflow-wrap: anywhere;
@@ -788,32 +950,32 @@ var renderWebUiHtml = (options) => {
     }
     .approval-action-btn {
       border-radius: 6px;
-      border: 1px solid rgba(255,255,255,0.18);
-      background: rgba(255,255,255,0.06);
-      color: #f0f0f0;
+      border: 1px solid var(--border-5);
+      background: var(--surface-4);
+      color: var(--fg-approval-btn);
       font-size: 11px;
       font-weight: 600;
       padding: 4px 8px;
       cursor: pointer;
     }
     .approval-action-btn:hover {
-      background: rgba(255,255,255,0.12);
+      background: var(--surface-7);
     }
     .approval-action-btn.approve {
-      border-color: rgba(58, 208, 122, 0.45);
-      color: #78e7a6;
+      border-color: var(--approve-border);
+      color: var(--approve);
     }
     .approval-action-btn.deny {
-      border-color: rgba(224, 95, 95, 0.45);
-      color: #f59b9b;
+      border-color: var(--deny-border);
+      color: var(--deny);
     }
     .approval-action-btn[disabled] {
       opacity: 0.55;
       cursor: not-allowed;
     }
     .user-bubble {
-      background: #111;
-      border: 1px solid rgba(255,255,255,0.08);
+      background: var(--bg-elevated);
+      border: 1px solid var(--border-2);
       padding: 10px 16px;
       border-radius: 18px;
       max-width: 70%;
@@ -829,7 +991,7 @@ var renderWebUiHtml = (options) => {
       justify-content: center;
       height: 100%;
       gap: 16px;
-      color: #555;
+      color: var(--fg-6);
     }
     .empty-state .assistant-avatar {
       width: 36px;
@@ -839,7 +1001,7 @@ var renderWebUiHtml = (options) => {
     }
     .empty-state-text {
       font-size: 14px;
-      color: #555;
+      color: var(--fg-6);
     }
     .thinking-indicator {
       display: inline-block;
@@ -847,7 +1009,7 @@ var renderWebUiHtml = (options) => {
       font-size: 20px;
       line-height: 1;
       vertical-align: middle;
-      color: #ededed;
+      color: var(--fg);
       opacity: 0.5;
     }
     .thinking-status {
@@ -855,13 +1017,13 @@ var renderWebUiHtml = (options) => {
       align-items: center;
       gap: 8px;
       margin-top: 2px;
-      color: #8a8a8a;
+      color: var(--fg-tool);
       font-size: 14px;
       line-height: 1.65;
       font-weight: 400;
     }
     .thinking-status-label {
-      color: #8a8a8a;
+      color: var(--fg-tool);
       font-size: 14px;
       line-height: 1.65;
       font-weight: 400;
@@ -892,26 +1054,26 @@ var renderWebUiHtml = (options) => {
       right: 0;
       bottom: 100%;
       height: 48px;
-      background: linear-gradient(to top, #000 0%, transparent 100%);
+      background: linear-gradient(to top, var(--bg) 0%, transparent 100%);
       pointer-events: none;
     }
     .composer-inner { max-width: 680px; margin: 0 auto; }
     .composer-shell {
-      background: #0a0a0a;
-      border: 1px solid rgba(255,255,255,0.1);
+      background: var(--bg-alt);
+      border: 1px solid var(--border-3);
       border-radius: 24px;
       display: flex;
       align-items: end;
       padding: 4px 6px 4px 6px;
       transition: border-color 0.15s;
     }
-    .composer-shell:focus-within { border-color: rgba(255,255,255,0.2); }
+    .composer-shell:focus-within { border-color: var(--border-focus); }
     .composer-input {
       flex: 1;
       background: transparent;
       border: 0;
       outline: none;
-      color: #ededed;
+      color: var(--fg);
       min-height: 40px;
       max-height: 200px;
       resize: none;
@@ -920,14 +1082,14 @@ var renderWebUiHtml = (options) => {
       line-height: 1.5;
       margin-top: -4px;
     }
-    .composer-input::placeholder { color: #444; }
+    .composer-input::placeholder { color: var(--fg-7); }
     .send-btn {
       width: 32px;
       height: 32px;
-      background: #ededed;
+      background: var(--accent);
       border: 0;
       border-radius: 50%;
-      color: #000;
+      color: var(--accent-fg);
       cursor: pointer;
       display: grid;
       place-items: center;
@@ -935,21 +1097,79 @@ var renderWebUiHtml = (options) => {
       margin-bottom: 2px;
       transition: background 0.15s, opacity 0.15s;
     }
-    .send-btn:hover { background: #fff; }
+    .send-btn:hover { background: var(--accent-hover); }
     .send-btn.stop-mode {
-      background: #4a4a4a;
-      color: #fff;
+      background: var(--stop-bg);
+      color: var(--stop-fg);
     }
-    .send-btn.stop-mode:hover { background: #565656; }
+    .send-btn.stop-mode:hover { background: var(--stop-hover); }
     .send-btn:disabled { opacity: 0.2; cursor: default; }
-    .send-btn:disabled:hover { background: #ededed; }
+    .send-btn:disabled:hover { background: var(--accent); }
+    .send-btn-wrapper {
+      position: relative;
+      width: 36px;
+      height: 36px;
+      display: grid;
+      place-items: center;
+      flex-shrink: 0;
+      margin-bottom: 0;
+    }
+    .send-btn-wrapper .send-btn {
+      margin-bottom: 0;
+    }
+    .context-ring {
+      position: absolute;
+      inset: 0;
+      width: 36px;
+      height: 36px;
+      pointer-events: none;
+      transform: rotate(-90deg);
+    }
+    .context-ring-fill {
+      fill: none;
+      stroke: var(--bg-alt);
+      stroke-width: 3;
+      stroke-linecap: butt;
+      transition: stroke-dashoffset 0.4s ease, stroke 0.3s ease;
+    }
+    .send-btn-wrapper.stop-mode .context-ring-fill {
+      stroke: var(--fg-3);
+    }
+    .context-ring-fill.warning {
+      stroke: #e5a33d;
+    }
+    .context-ring-fill.critical {
+      stroke: #e55d4a;
+    }
+    .context-tooltip {
+      position: absolute;
+      bottom: calc(100% + 8px);
+      right: 0;
+      background: var(--bg-elevated);
+      border: 1px solid var(--border-3);
+      border-radius: 8px;
+      padding: 6px 10px;
+      font-size: 12px;
+      color: var(--fg-2);
+      white-space: nowrap;
+      pointer-events: none;
+      opacity: 0;
+      transform: translateY(4px);
+      transition: opacity 0.15s, transform 0.15s;
+      z-index: 10;
+    }
+    .send-btn-wrapper:hover .context-tooltip,
+    .send-btn-wrapper:focus-within .context-tooltip {
+      opacity: 1;
+      transform: translateY(0);
+    }
     .attach-btn {
       width: 32px;
       height: 32px;
-      background: rgba(255,255,255,0.08);
+      background: var(--surface-5);
       border: 0;
       border-radius: 50%;
-      color: #999;
+      color: var(--fg-3);
       cursor: pointer;
       display: grid;
       place-items: center;
@@ -958,7 +1178,7 @@ var renderWebUiHtml = (options) => {
       margin-right: 8px;
       transition: color 0.15s, background 0.15s;
     }
-    .attach-btn:hover { color: #ededed; background: rgba(255,255,255,0.14); }
+    .attach-btn:hover { color: var(--fg); background: var(--surface-8); }
     .attachment-preview {
       display: flex;
       gap: 8px;
@@ -969,12 +1189,12 @@ var renderWebUiHtml = (options) => {
       display: inline-flex;
       align-items: center;
       gap: 6px;
-      background: rgba(0, 0, 0, 0.6);
-      border: 1px solid rgba(255, 255, 255, 0.12);
+      background: var(--chip-bg);
+      border: 1px solid var(--border-4);
       border-radius: 9999px;
       padding: 4px 10px 4px 6px;
       font-size: 11px;
-      color: #777;
+      color: var(--fg-4);
       max-width: 200px;
       cursor: pointer;
       backdrop-filter: blur(6px);
@@ -982,9 +1202,9 @@ var renderWebUiHtml = (options) => {
       transition: color 0.15s, border-color 0.15s, background 0.15s;
     }
     .attachment-chip:hover {
-      color: #ededed;
-      border-color: rgba(255, 255, 255, 0.25);
-      background: rgba(0, 0, 0, 0.75);
+      color: var(--fg);
+      border-color: var(--border-hover);
+      background: var(--chip-bg-hover);
     }
     .attachment-chip img {
       width: 20px;
@@ -998,7 +1218,7 @@ var renderWebUiHtml = (options) => {
       width: 20px;
       height: 20px;
       border-radius: 50%;
-      background: rgba(255,255,255,0.1);
+      background: var(--surface-6);
       display: grid;
       place-items: center;
       font-size: 11px;
@@ -1006,13 +1226,13 @@ var renderWebUiHtml = (options) => {
     }
     .attachment-chip .remove-attachment {
       cursor: pointer;
-      color: #555;
+      color: var(--fg-6);
       font-size: 14px;
       margin-left: 2px;
       line-height: 1;
       transition: color 0.15s;
     }
-    .attachment-chip .remove-attachment:hover { color: #fff; }
+    .attachment-chip .remove-attachment:hover { color: var(--fg-strong); }
     .attachment-chip .filename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100px; }
     .user-bubble .user-file-attachments {
       display: flex;
@@ -1042,7 +1262,7 @@ var renderWebUiHtml = (options) => {
       transition: background 0.25s ease, backdrop-filter 0.25s ease;
     }
     .lightbox.active {
-      background: rgba(0,0,0,0.85);
+      background: var(--lightbox-bg);
       backdrop-filter: blur(8px);
     }
     .lightbox img {
@@ -1062,16 +1282,16 @@ var renderWebUiHtml = (options) => {
       display: inline-flex;
       align-items: center;
       gap: 4px;
-      background: rgba(0,0,0,0.2);
+      background: var(--file-badge-bg);
       border-radius: 6px;
       padding: 4px 8px;
       font-size: 12px;
-      color: rgba(255,255,255,0.8);
+      color: var(--file-badge-fg);
     }
     .drag-overlay {
       position: fixed;
       inset: 0;
-      background: rgba(0,0,0,0.6);
+      background: var(--backdrop);
       z-index: 9999;
       display: none;
       align-items: center;
@@ -1080,15 +1300,15 @@ var renderWebUiHtml = (options) => {
     }
     .drag-overlay.active { display: flex; }
     .drag-overlay-inner {
-      border: 2px dashed rgba(255,255,255,0.4);
+      border: 2px dashed var(--border-drag);
       border-radius: 16px;
       padding: 40px 60px;
-      color: #fff;
+      color: var(--fg-strong);
       font-size: 16px;
     }
     .disclaimer {
       text-align: center;
-      color: #333;
+      color: var(--fg-8);
       font-size: 12px;
       margin-top: 10px;
     }
@@ -1103,10 +1323,10 @@ var renderWebUiHtml = (options) => {
       align-items: center;
       gap: 6px;
       font-size: 11px;
-      color: #777;
+      color: var(--fg-4);
       text-decoration: none;
-      background: rgba(0, 0, 0, 0.6);
-      border: 1px solid rgba(255, 255, 255, 0.12);
+      background: var(--chip-bg);
+      border: 1px solid var(--border-4);
       border-radius: 9999px;
       padding: 4px 10px 4px 6px;
       backdrop-filter: blur(6px);
@@ -1114,9 +1334,9 @@ var renderWebUiHtml = (options) => {
       transition: color 0.15s, border-color 0.15s, background 0.15s;
     }
     .poncho-badge:hover {
-      color: #ededed;
-      border-color: rgba(255, 255, 255, 0.25);
-      background: rgba(0, 0, 0, 0.75);
+      color: var(--fg);
+      border-color: var(--border-hover);
+      background: var(--chip-bg-hover);
     }
     .poncho-badge-avatar {
       width: 16px;
@@ -1130,8 +1350,8 @@ var renderWebUiHtml = (options) => {
     /* Scrollbar */
     ::-webkit-scrollbar { width: 6px; }
     ::-webkit-scrollbar-track { background: transparent; }
-    ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
-    ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }
+    ::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 3px; }
+    ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }
     /* Mobile */
     @media (max-width: 768px) {
@@ -1161,7 +1381,7 @@ var renderWebUiHtml = (options) => {
       .sidebar-backdrop {
         position: fixed;
         inset: 0;
-        background: rgba(0,0,0,0.6);
+        background: var(--backdrop);
         z-index: 50;
         backdrop-filter: blur(2px);
         -webkit-backdrop-filter: blur(2px);
@@ -1236,9 +1456,15 @@ var renderWebUiHtml = (options) => {
             </button>
             <input id="file-input" type="file" multiple accept="image/*,video/*,application/pdf,.txt,.csv,.json,.html" style="display:none" />
             <textarea id="prompt" class="composer-input" placeholder="Send a message..." rows="1"></textarea>
-            <button id="send" class="send-btn" type="submit">
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 12V4M4 7l4-4 4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
-            </button>
+            <div class="send-btn-wrapper" id="send-btn-wrapper">
+              <svg class="context-ring" viewBox="0 0 36 36">
+                <circle class="context-ring-fill" id="context-ring-fill" cx="18" cy="18" r="14.5" />
+              </svg>
+              <button id="send" class="send-btn" type="submit">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 12V4M4 7l4-4 4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+              </button>
+              <div class="context-tooltip" id="context-tooltip"></div>
+            </div>
           </div>
         </div>
       </form>
@@ -1270,6 +1496,8 @@ var renderWebUiHtml = (options) => {
         confirmDeleteId: null,
         approvalRequestsInFlight: {},
         pendingFiles: [],
+        contextTokens: 0,
+        contextWindow: 0,
       };
       const agentInitial = document.body.dataset.agentInitial || "A";
@@ -1297,12 +1525,41 @@ var renderWebUiHtml = (options) => {
         attachmentPreview: $("attachment-preview"),
         dragOverlay: $("drag-overlay"),
         lightbox: $("lightbox"),
+        contextRingFill: $("context-ring-fill"),
+        contextTooltip: $("context-tooltip"),
+        sendBtnWrapper: $("send-btn-wrapper"),
       };
       const sendIconMarkup =
         '<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 12V4M4 7l4-4 4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
       const stopIconMarkup =
         '<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="4" y="4" width="8" height="8" rx="2" fill="currentColor"/></svg>';
+      const CONTEXT_RING_CIRCUMFERENCE = 2 * Math.PI * 14.5;
+      const formatTokenCount = (n) => {
+        if (n >= 1_000_000) return (n / 1_000_000).toFixed(1).replace(/\\.0$/, "") + "M";
+        if (n >= 1_000) return (n / 1_000).toFixed(1).replace(/\\.0$/, "") + "k";
+        return String(n);
+      };
+      const updateContextRing = () => {
+        const ring = elements.contextRingFill;
+        const tooltip = elements.contextTooltip;
+        if (!ring || !tooltip) return;
+        if (state.contextWindow <= 0) {
+          ring.style.strokeDasharray = String(CONTEXT_RING_CIRCUMFERENCE);
+          ring.style.strokeDashoffset = String(CONTEXT_RING_CIRCUMFERENCE);
+          tooltip.textContent = "";
+          return;
+        }
+        const ratio = Math.min(state.contextTokens / state.contextWindow, 1);
+        const offset = CONTEXT_RING_CIRCUMFERENCE * (1 - ratio);
+        ring.style.strokeDasharray = String(CONTEXT_RING_CIRCUMFERENCE);
+        ring.style.strokeDashoffset = String(offset);
+        ring.classList.toggle("warning", ratio >= 0.7 && ratio < 0.9);
+        ring.classList.toggle("critical", ratio >= 0.9);
+        const pct = (ratio * 100).toFixed(1).replace(/\\.0$/, "");
+        tooltip.textContent = formatTokenCount(state.contextTokens) + " / " + formatTokenCount(state.contextWindow) + " tokens (" + pct + "%)";
+      };
       const pushConversationUrl = (conversationId) => {
         const target = conversationId ? "/c/" + encodeURIComponent(conversationId) : "/";
         if (window.location.pathname !== target) {
@@ -1622,6 +1879,9 @@ var renderWebUiHtml = (options) => {
             if (state.activeConversationId === c.conversationId) {
               state.activeConversationId = null;
               state.activeMessages = [];
+              state.contextTokens = 0;
+              state.contextWindow = 0;
+              updateContextRing();
               pushConversationUrl(null);
               elements.chatTitle.textContent = "";
               renderMessages([]);
@@ -1718,8 +1978,14 @@ var renderWebUiHtml = (options) => {
             } else if (shouldRenderEmptyStreamingIndicator) {
               content.appendChild(createThinkingIndicator(getThinkingStatusLabel(m)));
             } else {
-              // Check for sections in _sections (streaming) or metadata.sections (stored)
-              const sections = m._sections || (m.metadata && m.metadata.sections);
+              // Merge stored sections (persisted) with live sections (from
+              // an active stream).  For normal messages only one source
+              // exists; for liveOnly reconnects both contribute.
+              const storedSections = (m.metadata && m.metadata.sections) || [];
+              const liveSections = m._sections || [];
+              const sections = liveSections.length > 0 && storedSections.length > 0
+                ? storedSections.concat(liveSections)
+                : liveSections.length > 0 ? liveSections : (storedSections.length > 0 ? storedSections : null);
               const pendingApprovals = Array.isArray(m._pendingApprovals) ? m._pendingApprovals : [];
               if (sections && sections.length > 0) {
@@ -1860,11 +2126,24 @@ var renderWebUiHtml = (options) => {
           payload.conversation.messages || [],
           payload.conversation.pendingApprovals || payload.pendingApprovals || [],
         );
+        state.contextTokens = 0;
+        state.contextWindow = 0;
+        updateContextRing();
         renderMessages(state.activeMessages, false, { forceScrollBottom: true });
         elements.prompt.focus();
+        if (payload.hasActiveRun && !state.isStreaming) {
+          setStreaming(true);
+          streamConversationEvents(conversationId, { liveOnly: true }).finally(() => {
+            if (state.activeConversationId === conversationId) {
+              setStreaming(false);
+              renderMessages(state.activeMessages, false);
+            }
+          });
+        }
       };
-      const streamConversationEvents = (conversationId) => {
+      const streamConversationEvents = (conversationId, options) => {
+        const liveOnly = options && options.liveOnly;
         return new Promise((resolve) => {
           const localMessages = state.activeMessages || [];
           const renderIfActiveConversation = (streaming) => {
@@ -1883,20 +2162,36 @@ var renderWebUiHtml = (options) => {
               _currentText: "",
               _currentTools: [],
               _pendingApprovals: [],
+              _activeActivities: [],
               metadata: { toolActivity: [] },
             };
             localMessages.push(assistantMessage);
             state.activeMessages = localMessages;
           }
-          if (!assistantMessage._sections) assistantMessage._sections = [];
-          if (!assistantMessage._currentText) assistantMessage._currentText = "";
-          if (!assistantMessage._currentTools) assistantMessage._currentTools = [];
-          if (!assistantMessage._activeActivities) assistantMessage._activeActivities = [];
-          if (!assistantMessage._pendingApprovals) assistantMessage._pendingApprovals = [];
-          if (!assistantMessage.metadata) assistantMessage.metadata = {};
-          if (!assistantMessage.metadata.toolActivity) assistantMessage.metadata.toolActivity = [];
-          const url = "/api/conversations/" + encodeURIComponent(conversationId) + "/events";
+          if (liveOnly) {
+            // Live-only mode: keep metadata.sections intact (the stored
+            // base content) and start _sections empty so it only collects
+            // NEW sections from live events.  The renderer merges both.
+            assistantMessage._sections = [];
+            assistantMessage._currentText = "";
+            assistantMessage._currentTools = [];
+            if (!assistantMessage._activeActivities) assistantMessage._activeActivities = [];
+            if (!assistantMessage._pendingApprovals) assistantMessage._pendingApprovals = [];
+            if (!assistantMessage.metadata) assistantMessage.metadata = {};
+            if (!assistantMessage.metadata.toolActivity) assistantMessage.metadata.toolActivity = [];
+          } else {
+            // Full replay mode: reset transient state so replayed events
+            // rebuild from scratch (the buffer has the full event history).
+            assistantMessage.content = "";
+            assistantMessage._sections = [];
+            assistantMessage._currentText = "";
+            assistantMessage._currentTools = [];
+            assistantMessage._activeActivities = [];
+            assistantMessage._pendingApprovals = [];
+            assistantMessage.metadata = { toolActivity: [] };
+          }
+          const url = "/api/conversations/" + encodeURIComponent(conversationId) + "/events" + (liveOnly ? "?live_only=true" : "");
           fetch(url, { credentials: "include" }).then((response) => {
             if (!response.ok || !response.body) {
               resolve(undefined);
@@ -1917,6 +2212,11 @@ var renderWebUiHtml = (options) => {
                     if (eventName === "stream:end") {
                       return;
                     }
+                    if (eventName === "run:started") {
+                      if (typeof payload.contextWindow === "number" && payload.contextWindow > 0) {
+                        state.contextWindow = payload.contextWindow;
+                      }
+                    }
                     if (eventName === "model:chunk") {
                       const chunk = String(payload.content || "");
                       if (assistantMessage._currentTools.length > 0 && chunk.length > 0) {
@@ -1930,6 +2230,12 @@ var renderWebUiHtml = (options) => {
                       assistantMessage._currentText += chunk;
                       renderIfActiveConversation(true);
                     }
+                    if (eventName === "model:response") {
+                      if (typeof payload.usage?.input === "number") {
+                        state.contextTokens = payload.usage.input;
+                        updateContextRing();
+                      }
+                    }
                     if (eventName === "tool:started") {
                       const toolName = payload.tool || "tool";
                       const startedActivity = addActiveActivityFromToolStart(
@@ -2002,6 +2308,75 @@ var renderWebUiHtml = (options) => {
                       assistantMessage.metadata.toolActivity.push(toolText);
                       renderIfActiveConversation(true);
                     }
+                    if (eventName === "tool:approval:required") {
+                      const toolName = payload.tool || "tool";
+                      const activeActivity = removeActiveActivityForTool(
+                        assistantMessage,
+                        toolName,
+                      );
+                      const detailFromPayload = describeToolStart(payload);
+                      const detail =
+                        (activeActivity && typeof activeActivity.detail === "string"
+                          ? activeActivity.detail.trim()
+                          : "") ||
+                        (detailFromPayload && typeof detailFromPayload.detail === "string"
+                          ? detailFromPayload.detail.trim()
+                          : "");
+                      const toolText =
+                        "- approval required \\x60" +
+                        toolName +
+                        "\\x60" +
+                        (detail ? " (" + detail + ")" : "");
+                      assistantMessage._currentTools.push(toolText);
+                      assistantMessage.metadata.toolActivity.push(toolText);
+                      const approvalId =
+                        typeof payload.approvalId === "string" ? payload.approvalId : "";
+                      if (approvalId) {
+                        const preview = safeJsonPreview(payload.input ?? {});
+                        const inputPreview = preview.length > 600 ? preview.slice(0, 600) + "..." : preview;
+                        if (!Array.isArray(assistantMessage._pendingApprovals)) {
+                          assistantMessage._pendingApprovals = [];
+                        }
+                        const exists = assistantMessage._pendingApprovals.some(
+                          (req) => req.approvalId === approvalId,
+                        );
+                        if (!exists) {
+                          assistantMessage._pendingApprovals.push({
+                            approvalId,
+                            tool: toolName,
+                            inputPreview,
+                            state: "pending",
+                          });
+                        }
+                      }
+                      renderIfActiveConversation(true);
+                    }
+                    if (eventName === "tool:approval:granted") {
+                      const toolText = "- approval granted";
+                      assistantMessage._currentTools.push(toolText);
+                      assistantMessage.metadata.toolActivity.push(toolText);
+                      const approvalId =
+                        typeof payload.approvalId === "string" ? payload.approvalId : "";
+                      if (approvalId && Array.isArray(assistantMessage._pendingApprovals)) {
+                        assistantMessage._pendingApprovals = assistantMessage._pendingApprovals.filter(
+                          (req) => req.approvalId !== approvalId,
+                        );
+                      }
+                      renderIfActiveConversation(true);
+                    }
+                    if (eventName === "tool:approval:denied") {
+                      const toolText = "- approval denied";
+                      assistantMessage._currentTools.push(toolText);
+                      assistantMessage.metadata.toolActivity.push(toolText);
+                      const approvalId =
+                        typeof payload.approvalId === "string" ? payload.approvalId : "";
+                      if (approvalId && Array.isArray(assistantMessage._pendingApprovals)) {
+                        assistantMessage._pendingApprovals = assistantMessage._pendingApprovals.filter(
+                          (req) => req.approvalId !== approvalId,
+                        );
+                      }
+                      renderIfActiveConversation(true);
+                    }
                     if (eventName === "run:completed") {
                       assistantMessage._activeActivities = [];
                       if (
@@ -2048,9 +2423,22 @@ var renderWebUiHtml = (options) => {
                     }
                     if (eventName === "run:error") {
                       assistantMessage._activeActivities = [];
+                      if (assistantMessage._currentTools.length > 0) {
+                        assistantMessage._sections.push({
+                          type: "tools",
+                          content: assistantMessage._currentTools,
+                        });
+                        assistantMessage._currentTools = [];
+                      }
+                      if (assistantMessage._currentText.length > 0) {
+                        assistantMessage._sections.push({
+                          type: "text",
+                          content: assistantMessage._currentText,
+                        });
+                        assistantMessage._currentText = "";
+                      }
                       const errMsg =
                         payload.error?.message || "Something went wrong";
-                      assistantMessage.content = "";
                       assistantMessage._error = errMsg;
                       renderIfActiveConversation(false);
                     }
@@ -2123,6 +2511,9 @@ var renderWebUiHtml = (options) => {
         elements.send.disabled = value ? !canStop : false;
         elements.send.innerHTML = value ? stopIconMarkup : sendIconMarkup;
         elements.send.classList.toggle("stop-mode", value);
+        if (elements.sendBtnWrapper) {
+          elements.sendBtnWrapper.classList.toggle("stop-mode", value);
+        }
         elements.send.setAttribute("aria-label", value ? "Stop response" : "Send message");
         elements.send.setAttribute(
           "title",
@@ -2495,8 +2886,17 @@ var renderWebUiHtml = (options) => {
                 }
                 if (eventName === "run:started") {
                   state.activeStreamRunId = typeof payload.runId === "string" ? payload.runId : null;
+                  if (typeof payload.contextWindow === "number" && payload.contextWindow > 0) {
+                    state.contextWindow = payload.contextWindow;
+                  }
                   setStreaming(state.isStreaming);
                 }
+                if (eventName === "model:response") {
+                  if (typeof payload.usage?.input === "number") {
+                    state.contextTokens = payload.usage.input;
+                    updateContextRing();
+                  }
+                }
                 if (eventName === "tool:started") {
                   const toolName = payload.tool || "tool";
                   const startedActivity = addActiveActivityFromToolStart(
@@ -2659,9 +3059,8 @@ var renderWebUiHtml = (options) => {
                   renderIfActiveConversation(false);
                 }
                 if (eventName === "run:error") {
-                  assistantMessage._activeActivities = [];
+                  finalizeAssistantMessage();
                   const errMsg = payload.error?.message || "Something went wrong";
-                  assistantMessage.content = "";
                   assistantMessage._error = errMsg;
                   renderIfActiveConversation(false);
                 }
@@ -2764,6 +3163,9 @@ var renderWebUiHtml = (options) => {
         state.activeConversationId = null;
         state.activeMessages = [];
         state.confirmDeleteId = null;
+        state.contextTokens = 0;
+        state.contextWindow = 0;
+        updateContextRing();
         pushConversationUrl(null);
         elements.chatTitle.textContent = "";
         renderMessages([]);
@@ -2801,6 +3203,9 @@ var renderWebUiHtml = (options) => {
         state.confirmDeleteId = null;
         state.conversations = [];
         state.csrfToken = "";
+        state.contextTokens = 0;
+        state.contextWindow = 0;
+        updateContextRing();
         await requireAuth();
       });
@@ -3005,6 +3410,9 @@ var renderWebUiHtml = (options) => {
         } else {
           state.activeConversationId = null;
           state.activeMessages = [];
+          state.contextTokens = 0;
+          state.contextWindow = 0;
+          updateContextRing();
           elements.chatTitle.textContent = "";
           renderMessages([]);
           renderConversationList();
@@ -3046,6 +3454,7 @@ var renderWebUiHtml = (options) => {
           await createConversation();
         }
         autoResizePrompt();
+        updateContextRing();
         elements.prompt.focus();
       })();
@@ -3262,6 +3671,631 @@ var renderWebUiHtml = (options) => {
 </html>`;
 };
+// src/api-docs.ts
+var buildOpenApiSpec = (options) => ({
+  openapi: "3.1.0",
+  info: {
+    title: `${options.agentName} API`,
+    description: "HTTP API for interacting with a Poncho agent. Supports conversation management, streaming message responses via Server-Sent Events (SSE), tool approval workflows, file uploads, and cron job triggers.",
+    version: "1.0.0"
+  },
+  servers: [{ url: "/", description: "Current host" }],
+  components: {
+    securitySchemes: {
+      bearerAuth: {
+        type: "http",
+        scheme: "bearer",
+        description: "Pass the PONCHO_AUTH_TOKEN value as a Bearer token. Required only when `auth.required: true` in poncho.config.js."
+      }
+    },
+    schemas: {
+      ConversationSummary: {
+        type: "object",
+        properties: {
+          conversationId: { type: "string" },
+          title: { type: "string" },
+          runtimeRunId: { type: "string" },
+          ownerId: { type: "string" },
+          tenantId: { type: ["string", "null"] },
+          createdAt: { type: "number", description: "Unix epoch ms" },
+          updatedAt: { type: "number", description: "Unix epoch ms" },
+          messageCount: { type: "integer" }
+        }
+      },
+      Message: {
+        type: "object",
+        properties: {
+          role: { type: "string", enum: ["user", "assistant"] },
+          content: {
+            oneOf: [
+              { type: "string" },
+              {
+                type: "array",
+                items: {
+                  oneOf: [
+                    {
+                      type: "object",
+                      properties: {
+                        type: { type: "string", const: "text" },
+                        text: { type: "string" }
+                      }
+                    },
+                    {
+                      type: "object",
+                      properties: {
+                        type: { type: "string", const: "file" },
+                        data: { type: "string" },
+                        mediaType: { type: "string" },
+                        filename: { type: "string" }
+                      }
+                    }
+                  ]
+                }
+              }
+            ]
+          },
+          metadata: {
+            type: "object",
+            properties: {
+              id: { type: "string" },
+              timestamp: { type: "number" },
+              tokenCount: { type: "number" },
+              step: { type: "number" },
+              toolActivity: { type: "array", items: { type: "string" } }
+            }
+          }
+        }
+      },
+      Conversation: {
+        type: "object",
+        properties: {
+          conversationId: { type: "string" },
+          title: { type: "string" },
+          ownerId: { type: "string" },
+          tenantId: { type: ["string", "null"] },
+          createdAt: { type: "number" },
+          updatedAt: { type: "number" },
+          messages: { type: "array", items: { $ref: "#/components/schemas/Message" } },
+          pendingApprovals: {
+            type: "array",
+            items: { $ref: "#/components/schemas/PendingApproval" }
+          }
+        }
+      },
+      PendingApproval: {
+        type: "object",
+        properties: {
+          approvalId: { type: "string" },
+          runId: { type: "string" },
+          tool: { type: "string" },
+          input: {}
+        }
+      },
+      TokenUsage: {
+        type: "object",
+        properties: {
+          input: { type: "integer" },
+          output: { type: "integer" },
+          cached: { type: "integer" }
+        }
+      },
+      RunResult: {
+        type: "object",
+        properties: {
+          status: { type: "string", enum: ["completed", "error", "cancelled"] },
+          response: { type: "string" },
+          steps: { type: "integer" },
+          tokens: { $ref: "#/components/schemas/TokenUsage" },
+          duration: { type: "number", description: "Duration in ms" },
+          continuation: { type: "boolean" },
+          maxSteps: { type: "integer" }
+        }
+      },
+      FileAttachment: {
+        type: "object",
+        properties: {
+          data: { type: "string", description: "base64-encoded file data" },
+          mediaType: { type: "string" },
+          filename: { type: "string" }
+        },
+        required: ["data", "mediaType"]
+      },
+      Error: {
+        type: "object",
+        properties: {
+          code: { type: "string" },
+          message: { type: "string" }
+        }
+      }
+    }
+  },
+  security: [{ bearerAuth: [] }],
+  paths: {
+    "/health": {
+      get: {
+        tags: ["Health"],
+        summary: "Health check",
+        security: [],
+        responses: {
+          "200": {
+            description: "Server is healthy",
+            content: {
+              "application/json": {
+                schema: {
+                  type: "object",
+                  properties: { status: { type: "string", const: "ok" } }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/auth/session": {
+      get: {
+        tags: ["Auth"],
+        summary: "Check session status",
+        description: "Returns whether the caller is authenticated and provides a CSRF token for subsequent mutating requests.",
+        security: [],
+        responses: {
+          "200": {
+            description: "Session status",
+            content: {
+              "application/json": {
+                schema: {
+                  type: "object",
+                  properties: {
+                    authenticated: { type: "boolean" },
+                    sessionId: { type: "string" },
+                    ownerId: { type: "string" },
+                    csrfToken: { type: "string" }
+                  },
+                  required: ["authenticated"]
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/auth/login": {
+      post: {
+        tags: ["Auth"],
+        summary: "Authenticate with passphrase",
+        description: "Creates a session cookie. Only needed for browser-based auth; API clients should use Bearer tokens instead.",
+        security: [],
+        requestBody: {
+          required: true,
+          content: {
+            "application/json": {
+              schema: {
+                type: "object",
+                properties: { passphrase: { type: "string" } },
+                required: ["passphrase"]
+              }
+            }
+          }
+        },
+        responses: {
+          "200": {
+            description: "Login successful",
+            content: {
+              "application/json": {
+                schema: {
+                  type: "object",
+                  properties: {
+                    ok: { type: "boolean" },
+                    sessionId: { type: "string" },
+                    csrfToken: { type: "string" }
+                  }
+                }
+              }
+            }
+          },
+          "401": {
+            description: "Invalid passphrase",
+            content: { "application/json": { schema: { $ref: "#/components/schemas/Error" } } }
+          },
+          "429": {
+            description: "Too many login attempts",
+            content: { "application/json": { schema: { $ref: "#/components/schemas/Error" } } }
+          }
+        }
+      }
+    },
+    "/api/auth/logout": {
+      post: {
+        tags: ["Auth"],
+        summary: "End session",
+        responses: {
+          "200": {
+            description: "Logged out",
+            content: {
+              "application/json": {
+                schema: { type: "object", properties: { ok: { type: "boolean" } } }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/conversations": {
+      get: {
+        tags: ["Conversations"],
+        summary: "List conversations",
+        responses: {
+          "200": {
+            description: "Conversation list",
+            content: {
+              "application/json": {
+                schema: {
+                  type: "object",
+                  properties: {
+                    conversations: {
+                      type: "array",
+                      items: { $ref: "#/components/schemas/ConversationSummary" }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      },
+      post: {
+        tags: ["Conversations"],
+        summary: "Create a conversation",
+        requestBody: {
+          content: {
+            "application/json": {
+              schema: {
+                type: "object",
+                properties: { title: { type: "string" } }
+              }
+            }
+          }
+        },
+        responses: {
+          "201": {
+            description: "Conversation created",
+            content: {
+              "application/json": {
+                schema: {
+                  type: "object",
+                  properties: { conversation: { $ref: "#/components/schemas/Conversation" } }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/conversations/{conversationId}": {
+      get: {
+        tags: ["Conversations"],
+        summary: "Get conversation",
+        description: "Returns the full conversation including messages and any pending tool approval requests.",
+        parameters: [
+          { name: "conversationId", in: "path", required: true, schema: { type: "string" } }
+        ],
+        responses: {
+          "200": {
+            description: "Conversation with messages",
+            content: {
+              "application/json": {
+                schema: {
+                  type: "object",
+                  properties: { conversation: { $ref: "#/components/schemas/Conversation" } }
+                }
+              }
+            }
+          },
+          "404": {
+            description: "Conversation not found",
+            content: { "application/json": { schema: { $ref: "#/components/schemas/Error" } } }
+          }
+        }
+      },
+      patch: {
+        tags: ["Conversations"],
+        summary: "Rename conversation",
+        parameters: [
+          { name: "conversationId", in: "path", required: true, schema: { type: "string" } }
+        ],
+        requestBody: {
+          required: true,
+          content: {
+            "application/json": {
+              schema: {
+                type: "object",
+                properties: { title: { type: "string" } },
+                required: ["title"]
+              }
+            }
+          }
+        },
+        responses: {
+          "200": {
+            description: "Conversation renamed",
+            content: {
+              "application/json": {
+                schema: {
+                  type: "object",
+                  properties: { conversation: { $ref: "#/components/schemas/Conversation" } }
+                }
+              }
+            }
+          }
+        }
+      },
+      delete: {
+        tags: ["Conversations"],
+        summary: "Delete conversation",
+        parameters: [
+          { name: "conversationId", in: "path", required: true, schema: { type: "string" } }
+        ],
+        responses: {
+          "200": {
+            description: "Conversation deleted",
+            content: {
+              "application/json": {
+                schema: { type: "object", properties: { ok: { type: "boolean" } } }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/conversations/{conversationId}/messages": {
+      post: {
+        tags: ["Messages"],
+        summary: "Send a message (streaming)",
+        description: "Sends a user message and streams the agent's response via Server-Sent Events.\n\n### SSE protocol\n\nThe response is a stream of SSE frames. Each frame has the format:\n\n```\nevent: <type>\ndata: <json>\n\n```\n\n**Event types:**\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `run:started` | `{ runId, agentId }` | Agent run has begun |\n| `model:chunk` | `{ content }` | Incremental text token from the model |\n| `model:response` | `{ usage: { input, output, cached } }` | Model call finished |\n| `step:started` | `{ step }` | Agent step started |\n| `step:completed` | `{ step, duration }` | Agent step finished |\n| `tool:started` | `{ tool, input }` | Tool invocation started |\n| `tool:completed` | `{ tool, output, duration }` | Tool finished successfully |\n| `tool:error` | `{ tool, error, recoverable }` | Tool returned an error |\n| `tool:approval:required` | `{ tool, input, approvalId }` | Tool needs human approval |\n| `tool:approval:granted` | `{ approvalId }` | Approval was granted |\n| `tool:approval:denied` | `{ approvalId, reason? }` | Approval was denied |\n| `run:completed` | `{ runId, result: RunResult }` | Agent finished |\n| `run:error` | `{ runId, error: { code, message } }` | Agent failed |\n| `run:cancelled` | `{ runId }` | Run was cancelled via stop endpoint |\n\nTo build the assistant's response, concatenate all `model:chunk` content values.\n\n### Reconnection\n\nIf the SSE connection drops mid-stream, reconnect via `GET /api/conversations/{conversationId}/events` to replay buffered events.",
+        parameters: [
+          { name: "conversationId", in: "path", required: true, schema: { type: "string" } }
+        ],
+        requestBody: {
+          required: true,
+          content: {
+            "application/json": {
+              schema: {
+                type: "object",
+                properties: {
+                  message: { type: "string", description: "User message text" },
+                  parameters: {
+                    type: "object",
+                    additionalProperties: true,
+                    description: "Key-value parameters passed to the agent run"
+                  },
+                  files: {
+                    type: "array",
+                    items: { $ref: "#/components/schemas/FileAttachment" },
+                    description: "Attached files (base64-encoded)"
+                  }
+                },
+                required: ["message"]
+              }
+            },
+            "multipart/form-data": {
+              schema: {
+                type: "object",
+                properties: {
+                  message: { type: "string" },
+                  parameters: { type: "string", description: "JSON-encoded parameters object" },
+                  files: { type: "array", items: { type: "string", format: "binary" } }
+                }
+              }
+            }
+          }
+        },
+        responses: {
+          "200": {
+            description: "SSE stream of agent events",
+            content: { "text/event-stream": { schema: { type: "string" } } }
+          },
+          "404": {
+            description: "Conversation not found",
+            content: { "application/json": { schema: { $ref: "#/components/schemas/Error" } } }
+          }
+        }
+      }
+    },
+    "/api/conversations/{conversationId}/events": {
+      get: {
+        tags: ["Messages"],
+        summary: "Attach to live event stream",
+        description: "Connects to the SSE event stream for an in-progress run. Replays all buffered events from the current run, then streams live events. If no run is active, sends a `stream:end` event and closes.",
+        parameters: [
+          { name: "conversationId", in: "path", required: true, schema: { type: "string" } }
+        ],
+        responses: {
+          "200": {
+            description: "SSE stream (same event format as POST /messages)",
+            content: { "text/event-stream": { schema: { type: "string" } } }
+          },
+          "404": {
+            description: "Conversation not found",
+            content: { "application/json": { schema: { $ref: "#/components/schemas/Error" } } }
+          }
+        }
+      }
+    },
+    "/api/conversations/{conversationId}/stop": {
+      post: {
+        tags: ["Messages"],
+        summary: "Stop an in-flight run",
+        parameters: [
+          { name: "conversationId", in: "path", required: true, schema: { type: "string" } }
+        ],
+        requestBody: {
+          required: true,
+          content: {
+            "application/json": {
+              schema: {
+                type: "object",
+                properties: {
+                  runId: { type: "string", description: "The run ID to cancel (from run:started event)" }
+                },
+                required: ["runId"]
+              }
+            }
+          }
+        },
+        responses: {
+          "200": {
+            description: "Stop result",
+            content: {
+              "application/json": {
+                schema: {
+                  type: "object",
+                  properties: {
+                    ok: { type: "boolean" },
+                    stopped: { type: "boolean" },
+                    runId: { type: "string" }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/approvals/{approvalId}": {
+      post: {
+        tags: ["Approvals"],
+        summary: "Resolve a tool approval request",
+        description: "When an agent run encounters a gated tool, it emits a `tool:approval:required` SSE event and pauses. Use this endpoint to approve or deny the tool invocation.",
+        parameters: [
+          { name: "approvalId", in: "path", required: true, schema: { type: "string" } }
+        ],
+        requestBody: {
+          required: true,
+          content: {
+            "application/json": {
+              schema: {
+                type: "object",
+                properties: { approved: { type: "boolean" } },
+                required: ["approved"]
+              }
+            }
+          }
+        },
+        responses: {
+          "200": {
+            description: "Approval resolved",
+            content: {
+              "application/json": {
+                schema: {
+                  type: "object",
+                  properties: {
+                    ok: { type: "boolean" },
+                    approvalId: { type: "string" },
+                    approved: { type: "boolean" }
+                  }
+                }
+              }
+            }
+          },
+          "404": {
+            description: "Approval not found or expired",
+            content: { "application/json": { schema: { $ref: "#/components/schemas/Error" } } }
+          }
+        }
+      }
+    },
+    "/api/uploads/{key}": {
+      get: {
+        tags: ["Assets"],
+        summary: "Retrieve an uploaded file",
+        description: "Serves a file previously uploaded during a conversation. The key is returned in file content part references.",
+        parameters: [
+          {
+            name: "key",
+            in: "path",
+            required: true,
+            schema: { type: "string" },
+            description: "Upload key (e.g. filename or storage path)"
+          }
+        ],
+        responses: {
+          "200": {
+            description: "File content with appropriate Content-Type",
+            content: { "application/octet-stream": { schema: { type: "string", format: "binary" } } }
+          },
+          "404": {
+            description: "Upload not found",
+            content: { "application/json": { schema: { $ref: "#/components/schemas/Error" } } }
+          }
+        }
+      }
+    },
+    "/api/cron/{jobName}": {
+      get: {
+        tags: ["Cron"],
+        summary: "Trigger a cron job",
+        description: "Triggers a named cron job defined in AGENT.md frontmatter. Supports continuation via the `continue` query parameter.",
+        parameters: [
+          { name: "jobName", in: "path", required: true, schema: { type: "string" } },
+          {
+            name: "continue",
+            in: "query",
+            schema: { type: "string" },
+            description: "Conversation ID to continue a previous cron run"
+          }
+        ],
+        responses: {
+          "200": {
+            description: "Cron job result",
+            content: {
+              "application/json": {
+                schema: {
+                  type: "object",
+                  properties: {
+                    conversationId: { type: "string" },
+                    response: { type: "string" },
+                    steps: { type: "integer" },
+                    status: { type: "string" },
+                    continuation: { type: "string", description: "URL to continue this run" }
+                  }
+                }
+              }
+            }
+          },
+          "404": {
+            description: "Cron job not found",
+            content: { "application/json": { schema: { $ref: "#/components/schemas/Error" } } }
+          }
+        }
+      }
+    }
+  },
+  tags: [
+    { name: "Health", description: "Server health check" },
+    { name: "Auth", description: "Session and authentication management" },
+    { name: "Conversations", description: "Create, list, read, rename, and delete conversations" },
+    {
+      name: "Messages",
+      description: "Send messages and stream agent responses via SSE"
+    },
+    { name: "Approvals", description: "Resolve gated tool approval requests" },
+    { name: "Assets", description: "Retrieve uploaded files" },
+    { name: "Cron", description: "Trigger cron jobs defined in AGENT.md" }
+  ]
+});
+var renderApiDocsHtml = (specUrl) => `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>API Documentation</title>
+  <style>body { margin: 0; }</style>
+</head>
+<body>
+  <script id="api-reference" data-url="${specUrl}"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@scalar/api-reference"></script>
+</body>
+</html>`;
 // src/index.ts
 import { createInterface } from "readline/promises";
@@ -3509,12 +4543,30 @@ var buildConfigFromOnboardingAnswers = (answers) => {
     enabled: telemetryEnabled
   };
   maybeSet(telemetry, "otlp", answers["telemetry.otlp"]);
-  return {
+  const messagingPlatform = String(answers["messaging.platform"] ?? "none");
+  const config = {
     mcp: [],
     auth,
     storage,
     telemetry
   };
+  if (messagingPlatform !== "none") {
+    const channelConfig = {
+      platform: messagingPlatform
+    };
+    if (messagingPlatform === "resend") {
+      const mode = String(answers["messaging.resend.mode"] ?? "auto-reply");
+      if (mode === "tool") {
+        channelConfig.mode = "tool";
+      }
+      const recipientsRaw = String(answers["messaging.resend.allowedRecipients"] ?? "");
+      if (recipientsRaw.trim().length > 0) {
+        channelConfig.allowedRecipients = recipientsRaw.split(",").map((s) => s.trim()).filter(Boolean);
+      }
+    }
+    config.messaging = [channelConfig];
+  }
+  return config;
 };
 var collectEnvVars = (answers) => {
   const envVars = /* @__PURE__ */ new Set();
@@ -3658,11 +4710,13 @@ var summarizeConfig = (config) => {
   const memoryEnabled = config?.storage?.memory?.enabled ?? config?.memory?.enabled ?? false;
   const authRequired = config?.auth?.required ?? false;
   const telemetryEnabled = config?.telemetry?.enabled ?? true;
+  const messagingPlatforms = (config?.messaging ?? []).map((m) => m.platform);
   return [
     `storage: ${provider}`,
     `memory tools: ${memoryEnabled ? "enabled" : "disabled"}`,
     `auth: ${authRequired ? "required" : "not required"}`,
-    `telemetry: ${telemetryEnabled ? "enabled" : "disabled"}`
+    `telemetry: ${telemetryEnabled ? "enabled" : "disabled"}`,
+    ...messagingPlatforms.length > 0 ? [`messaging: ${messagingPlatforms.join(", ")}`] : []
   ];
 };
 var getOnboardingMarkerPath = async (workingDir) => {
@@ -3738,6 +4792,7 @@ var consumeFirstRunIntro = async (workingDir, input2) => {
     "- **Turn on telemetry**: Track usage with OpenTelemetry/OTLP",
     "- **Add MCP servers**: Connect external tool servers",
     "- **Schedule cron jobs**: Set up recurring tasks in AGENT.md frontmatter",
+    "- **Connect to Slack**: Set up messaging so users can @mention this agent in Slack",
     "",
     "Just let me know what you'd like to work on!\n"
   ].join("\n");
@@ -3981,7 +5036,7 @@ cp .env.example .env
 poncho dev
 \`\`\`
-Open \`http://localhost:3000\` for the web UI.
+Open \`http://localhost:3000\` for the web UI, or \`http://localhost:3000/api/docs\` for interactive API documentation.
 On your first interactive session, the agent introduces its configurable capabilities.
 While a response is streaming, you can stop it:
@@ -4103,7 +5158,7 @@ Core files:
 - \`AGENT.md\`: behavior, model selection, runtime guidance
 - \`poncho.config.js\`: runtime config (storage, auth, telemetry, MCP, tools)
-- \`.env\`: secrets and environment variables
+- \`.env\`: secrets and environment variables (loaded before the harness starts, so \`process.env\` is available in skill scripts)
 Example \`poncho.config.js\`:
@@ -4129,18 +5184,20 @@ export default {
       auth: { type: "bearer", tokenEnv: "GITHUB_TOKEN" },
     },
   ],
+  // Tool access: true (available), false (disabled), 'approval' (requires human approval)
   tools: {
-    defaults: {
-      list_directory: true,
-      read_file: true,
-      write_file: true, // still gated by environment/policy
-    },
+    write_file: true,           // gated by environment for writes
+    send_email: 'approval',     // requires human approval
     byEnvironment: {
       production: {
-        read_file: false, // example override
+        write_file: false,
+      },
+      development: {
+        send_email: true,       // skip approval in dev
       },
     },
   },
+  // webUi: false, // Disable built-in UI for API-only deployments
 };
 \`\`\`
@@ -4181,6 +5238,44 @@ cron:
 - Docker/Fly.io: scheduler runs automatically.
 - Trigger manually: \`curl http://localhost:3000/api/cron/daily-report\`
+## Messaging (Slack)
+Connect your agent to Slack so it responds to @mentions:
+1. Create a Slack App at [api.slack.com/apps](https://api.slack.com/apps)
+2. Add Bot Token Scopes: \`app_mentions:read\`, \`chat:write\`, \`reactions:write\`
+3. Enable Event Subscriptions, set Request URL to \`https://<your-url>/api/messaging/slack\`, subscribe to \`app_mention\`
+4. Install to workspace, copy Bot Token and Signing Secret
+5. Set env vars:
+   \`\`\`
+   SLACK_BOT_TOKEN=xoxb-...
+   SLACK_SIGNING_SECRET=...
+   \`\`\`
+6. Add to \`poncho.config.js\`:
+   \`\`\`javascript
+   messaging: [{ platform: 'slack' }]
+   \`\`\`
+## Messaging (Email via Resend)
+Connect your agent to email so users can interact by sending emails:
+1. Set up a domain and enable Inbound at [resend.com](https://resend.com)
+2. Create a webhook for \`email.received\` pointing to \`https://<your-url>/api/messaging/resend\`
+3. Install the Resend SDK: \`npm install resend\`
+4. Set env vars:
+   \`\`\`
+   RESEND_API_KEY=re_...
+   RESEND_WEBHOOK_SECRET=whsec_...
+   RESEND_FROM=Agent <agent@yourdomain.com>
+   \`\`\`
+5. Add to \`poncho.config.js\`:
+   \`\`\`javascript
+   messaging: [{ platform: 'resend' }]
+   \`\`\`
+For full control over outbound emails, use **tool mode** (\`mode: 'tool'\`) \u2014 the agent gets a \`send_email\` tool instead of auto-replying. See the repo README for details.
 ## Deployment
 \`\`\`bash
@@ -4883,11 +5978,270 @@ var createRequestHandler = async (options) => {
     workingDir,
     agentId: identity.id
   });
+  const messagingRoutes = /* @__PURE__ */ new Map();
+  const messagingRouteRegistrar = (method, path, routeHandler) => {
+    let byMethod = messagingRoutes.get(path);
+    if (!byMethod) {
+      byMethod = /* @__PURE__ */ new Map();
+      messagingRoutes.set(path, byMethod);
+    }
+    byMethod.set(method, routeHandler);
+  };
+  const messagingRunner = {
+    async getOrCreateConversation(conversationId, meta) {
+      const existing = await conversationStore.get(conversationId);
+      if (existing) {
+        return { messages: existing.messages };
+      }
+      const now = Date.now();
+      const conversation = {
+        conversationId,
+        title: meta.title ?? `${meta.platform} thread`,
+        messages: [],
+        ownerId: meta.ownerId,
+        tenantId: null,
+        createdAt: now,
+        updatedAt: now
+      };
+      await conversationStore.update(conversation);
+      return { messages: [] };
+    },
+    async run(conversationId, input2) {
+      console.log("[messaging-runner] starting run for", conversationId, "task:", input2.task.slice(0, 80));
+      const historyMessages = [...input2.messages];
+      const userContent = input2.task;
+      const updateConversation = async (patch) => {
+        const fresh = await conversationStore.get(conversationId);
+        if (!fresh) return;
+        patch(fresh);
+        fresh.updatedAt = Date.now();
+        await conversationStore.update(fresh);
+      };
+      await updateConversation((c) => {
+        c.messages = [...historyMessages, { role: "user", content: userContent }];
+      });
+      let latestRunId = "";
+      let assistantResponse = "";
+      const toolTimeline = [];
+      const sections = [];
+      let currentTools = [];
+      let currentText = "";
+      const buildMessages = () => {
+        const draftSections = [
+          ...sections.map((s) => ({
+            type: s.type,
+            content: Array.isArray(s.content) ? [...s.content] : s.content
+          }))
+        ];
+        if (currentTools.length > 0) {
+          draftSections.push({ type: "tools", content: [...currentTools] });
+        }
+        if (currentText.length > 0) {
+          draftSections.push({ type: "text", content: currentText });
+        }
+        const hasDraftContent = assistantResponse.length > 0 || toolTimeline.length > 0 || draftSections.length > 0;
+        if (!hasDraftContent) {
+          return [...historyMessages, { role: "user", content: userContent }];
+        }
+        return [
+          ...historyMessages,
+          { role: "user", content: userContent },
+          {
+            role: "assistant",
+            content: assistantResponse,
+            metadata: toolTimeline.length > 0 || draftSections.length > 0 ? {
+              toolActivity: [...toolTimeline],
+              sections: draftSections.length > 0 ? draftSections : void 0
+            } : void 0
+          }
+        ];
+      };
+      const persistDraftAssistantTurn = async () => {
+        if (assistantResponse.length === 0 && toolTimeline.length === 0) return;
+        await updateConversation((c) => {
+          c.messages = buildMessages();
+        });
+      };
+      const runInput = {
+        task: input2.task,
+        conversationId,
+        messages: input2.messages,
+        files: input2.files,
+        parameters: input2.metadata ? {
+          __messaging_platform: input2.metadata.platform,
+          __messaging_sender_id: input2.metadata.sender.id,
+          __messaging_sender_name: input2.metadata.sender.name ?? "",
+          __messaging_thread_id: input2.metadata.threadId
+        } : void 0
+      };
+      try {
+        for await (const event of harness.runWithTelemetry(runInput)) {
+          if (event.type === "run:started") {
+            latestRunId = event.runId;
+            runOwners.set(event.runId, "local-owner");
+            runConversations.set(event.runId, conversationId);
+          }
+          if (event.type === "model:chunk") {
+            if (currentTools.length > 0) {
+              sections.push({ type: "tools", content: currentTools });
+              currentTools = [];
+            }
+            assistantResponse += event.content;
+            currentText += event.content;
+          }
+          if (event.type === "tool:started") {
+            if (currentText.length > 0) {
+              sections.push({ type: "text", content: currentText });
+              currentText = "";
+            }
+            const toolText = `- start \`${event.tool}\``;
+            toolTimeline.push(toolText);
+            currentTools.push(toolText);
+          }
+          if (event.type === "tool:completed") {
+            const toolText = `- done \`${event.tool}\` (${event.duration}ms)`;
+            toolTimeline.push(toolText);
+            currentTools.push(toolText);
+          }
+          if (event.type === "tool:error") {
+            const toolText = `- error \`${event.tool}\`: ${event.error}`;
+            toolTimeline.push(toolText);
+            currentTools.push(toolText);
+          }
+          if (event.type === "step:completed") {
+            await persistDraftAssistantTurn();
+          }
+          if (event.type === "tool:approval:required") {
+            const toolText = `- approval required \`${event.tool}\``;
+            toolTimeline.push(toolText);
+            currentTools.push(toolText);
+            await persistDraftAssistantTurn();
+            await persistConversationPendingApprovals(conversationId);
+          }
+          if (event.type === "tool:approval:granted") {
+            const toolText = `- approval granted (${event.approvalId})`;
+            toolTimeline.push(toolText);
+            currentTools.push(toolText);
+            await persistDraftAssistantTurn();
+          }
+          if (event.type === "tool:approval:denied") {
+            const toolText = `- approval denied (${event.approvalId})`;
+            toolTimeline.push(toolText);
+            currentTools.push(toolText);
+            await persistDraftAssistantTurn();
+          }
+          if (event.type === "run:completed" && assistantResponse.length === 0 && event.result.response) {
+            assistantResponse = event.result.response;
+          }
+          if (event.type === "run:error") {
+            assistantResponse = assistantResponse || `[Error: ${event.error.message}]`;
+          }
+          broadcastEvent(conversationId, event);
+        }
+      } catch (err) {
+        console.error("[messaging-runner] run failed:", err instanceof Error ? err.message : err);
+        assistantResponse = assistantResponse || `[Error: ${err instanceof Error ? err.message : "Unknown error"}]`;
+      }
+      if (currentTools.length > 0) {
+        sections.push({ type: "tools", content: currentTools });
+        currentTools = [];
+      }
+      if (currentText.length > 0) {
+        sections.push({ type: "text", content: currentText });
+        currentText = "";
+      }
+      await updateConversation((c) => {
+        c.messages = buildMessages();
+        c.runtimeRunId = latestRunId || c.runtimeRunId;
+        c.pendingApprovals = [];
+      });
+      finishConversationStream(conversationId);
+      await persistConversationPendingApprovals(conversationId);
+      if (latestRunId) {
+        runOwners.delete(latestRunId);
+        runConversations.delete(latestRunId);
+      }
+      console.log("[messaging-runner] run complete, response length:", assistantResponse.length);
+      const response = assistantResponse;
+      return { response };
+    }
+  };
+  const messagingBridges = [];
+  if (config?.messaging && config.messaging.length > 0) {
+    let waitUntilHook;
+    if (process.env.VERCEL) {
+      try {
+        const modName = "@vercel/functions";
+        const mod = await import(
+          /* webpackIgnore: true */
+          modName
+        );
+        waitUntilHook = mod.waitUntil;
+      } catch {
+      }
+    }
+    for (const channelConfig of config.messaging) {
+      if (channelConfig.platform === "slack") {
+        const adapter = new SlackAdapter({
+          botTokenEnv: channelConfig.botTokenEnv,
+          signingSecretEnv: channelConfig.signingSecretEnv
+        });
+        const bridge = new AgentBridge({
+          adapter,
+          runner: messagingRunner,
+          waitUntil: waitUntilHook,
+          ownerId: "local-owner"
+        });
+        adapter.registerRoutes(messagingRouteRegistrar);
+        try {
+          await bridge.start();
+          messagingBridges.push(bridge);
+          console.log(`  Slack messaging enabled at /api/messaging/slack`);
+        } catch (err) {
+          console.warn(
+            `  Slack messaging disabled: ${err instanceof Error ? err.message : String(err)}`
+          );
+        }
+      } else if (channelConfig.platform === "resend") {
+        const adapter = new ResendAdapter({
+          apiKeyEnv: channelConfig.apiKeyEnv,
+          webhookSecretEnv: channelConfig.webhookSecretEnv,
+          fromEnv: channelConfig.fromEnv,
+          allowedSenders: channelConfig.allowedSenders,
+          mode: channelConfig.mode,
+          allowedRecipients: channelConfig.allowedRecipients,
+          maxSendsPerRun: channelConfig.maxSendsPerRun
+        });
+        const bridge = new AgentBridge({
+          adapter,
+          runner: messagingRunner,
+          waitUntil: waitUntilHook,
+          ownerId: "local-owner"
+        });
+        adapter.registerRoutes(messagingRouteRegistrar);
+        try {
+          await bridge.start();
+          messagingBridges.push(bridge);
+          const adapterTools = adapter.getToolDefinitions?.() ?? [];
+          if (adapterTools.length > 0) {
+            harness.registerTools(adapterTools);
+          }
+          const modeLabel = channelConfig.mode === "tool" ? "tool" : "auto-reply";
+          console.log(`  Resend email messaging enabled at /api/messaging/resend (mode: ${modeLabel})`);
+        } catch (err) {
+          console.warn(
+            `  Resend email messaging disabled: ${err instanceof Error ? err.message : String(err)}`
+          );
+        }
+      }
+    }
+  }
   const sessionStore = new SessionStore();
   const loginRateLimiter = new LoginRateLimiter();
   const authToken = process.env.PONCHO_AUTH_TOKEN ?? "";
   const authRequired = config?.auth?.required ?? false;
   const requireAuth = authRequired && authToken.length > 0;
+  const webUiEnabled = config?.webUi !== false;
   const isProduction = resolveHarnessEnvironment() === "production";
   const secureCookies = isProduction;
   const validateBearerToken = (authHeader) => {
@@ -4909,36 +6263,54 @@ var createRequestHandler = async (options) => {
       return;
     }
     const [pathname] = request.url.split("?");
-    if (request.method === "GET" && (pathname === "/" || pathname.startsWith("/c/"))) {
-      writeHtml(response, 200, renderWebUiHtml({ agentName }));
-      return;
-    }
-    if (pathname === "/manifest.json" && request.method === "GET") {
-      response.writeHead(200, { "Content-Type": "application/manifest+json" });
-      response.end(renderManifest({ agentName }));
-      return;
+    if (webUiEnabled) {
+      if (request.method === "GET" && (pathname === "/" || pathname.startsWith("/c/"))) {
+        writeHtml(response, 200, renderWebUiHtml({ agentName }));
+        return;
+      }
+      if (pathname === "/manifest.json" && request.method === "GET") {
+        response.writeHead(200, { "Content-Type": "application/manifest+json" });
+        response.end(renderManifest({ agentName }));
+        return;
+      }
+      if (pathname === "/sw.js" && request.method === "GET") {
+        response.writeHead(200, {
+          "Content-Type": "application/javascript",
+          "Service-Worker-Allowed": "/"
+        });
+        response.end(renderServiceWorker());
+        return;
+      }
+      if (pathname === "/icon.svg" && request.method === "GET") {
+        response.writeHead(200, { "Content-Type": "image/svg+xml" });
+        response.end(renderIconSvg({ agentName }));
+        return;
+      }
+      if ((pathname === "/icon-192.png" || pathname === "/icon-512.png") && request.method === "GET") {
+        response.writeHead(302, { Location: "/icon.svg" });
+        response.end();
+        return;
+      }
     }
-    if (pathname === "/sw.js" && request.method === "GET") {
-      response.writeHead(200, {
-        "Content-Type": "application/javascript",
-        "Service-Worker-Allowed": "/"
-      });
-      response.end(renderServiceWorker());
+    if (pathname === "/health" && request.method === "GET") {
+      writeJson(response, 200, { status: "ok" });
       return;
     }
-    if (pathname === "/icon.svg" && request.method === "GET") {
-      response.writeHead(200, { "Content-Type": "image/svg+xml" });
-      response.end(renderIconSvg({ agentName }));
+    if (pathname === "/api/openapi.json" && request.method === "GET") {
+      writeJson(response, 200, buildOpenApiSpec({ agentName }));
       return;
     }
-    if ((pathname === "/icon-192.png" || pathname === "/icon-512.png") && request.method === "GET") {
-      response.writeHead(302, { Location: "/icon.svg" });
-      response.end();
+    if (pathname === "/api/docs" && request.method === "GET") {
+      writeHtml(response, 200, renderApiDocsHtml("/api/openapi.json"));
       return;
     }
-    if (pathname === "/health" && request.method === "GET") {
-      writeJson(response, 200, { status: "ok" });
-      return;
+    const messagingByMethod = messagingRoutes.get(pathname ?? "");
+    if (messagingByMethod) {
+      const routeHandler = messagingByMethod.get(request.method ?? "");
+      if (routeHandler) {
+        await routeHandler(request, response);
+        return;
+      }
     }
     const cookies = parseCookies(request);
     const sessionId = cookies.poncho_session;
@@ -5127,12 +6499,15 @@ var createRequestHandler = async (options) => {
         response.end();
         return;
       }
-      for (const bufferedEvent of stream.buffer) {
-        try {
-          response.write(formatSseEvent(bufferedEvent));
-        } catch {
-          response.end();
-          return;
+      const liveOnly = (request.url ?? "").includes("live_only=true");
+      if (!liveOnly) {
+        for (const bufferedEvent of stream.buffer) {
+          try {
+            response.write(formatSseEvent(bufferedEvent));
+          } catch {
+            response.end();
+            return;
+          }
         }
       }
       if (stream.finished) {
@@ -5176,11 +6551,14 @@ var createRequestHandler = async (options) => {
         for (const approval of livePending) {
           mergedPendingById.set(approval.approvalId, approval);
         }
+        const activeStream = conversationEventStreams.get(conversationId);
+        const hasActiveRun = !!activeStream && !activeStream.finished;
         writeJson(response, 200, {
           conversation: {
             ...conversation,
             pendingApprovals: Array.from(mergedPendingById.values())
-          }
+          },
+          hasActiveRun
         });
         return;
       }
@@ -5441,6 +6819,7 @@ var createRequestHandler = async (options) => {
         })).filter((item) => item.content.length > 0);
         for await (const event of harness.runWithTelemetry({
           task: messageText,
+          conversationId,
           parameters: {
             ...bodyParameters ?? {},
             __conversationRecallCorpus: recallCorpus,
@@ -5685,6 +7064,7 @@ var createRequestHandler = async (options) => {
         const softDeadlineMs = platformMaxDurationSec > 0 ? platformMaxDurationSec * 800 : 0;
         for await (const event of harness.runWithTelemetry({
           task: cronJob.task,
+          conversationId: conversation.conversationId,
           parameters: { __activeConversationId: conversation.conversationId },
           messages: historyMessages,
           abortSignal: abortController.signal
@@ -5846,6 +7226,7 @@ var startDevServer = async (port, options) => {
             let currentText = "";
             for await (const event of harness.runWithTelemetry({
               task: config.task,
+              conversationId: conversation.conversationId,
               parameters: { __activeConversationId: conversation.conversationId },
               messages: []
             })) {
@@ -6036,7 +7417,7 @@ var runInteractive = async (workingDir, params) => {
   await harness.initialize();
   const identity = await ensureAgentIdentity2(workingDir);
   try {
-    const { runInteractiveInk } = await import("./run-interactive-ink-64QEOUXL.js");
+    const { runInteractiveInk } = await import("./run-interactive-ink-SLWDVTDX.js");
     await runInteractiveInk({
       harness,
       params,