fix: improve subagent UI display and interruption handling (#330)

Co-authored-by: Letta <noreply@letta.com>

src/cli/App.tsx

@@ -1577,11 +1577,11 @@ export default function App({
 
   const handleInterrupt = useCallback(async () => {
     // If we're executing client-side tools, abort them locally instead of hitting the backend
+    // Don't show "Stream interrupted" banner - the tool result will show "Interrupted by user"
     if (isExecutingTool && toolAbortControllerRef.current) {
       toolAbortControllerRef.current.abort();
       setStreaming(false);
       setIsExecutingTool(false);
-      appendError("Stream interrupted by user");
       refreshDerived();
       return;
     }

src/cli/components/ApprovalDialogRich.tsx

@@ -252,6 +252,45 @@ const DynamicPreview: React.FC<DynamicPreviewProps> = ({
     );
   }
 
+  // Task tool (subagent) - show nicely formatted preview
+  if (t === "task") {
+    const subagentType =
+      typeof parsedArgs?.subagent_type === "string"
+        ? parsedArgs.subagent_type
+        : "unknown";
+    const description =
+      typeof parsedArgs?.description === "string"
+        ? parsedArgs.description
+        : "(no description)";
+    const prompt =
+      typeof parsedArgs?.prompt === "string"
+        ? parsedArgs.prompt
+        : "(no prompt)";
+    const model =
+      typeof parsedArgs?.model === "string" ? parsedArgs.model : undefined;
+
+    // Truncate long prompts for preview (show first ~200 chars)
+    const maxPromptLength = 200;
+    const promptPreview =
+      prompt.length > maxPromptLength
+        ? `${prompt.slice(0, maxPromptLength)}...`
+        : prompt;
+
+    return (
+      <Box flexDirection="column" paddingLeft={2}>
+        <Box flexDirection="row">
+          <Text bold>{subagentType}</Text>
+          <Text dimColor> · </Text>
+          <Text>{description}</Text>
+        </Box>
+        {model && <Text dimColor>Model: {model}</Text>}
+        <Box marginTop={1}>
+          <Text dimColor>{promptPreview}</Text>
+        </Box>
+      </Box>
+    );
+  }
+
   // File edit previews: write/edit/multi_edit/replace/write_file/write_file_gemini
   if (
     (t === "write" ||
@@ -714,5 +753,6 @@ function getHeaderLabel(toolName: string): string {
   if (t === "write_file" || t === "writefile") return "Write File";
   if (t === "killbash") return "Kill Shell";
   if (t === "bashoutput") return "Shell Output";
+  if (t === "task") return "Task";
   return toolName;
 }

src/cli/components/SubagentGroupDisplay.tsx

@@ -131,7 +131,7 @@ const AgentRow = memo(({ agent, isLast, expanded }: AgentRowProps) => {
           <Text dimColor>{" ⎿  Done"}</Text>
         ) : agent.status === "error" ? (
           <Text color={colors.subagent.error}>
-            {" ⎿  Error: "}
+            {" ⎿  "}
             {agent.error}
           </Text>
         ) : lastTool ? (
@@ -151,21 +151,27 @@ AgentRow.displayName = "AgentRow";
 interface GroupHeaderProps {
   count: number;
   allCompleted: boolean;
+  hasErrors: boolean;
   expanded: boolean;
 }
 
 const GroupHeader = memo(
-  ({ count, allCompleted, expanded }: GroupHeaderProps) => {
+  ({ count, allCompleted, hasErrors, expanded }: GroupHeaderProps) => {
     const statusText = allCompleted
       ? `Ran ${count} subagent${count !== 1 ? "s" : ""}`
       : `Running ${count} subagent${count !== 1 ? "s" : ""}…`;
 
     const hint = expanded ? "(ctrl+o to collapse)" : "(ctrl+o to expand)";
 
+    // Use error color for dot if any subagent errored
+    const dotColor = hasErrors
+      ? colors.subagent.error
+      : colors.subagent.completed;
+
     return (
       <Box flexDirection="row">
         {allCompleted ? (
-          <Text color={colors.subagent.completed}>⏺</Text>
+          <Text color={dotColor}>⏺</Text>
         ) : (
           <BlinkDot color={colors.subagent.header} />
         )}
@@ -200,12 +206,14 @@ export const SubagentGroupDisplay = memo(() => {
   const allCompleted = agents.every(
     (a) => a.status === "completed" || a.status === "error",
   );
+  const hasErrors = agents.some((a) => a.status === "error");
 
   return (
     <Box flexDirection="column" marginTop={1}>
       <GroupHeader
         count={agents.length}
         allCompleted={allCompleted}
+        hasErrors={hasErrors}
         expanded={expanded}
       />
       {agents.map((agent, index) => (

src/cli/components/SubagentGroupStatic.tsx

@@ -87,7 +87,7 @@ const AgentRow = memo(({ agent, isLast }: AgentRowProps) => {
           <Text dimColor>{" ⎿  Done"}</Text>
         ) : (
           <Text color={colors.subagent.error}>
-            {" ⎿  Error: "}
+            {" ⎿  "}
             {agent.error}
           </Text>
         )}
@@ -109,12 +109,18 @@ export const SubagentGroupStatic = memo(
     }
 
     const statusText = `Ran ${agents.length} subagent${agents.length !== 1 ? "s" : ""}`;
+    const hasErrors = agents.some((a) => a.status === "error");
+
+    // Use error color for dot if any subagent errored
+    const dotColor = hasErrors
+      ? colors.subagent.error
+      : colors.subagent.completed;
 
     return (
       <Box flexDirection="column">
         {/* Header */}
         <Box flexDirection="row">
-          <Text color={colors.subagent.completed}>⏺</Text>
+          <Text color={dotColor}>⏺</Text>
           <Text color={colors.subagent.header}> {statusText}</Text>
         </Box>
 

src/cli/components/ToolCallMessageRich.tsx

@@ -1,5 +1,6 @@
 import { Box, Text } from "ink";
 import { memo } from "react";
+import { INTERRUPTED_BY_USER } from "../../constants";
 import { clipToolReturn } from "../../tools/manager.js";
 import { formatArgsDisplay } from "../helpers/formatArgsDisplay.js";
 import {
@@ -46,8 +47,14 @@ export const ToolCallMessage = memo(({ line }: { line: ToolCallLine }) => {
   const argsText = line.argsText ?? "...";
 
   // Task tool - handled by SubagentGroupDisplay, don't render here
+  // Exception: Cancelled/rejected Task tools should be rendered inline
+  // since they won't appear in SubagentGroupDisplay
   if (isTaskTool(rawName)) {
-    return null;
+    const isCancelledOrRejected =
+      line.phase === "finished" && line.resultOk === false;
+    if (!isCancelledOrRejected) {
+      return null;
+    }
   }
 
   // Apply tool name remapping
@@ -103,14 +110,14 @@ export const ToolCallMessage = memo(({ line }: { line: ToolCallLine }) => {
       );
     }
 
-    if (line.resultText === "Interrupted by user") {
+    if (line.resultText === INTERRUPTED_BY_USER) {
       return (
         <Box flexDirection="row">
           <Box width={prefixWidth} flexShrink={0}>
             <Text>{prefix}</Text>
           </Box>
           <Box flexGrow={1} width={contentWidth}>
-            <Text color={colors.status.interrupt}>Interrupted by user</Text>
+            <Text color={colors.status.interrupt}>{INTERRUPTED_BY_USER}</Text>
           </Box>
         </Box>
       );

src/cli/helpers/accumulator.ts

@@ -5,6 +5,7 @@
 // - Exposes `onChunk` to feed SDK events and `toLines` to render.
 
 import type { LettaStreamingResponse } from "@letta-ai/letta-client/resources/agents/messages";
+import { INTERRUPTED_BY_USER } from "../../constants";
 
 // One line per transcript row. Tool calls evolve in-place.
 // For tool call returns, merge into the tool call matching the toolCallId
@@ -172,7 +173,7 @@ export function markIncompleteToolsAsCancelled(b: Buffers) {
         ...line,
         phase: "finished" as const,
         resultOk: false,
-        resultText: "Interrupted by user",
+        resultText: INTERRUPTED_BY_USER,
       };
       b.byId.set(id, updatedLine);
     }

src/cli/helpers/subagentDisplay.ts

@@ -8,7 +8,7 @@
  * Format tool count and token statistics for display
  *
  * @param toolCount - Number of tool calls
- * @param totalTokens - Total tokens used
+ * @param totalTokens - Total tokens used (0 or undefined means no data available)
  * @param isRunning - If true, shows "—" for tokens (since usage is only available at end)
  */
 export function formatStats(
@@ -16,12 +16,19 @@ export function formatStats(
   totalTokens: number,
   isRunning = false,
 ): string {
-  const tokenStr = isRunning
-    ? "—"
-    : totalTokens >= 1000
+  const toolStr = `${toolCount} tool use${toolCount !== 1 ? "s" : ""}`;
+
+  // Only show token count if we have actual data (not running and totalTokens > 0)
+  const hasTokenData = !isRunning && totalTokens > 0;
+  if (!hasTokenData) {
+    return toolStr;
+  }
+
+  const tokenStr =
+    totalTokens >= 1000
       ? `${(totalTokens / 1000).toFixed(1)}k`
       : String(totalTokens);
-  return `${toolCount} tool use${toolCount !== 1 ? "s" : ""} · ${tokenStr} tokens`;
+  return `${toolStr} · ${tokenStr} tokens`;
 }
 
 /**

src/cli/helpers/subagentState.ts

@@ -180,7 +180,7 @@ export function addToolCall(
  */
 export function completeSubagent(
   id: string,
-  result: { success: boolean; error?: string },
+  result: { success: boolean; error?: string; totalTokens?: number },
 ): void {
   const agent = store.agents.get(id);
   if (!agent) return;
@@ -191,6 +191,7 @@ export function completeSubagent(
     status: result.success ? "completed" : "error",
     error: result.error,
     durationMs: Date.now() - agent.startTime,
+    totalTokens: result.totalTokens ?? agent.totalTokens,
   } as SubagentState;
   store.agents.set(id, updatedAgent);
   notifyListeners();