@poncho-ai/cli 0.4.2 → 0.5.0

package/src/run-interactive-ink.ts

@@ -443,6 +443,9 @@ export const runInteractiveInk = async ({
     let sawChunk = false;
     let toolEvents = 0;
     const toolTimeline: string[] = [];
+    const sections: Array<{ type: "text" | "tools"; content: string | string[] }> = [];
+    let currentText = "";
+    let currentTools: string[] = [];
     let runFailed = false;
     let usage: TokenUsage | undefined;
     let latestRunId = "";
@@ -459,8 +462,14 @@ export const runInteractiveInk = async ({
         }
         if (event.type === "model:chunk") {
           sawChunk = true;
+          // If we have tools accumulated and text starts again, push tools as a section
+          if (currentTools.length > 0) {
+            sections.push({ type: "tools", content: currentTools });
+            currentTools = [];
+          }
           responseText += event.content;
           streamedText += event.content;
+          currentText += event.content;
 
           if (!thinkingCleared) {
             clearThinking();
@@ -485,11 +494,18 @@ export const runInteractiveInk = async ({
           clearThinking();
 
           if (event.type === "tool:started") {
+            // If we have text accumulated, push it as a text section
+            if (currentText.length > 0) {
+              sections.push({ type: "text", content: currentText });
+              currentText = "";
+            }
             const preview = showToolPayloads
               ? compactPreview(event.input, 400)
               : compactPreview(event.input, 100);
             console.log(yellow(`tools> start ${event.tool} input=${preview}`));
-            toolTimeline.push(`- start \`${event.tool}\``);
+            const toolText = `- start \`${event.tool}\``;
+            toolTimeline.push(toolText);
+            currentTools.push(toolText);
             toolEvents += 1;
           } else if (event.type === "tool:completed") {
             const preview = showToolPayloads
@@ -503,29 +519,37 @@ export const runInteractiveInk = async ({
             if (showToolPayloads) {
               console.log(yellow(`tools> output ${preview}`));
             }
-            toolTimeline.push(
-              `- done \`${event.tool}\` in ${formatDuration(event.duration)}`,
-            );
+            const toolText = `- done \`${event.tool}\` in ${formatDuration(event.duration)}`;
+            toolTimeline.push(toolText);
+            currentTools.push(toolText);
           } else if (event.type === "tool:error") {
             console.log(
               red(`tools> error ${event.tool}: ${event.error}`),
             );
-            toolTimeline.push(`- error \`${event.tool}\`: ${event.error}`);
+            const toolText = `- error \`${event.tool}\`: ${event.error}`;
+            toolTimeline.push(toolText);
+            currentTools.push(toolText);
           } else if (event.type === "tool:approval:required") {
             console.log(
               magenta(`tools> approval required for ${event.tool}`),
             );
-            toolTimeline.push(`- approval required \`${event.tool}\``);
+            const toolText = `- approval required \`${event.tool}\``;
+            toolTimeline.push(toolText);
+            currentTools.push(toolText);
           } else if (event.type === "tool:approval:granted") {
             console.log(
               gray(`tools> approval granted (${event.approvalId})`),
             );
-            toolTimeline.push(`- approval granted (${event.approvalId})`);
+            const toolText = `- approval granted (${event.approvalId})`;
+            toolTimeline.push(toolText);
+            currentTools.push(toolText);
           } else if (event.type === "tool:approval:denied") {
             console.log(
               magenta(`tools> approval denied (${event.approvalId})`),
             );
-            toolTimeline.push(`- approval denied (${event.approvalId})`);
+            const toolText = `- approval denied (${event.approvalId})`;
+            toolTimeline.push(toolText);
+            currentTools.push(toolText);
           }
         } else if (event.type === "run:error") {
           clearThinking();
@@ -588,13 +612,24 @@ export const runInteractiveInk = async ({
       activeConversationId = created.conversationId;
     }
 
+    // Finalize sections
+    if (currentTools.length > 0) {
+      sections.push({ type: "tools", content: currentTools });
+    }
+    if (currentText.length > 0) {
+      sections.push({ type: "text", content: currentText });
+    }
+
     messages.push({ role: "user", content: trimmed });
     messages.push({
       role: "assistant",
       content: responseText,
       metadata:
-        toolTimeline.length > 0
-          ? ({ toolActivity: toolTimeline } as Message["metadata"])
+        toolTimeline.length > 0 || sections.length > 0
+          ? ({
+              toolActivity: toolTimeline,
+              sections: sections.length > 0 ? sections : undefined,
+            } as Message["metadata"])
           : undefined,
     });
     turn = computeTurn(messages);

package/src/web-ui.ts

@@ -1,10 +1,18 @@
 import { createHash, randomUUID, timingSafeEqual } from "node:crypto";
 import { mkdir, readFile, writeFile } from "node:fs/promises";
-import { basename, dirname, resolve } from "node:path";
+import { readFileSync } from "node:fs";
+import { basename, dirname, resolve, join } from "node:path";
 import { homedir } from "node:os";
+import { createRequire } from "node:module";
 import type { IncomingMessage, ServerResponse } from "node:http";
 import type { Message } from "@poncho-ai/sdk";
 
+// Load marked library at module initialization (ESM compatible)
+const require = createRequire(import.meta.url);
+const markedPackagePath = require.resolve("marked");
+const markedDir = dirname(markedPackagePath);
+const markedSource = readFileSync(join(markedDir, "marked.umd.js"), "utf-8");
+
 export interface WebUiConversation {
   conversationId: string;
   title: string;
@@ -783,8 +791,72 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
       font-size: 13px;
       line-height: 1.5;
     }
+    .tool-activity-inline {
+      margin: 8px 0;
+      font-size: 12px;
+      line-height: 1.45;
+      color: #8a8a8a;
+    }
+    .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);
+      padding: 4px 8px;
+      border-radius: 6px;
+      color: #bcbcbc;
+      font-size: 11px;
+    }
+    .tool-status {
+      color: #8a8a8a;
+      font-style: italic;
+    }
+    .tool-done {
+      color: #6a9955;
+    }
+    .tool-error {
+      color: #f48771;
+    }
+    .assistant-content table {
+      border-collapse: collapse;
+      width: 100%;
+      margin: 14px 0;
+      font-size: 13px;
+      border: 1px solid rgba(255,255,255,0.08);
+      border-radius: 8px;
+      overflow: hidden;
+      display: block;
+      max-width: 100%;
+      overflow-x: auto;
+      white-space: nowrap;
+    }
+    .assistant-content th {
+      background: rgba(255,255,255,0.06);
+      padding: 10px 12px;
+      text-align: left;
+      font-weight: 600;
+      border-bottom: 1px solid rgba(255,255,255,0.12);
+      color: #fff;
+      min-width: 100px;
+    }
+    .assistant-content td {
+      padding: 10px 12px;
+      border-bottom: 1px solid rgba(255,255,255,0.06);
+      min-width: 100px;
+    }
+    .assistant-content tr:last-child td {
+      border-bottom: none;
+    }
+    .assistant-content tbody tr:hover {
+      background: rgba(255,255,255,0.02);
+    }
+    .assistant-content hr {
+      border: 0;
+      border-top: 1px solid rgba(255,255,255,0.1);
+      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-radius: 10px;
@@ -793,6 +865,9 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
       color: #bcbcbc;
       max-width: 300px;
     }
+    .assistant-content > .tool-activity:first-child {
+      margin-top: 0;
+    }
     .tool-activity-disclosure {
       display: block;
     }
@@ -1064,6 +1139,15 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
   </div>
 
     <script>
+      // Marked library (inlined)
+      ${markedSource}
+
+      // Configure marked for GitHub Flavored Markdown (tables, etc.)
+      marked.setOptions({
+        gfm: true,
+        breaks: true
+      });
+
       const state = {
         csrfToken: "",
         conversations: [],
@@ -1149,75 +1233,17 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
           .replace(/"/g, "&quot;")
           .replace(/'/g, "&#39;");
 
-      const renderInlineMarkdown = (value) => {
-        let html = escapeHtml(value);
-        html = html.replace(/\\*\\*([^*]+)\\*\\*/g, "<strong>$1</strong>");
-        html = html.replace(/\\x60([^\\x60]+)\\x60/g, "<code>$1</code>");
-        return html;
-      };
-
-      const renderMarkdownBlock = (value) => {
-        const lines = String(value || "").split("\\n");
-        let html = "";
-        let inList = false;
-
-        for (const rawLine of lines) {
-          const line = rawLine.trimEnd();
-          const trimmed = line.trim();
-          const headingMatch = trimmed.match(/^(#{1,3})\\s+(.+)$/);
-
-          if (headingMatch) {
-            if (inList) {
-              html += "</ul>";
-              inList = false;
-            }
-            const level = Math.min(3, headingMatch[1].length);
-            const tag = level === 1 ? "h2" : level === 2 ? "h3" : "p";
-            html += "<" + tag + ">" + renderInlineMarkdown(headingMatch[2]) + "</" + tag + ">";
-            continue;
-          }
-
-          if (/^\\s*-\\s+/.test(line)) {
-            if (!inList) {
-              html += "<ul>";
-              inList = true;
-            }
-            html += "<li>" + renderInlineMarkdown(line.replace(/^\\s*-\\s+/, "")) + "</li>";
-            continue;
-          }
-          if (inList) {
-            html += "</ul>";
-            inList = false;
-          }
-          if (trimmed.length === 0) {
-            continue;
-          }
-          html += "<p>" + renderInlineMarkdown(line) + "</p>";
-        }
-
-        if (inList) {
-          html += "</ul>";
-        }
-        return html;
-      };
-
       const renderAssistantMarkdown = (value) => {
-        const source = String(value || "");
-        const fenceRegex = /\\x60\\x60\\x60([\\s\\S]*?)\\x60\\x60\\x60/g;
-        let html = "";
-        let lastIndex = 0;
-        let match;
-
-        while ((match = fenceRegex.exec(source))) {
-          const before = source.slice(lastIndex, match.index);
-          html += renderMarkdownBlock(before);
-          const codeText = String(match[1] || "").replace(/^\\n+|\\n+$/g, "");
-          html += "<pre><code>" + escapeHtml(codeText) + "</code></pre>";
-          lastIndex = match.index + match[0].length;
-        }
+        const source = String(value || "").trim();
+        if (!source) return "<p></p>";
 
-        html += renderMarkdownBlock(source.slice(lastIndex));
-        return html || "<p></p>";
+        try {
+          return marked.parse(source);
+        } catch (error) {
+          console.error("Markdown parsing error:", error);
+          // Fallback to escaped text
+          return "<p>" + escapeHtml(source) + "</p>";
+        }
       };
 
       const extractToolActivity = (value) => {
@@ -1360,23 +1386,13 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
             const content = document.createElement("div");
             content.className = "assistant-content";
             const text = String(m.content || "");
-            const parsed = extractToolActivity(text);
-            const metadataToolActivity =
-              m.metadata && Array.isArray(m.metadata.toolActivity)
-                ? m.metadata.toolActivity
-                : [];
-            const toolActivity =
-              Array.isArray(m._toolActivity) && m._toolActivity.length > 0
-                ? m._toolActivity
-                : metadataToolActivity.length > 0
-                  ? metadataToolActivity
-                  : parsed.activities;
+
             if (m._error) {
               const errorEl = document.createElement("div");
               errorEl.className = "message-error";
               errorEl.innerHTML = "<strong>Error</strong><br>" + escapeHtml(m._error);
               content.appendChild(errorEl);
-            } else if (isStreaming && i === messages.length - 1 && !parsed.content) {
+            } else if (isStreaming && i === messages.length - 1 && !text && (!m._chunks || m._chunks.length === 0)) {
               const spinner = document.createElement("span");
               spinner.className = "thinking-indicator";
               const starFrames = ["✶","✸","✹","✺","✹","✷"];
@@ -1385,10 +1401,44 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
               spinner._interval = setInterval(() => { frame = (frame + 1) % starFrames.length; spinner.textContent = starFrames[frame]; }, 70);
               content.appendChild(spinner);
             } else {
-              content.innerHTML = renderAssistantMarkdown(parsed.content);
-            }
-            if (toolActivity.length > 0) {
-              content.insertAdjacentHTML("beforeend", renderToolActivity(toolActivity));
+              // Check for sections in _sections (streaming) or metadata.sections (stored)
+              const sections = m._sections || (m.metadata && m.metadata.sections);
+
+              if (sections && sections.length > 0) {
+                // Render sections interleaved
+                sections.forEach(section => {
+                  if (section.type === "text") {
+                    const textDiv = document.createElement("div");
+                    textDiv.innerHTML = renderAssistantMarkdown(section.content);
+                    content.appendChild(textDiv);
+                  } else if (section.type === "tools") {
+                    content.insertAdjacentHTML("beforeend", renderToolActivity(section.content));
+                  }
+                });
+                // While streaming, show current tools if any
+                if (isStreaming && i === messages.length - 1 && m._currentTools && m._currentTools.length > 0) {
+                  content.insertAdjacentHTML("beforeend", renderToolActivity(m._currentTools));
+                }
+                // Show current text being typed
+                if (isStreaming && i === messages.length - 1 && m._currentText) {
+                  const textDiv = document.createElement("div");
+                  textDiv.innerHTML = renderAssistantMarkdown(m._currentText);
+                  content.appendChild(textDiv);
+                }
+              } else {
+                // Fallback: render text and tools the old way (for old messages without sections)
+                if (text) {
+                  const parsed = extractToolActivity(text);
+                  content.innerHTML = renderAssistantMarkdown(parsed.content);
+                }
+                const metadataToolActivity =
+                  m.metadata && Array.isArray(m.metadata.toolActivity)
+                    ? m.metadata.toolActivity
+                    : [];
+                if (metadataToolActivity.length > 0) {
+                  content.insertAdjacentHTML("beforeend", renderToolActivity(metadataToolActivity));
+                }
+              }
             }
             wrap.appendChild(content);
             row.appendChild(wrap);
@@ -1496,7 +1546,14 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
           return;
         }
         const localMessages = [...(state.activeMessages || []), { role: "user", content: messageText }];
-        let assistantMessage = { role: "assistant", content: "", metadata: { toolActivity: [] } };
+        let assistantMessage = {
+          role: "assistant",
+          content: "",
+          _sections: [], // Array of {type: 'text'|'tools', content: string|array}
+          _currentText: "",
+          _currentTools: [],
+          metadata: { toolActivity: [] }
+        };
         localMessages.push(assistantMessage);
         state.activeMessages = localMessages;
         renderMessages(localMessages, true);
@@ -1526,44 +1583,88 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
             buffer += decoder.decode(value, { stream: true });
             buffer = parseSseChunk(buffer, (eventName, payload) => {
               if (eventName === "model:chunk") {
-                assistantMessage.content += String(payload.content || "");
+                const chunk = String(payload.content || "");
+                // If we have tools accumulated and text starts again, push tools as a section
+                if (assistantMessage._currentTools.length > 0 && chunk.length > 0) {
+                  assistantMessage._sections.push({ type: "tools", content: assistantMessage._currentTools });
+                  assistantMessage._currentTools = [];
+                }
+                assistantMessage.content += chunk;
+                assistantMessage._currentText += chunk;
                 renderMessages(localMessages, true);
               }
               if (eventName === "tool:started") {
-                pushToolActivity(assistantMessage, "start " + (payload.tool || "tool"));
+                const toolName = payload.tool || "tool";
+                // 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";
+                assistantMessage._currentTools.push(toolText);
+                if (!assistantMessage.metadata) assistantMessage.metadata = {};
+                if (!assistantMessage.metadata.toolActivity) assistantMessage.metadata.toolActivity = [];
+                assistantMessage.metadata.toolActivity.push(toolText);
                 renderMessages(localMessages, true);
               }
               if (eventName === "tool:completed") {
+                const toolName = payload.tool || "tool";
                 const duration = typeof payload.duration === "number" ? payload.duration : null;
-                pushToolActivity(
-                  assistantMessage,
-                  "done " +
-                    (payload.tool || "tool") +
-                    (duration !== null ? " (" + duration + "ms)" : ""),
-                );
+                const toolText = "- done \\x60" + toolName + "\\x60" + (duration !== null ? " (" + duration + "ms)" : "");
+                assistantMessage._currentTools.push(toolText);
+                if (!assistantMessage.metadata) assistantMessage.metadata = {};
+                if (!assistantMessage.metadata.toolActivity) assistantMessage.metadata.toolActivity = [];
+                assistantMessage.metadata.toolActivity.push(toolText);
                 renderMessages(localMessages, true);
               }
               if (eventName === "tool:error") {
-                pushToolActivity(
-                  assistantMessage,
-                  "error " + (payload.tool || "tool") + ": " + (payload.error || "unknown error"),
-                );
+                const toolName = payload.tool || "tool";
+                const errorMsg = payload.error || "unknown error";
+                const toolText = "- error \\x60" + toolName + "\\x60: " + 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);
               }
               if (eventName === "tool:approval:required") {
-                pushToolActivity(assistantMessage, "approval required for " + (payload.tool || "tool"));
+                const toolName = payload.tool || "tool";
+                const toolText = "- approval required \\x60" + toolName + "\\x60";
+                assistantMessage._currentTools.push(toolText);
+                if (!assistantMessage.metadata) assistantMessage.metadata = {};
+                if (!assistantMessage.metadata.toolActivity) assistantMessage.metadata.toolActivity = [];
+                assistantMessage.metadata.toolActivity.push(toolText);
                 renderMessages(localMessages, true);
               }
               if (eventName === "tool:approval:granted") {
-                pushToolActivity(assistantMessage, "approval granted");
+                const toolText = "- approval granted";
+                assistantMessage._currentTools.push(toolText);
+                if (!assistantMessage.metadata) assistantMessage.metadata = {};
+                if (!assistantMessage.metadata.toolActivity) assistantMessage.metadata.toolActivity = [];
+                assistantMessage.metadata.toolActivity.push(toolText);
                 renderMessages(localMessages, true);
               }
               if (eventName === "tool:approval:denied") {
-                pushToolActivity(assistantMessage, "approval denied");
+                const toolText = "- approval denied";
+                assistantMessage._currentTools.push(toolText);
+                if (!assistantMessage.metadata) assistantMessage.metadata = {};
+                if (!assistantMessage.metadata.toolActivity) assistantMessage.metadata.toolActivity = [];
+                assistantMessage.metadata.toolActivity.push(toolText);
                 renderMessages(localMessages, true);
               }
-              if (eventName === "run:completed" && (!assistantMessage.content || assistantMessage.content.length === 0)) {
-                assistantMessage.content = String(payload.result?.response || "");
+              if (eventName === "run:completed") {
+                if (!assistantMessage.content || assistantMessage.content.length === 0) {
+                  assistantMessage.content = String(payload.result?.response || "");
+                }
+                // Finalize sections: push any remaining tools and text
+                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 = "";
+                }
                 renderMessages(localMessages, false);
               }
               if (eventName === "run:error") {
@@ -1574,8 +1675,10 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
               }
             });
           }
+          // Update the state with our local messages (don't reload and lose tool chips)
+          state.activeMessages = localMessages;
           await loadConversations();
-          await loadConversation(conversationId);
+          // Don't reload the conversation - we already have the latest state with tool chips
         } finally {
           setStreaming(false);
           elements.prompt.focus();