[Improve] Inspect and stop stalled task commands

apps/web/src/app/(sandbox)/task/[taskId]/Messages.tsx

@@ -9,6 +9,8 @@ import {
   useState,
   type MutableRefObject,
 } from 'react';
+import { useMutation } from '@tanstack/react-query';
+import { toast } from 'sonner';
 import type { ScrollToBottom } from 'use-stick-to-bottom';
 
 import {
@@ -26,12 +28,15 @@ import {
   type MessageUiOptions,
 } from '@/components/ai-elements/message-ui-options';
 import { useNarrationMode } from '@/hooks/useNarrationMode';
+import { useShowCommandOutput } from '@/hooks/useShowCommandOutput';
 import { Lightbulb, Skeleton } from '@/components/system';
 import { cn } from '@/lib/utils';
+import { useTRPCClient } from '@/trpc/client';
 
 import {
   useSandboxMessages,
   useSandboxHistoryReady,
+  useSandboxConnectionStatus,
   useSandboxTaskPhase,
   type TaskSession,
 } from './hooks';
@@ -199,7 +204,21 @@ const MessagesBase = ({
   const { messages } = useSandboxMessages();
   const historyReady = useSandboxHistoryReady();
   const taskPhase = useSandboxTaskPhase();
+  const { connected, hasConnectedOnce } = useSandboxConnectionStatus();
+  const trpcClient = useTRPCClient();
+  const [abortRequested, setAbortRequested] = useState(false);
+  const abortTurn = useMutation({
+    mutationFn: () =>
+      trpcClient.sandboxSession.abortTurn.mutate({ taskId: session.taskId }),
+    onSuccess: () => {
+      setAbortRequested(true);
+    },
+    onError: (error) => {
+      toast.error(error.message || 'Unable to stop the running command.');
+    },
+  });
   const { enabled: narrationModeEnabled } = useNarrationMode();
+  const { enabled: commandOutputVisible } = useShowCommandOutput();
   const [suppressedMessageIds, setSuppressedMessageIds] = useState<Set<string>>(
     () => new Set(),
   );
@@ -219,6 +238,10 @@ const MessagesBase = ({
     setSuppressedMessageIds(new Set());
   }, [session.taskId]);
 
+  useEffect(() => {
+    setAbortRequested(false);
+  }, [session.taskId, taskPhase]);
+
   const suppressMessage = useCallback((messageId: string) => {
     setSuppressedMessageIds((prev) => {
       if (prev.has(messageId)) {
@@ -353,6 +376,7 @@ const MessagesBase = ({
         <AcpGroupedToolMessage
           group={block}
           showSubagentPayload={showInternalMessages}
+          showCommandOutput={commandOutputVisible}
         />
       );
 
@@ -380,6 +404,12 @@ const MessagesBase = ({
       <AcpMessageItem
         msg={block.msg}
         onSuppress={suppressMessage}
+        commandConnected={connected}
+        commandConnectionWasEstablished={hasConnectedOnce}
+        canAbortCommand={taskPhase === 'running'}
+        commandAbortPending={abortTurn.isPending || abortRequested}
+        onAbortCommand={() => abortTurn.mutate()}
+        commandOutputVisible={commandOutputVisible}
         showSubagentPayload={showInternalMessages}
       >
         {block.childBlocks?.length

apps/web/src/app/(sandbox)/task/[taskId]/hooks/services/acp-protocol-service.ts

@@ -339,6 +339,7 @@ export function toAcpUiMessage(
 
       return {
         ...base,
+        startedAt: normalized.ts,
         role: 'tool',
         kind: 'tool_call',
         text: toolCallPayload.title ?? normalized.text,
@@ -1000,6 +1001,7 @@ export class AcpProtocolService {
 
     next[existingIndex] = {
       ...toolResultMessage,
+      startedAt: existing.startedAt ?? existing.ts,
       text: incomingText || existing.text,
       data: mergeToolResultPayload(existing, toolResultMessage),
       previousTs: existing.previousTs,
@@ -1559,6 +1561,7 @@ export class AcpProtocolService {
             kind: 'tool_result',
             partial: isRunning || !isTerminal,
             ts: event.ts,
+            startedAt: existing.startedAt ?? existing.ts,
             text:
               extractToolResultText(event.payload) ||
               candidate.text ||

apps/web/src/app/(sandbox)/task/[taskId]/messages/acp/AcpCommandOutputMessage.stories.tsx

@@ -16,6 +16,9 @@ const meta: Meta<typeof AcpCommandOutputMessage> = {
     layout: 'padded',
   },
   tags: ['autodocs'],
+  args: {
+    showOutput: true,
+  },
   decorators: [
     (Story) => (
       <div className="w-full max-w-2xl border rounded-lg overflow-hidden bg-background p-4">
@@ -37,7 +40,7 @@ const toolResultMsg = (
 ): AcpToolResultUiMessage =>
   ({
     id: 'story-msg',
-    ts: 0,
+    ts: Date.now(),
     role: 'assistant',
     partial: false,
     sessionId: null,

apps/web/src/app/(sandbox)/task/[taskId]/messages/acp/AcpCommandOutputMessage.tsx

@@ -1,5 +1,10 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
 import { sanitizeSandboxPathString } from '@/lib';
 import { cn } from '@/lib/utils';
+import { Button, SquareIcon } from '@/components/system';
 
 import {
   CodeBlock,
@@ -20,13 +25,43 @@ interface AcpCommandOutputMessageProps {
   msg: AcpToolCallUiMessage | AcpToolResultUiMessage;
   ts?: number;
   status?: AcpCommandStatus;
+  connected?: boolean;
+  connectionWasEstablished?: boolean;
+  canAbort?: boolean;
+  abortPending?: boolean;
+  onAbort?: () => void;
+  showOutput?: boolean;
+}
+
+function formatCommandDuration(durationMs: number): string {
+  const totalSeconds = Math.max(1, Math.floor(Math.max(0, durationMs) / 1000));
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  if (hours > 0) {
+    return minutes > 0 ? `${hours}h ${minutes}m` : `${hours}h`;
+  }
+
+  if (minutes > 0) {
+    return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
+  }
+
+  return `${totalSeconds}s`;
 }
 
 export const AcpCommandOutputMessage = ({
   msg,
   ts,
   status = null,
+  connected = true,
+  connectionWasEstablished = false,
+  canAbort = false,
+  abortPending = false,
+  onAbort,
+  showOutput = false,
 }: AcpCommandOutputMessageProps) => {
+  const [now, setNow] = useState(() => Date.now());
   const cmd =
     msg.kind === 'tool_result'
       ? {
@@ -45,22 +80,50 @@ export const AcpCommandOutputMessage = ({
     : undefined;
 
   const output = sanitizeSandboxPathString(cmd.text);
+  const hasOutput = output.trim().length > 0;
+  const outputVisible = showOutput && hasOutput;
 
   const isExitCodePresent = cmd.exitCode !== undefined;
   const isPending =
     status === 'in_progress' || (status === null && !isExitCodePresent);
   const isFailed =
     status === 'failed' || (isExitCodePresent && cmd.exitCode !== 0);
+  const isDisconnected = isPending && connectionWasEstablished && !connected;
+  const startedAt = msg.startedAt ?? msg.ts;
+  const duration =
+    isPending || msg.startedAt !== undefined
+      ? formatCommandDuration((isPending ? now : msg.ts) - startedAt)
+      : null;
+  const quietDuration = formatCommandDuration(now - msg.ts);
+
+  useEffect(() => {
+    if (!isPending || isDisconnected) {
+      return;
+    }
+
+    const intervalId = window.setInterval(() => setNow(Date.now()), 1000);
+    return () => window.clearInterval(intervalId);
+  }, [isDisconnected, isPending]);
 
-  const statusText = isPending
-    ? null
-    : isExitCodePresent
-      ? cmd.exitCode === 0
-        ? null
-        : `exit ${cmd.exitCode}`
-      : status === 'failed'
-        ? 'failed'
-        : null;
+  const statusText = isDisconnected
+    ? 'last known running · connection lost'
+    : isPending
+      ? now - msg.ts >= 15_000
+        ? `running ${duration} · last update ${quietDuration} ago`
+        : `running ${duration}`
+      : isExitCodePresent
+        ? cmd.exitCode === 0
+          ? duration
+            ? `completed in ${duration}`
+            : null
+          : duration
+            ? `exit ${cmd.exitCode} · ${duration}`
+            : `exit ${cmd.exitCode}`
+        : status === 'failed'
+          ? duration
+            ? `failed · ${duration}`
+            : 'failed'
+          : null;
 
   return (
     <Message from="assistant" className={cn('chat-command-output-message')}>
@@ -69,19 +132,19 @@ export const AcpCommandOutputMessage = ({
           code={output}
           language="bash"
           variant="compact"
-          collapsible={false}
-          defaultCollapsed={false}
-          forceDark={true}
-          renderContent={false}
-          maxHeight={undefined}
+          collapsible={outputVisible}
+          defaultCollapsed={!isPending}
+          renderContent={outputVisible}
+          maxHeight={240}
+          highlight={false}
           command={command ?? ''}
           showCommandCopy
-          showOutputCopy={false}
+          showOutputCopy={outputVisible}
         >
           <CodeBlockHeader className="w-full">
             <CodeBlockTitle>
               <CodeBlockCommand
-                spinner={isPending}
+                spinner={isPending && !isDisconnected}
                 highlight={false}
                 className="grow-0 basis-auto max-w-full"
               >
@@ -94,6 +157,23 @@ export const AcpCommandOutputMessage = ({
                   → {statusText}
                 </span>
               )}
+              {isPending && canAbort && onAbort && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="xs"
+                  className="mt-0.5 h-6 shrink-0 gap-1 px-1.5 font-sans text-[11px]"
+                  disabled={abortPending}
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    onAbort();
+                  }}
+                  onKeyDown={(event) => event.stopPropagation()}
+                >
+                  <SquareIcon className="size-2.5 fill-current" />
+                  {abortPending ? 'Stopping...' : 'Abort'}
+                </Button>
+              )}
             </CodeBlockTitle>
           </CodeBlockHeader>
         </CodeBlock>