@agent-native/core 0.118.0 → 0.119.0

package/corpus/core/src/client/RunStuckBanner.tsx

@@ -45,11 +45,9 @@ export interface RunStuckBannerProps {
    * `chatHandle.hasInFlightWork()`. "No progress" for a stretch of time does
    * not mean the run is dead: a long provider query or a cross-app `call
    * agent` can legitimately emit nothing for minutes. When this returns
-   * true, Retry (which aborts the run) is hidden — aborting would destroy
-   * real in-flight work and re-execute the same long call from scratch.
-   * Only Cancel, an explicit destructive choice, remains available. Checked
-   * fresh on every render; omit to keep the unconditional Retry/Cancel
-   * behavior.
+   * true, the stuck warning is hidden — aborting would destroy real in-flight
+   * work and re-execute the same long call from scratch. Checked fresh on every
+   * render; omit to keep the unconditional Retry/Cancel behavior.
    */
   hasInFlightWork?: () => boolean;
   /**
@@ -191,9 +189,9 @@ export function RunStuckBanner({
   const backgroundWorkerStillAlive = isFreshBackgroundWorker(state);
   // A live tool call or sub-agent (A2A) call means "no progress" is not the
   // same as "dead" — the process is genuinely still doing the user's work.
-  // Retry aborts the run, so it must not be offered as the (implicitly
-  // safe-looking) primary action while real work is in flight; see the
-  // `hasInFlightWork` prop doc comment. Re-checked on every render (the
+  // Retry aborts the run, so the stuck warning stays out of the way while real
+  // work is in flight; see the `hasInFlightWork` prop doc comment. Re-checked
+  // on every render (the
   // underlying source mutates in place as tool/agent-call events stream in),
   // which is why this is a function prop rather than a plain boolean.
   //
@@ -308,7 +306,18 @@ export function RunStuckBanner({
     threadId,
   ]);
 
-  if (!state.isStuck || !state.runId) return null;
+  // A stale progress timestamp is not actionable while the server is still
+  // heartbeating or an unresolved tool/A2A call is known to be running. Keep
+  // those healthy long-running states in the chat's inline activity UI; the
+  // warning is reserved for runs that may actually need recovery.
+  if (
+    !state.isStuck ||
+    !state.runId ||
+    backgroundWorkerStillAlive ||
+    inFlightWork
+  ) {
+    return null;
+  }
 
   const handleCancel = async () => {
     if (!state.runId || busy.type !== "none") return;
@@ -323,9 +332,9 @@ export function RunStuckBanner({
   };
 
   const handleRetry = async () => {
-    // Defense in depth: Retry is hidden while a background worker is still
-    // heartbeating or work is explicitly in flight (see render below). Guard
-    // the handler too so this path cannot abort a run the server says is alive.
+    // Defense in depth: the banner is hidden while a background worker is
+    // still heartbeating or work is explicitly in flight. Guard the handler
+    // too so a render transition cannot abort a run the server says is alive.
     if (
       !state.runId ||
       busy.type !== "none" ||
@@ -350,8 +359,6 @@ export function RunStuckBanner({
   const stuckSeconds =
     state.stuckSinceMs != null ? Math.floor(state.stuckSinceMs / 1000) : null;
 
-  const stillWorking = backgroundWorkerStillAlive || inFlightWork;
-
   return (
     <div
       role="status"
@@ -368,51 +375,36 @@ export function RunStuckBanner({
       />
       <div className="flex min-w-0 flex-1 flex-col gap-1.5">
         <div className="leading-snug">
-          <span className="font-medium">
-            {stillWorking
-              ? "The agent is still working."
-              : "This chat looks stuck."}
-          </span>{" "}
+          <span className="font-medium">This chat looks stuck.</span>{" "}
           <span className="text-muted-foreground">
             No progress
-            {stuckSeconds != null ? ` for ${stuckSeconds}s` : ""}.{" "}
-            {inFlightWork
-              ? "It's waiting on a call to another app or a long tool — canceling will stop that work."
-              : backgroundWorkerStillAlive
-                ? "The background worker is still alive; large updates can take a few minutes."
-                : "The agent may have hit a server timeout or lost its connection."}
+            {stuckSeconds != null ? ` for ${stuckSeconds}s` : ""}. The agent may
+            have hit a server timeout or lost its connection.
             {autoRetry && busyType === "retry"
               ? " Retrying automatically now."
               : ""}
           </span>
         </div>
         <div className="flex flex-wrap items-center gap-2">
-          {stillWorking ? null : (
-            <button
-              type="button"
-              onClick={handleRetry}
-              disabled={busyType !== "none"}
-              className="inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-md bg-foreground px-2.5 text-[11px] font-medium text-background transition-colors hover:bg-foreground/90 disabled:cursor-not-allowed disabled:opacity-60"
-            >
-              {busyType === "retry" ? (
-                <IconLoader2
-                  size={12}
-                  className="animate-spin"
-                  aria-hidden="true"
-                />
-              ) : null}
-              Retry
-            </button>
-          )}
+          <button
+            type="button"
+            onClick={handleRetry}
+            disabled={busyType !== "none"}
+            className="inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-md bg-foreground px-2.5 text-[11px] font-medium text-background transition-colors hover:bg-foreground/90 disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            {busyType === "retry" ? (
+              <IconLoader2
+                size={12}
+                className="animate-spin"
+                aria-hidden="true"
+              />
+            ) : null}
+            Retry
+          </button>
           <button
             type="button"
             onClick={handleCancel}
             disabled={busyType !== "none"}
-            title={
-              inFlightWork
-                ? "Stop the in-progress run. Work that hasn't finished will be lost."
-                : undefined
-            }
             className="inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-md border border-border bg-background px-2.5 text-[11px] font-medium text-foreground transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-60"
           >
             {busyType === "cancel" ? (

package/corpus/core/src/client/chat/action-chat-ui-surface.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+
+import { ACTION_CHAT_UI_INLINE_EXTENSION_RENDERER } from "../../action-ui.js";
+import { cn } from "../utils.js";
+import type { ToolRendererContext } from "./tool-render-registry.js";
+
+export function ActionChatUiSurface({
+  context,
+  isBuiltinDataWidget,
+  children,
+}: {
+  context: ToolRendererContext;
+  isBuiltinDataWidget: boolean;
+  children: ReactNode;
+}) {
+  if (!context.chatUI || isBuiltinDataWidget) return <>{children}</>;
+
+  const containsPaddedIframe =
+    context.chatUI.renderer === ACTION_CHAT_UI_INLINE_EXTENSION_RENDERER;
+
+  return (
+    <div
+      data-agent-native-custom-ui=""
+      className={cn(
+        "my-3 overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-sm empty:hidden",
+        !containsPaddedIframe && "p-3",
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/corpus/core/src/client/chat/message-components.tsx

@@ -122,6 +122,9 @@ interface FormattedMessageTimestamp {
   full: string;
 }
 
+const messageFooterFadeClassName =
+  "opacity-0 transition-[color,opacity] duration-150 group-hover:opacity-100 group-focus-within:opacity-100";
+
 function coerceMessageDate(value: unknown): Date | null {
   if (value instanceof Date) {
     return Number.isNaN(value.getTime()) ? null : value;
@@ -793,7 +796,7 @@ export function UserMessage() {
           {timestamp && (
             <MessageTimestamp
               timestamp={timestamp}
-              className="opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100"
+              className={messageFooterFadeClassName}
             />
           )}
         </div>
@@ -845,12 +848,33 @@ export function messageTextFromContent(content: unknown): string {
     .join("\n");
 }
 
-function latestUserMessageText(messages: readonly unknown[]): string {
+export function latestUserMessageText(messages: readonly unknown[]): string {
   for (let index = messages.length - 1; index >= 0; index -= 1) {
     const message = messages[index];
     if (!message || typeof message !== "object") continue;
     const record = message as { role?: unknown; content?: unknown };
-    if (record.role === "user") return messageTextFromContent(record.content);
+    if (record.role !== "user" || isHiddenUserMessage(message)) continue;
+    return displayableUserMessageText(messageTextFromContent(record.content));
+  }
+  return "";
+}
+
+export function userMessageTextBeforeAssistant(
+  messages: readonly unknown[],
+  assistantMessageId: string,
+): string {
+  const assistantIndex = messages.findIndex((message) => {
+    if (!message || typeof message !== "object") return false;
+    return (message as { id?: unknown }).id === assistantMessageId;
+  });
+  if (assistantIndex < 1) return "";
+
+  for (let index = assistantIndex - 1; index >= 0; index -= 1) {
+    const message = messages[index];
+    if (!message || typeof message !== "object") continue;
+    const record = message as { role?: unknown; content?: unknown };
+    if (record.role !== "user" || isHiddenUserMessage(message)) continue;
+    return displayableUserMessageText(messageTextFromContent(record.content));
   }
   return "";
 }
@@ -907,6 +931,22 @@ export function assistantMessageHasCompletedCustomUi(
   return hasCompletedTool && lastCompletedToolIsCustomUi;
 }
 
+export function assistantMessageHasCustomUi(content: unknown): boolean {
+  if (!Array.isArray(content)) return false;
+  return content.some((part) => {
+    if (!part || typeof part !== "object") return false;
+    const record = part as {
+      type?: unknown;
+      chatUI?: unknown;
+      mcpApp?: unknown;
+    };
+    return (
+      record.type === "tool-call" &&
+      (record.chatUI !== undefined || record.mcpApp !== undefined)
+    );
+  });
+}
+
 // Only the last assistant message may shimmer as "the currently running
 // tool" — an older message's dangling unresolved tool-call must never
 // shimmer once a later run is active.
@@ -1173,13 +1213,17 @@ export function AssistantMessage() {
   const hasCompletedCustomUi = assistantMessageHasCompletedCustomUi(
     msg.content,
   );
+  const hasCustomUi = assistantMessageHasCustomUi(msg.content);
   const showMissingFinalResponse = shouldShowMissingFinalResponse({
     statusIsTerminal,
     hasAssistantText: responseConnectionText.trim().length > 0,
     hasUnresolvedTool,
     hasCompletedCustomUi,
   });
-  const responseConnectionContext = latestUserMessageText(thread.messages);
+  const responseConnectionContext = userMessageTextBeforeAssistant(
+    thread.messages,
+    msg.id,
+  );
   const isComplete = shouldShowAssistantMessageFooter({
     isLast,
     chatRunning,
@@ -1327,7 +1371,8 @@ export function AssistantMessage() {
                 return (
                   <WorkedForSummary
                     durationMs={capturedDurationMs}
-                    autoCollapse={animateCollapse}
+                    defaultOpen={hasCustomUi}
+                    autoCollapse={animateCollapse && !hasCustomUi}
                   >
                     {children}
                   </WorkedForSummary>
@@ -1377,7 +1422,7 @@ export function AssistantMessage() {
         {isComplete && hasCodeAgentTools && msgContent && (
           <FilesChangedSummary parts={msgContent} />
         )}
-        {isComplete && isLast && (
+        {isComplete && (
           <McpConnectionSuggestion
             text={responseConnectionText}
             contextText={responseConnectionContext}
@@ -1404,7 +1449,7 @@ export function AssistantMessage() {
                       <button
                         type="button"
                         aria-label="Regenerate response"
-                        className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground/70 transition-colors duration-150 hover:bg-accent hover:text-foreground opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 disabled:cursor-not-allowed disabled:opacity-40"
+                        className={`flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground/70 hover:bg-accent hover:text-foreground ${messageFooterFadeClassName} disabled:cursor-not-allowed disabled:opacity-40`}
                       >
                         <IconRefresh className="h-3.5 w-3.5" />
                       </button>
@@ -1420,7 +1465,7 @@ export function AssistantMessage() {
             {timestamp && (
               <MessageTimestamp
                 timestamp={timestamp}
-                className="opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100"
+                className={messageFooterFadeClassName}
               />
             )}
           </div>

package/corpus/core/src/client/chat/tool-call-display.tsx

@@ -25,6 +25,7 @@ import React, {
   useRef,
 } from "react";
 
+import type { A2AAgentActivitySnapshot } from "../../a2a/activity.js";
 import type { ActionChatUIConfig } from "../../action-ui.js";
 import type { AgentMcpAppPayload } from "../../mcp-client/app-result.js";
 import { AgentTaskCard } from "../AgentTaskCard.js";
@@ -35,8 +36,9 @@ import {
   PopoverTrigger,
 } from "../components/ui/popover.js";
 import { ConnectBuilderCard } from "../ConnectBuilderCard.js";
+import { useT } from "../i18n.js";
 import { McpAppRenderer } from "../mcp-apps/McpAppRenderer.js";
-import type { ContentPart } from "../sse-event-processor.js";
+import type { AgentCallProgress, ContentPart } from "../sse-event-processor.js";
 import {
   BashCell,
   EditCell,
@@ -48,13 +50,10 @@ import {
   isCallAgentToolCallShadowed,
 } from "../tool-display.js";
 import { cn } from "../utils.js";
+import { ActionChatUiSurface } from "./action-chat-ui-surface.js";
 import {
   SmoothMarkdownText,
   HighlightedCodeBlock,
-  markdownComponents,
-  markdownModule,
-  remarkGfmFn,
-  markdownUrlTransform,
   useSmoothStreamingText,
 } from "./markdown-renderer.js";
 import { resolveToolRenderer } from "./tool-render-registry.js";
@@ -133,11 +132,10 @@ export function ToolActivityPresentation({
         animateEntry && "agent-tool-call--entering",
       )}
       data-running={isRunning ? "true" : undefined}
-      data-active-tail={isActiveTail ? "true" : undefined}
     >
       {children}
       {isRunning && showLongRunningHint && (
-        <div className="mt-0.5 px-2.5 text-[11px] leading-snug text-muted-foreground/80">
+        <div className="mt-0.5 px-2.5 pb-2 text-[11px] leading-snug text-muted-foreground/80">
           Still working. Large updates can take a minute or two.
         </div>
       )}
@@ -631,6 +629,7 @@ export function ToolCallDisplay({
       chatUI={chatUI}
       isRunning={isRunning}
       isActiveTail={showActiveTail}
+      structuredMeta={structuredMeta}
       approval={approval}
       repeatCount={repeatCount}
     />,
@@ -646,6 +645,7 @@ function ToolCallDisplayGeneric({
   chatUI,
   isRunning,
   isActiveTail,
+  structuredMeta,
   approval,
   repeatCount,
 }: {
@@ -657,27 +657,34 @@ function ToolCallDisplayGeneric({
   chatUI?: ActionChatUIConfig;
   isRunning: boolean;
   isActiveTail: boolean;
+  structuredMeta?: Record<string, unknown>;
   approval?: { approvalKey: string; dismissed?: boolean };
   repeatCount?: number;
 }) {
-  const streamRef = useRef<HTMLDivElement>(null);
-
-  const isAgentCall = toolName.startsWith("agent:");
+  const isRawCallAgent = toolName === "call-agent";
+  const isAgentCall = toolName.startsWith("agent:") || isRawCallAgent;
   const [expanded, setExpanded] = useState(isAgentCall);
   const [outputOpen, setOutputOpen] = useState(false);
-  const agentName = isAgentCall ? toolName.slice(6) : null;
+  const agentName = toolName.startsWith("agent:")
+    ? toolName.slice(6)
+    : typeof args.agent === "string"
+      ? args.agent
+      : null;
   const isAgentError = isAgentCall && result === "Error calling agent";
-  const agentStreamText = isAgentCall ? (argsText ?? "") : "";
+  const agentStreamText = isRawCallAgent
+    ? (result ?? "")
+    : isAgentCall
+      ? (argsText ?? "")
+      : "";
+  const agentActivity = structuredMeta?.agentActivity as
+    | A2AAgentActivitySnapshot
+    | undefined;
+  const agentProgress = structuredMeta?.agentProgress as
+    | AgentCallProgress
+    | undefined;
   const hasStreamText = agentStreamText.length > 0;
   const hasArgs = !isAgentCall && Object.keys(args).length > 0;
 
-  // NOTE: All hooks must be above any conditional returns
-  useEffect(() => {
-    if (isAgentCall && isRunning && streamRef.current) {
-      streamRef.current.scrollTop = streamRef.current.scrollHeight;
-    }
-  }, [agentStreamText, isAgentCall, isRunning]);
-
   // Render connect-builder as ConnectBuilderCard once the result is available
   if (toolName === "connect-builder" && result) {
     try {
@@ -759,7 +766,16 @@ function ToolCallDisplayGeneric({
       (skipRegistryRenderer ? null : resolveToolRenderer(nativeToolContext)) ??
       resolveBuiltinFallbackToolRenderer(nativeToolContext));
   if (NativeToolRenderer) {
-    return <NativeToolRenderer context={nativeToolContext} />;
+    return (
+      <ActionChatUiSurface
+        context={nativeToolContext}
+        isBuiltinDataWidget={isBuiltinDataWidgetActionRenderer(
+          nativeToolContext,
+        )}
+      >
+        <NativeToolRenderer context={nativeToolContext} />
+      </ActionChatUiSurface>
+    );
   }
 
   const inputPayload = hasArgs ? toolInputPayload(toolName, args) : null;
@@ -780,6 +796,24 @@ function ToolCallDisplayGeneric({
   const ToolIcon = resolveToolIcon(toolName);
   const outputTitle = `Raw ${toolName} tool call output`;
 
+  if (isAgentCall) {
+    return (
+      <AgentCallCell
+        agentName={agentName ?? "agent"}
+        activity={agentActivity}
+        progress={agentProgress}
+        responseText={agentStreamText}
+        isRunning={isRunning}
+        isError={isAgentError}
+        durationMs={
+          typeof structuredMeta?.agentDurationMs === "number"
+            ? structuredMeta.agentDurationMs
+            : agentActivity?.durationMs
+        }
+      />
+    );
+  }
+
   return (
     <div className="group/tool my-0.5 w-full overflow-hidden">
       {mcpApp && <McpAppRenderer app={mcpApp} className="mb-1.5" />}
@@ -834,24 +868,6 @@ function ToolCallDisplayGeneric({
           </span>
         )}
       </button>
-      <AnimatedCollapse open={isExpanded && isAgentCall && hasStreamText}>
-        <div
-          ref={streamRef}
-          className="mt-1 rounded-md bg-muted/50 px-3 py-2 text-xs text-muted-foreground break-words max-h-48 overflow-y-auto agent-markdown prose prose-sm prose-invert max-w-none"
-        >
-          {markdownModule?.default && remarkGfmFn ? (
-            <markdownModule.default
-              remarkPlugins={[remarkGfmFn]}
-              components={markdownComponents}
-              urlTransform={markdownUrlTransform}
-            >
-              {agentStreamText}
-            </markdownModule.default>
-          ) : (
-            <span style={{ whiteSpace: "pre-wrap" }}>{agentStreamText}</span>
-          )}
-        </div>
-      </AnimatedCollapse>
       <AnimatedCollapse
         open={isExpanded && !isAgentCall && (hasArgs || result !== undefined)}
       >
@@ -887,6 +903,154 @@ function ToolCallDisplayGeneric({
   );
 }
 
+function AgentCallCell({
+  agentName,
+  activity,
+  progress,
+  responseText,
+  isRunning,
+  isError,
+  durationMs,
+}: {
+  agentName: string;
+  activity?: A2AAgentActivitySnapshot;
+  progress?: AgentCallProgress;
+  responseText: string;
+  isRunning: boolean;
+  isError: boolean;
+  durationMs?: number;
+}) {
+  const t = useT();
+  const [open, setOpen] = useState(true);
+  const finalText = isRunning
+    ? activity?.responseText || responseText
+    : responseText || activity?.responseText;
+  const work = activity?.reasoning?.length || activity?.toolCalls?.length;
+  const workItemCount = Math.max(
+    activity?.reasoning?.length ?? 0,
+    activity?.toolCalls?.length ?? 0,
+  );
+  const label = isRunning
+    ? t("agentPanel.delegatedAgent.asking", { name: agentName })
+    : isError
+      ? t("agentPanel.delegatedAgent.error", { name: agentName })
+      : t("agentPanel.delegatedAgent.asked", { name: agentName });
+  const workContent = work ? (
+    <div className="space-y-1 ps-5">
+      {Array.from({ length: workItemCount }, (_, index) => {
+        const reasoningText = activity?.reasoning?.[index];
+        const tool = activity?.toolCalls?.[index];
+        return (
+          <React.Fragment key={`activity-${index}`}>
+            {reasoningText && (
+              <ReasoningCell
+                text={reasoningText}
+                isStreaming={
+                  isRunning &&
+                  activity.activePhase === "reasoning" &&
+                  index === activity.reasoning.length - 1
+                }
+                defaultOpen={index === activity.reasoning.length - 1}
+                collapseWhenReplaced={index < activity.toolCalls.length}
+              />
+            )}
+            {tool && (
+              <ToolCallDisplay
+                toolName={tool.name}
+                args={{}}
+                argsText=""
+                isRunning={tool.status === "running"}
+                result={
+                  tool.status === "failed"
+                    ? "Failed"
+                    : tool.status === "completed"
+                      ? "Done"
+                      : undefined
+                }
+                isActiveTail={
+                  isRunning && index === activity.toolCalls.length - 1
+                }
+              />
+            )}
+          </React.Fragment>
+        );
+      })}
+    </div>
+  ) : null;
+  const progressState = progress?.state.replaceAll(/[-_]+/g, " ");
+  const progressText =
+    isRunning && !activity && progress && progressState
+      ? [
+          progressState.charAt(0).toUpperCase() + progressState.slice(1),
+          t("agentPanel.delegatedAgent.elapsed", {
+            duration: formatWorkedDuration(progress.elapsedSeconds * 1000),
+          }),
+          progress.detail,
+        ]
+          .filter(Boolean)
+          .join(" · ")
+      : null;
+  return (
+    <div className="group/tool my-0.5 w-full">
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        aria-expanded={open}
+        className="flex w-full items-center gap-1.5 rounded-md py-0.5 text-left text-[13px] text-muted-foreground transition-colors hover:text-foreground"
+      >
+        {isRunning ? (
+          <IconLoader2 className="size-3.5 animate-spin" />
+        ) : isError ? (
+          <IconCircleX className="size-3.5 text-destructive" />
+        ) : (
+          <IconChevronRight
+            className={cn("size-3.5 transition-transform", open && "rotate-90")}
+          />
+        )}
+        <span
+          className={cn(
+            "min-w-0 truncate font-normal",
+            isRunning && "agent-running-shimmer",
+          )}
+        >
+          {label}
+        </span>
+      </button>
+      <AnimatedCollapse open={open}>
+        <div className="ms-1 border-s border-border/50 ps-2 pt-1">
+          {workContent &&
+            (isRunning ? (
+              workContent
+            ) : (
+              <WorkedForSummary durationMs={durationMs}>
+                {workContent}
+              </WorkedForSummary>
+            ))}
+          {progressText && (
+            <p
+              className="ps-5 pb-1 text-xs text-muted-foreground"
+              data-testid="agent-call-progress"
+              aria-live="polite"
+            >
+              {progressText}
+            </p>
+          )}
+          {finalText && (
+            <div className="ps-5 pb-1">
+              <SmoothMarkdownText
+                text={finalText}
+                streaming={isRunning}
+                resetKey={`agent-response-${agentName}`}
+                statusType={isRunning ? "running" : "complete"}
+              />
+            </div>
+          )}
+        </div>
+      </AnimatedCollapse>
+    </div>
+  );
+}
+
 // ─── ToolCallFallback ──────────────────────────────────────────────────────────
 
 export function ToolCallFallback({
@@ -1252,22 +1416,28 @@ export function formatWorkedDuration(ms: number): string {
 
 export function WorkedForSummary({
   durationMs,
+  defaultOpen = false,
   autoCollapse = false,
   children,
 }: {
   durationMs?: number | null;
+  /** Keep completed work visible when the turn contains interactive UI. */
+  defaultOpen?: boolean;
   /** When true, close the summary after a run has completed. */
   autoCollapse?: boolean;
   children: React.ReactNode;
 }) {
-  // Start closed so a remounted completed message never flashes its work
-  // details open while auto-collapse settles. If the summary was already
-  // open when autoCollapse changes, AnimatedCollapse still animates it shut.
-  const [open, setOpen] = useState(false);
+  // Ordinary completed work starts closed so a remount never flashes details
+  // while auto-collapse settles. Interactive UI opts into an open summary.
+  const [open, setOpen] = useState(defaultOpen);
 
   useEffect(() => {
-    if (autoCollapse) setOpen(false);
-  }, [autoCollapse]);
+    if (defaultOpen) {
+      setOpen(true);
+    } else if (autoCollapse) {
+      setOpen(false);
+    }
+  }, [autoCollapse, defaultOpen]);
 
   const label =
     durationMs != null && durationMs >= 1000

package/corpus/core/src/client/chat/widgets/InlineExtensionWidget.tsx

@@ -17,7 +17,6 @@ export function InlineExtensionWidget({
 
   return (
     <InlineExtensionFrame
-      className="my-1.5"
       extensionId={result.mode === "persisted" ? result.id : undefined}
       extension={{
         id: result.id,