@poncho-ai/cli 0.17.0 → 0.19.0

package/src/web-ui-client.ts

@@ -164,6 +164,62 @@ export const getWebUiClientScript = (markedSource: string): string => `
         }
       };
 
+      // During streaming, incomplete backtick sequences cause marked to
+      // swallow all subsequent text into an invisible code element. This
+      // helper detects unclosed fences and inline code delimiters and
+      // appends the missing closing so marked can render partial text.
+      const closeStreamingMarkdown = (text) => {
+        const BT = "\\x60";
+        let result = text;
+
+        // 1. Unclosed fenced code blocks (lines starting with 3+ backticks)
+        const lines = result.split("\\n");
+        let openFenceLen = 0;
+        for (let li = 0; li < lines.length; li++) {
+          const trimmed = lines[li].trimStart();
+          let btCount = 0;
+          while (btCount < trimmed.length && trimmed[btCount] === BT) btCount++;
+          if (btCount >= 3) {
+            if (openFenceLen === 0) {
+              openFenceLen = btCount;
+            } else if (btCount >= openFenceLen) {
+              openFenceLen = 0;
+            }
+          }
+        }
+        if (openFenceLen > 0) {
+          let fence = "";
+          for (let k = 0; k < openFenceLen; k++) fence += BT;
+          return result + "\\n" + fence;
+        }
+
+        // 2. Unclosed inline code delimiters
+        let idx = 0;
+        let inCode = false;
+        let delimLen = 0;
+        while (idx < result.length) {
+          if (result[idx] === BT) {
+            let run = 0;
+            while (idx < result.length && result[idx] === BT) { run++; idx++; }
+            if (!inCode) {
+              inCode = true;
+              delimLen = run;
+            } else if (run === delimLen) {
+              inCode = false;
+            }
+          } else {
+            idx++;
+          }
+        }
+        if (inCode) {
+          let closing = "";
+          for (let k = 0; k < delimLen; k++) closing += BT;
+          result += closing;
+        }
+
+        return result;
+      };
+
       const extractToolActivity = (value) => {
         const source = String(value || "");
         let markerIndex = source.lastIndexOf("\\n### Tool activity\\n");
@@ -230,8 +286,15 @@ export const getWebUiClientScript = (markedSource: string): string => `
             );
           })
           .join("");
+        const batchButtons = requests.length > 1
+          ? '<div class="approval-batch-actions">' +
+            '<button class="approval-batch-btn approve" data-approval-batch="approve">Approve all (' + requests.length + ')</button>' +
+            '<button class="approval-batch-btn deny" data-approval-batch="deny">Deny all (' + requests.length + ')</button>' +
+            "</div>"
+          : "";
         return (
           '<div class="approval-requests">' +
+          batchButtons +
           rows +
           "</div>"
         );
@@ -761,7 +824,7 @@ export const getWebUiClientScript = (markedSource: string): string => `
                 // Show current text being typed
                 if (isStreaming && i === messages.length - 1 && m._currentText) {
                   const textDiv = document.createElement("div");
-                  textDiv.innerHTML = renderAssistantMarkdown(m._currentText);
+                  textDiv.innerHTML = renderAssistantMarkdown(closeStreamingMarkdown(m._currentText));
                   content.appendChild(textDiv);
                 }
               } else {
@@ -1062,8 +1125,32 @@ export const getWebUiClientScript = (markedSource: string): string => `
                         updateContextRing();
                       }
                     }
