@agent-native/core 0.118.0 → 0.118.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.118.0",
+  "version": "0.118.1",
   "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": {
@@ -390,7 +390,7 @@
     "yjs": "^13.6.31",
     "zod": "^4.3.6",
     "@agent-native/recap-cli": "0.5.1",
-    "@agent-native/toolkit": "^0.10.0"
+    "@agent-native/toolkit": "^0.10.1"
   },
   "devDependencies": {
     "@ai-sdk/anthropic": "^3.0.71",

package/src/a2a/client.ts

@@ -14,6 +14,8 @@ import type {
   Task,
 } from "./types.js";
 
+const DEFAULT_A2A_POLL_REQUEST_TIMEOUT_MS = 15_000;
+
 export class A2ATaskTimeoutError extends Error {
   readonly taskId: string;
   readonly lastTask: Task;
@@ -171,6 +173,7 @@ export class A2AClient {
   private async rpc(
     method: string,
     params: Record<string, unknown>,
+    options?: { requestTimeoutMs?: number },
   ): Promise<JsonRpcResponse> {
     const body: JsonRpcRequest = {
       jsonrpc: "2.0",
@@ -186,7 +189,12 @@ export class A2AClient {
       for (let i = 0; i < this.apiKeyAttempts.length; i++) {
         console.log(`[A2A Client] POST ${url} method=${method}`);
         const startTime = Date.now();
-        const res = await this.postJson(url, body, this.apiKeyAttempts[i]);
+        const res = await this.postJson(
+          url,
+          body,
+          this.apiKeyAttempts[i],
+          options?.requestTimeoutMs,
+        );
         console.log(
           `[A2A Client] Response: ${res.status} in ${Date.now() - startTime}ms`,
         );
@@ -278,8 +286,15 @@ export class A2AClient {
   /**
    * Poll for a task by id. Used in async mode after `send({ async: true })`.
    */
-  async getTask(taskId: string): Promise<Task> {
-    const response = await this.rpc("tasks/get", { id: taskId });
+  async getTask(
+    taskId: string,
+    opts?: { requestTimeoutMs?: number },
+  ): Promise<Task> {
+    const response = await this.rpc(
+      "tasks/get",
+      { id: taskId },
+      { requestTimeoutMs: opts?.requestTimeoutMs },
+    );
     if (response.error) {
       throw new Error(
         `A2A error (${response.error.code}): ${response.error.message}`,
@@ -392,9 +407,17 @@ export class A2AClient {
 
     let current = submitted;
     while (Date.now() < deadline) {
-      await new Promise((r) => setTimeout(r, pollMs));
+      const sleepMs = Math.min(pollMs, Math.max(0, deadline - Date.now()));
+      await new Promise((r) => setTimeout(r, sleepMs));
+      const remainingMs = deadline - Date.now();
+      if (remainingMs <= 0) break;
       try {
-        current = await this.getTask(submitted.id);
+        current = await this.getTask(submitted.id, {
+          requestTimeoutMs: Math.min(
+            this.requestTimeoutMs ?? DEFAULT_A2A_POLL_REQUEST_TIMEOUT_MS,
+            remainingMs,
+          ),
+        });
         opts?.onUpdate?.(current);
       } catch {
         // Transient fetch failure — keep polling until the deadline.
@@ -509,13 +532,12 @@ export class A2AClient {
     url: string,
     body: JsonRpcRequest,
     apiKey = this.apiKey,
+    requestTimeoutMs = this.requestTimeoutMs,
   ): Promise<Response> {
-    const controller = this.requestTimeoutMs
-      ? new AbortController()
-      : undefined;
+    const controller = requestTimeoutMs ? new AbortController() : undefined;
     const timer =
-      controller && this.requestTimeoutMs
-        ? setTimeout(() => controller.abort(), this.requestTimeoutMs)
+      controller && requestTimeoutMs
+        ? setTimeout(() => controller.abort(), requestTimeoutMs)
         : undefined;
     try {
       return await ssrfSafeFetch(

package/src/cli/index.ts

@@ -203,12 +203,12 @@ function parseScaffoldArgs(argv: string[]): {
 // Track CLI usage (best-effort, non-blocking)
 function trackCli(event: string, props?: Record<string, unknown>): void {
   try {
-    import("../tracking/registry.js").then((m) => {
-      m.track(event, { command, ...props });
-    });
-    import("../tracking/providers.js").then((m) =>
-      m.registerBuiltinProviders(),
-    );
+    void import("../tracking/registry.js")
+      .then((m) => m.track(event, { command, ...props }))
+      .catch(() => undefined);
+    void import("../tracking/providers.js")
+      .then((m) => m.registerBuiltinProviders())
+      .catch(() => undefined);
   } catch {}
 }
 
@@ -219,7 +219,9 @@ process.on("uncaughtException", (err) => {
   console.error(`  Send feedback:   ${FEEDBACK_URL}\n`);
   trackCli("cli.crash", { error: err.message });
   Sentry.captureException(err);
-  Sentry.flush(2000).finally(() => process.exit(1));
+  void Sentry.flush(2000)
+    .catch(() => undefined)
+    .finally(() => process.exit(1));
 });
 
 process.on("unhandledRejection", (reason: any) => {
@@ -228,7 +230,9 @@ process.on("unhandledRejection", (reason: any) => {
   console.error(`  Send feedback:   ${FEEDBACK_URL}\n`);
   trackCli("cli.crash", { error: reason?.message ?? String(reason) });
   Sentry.captureException(reason);
-  Sentry.flush(2000).finally(() => process.exit(1));
+  void Sentry.flush(2000)
+    .catch(() => undefined)
+    .finally(() => process.exit(1));
 });
 
 // Surface a self-heal hint when an interrupted `npx @agent-native/core@latest ...`
@@ -961,14 +965,18 @@ switch (command) {
   }
 
   case "setup-agents": {
-    import("./setup-agents.js").then((m) => m.runSetupAgents());
+    import("./setup-agents.js")
+      .then((m) => m.runSetupAgents())
+      .catch(handleScaffoldImportError);
     break;
   }
 
   case "info": {
     // Print read-only info about an installable package (e.g. @agent-native/scheduling).
     // Lists subpath exports, source paths in node_modules, and docs pointers.
-    import("./info.js").then((m) => m.runInfo(args[0]));
+    import("./info.js")
+      .then((m) => m.runInfo(args[0]))
+      .catch(handleScaffoldImportError);
     break;
   }
 

package/src/cli/multi-frontier-runs.ts

@@ -438,8 +438,8 @@ export function transitionStoredMultiFrontierRun(
     const isFullStoredRun = hasStoredRunTimestamps(candidate);
     if (
       !isFullStoredRun &&
-      (Object.hasOwn(candidate, "createdAt") ||
-        Object.hasOwn(candidate, "updatedAt"))
+      (Object.prototype.hasOwnProperty.call(candidate, "createdAt") ||
+        Object.prototype.hasOwnProperty.call(candidate, "updatedAt"))
     ) {
       throw new Error("Invalid multi-frontier coordinator transition state.");
     }
@@ -1056,7 +1056,9 @@ function isCompleteMultiFrontierRunState(
 
 function normalizeStoredRunDefaults(value: unknown): unknown {
   if (!value || typeof value !== "object" || Array.isArray(value)) return value;
-  if (!Object.hasOwn(value, "autoContinueAfterAgreement")) {
+  if (
+    !Object.prototype.hasOwnProperty.call(value, "autoContinueAfterAgreement")
+  ) {
     return { ...value, autoContinueAfterAgreement: false };
   }
   return value;

package/src/cli/templates-meta.ts

@@ -228,18 +228,6 @@ 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/cli/workspace-dev.ts

@@ -465,7 +465,7 @@ function probeHttpReady(
       },
       (res) => {
         res.resume();
-        finish(true);
+        finish((res.statusCode ?? 500) < 500);
       },
     );
     req.setTimeout(timeoutMs, () => finish(false));

package/src/client/AgentPanel.tsx

@@ -2673,7 +2673,7 @@ export function AgentChatSurface({
   const defaultShowPageNewChatButton =
     shouldDefaultAgentChatSurfacePageNewChatButton(mode, showTabBar);
 
-  return (
+  const panel = (
     <AgentPanel
       {...props}
       defaultMode={defaultMode}
@@ -2697,6 +2697,14 @@ export function AgentChatSurface({
       }
     />
   );
+
+  if (!pageMode) return panel;
+  return (
+    <>
+      <URLSync browserTabId={props.browserTabId} />
+      {panel}
+    </>
+  );
 }
 
 // ─── AgentSidebar — wraps content with a toggleable agent panel ─────────────

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

@@ -48,6 +48,7 @@ import {
   isCallAgentToolCallShadowed,
 } from "../tool-display.js";
 import { cn } from "../utils.js";
+import { ActionChatUiSurface } from "./action-chat-ui-surface.js";
 import {
   SmoothMarkdownText,
   HighlightedCodeBlock,
@@ -133,11 +134,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>
       )}
@@ -759,7 +759,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;
@@ -1252,22 +1261,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;