@poncho-ai/cli 0.18.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 {
@@ -2343,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) {
@@ -2395,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>