+                    if (eventName === "tool:generating") {
+                      const toolName = payload.tool || "tool";
+                      if (!Array.isArray(assistantMessage._activeActivities)) {
+                        assistantMessage._activeActivities = [];
+                      }
+                      assistantMessage._activeActivities.push({
+                        kind: "generating",
+                        tool: toolName,
+                        label: "Preparing " + toolName,
+                      });
+                      if (assistantMessage._currentText.length > 0) {
+                        assistantMessage._sections.push({
+                          type: "text",
+                          content: assistantMessage._currentText,
+                        });
+                        assistantMessage._currentText = "";
+                      }
+                      const prepText =
+                        "- preparing \\x60" + toolName + "\\x60";
+                      assistantMessage._currentTools.push(prepText);
+                      assistantMessage.metadata.toolActivity.push(prepText);
+                      renderIfActiveConversation(true);
+                    }
                     if (eventName === "tool:started") {
                       const toolName = payload.tool || "tool";
+                      removeActiveActivityForTool(assistantMessage, toolName);
                       const startedActivity = addActiveActivityFromToolStart(
                         assistantMessage,
                         payload,
@@ -1075,14 +1162,24 @@ export const getWebUiClientScript = (markedSource: string): string => `
                         });
                         assistantMessage._currentText = "";
                       }
+                      const tick = "\\x60";
+                      const prepPrefix = "- preparing " + tick + toolName + tick;
+                      const prepToolIdx = assistantMessage._currentTools.indexOf(prepPrefix);
+                      if (prepToolIdx >= 0) {
+                        assistantMessage._currentTools.splice(prepToolIdx, 1);
+                      }
+                      const prepMetaIdx = assistantMessage.metadata.toolActivity.indexOf(prepPrefix);
+                      if (prepMetaIdx >= 0) {
+                        assistantMessage.metadata.toolActivity.splice(prepMetaIdx, 1);
+                      }
                       const detail =
                         startedActivity && typeof startedActivity.detail === "string"
                           ? startedActivity.detail.trim()
                           : "";
                       const toolText =
-                        "- start \\x60" +
+                        "- start " + tick +
                         toolName +
-                        "\\x60" +
+                        tick +
                         (detail ? " (" + detail + ")" : "");
                       assistantMessage._currentTools.push(toolText);
                       assistantMessage.metadata.toolActivity.push(toolText);
@@ -1805,26 +1902,57 @@ export const getWebUiClientScript = (markedSource: string): string => `
                     updateContextRing();
                   }
                 }
+                if (eventName === "tool:generating") {
+                  const toolName = payload.tool || "tool";
+                  if (!Array.isArray(assistantMessage._activeActivities)) {
+                    assistantMessage._activeActivities = [];
+                  }
+                  assistantMessage._activeActivities.push({
+                    kind: "generating",
+                    tool: toolName,
+                    label: "Preparing " + toolName,
+                  });
+                  if (assistantMessage._currentText.length > 0) {
+                    assistantMessage._sections.push({ type: "text", content: assistantMessage._currentText });
+                    assistantMessage._currentText = "";
+                  }
+                  if (!assistantMessage.metadata) assistantMessage.metadata = {};
+                  if (!assistantMessage.metadata.toolActivity) assistantMessage.metadata.toolActivity = [];
+                  const prepText = "- preparing \\x60" + toolName + "\\x60";
+                  assistantMessage._currentTools.push(prepText);
+                  assistantMessage.metadata.toolActivity.push(prepText);
+                  renderIfActiveConversation(true);
+                }
                 if (eventName === "tool:started") {
                   const toolName = payload.tool || "tool";
+                  removeActiveActivityForTool(assistantMessage, toolName);
                   const startedActivity = addActiveActivityFromToolStart(
                     assistantMessage,
                     payload,
                   );
-                  // If we have text accumulated, push it as a text section
                   if (assistantMessage._currentText.length > 0) {
                     assistantMessage._sections.push({ type: "text", content: assistantMessage._currentText });
                     assistantMessage._currentText = "";
                   }
+                  if (!assistantMessage.metadata) assistantMessage.metadata = {};
+                  if (!assistantMessage.metadata.toolActivity) assistantMessage.metadata.toolActivity = [];
+                  const tick = "\\x60";
+                  const prepPrefix = "- preparing " + tick + toolName + tick;
+                  const prepToolIdx = assistantMessage._currentTools.indexOf(prepPrefix);
+                  if (prepToolIdx >= 0) {
+                    assistantMessage._currentTools.splice(prepToolIdx, 1);
+                  }
+                  const prepMetaIdx = assistantMessage.metadata.toolActivity.indexOf(prepPrefix);
+                  if (prepMetaIdx >= 0) {
+                    assistantMessage.metadata.toolActivity.splice(prepMetaIdx, 1);
+                  }
                   const detail =
                     startedActivity && typeof startedActivity.detail === "string"
                       ? startedActivity.detail.trim()
                       : "";
                   const toolText =
-                    "- start \\x60" + toolName + "\\x60" + (detail ? " (" + detail + ")" : "");
+                    "- start " + tick + toolName + tick + (detail ? " (" + detail + ")" : "");
                   assistantMessage._currentTools.push(toolText);
-                  if (!assistantMessage.metadata) assistantMessage.metadata = {};
-                  if (!assistantMessage.metadata.toolActivity) assistantMessage.metadata.toolActivity = [];
                   assistantMessage.metadata.toolActivity.push(toolText);
                   renderIfActiveConversation(true);
                 }
