@steerable/agent-shell-web 0.7.2 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@steerable/agent-shell-web",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "type": "module",
   "description": "Steerable framework — product-neutral renderer SPA source for @steerable/agent-shell (React + Vite). Consumed by product web entry points via the `@/` alias (anchored at this package's src/) and the createProductViteConfig factory. Published as a source package (src/), plus the compiled vite.base config factory (vite.base.js + .d.ts) for Node-side config loading.",
   "license": "Apache-2.0",
@@ -45,8 +45,8 @@
     "react-router-dom": "^6.30.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
-    "@steerable/agent-protocol": "0.7.2",
-    "@steerable/agent-ui": "0.7.2"
+    "@steerable/agent-protocol": "0.8.0",
+    "@steerable/agent-ui": "0.8.0"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.0",
@@ -59,7 +59,7 @@
     "typescript": "^5.8.3",
     "vite": "^5.4.21",
     "vitest": "^3.2.4",
-    "@steerable/pack-sdk": "0.7.2"
+    "@steerable/pack-sdk": "0.8.0"
   },
   "scripts": {
     "gen": "echo agent-shell-web",

package/src/components/AgentSidebar.tsx

@@ -1932,6 +1932,7 @@ export function AgentSidebar({
             void forkThisChat(target);
           }}
           onDelete={() => {
+            chatMenu.anchor.focus();
             setPendingDeleteChat({ id: chatMenu.id, title: chatMenu.title });
             setChatMenu(null);
           }}

package/src/components/LocalLlmSettingsModal.tsx

@@ -1,8 +1,11 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { LuX } from 'react-icons/lu';
 import type { LlmSettings } from '@/lib/local-api';
-import { LlmSettingsPanel } from '@/components/settings/LlmSettingsPanel';
+import {
+  LlmSettingsPanel,
+  type LlmSettingsPanelHandle,
+} from '@/components/settings/LlmSettingsPanel';
 import { t } from '@/i18n';
 
 interface LocalLlmSettingsModalProps {
@@ -16,6 +19,7 @@ interface LocalLlmSettingsModalProps {
  * 侧栏「设置」走 `/settings` 页（模型 + 洞察 / 遥测 / 用量 / 搜索 / 安全）。
  */
 export function LocalLlmSettingsModal({ open, onClose, onSaved }: LocalLlmSettingsModalProps) {
+  const panelRef = useRef<LlmSettingsPanelHandle | null>(null);
   useEffect(() => {
     if (!open) return;
     const onKey = (e: KeyboardEvent) => {
@@ -25,6 +29,39 @@ export function LocalLlmSettingsModal({ open, onClose, onSaved }: LocalLlmSettin
     return () => window.removeEventListener('keydown', onKey);
   }, [open, onClose]);
 
+  // An authentication failure opens this modal specifically to fix the key,
+  // so put the cursor there instead of at the top of a form the reader then
+  // has to scan.
+  //
+  // It goes through the panel's handle rather than a document query: the panel
+  // owns the field, mounts it asynchronously once settings load, and knows when
+  // it is actually focusable. Polling the DOM found an element that had already
+  // been replaced by a re-render, so the focus call landed on a detached node.
+  useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    let timer: number | undefined;
+    const focusKey = () => {
+      if (cancelled) return;
+      // 用户已经开始在别处输入时不要抢焦点。
+      const active = document.activeElement;
+      const userTyping =
+        active instanceof HTMLElement &&
+        active !== document.body &&
+        (active.tagName === 'INPUT' ||
+          active.tagName === 'TEXTAREA' ||
+          active.isContentEditable);
+      if (userTyping) return;
+      if (panelRef.current?.focusApiKey()) return;
+      timer = window.setTimeout(focusKey, 50);
+    };
+    focusKey();
+    return () => {
+      cancelled = true;
+      if (timer !== undefined) window.clearTimeout(timer);
+    };
+  }, [open]);
+
   if (!open) return null;
   if (typeof document === 'undefined') return null;
 
@@ -55,7 +92,7 @@ export function LocalLlmSettingsModal({ open, onClose, onSaved }: LocalLlmSettin
           </button>
         </div>
         <div className="flex-1 overflow-y-auto p-3">
-          <LlmSettingsPanel onSaved={onSaved} />
+          <LlmSettingsPanel ref={panelRef} onSaved={onSaved} />
         </div>
         <div className="flex h-9 flex-shrink-0 items-center justify-end border-t border-agent-border px-3 bg-agent-muted/10">
           <button

package/src/components/chat/ApprovalModal.tsx

@@ -167,6 +167,16 @@ export function ApprovalPromptMenu({
                     </span>
                   ) : null}
                 </>
+              ) : isBrowser && current.toolName === 'browser_navigate' ? (
+                <>
+                  {t('Agent requests to open a page')}
+                  <span className="mx-1 font-mono">{current.toolName}</span>
+                  {current.categoryLabel ? (
+                    <span className="text-agent-muted-foreground">
+                      {t('({category})', { category: categoryName(current.categoryLabel) })}
+                    </span>
+                  ) : null}
+                </>
               ) : (
                 <>
                   {t('Agent requests to run')}

package/src/components/chat/AssistantMessage.tsx

@@ -1,6 +1,16 @@
 import { useEffect, useRef, useState } from 'react';
 import { motion } from 'framer-motion';
-import { LuCheck, LuCopy, LuListChecks, LuLoaderCircle, LuRefreshCw, LuShare2 } from 'react-icons/lu';
+import {
+  LuCheck,
+  LuChevronDown,
+  LuChevronUp,
+  LuCopy,
+  LuListChecks,
+  LuLoaderCircle,
+  LuRefreshCw,
+  LuShare2,
+  LuTriangleAlert,
+} from 'react-icons/lu';
 import type { ChatMessage } from '@steerable/agent-protocol';
 import type { LocalChat, LocalChatAgent } from '@/lib/local-api';
 import { t } from '@/i18n';
@@ -10,6 +20,9 @@ import type { ChildInfo } from './OrchestrationChildrenCard';
 import { collectTurnParticipants, extractMentionedAgentIds } from './executed-actions-model';
 import type { InspectTaskInput } from './executed-actions-model';
 import { StreamingStatus } from './StreamingStatus';
+import { TurnFailureCard, type TurnFailureCardProps } from './TurnFailureCard';
+import { readFailureDetail, type TurnFailureDetail } from './turn-failure';
+import type { RetryState } from './RetryStatus';
 import { getFriendlyDate } from './timestamp';
 import { useCopy } from './useCopy';
 import type { TurnBlock } from './turn-timeline';
@@ -101,6 +114,12 @@ interface AssistantMessageProps {
    * `StreamingStatus` to render "Round 2 · 继续推理..." between LLM bursts.
    */
   currentRound?: number;
+  /**
+   * Live retry state of the in-flight request. While set, the status line
+   * says "reconnecting" instead of "thinking": a seconds-scale backoff and a
+   * stalled request look the same without it.
+   */
+  retryState?: RetryState | null;
   /** True iff the message was generated in Plan mode. */
   isPlanMode?: boolean;
   /**
@@ -110,6 +129,12 @@ interface AssistantMessageProps {
    * has fully streamed; the caller then re-hydrates the message list.
    */
   onRegenerate?: (messageId: string) => Promise<void>;
+  /**
+   * Resolves a failed turn's action into a handler. The message list decides
+   * what this build can do (Continue needs a backend route, opening settings
+   * needs the modal); the card only draws what it is given.
+   */
+  failureAction?: TurnFailureCardProps['action'];
   /** Epoch ms when this turn started — live ticker while streaming. */
   startedAtMs?: number;
   /** Frozen wall-clock of a finished turn. */
@@ -188,11 +213,71 @@ function bubbleClass(isPlanMode: boolean): string {
 // 两处汇合到同一个错误气泡，失败回合不再只显示"（空消息）"。
 const STREAM_ERROR_PREFIX = '[stream error] ';
 
-function readTurnFailure(
-  message: ChatMessage,
-  content: string,
-): { reason: string; contentIsError: boolean } | null {
+interface TurnFailure {
+  reason: string;
+  contentIsError: boolean;
+  /** Classified detail; undefined for live stream errors and old records. */
+  detail?: TurnFailureDetail;
+  traceId?: string;
+}
+
+/**
+ * Terminal state of a persisted turn, for the card it should show.
+ *
+ * `failed` and `cancelled` are different for the reader even though both can
+ * be continued: one is the network's fault and comes back as a failure card,
+ * the other is the user's own Stop and reads as a neutral notice. Absent
+ * metadata means the turn finished normally (older records carry no status).
+ */
+/**
+ * Whether this failed/stopped turn was continued afterwards.
+ *
+ * The host stamps `continuedAt` when a resume starts from this turn. The card
+ * then collapses into one line: the failure is history the user already acted
+ * on, and re-showing the full card after a reload would read as "it failed
+ * again". Expanding it still yields the original diagnostics.
+ */
+function readContinued(message: ChatMessage): boolean {
+  const raw = (message as { messageMetadata?: unknown }).messageMetadata;
+  if (typeof raw !== 'string' || !raw) return false;
+  try {
+    const at = (JSON.parse(raw) as { continuedAt?: unknown }).continuedAt;
+    return typeof at === 'string' && at.length > 0;
+  } catch {
+    return false;
+  }
+}
+
+/** True when the user's Stop landed while a retry was pending. */
+function readStoppedDuringRetry(message: ChatMessage): boolean {
+  const raw = (message as { messageMetadata?: unknown }).messageMetadata;
+  if (typeof raw !== 'string' || !raw) return false;
+  try {
+    const reason = (JSON.parse(raw) as { completionReason?: unknown }).completionReason;
+    return reason === 'aborted_during_retry';
+  } catch {
+    return false;
+  }
+}
+
+function readTurnStatus(message: ChatMessage): 'failed' | 'cancelled' | 'completed' {
+  const raw = (message as { messageMetadata?: unknown }).messageMetadata;
+  if (typeof raw !== 'string' || !raw) return 'completed';
+  try {
+    const status = (JSON.parse(raw) as { completionStatus?: unknown }).completionStatus;
+    if (status === 'failed') return 'failed';
+    if (status === 'cancelled') return 'cancelled';
+    return 'completed';
+  } catch {
+    // 元数据损坏按正常完成处理——落回原有的空消息展示。
+    return 'completed';
+  }
+}
+
+function readTurnFailure(message: ChatMessage, content: string): TurnFailure | null {
   if (content.startsWith(STREAM_ERROR_PREFIX)) {
+    // Live path: the framework stamped the reason into the content before the
+    // turn was persisted, so nothing structured is available yet.
     return { reason: content.slice(STREAM_ERROR_PREFIX.length), contentIsError: true };
   }
   const raw = (message as { messageMetadata?: unknown }).messageMetadata;
@@ -201,13 +286,20 @@ function readTurnFailure(
     const meta = JSON.parse(raw) as {
       completionStatus?: unknown;
       completionReason?: unknown;
+      failure?: unknown;
+      traceId?: unknown;
     };
     if (
       meta?.completionStatus === 'failed' &&
       typeof meta.completionReason === 'string' &&
       meta.completionReason
     ) {
-      return { reason: meta.completionReason, contentIsError: false };
+      return {
+        reason: meta.completionReason,
+        contentIsError: false,
+        detail: readFailureDetail(meta.failure),
+        traceId: typeof meta.traceId === 'string' && meta.traceId ? meta.traceId : undefined,
+      };
     }
   } catch {
     // 元数据损坏按无失败处理——落回原有的空消息展示。
@@ -226,10 +318,102 @@ function readPersistedAgentId(message: ChatMessage): string | undefined {
   }
 }
 
-function TurnErrorBubble({ reason }: { reason: string }) {
+function TurnErrorBubble({
+  failure,
+  completedSteps,
+  happenedAt,
+  onAction,
+}: {
+  failure: TurnFailure;
+  completedSteps: number;
+  happenedAt?: string;
+  onAction?: TurnFailureCardProps['action'];
+}) {
+  return (
+    <TurnFailureCard
+      detail={failure.detail}
+      reason={failure.reason}
+      completedSteps={completedSteps}
+      happenedAt={happenedAt}
+      traceId={failure.traceId}
+      action={onAction}
+    />
+  );
+}
+
+/**
+ * One collapsed line standing in for a failure the user already continued.
+ *
+ * It stays expandable rather than disappearing: the diagnostics are the only
+ * record of what went wrong, and someone filing a report a day later still
+ * needs them. The default is collapsed so a resumed conversation reads as
+ * continuous work rather than a stack of past failures.
+ */
+function ContinuedHereLine({ children }: { children: React.ReactNode }) {
+  const [open, setOpen] = useState(false);
   return (
-    <div className="rounded-agent-lg border border-agent-destructive/40 bg-agent-destructive/5 px-2.5 py-2 text-xs leading-relaxed text-agent-destructive shadow-sm">
-      {t('Request failed: {reason}', { reason })}
+    <div data-testid="continued-here">
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        aria-expanded={open}
+        className="inline-flex items-center gap-1 text-[11px] text-agent-muted-foreground hover:text-agent-foreground"
+        data-action="continued-here"
+      >
+        <LuTriangleAlert className="h-3 w-3" />
+        {t('Connection failed here. Continued.')}
+        {open ? <LuChevronUp className="h-3 w-3" /> : <LuChevronDown className="h-3 w-3" />}
+      </button>
+      {open ? <div className="mt-1.5">{children}</div> : null}
+    </div>
+  );
+}
+
+/**
+ * Neutral notice for a turn the user stopped.
+ *
+ * Deliberately not the failure card: nothing went wrong, the user chose to
+ * stop. It still offers Continue, because the usual reason to stop a turn is
+ * impatience with a retry, and the work done so far is worth keeping. The copy
+ * distinguishes a stop during reconnection — the case where "continue" is
+ * almost certainly wanted — from a stop while the model was writing.
+ */
+function TurnStoppedCard({
+  duringRetry,
+  action,
+}: {
+  duringRetry: boolean;
+  action?: TurnFailureCardProps['action'];
+}) {
+  const handler = action?.({ kind: 'retry' }) ?? null;
+  return (
+    <div
+      className="rounded-agent-lg border border-agent-border bg-agent-muted/40 px-2.5 py-2 text-xs leading-relaxed"
+      data-testid="turn-stopped"
+    >
+      <div className="flex items-start gap-2 font-medium text-agent-foreground">
+        <span className="mt-[3px] h-2 w-2 flex-shrink-0 rounded-[2px] bg-agent-muted-foreground" />
+        <span>{t('Stopped')}</span>
+      </div>
+      <p className="mt-1 ml-5 text-agent-muted-foreground">
+        {duringRetry
+          ? t('You stopped this task while it was reconnecting.')
+          : t('You stopped this task.')}
+      </p>
+      {handler ? (
+        <div className="mt-2 ml-5">
+          <button
+            type="button"
+            disabled={handler.disabled}
+            title={handler.hint}
+            onClick={handler.onClick}
+            className="rounded-agent-md border border-agent-border bg-agent-card px-3 py-1 text-xs text-agent-foreground transition hover:bg-agent-muted disabled:opacity-50"
+            data-action="continue"
+          >
+            {t('Continue')}
+          </button>
+        </div>
+      ) : null}
     </div>
   );
 }
@@ -263,8 +447,10 @@ export function AssistantMessage({
   orchestrationChildren,
   previousUser,
   currentRound = 1,
+  retryState,
   isPlanMode = false,
   onRegenerate,
+  failureAction,
   startedAtMs,
   durationMs,
   llmSpeed,
@@ -274,6 +460,9 @@ export function AssistantMessage({
 }: AssistantMessageProps) {
   const content = message.content || '';
   const failure = readTurnFailure(message, content);
+  const stopped = !failure && readTurnStatus(message) === 'cancelled';
+  const stoppedDuringRetry = stopped && readStoppedDuringRetry(message);
+  const continued = readContinued(message);
   // live 错误文本（"[stream error] ..."）不当正文渲染；落库的失败回合可能
   // 留有部分正文，此时正文与错误气泡都展示。
   const displayContent = failure?.contentIsError ? '' : content;
@@ -308,6 +497,10 @@ export function AssistantMessage({
     llmRequestElapsedMs(llmSpeed, now),
   );
 
+  // A continued failure renders as one line; expanding it yields the card.
+  const wrapContinued = (card: React.ReactNode) =>
+    continued ? <ContinuedHereLine>{card}</ContinuedHereLine> : card;
+
   return (
     <motion.div
       className="group/message"
@@ -359,15 +552,25 @@ export function AssistantMessage({
             orchestrationChildren={orchestrationChildren}
             emptyFallback={
               failure ? (
-                <TurnErrorBubble reason={failure.reason} />
+                wrapContinued(
+                  <TurnErrorBubble
+                    failure={failure}
+                    completedSteps={toolActions.length}
+                    happenedAt={message.createdAt}
+                    onAction={failureAction}
+                  />,
+                )
               ) : isStreaming ? (
                 <div className={bubbleClass(isPlanMode)}>
                   <StreamingStatus
                     round={currentRound}
                     actionCount={executedActions?.length ?? 0}
                     hasContent={false}
+                    retry={retryState ?? undefined}
                   />
                 </div>
+              ) : stopped ? (
+                <TurnStoppedCard duringRetry={stoppedDuringRetry} action={failureAction} />
               ) : (
                 <div className={`${bubbleClass(isPlanMode)} text-xs italic text-agent-muted-foreground`}>
                   {t('(empty message)')}
@@ -379,6 +582,7 @@ export function AssistantMessage({
                 round={currentRound}
                 actionCount={executedActions?.length ?? 0}
                 hasContent={false}
+                retry={retryState ?? undefined}
               />
             }
             renderAnswer={(block, isLast) => (
@@ -394,7 +598,19 @@ export function AssistantMessage({
               （无块时走上面的 emptyFallback，不会重复）。 */}
           {failure && blocks.length > 0 ? (
             <div className="mt-1.5">
-              <TurnErrorBubble reason={failure.reason} />
+              {wrapContinued(
+                <TurnErrorBubble
+                  failure={failure}
+                  completedSteps={toolActions.length}
+                  happenedAt={message.createdAt}
+                  onAction={failureAction}
+                />,
+              )}
+            </div>
+          ) : null}
+          {stopped && blocks.length > 0 ? (
+            <div className="mt-1.5">
+              <TurnStoppedCard duringRetry={stoppedDuringRetry} action={failureAction} />
             </div>
           ) : null}
           </>
@@ -417,15 +633,25 @@ export function AssistantMessage({
                 {isStreaming && <StreamingCursor />}
               </div>
             ) : failure ? (
-              <TurnErrorBubble reason={failure.reason} />
+              wrapContinued(
+                <TurnErrorBubble
+                  failure={failure}
+                  completedSteps={toolActions.length}
+                  happenedAt={message.createdAt}
+                  onAction={failureAction}
+                />,
+              )
             ) : isStreaming ? (
               <div className={bubbleClass(isPlanMode)}>
                 <StreamingStatus
                   round={currentRound}
                   actionCount={executedActions?.length ?? 0}
                   hasContent={false}
+                  retry={retryState ?? undefined}
                 />
               </div>
+            ) : stopped ? (
+              <TurnStoppedCard duringRetry={stoppedDuringRetry} action={failureAction} />
             ) : (
               <div className={`${bubbleClass(isPlanMode)} text-xs italic text-agent-muted-foreground`}>
                 {t('(empty message)')}
@@ -433,7 +659,14 @@ export function AssistantMessage({
             )}
             {displayContent && failure ? (
               <div className="mt-1.5">
-                <TurnErrorBubble reason={failure.reason} />
+                {wrapContinued(
+                  <TurnErrorBubble
+                    failure={failure}
+                    completedSteps={toolActions.length}
+                    happenedAt={message.createdAt}
+                    onAction={failureAction}
+                  />,
+                )}
               </div>
             ) : null}
           </>
@@ -474,7 +707,11 @@ export function AssistantMessage({
               )}
             </button>
           )}
-          {content && !isStreaming && onRegenerate && (
+          {/* Regenerate is offered for a failed or stopped turn even when it
+              produced no text: the reply the user wanted is missing, and
+              regenerating from the turn's start is the alternative to
+              Continue when Continue is not the right answer. */}
+          {(content || failure || stopped) && !isStreaming && onRegenerate && (
             <button
               type="button"
               disabled={regenerating}
@@ -497,7 +734,7 @@ export function AssistantMessage({
               title={
                 regenerating
                   ? t('Regenerating...')
-                  : t('Regenerate (the old reply is kept as a branch)')
+                  : t('Regenerate (start this turn over; the old reply is kept as a branch)')
               }
               aria-label={regenerating ? t('Regenerating') : t('Regenerate')}
               data-action="regenerate"

package/src/components/chat/ExecutedActionsCard.tsx

@@ -21,6 +21,9 @@ import {
   isTaskFamilyTool,
   inspectableTaskFromAction,
   shortTaskId,
+  askReplay,
+  askRowSummary,
+  egressRowSummary,
   type InspectTaskInput,
 } from './executed-actions-model';
 import {
@@ -60,8 +63,8 @@ export interface ExecutedAction {
    * port-only egress); none = no backend on this platform.
    */
   sandbox?: { backend?: string; enforcement: string };
-  /** Set when a session allow covered this call, so the row can say so. */
-  approval?: { kind?: string; category?: string; cached?: boolean; waitMs?: number };
+  /** Set when a session allow or an unattended allow covered this call, so the row can say so. */
+  approval?: { kind?: string; category?: string; cached?: boolean; waitMs?: number; auto?: boolean };
   /**
    * 工具注册时声明的卡片。`declared` 为真时行标题用 `title`，
    * 不再按工具名猜测。旧事件没有这个字段，仍走原来的摘要。
@@ -108,7 +111,7 @@ function summarizeArguments(args: unknown): string | null {
   if (typeof args === 'string') return args.length > 60 ? args.slice(0, 57) + '…' : args;
   if (typeof args !== 'object') return String(args);
   const obj = args as Record<string, unknown>;
-  for (const key of ['command', 'cmd', 'query', 'path', 'file', 'target', 'message']) {
+  for (const key of ['command', 'cmd', 'url', 'query', 'path', 'file', 'target', 'message']) {
     const v = obj[key];
     if (typeof v === 'string' && v.length > 0) {
       return v.length > 60 ? v.slice(0, 57) + '…' : v;
@@ -129,10 +132,16 @@ function sandboxBadge(sandbox: ExecutedAction['sandbox']): string | null {
   }
 }
 
-function sessionAllowNote(action: ExecutedAction): string | undefined {
+function toolProgressNote(action: ExecutedAction): string | undefined {
   if (action.approval?.kind === 'allow_for_session' && action.approval.cached === true) {
     return t('Allowed for this chat');
   }
+  if (action.tool === 'ask_user' && askReplay(action.result)?.unattended && deriveStatus(action) !== 'failed') {
+    return t('Answered automatically');
+  }
+  if (action.approval?.auto === true && deriveStatus(action) !== 'failed') {
+    return t('Auto');
+  }
   return undefined;
 }
 
@@ -145,8 +154,13 @@ function actionToTool(action: ExecutedAction, idx: number): ToolExecutionPayload
         ? humanizeDelegateError(env.error)
         : env.error
       : null;
+  // 追问行用第一条问题。出网行用主机名。已保存的 view.title 往往只是开场白或工具名。
+  const asked = askRowSummary(action);
+  const egress = egressRowSummary(action);
   // 声明过的工具用 view.title。没有 view 的旧事件仍按工具名做摘要。
-  const summary = action.view?.declared
+  const summary = asked
+    || egress
+    || (action.view?.declared
     ? action.view.title
     : ((action.tool === 'delegate_subagent'
         ? summarizeDelegateSubagent(action.arguments)
@@ -156,7 +170,7 @@ function actionToTool(action: ExecutedAction, idx: number): ToolExecutionPayload
         : null) ??
       summarizeRunCodeAction(action.tool, action.arguments, action.result) ??
       summarizeWebAction(action.tool, action.arguments, action.result) ??
-      summarizeArguments(action.arguments));
+      summarizeArguments(action.arguments)));
   const badge = sandboxBadge(action.sandbox);
   return {
     id: action.id ?? `${action.tool}-${idx}`,
@@ -177,6 +191,20 @@ function actionToTool(action: ExecutedAction, idx: number): ToolExecutionPayload
  * unified `diff` (local_edit_file), render it as a coloured diff; otherwise
  * fall back to the default JSON/text view.
  */
+function renderAskOutput(output: unknown): ReactNode {
+  const replay = askReplay(output);
+  if (!replay) return renderActionOutput(output);
+  return (
+    <div className="space-y-1 text-[11px] text-agent-foreground">
+      {replay.lines.map((line, index) => (
+        <p key={`${index}-${line}`} className="whitespace-pre-wrap break-words">
+          {line}
+        </p>
+      ))}
+    </div>
+  );
+}
+
 function renderActionOutput(output: unknown): ReactNode {
   if (output && typeof output === 'object') {
     const obj = output as Record<string, unknown>;
@@ -444,6 +472,9 @@ function toolCardExtras(
       renderOutput: renderDelegateOutput,
     };
   }
+  if (action.tool === 'ask_user') {
+    return { renderOutput: renderAskOutput };
+  }
   if (isTaskFamilyTool(action.tool)) {
     return {
       label: taskToolLabel(action.tool, action.arguments) ?? undefined,
@@ -543,7 +574,7 @@ export function ToolsFlow({
               renderOutput={extras.renderOutput ?? renderActionOutput}
               onActivate={inspect.onActivate}
               activateTitle={inspect.activateTitle}
-              note={sessionAllowNote(action)}
+              note={toolProgressNote(action)}
               className="rounded-none border-0 border-t border-agent-border first:border-t-0"
             />
           );
@@ -606,7 +637,7 @@ export function ExecutedActionsCard({
               renderOutput={extras.renderOutput ?? renderActionOutput}
               onActivate={inspect.onActivate}
               activateTitle={inspect.activateTitle}
-              note={sessionAllowNote(action)}
+              note={toolProgressNote(action)}
               className="rounded-none border-0 border-t border-agent-border first:border-t-0"
             />
           );