@agent-native/core 0.114.16 → 0.115.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.114.16",
+  "version": "0.115.3",
   "description": "Framework for agent-native application development — where AI agents and UI share SQL state, actions, and context",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {
@@ -276,6 +276,10 @@
       "types": "./dist/data-programs/index.d.ts",
       "default": "./dist/data-programs/index.js"
     },
+    "./dashboard-storage": {
+      "types": "./dist/dashboard-storage/index.d.ts",
+      "default": "./dist/dashboard-storage/index.js"
+    },
     "./local-artifacts": {
       "types": "./dist/local-artifacts/index.d.ts",
       "default": "./dist/local-artifacts/index.js"
@@ -381,8 +385,8 @@
     "y-protocols": "^1.0.7",
     "yjs": "^13.6.31",
     "zod": "^4.3.6",
-    "@agent-native/recap-cli": "0.5.0",
-    "@agent-native/toolkit": "^0.8.2"
+    "@agent-native/toolkit": "^0.9.0",
+    "@agent-native/recap-cli": "0.5.0"
   },
   "devDependencies": {
     "@ai-sdk/anthropic": "^3.0.71",

package/src/action.ts

@@ -27,8 +27,27 @@ import type { ActionAuditConfig } from "./audit/types.js";
  * - `"a2a"` — a direct, explicitly exposed read-only A2A action dispatch.
  *   Natural-language A2A delegation still runs through the agent loop and its
  *   selected actions are attributed as `"tool"`.
+ * - `"automation"` — an event-triggered automation dispatched from a stored
+ *   workspace trigger with trusted trigger lineage.
  */
-export type ActionCaller = "tool" | "http" | "frontend" | "cli" | "mcp" | "a2a";
+export type ActionCaller =
+  | "tool"
+  | "http"
+  | "frontend"
+  | "cli"
+  | "mcp"
+  | "a2a"
+  | "automation";
+
+/**
+ * Trusted automation lineage added by the trigger dispatcher. Action inputs
+ * must never be used to create or override this context.
+ */
+export interface ActionAutomationContext {
+  triggerId: string;
+  triggerName: string;
+  policyId?: string;
+}
 
 /**
  * Context passed as the optional second argument to an action's `run`.
@@ -56,6 +75,8 @@ export interface ActionRunContext {
   orgId?: string | null;
   /** How this action was invoked. */
   caller: ActionCaller;
+  /** Present only for trigger-dispatched automation calls. */
+  automation?: ActionAutomationContext;
   /** Verified network lineage for direct delegated action calls. */
   networkProtocol?: "a2a" | "mcp" | "provider-api";
   networkId?: string;

package/src/agent/production-agent.ts

@@ -8,7 +8,11 @@ import {
 } from "h3";
 import type { EventHandler as H3EventHandler } from "h3";
 
-import { isAgentActionStopError, type ActionCaller } from "../action.js";
+import {
+  isAgentActionStopError,
+  type ActionAutomationContext,
+  type ActionCaller,
+} from "../action.js";
 import { readAppState } from "../application-state/script-helpers.js";
 import { isReadOnlyShellCommand } from "../coding-tools/index.js";
 import { extensionIdFromPathname } from "../extensions/path.js";
@@ -3083,6 +3087,21 @@ function normalizeToolCallInputForHistory(
   return { rawInput: input };
 }
 
+function dedupeAssistantToolCallsById(
+  content: import("./engine/types.js").EngineContentPart[],
+): import("./engine/types.js").EngineContentPart[] {
+  const seenToolCallIds = new Set<string>();
+  const deduped: import("./engine/types.js").EngineContentPart[] = [];
+  for (const part of content) {
+    if (part.type === "tool-call") {
+      if (seenToolCallIds.has(part.id)) continue;
+      seenToolCallIds.add(part.id);
+    }
+    deduped.push(part);
+  }
+  return deduped;
+}
+
 function toolInputSchemaErrorResult(
   toolName: string,
   input: unknown,
@@ -3107,6 +3126,91 @@ const rawToolInputAjv = new Ajv({
 
 const rawToolInputValidatorCache = new WeakMap<object, ValidateFunction>();
 
+const optionalPlaceholderAjv = new Ajv({
+  strict: false,
+  allErrors: false,
+  coerceTypes: false,
+  useDefaults: false,
+  removeAdditional: false,
+});
+
+const optionalPlaceholderValidatorCache = new WeakMap<
+  object,
+  ValidateFunction
+>();
+
+function isStructurallyEmptyToolValue(value: unknown): boolean {
+  if (value === false) return true;
+  if (value === null) return true;
+  if (typeof value === "string") return value.trim().length === 0;
+  if (Array.isArray(value)) {
+    return (
+      value.length === 0 ||
+      value.every(
+        (item) =>
+          item !== null &&
+          typeof item === "object" &&
+          !Array.isArray(item) &&
+          Object.keys(item).length === 0,
+      )
+    );
+  }
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    Object.keys(value).length === 0
+  );
+}
+
+function schemaAcceptsToolValue(schema: object, value: unknown): boolean {
+  let validator = optionalPlaceholderValidatorCache.get(schema);
+  if (!validator) {
+    try {
+      validator = optionalPlaceholderAjv.compile(schema);
+      optionalPlaceholderValidatorCache.set(schema, validator);
+    } catch {
+      return false;
+    }
+  }
+  return Boolean(validator(value));
+}
+
+/**
+ * Some model gateways fill every optional tool field with an empty sentinel
+ * instead of omitting it. One schema-invalid empty value proves that pattern;
+ * only then strip the other optional empty/default sentinels from the call.
+ * Calls whose empty values are all schema-valid keep their intentional clears.
+ */
+function normalizeOptionalToolPlaceholders(
+  schema: RawJsonSchema | undefined,
+  input: unknown,
+): { input: unknown; changed: boolean } {
+  if (!schema?.properties || !input || typeof input !== "object") {
+    return { input, changed: false };
+  }
+  if (Array.isArray(input)) return { input, changed: false };
+
+  const required = new Set(
+    Array.isArray(schema.required) ? schema.required : [],
+  );
+  const placeholders: string[] = [];
+  let hasSchemaInvalidPlaceholder = false;
+  for (const [key, value] of Object.entries(input as Record<string, unknown>)) {
+    if (required.has(key) || !isStructurallyEmptyToolValue(value)) continue;
+    const propertySchema = schema.properties[key];
+    if (!propertySchema || typeof propertySchema !== "object") continue;
+    placeholders.push(key);
+    if (!schemaAcceptsToolValue(propertySchema, value)) {
+      hasSchemaInvalidPlaceholder = true;
+    }
+  }
+  if (!hasSchemaInvalidPlaceholder) return { input, changed: false };
+
+  const normalized = { ...(input as Record<string, unknown>) };
+  for (const key of placeholders) delete normalized[key];
+  return { input: normalized, changed: true };
+}
+
 function getRawToolInputValidator(schema: RawJsonSchema): ValidateFunction {
   const cached = rawToolInputValidatorCache.get(schema);
   if (cached) return cached;
@@ -3163,6 +3267,8 @@ export async function runAgentLoop(opts: {
   orgId?: string | null;
   /** Action invocation attribution. Defaults to the normal agent tool loop. */
   actionCaller?: ActionCaller;
+  /** Trusted trigger lineage for automation-dispatched action calls. */
+  automation?: ActionAutomationContext;
   /** Concrete execution id used for cross-app trace correlation. */
   runId?: string;
   /** Verified/telemetry-only delegated lineage supplied by the transport. */
@@ -3905,6 +4011,8 @@ export async function runAgentLoop(opts: {
       }
     }
 
+    assistantContent = dedupeAssistantToolCallsById(assistantContent);
+
     const assistantContentForHistory = assistantContent.map((part) =>
       part.type === "tool-call"
         ? {
@@ -4068,11 +4176,20 @@ export async function runAgentLoop(opts: {
     const runToolCall = async (
       toolCall: import("./engine/types.js").EngineToolCallPart,
     ): Promise<EngineContentPart> => {
+      const actionEntry = actions[toolCall.name];
+      const placeholderNormalization = actionEntry
+        ? normalizeOptionalToolPlaceholders(
+            actionEntry.tool.parameters,
+            toolCall.input,
+          )
+        : { input: toolCall.input, changed: false };
+      if (placeholderNormalization.changed) {
+        toolCall = { ...toolCall, input: placeholderNormalization.input };
+      }
       const wireToolInput = JSON.stringify(toolCall.input ?? {});
       const normalizedToolInput = normalizeToolCallInputForHistory(
         toolCall.input,
       );
-      const actionEntry = actions[toolCall.name];
       const sourceSweepGuard = shouldGuardRepeatedSourceSweep({
         toolName: toolCall.name,
         entry: actionEntry,
@@ -4227,6 +4344,7 @@ export async function runAgentLoop(opts: {
                     userEmail: getRequestUserEmail(),
                     orgId: getRequestOrgId() ?? null,
                     caller: opts.actionCaller ?? "tool",
+                    automation: opts.automation,
                     networkProtocol: opts.networkProtocol,
                     networkId: opts.networkId,
                     networkPeer: opts.networkPeer,
@@ -4490,7 +4608,7 @@ export async function runAgentLoop(opts: {
       });
 
       const toolCallSchemaError = toolCallErrors.get(toolCall.id);
-      if (toolCallSchemaError) {
+      if (toolCallSchemaError && !placeholderNormalization.changed) {
         const result = finalizeToolErrorResult(
           toolInputSchemaErrorResult(
             toolCall.name,
@@ -4663,6 +4781,7 @@ export async function runAgentLoop(opts: {
           userEmail: actionUserEmail ?? undefined,
           orgId: actionOrgId,
           caller: opts.actionCaller ?? "tool",
+          automation: opts.automation,
           networkProtocol: opts.networkProtocol,
           networkId: opts.networkId,
           networkPeer: opts.networkPeer,

package/src/cli/skills-content/visual-plan-skill.ts

@@ -301,6 +301,18 @@ and screen ids across both surfaces. The canvas is the inspectable static refere
 the prototype is the interactive version of that same flow, not a separate
 design direction.
 
+Treat “higher fidelity,” “pixel-accurate,” “polished mockup,” “production-like,”
+“real design,” and “not a sketch/wireframe” as design-first language even when
+the request also says “mockup.” For a new plan, use \`create-plan-design\`. For
+an existing plan, keep the same plan id and call \`update-visual-plan\` with a
+\`set-visual-render-mode\` patch using \`renderMode: "design"\` plus the upgraded
+screen HTML/CSS in the same update. Ground the result in the real app shell,
+tokens, typography, spacing, and states, and add stable \`data-design-id\`
+targets. Put scoped styles in each screen's \`css\` field, never in a \`<style>\`
+tag. The viewer-local Clean toggle only changes one browser's wireframe
+preference; it is not a fidelity upgrade. Do not create a duplicate plan to
+handle a fidelity follow-up.
+
 ## Wireframe quality — read \`references/wireframe.md\`
 
 UI recap/plan wireframes must meet a strict quality bar — full-width chrome,
@@ -349,7 +361,9 @@ directory before authoring a plan.
   visual surface, canvas only, or canvas + prototype.
 - \`create-ui-plan\`: start a UI-first plan when the work is primarily product UI.
 - \`create-prototype-plan\`: start a prototype-first plan with a functional top
-  review surface.
+  review surface. If the interaction itself must also be high fidelity, set each
+  screen's \`renderMode\` to \`design\` and pass scoped styles through \`css\`;
+  otherwise use \`create-plan-design\` for design-first review.
 - \`create-plan-design\`: start a full-fidelity branded Design-tab plan with an
   optional matching Prototype tab.
 - \`convert-visual-plan-to-prototype\`: convert an existing HTML wireframe canvas
@@ -357,7 +371,10 @@ directory before authoring a plan.
 - \`create-visual-questions\`: use only when the user explicitly asks for a visual
   intake questionnaire, not as \`/visual-plan\` preflight.
 - \`update-visual-plan\`: revise content, status, or comments with targeted
-  \`contentPatches\` (see Core Workflow steps 6-7). \`replace-blocks\` and full
+  \`contentPatches\` (see Core Workflow steps 6-7). Use
+  \`set-visual-render-mode\` with \`renderMode: "design"\` when promoting an
+  existing plan to high fidelity, together with deliberate screen HTML/CSS;
+  render mode alone only removes sketch treatment. \`replace-blocks\` and full
   \`content\` replacement require \`expectedUpdatedAt\` from a fresh
   \`get-visual-plan\` call.
 - \`read-visual-plan-source\`: read the normalized plan as \`plan.mdx\`,

package/src/cli/templates-meta.ts

@@ -228,6 +228,18 @@ export const TEMPLATES: TemplateMeta[] = [
     hidden: true,
     core: false,
   },
+  {
+    name: "crm",
+    label: "CRM",
+    hint: "Agent-native CRM companion with scoped HubSpot intelligence, workflows, and write proposals",
+    icon: "Users",
+    color: "#2563EB",
+    colorRgb: "37 99 235",
+    devPort: 8107,
+    hidden: true,
+    defaultMode: "dev",
+    core: false,
+  },
   {
     name: "macros",
     label: "Macros",

package/src/client/AssistantChat.tsx

@@ -1591,6 +1591,15 @@ export function shouldShowGlobalRunningStatus({
   ) {
     return false;
   }
+  // The reasoning cell already owns the generic Thinking state. Activity
+  // events can briefly reassert that same label between reasoning deltas;
+  // rendering both makes a second Thinking row flash beneath the thought.
+  if (
+    runningActivityLabel === "Thinking" &&
+    (latestMessageHasReasoning || contentHasVisibleReasoning(reconnectContent))
+  ) {
+    return false;
+  }
   if (runningActivityLabel) return true;
 
   return (
@@ -1598,6 +1607,16 @@ export function shouldShowGlobalRunningStatus({
   );
 }
 
+export function assistantChatAutoscrollStatusKey({
+  showGlobalRunningStatus,
+  runningStatusLabel,
+}: {
+  showGlobalRunningStatus: boolean;
+  runningStatusLabel: string;
+}): string {
+  return showGlobalRunningStatus ? runningStatusLabel : "idle";
+}
+
 type QueuedMessage = {
   id: string;
   text: string;
@@ -4804,11 +4823,28 @@ const AssistantChatInner = forwardRef<
         adapterHandoffPending || reconnectTailOnlyRef.current,
     },
   );
+  const latestMessage = messages[messages.length - 1];
+  const reconnectStatusContent =
+    visibleReconnectContent.length > 0
+      ? visibleReconnectContent
+      : reconnectContent.length === 0
+        ? reconnectActivityContent
+        : [];
+  const showGlobalRunningStatus = shouldShowGlobalRunningStatus({
+    showRunningInUI,
+    runningActivityLabel,
+    runningActivityTool,
+    latestMessage,
+    reconnectContent: reconnectStatusContent,
+  });
   const autoscrollFollowKey = [
     messages.map(messageFollowKey).join(";"),
     `q:${queuedMessages.map(queuedMessageFollowKey).join("|")}`,
     `r:${reconnectContentFollowKey(visibleReconnectContent)}`,
-    `status:${showRunningInUI ? runningStatusLabel : "idle"}`,
+    `status:${assistantChatAutoscrollStatusKey({
+      showGlobalRunningStatus,
+      runningStatusLabel,
+    })}`,
   ].join(";;");
   const {
     scrollRef,
@@ -4882,21 +4918,7 @@ const AssistantChatInner = forwardRef<
     () => latestNonRecoveryUserMessageText(messages),
     [messages],
   );
-  const latestMessage = messages[messages.length - 1];
   const latestMessageRole = latestMessage?.role;
-  const reconnectStatusContent =
-    visibleReconnectContent.length > 0
-      ? visibleReconnectContent
-      : reconnectContent.length === 0
-        ? reconnectActivityContent
-        : [];
-  const showGlobalRunningStatus = shouldShowGlobalRunningStatus({
-    showRunningInUI,
-    runningActivityLabel,
-    runningActivityTool,
-    latestMessage,
-    reconnectContent: reconnectStatusContent,
-  });
   const latestAssistantWasPlan =
     latestMessageRole === "assistant" &&
     getRequestModeMetadata(latestMessage) === "plan";
@@ -5535,18 +5557,23 @@ const AssistantChatInner = forwardRef<
                               className="agent-composer-missing-key-trigger"
                               aria-label="Connect AI to start chatting"
                             >
-                              <span className="agent-composer-missing-key-copy">
-                                <span className="agent-composer-missing-key-title">
-                                  {missingApiKeySetupLayout === "sidebar"
-                                    ? "Connect AI to chat"
-                                    : "Connect AI to start chatting"}
-                                </span>
-                                {missingApiKeySetupLayout !== "sidebar" ? (
-                                  <span className="agent-composer-missing-key-description">
-                                    Builder.io includes free credits, or use
-                                    your own API key.
+                              <span className="agent-composer-missing-key-content">
+                                <span className="agent-composer-missing-key-copy">
+                                  <span className="agent-composer-missing-key-title">
+                                    {missingApiKeySetupLayout === "sidebar"
+                                      ? "Connect AI to chat"
+                                      : "Connect AI to start chatting"}
                                   </span>
-                                ) : null}
+                                  {missingApiKeySetupLayout !== "sidebar" ? (
+                                    <span className="agent-composer-missing-key-description">
+                                      Builder.io includes free credits, or use
+                                      your own API key.
+                                    </span>
+                                  ) : null}
+                                </span>
+                                <span className="agent-composer-missing-key-cta">
+                                  Connect AI
+                                </span>
                               </span>
                             </button>
                           </PopoverTrigger>

package/src/client/agent-page/AgentJobsTab.tsx

@@ -432,6 +432,25 @@ export function AgentJobsTab({ canManageOrg = false }: AgentPageTabProps) {
               <p className="mt-1 whitespace-pre-wrap text-sm text-muted-foreground">
                 {detailsTarget.instructions}
               </p>
+              {detailsTarget.mcpTools.length > 0 ? (
+                <div className="mt-4">
+                  <p className="text-xs font-medium text-foreground">
+                    {t("jobs.mcpTools", {
+                      defaultValue: "Connected MCP tools",
+                    })}
+                  </p>
+                  <div className="mt-1 flex flex-wrap gap-1.5">
+                    {detailsTarget.mcpTools.map((toolName) => (
+                      <code
+                        key={toolName}
+                        className="rounded bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground"
+                      >
+                        {toolName}
+                      </code>
+                    ))}
+                  </div>
+                </div>
+              ) : null}
             </div>
           ) : null}
         </DialogContent>

package/src/client/agent-page/use-jobs.ts

@@ -18,6 +18,7 @@ export interface RecurringJob {
   lastError: string | null;
   nextRun: string | null;
   createdBy: string | null;
+  mcpTools: string[];
   canUpdate: boolean;
 }
 

package/src/client/blocks/library/wireframe.tsx

@@ -142,7 +142,7 @@ function ArtboardFrame({
   const fitRef = useRef<HTMLDivElement>(null);
   const isDark = useIsDark();
   const theme: "light" | "dark" = isDark ? "dark" : "light";
-  const style = useWireframeStyle();
+  const preferredStyle = useWireframeStyle();
   const preset = SURFACE_PRESETS[surface] ?? SURFACE_PRESETS.desktop;
   const width = canvasWidth ?? preset.width;
   // AUTO-HEIGHT: with no explicit `canvasSize` the artboard height is driven by
@@ -164,6 +164,7 @@ function ArtboardFrame({
     fixedHeight ?? null,
   );
   const designMode = renderMode === "design";
+  const style = designMode ? "clean" : preferredStyle;
   const sketchy = !designMode && style === "sketchy" && !skeleton;
   const roughEnabled = sketchy && roughOverlay;
   const frameBorder = skeleton
@@ -409,6 +410,7 @@ function KitArtboard({
       surface={data.surface}
       compact={compact}
       skeleton={data.skeleton}
+      renderMode={data.renderMode}
       showFrame={showFrame}
       selector="[data-rough]"
       caption={data.caption}

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

@@ -859,6 +859,27 @@ export function assistantMessageHasUnresolvedTool(content: unknown): boolean {
   });
 }
 
+// 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.
+export function computeLatestRunningToolCallId(
+  content: ContentPart[] | undefined,
+  { chatRunning, isLast }: { chatRunning: boolean; isLast: boolean },
+): string | null {
+  if (!isLast) return null;
+  return (
+    content?.reduce(
+      (latestToolCallId, part) =>
+        part.type === "tool-call" &&
+        part.result === undefined &&
+        (chatRunning || part.activity === true)
+          ? part.toolCallId
+          : latestToolCallId,
+      null as string | null,
+    ) ?? null
+  );
+}
+
 export function shouldShowAssistantMessageFooter({
   isLast,
   chatRunning,
@@ -1157,6 +1178,10 @@ export function AssistantMessage() {
         (p.type !== "tool-call" || p.activity !== true) &&
         isCollapsibleAssistantWorkPart(p),
     );
+  const latestRunningToolCallId = computeLatestRunningToolCallId(msgContent, {
+    chatRunning,
+    isLast,
+  });
 
   if (!hasRenderableContent) return null;
 
@@ -1201,7 +1226,16 @@ export function AssistantMessage() {
               case "reasoning":
                 return <ReasoningMessagePart />;
               case "tool-call":
-                return part.toolUI ?? <ToolCallFallback {...part} />;
+                return (
+                  part.toolUI ?? (
+                    <ToolCallFallback
+                      {...part}
+                      isLatestRunning={
+                        part.toolCallId === latestRunningToolCallId
+                      }
+                    />
+                  )
+                );
               default:
                 return null;
             }

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

@@ -104,6 +104,10 @@ function ToolLongRunningHintShell({
   children: React.ReactNode;
 }) {
   const [showLongRunningHint, setShowLongRunningHint] = useState(false);
+  // useState initializer runs once at mount: a row that mounts already
+  // resolved never animates, while a tool appended during an active stream
+  // mounts running and animates in.
+  const [animateEntry] = useState(isRunning);
 
   useEffect(() => {
     if (!isRunning) {
@@ -118,14 +122,21 @@ function ToolLongRunningHintShell({
   }, [isRunning, toolName]);
 
   return (
-    <>
+    <div
+      className={cn(
+        "agent-tool-call",
+        animateEntry &&
+          "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-bottom-1 motion-safe:duration-200 motion-safe:ease-[var(--ease-out-strong)]",
+      )}
+      data-running={isRunning ? "true" : undefined}
+    >
       {children}
       {isRunning && showLongRunningHint && (
         <div className="mt-0.5 px-2.5 text-[11px] leading-snug text-muted-foreground/80">
           Still working. Large updates can take a minute or two.
         </div>
       )}
-    </>
+    </div>
   );
 }
 
@@ -542,6 +553,7 @@ export function ToolCallDisplay({
   structuredMeta,
   approval,
   repeatCount,
+  isLatestRunning = isRunning,
 }: {
   toolName: string;
   argsText?: string;
@@ -553,6 +565,7 @@ export function ToolCallDisplay({
   structuredMeta?: Record<string, unknown>;
   approval?: { approvalKey: string; dismissed?: boolean };
   repeatCount?: number;
+  isLatestRunning?: boolean;
 }) {
   // Delegate to bespoke cells when structured metadata is present.
   // These must be separate components so hook order in ToolCallDisplayGeneric
@@ -603,6 +616,7 @@ export function ToolCallDisplay({
       mcpApp={mcpApp}
       chatUI={chatUI}
       isRunning={isRunning}
+      isLatestRunning={isLatestRunning}
       approval={approval}
       repeatCount={repeatCount}
     />,
@@ -617,6 +631,7 @@ function ToolCallDisplayGeneric({
   mcpApp,
   chatUI,
   isRunning,
+  isLatestRunning,
   approval,
   repeatCount,
 }: {
@@ -627,6 +642,7 @@ function ToolCallDisplayGeneric({
   mcpApp?: AgentMcpAppPayload;
   chatUI?: ActionChatUIConfig;
   isRunning: boolean;
+  isLatestRunning: boolean;
   approval?: { approvalKey: string; dismissed?: boolean };
   repeatCount?: number;
 }) {
@@ -786,7 +802,14 @@ function ToolCallDisplayGeneric({
             </>
           )}
         </span>
-        <span className="min-w-0 truncate font-normal">{displayName}</span>
+        <span
+          className={cn(
+            "min-w-0 truncate font-normal",
+            isRunning && isLatestRunning && "agent-running-shimmer",
+          )}
+        >
+          {displayName}
+        </span>
         {repeatCount && repeatCount > 1 && (
           <span
             className="shrink-0 rounded border border-border/60 px-1.5 py-0.5 text-[10px] leading-none text-muted-foreground"
@@ -864,6 +887,7 @@ export function ToolCallFallback({
   activity?: boolean;
   approval?: { approvalKey: string; dismissed?: boolean };
   repeatCount?: number;
+  isLatestRunning?: boolean;
 }) {
   const chatRunning = React.useContext(ChatRunningContext);
   const isRunning =
@@ -884,6 +908,7 @@ export function ToolCallFallback({
       chatUI={rest.chatUI}
       structuredMeta={rest.structuredMeta}
       isRunning={isRunning}
+      isLatestRunning={rest.isLatestRunning}
       approval={rest.approval}
       repeatCount={rest.repeatCount}
     />
@@ -910,6 +935,15 @@ export function ReconnectStreamMessage({
     content.at(-1)?.type === "text" ? content.length - 1 : -1;
   const streamingReasoningPartIndex =
     content.at(-1)?.type === "reasoning" ? content.length - 1 : -1;
+  const latestRunningToolIndex = content.reduce(
+    (latestIndex, part, index) =>
+      part.type === "tool-call" &&
+      part.result === undefined &&
+      (chatRunning || part.activity === true)
+        ? index
+        : latestIndex,
+    -1,
+  );
 
   const renderPart = (part: ContentPart, i: number) => {
     if (part.type === "text") {
@@ -949,6 +983,7 @@ export function ReconnectStreamMessage({
         isRunning={
           part.result === undefined && (chatRunning || part.activity === true)
         }
+        isLatestRunning={i === latestRunningToolIndex}
         approval={part.approval}
         repeatCount={part.repeatCount}
       />