@@ -2278,45 +2406,20 @@ export const getWebUiClientScript = (markedSource: string): string => `
         openLightbox(img.src);
       });
 
-      elements.messages.addEventListener("click", async (event) => {
-        const target = event.target;
-        if (!(target instanceof Element)) {
-          return;
-        }
-        const button = target.closest(".approval-action-btn");
-        if (!button) {
-          return;
-        }
-        const approvalId = button.getAttribute("data-approval-id") || "";
-        const decision = button.getAttribute("data-approval-decision") || "";
-        if (!approvalId || (decision !== "approve" && decision !== "deny")) {
-          return;
-        }
-        if (state.approvalRequestsInFlight[approvalId]) {
-          return;
-        }
+      const submitApproval = async (approvalId, decision, opts) => {
+        const wasStreaming = opts && opts.wasStreaming;
         state.approvalRequestsInFlight[approvalId] = true;
-        const wasStreaming = state.isStreaming;
-        if (!wasStreaming) {
-          setStreaming(true);
-        }
         updatePendingApproval(approvalId, (request) => ({
           ...request,
           state: "submitting",
           pendingDecision: decision,
         }));
-        renderMessages(state.activeMessages, state.isStreaming);
         try {
           await api("/api/approvals/" + encodeURIComponent(approvalId), {
             method: "POST",
             body: JSON.stringify({ approved: decision === "approve" }),
           });
           updatePendingApproval(approvalId, () => null);
-          renderMessages(state.activeMessages, state.isStreaming);
-          loadConversations();
-          if (!wasStreaming && state.activeConversationId) {
-            await streamConversationEvents(state.activeConversationId, { liveOnly: true });
-          }
         } catch (error) {
           const isStale = error && error.payload && error.payload.code === "APPROVAL_NOT_FOUND";
           if (isStale) {
@@ -2330,13 +2433,77 @@ export const getWebUiClientScript = (markedSource: string): string => `
               _error: errMsg,
             }));
           }
-          renderMessages(state.activeMessages, state.isStreaming);
         } finally {
+          delete state.approvalRequestsInFlight[approvalId];
+        }
+      };
+
+      elements.messages.addEventListener("click", async (event) => {
+        const target = event.target;
+        if (!(target instanceof Element)) {
+          return;
+        }
+
+        // Batch approve/deny all
+        const batchBtn = target.closest(".approval-batch-btn");
+        if (batchBtn) {
+          const decision = batchBtn.getAttribute("data-approval-batch") || "";
+          if (decision !== "approve" && decision !== "deny") return;
+          const messages = state.activeMessages || [];
+          const pending = [];
+          for (const m of messages) {
+            if (Array.isArray(m._pendingApprovals)) {
+              for (const req of m._pendingApprovals) {
+                if (req.approvalId && req.state !== "submitting" && !state.approvalRequestsInFlight[req.approvalId]) {
+                  pending.push(req.approvalId);
+                }
+              }
+            }
+          }
+          if (pending.length === 0) return;
+          const wasStreaming = state.isStreaming;
+          if (!wasStreaming) setStreaming(true);
+          renderMessages(state.activeMessages, state.isStreaming);
+          await Promise.all(pending.map((aid) => submitApproval(aid, decision, { wasStreaming })));
+          renderMessages(state.activeMessages, state.isStreaming);
+          loadConversations();
+          if (!wasStreaming && state.activeConversationId) {
+            await streamConversationEvents(state.activeConversationId, { liveOnly: true });
+          }
           if (!wasStreaming) {
             setStreaming(false);
             renderMessages(state.activeMessages, false);
           }
-          delete state.approvalRequestsInFlight[approvalId];
+          return;
+        }
+
+        // Individual approve/deny
+        const button = target.closest(".approval-action-btn");
+        if (!button) {
+          return;
+        }
+        const approvalId = button.getAttribute("data-approval-id") || "";
+        const decision = button.getAttribute("data-approval-decision") || "";
+        if (!approvalId || (decision !== "approve" && decision !== "deny")) {
+          return;
+        }
+        if (state.approvalRequestsInFlight[approvalId]) {
+          return;
+        }
+        const wasStreaming = state.isStreaming;
+        if (!wasStreaming) {
+          setStreaming(true);
+        }
+        renderMessages(state.activeMessages, state.isStreaming);
+        await submitApproval(approvalId, decision, { wasStreaming });
+        renderMessages(state.activeMessages, state.isStreaming);
+        loadConversations();
+        if (!wasStreaming && state.activeConversationId) {
+          await streamConversationEvents(state.activeConversationId, { liveOnly: true });
+        }
+        if (!wasStreaming) {
+          setStreaming(false);
+          renderMessages(state.activeMessages, false);
         }
       });
 

