@agent-native/core 0.84.25 → 0.84.28

package/corpus/core/src/client/sse-event-processor.ts

@@ -150,8 +150,8 @@ export const SSE_ACTION_PREPARATION_STALL_TIMEOUT_MS = 90_000;
 
 type ActivityTrailEntry = AgentActivityTrailEntry;
 
-type PreparingActionState = {
-  tool?: string;
+type PreparingActionEntry = {
+  tool: string;
   startedAt?: number;
   lastProgressBytes?: number;
   /**
@@ -166,6 +166,10 @@ type PreparingActionState = {
   lastProgressAt?: number;
 };
 
+type PreparingActionState = {
+  entries?: Map<string, PreparingActionEntry>;
+};
+
 function formatProgressBytes(bytes: number): string {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
@@ -270,21 +274,35 @@ function updatePreparingActionState(
   if (ev.type === "activity" && isPreparingActionActivity(ev)) {
     const tool = ev.tool?.trim() || undefined;
     if (!tool) return false;
-    if (state.tool !== tool || state.startedAt === undefined) {
-      state.tool = tool;
-      state.startedAt = now;
-      state.lastProgressAt = undefined;
-      state.lastProgressBytes = undefined;
+    const key = ev.id?.trim() || tool;
+    const entries = state.entries ?? new Map<string, PreparingActionEntry>();
+    state.entries = entries;
+    let entry = entries.get(key);
+    if (!entry) {
+      entry = {
+        tool,
+        startedAt: now,
+        lastProgressAt: undefined,
+        lastProgressBytes: undefined,
+      };
+      entries.set(key, entry);
     }
     const progressBytes = activityProgressBytes(ev);
-    const previousBytes = state.lastProgressBytes ?? 0;
+    const previousBytes = entry.lastProgressBytes ?? 0;
     if (progressBytes !== undefined) {
-      state.lastProgressBytes = Math.max(previousBytes, progressBytes);
+      entry.lastProgressBytes = Math.max(previousBytes, progressBytes);
+    }
+    if (!ev.id?.trim()) {
+      if (progressBytes !== undefined && progressBytes > 0) {
+        entry.lastProgressAt = now;
+        return true;
+      }
+      return false;
     }
     if (progressBytes !== undefined && progressBytes > previousBytes) {
       // A byte increase is proof the model is still streaming this action's
       // argument. Repeated zero-byte prep activity is only a heartbeat.
-      state.lastProgressAt = now;
+      entry.lastProgressAt = now;
       return true;
     }
     return false;
@@ -299,10 +317,17 @@ function updatePreparingActionState(
     ev.type === "error" ||
     ev.type === "missing_api_key"
   ) {
-    state.tool = undefined;
-    state.startedAt = undefined;
-    state.lastProgressAt = undefined;
-    state.lastProgressBytes = undefined;
+    if (ev.type === "tool_start" || ev.type === "tool_done") {
+      const tool = ev.tool?.trim();
+      const id = ev.id?.trim();
+      for (const [key, entry] of state.entries ?? []) {
+        if ((id && key === id) || (!id && entry.tool === tool)) {
+          state.entries?.delete(key);
+        }
+      }
+    } else {
+      state.entries?.clear();
+    }
   }
   return undefined;
 }
@@ -313,12 +338,16 @@ function hasStalledPreparingAction(state: PreparingActionState, now: number) {
   // streaming for a long time. `lastProgressAt` advances on every delta
   // heartbeat, so an actively-streaming large output keeps resetting this and
   // survives; a genuinely stuck prep (keepalive-only, no deltas) trips it.
-  return (
-    state.tool !== undefined &&
-    state.startedAt !== undefined &&
-    now - (state.lastProgressAt ?? state.startedAt) >=
-      SSE_ACTION_PREPARATION_STALL_TIMEOUT_MS
-  );
+  for (const entry of state.entries?.values() ?? []) {
+    if (
+      entry.startedAt !== undefined &&
+      now - (entry.lastProgressAt ?? entry.startedAt) >=
+        SSE_ACTION_PREPARATION_STALL_TIMEOUT_MS
+    ) {
+      return true;
+    }
+  }
+  return false;
 }
 
 async function readChunkWithProgressTimeout(

package/corpus/core/src/sharing/actions/set-resource-visibility.ts

@@ -16,9 +16,9 @@ import {
 
 export default defineAction({
   description:
-    "Change the coarse visibility of a shareable resource: 'private' keeps it owner-only, 'org' shares it with all members of the owner's organization, 'public' makes it accessible to anyone with the link. Owner or admin role required.",
-  // (audit H5) Visibility changes are admin-tier and can flip a private
-  // resource org-wide or public. Refuse from the tools iframe bridge.
+    "Change the coarse visibility of a shareable resource: 'private' keeps it owner-only, 'org' shares it with all members of the owner's organization, 'public' makes it accessible to anyone with the link. Visibility changes require owner or admin role.",
+  // (audit H5) Visibility changes can flip a private resource org-wide or
+  // public. Refuse from the tools iframe bridge.
   toolCallable: false,
   mcpApp: {
     compactCatalog: true,

package/corpus/templates/design/actions/insert-asset.ts

@@ -57,6 +57,14 @@ function escapeHtml(value: string): string {
     .replace(/"/g, """);
 }
 
+function createInsertedNodeId(prefix: string): string {
+  const random =
+    typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
+      ? crypto.randomUUID().replace(/-/g, "").slice(0, 12)
+      : Math.random().toString(36).slice(2, 14);
+  return `inserted-${prefix}-${random}`;
+}
+
 function insertBeforeClosingTag(
   html: string,
   closingTag: "main" | "body",
@@ -70,6 +78,7 @@ function insertBeforeClosingTag(
 function appendAssetMarkup(
   html: string,
   args: z.infer<typeof schemaInput>,
+  nodeId: string,
 ): string {
   const label = args.title?.trim() || args.altText?.trim() || "Generated asset";
   const escapedUrl = escapeHtml(args.assetUrl);
@@ -82,7 +91,7 @@ function appendAssetMarkup(
       ? `<video src="${escapedUrl}" controls class="w-full rounded-xl object-cover"></video>`
       : `<img src="${escapedUrl}" alt="${escapeHtml(args.altText?.trim() || label)}" class="w-full rounded-xl object-cover" />`;
   const snippet = `
-    <section class="mx-auto my-8 max-w-5xl px-4" data-agent-native-asset${assetIdAttr}>
+    <section class="mx-auto my-8 max-w-5xl px-4" data-agent-native-asset data-agent-native-node-id="${escapeHtml(nodeId)}" data-agent-native-layer-name="${escapedLabel}"${assetIdAttr}>
       <figure class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
         ${media}
         <figcaption class="px-4 py-3 text-sm text-slate-600">${escapedLabel}</figcaption>
@@ -191,7 +200,8 @@ export default defineAction({
       // Collab read is best-effort; fall back to stored content.
     }
 
-    const content = appendAssetMarkup(base, args);
+    const insertedNodeId = createInsertedNodeId("asset");
+    const content = appendAssetMarkup(base, args, insertedNodeId);
     const now = new Date().toISOString();
     await db
       .update(schema.designFiles)
@@ -213,6 +223,8 @@ export default defineAction({
       fileId: file.id,
       filename: file.filename,
       inserted: true,
+      insertedNodeId,
+      insertedSelector: `[data-agent-native-node-id="${insertedNodeId}"]`,
       assetId: args.assetId ?? null,
       assetUrl: args.assetUrl,
     };

package/corpus/templates/design/actions/insert-design-native-asset.ts

@@ -50,9 +50,17 @@ function insertBeforeClosingTag(
   return html.replace(pattern, `${snippet}\n</${closingTag}>`);
 }
 
-function nativeSnippet(kind: DesignNativeAssetKind): string {
+function createInsertedNodeId(prefix: string): string {
+  const random =
+    typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
+      ? crypto.randomUUID().replace(/-/g, "").slice(0, 12)
+      : Math.random().toString(36).slice(2, 14);
+  return `inserted-${prefix}-${random}`;
+}
+
+function nativeSnippet(kind: DesignNativeAssetKind, nodeId: string): string {
   const attrs = (componentName: string) =>
-    `data-agent-native-native-asset data-agent-native-component="${componentName}" data-agent-native-layer-name="${componentName}"`;
+    `data-agent-native-native-asset data-agent-native-node-id="${nodeId}" data-agent-native-component="${componentName}" data-agent-native-layer-name="${componentName}"`;
   switch (kind) {
     case "section-frame":
       return `
@@ -137,8 +145,9 @@ function nativeSnippet(kind: DesignNativeAssetKind): string {
 function appendNativeAssetMarkup(
   html: string,
   kind: DesignNativeAssetKind,
+  nodeId: string,
 ): string {
-  const snippet = nativeSnippet(kind);
+  const snippet = nativeSnippet(kind, nodeId);
   return (
     insertBeforeClosingTag(html, "main", snippet) ??
     insertBeforeClosingTag(html, "body", snippet) ??
@@ -239,7 +248,8 @@ export default defineAction({
       // Collab read is best-effort; fall back to stored content.
     }
 
-    const content = appendNativeAssetMarkup(base, args.kind);
+    const insertedNodeId = createInsertedNodeId("native");
+    const content = appendNativeAssetMarkup(base, args.kind, insertedNodeId);
     const now = new Date().toISOString();
     await db
       .update(schema.designFiles)
@@ -261,6 +271,8 @@ export default defineAction({
       fileId: file.id,
       filename: file.filename,
       inserted: true,
+      insertedNodeId,
+      insertedSelector: `[data-agent-native-node-id="${insertedNodeId}"]`,
       source: "design-native",
       kind: args.kind,
     };

package/corpus/templates/design/actions/insert-figma-library-asset.ts

@@ -66,6 +66,14 @@ function escapeHtml(value: string): string {
     .replace(/"/g, """);
 }
 
+function createInsertedNodeId(prefix: string): string {
+  const random =
+    typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
+      ? crypto.randomUUID().replace(/-/g, "").slice(0, 12)
+      : Math.random().toString(36).slice(2, 14);
+  return `inserted-${prefix}-${random}`;
+}
+
 function insertBeforeClosingTag(
   html: string,
   closingTag: "main" | "body",
@@ -83,6 +91,7 @@ function optionalDataAttribute(name: string, value: string | undefined) {
 function appendFigmaAssetMarkup(
   html: string,
   args: z.infer<typeof schemaInput>,
+  nodeId: string,
 ): string {
   const label = args.name?.trim() || "Figma library asset";
   const description = args.description?.trim();
@@ -90,7 +99,7 @@ function appendFigmaAssetMarkup(
     ? `<a href="${escapeHtml(args.sourceUrl)}" target="_blank" rel="noreferrer" class="text-slate-500 underline decoration-slate-300 underline-offset-2 hover:text-slate-800">Open in Figma</a>`
     : "";
   const snippet = `
-    <section class="mx-auto my-8 max-w-5xl px-4" data-agent-native-asset-source="figma" data-agent-native-figma-asset data-figma-file-key="${escapeHtml(args.fileKey)}"${optionalDataAttribute("data-figma-node-id", args.nodeId)}${optionalDataAttribute("data-figma-component-key", args.componentKey)} data-figma-asset-kind="${escapeHtml(args.kind)}">
+    <section class="mx-auto my-8 max-w-5xl px-4" data-agent-native-asset-source="figma" data-agent-native-figma-asset data-agent-native-node-id="${escapeHtml(nodeId)}" data-agent-native-layer-name="${escapeHtml(label)}" data-figma-file-key="${escapeHtml(args.fileKey)}"${optionalDataAttribute("data-figma-node-id", args.nodeId)}${optionalDataAttribute("data-figma-component-key", args.componentKey)} data-figma-asset-kind="${escapeHtml(args.kind)}">
       <figure class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
         <img src="${escapeHtml(args.renderUrl)}" alt="${escapeHtml(label)}" class="w-full rounded-t-2xl object-contain" />
         <figcaption class="flex flex-wrap items-center gap-x-3 gap-y-1 px-4 py-3 text-sm text-slate-600">
@@ -201,7 +210,8 @@ export default defineAction({
       // Collab read is best-effort; fall back to stored content.
     }
 
-    const content = appendFigmaAssetMarkup(base, args);
+    const insertedNodeId = createInsertedNodeId("figma");
+    const content = appendFigmaAssetMarkup(base, args, insertedNodeId);
     const now = new Date().toISOString();
     await db
       .update(schema.designFiles)
@@ -223,6 +233,8 @@ export default defineAction({
       fileId: file.id,
       filename: file.filename,
       inserted: true,
+      insertedNodeId,
+      insertedSelector: `[data-agent-native-node-id="${insertedNodeId}"]`,
       source: "figma",
       fileKey: args.fileKey,
       nodeId: args.nodeId ?? null,

package/corpus/templates/design/app/components/design/DesignCanvas.tsx

@@ -1775,6 +1775,11 @@ export function DesignCanvas({
   // explicit viewport width (e.g. 390 / 768 / 1280 side-by-side breakpoints).
   const resolvedWidth =
     previewWidthPx != null ? `${previewWidthPx}px` : iframeWidth;
+  const focusScrollSurface = useCallback(() => {
+    const surface = scrollContainerRef.current;
+    if (!surface || document.activeElement === surface) return;
+    surface.focus({ preventScroll: true });
+  }, []);
 
   // Wrap the iframe in a positioned container so DrawOverlay /
   // CanvasCommentPins can absolutely-position themselves on top of the
@@ -1901,6 +1906,9 @@ export function DesignCanvas({
       return (
         <div
           ref={scrollContainerRef}
+          tabIndex={-1}
+          onPointerEnter={focusScrollSurface}
+          onMouseEnter={focusScrollSurface}
           className="relative h-full w-full overflow-hidden"
         >
           {iframeElement}
@@ -1915,6 +1923,9 @@ export function DesignCanvas({
     return (
       <div
         ref={scrollContainerRef}
+        tabIndex={-1}
+        onPointerEnter={focusScrollSurface}
+        onMouseEnter={focusScrollSurface}
         className="relative h-full w-full overflow-hidden"
         style={{
           width: embeddedFrame.displayWidth,
@@ -1945,6 +1956,9 @@ export function DesignCanvas({
   return (
     <div
       ref={scrollContainerRef}
+      tabIndex={-1}
+      onPointerEnter={focusScrollSurface}
+      onMouseEnter={focusScrollSurface}
       className="relative flex-1 h-full overflow-auto"
     >
       {/* Canvas area. "none" mode fills the canvas (responsive preview);

package/corpus/templates/design/app/components/design/DesignExtensionsPanel.tsx

@@ -108,6 +108,12 @@ export interface DesignExtensionSlotContext extends Record<string, unknown> {
     content: string,
     updatedAt?: string,
   ) => void;
+  onAssetInserted?: (selection: {
+    fileId?: string;
+    nodeId?: string;
+    selector?: string;
+    title?: string;
+  }) => void;
 }
 
 interface DesignExtensionsPanelProps {
@@ -301,6 +307,7 @@ interface FirstPartyRowProps {
 
 function FirstPartyExtRow({
   label,
+  description,
   icon,
   badge,
   isOpen,
@@ -321,14 +328,14 @@ function FirstPartyExtRow({
           <span className="block truncate text-sm font-medium leading-tight text-foreground">
             {label}
           </span>
-          <span className="mt-0.5 block truncate text-xs leading-none text-muted-foreground">
-            <span className="truncate">Built-in</span>
+          <span className="mt-0.5 line-clamp-1 text-xs leading-snug text-muted-foreground">
+            {description}
           </span>
         </span>
         {badge}
       </button>
       {isOpen && (
-        <div className="mb-2 ml-[3.75rem] overflow-hidden rounded-md border border-border/70 bg-background/70">
+        <div className="mb-2 mt-1 overflow-hidden rounded-md border border-border/70 bg-background/70">
           {children}
         </div>
       )}
@@ -348,6 +355,12 @@ function ToolFilterMenu<T extends string>({
   onChange: (value: T) => void;
 }) {
   const selected = options.find((option) => option.value === value);
+  const triggerLabel =
+    value === "all"
+      ? label === "Category"
+        ? "All categories"
+        : `All ${label.toLowerCase()}s`
+      : (selected?.label ?? label);
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -358,7 +371,7 @@ function ToolFilterMenu<T extends string>({
           className="h-8 cursor-pointer gap-1.5 rounded-md bg-transparent px-2.5 text-sm font-medium"
         >
           <IconAdjustmentsHorizontal className="size-4 text-muted-foreground" />
-          <span>{selected?.label ?? label}</span>
+          <span>{triggerLabel}</span>
           <IconChevronDown className="size-3.5 text-muted-foreground" />
         </Button>
       </DropdownMenuTrigger>
@@ -463,6 +476,25 @@ export function AssetLibraryPanel({ context }: AssetLibraryPanelProps) {
       : undefined,
     { enabled: Boolean(figmaRequest) },
   );
+  const notifyAssetInserted = useCallback(
+    (result: unknown, title: string) => {
+      if (!result || typeof result !== "object") return;
+      const row = result as Record<string, unknown>;
+      context.onAssetInserted?.({
+        fileId: typeof row.fileId === "string" ? row.fileId : undefined,
+        nodeId:
+          typeof row.insertedNodeId === "string"
+            ? row.insertedNodeId
+            : undefined,
+        selector:
+          typeof row.insertedSelector === "string"
+            ? row.insertedSelector
+            : undefined,
+        title,
+      });
+    },
+    [context],
+  );
 
   const handleReady = useCallback(
     (_payload: unknown, _event: MessageEvent, ref: EmbeddedAppRef) => {
@@ -508,7 +540,8 @@ export function AssetLibraryPanel({ context }: AssetLibraryPanelProps) {
           fileId: context.activeFileId || undefined,
         },
         {
-          onSuccess: () => {
+          onSuccess: (result) => {
+            notifyAssetInserted(result, title ?? altText ?? "Asset");
             toast.success("Asset inserted into design.");
           },
           onError: () => {
@@ -517,7 +550,7 @@ export function AssetLibraryPanel({ context }: AssetLibraryPanelProps) {
         },
       );
     },
-    [context.designId, context.activeFileId, insertAsset],
+    [context.designId, context.activeFileId, insertAsset, notifyAssetInserted],
   );
 
   const handleInsertNativeAsset = (asset: DesignNativeAsset) => {
@@ -528,7 +561,8 @@ export function AssetLibraryPanel({ context }: AssetLibraryPanelProps) {
         fileId: context.activeFileId || undefined,
       },
       {
-        onSuccess: () => {
+        onSuccess: (result) => {
+          notifyAssetInserted(result, asset.title);
           toast.success(`${asset.title} inserted into design.`);
         },
         onError: (error) => {
@@ -566,7 +600,8 @@ export function AssetLibraryPanel({ context }: AssetLibraryPanelProps) {
         fileId: context.activeFileId || undefined,
       },
       {
-        onSuccess: () => {
+        onSuccess: (result) => {
+          notifyAssetInserted(result, asset.name);
           toast.success("Figma asset inserted into design.");
         },
         onError: (error) => {
@@ -1267,6 +1302,11 @@ export function DesignExtensionsPanel({
     visibleFirstPartyRows.length > 0 ||
     visibleInstalls.length > 0 ||
     visibleInstallable.length > 0;
+  const showPluginsEmptyState =
+    !hasAnyVisibleTool &&
+    categoryFilter === "plugins" &&
+    !normalizedSearch &&
+    sourceFilter !== "built-in";
 
   return (
     <div className={cn("flex min-h-0 flex-1 flex-col", className)}>
@@ -1412,10 +1452,14 @@ export function DesignExtensionsPanel({
                   <IconSearch className="size-4 text-muted-foreground" />
                 </div>
                 <p className="text-sm font-medium text-foreground">
-                  No tools found
+                  {showPluginsEmptyState
+                    ? "No plugins installed"
+                    : "No tools found"}
                 </p>
                 <p className="mx-auto mt-1 max-w-52 text-xs leading-5 text-muted-foreground">
-                  Try another search or clear the filters.
+                  {showPluginsEmptyState
+                    ? "Create a plugin or clear the Category filter to browse built-in tools."
+                    : "Try another search or clear the filters."}
                 </p>
               </div>
             ) : null}

package/corpus/templates/design/app/components/design/EditPanel.tsx

@@ -3189,22 +3189,29 @@ function TypographyDetailsPopover({
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
-          aria-label={"Typography details" /* i18n-ignore design action */}
-          aria-pressed={open}
-          className={cn(
-            "h-6 min-w-6 cursor-pointer rounded-md text-muted-foreground hover:bg-[var(--design-editor-panel-raised-bg)] hover:text-foreground",
-            open &&
-              "bg-[var(--design-editor-accent-color)]/20 text-[var(--design-editor-accent-color)] hover:text-[var(--design-editor-accent-color)]",
-          )}
-        >
-          <IconLayoutSettings className="size-3.5" />
-        </Button>
-      </PopoverTrigger>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <PopoverTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              aria-label={"Typography details" /* i18n-ignore design action */}
+              aria-pressed={open}
+              className={cn(
+                "h-6 min-w-6 cursor-pointer rounded-md text-muted-foreground hover:bg-[var(--design-editor-panel-raised-bg)] hover:text-foreground",
+                open &&
+                  "bg-[var(--design-editor-accent-color)]/20 text-[var(--design-editor-accent-color)] hover:text-[var(--design-editor-accent-color)]",
+              )}
+            >
+              <IconLayoutSettings className="size-3.5" />
+            </Button>
+          </PopoverTrigger>
+        </TooltipTrigger>
+        <TooltipContent>
+          {"Typography details" /* i18n-ignore design action */}
+        </TooltipContent>
+      </Tooltip>
       <PopoverContent
         side="left"
         align="end"

package/corpus/templates/design/app/components/design/MultiScreenCanvas.tsx

@@ -4825,7 +4825,11 @@ export function MultiScreenCanvas({
       className="relative h-full w-full select-none overflow-hidden outline-none"
       onMouseDownCapture={handleMouseDown}
       onMouseMove={handleMouseMove}
-      style={{ cursor: surfaceCursor, touchAction: "none" }}
+      style={{
+        cursor: surfaceCursor,
+        overscrollBehavior: "none",
+        touchAction: "none",
+      }}
     >
       {showPixelGrid ? (
         <div
@@ -5769,6 +5773,7 @@ const Screen = memo(function Screen({
           onMouseEnter={() => updateDirectHover(true)}
           onMouseLeave={() => updateDirectHover(false)}
           style={{
+            width: labelInfoMaxWidth,
             maxWidth: labelInfoMaxWidth,
             transform: `translateY(-50%) scale(${chromeScale})`,
             transformOrigin: "left center",
@@ -5784,7 +5789,7 @@ const Screen = memo(function Screen({
           <span
             data-frame-title
             className={cn(
-              "min-w-0 truncate !text-[11px] font-medium",
+              "min-w-0 flex-1 truncate !text-[11px] font-medium",
               emphasized
                 ? "text-[var(--design-editor-accent-color)]"
                 : activeOrEmphasized

package/corpus/templates/design/app/components/design/inspector/InspectorAiActions.tsx

@@ -63,7 +63,8 @@ export function InspectorAiActions({
     routeSourceFile,
     designId,
   };
-  const disabled = !canEdit || !request.trim();
+  const copyDisabled = !request.trim();
+  const askDisabled = !canEdit || copyDisabled;
 
   return (
     <Collapsible open={open} onOpenChange={setOpen} className="w-full">
@@ -97,9 +98,12 @@ export function InspectorAiActions({
                 : t("designEditor.localSourceEdit.describeChange")
             }
             className="min-h-[64px] resize-none text-xs"
-            disabled={!canEdit}
             onKeyDown={(e) => {
-              if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && !disabled) {
+              if (
+                e.key === "Enter" &&
+                (e.metaKey || e.ctrlKey) &&
+                !askDisabled
+              ) {
                 e.preventDefault();
                 void sendEdit(args);
                 setRequest("");
@@ -112,7 +116,7 @@ export function InspectorAiActions({
               size="sm"
               variant="default"
               className="flex-1 gap-1.5 text-xs"
-              disabled={disabled}
+              disabled={askDisabled}
               onClick={() => {
                 void sendEdit(args);
                 setRequest("");
@@ -126,7 +130,7 @@ export function InspectorAiActions({
               size="sm"
               variant="outline"
               className="gap-1.5 text-xs"
-              disabled={disabled}
+              disabled={copyDisabled}
               onClick={() => {
                 void copyPrompt(args);
               }}

package/corpus/templates/design/app/components/layout/Header.tsx

@@ -1,6 +1,12 @@
-import { useActionQuery, useT } from "@agent-native/core/client";
+import {
+  requestAgentChatThreadOpen,
+  requestAgentTaskOpen,
+  useActionQuery,
+  useT,
+} from "@agent-native/core/client";
 import { AgentToggleButton } from "@agent-native/core/client";
 import { RunsTray } from "@agent-native/core/client/progress";
+import { useCallback } from "react";
 import { useLocation } from "react-router";
 
 import { useHeaderTitle, useHeaderActions } from "./HeaderActions";
@@ -12,6 +18,11 @@ const pageTitleKeys: Record<string, string> = {
   "/settings": "navigation.settings",
 };
 
+type HeaderAgentRun = {
+  title?: string;
+  metadata?: Record<string, unknown> | null;
+};
+
 function DesignTitle({ id }: { id: string }) {
   const { data } = useActionQuery<{ title?: string }>("get-design", { id });
   const title = data?.title ?? "Design";
@@ -42,6 +53,31 @@ function ResolvedTitle() {
 export function Header() {
   const title = useHeaderTitle();
   const actions = useHeaderActions();
+  const openRunThread = useCallback(
+    (threadId: string, run?: HeaderAgentRun) => {
+      const metadata = run?.metadata ?? {};
+      const parentThreadId =
+        typeof metadata.parentThreadId === "string"
+          ? metadata.parentThreadId.trim()
+          : "";
+      const isAgentTeam =
+        metadata.kind === "agent-team" || metadata.source === "agent-teams";
+      if (isAgentTeam && parentThreadId && parentThreadId !== threadId) {
+        requestAgentTaskOpen({
+          threadId,
+          parentThreadId,
+          description:
+            typeof metadata.description === "string"
+              ? metadata.description
+              : run?.title || "",
+          name: typeof metadata.name === "string" ? metadata.name : "",
+        });
+        return;
+      }
+      requestAgentChatThreadOpen({ threadId });
+    },
+    [],
+  );
 
   return (
     <header className="flex h-12 items-center gap-3 border-b border-border bg-background px-4 lg:px-6 shrink-0">
@@ -50,7 +86,7 @@ export function Header() {
       </div>
       <div className="flex items-center gap-2 shrink-0">
         {actions}
-        <RunsTray pollMs={1500} />
+        <RunsTray pollMs={1500} onOpenThread={openRunThread} />
         <AgentToggleButton />
       </div>
     </header>