@agent-native/core 0.82.0 → 0.84.0

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

@@ -144,7 +144,7 @@ function ShaderPreview({ descriptor, animated }: ShaderPreviewProps) {
 
 function ParamLabel({ children }: { children: React.ReactNode }) {
   return (
-    <span className="w-[5.5rem] shrink-0 truncate text-[11px] text-muted-foreground">
+    <span className="w-[5.5rem] shrink-0 truncate !text-[11px] text-muted-foreground">
       {children}
     </span>
   );
@@ -174,7 +174,7 @@ function ColorSwatch({ color, label, onChange }: ColorSwatchProps) {
       <TooltipTrigger asChild>
         {/* The label wraps the native color input so clicking the swatch opens the picker */}
         <label
-          className="flex h-6 min-w-0 cursor-pointer items-center gap-1.5 rounded px-1 text-[11px] text-muted-foreground transition-colors hover:bg-[var(--design-editor-control-bg)] hover:text-foreground focus-within:bg-[var(--design-editor-control-bg)]"
+          className="flex h-6 min-w-0 cursor-pointer items-center gap-1.5 rounded px-1 !text-[11px] text-muted-foreground transition-colors hover:bg-[var(--design-editor-control-bg)] hover:text-foreground focus-within:bg-[var(--design-editor-control-bg)]"
           title={label}
         >
           <span
@@ -232,12 +232,12 @@ function ParamRow({ paramDef, value, onChange }: ParamRowProps) {
       <div className="flex h-6 items-center gap-1.5">
         <ParamLabel>{label}</ParamLabel>
         <Select value={strVal} onValueChange={(v) => onChange(key, v)}>
-          <SelectTrigger className="h-6 flex-1 text-[11px]">
+          <SelectTrigger className="h-6 flex-1 !text-[11px]">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
             {(options ?? []).map((opt: string) => (
-              <SelectItem key={opt} value={opt} className="text-[11px]">
+              <SelectItem key={opt} value={opt} className="!text-[11px]">
                 {opt}
               </SelectItem>
             ))}
@@ -253,7 +253,10 @@ function ParamRow({ paramDef, value, onChange }: ParamRowProps) {
     const switchId = `shader-param-${key}`;
     return (
       <div className="flex h-6 items-center justify-between gap-1.5">
-        <Label htmlFor={switchId} className="text-[11px] text-muted-foreground">
+        <Label
+          htmlFor={switchId}
+          className="!text-[11px] text-muted-foreground"
+        >
           {label}
         </Label>
         <Switch
@@ -288,7 +291,7 @@ function ParamRow({ paramDef, value, onChange }: ParamRowProps) {
     return (
       <div className="flex flex-col gap-1">
         {/* Section label sits at the top of the stop list */}
-        <span className="text-[11px] text-muted-foreground">{label}</span>
+        <span className="!text-[11px] text-muted-foreground">{label}</span>
         {/* Color stop rows — each a swatch + hex + remove button */}
         <div className="flex flex-col gap-0.5">
           {arrVal.map((color, i) => {
@@ -333,7 +336,7 @@ function ParamRow({ paramDef, value, onChange }: ParamRowProps) {
           {arrVal.length < limit && (
             <button
               type="button"
-              className="flex h-6 items-center gap-1.5 rounded px-1 text-[11px] text-muted-foreground hover:bg-[var(--design-editor-control-bg)] hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+              className="flex h-6 items-center gap-1.5 rounded px-1 !text-[11px] text-muted-foreground hover:bg-[var(--design-editor-control-bg)] hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
               onClick={() => onChange(key, [...arrVal, "#ffffff"])}
             >
               <span className="flex size-4 shrink-0 items-center justify-center rounded-[3px] border border-dashed border-muted-foreground/50 text-[10px]">
@@ -469,7 +472,7 @@ export function ShaderControls({
           <button
             type="button"
             onClick={onBack}
-            className="flex h-6 items-center gap-1 rounded px-1 text-[11px] text-muted-foreground hover:bg-[var(--design-editor-control-bg)] hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className="flex h-6 items-center gap-1 rounded px-1 !text-[11px] text-muted-foreground hover:bg-[var(--design-editor-control-bg)] hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
           >
             <IconArrowLeft className="size-3" />
             <span>{"Back to presets" /* i18n-ignore shader nav */}</span>
@@ -481,12 +484,12 @@ export function ShaderControls({
       <div className="flex h-6 items-center gap-1.5 px-3">
         <ParamLabel>{"Preset" /* i18n-ignore */}</ParamLabel>
         <Select value={descriptor.preset} onValueChange={handlePresetChange}>
-          <SelectTrigger className="h-6 flex-1 text-[11px]">
+          <SelectTrigger className="h-6 flex-1 !text-[11px]">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
             {(SHADER_PRESETS as readonly ShaderPresetDef[]).map((p) => (
-              <SelectItem key={p.name} value={p.name} className="text-[11px]">
+              <SelectItem key={p.name} value={p.name} className="!text-[11px]">
                 {p.label}
               </SelectItem>
             ))}
@@ -499,7 +502,7 @@ export function ShaderControls({
         <Label
           htmlFor={animateSwitchId}
           className={cn(
-            "text-[11px] text-muted-foreground",
+            "!text-[11px] text-muted-foreground",
             reducedMotion && "opacity-50",
           )}
         >

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

@@ -265,7 +265,7 @@ export function ShaderFillsPanel({
           >
             <IconArrowLeft className="size-3.5" />
           </button>
-          <span className="flex-1 truncate text-[11px] font-semibold text-foreground">
+          <span className="flex-1 truncate !text-[11px] font-semibold text-foreground">
             {preset?.label ?? active.preset}
           </span>
           <button
@@ -292,7 +292,7 @@ export function ShaderFillsPanel({
     <div className="flex flex-col">
       {/* Header: "Shader fills" title + + button + × button */}
       <div className="flex h-6 items-center gap-1 px-3">
-        <span className="flex-1 truncate text-[11px] font-semibold text-foreground">
+        <span className="flex-1 truncate !text-[11px] font-semibold text-foreground">
           {"Shader fills" /* i18n-ignore design panel title */}
         </span>
         <Tooltip>
@@ -330,7 +330,7 @@ export function ShaderFillsPanel({
             disabled={disabled}
             placeholder={"Search" /* i18n-ignore */}
             aria-label={"Search shaders" /* i18n-ignore */}
-            className="h-full min-w-0 flex-1 border-0 bg-transparent p-0 text-[11px] shadow-none focus-visible:ring-0"
+            className="h-full min-w-0 flex-1 border-0 bg-transparent p-0 !text-[11px] shadow-none focus-visible:ring-0 md:!text-[11px]"
             onChange={(event) => setSearch(event.target.value)}
           />
           {search && (
@@ -387,7 +387,7 @@ export function ShaderFillsPanel({
             </p>
           )}
           {filtered.length === 0 ? (
-            <p className="py-4 text-center text-[11px] text-muted-foreground">
+            <p className="py-4 text-center !text-[11px] text-muted-foreground">
               {"No shaders match your search" /* i18n-ignore */}
             </p>
           ) : (

package/corpus/templates/design/app/components/design/inspector/index.ts

@@ -21,7 +21,9 @@ export {
   type SizingFieldProps,
 } from "./AutoLayoutMatrix";
 export {
+  ConstraintsPreview,
   ConstraintsWidget,
+  type ConstraintsPreviewProps,
   type ConstraintsValue,
   type ConstraintsWidgetLabels,
   type ConstraintsWidgetProps,

package/corpus/templates/design/app/components/design/types.ts

@@ -1,5 +1,6 @@
 export interface ElementInfo {
   tagName: string;
+  componentName?: string;
   id?: string;
   sourceId?: string;
   selector?: string;
@@ -8,9 +9,18 @@ export interface ElementInfo {
   boundingRect: { x: number; y: number; width: number; height: number };
   textContent?: string;
   htmlContent?: string;
+  /** Direct element children; text nodes are ignored. */
+  childElementCount?: number;
   isFlexChild: boolean;
   isFlexContainer: boolean;
+  isGridContainer?: boolean;
   parentDisplay?: string;
+  parentAutoLayout?: {
+    display?: string;
+    selector?: string;
+    sourceId?: string;
+    boundingRect: { x: number; y: number; width: number; height: number };
+  };
   parentLayout?: {
     display?: string;
     flexDirection?: string;
@@ -34,6 +44,15 @@ export interface ElementInfo {
   confidence?: number;
 }
 
+export interface ElementSelectionIntent {
+  additive?: boolean;
+  range?: boolean;
+  source?: "pointer" | "keyboard" | "marquee";
+  shiftKey?: boolean;
+  metaKey?: boolean;
+  ctrlKey?: boolean;
+}
+
 export type DeviceFrameType = "none" | "desktop" | "tablet" | "mobile";
 
 export const DEVICE_FRAME_VIEWPORTS = {

package/corpus/templates/design/app/components/editor/PromptDialog.tsx

@@ -16,13 +16,13 @@ import {
   IconX,
 } from "@tabler/icons-react";
 import { useState, useEffect, useCallback, useRef } from "react";
-import { createPortal } from "react-dom";
 import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import {
   Popover,
+  PopoverAnchor,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
@@ -317,6 +317,17 @@ export interface PromptDesignSystemOption {
   isDefault?: boolean;
 }
 
+function isNestedPromptPopoverTarget(target: EventTarget | null) {
+  return (
+    target instanceof Element &&
+    Boolean(
+      target.closest(
+        "[data-agent-native-composer-popover],[data-assets-picker-dialog],[data-agent-native-prompt-select]",
+      ),
+    )
+  );
+}
+
 export default function PromptPopover({
   open,
   onOpenChange,
@@ -339,7 +350,6 @@ export default function PromptPopover({
   const [pickedAssets, setPickedAssets] = useState<UploadedFile[]>([]);
   const [selectedUploadFiles, setSelectedUploadFiles] = useState<File[]>([]);
   const [assetsPickerOpen, setAssetsPickerOpen] = useState(false);
-  const panelRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (open) return;
@@ -348,68 +358,6 @@ export default function PromptPopover({
     setSelectedUploadFiles([]);
   }, [open]);
 
-  // Position the popover after render so we can measure its actual size
-  useEffect(() => {
-    if (!open || !panelRef.current) return;
-    const panel = panelRef.current;
-    const MARGIN = 12;
-
-    if (centered || !anchorRef?.current) {
-      panel.style.top = "50%";
-      panel.style.left = "50%";
-      panel.style.transform = "translate(-50%, -50%)";
-      return;
-    }
-
-    const anchor = anchorRef.current.getBoundingClientRect();
-    const panelRect = panel.getBoundingClientRect();
-    const vw = window.innerWidth;
-    const vh = window.innerHeight;
-
-    let top = anchor.bottom + MARGIN;
-    if (top + panelRect.height > vh - MARGIN) {
-      top = Math.max(MARGIN, anchor.top - panelRect.height - MARGIN);
-    }
-
-    const anchorCenterX = anchor.left + anchor.width / 2;
-    let left = anchorCenterX - panelRect.width / 2;
-    if (left + panelRect.width > vw - MARGIN) {
-      left = vw - panelRect.width - MARGIN;
-    }
-    if (left < MARGIN) left = MARGIN;
-
-    panel.style.top = top + "px";
-    panel.style.left = left + "px";
-    panel.style.right = "auto";
-    panel.style.transform = "none";
-  }, [open, centered, anchorRef]);
-
-  // Close on outside click / escape
-  useEffect(() => {
-    if (!open) return;
-    const handleClick = (e: MouseEvent) => {
-      const target = e.target as Element | null;
-      if (target?.closest("[data-agent-native-composer-popover]")) return;
-      if (target?.closest("[data-assets-picker-dialog]")) return;
-      if (
-        panelRef.current &&
-        !panelRef.current.contains(e.target as Node) &&
-        (!anchorRef?.current || !anchorRef.current.contains(e.target as Node))
-      ) {
-        onOpenChange(false);
-      }
-    };
-    const handleKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape" && !assetsPickerOpen) onOpenChange(false);
-    };
-    document.addEventListener("mousedown", handleClick);
-    document.addEventListener("keydown", handleKey);
-    return () => {
-      document.removeEventListener("mousedown", handleClick);
-      document.removeEventListener("keydown", handleKey);
-    };
-  }, [assetsPickerOpen, open, onOpenChange, anchorRef]);
-
   const uploadFiles = useCallback(
     async (files: File[]): Promise<UploadedFile[]> => {
       if (files.length === 0) return [];
@@ -533,20 +481,57 @@ export default function PromptPopover({
     );
   }, []);
 
-  if (!open) return null;
+  const handlePopoverOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (!nextOpen && assetsPickerOpen) return;
+      onOpenChange(nextOpen);
+    },
+    [assetsPickerOpen, onOpenChange],
+  );
+
+  const hasVirtualAnchor = !centered && Boolean(anchorRef?.current);
+  const virtualAnchorRef = anchorRef as React.RefObject<{
+    getBoundingClientRect: () => DOMRect;
+  }>;
 
-  const popover = (
-    <>
-      {centered && (
+  return (
+    <Popover open={open} onOpenChange={handlePopoverOpenChange}>
+      {open && centered && (
         <div
-          className="fixed inset-0 bg-black/40 z-[199]"
+          className="fixed inset-0 z-[199] bg-black/40"
           onClick={() => onOpenChange(false)}
         />
       )}
-      <div
-        ref={panelRef}
-        className="fixed z-[200] w-[min(420px,calc(100vw-24px))] rounded-xl border border-border bg-popover shadow-2xl shadow-black/60"
-        style={{ top: 0, left: 0, visibility: "visible" }}
+      {hasVirtualAnchor ? (
+        <PopoverAnchor virtualRef={virtualAnchorRef} />
+      ) : (
+        <PopoverAnchor asChild>
+          <span
+            aria-hidden="true"
+            className={
+              centered
+                ? "fixed left-1/2 top-1/2 size-px"
+                : "fixed left-3 top-3 size-px"
+            }
+          />
+        </PopoverAnchor>
+      )}
+      <PopoverContent
+        side="bottom"
+        align="center"
+        sideOffset={12}
+        collisionPadding={12}
+        onCloseAutoFocus={(event) => event.preventDefault()}
+        onEscapeKeyDown={(event) => {
+          if (assetsPickerOpen) event.preventDefault();
+        }}
+        onInteractOutside={(event) => {
+          if (isNestedPromptPopoverTarget(event.target)) {
+            event.preventDefault();
+          }
+        }}
+        data-agent-native-prompt-popover
+        className="z-[200] w-[min(420px,calc(100vw-24px))] rounded-xl border-border p-0 shadow-2xl shadow-black/60"
       >
         <div className="px-3.5 pt-3 pb-2">
           <span className="text-sm font-medium text-foreground/90">
@@ -588,7 +573,7 @@ export default function PromptPopover({
                   <SelectTrigger className="h-8 min-w-0 flex-1 text-xs">
                     <SelectValue placeholder={t("promptDialog.designSystem")} />
                   </SelectTrigger>
-                  <SelectContent>
+                  <SelectContent data-agent-native-prompt-select>
                     <SelectItem value="none" className="text-xs">
                       {t("promptDialog.noDesignSystem")}
                     </SelectItem>
@@ -688,11 +673,9 @@ export default function PromptPopover({
           onReady={handleAssetsPickerReady}
           onMessage={handleAssetsPickerMessage}
         />
-      </div>
-    </>
+      </PopoverContent>
+    </Popover>
   );
-
-  return createPortal(popover, document.body);
 }
 
 function PromptAttachmentMenu({

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

@@ -7,7 +7,6 @@ import { useHeaderTitle, useHeaderActions } from "./HeaderActions";
 
 const pageTitleKeys: Record<string, string> = {
   "/": "navigation.designs",
-  "/templates": "navigation.templates",
   "/design-systems": "navigation.designSystems",
   "/design-systems/setup": "navigation.setupDesignSystem",
   "/settings": "navigation.settings",

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

@@ -18,6 +18,7 @@ import {
 import { useLocation } from "react-router";
 
 import { useNavigationState } from "@/hooks/use-navigation-state";
+import { DESIGN_CHAT_STORAGE_KEY } from "@/lib/agent-chat";
 import { cn } from "@/lib/utils";
 
 import { Header } from "./Header";
@@ -61,8 +62,7 @@ export function Layout({ children }: LayoutProps) {
   // Bind chat to the currently-open design. Same pattern as slides — the
   // route is `/design/:id` for the editor and `/present/:id` for preview
   // (which we already short-circuit as BARE). Anywhere else (list,
-  // design-systems, settings, templates) leaves scope null so general
-  // chats keep working.
+  // design-systems, settings) leaves scope null so general chats keep working.
   const designScope = useMemo(() => {
     const match = location.pathname.match(/^\/design\/([^/]+)/);
     const designId = match?.[1];
@@ -140,6 +140,7 @@ export function Layout({ children }: LayoutProps) {
       >
         <AgentSidebar
           position="right"
+          storageKey={DESIGN_CHAT_STORAGE_KEY}
           emptyStateText={t("chat.emptyState")}
           suggestions={[
             t("chat.suggestionLandingPage"),

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

@@ -12,7 +12,6 @@ import {
   IconSettings,
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
-  IconTemplate,
 } from "@tabler/icons-react";
 import { useEffect, useState } from "react";
 import { Link, useLocation } from "react-router";
@@ -27,7 +26,6 @@ import { cn } from "@/lib/utils";
 
 const navItems = [
   { icon: IconPencil, labelKey: "navigation.designs", href: "/" },
-  { icon: IconTemplate, labelKey: "navigation.templates", href: "/templates" },
   {
     icon: IconPalette,
     labelKey: "navigation.designSystems",

package/corpus/templates/design/app/components/visual-editor/CanvasCommentPins.tsx

@@ -1,4 +1,4 @@
-import { sendToAgentChat, useT } from "@agent-native/core/client";
+import { useT } from "@agent-native/core/client";
 import {
   IconAlertTriangle,
   IconBolt,
@@ -17,6 +17,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { sendToDesignAgentChat } from "@/lib/agent-chat";
 import { cn } from "@/lib/utils";
 
 export interface CanvasPin {
@@ -512,11 +513,11 @@ export function CanvasCommentPins({
       : buildPinLines(targetPins[0]!).join("\n");
 
     try {
-      // Use `sendToAgentChat` (not the shared `agentChat.submit`) so the
+      // Use the client chat bridge (not the shared `agentChat.submit`) so the
       // request routes correctly when design is embedded in Builder/Frame
       // and so the agent sidebar is reliably opened via the `agent-panel:open`
       // custom event even if the user has it collapsed.
-      sendToAgentChat({
+      sendToDesignAgentChat({
         message,
         submit: true,
         openSidebar: true,
@@ -635,7 +636,7 @@ export function CanvasCommentPins({
           className="fixed top-16 left-1/2 -translate-x-1/2 z-50 flex items-center gap-2 rounded-full border border-border bg-popover px-3 py-1.5 shadow-lg pointer-events-none"
         >
           <IconMessage className="w-3.5 h-3.5 text-[#609FF8]" />
-          <span className="text-[11px] text-foreground">
+          <span className="!text-[11px] text-foreground">
             {t("visualEditor.clickToDropCommentPin")}
           </span>
           <span className="text-[10px] text-muted-foreground ml-1">

package/corpus/templates/design/app/components/visual-editor/DrawOverlay.tsx

@@ -603,7 +603,7 @@ export function DrawOverlay({
       <Button
         size="sm"
         data-testid="draw-send"
-        className="h-7 gap-1 px-3 text-[11px] cursor-pointer"
+        className="h-7 gap-1 px-3 !text-[11px] cursor-pointer"
         onClick={send}
         disabled={!hasContent}
       >

package/corpus/templates/design/app/components/visual-editor/SaveStatusIndicator.tsx

@@ -29,7 +29,7 @@ export function SaveStatusIndicator({
           <div
             data-save-status="offline"
             className={cn(
-              "flex items-center gap-1 text-[11px] text-amber-500",
+              "flex items-center gap-1 !text-[11px] text-amber-500",
               className,
             )}
           >
@@ -51,7 +51,7 @@ export function SaveStatusIndicator({
       <span
         data-save-status="saving"
         className={cn(
-          "animate-pulse text-[11px] text-muted-foreground",
+          "animate-pulse !text-[11px] text-muted-foreground",
           className,
         )}
       >

package/corpus/templates/design/app/global.css

@@ -42,6 +42,20 @@
     hsl(213 91% 67%) 14%,
     transparent
   );
+  --design-editor-component-color: hsl(263 84% 64%);
+  --design-editor-component-hover-color: hsl(263 72% 56%);
+  --design-editor-component-selection-color: color-mix(
+    in srgb,
+    hsl(263 84% 64%) 16%,
+    transparent
+  );
+  --design-editor-component-selected-subtree-color: color-mix(
+    in srgb,
+    hsl(263 84% 64%) 10%,
+    transparent
+  );
+  --design-editor-component-strong-color: var(--design-editor-component-color);
+  --design-editor-component-contrast-color: #ffffff;
   --design-editor-active-row-color: color-mix(
     in srgb,
     hsl(0 0% 15%) 8%,
@@ -71,6 +85,11 @@
   --design-editor-control-border: hsl(var(--border));
   --design-editor-canvas-bg: hsl(0 0% 92%);
   --design-editor-skeleton-canvas-bg: hsl(0 0% 92%);
+  --design-editor-skeleton-panel-ghost-bg: color-mix(
+    in srgb,
+    hsl(var(--foreground)) 6%,
+    transparent
+  );
 }
 
 .dark {
@@ -109,6 +128,20 @@
     hsl(213 91% 67%) 24%,
     transparent
   );
+  --design-editor-component-color: hsl(263 88% 74%);
+  --design-editor-component-hover-color: hsl(263 82% 68%);
+  --design-editor-component-selection-color: color-mix(
+    in srgb,
+    hsl(263 88% 74%) 28%,
+    transparent
+  );
+  --design-editor-component-selected-subtree-color: color-mix(
+    in srgb,
+    hsl(263 88% 74%) 18%,
+    transparent
+  );
+  --design-editor-component-strong-color: var(--design-editor-component-color);
+  --design-editor-component-contrast-color: #ffffff;
   --design-editor-active-row-color: hsl(0 0% 20%);
   --design-editor-layer-hover-color: color-mix(
     in srgb,
@@ -270,6 +303,29 @@
   animation: none !important;
 }
 
+.design-motion-dock-space {
+  --design-motion-dock-duration: 200ms;
+  --design-motion-dock-easing: ease-out;
+  transition: height var(--design-motion-dock-duration)
+    var(--design-motion-dock-easing);
+}
+
+.design-motion-dock {
+  transition:
+    border-color var(--design-motion-dock-duration)
+      var(--design-motion-dock-easing),
+    transform var(--design-motion-dock-duration)
+      var(--design-motion-dock-easing);
+}
+
+.design-motion-dock-space.design-motion-dock-resizing .design-motion-dock {
+  transition-duration: 0ms;
+}
+
+.design-motion-dock-space.design-motion-dock-resizing {
+  transition-duration: 0ms;
+}
+
 .dark .design-editor-app-menu-content {
   box-shadow: 0 12px 28px rgb(0 0 0 / 0.34);
 }

package/corpus/templates/design/app/hooks/use-agent-generating.ts

@@ -1,9 +1,8 @@
-import {
-  sendToAgentChat,
-  type AgentChatMessage,
-} from "@agent-native/core/client";
+import type { AgentChatMessage } from "@agent-native/core/client";
 import { useCallback, useEffect, useRef, useState } from "react";
 
+import { sendToDesignAgentChat } from "@/lib/agent-chat";
+
 // This is only a lost-signal recovery guard. Large design prompts can
 // legitimately take several minutes, so avoid treating normal latency as
 // failure.
@@ -136,7 +135,7 @@ export function useAgentGenerating(options: UseAgentGeneratingOptions = {}) {
       context: string,
       options?: Omit<AgentChatMessage, "message" | "context">,
     ) => {
-      const tabId = sendToAgentChat({
+      const tabId = sendToDesignAgentChat({
         ...options,
         message,
         context,

package/corpus/templates/design/app/hooks/use-navigation-state.ts

@@ -18,6 +18,7 @@ export interface NavigationState {
   screenId?: string;
   filename?: string;
   screen?: string;
+  selection?: string;
   zoom?: number;
   tool?: string;
   path?: string;
@@ -52,6 +53,7 @@ export interface DesignEditorCommand {
   screenId?: string;
   filename?: string;
   screen?: string;
+  selection?: string;
   zoom?: number;
   tool?: string;
   path?: string;
@@ -117,6 +119,7 @@ export function editorPathFromCommand(cmd: NavigationState): string | null {
   if (leftPanel) params.set("panel", leftPanel);
   const screen = cmd.fileId ?? cmd.screenId ?? cmd.filename ?? cmd.screen;
   if (screen) params.set("screen", screen);
+  if (cmd.selection) params.set("selection", cmd.selection);
   if (typeof cmd.zoom === "number" && Number.isFinite(cmd.zoom)) {
     params.set("zoom", String(cmd.zoom));
   } else if (editorView === "single") {
@@ -151,6 +154,7 @@ export function editorCommandFromNavigate(
   if (cmd.screenId) command.screenId = cmd.screenId;
   if (cmd.filename) command.filename = cmd.filename;
   if (cmd.screen) command.screen = cmd.screen;
+  if (cmd.selection) command.selection = cmd.selection;
   if (typeof cmd.zoom === "number" && Number.isFinite(cmd.zoom)) {
     command.zoom = cmd.zoom;
   } else if (editorView === "single") {
@@ -186,6 +190,8 @@ export function useNavigationState(enabled = true) {
         if (fileId) state.fileId = fileId;
         const filename = searchParams.get("filename");
         if (filename) state.filename = filename;
+        const selection = searchParams.get("selection");
+        if (selection) state.selection = selection;
         const rawZoom = searchParams.get("zoom");
         if (rawZoom !== null) {
           const zoom = Number(rawZoom);
@@ -200,11 +206,6 @@ export function useNavigationState(enabled = true) {
       } else if (pathname.startsWith("/present/")) {
         state.view = "present";
         state.designId = params.id;
-      } else if (
-        pathname.startsWith("/templates") ||
-        pathname.startsWith("/examples")
-      ) {
-        state.view = "templates";
       } else if (pathname.startsWith("/settings")) {
         state.view = "settings";
       }
@@ -221,8 +222,6 @@ export function useNavigationState(enabled = true) {
       }
       if (cmd.view === "present" && cmd.designId)
         return `/present/${cmd.designId}`;
-      if (cmd.view === "templates" || cmd.view === "examples")
-        return "/templates";
       if (cmd.view === "settings") return "/settings";
       return "/";
     },