@poncho-ai/cli 0.6.0 → 0.6.2

package/src/web-ui.ts

@@ -839,6 +839,7 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
     .assistant-content td {
       padding: 10px 12px;
       border-bottom: 1px solid rgba(255,255,255,0.06);
+      width: 100%;
       min-width: 100px;
     }
     .assistant-content tr:last-child td {
@@ -1024,6 +1025,23 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
       color: #ededed;
       opacity: 0.5;
     }
+    .thinking-status {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      margin-top: 2px;
+      color: #8a8a8a;
+      font-size: 14px;
+      line-height: 1.65;
+      font-weight: 400;
+    }
+    .thinking-status-label {
+      color: #8a8a8a;
+      font-size: 14px;
+      line-height: 1.65;
+      font-weight: 400;
+      white-space: nowrap;
+    }
 
     /* Composer */
     .composer {
@@ -1220,6 +1238,7 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
         activeConversationId: null,
         activeMessages: [],
         isStreaming: false,
+        isMessagesPinnedToBottom: true,
         confirmDeleteId: null,
         approvalRequestsInFlight: {}
       };
@@ -1590,8 +1609,21 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
         }
       };
 
-      const renderMessages = (messages, isStreaming = false) => {
-        const createThinkingIndicator = () => {
+      const isNearBottom = (element, threshold = 64) => {
+        if (!element) return true;
+        return (
+          element.scrollHeight - element.clientHeight - element.scrollTop <= threshold
+        );
+      };
+
+      const renderMessages = (messages, isStreaming = false, options = {}) => {
+        const previousScrollTop = elements.messages.scrollTop;
+        const shouldStickToBottom =
+          options.forceScrollBottom === true || state.isMessagesPinnedToBottom;
+
+        const createThinkingIndicator = (label) => {
+          const status = document.createElement("div");
+          status.className = "thinking-status";
           const spinner = document.createElement("span");
           spinner.className = "thinking-indicator";
           const starFrames = ["✶", "✸", "✹", "✺", "✹", "✷"];
@@ -1601,12 +1633,20 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
             frame = (frame + 1) % starFrames.length;
             spinner.textContent = starFrames[frame];
           }, 70);
-          return spinner;
+          status.appendChild(spinner);
+          if (label) {
+            const text = document.createElement("span");
+            text.className = "thinking-status-label";
+            text.textContent = label;
+            status.appendChild(text);
+          }
+          return status;
         };
 
         elements.messages.innerHTML = "";
         if (!messages || !messages.length) {
           elements.messages.innerHTML = '<div class="empty-state"><div class="assistant-avatar">' + agentInitial + '</div><div>How can I help you today?</div></div>';
+          elements.messages.scrollTop = 0;
           return;
         }
         const col = document.createElement("div");
@@ -1638,7 +1678,7 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
               errorEl.innerHTML = "<strong>Error</strong><br>" + escapeHtml(m._error);
               content.appendChild(errorEl);
             } else if (shouldRenderEmptyStreamingIndicator) {
-              content.appendChild(createThinkingIndicator());
+              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);
@@ -1712,7 +1752,7 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
                 (!m._currentText || m._currentText.length === 0)
               ) {
                 const waitIndicator = document.createElement("div");
-                waitIndicator.appendChild(createThinkingIndicator());
+                waitIndicator.appendChild(createThinkingIndicator(getThinkingStatusLabel(m)));
                 content.appendChild(waitIndicator);
               }
             }
@@ -1724,7 +1764,14 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
           col.appendChild(row);
         });
         elements.messages.appendChild(col);
-        elements.messages.scrollTop = elements.messages.scrollHeight;
+        if (shouldStickToBottom) {
+          elements.messages.scrollTop = elements.messages.scrollHeight;
+          state.isMessagesPinnedToBottom = true;
+          return;
+        }
+        if (options.preserveScroll !== false) {
+          elements.messages.scrollTop = previousScrollTop;
+        }
       };
 
       const loadConversations = async () => {
@@ -1740,13 +1787,20 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
           payload.conversation.messages || [],
           payload.conversation.pendingApprovals || payload.pendingApprovals || [],
         );
