@poncho-ai/cli 0.7.1 → 0.8.0

package/src/index.ts

@@ -307,6 +307,11 @@ poncho dev
 Open \`http://localhost:3000\` for the web UI.
 
 On your first interactive session, the agent introduces its configurable capabilities.
+While a response is streaming, you can stop it:
+- Web UI: click the send button again (it switches to a stop icon)
+- Interactive CLI: press \`Ctrl+C\`
+
+Stopping is best-effort and keeps partial assistant output/tool activity already produced.
 
 ## Common Commands
 
@@ -857,6 +862,12 @@ export const createRequestHandler = async (options?: {
   } catch {}
   const runOwners = new Map<string, string>();
   const runConversations = new Map<string, string>();
+  type ActiveConversationRun = {
+    ownerId: string;
+    abortController: AbortController;
+    runId: string | null;
+  };
+  const activeConversationRuns = new Map<string, ActiveConversationRun>();
   type PendingApproval = {
     ownerId: string;
     runId: string;
@@ -924,6 +935,16 @@ export const createRequestHandler = async (options?: {
       }));
     await conversationStore.update(conversation);
   };
+  const clearPendingApprovalsForConversation = async (conversationId: string): Promise<void> => {
+    for (const [approvalId, pending] of pendingApprovals.entries()) {
+      if (pending.conversationId !== conversationId) {
+        continue;
+      }
+      pendingApprovals.delete(approvalId);
+      pending.resolve(false);
+    }
+    await persistConversationPendingApprovals(conversationId);
+  };
   const harness = new AgentHarness({
     workingDir,
     environment: resolveHarnessEnvironment(),
@@ -1319,6 +1340,61 @@ export const createRequestHandler = async (options?: {
       }
     }
 
+    const conversationStopMatch = pathname.match(/^\/api\/conversations\/([^/]+)\/stop$/);
+    if (conversationStopMatch && request.method === "POST") {
+      const conversationId = decodeURIComponent(conversationStopMatch[1] ?? "");
+      const body = (await readRequestBody(request)) as { runId?: string };
+      const requestedRunId = typeof body.runId === "string" ? body.runId.trim() : "";
+      const conversation = await conversationStore.get(conversationId);
+      if (!conversation || conversation.ownerId !== ownerId) {
+        writeJson(response, 404, {
+          code: "CONVERSATION_NOT_FOUND",
+          message: "Conversation not found",
+        });
+        return;
+      }
+      const activeRun = activeConversationRuns.get(conversationId);
+      if (!activeRun || activeRun.ownerId !== ownerId) {
+        writeJson(response, 200, {
+          ok: true,
+          stopped: false,
+        });
+        return;
+      }
+      if (activeRun.abortController.signal.aborted) {
+        activeConversationRuns.delete(conversationId);
+        writeJson(response, 200, {
+          ok: true,
+          stopped: false,
+        });
+        return;
+      }
+      if (requestedRunId && activeRun.runId !== requestedRunId) {
+        writeJson(response, 200, {
+          ok: true,
+          stopped: false,
+          runId: activeRun.runId ?? undefined,
+        });
+        return;
+      }
+      if (!requestedRunId) {
+        writeJson(response, 200, {
+          ok: true,
+          stopped: false,
+          runId: activeRun.runId ?? undefined,
+        });
+        return;
+      }
+      activeRun.abortController.abort();
+      await clearPendingApprovalsForConversation(conversationId);
+      writeJson(response, 200, {
+        ok: true,
+        stopped: true,
+        runId: activeRun.runId ?? undefined,
+      });
+      return;
+    }
+
     const conversationMessageMatch = pathname.match(/^\/api\/conversations\/([^/]+)\/messages$/);
     if (conversationMessageMatch && request.method === "POST") {
       const conversationId = decodeURIComponent(conversationMessageMatch[1] ?? "");
@@ -1342,6 +1418,24 @@ export const createRequestHandler = async (options?: {
         });
         return;
       }
+      const activeRun = activeConversationRuns.get(conversationId);
+      if (activeRun && activeRun.ownerId === ownerId) {
+        if (activeRun.abortController.signal.aborted) {
+          activeConversationRuns.delete(conversationId);
+        } else {
+          writeJson(response, 409, {
+            code: "RUN_IN_PROGRESS",
+            message: "A run is already active for this conversation",
+          });
+          return;
+        }
+      }
+      const abortController = new AbortController();
+      activeConversationRuns.set(conversationId, {
+        ownerId,
+        abortController,
+        runId: null,
+      });
       if (
         conversation.messages.length === 0 &&
         (conversation.title === "New conversation" || conversation.title.trim().length === 0)
@@ -1360,6 +1454,7 @@ export const createRequestHandler = async (options?: {
       const sections: Array<{ type: "text" | "tools"; content: string | string[] }> = [];
       let currentText = "";
       let currentTools: string[] = [];
+      let runCancelled = false;
       try {
         // Persist the user turn immediately so refreshing mid-run keeps chat context.
         conversation.messages = [...historyMessages, { role: "user", content: messageText }];
@@ -1426,11 +1521,19 @@ export const createRequestHandler = async (options?: {
             __activeConversationId: conversationId,
           },
           messages: historyMessages,
+          abortSignal: abortController.signal,
         })) {
           if (event.type === "run:started") {
             latestRunId = event.runId;
             runOwners.set(event.runId, ownerId);
             runConversations.set(event.runId, conversationId);
+            const active = activeConversationRuns.get(conversationId);
+            if (active && active.abortController === abortController) {
+              active.runId = event.runId;
+            }
+          }
+          if (event.type === "run:cancelled") {
+            runCancelled = true;
           }
           if (event.type === "model:chunk") {
             // If we have tools accumulated and text starts again, push tools as a section
@@ -1502,26 +1605,60 @@ export const createRequestHandler = async (options?: {
         if (currentText.length > 0) {
           sections.push({ type: "text", content: currentText });
         }
-        conversation.messages = [
-          ...historyMessages,
-          { role: "user", content: messageText },
-          {
-            role: "assistant",
-            content: assistantResponse,
-            metadata:
-              toolTimeline.length > 0 || sections.length > 0
-                ? ({
-                    toolActivity: toolTimeline,
-                    sections: sections.length > 0 ? sections : undefined,
-                  } as Message["metadata"])
-                : undefined,
-          },
-        ];
+        const hasAssistantContent =
+          assistantResponse.length > 0 || toolTimeline.length > 0 || sections.length > 0;
+        conversation.messages = hasAssistantContent
+          ? [
+              ...historyMessages,
+              { role: "user", content: messageText },
+              {
+                role: "assistant",
+                content: assistantResponse,
+                metadata:
+                  toolTimeline.length > 0 || sections.length > 0
+                    ? ({
+                        toolActivity: toolTimeline,
+                        sections: sections.length > 0 ? sections : undefined,
+                      } as Message["metadata"])
+                    : undefined,
+              },
+            ]
+          : [...historyMessages, { role: "user", content: messageText }];
         conversation.runtimeRunId = latestRunId || conversation.runtimeRunId;
         conversation.pendingApprovals = [];
         conversation.updatedAt = Date.now();
         await conversationStore.update(conversation);
       } catch (error) {
+        if (abortController.signal.aborted || runCancelled) {
+          const fallbackSections = [...sections];
+          if (currentTools.length > 0) {
+            fallbackSections.push({ type: "tools", content: [...currentTools] });
+          }
+          if (currentText.length > 0) {
+            fallbackSections.push({ type: "text", content: currentText });
+          }
+          if (assistantResponse.length > 0 || toolTimeline.length > 0 || fallbackSections.length > 0) {
+            conversation.messages = [
+              ...historyMessages,
+              { role: "user", content: messageText },
+              {
+                role: "assistant",
+                content: assistantResponse,
+                metadata:
+                  toolTimeline.length > 0 || fallbackSections.length > 0
+                    ? ({
+                        toolActivity: [...toolTimeline],
+                        sections: fallbackSections.length > 0 ? fallbackSections : undefined,
+                      } as Message["metadata"])
+                    : undefined,
+              },
+            ];
+            conversation.updatedAt = Date.now();
+            await conversationStore.update(conversation);
+          }
+          await clearPendingApprovalsForConversation(conversationId);
+          return;
+        }
         try {
           response.write(
             formatSseEvent({
@@ -1563,6 +1700,10 @@ export const createRequestHandler = async (options?: {
           }
         }
       } finally {
+        const active = activeConversationRuns.get(conversationId);
+        if (active && active.abortController === abortController) {
+          activeConversationRuns.delete(conversationId);
+        }
         finishConversationStream(conversationId);
         await persistConversationPendingApprovals(conversationId);
         if (latestRunId) {
@@ -1654,6 +1795,10 @@ export const runOnce = async (
     if (event.type === "run:completed") {
       process.stdout.write("\n");
     }
+    if (event.type === "run:cancelled") {
+      process.stdout.write("\n");
+      process.stderr.write("Run cancelled.\n");
+    }
   }
 };
 

package/src/run-interactive-ink.ts

@@ -355,6 +355,7 @@ export const runInteractiveInk = async ({
     ),
   );
   console.log(gray('Type "exit" to quit, "/help" for commands'));
+  console.log(gray("Press Ctrl+C during a run to stop streaming output."));
   console.log(
     gray("Conversation controls: /list /open <id> /new [title] /delete [id] /continue /reset [all]\n"),
   );
@@ -376,6 +377,17 @@ export const runInteractiveInk = async ({
   let turn = 1;
   let activeConversationId: string | null = null;
   let showToolPayloads = false;
+  let activeRunAbortController: AbortController | null = null;
+
+  rl.on("SIGINT", () => {
+    if (activeRunAbortController && !activeRunAbortController.signal.aborted) {
+      activeRunAbortController.abort();
+      process.stdout.write("\n");
+      console.log(gray("stop> cancelling current run..."));
+      return;
+    }
+    rl.close();
+  });
 
   // --- Main loop -------------------------------------------------------------
 
@@ -447,15 +459,18 @@ export const runInteractiveInk = async ({
     let currentText = "";
     let currentTools: string[] = [];
     let runFailed = false;
+    let runCancelled = false;
     let usage: TokenUsage | undefined;
     let latestRunId = "";
     const startedAt = Date.now();
+    activeRunAbortController = new AbortController();
 
     try {
       for await (const event of harness.run({
         task: trimmed,
         parameters: params,
         messages,
+        abortSignal: activeRunAbortController.signal,
       })) {
         if (event.type === "run:started") {
           latestRunId = event.runId;
@@ -555,6 +570,9 @@ export const runInteractiveInk = async ({
           clearThinking();
           runFailed = true;
           console.log(red(`error> ${event.error.message}`));
+        } else if (event.type === "run:cancelled") {
+          clearThinking();
+          runCancelled = true;
         } else if (event.type === "model:response") {
           usage = event.usage;
         } else if (event.type === "run:completed" && !sawChunk) {
@@ -569,18 +587,24 @@ export const runInteractiveInk = async ({
       }
     } catch (error) {
       clearThinking();
-      runFailed = true;
-      console.log(
-        red(
-          `error> ${error instanceof Error ? error.message : "Unknown error"}`,
-        ),
-      );
+      if (activeRunAbortController.signal.aborted) {
+        runCancelled = true;
+      } else {
+        runFailed = true;
+        console.log(
+          red(
+            `error> ${error instanceof Error ? error.message : "Unknown error"}`,
+          ),
+        );
+      }
+    } finally {
+      activeRunAbortController = null;
     }
 
     // End the streaming line if needed
     if (sawChunk && streamedText.length > 0) {
       process.stdout.write("\n");
-    } else if (!sawChunk && !runFailed && responseText.length === 0) {
+    } else if (!sawChunk && !runFailed && !runCancelled && responseText.length === 0) {
       clearThinking();
       console.log(green("assistant> (no response)"));
     }
@@ -621,17 +645,20 @@ export const runInteractiveInk = async ({
     }
 
     messages.push({ role: "user", content: trimmed });
-    messages.push({
-      role: "assistant",
-      content: responseText,
-      metadata:
-        toolTimeline.length > 0 || sections.length > 0
-          ? ({
-              toolActivity: toolTimeline,
-              sections: sections.length > 0 ? sections : undefined,
-            } as Message["metadata"])
-          : undefined,
-    });
+    const hasAssistantContent = responseText.length > 0 || toolTimeline.length > 0 || sections.length > 0;
+    if (hasAssistantContent) {
+      messages.push({
+        role: "assistant",
+        content: responseText,
+        metadata:
+          toolTimeline.length > 0 || sections.length > 0
+            ? ({
+                toolActivity: toolTimeline,
+                sections: sections.length > 0 ? sections : undefined,
+              } as Message["metadata"])
+            : undefined,
+      });
+    }
     turn = computeTurn(messages);
 
     const conversation = await conversationStore.get(activeConversationId);

package/src/web-ui.ts

@@ -1074,9 +1074,9 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
     .composer-shell {
       background: #0a0a0a;
       border: 1px solid rgba(255,255,255,0.1);
-      border-radius: 9999px;
+      border-radius: 24px;
       display: flex;
-      align-items: center;
+      align-items: end;
       padding: 4px 6px 4px 18px;
       transition: border-color 0.15s;
     }
@@ -1093,7 +1093,7 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
       padding: 10px 0 8px;
       font-size: 14px;
       line-height: 1.5;
-      margin-top: -2px;
+      margin-top: -4px;
     }
     .composer-input::placeholder { color: #444; }
     .send-btn {
@@ -1111,6 +1111,11 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
       transition: background 0.15s, opacity 0.15s;
     }
     .send-btn:hover { background: #fff; }
+    .send-btn.stop-mode {
+      background: #4a4a4a;
+      color: #fff;
+    }
+    .send-btn.stop-mode:hover { background: #565656; }
     .send-btn:disabled { opacity: 0.2; cursor: default; }
     .send-btn:disabled:hover { background: #ededed; }
     .disclaimer {
@@ -1238,6 +1243,9 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
         activeConversationId: null,
         activeMessages: [],
         isStreaming: false,
+        activeStreamAbortController: null,
+        activeStreamConversationId: null,
+        activeStreamRunId: null,
         isMessagesPinnedToBottom: true,
         confirmDeleteId: null,
         approvalRequestsInFlight: {}
@@ -1264,6 +1272,10 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
         sidebarToggle: $("sidebar-toggle"),
         sidebarBackdrop: $("sidebar-backdrop")
       };
+      const sendIconMarkup =
+        '<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 12V4M4 7l4-4 4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+      const stopIconMarkup =
+        '<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="4" y="4" width="8" height="8" rx="2" fill="currentColor"/></svg>';
 
       const pushConversationUrl = (conversationId) => {
         const target = conversationId ? "/c/" + encodeURIComponent(conversationId) : "/";
@@ -1950,6 +1962,24 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
                       }
                       renderIfActiveConversation(false);
                     }
+                    if (eventName === "run:cancelled") {
+                      assistantMessage._activeActivities = [];
+                      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 = "";
+                      }
+                      renderIfActiveConversation(false);
+                    }
                     if (eventName === "run:error") {
                       assistantMessage._activeActivities = [];
                       const errMsg =
@@ -2023,7 +2053,15 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
 
       const setStreaming = (value) => {
         state.isStreaming = value;
-        elements.send.disabled = value;
+        const canStop = value && !!state.activeStreamRunId;
+        elements.send.disabled = value ? !canStop : false;
+        elements.send.innerHTML = value ? stopIconMarkup : sendIconMarkup;
+        elements.send.classList.toggle("stop-mode", value);
+        elements.send.setAttribute("aria-label", value ? "Stop response" : "Send message");
+        elements.send.setAttribute(
+          "title",
+          value ? (canStop ? "Stop response" : "Starting response...") : "Send message",
+        );
       };
 
       const pushToolActivity = (assistantMessage, line) => {
@@ -2204,6 +2242,36 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
         el.style.overflowY = scrollHeight > 200 ? "auto" : "hidden";
       };
 
+      const stopActiveRun = async () => {
+        const stopRunId = state.activeStreamRunId;
+        if (!stopRunId) return;
+        const conversationId = state.activeStreamConversationId || state.activeConversationId;
+        if (!conversationId) return;
+        // Disable the stop button immediately so the user sees feedback.
+        state.activeStreamRunId = null;
+        setStreaming(state.isStreaming);
+        // Signal the server to cancel the run. The server will emit
+        // run:cancelled through the still-open SSE stream, which
+        // sendMessage() processes naturally – the stream ends on its own
+        // and cleanup happens in one finally block. No fetch abort needed.
+        try {
+          await api(
+            "/api/conversations/" + encodeURIComponent(conversationId) + "/stop",
+            {
+              method: "POST",
+              body: JSON.stringify({ runId: stopRunId }),
+            },
+          );
+        } catch (e) {
+          console.warn("Failed to stop conversation run:", e);
+          // Fallback: abort the local fetch so the UI at least stops.
+          const abortController = state.activeStreamAbortController;
+          if (abortController && !abortController.signal.aborted) {
+            abortController.abort();
+          }
+        }
+      };
+
       const sendMessage = async (text) => {
         const messageText = (text || "").trim();
         if (!messageText || state.isStreaming) {
@@ -2223,12 +2291,16 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
         localMessages.push(assistantMessage);
         state.activeMessages = localMessages;
         renderMessages(localMessages, true, { forceScrollBottom: true });
-        setStreaming(true);
         let conversationId = state.activeConversationId;
+        const streamAbortController = new AbortController();
+        state.activeStreamAbortController = streamAbortController;
+        state.activeStreamRunId = null;
+        setStreaming(true);
         try {
           if (!conversationId) {
             conversationId = await createConversation(messageText, { loadConversation: false });
           }
+          state.activeStreamConversationId = conversationId;
           const streamConversationId = conversationId;
           const renderIfActiveConversation = (streaming) => {
             if (state.activeConversationId !== streamConversationId) {
@@ -2237,11 +2309,23 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
             state.activeMessages = localMessages;
             renderMessages(localMessages, streaming);
           };
+          const finalizeAssistantMessage = () => {
+            assistantMessage._activeActivities = [];
+            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 = "";
+            }
+          };
           const response = await fetch("/api/conversations/" + encodeURIComponent(conversationId) + "/messages", {
             method: "POST",
             credentials: "include",
             headers: { "Content-Type": "application/json", "x-csrf-token": state.csrfToken },
-            body: JSON.stringify({ message: messageText })
+            body: JSON.stringify({ message: messageText }),
+            signal: streamAbortController.signal,
           });
           if (!response.ok || !response.body) {
             throw new Error("Failed to stream response");
@@ -2268,6 +2352,10 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
                   assistantMessage._currentText += chunk;
                   renderIfActiveConversation(true);
                 }
+                if (eventName === "run:started") {
+                  state.activeStreamRunId = typeof payload.runId === "string" ? payload.runId : null;
+                  setStreaming(state.isStreaming);
+                }
                 if (eventName === "tool:started") {
                   const toolName = payload.tool || "tool";
                   const startedActivity = addActiveActivityFromToolStart(
@@ -2413,19 +2501,14 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
                   renderIfActiveConversation(true);
                 }
                 if (eventName === "run:completed") {
-                  assistantMessage._activeActivities = [];
+                  finalizeAssistantMessage();
                   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 = "";
-                  }
+                  renderIfActiveConversation(false);
+                }
+                if (eventName === "run:cancelled") {
+                  finalizeAssistantMessage();
                   renderIfActiveConversation(false);
                 }
                 if (eventName === "run:error") {
@@ -2446,7 +2529,31 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
           }
           await loadConversations();
           // Don't reload the conversation - we already have the latest state with tool chips
+        } catch (error) {
+          if (streamAbortController.signal.aborted) {
+            assistantMessage._activeActivities = [];
+            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);
+          } else {
+            assistantMessage._activeActivities = [];
+            assistantMessage._error = error instanceof Error ? error.message : "Something went wrong";
+            renderMessages(localMessages, false);
+          }
         } finally {
+          if (state.activeStreamAbortController === streamAbortController) {
+            state.activeStreamAbortController = null;
+          }
+          if (state.activeStreamConversationId === conversationId) {
+            state.activeStreamConversationId = null;
+          }
+          state.activeStreamRunId = null;
           setStreaming(false);
           elements.prompt.focus();
         }
@@ -2549,6 +2656,13 @@ export const renderWebUiHtml = (options?: { agentName?: string }): string => {
 
       elements.composer.addEventListener("submit", async (event) => {
         event.preventDefault();
+        if (state.isStreaming) {
+          if (!state.activeStreamRunId) {
+            return;
+          }
+          await stopActiveRun();
+          return;
+        }
         const value = elements.prompt.value;
         elements.prompt.value = "";
         autoResizePrompt();