@poncho-ai/cli 0.14.0 → 0.14.1

package/src/web-ui.ts

@@ -509,6 +509,8 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
       --tool-done: #6a9955;
       --tool-error: #f48771;
 
+      --warning: #e8a735;
+
       --approve: #78e7a6;
       --approve-border: rgba(58,208,122,0.45);
       --deny: #f59b9b;
@@ -586,6 +588,8 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
         --tool-done: #16a34a;
         --tool-error: #dc2626;
 
+        --warning: #ca8a04;
+
         --approve: #16a34a;
         --approve-border: rgba(22,163,74,0.35);
         --deny: #dc2626;
@@ -731,6 +735,20 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
       flex-direction: column;
       gap: 2px;
     }
+    .sidebar-section-label {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--fg-7);
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      padding: 10px 10px 4px;
+    }
+    .sidebar-section-label:first-child { padding-top: 4px; }
+    .sidebar-section-divider {
+      height: 1px;
+      background: var(--border);
+      margin: 6px 10px;
+    }
     .conversation-item {
       height: 36px;
       min-height: 36px;
@@ -748,6 +766,16 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
       position: relative;
       transition: color 0.15s;
     }
+    .conversation-item .approval-dot {
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: var(--warning, #e8a735);
+      margin-right: 6px;
+      flex-shrink: 0;
+      vertical-align: middle;
+    }
     .conversation-item:hover { color: var(--fg-3); }
     .conversation-item.active {
       color: var(--fg);
@@ -971,7 +999,7 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
     .tool-error {
       color: var(--tool-error);
     }
-    .assistant-content table {
+    .assistant-content table:not(.approval-request-table) {
       border-collapse: collapse;
       width: 100%;
       margin: 14px 0;
@@ -984,7 +1012,7 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
       overflow-x: auto;
       white-space: nowrap;
     }
-    .assistant-content th {
+    .assistant-content table:not(.approval-request-table) th {
       background: var(--surface-4);
       padding: 10px 12px;
       text-align: left;
@@ -993,16 +1021,16 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
       color: var(--fg-strong);
       min-width: 100px;
     }
-    .assistant-content td {
+    .assistant-content table:not(.approval-request-table) td {
       padding: 10px 12px;
       border-bottom: 1px solid var(--border-1);
       width: 100%;
       min-width: 100px;
     }
-    .assistant-content tr:last-child td {
+    .assistant-content table:not(.approval-request-table) tr:last-child td {
       border-bottom: none;
     }
-    .assistant-content tbody tr:hover {
+    .assistant-content table:not(.approval-request-table) tbody tr:hover {
       background: var(--surface-1);
     }
     .assistant-content hr {
@@ -1020,6 +1048,10 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
       line-height: 1.45;
       color: var(--fg-tool-code);
       width: 300px;
+      transition: width 0.2s ease;
+    }
+    .tool-activity.has-approvals {
+      width: 100%;
     }
     .assistant-content > .tool-activity:first-child {
       margin-top: 0;
@@ -1079,40 +1111,60 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
       border-top: 1px solid var(--border-2);
       padding: 10px 12px 12px;
       display: grid;
-      gap: 8px;
-      background: var(--inset-1);
+      gap: 10px;
     }
     .approval-requests-label {
-      font-size: 11px;
+      font-size: 12px;
       text-transform: uppercase;
       letter-spacing: 0.06em;
       color: var(--fg-approval-label);
       font-weight: 600;
     }
+    .approval-requests-label code {
+      font-family: ui-monospace, "SF Mono", "Fira Code", monospace;
+      text-transform: none;
+      letter-spacing: 0;
+      color: var(--fg-strong);
+    }
     .approval-request-item {
-      border: 1px solid var(--border-3);
-      background: var(--surface-2);
-      border-radius: 8px;
-      padding: 8px;
       display: grid;
-      gap: 6px;
+      gap: 8px;
     }
-    .approval-request-tool {
-      font-size: 12px;
-      color: var(--fg-strong);
+    .approval-request-table {
+      width: 100%;
+      border-collapse: collapse;
+      border: none;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+    .approval-request-table tr,
+    .approval-request-table td {
+      border: none;
+      background: none;
+    }
+    .approval-request-table td {
+      padding: 4px 0;
+      vertical-align: top;
+    }
+    .approval-request-table .ak {
       font-weight: 600;
-      overflow-wrap: anywhere;
+      color: var(--fg-approval-label);
+      white-space: nowrap;
+      width: 1%;
+      padding-right: 20px;
     }
-    .approval-request-input {
-      font-family: ui-monospace, "SF Mono", "Fira Code", monospace;
-      font-size: 11px;
-      color: var(--fg-approval-input);
-      background: var(--inset-2);
-      border-radius: 6px;
-      padding: 6px;
+    .approval-request-table .av,
+    .approval-request-table .av-complex {
+      color: var(--fg);
       overflow-wrap: anywhere;
-      max-height: 80px;
+      white-space: pre-wrap;
+      max-height: 200px;
       overflow-y: auto;
+      display: block;
+    }
+    .approval-request-table .av-complex {
+      font-family: ui-monospace, "SF Mono", "Fira Code", monospace;
+      font-size: 12px;
     }
     .approval-request-actions {
       display: flex;
@@ -1153,6 +1205,7 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
       line-height: 1.5;
       overflow-wrap: break-word;
       word-break: break-word;
+      white-space: pre-wrap;
     }
     .empty-state {
       display: flex;
@@ -1826,18 +1879,20 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
           .map((req) => {
             const approvalId = typeof req.approvalId === "string" ? req.approvalId : "";
             const tool = typeof req.tool === "string" ? req.tool : "tool";
-            const inputPreview = typeof req.inputPreview === "string" ? req.inputPreview : "{}";
+            const input = req.input != null ? req.input : {};
             const submitting = req.state === "submitting";
             const approveLabel = submitting && req.pendingDecision === "approve" ? "Approving..." : "Approve";
             const denyLabel = submitting && req.pendingDecision === "deny" ? "Denying..." : "Deny";
+            const errorHtml = req._error
+              ? '<div style="color: var(--deny); font-size: 11px; margin-top: 4px;">Submit failed: ' + escapeHtml(req._error) + "</div>"
+              : "";
             return (
               '<div class="approval-request-item">' +
-              '<div class="approval-request-tool">' +
+              '<div class="approval-requests-label">Approval required: <code>' +
               escapeHtml(tool) +
-              "</div>" +
-              '<div class="approval-request-input">' +
-              escapeHtml(inputPreview) +
-              "</div>" +
+              "</code></div>" +
+              renderInputTable(input) +
+              errorHtml +
               '<div class="approval-request-actions">' +
               '<button class="approval-action-btn approve" data-approval-id="' +
               escapeHtml(approvalId) +
@@ -1860,7 +1915,6 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
           .join("");
         return (
           '<div class="approval-requests">' +
-          '<div class="approval-requests-label">Approval required</div>' +
           rows +
           "</div>"
         );
@@ -1890,22 +1944,46 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
               "</details>"
             )
           : "";
+        const cls = "tool-activity" + (hasApprovals ? " has-approvals" : "");
         return (
-          '<div class="tool-activity">' +
+          '<div class="' + cls + '">' +
           disclosure +
           renderApprovalRequests(approvalRequests) +
           "</div>"
         );
       };
 
-      const safeJsonPreview = (value) => {
-        try {
-          return JSON.stringify(value, (_, nestedValue) =>
-            typeof nestedValue === "bigint" ? String(nestedValue) : nestedValue,
-          );
-        } catch {
-          return "[unserializable input]";
+      const renderInputTable = (input) => {
+        if (!input || typeof input !== "object") {
+          return '<div class="av-complex">' + escapeHtml(String(input ?? "{}")) + "</div>";
         }
+        const keys = Object.keys(input);
+        if (keys.length === 0) {
+          return '<div class="av-complex">{}</div>';
+        }
+        const formatValue = (val) => {
+          if (val === null || val === undefined) return escapeHtml("null");
+          if (typeof val === "boolean" || typeof val === "number") return escapeHtml(String(val));
+          if (typeof val === "string") return escapeHtml(val);
+          try {
+            const replacer = (_, v) => typeof v === "bigint" ? String(v) : v;
+            return escapeHtml(JSON.stringify(val, replacer, 2));
+          } catch {
+            return escapeHtml("[unserializable]");
+          }
+        };
+        const rows = keys.map((key) => {
+          const val = input[key];
+          const isComplex = val !== null && typeof val === "object";
+          const cls = isComplex ? "av-complex" : "av";
+          return (
+            "<tr>" +
+            '<td class="ak">' + escapeHtml(key) + "</td>" +
+            '<td><div class="' + cls + '">' + formatValue(val) + "</div></td>" +
+            "</tr>"
+          );
+        }).join("");
+        return '<table class="approval-request-table">' + rows + "</table>";
       };
 
       const updatePendingApproval = (approvalId, updater) => {
@@ -1944,12 +2022,10 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
               return null;
             }
             const toolName = item && typeof item.tool === "string" ? item.tool : "tool";
-            const preview = safeJsonPreview(item?.input ?? {});
-            const inputPreview = preview.length > 600 ? preview.slice(0, 600) + "..." : preview;
             return {
               approvalId,
               tool: toolName,
-              inputPreview,
+              input: item?.input ?? {},
               state: "pending",
             };
           })
@@ -2027,53 +2103,87 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
         elements.shell.classList.toggle("sidebar-open", open);
       };
 
-      const renderConversationList = () => {
-        elements.list.innerHTML = "";
-        for (const c of state.conversations) {
-          const item = document.createElement("div");
-          item.className = "conversation-item" + (c.conversationId === state.activeConversationId ? " active" : "");
-          item.textContent = c.title;
-
-          const isConfirming = state.confirmDeleteId === c.conversationId;
-          const deleteBtn = document.createElement("button");
-          deleteBtn.className = "delete-btn" + (isConfirming ? " confirming" : "");
-          deleteBtn.textContent = isConfirming ? "sure?" : "\\u00d7";
-          deleteBtn.onclick = async (e) => {
-            e.stopPropagation();
-            if (!isConfirming) {
-              state.confirmDeleteId = c.conversationId;
-              renderConversationList();
-              return;
-            }
-            await api("/api/conversations/" + c.conversationId, { method: "DELETE" });
-            if (state.activeConversationId === c.conversationId) {
-              state.activeConversationId = null;
-              state.activeMessages = [];
-              state.contextTokens = 0;
-              state.contextWindow = 0;
-              updateContextRing();
-              pushConversationUrl(null);
-              elements.chatTitle.textContent = "";
-              renderMessages([]);
-            }
-            state.confirmDeleteId = null;
-            await loadConversations();
-          };
-          item.appendChild(deleteBtn);
+      const buildConversationItem = (c) => {
+        const item = document.createElement("div");
+        item.className = "conversation-item" + (c.conversationId === state.activeConversationId ? " active" : "");
 
-          item.onclick = async () => {
-            // Clear any delete confirmation, but still navigate
-            if (state.confirmDeleteId) {
-              state.confirmDeleteId = null;
-            }
-            state.activeConversationId = c.conversationId;
-            pushConversationUrl(c.conversationId);
+        if (c.hasPendingApprovals) {
+          const dot = document.createElement("span");
+          dot.className = "approval-dot";
+          item.appendChild(dot);
+        }
+
+        const titleSpan = document.createElement("span");
+        titleSpan.textContent = c.title;
+        item.appendChild(titleSpan);
+
+        const isConfirming = state.confirmDeleteId === c.conversationId;
+        const deleteBtn = document.createElement("button");
+        deleteBtn.className = "delete-btn" + (isConfirming ? " confirming" : "");
+        deleteBtn.textContent = isConfirming ? "sure?" : "\\u00d7";
+        deleteBtn.onclick = async (e) => {
+          e.stopPropagation();
+          if (!isConfirming) {
+            state.confirmDeleteId = c.conversationId;
             renderConversationList();
-            await loadConversation(c.conversationId);
-            if (isMobile()) setSidebarOpen(false);
-          };
+            return;
+          }
+          await api("/api/conversations/" + c.conversationId, { method: "DELETE" });
+          if (state.activeConversationId === c.conversationId) {
+            state.activeConversationId = null;
+            state.activeMessages = [];
+            state.contextTokens = 0;
+            state.contextWindow = 0;
+            updateContextRing();
+            pushConversationUrl(null);
+            elements.chatTitle.textContent = "";
+            renderMessages([]);
+          }
+          state.confirmDeleteId = null;
+          await loadConversations();
+        };
+        item.appendChild(deleteBtn);
 
-          elements.list.appendChild(item);
+        item.onclick = async () => {
+          if (state.confirmDeleteId) {
+            state.confirmDeleteId = null;
+          }
+          state.activeConversationId = c.conversationId;
+          pushConversationUrl(c.conversationId);
+          renderConversationList();
+          await loadConversation(c.conversationId);
+          if (isMobile()) setSidebarOpen(false);
+        };
+
+        return item;
+      };
+
+      const renderConversationList = () => {
+        elements.list.innerHTML = "";
+        const pending = state.conversations.filter(c => c.hasPendingApprovals);
+        const rest = state.conversations.filter(c => !c.hasPendingApprovals);
+
+        if (pending.length > 0) {
+          const label = document.createElement("div");
+          label.className = "sidebar-section-label";
+          label.textContent = "Awaiting approval";
+          elements.list.appendChild(label);
+          for (const c of pending) {
+            elements.list.appendChild(buildConversationItem(c));
+          }
+          if (rest.length > 0) {
+            const divider = document.createElement("div");
+            divider.className = "sidebar-section-divider";
+            elements.list.appendChild(divider);
+            const recentLabel = document.createElement("div");
+            recentLabel.className = "sidebar-section-label";
+            recentLabel.textContent = "Recent";
+            elements.list.appendChild(recentLabel);
+          }
+        }
+
+        for (const c of rest) {
+          elements.list.appendChild(buildConversationItem(c));
         }
       };
 
@@ -2502,8 +2612,6 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
                       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 = [];
                         }
@@ -2514,7 +2622,7 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
                           assistantMessage._pendingApprovals.push({
                             approvalId,
                             tool: toolName,
-                            inputPreview,
+                            input: payload.input ?? {},
                             state: "pending",
                           });
                         }
@@ -3162,8 +3270,6 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
                   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 = [];
                     }
@@ -3174,7 +3280,7 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
                       assistantMessage._pendingApprovals.push({
                         approvalId,
                         tool: toolName,
-                        inputPreview,
+                        input: payload.input ?? {},
                         state: "pending",
                       });
                     }
@@ -3523,17 +3629,23 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
           });
           updatePendingApproval(approvalId, () => null);
           renderMessages(state.activeMessages, state.isStreaming);
+          loadConversations();
           if (!wasStreaming && state.activeConversationId) {
-            await streamConversationEvents(state.activeConversationId);
+            await streamConversationEvents(state.activeConversationId, { liveOnly: true });
           }
         } catch (error) {
-          const errMsg = error instanceof Error ? error.message : String(error);
-          updatePendingApproval(approvalId, (request) => ({
-            ...request,
-            state: "pending",
-            pendingDecision: null,
-            inputPreview: String(request.inputPreview || "") + " (submit failed: " + errMsg + ")",
-          }));
+          const isStale = error && error.payload && error.payload.code === "APPROVAL_NOT_FOUND";
+          if (isStale) {
+            updatePendingApproval(approvalId, () => null);
+          } else {
+            const errMsg = error instanceof Error ? error.message : String(error);
+            updatePendingApproval(approvalId, (request) => ({
+              ...request,
+              state: "pending",
+              pendingDecision: null,
+              _error: errMsg,
+            }));
+          }
           renderMessages(state.activeMessages, state.isStreaming);
         } finally {
           if (!wasStreaming) {