-        renderMessages(state.activeMessages);
+        renderMessages(state.activeMessages, false, { forceScrollBottom: true });
         elements.prompt.focus();
       };
 
       const streamConversationEvents = (conversationId) => {
         return new Promise((resolve) => {
           const localMessages = state.activeMessages || [];
+          const renderIfActiveConversation = (streaming) => {
+            if (state.activeConversationId !== conversationId) {
+              return;
+            }
+            state.activeMessages = localMessages;
+            renderMessages(localMessages, streaming);
+          };
           let assistantMessage = localMessages[localMessages.length - 1];
           if (!assistantMessage || assistantMessage.role !== "assistant") {
             assistantMessage = {
@@ -1764,6 +1818,7 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
           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 = [];
@@ -1800,10 +1855,14 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
                       }
                       assistantMessage.content += chunk;
                       assistantMessage._currentText += chunk;
-                      renderMessages(localMessages, true);
+                      renderIfActiveConversation(true);
                     }
                     if (eventName === "tool:started") {
                       const toolName = payload.tool || "tool";
+                      const startedActivity = addActiveActivityFromToolStart(
+                        assistantMessage,
+                        payload,
+                      );
                       if (assistantMessage._currentText.length > 0) {
                         assistantMessage._sections.push({
                           type: "text",
@@ -1811,33 +1870,67 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
                         });
                         assistantMessage._currentText = "";
                       }
-                      const toolText = "- start \\x60" + toolName + "\\x60";
+                      const detail =
+                        startedActivity && typeof startedActivity.detail === "string"
+                          ? startedActivity.detail.trim()
+                          : "";
+                      const toolText =
+                        "- start \\x60" +
+                        toolName +
+                        "\\x60" +
+                        (detail ? " (" + detail + ")" : "");
                       assistantMessage._currentTools.push(toolText);
                       assistantMessage.metadata.toolActivity.push(toolText);
-                      renderMessages(localMessages, true);
+                      renderIfActiveConversation(true);
                     }
                     if (eventName === "tool:completed") {
                       const toolName = payload.tool || "tool";
+                      const activeActivity = removeActiveActivityForTool(
+                        assistantMessage,
+                        toolName,
+                      );
                       const duration =
                         typeof payload.duration === "number" ? payload.duration : null;
+                      const detail =
+                        activeActivity && typeof activeActivity.detail === "string"
+                          ? activeActivity.detail.trim()
+                          : "";
+                      const meta = [];
+                      if (duration !== null) meta.push(duration + "ms");
+                      if (detail) meta.push(detail);
                       const toolText =
                         "- done \\x60" +
                         toolName +
                         "\\x60" +
-                        (duration !== null ? " (" + duration + "ms)" : "");
+                        (meta.length > 0 ? " (" + meta.join(", ") + ")" : "");
                       assistantMessage._currentTools.push(toolText);
                       assistantMessage.metadata.toolActivity.push(toolText);
-                      renderMessages(localMessages, true);
+                      renderIfActiveConversation(true);
                     }
                     if (eventName === "tool:error") {
                       const toolName = payload.tool || "tool";
+                      const activeActivity = removeActiveActivityForTool(
+                        assistantMessage,
+                        toolName,
+                      );
                       const errorMsg = payload.error || "unknown error";
-                      const toolText = "- error \\x60" + toolName + "\\x60: " + errorMsg;
+                      const detail =
+                        activeActivity && typeof activeActivity.detail === "string"
+                          ? activeActivity.detail.trim()
+                          : "";
+                      const toolText =
+                        "- error \\x60" +
+                        toolName +
+                        "\\x60" +
+                        (detail ? " (" + detail + ")" : "") +
+                        ": " +
+                        errorMsg;
                       assistantMessage._currentTools.push(toolText);
                       assistantMessage.metadata.toolActivity.push(toolText);
-                      renderMessages(localMessages, true);
+                      renderIfActiveConversation(true);
                     }
                     if (eventName === "run:completed") {
+                      assistantMessage._activeActivities = [];
                       if (
                         !assistantMessage.content ||
                         assistantMessage.content.length === 0
@@ -1860,14 +1953,15 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
                         });
                         assistantMessage._currentText = "";
                       }
-                      renderMessages(localMessages, false);
+                      renderIfActiveConversation(false);
                     }
                     if (eventName === "run:error") {
+                      assistantMessage._activeActivities = [];
                       const errMsg =
                         payload.error?.message || "Something went wrong";
                       assistantMessage.content = "";
                       assistantMessage._error = errMsg;
-                      renderMessages(localMessages, false);
+                      renderIfActiveConversation(false);
                     }
                   } catch (error) {
                     console.error("SSE reconnect event error:", eventName, error);
@@ -1876,7 +1970,9 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
               }
             };
             processChunks().finally(() => {
-              state.activeMessages = localMessages;
+              if (state.activeConversationId === conversationId) {
+                state.activeMessages = localMessages;
+              }
               resolve(undefined);
             });
           }).catch(() => {
@@ -1951,6 +2047,159 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
         assistantMessage.metadata.toolActivity.push(line);
       };
 
+      const ensureActiveActivities = (assistantMessage) => {
+        if (!Array.isArray(assistantMessage._activeActivities)) {
+          assistantMessage._activeActivities = [];
+        }
+        return assistantMessage._activeActivities;
+      };
+
+      const getStringInputField = (input, key) => {
+        if (!input || typeof input !== "object") {
+          return "";
+        }
+        const value = input[key];
+        return typeof value === "string" ? value.trim() : "";
+      };
+
+      const describeToolStart = (payload) => {
+        const toolName = payload && typeof payload.tool === "string" ? payload.tool : "tool";
+        const input = payload && payload.input && typeof payload.input === "object" ? payload.input : {};
+
+        if (toolName === "activate_skill") {
+          const skillName = getStringInputField(input, "name") || "skill";
+          return {
+            kind: "skill",
+            tool: toolName,
+            label: "Activating " + skillName + " skill",
+            detail: "skill: " + skillName,
+          };
+        }
+
+        if (toolName === "run_skill_script") {
+          const scriptPath = getStringInputField(input, "script");
+          const skillName = getStringInputField(input, "skill");
+          if (scriptPath && skillName) {
+            return {
+              kind: "tool",
+              tool: toolName,
+              label: "Running script " + scriptPath + " in " + skillName + " skill",
+              detail: "script: " + scriptPath + ", skill: " + skillName,
+            };
+          }
+          if (scriptPath) {
+            return {
+              kind: "tool",
+              tool: toolName,
+              label: "Running script " + scriptPath,
+              detail: "script: " + scriptPath,
+            };
+          }
+        }
+
+        if (toolName === "read_skill_resource") {
+          const resourcePath = getStringInputField(input, "path");
+          const skillName = getStringInputField(input, "skill");
+          if (resourcePath && skillName) {
+            return {
+              kind: "tool",
+              tool: toolName,
+              label: "Reading " + resourcePath + " from " + skillName + " skill",
+              detail: "path: " + resourcePath + ", skill: " + skillName,
+            };
+          }
+          if (resourcePath) {
+            return {
+              kind: "tool",
+              tool: toolName,
+              label: "Reading " + resourcePath,
+              detail: "path: " + resourcePath,
+            };
+          }
+        }
+
+        if (toolName === "read_file") {
+          const path = getStringInputField(input, "path");
+          if (path) {
+            return {
+              kind: "tool",
+              tool: toolName,
+              label: "Reading " + path,
+              detail: "path: " + path,
+            };
+          }
+        }
+
+        return {
+          kind: "tool",
+          tool: toolName,
+          label: "Running " + toolName + " tool",
+          detail: "",
+        };
+      };
+
+      const addActiveActivityFromToolStart = (assistantMessage, payload) => {
+        const activities = ensureActiveActivities(assistantMessage);
+        const activity = describeToolStart(payload);
+        activities.push(activity);
+        return activity;
+      };
+
+      const removeActiveActivityForTool = (assistantMessage, toolName) => {
+        if (!toolName || !Array.isArray(assistantMessage._activeActivities)) {
+          return null;
+        }
+        const activities = assistantMessage._activeActivities;
+        const idx = activities.findIndex((item) => item && item.tool === toolName);
+        if (idx >= 0) {
+          return activities.splice(idx, 1)[0] || null;
+        }
+        return null;
+      };
+
+      const getThinkingStatusLabel = (assistantMessage) => {
+        const activities = Array.isArray(assistantMessage?._activeActivities)
+          ? assistantMessage._activeActivities
+          : [];
+        const labels = [];
+        activities.forEach((item) => {
+          if (!item || typeof item.label !== "string") {
+            return;
+          }
+          const label = item.label.trim();
+          if (!label || labels.includes(label)) {
+            return;
+          }
+          labels.push(label);
+        });
+        if (labels.length === 1) {
+          return labels[0];
+        }
+        if (labels.length === 2) {
+          return labels[0] + ", " + labels[1];
+        }
+        if (labels.length > 2) {
+          return labels[0] + ", " + labels[1] + " +" + (labels.length - 2) + " more";
+        }
+
+        if (Array.isArray(assistantMessage?._currentTools)) {
+          const tick = String.fromCharCode(96);
+          const startPrefix = "- start " + tick;
+          for (let idx = assistantMessage._currentTools.length - 1; idx >= 0; idx -= 1) {
+            const item = String(assistantMessage._currentTools[idx] || "");
+            if (item.startsWith(startPrefix)) {
+              const rest = item.slice(startPrefix.length);
+              const endIdx = rest.indexOf(tick);
+              const toolName = (endIdx >= 0 ? rest.slice(0, endIdx) : rest).trim();
+              if (toolName) {
+                return "Running " + toolName + " tool";
+              }
+            }
+          }
+        }
+        return "Thinking...";
+      };
+
       const autoResizePrompt = () => {
         const el = elements.prompt;
         el.style.height = "auto";
@@ -1972,18 +2221,27 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
           _sections: [], // Array of {type: 'text'|'tools', content: string|array}
           _currentText: "",
           _currentTools: [],
+          _activeActivities: [],
           _pendingApprovals: [],
           metadata: { toolActivity: [] }
         };
         localMessages.push(assistantMessage);
         state.activeMessages = localMessages;
-        renderMessages(localMessages, true);
+        renderMessages(localMessages, true, { forceScrollBottom: true });
         setStreaming(true);
         let conversationId = state.activeConversationId;
         try {
           if (!conversationId) {
             conversationId = await createConversation(messageText, { loadConversation: false });
           }
+          const streamConversationId = conversationId;
+          const renderIfActiveConversation = (streaming) => {
+            if (state.activeConversationId !== streamConversationId) {
+              return;
+            }
+            state.activeMessages = localMessages;
+            renderMessages(localMessages, streaming);
+          };
           const response = await fetch("/api/conversations/" + encodeURIComponent(conversationId) + "/messages", {
             method: "POST",
             credentials: "include",
@@ -2013,45 +2271,96 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
                   }
                   assistantMessage.content += chunk;
                   assistantMessage._currentText += chunk;
-                  renderMessages(localMessages, true);
+                  renderIfActiveConversation(true);
                 }
                 if (eventName === "tool:started") {
                   const toolName = payload.tool || "tool";
+                  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 = "";
                   }
-                  const toolText = "- start \\x60" + toolName + "\\x60";
+                  const detail =
+                    startedActivity && typeof startedActivity.detail === "string"
+                      ? startedActivity.detail.trim()
+                      : "";
+                  const toolText =
+                    "- start \\x60" + toolName + "\\x60" + (detail ? " (" + detail + ")" : "");
                   assistantMessage._currentTools.push(toolText);
                   if (!assistantMessage.metadata) assistantMessage.metadata = {};
                   if (!assistantMessage.metadata.toolActivity) assistantMessage.metadata.toolActivity = [];
                   assistantMessage.metadata.toolActivity.push(toolText);
-                  renderMessages(localMessages, true);
+                  renderIfActiveConversation(true);
                 }
                 if (eventName === "tool:completed") {
                   const toolName = payload.tool || "tool";
+                  const activeActivity = removeActiveActivityForTool(
+                    assistantMessage,
+                    toolName,
+                  );
                   const duration = typeof payload.duration === "number" ? payload.duration : null;
-                  const toolText = "- done \\x60" + toolName + "\\x60" + (duration !== null ? " (" + duration + "ms)" : "");
+                  const detail =
+                    activeActivity && typeof activeActivity.detail === "string"
+                      ? activeActivity.detail.trim()
+                      : "";
+                  const meta = [];
+                  if (duration !== null) meta.push(duration + "ms");
+                  if (detail) meta.push(detail);
+                  const toolText =
+                    "- done \\x60" + toolName + "\\x60" + (meta.length > 0 ? " (" + meta.join(", ") + ")" : "");
                   assistantMessage._currentTools.push(toolText);
                   if (!assistantMessage.metadata) assistantMessage.metadata = {};
                   if (!assistantMessage.metadata.toolActivity) assistantMessage.metadata.toolActivity = [];
                   assistantMessage.metadata.toolActivity.push(toolText);
-                  renderMessages(localMessages, true);
+                  renderIfActiveConversation(true);
                 }
                 if (eventName === "tool:error") {
                   const toolName = payload.tool || "tool";
+                  const activeActivity = removeActiveActivityForTool(
+                    assistantMessage,
+                    toolName,
+                  );
                   const errorMsg = payload.error || "unknown error";
-                  const toolText = "- error \\x60" + toolName + "\\x60: " + errorMsg;
+                  const detail =
+                    activeActivity && typeof activeActivity.detail === "string"
+                      ? activeActivity.detail.trim()
+                      : "";
+                  const toolText =
+                    "- error \\x60" +
+                    toolName +
+                    "\\x60" +
+                    (detail ? " (" + detail + ")" : "") +
+                    ": " +
+                    errorMsg;
                   assistantMessage._currentTools.push(toolText);
                   if (!assistantMessage.metadata) assistantMessage.metadata = {};
                   if (!assistantMessage.metadata.toolActivity) assistantMessage.metadata.toolActivity = [];
                   assistantMessage.metadata.toolActivity.push(toolText);
-                  renderMessages(localMessages, true);
+                  renderIfActiveConversation(true);
                 }
                 if (eventName === "tool:approval:required") {
                   const toolName = payload.tool || "tool";
-                  const toolText = "- approval required \\x60" + toolName + "\\x60";
+                  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);
                   if (!assistantMessage.metadata) assistantMessage.metadata = {};
                   if (!assistantMessage.metadata.toolActivity) assistantMessage.metadata.toolActivity = [];
@@ -2076,7 +2385,7 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
                       });
                     }
                   }
