@agent-native/core 0.118.0 → 0.119.0

package/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/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/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,

package/src/client/chat/widgets/builtin-tool-renderers.tsx

@@ -126,11 +126,15 @@ function renderDataWidget(context: ToolRendererContext) {
   return null;
 }
 
-function BuiltinToolRendererSkeleton() {
+function BuiltinToolRendererSkeleton({ framed = true }: { framed?: boolean }) {
   return (
     <div
       aria-label="Loading tool result"
-      className="my-1.5 h-24 animate-pulse rounded-lg border border-border bg-muted/30"
+      className={
+        framed
+          ? "my-1.5 h-24 animate-pulse rounded-lg border border-border bg-muted/30"
+          : "h-24 animate-pulse bg-muted/30"
+      }
     />
   );
 }
@@ -140,7 +144,7 @@ const BuiltinDataWidgetRenderer: ToolRendererComponent = ({ context }) =>
 
 const BuiltinInlineExtensionRenderer: ToolRendererComponent = ({ context }) =>
   normalizeInlineExtensionToolResult(context) ? (
-    <Suspense fallback={<BuiltinToolRendererSkeleton />}>
+    <Suspense fallback={<BuiltinToolRendererSkeleton framed={false} />}>
       <LazyInlineExtensionWidget context={context} />
     </Suspense>
   ) : null;

package/src/client/chat-model-groups.ts

@@ -40,34 +40,64 @@ function addCurrentModel(
   return next;
 }
 
+const MODEL_COST_ORDER = [
+  "luna",
+  "terra",
+  "sol",
+  "haiku",
+  "sonnet",
+  "opus",
+  "fable",
+  "flash",
+  "pro",
+] as const;
+
+function modelCostRank(model: string): number {
+  const normalized = model.toLowerCase();
+  const rank = MODEL_COST_ORDER.findIndex((tier) => normalized.includes(tier));
+  return rank === -1 ? MODEL_COST_ORDER.length : rank;
+}
+
+function sortModelsByCost(models: readonly string[]): string[] {
+  return [...models].sort((a, b) => modelCostRank(a) - modelCostRank(b));
+}
+
 function groupBuilderModels(models: readonly string[]): EngineModelGroup[] {
-  const claude = models.filter((model) => model.startsWith("claude-"));
-  const openai = models.filter((model) => model.startsWith("gpt-"));
-  const gemini = models.filter((model) => model.startsWith("gemini-"));
-  const other = models.filter(
-    (model) =>
-      !model.startsWith("claude-") &&
-      !model.startsWith("gpt-") &&
-      !model.startsWith("gemini-"),
+  const claude = sortModelsByCost(
+    models.filter((model) => model.startsWith("claude-")),
+  );
+  const openai = sortModelsByCost(
+    models.filter((model) => model.startsWith("gpt-")),
+  );
+  const gemini = sortModelsByCost(
+    models.filter((model) => model.startsWith("gemini-")),
+  );
+  const other = sortModelsByCost(
+    models.filter(
+      (model) =>
+        !model.startsWith("claude-") &&
+        !model.startsWith("gpt-") &&
+        !model.startsWith("gemini-"),
+    ),
   );
 
   return [
-    ...(claude.length
+    ...(openai.length
       ? [
           {
             engine: "builder",
-            label: "Claude",
-            models: claude,
+            label: "OpenAI",
+            models: openai,
             configured: true,
           },
         ]
       : []),
-    ...(openai.length
+    ...(claude.length
       ? [
           {
             engine: "builder",
-            label: "OpenAI",
-            models: openai,
+            label: "Claude",
+            models: claude,
             configured: true,
           },
         ]
@@ -115,16 +145,24 @@ function shouldShowDirectEngine(
   return true;
 }
 
-function putOpenRouterLast(
+function modelPickerEngineRank(engine: ChatModelEngineEntry): number {
+  if (engine.name === "ai-sdk:openai" || engine.label === "OpenAI") return 0;
+  if (
+    engine.name === "anthropic" ||
+    engine.name === "ai-sdk:anthropic" ||
+    engine.label === "Claude"
+  ) {
+    return 1;
+  }
+  if (engine.name === "ai-sdk:openrouter") return 100;
+  return 2;
+}
+
+function sortModelPickerEngines(
   a: ChatModelEngineEntry,
   b: ChatModelEngineEntry,
 ): number {
-  const aIsOpenRouter = a.name === "ai-sdk:openrouter";
-  const bIsOpenRouter = b.name === "ai-sdk:openrouter";
-  if (aIsOpenRouter === bIsOpenRouter) return 0;
-  if (aIsOpenRouter) return 1;
-  if (bIsOpenRouter) return -1;
-  return 0;
+  return modelPickerEngineRank(a) - modelPickerEngineRank(b);
 }
 
 export function buildChatModelGroups({
@@ -150,17 +188,19 @@ export function buildChatModelGroups({
   return engines
     .filter((engine) => engine.packageInstalled !== false)
     .filter((engine) => shouldShowDirectEngine(engine, currentEngineName))
-    .sort(putOpenRouterLast)
+    .sort(sortModelPickerEngines)
     .map((engine) => {
       const requiredEnvVars = engine.requiredEnvVars ?? [];
       return {
         engine: engine.name,
         label: engine.label,
-        models: addCurrentModel(
-          engine.supportedModels ?? [],
-          engine.name,
-          currentEngineName,
-          currentModel,
+        models: sortModelsByCost(
+          addCurrentModel(
+            engine.supportedModels ?? [],
+            engine.name,
+            currentEngineName,
+            currentModel,
+          ),
         ),
         configured:
           requiredEnvVars.length === 0 ||