package/src/web-ui-store.ts

@@ -1,4 +1,4 @@
-import { createHash, randomUUID, timingSafeEqual } from "node:crypto";
+import { createHash, createHmac, randomUUID, timingSafeEqual } from "node:crypto";
 import { mkdir, readFile, writeFile } from "node:fs/promises";
 import { basename, dirname, resolve } from "node:path";
 import { homedir } from "node:os";
@@ -165,11 +165,16 @@ type SessionRecord = {
 export class SessionStore {
   private readonly sessions = new Map<string, SessionRecord>();
   private readonly ttlMs: number;
+  private signingKey: string | undefined;
 
   constructor(ttlMs = 1000 * 60 * 60 * 8) {
     this.ttlMs = ttlMs;
   }
 
+  setSigningKey(key: string): void {
+    if (key) this.signingKey = key;
+  }
+
   create(ownerId = DEFAULT_OWNER): SessionRecord {
     const now = Date.now();
     const session: SessionRecord = {
@@ -200,6 +205,68 @@ export class SessionStore {
   delete(sessionId: string): void {
     this.sessions.delete(sessionId);
   }
+
+  /**
+   * Encode a session into a signed cookie value that survives serverless
+   * cold starts. Format: `base64url(payload).signature`
+   */
+  signSession(session: SessionRecord): string | undefined {
+    if (!this.signingKey) return undefined;
+    const payload = Buffer.from(
+      JSON.stringify({
+        sid: session.sessionId,
+        o: session.ownerId,
+        csrf: session.csrfToken,
+        exp: session.expiresAt,
+      }),
+    ).toString("base64url");
+    const sig = createHmac("sha256", this.signingKey)
+      .update(payload)
+      .digest("base64url");
+    return `${payload}.${sig}`;
+  }
+
+  /**
+   * Restore a session from a signed cookie value. Returns the session
+   * (also added to the in-memory store) or undefined if invalid/expired.
+   */
+  restoreFromSigned(cookieValue: string): SessionRecord | undefined {
+    if (!this.signingKey) return undefined;
+    const dotIdx = cookieValue.lastIndexOf(".");
+    if (dotIdx <= 0) return undefined;
+
+    const payload = cookieValue.slice(0, dotIdx);
+    const sig = cookieValue.slice(dotIdx + 1);
+    const expected = createHmac("sha256", this.signingKey)
+      .update(payload)
+      .digest("base64url");
+    if (sig.length !== expected.length) return undefined;
+    if (
+      !timingSafeEqual(Buffer.from(sig, "utf8"), Buffer.from(expected, "utf8"))
+    )
+      return undefined;
+
+    try {
+      const data = JSON.parse(
+        Buffer.from(payload, "base64url").toString("utf8"),
+      ) as { sid?: string; o?: string; csrf?: string; exp?: number };
+      if (!data.sid || !data.o || !data.csrf || !data.exp) return undefined;
+      if (Date.now() > data.exp) return undefined;
+
+      const session: SessionRecord = {
+        sessionId: data.sid,
+        ownerId: data.o,
+        csrfToken: data.csrf,
+        createdAt: data.exp - this.ttlMs,
+        expiresAt: data.exp,
+        lastSeenAt: Date.now(),
+      };
+      this.sessions.set(session.sessionId, session);
+      return session;
+    } catch {
+      return undefined;
+    }
+  }
 }
 
 type LoginAttemptState = {

package/src/web-ui-styles.ts

@@ -270,6 +270,22 @@ export const WEB_UI_STYLES = `
       flex-direction: column;
       padding: 12px 8px;
     }
+    .sidebar-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .sidebar-agent-name {
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--fg-strong);
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      padding-left: 10px;
+    }
     .new-chat-btn {
       background: transparent;
       border: 0;
@@ -282,6 +298,7 @@ export const WEB_UI_STYLES = `
       gap: 8px;
       font-size: 13px;
       cursor: pointer;
+      flex-shrink: 0;
       transition: background 0.15s, color 0.15s;
     }
     .new-chat-btn:hover { color: var(--fg); }
@@ -784,6 +801,30 @@ export const WEB_UI_STYLES = `
       opacity: 0.55;
       cursor: not-allowed;
     }
+    .approval-batch-actions {
+      display: flex;
+      gap: 6px;
+      margin-bottom: 8px;
+    }
+    .approval-batch-btn {
+      border-radius: 6px;
+      border: 1px solid var(--border-5);
+      background: var(--surface-4);
+      color: var(--fg-approval-btn);
+      font-size: 11px;
+      font-weight: 600;
+      padding: 4px 10px;
+      cursor: pointer;
+    }
+    .approval-batch-btn:hover { background: var(--surface-7); }
+    .approval-batch-btn.approve {
+      border-color: var(--approve-border);
+      color: var(--approve);
+    }
+    .approval-batch-btn.deny {
+      border-color: var(--deny-border);
+      color: var(--deny);
+    }
     .user-bubble {
       background: var(--bg-elevated);
       border: 1px solid var(--border-2);
@@ -1180,6 +1221,9 @@ export const WEB_UI_STYLES = `
       .shell.sidebar-open .sidebar { transform: translateX(0); }
       .sidebar-toggle { display: grid; place-items: center; }
       .topbar-new-chat { display: grid; place-items: center; }
+      .sidebar-header { padding-right: 130px; }
+      .sidebar-agent-name { padding-left: 0; }
+      .new-chat-btn { order: -1; }
       .poncho-badge {
         display: none;
         position: fixed;
@@ -1319,15 +1363,17 @@ export const WEB_UI_STYLES = `
       font-size: 13px;
     }
     @media (max-width: 768px) {
+      .main-body { flex-direction: column; }
       .browser-panel {
-        position: fixed;
-        inset: 0;
-        width: 100% !important;
+        position: relative;
+        order: -1;
+        max-height: 35vh;
         flex: none !important;
-        z-index: 200;
+        width: auto !important;
+        border-bottom: 1px solid var(--border-1);
       }
       .browser-panel-resize { display: none !important; }
-      .main-chat.has-browser { flex: 1 1 auto !important; min-width: 0; }
+      .main-chat.has-browser { flex: 1 1 auto !important; min-width: 0; min-height: 0; }
     }
 
     /* --- Subagent UI --- */

package/src/web-ui.ts

@@ -130,9 +130,12 @@ ${WEB_UI_STYLES}
 
   <div id="app" class="shell hidden">
     <aside class="sidebar">
-      <button id="new-chat" class="new-chat-btn">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
-      </button>
+      <div class="sidebar-header">
+        <span class="sidebar-agent-name">${agentName}</span>
+        <button id="new-chat" class="new-chat-btn">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
+        </button>
+      </div>
       <div id="conversation-list" class="conversation-list"></div>
       <div class="sidebar-footer">
         <button id="logout" class="logout-btn">Log out</button>