-                  renderMessages(localMessages, true);
+                  renderIfActiveConversation(true);
                 }
                 if (eventName === "tool:approval:granted") {
                   const toolText = "- approval granted";
@@ -2091,7 +2400,7 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
                       (req) => req.approvalId !== approvalId,
                     );
                   }
-                  renderMessages(localMessages, true);
+                  renderIfActiveConversation(true);
                 }
                 if (eventName === "tool:approval:denied") {
                   const toolText = "- approval denied";
@@ -2106,9 +2415,10 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
                       (req) => req.approvalId !== approvalId,
                     );
                   }
-                  renderMessages(localMessages, true);
+                  renderIfActiveConversation(true);
                 }
                 if (eventName === "run:completed") {
+                  assistantMessage._activeActivities = [];
                   if (!assistantMessage.content || assistantMessage.content.length === 0) {
                     assistantMessage.content = String(payload.result?.response || "");
                   }
@@ -2121,21 +2431,24 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
                     assistantMessage._sections.push({ type: "text", content: assistantMessage._currentText });
                     assistantMessage._currentText = "";
                   }
-                  renderMessages(localMessages, false);
+                  renderIfActiveConversation(false);
                 }
                 if (eventName === "run:error") {
+                  assistantMessage._activeActivities = [];
                   const errMsg = payload.error?.message || "Something went wrong";
                   assistantMessage.content = "";
                   assistantMessage._error = errMsg;
-                  renderMessages(localMessages, false);
+                  renderIfActiveConversation(false);
                 }
               } catch (error) {
                 console.error("SSE event handling error:", eventName, error);
               }
             });
           }
-          // Update the state with our local messages (don't reload and lose tool chips)
-          state.activeMessages = localMessages;
+          // Update active state only if user is still on this conversation.
+          if (state.activeConversationId === streamConversationId) {
+            state.activeMessages = localMessages;
+          }
           await loadConversations();
           // Don't reload the conversation - we already have the latest state with tool chips
         } finally {
@@ -2303,6 +2616,10 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
         }
       });
 
+      elements.messages.addEventListener("scroll", () => {
+        state.isMessagesPinnedToBottom = isNearBottom(elements.messages);
+      }, { passive: true });
+
       document.addEventListener("click", (event) => {
         if (!(event.target instanceof Node)) {
           return;