@agent-native/core 0.84.25 → 0.84.27

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,7 @@
 import { 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 +13,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 +48,43 @@ function ResolvedTitle() {
 export function Header() {
   const title = useHeaderTitle();
   const actions = useHeaderActions();
+  const openRunThread = useCallback(
+    (threadId: string, run?: HeaderAgentRun) => {
+      window.dispatchEvent(
+        new CustomEvent("agent-panel:set-mode", {
+          detail: { mode: "chat" },
+        }),
+      );
+      window.dispatchEvent(new CustomEvent("agent-panel:open"));
+      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) {
+        window.dispatchEvent(
+          new CustomEvent("agent-task-open", {
+            detail: {
+              threadId,
+              parentThreadId,
+              description:
+                typeof metadata.description === "string"
+                  ? metadata.description
+                  : run?.title || "",
+              name: typeof metadata.name === "string" ? metadata.name : "",
+            },
+          }),
+        );
+        return;
+      }
+      window.dispatchEvent(
+        new CustomEvent("agent-chat:open-thread", { detail: { 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 +93,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>