@agent-native/core 0.80.8 → 0.80.10

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

@@ -4,9 +4,9 @@ import {
   useId,
   useRef,
   useState,
-  type ComponentType,
   type KeyboardEvent,
   type PointerEvent,
+  type ReactNode,
 } from "react";
 
 import { Input } from "@/components/ui/input";
@@ -26,7 +26,7 @@ import {
   type ScrubExpressionOptions,
 } from "./scrub-input-utils";
 
-type ScrubInputIcon = ComponentType<{ className?: string }>;
+type ScrubInputIcon = (props: { className?: string }) => ReactNode;
 
 export interface ScrubInputChangeMeta {
   source: "commit" | "keyboard" | "scrub";
@@ -39,13 +39,14 @@ export interface ScrubInputProps extends ScrubExpressionOptions {
   onChange: (value: number, meta: ScrubInputChangeMeta) => void;
   id?: string;
   step?: number;
-  icon?: ScrubInputIcon;
+  icon?: ScrubInputIcon | null;
   disabled?: boolean;
   placeholder?: string;
   className?: string;
   inputClassName?: string;
   labelClassName?: string;
   ariaLabel?: string;
+  tooltipLabel?: string;
 }
 
 export function ScrubInput({
@@ -65,12 +66,17 @@ export function ScrubInput({
   inputClassName,
   labelClassName,
   ariaLabel,
+  tooltipLabel,
 }: ScrubInputProps) {
   const generatedId = useId();
   const inputId = id ?? generatedId;
   const [draft, setDraft] = useState(() =>
     formatScrubValue(value, { unit, precision }),
   );
+  // Track the latest draft in a ref so commitDraft always reads the most
+  // up-to-date value even if the blur event fires before the React state
+  // update has been committed to the render tree (concurrent mode / batching).
+  const draftRef = useRef(draft);
   const [focused, setFocused] = useState(false);
   const [dragging, setDragging] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -83,27 +89,41 @@ export function ScrubInput({
   });
 
   useEffect(() => {
-    if (!focused) setDraft(formatScrubValue(value, { unit, precision }));
+    if (!focused) {
+      const formatted = formatScrubValue(value, { unit, precision });
+      draftRef.current = formatted;
+      setDraft(formatted);
+    }
   }, [focused, precision, unit, value]);
 
   const options = { unit, min, max, precision };
+  const resolvedTooltipLabel = tooltipLabel ?? ariaLabel ?? label;
 
   const setNextValue = (nextValue: number, meta: ScrubInputChangeMeta) => {
     const normalized = normalizeScrubNumber(nextValue, options);
     onChange(normalized, meta);
-    setDraft(formatScrubValue(normalized, options));
+    const formatted = formatScrubValue(normalized, options);
+    draftRef.current = formatted;
+    setDraft(formatted);
   };
 
   const commitDraft = () => {
-    const parsed = parseScrubExpression(draft, value, options);
+    // Always read from the ref so we use the latest typed value even if the
+    // React render with the updated draft state hasn't committed yet (e.g.
+    // when blur fires in the same synchronous batch as the last onChange).
+    const currentDraft = draftRef.current;
+    const parsed = parseScrubExpression(currentDraft, value, options);
     if (!parsed) {
-      setDraft(formatScrubValue(value, options));
+      const reverted = formatScrubValue(value, options);
+      draftRef.current = reverted;
+      setDraft(reverted);
       return;
     }
 
+    draftRef.current = parsed.normalized;
     setDraft(parsed.normalized);
     if (parsed.value !== value) {
-      onChange(parsed.value, { source: "commit", expression: draft });
+      onChange(parsed.value, { source: "commit", expression: currentDraft });
     }
   };
 
@@ -131,7 +151,9 @@ export function ScrubInput({
 
     if (event.key === "Escape") {
       event.preventDefault();
-      setDraft(formatScrubValue(value, options));
+      const reverted = formatScrubValue(value, options);
+      draftRef.current = reverted;
+      setDraft(reverted);
       skipNextBlurCommitRef.current = true;
       event.currentTarget.blur();
     }
@@ -202,11 +224,11 @@ export function ScrubInput({
               labelClassName,
             )}
           >
-            <Icon className="size-3 shrink-0" />
+            {Icon ? <Icon className="size-3 shrink-0" /> : null}
             <span className="truncate">{label}</span>
           </Label>
         </TooltipTrigger>
-        <TooltipContent>{`${label} — drag to scrub · ↑↓ step · Shift ×10 · ⌥ fine`}</TooltipContent>
+        <TooltipContent>{resolvedTooltipLabel}</TooltipContent>
       </Tooltip>
       <Input
         ref={inputRef}
@@ -228,7 +250,10 @@ export function ScrubInput({
           }
           commitDraft();
         }}
-        onChange={(event) => setDraft(event.target.value)}
+        onChange={(event) => {
+          draftRef.current = event.target.value;
+          setDraft(event.target.value);
+        }}
         onKeyDown={handleKeyDown}
         className={cn(
           // Compact design-editor: h-6, 11px tabular text, ring-1 with no offset.

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

@@ -60,6 +60,7 @@ export {
 } from "./GradientEditor";
 export {
   ImageFillControls,
+  imageFillToBackgroundStyles,
   imageFillToCss,
   parseImageFillCss,
   type ImageFillControlsProps,

package/corpus/templates/design/app/components/design/inspector/scrub-input-utils.ts

@@ -60,11 +60,18 @@ export function formatScrubValue(
   const normalized = normalizeScrubNumber(value, options);
   let numeric: string;
   if (Number.isFinite(options.precision) && options.precision! >= 0) {
-    const fixed = normalized.toFixed(options.precision);
-    // Only strip trailing zeros when there's a fractional part. Stripping a bare
-    // integer (precision 0, e.g. "100") would mangle it to "1" because the regex
-    // eats the integer's own trailing zeros.
-    numeric = fixed.includes(".") ? fixed.replace(/\.?0+$/, "") : fixed;
+    const fixed = normalized.toFixed(options.precision!);
+    if (options.unit) {
+      // For fields with units (px, %, °, etc.) collapse all trailing zeros
+      // including the decimal point: "12.30px" → "12.3px", "10.00px" → "10px".
+      // Leave integer strings alone; otherwise precision 0 turns "100" into "1".
+      numeric = fixed.includes(".") ? fixed.replace(/\.?0+$/, "") : fixed;
+    } else {
+      // For unitless fields (e.g. line-height), preserve at least one decimal
+      // digit so values like "2.0" stay "2.0" rather than collapsing to "2".
+      // Only strip redundant trailing zeros beyond the first decimal digit.
+      numeric = fixed.includes(".") ? fixed.replace(/(?<=\.\d)0+$/, "") : fixed;
+    }
   } else {
     numeric = String(normalized);
   }

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

@@ -36,6 +36,15 @@ export interface ElementInfo {
 
 export type DeviceFrameType = "none" | "desktop" | "tablet" | "mobile";
 
+export const DEVICE_FRAME_VIEWPORTS = {
+  desktop: { width: 1280, height: 800 },
+  tablet: { width: 768, height: 1024 },
+  mobile: { width: 390, height: 844 },
+} as const satisfies Record<
+  Exclude<DeviceFrameType, "none">,
+  { width: number; height: number }
+>;
+
 export interface ViewportTab {
   id: string;
   filename: string;

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

@@ -2,6 +2,7 @@ import {
   AgentSidebar,
   isEmbedAuthActive,
   getBrowserTabId,
+  useGuidedQuestionFlow,
   useSession,
   useT,
 } from "@agent-native/core/client";
@@ -49,9 +50,13 @@ export function Layout({ children }: LayoutProps) {
   const t = useT();
   const { session } = useSession();
   const hasSession = Boolean(session?.email);
+  const embedded = isEmbedAuthActive();
   useNavigationState(hasSession);
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const openMobileSidebar = useCallback(() => setMobileSidebarOpen(true), []);
+  const isDesignEditor = location.pathname.startsWith("/design/");
+  const showMobileTopBar = !isDesignEditor;
+  const browserTabId = getBrowserTabId();
 
   // Bind chat to the currently-open design. Same pattern as slides — the
   // route is `/design/:id` for the editor and `/present/:id` for preview
@@ -64,6 +69,21 @@ export function Layout({ children }: LayoutProps) {
     if (!designId) return null;
     return { type: "design" as const, id: designId };
   }, [location.pathname]);
+  const designQuestionStateKey = designScope
+    ? `show-questions:${designScope.id}`
+    : "show-questions";
+  const { questions: pendingDesignQuestions } = useGuidedQuestionFlow({
+    stateKey: designQuestionStateKey,
+    queryKey: [designQuestionStateKey],
+    browserTabId,
+    refetchInterval: embedded || !isDesignEditor || !hasSession ? false : 2000,
+  });
+  const designQuestionsWaitingSlot =
+    isDesignEditor && pendingDesignQuestions?.length ? (
+      <div className="px-4 pb-2 pt-1 text-xs text-muted-foreground">
+        {"Waiting for your answers in the canvas." /* i18n-ignore */}
+      </div>
+    ) : null;
 
   useEffect(() => {
     setMobileSidebarOpen(false);
@@ -77,9 +97,6 @@ export function Layout({ children }: LayoutProps) {
   const hideHeader = EDITOR_PREFIXES.some((p) =>
     location.pathname.startsWith(p),
   );
-  const isDesignEditor = location.pathname.startsWith("/design/");
-  const showMobileTopBar = !isDesignEditor;
-  const embedded = isEmbedAuthActive();
 
   if (embedded || (isDesignEditor && !hasSession)) {
     return (
@@ -114,7 +131,8 @@ export function Layout({ children }: LayoutProps) {
             t("chat.suggestionMobile"),
           ]}
           scope={designScope}
-          browserTabId={getBrowserTabId()}
+          browserTabId={browserTabId}
+          threadFooterSlot={designQuestionsWaitingSlot}
         >
           <div className="agent-layout-shell flex h-screen w-full overflow-hidden bg-background text-foreground">
             {!isDesignEditor && mobileSidebarOpen && (
@@ -154,7 +172,7 @@ export function Layout({ children }: LayoutProps) {
               {!hideHeader && <Header />}
               <main
                 className={cn(
-                  "flex-1",
+                  "agent-native-app-main flex-1",
                   isDesignEditor ? "overflow-hidden" : "overflow-y-auto",
                 )}
               >

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

@@ -453,7 +453,7 @@ export function DrawOverlay({
   const toolbar = (
     <div
       data-draw-toolbar
-      className="pointer-events-auto fixed bottom-4 left-1/2 z-[110] flex -translate-x-1/2 items-center gap-2 rounded-xl border border-border bg-popover px-3 py-2 shadow-2xl"
+      className="pointer-events-auto fixed bottom-20 left-1/2 z-[110] flex max-w-[calc(100vw-1rem)] -translate-x-1/2 flex-wrap items-center justify-center gap-2 rounded-xl border border-border bg-popover px-3 py-2 shadow-2xl"
     >
       {/* Color picker */}
       <div className="flex gap-1">

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

@@ -8,33 +8,33 @@
 
 :root {
   --background: 0 0% 100%;
-  --foreground: 220 10% 10%;
+  --foreground: 0 0% 10%;
   --card: 0 0% 100%;
-  --card-foreground: 220 10% 10%;
+  --card-foreground: 0 0% 10%;
   --popover: 0 0% 100%;
-  --popover-foreground: 220 10% 10%;
-  --primary: 220 10% 15%;
+  --popover-foreground: 0 0% 10%;
+  --primary: 0 0% 15%;
   --primary-foreground: 0 0% 100%;
-  --secondary: 220 10% 95%;
-  --secondary-foreground: 220 10% 15%;
-  --muted: 220 10% 95%;
-  --muted-foreground: 220 5% 45%;
-  --accent: 220 10% 95%;
-  --accent-foreground: 220 10% 15%;
+  --secondary: 0 0% 95%;
+  --secondary-foreground: 0 0% 15%;
+  --muted: 0 0% 95%;
+  --muted-foreground: 0 0% 45%;
+  --accent: 0 0% 95%;
+  --accent-foreground: 0 0% 15%;
   --destructive: 0 84% 60%;
   --destructive-foreground: 0 0% 98%;
-  --border: 220 10% 90%;
-  --input: 220 10% 90%;
-  --ring: 220 10% 40%;
+  --border: 0 0% 90%;
+  --input: 0 0% 90%;
+  --ring: 0 0% 40%;
   --radius: 0.5rem;
-  --sidebar-background: 220 10% 97%;
-  --sidebar-foreground: 220 5% 45%;
-  --sidebar-primary: 220 10% 15%;
+  --sidebar-background: 0 0% 97%;
+  --sidebar-foreground: 0 0% 45%;
+  --sidebar-primary: 0 0% 15%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 220 10% 95%;
-  --sidebar-accent-foreground: 220 10% 15%;
-  --sidebar-border: 220 10% 90%;
-  --sidebar-ring: 220 10% 40%;
+  --sidebar-accent: 0 0% 95%;
+  --sidebar-accent-foreground: 0 0% 15%;
+  --sidebar-border: 0 0% 90%;
+  --sidebar-ring: 0 0% 40%;
   --design-editor-accent-color: hsl(213 91% 67%);
   --design-editor-accent-hover-color: hsl(213 72% 56%);
   --design-editor-selection-color: color-mix(
@@ -44,12 +44,12 @@
   );
   --design-editor-active-row-color: color-mix(
     in srgb,
-    hsl(220 10% 15%) 8%,
+    hsl(0 0% 15%) 8%,
     transparent
   );
   --design-editor-layer-hover-color: color-mix(
     in srgb,
-    hsl(220 10% 15%) 6%,
+    hsl(0 0% 15%) 6%,
     transparent
   );
   --design-editor-selected-subtree-color: color-mix(
@@ -69,37 +69,38 @@
   --design-editor-panel-raised-bg: hsl(var(--secondary));
   --design-editor-control-bg: hsl(var(--muted));
   --design-editor-control-border: hsl(var(--border));
-  --design-editor-canvas-bg: hsl(220 10% 92%);
+  --design-editor-canvas-bg: hsl(0 0% 92%);
+  --design-editor-skeleton-canvas-bg: hsl(0 0% 92%);
 }
 
 .dark {
-  --background: 220 6% 6%;
+  --background: 0 0% 13%;
   --foreground: 0 0% 90%;
-  --card: 220 5% 13%;
+  --card: 0 0% 15%;
   --card-foreground: 0 0% 90%;
-  --popover: 220 6% 9%;
+  --popover: 0 0% 15%;
   --popover-foreground: 0 0% 90%;
   --primary: 0 0% 75%;
-  --primary-foreground: 220 6% 6%;
-  --secondary: 220 4% 12%;
+  --primary-foreground: 0 0% 10%;
+  --secondary: 0 0% 18%;
   --secondary-foreground: 0 0% 90%;
-  --muted: 220 4% 10%;
-  --muted-foreground: 220 4% 60%;
-  --accent: 220 5% 20%;
+  --muted: 0 0% 16%;
+  --muted-foreground: 0 0% 60%;
+  --accent: 0 0% 18%;
   --accent-foreground: 0 0% 96%;
   --destructive: 0 63% 51%;
   --destructive-foreground: 0 0% 98%;
-  --border: 220 4% 14%;
-  --input: 220 4% 14%;
+  --border: 0 0% 24%;
+  --input: 0 0% 24%;
   --ring: 0 0% 60%;
   --radius: 0.5rem;
-  --sidebar-background: 220 5% 13%;
-  --sidebar-foreground: 220 4% 60%;
+  --sidebar-background: 0 0% 10%;
+  --sidebar-foreground: 0 0% 60%;
   --sidebar-primary: 0 0% 75%;
-  --sidebar-primary-foreground: 220 6% 6%;
-  --sidebar-accent: 220 4% 10%;
+  --sidebar-primary-foreground: 0 0% 10%;
+  --sidebar-accent: 0 0% 16%;
   --sidebar-accent-foreground: 0 0% 90%;
-  --sidebar-border: 220 4% 10%;
+  --sidebar-border: 0 0% 20%;
   --sidebar-ring: 0 0% 60%;
   --design-editor-accent-color: hsl(213 91% 67%);
   --design-editor-accent-hover-color: hsl(213 72% 56%);
@@ -108,7 +109,7 @@
     hsl(213 91% 67%) 24%,
     transparent
   );
-  --design-editor-active-row-color: hsl(220 4% 20%);
+  --design-editor-active-row-color: hsl(0 0% 20%);
   --design-editor-layer-hover-color: color-mix(
     in srgb,
     hsl(0 0% 100%) 8%,
@@ -119,15 +120,16 @@
     hsl(213 91% 67%) 18%,
     transparent
   );
-  --design-editor-panel-divider-color: hsl(220 4% 22%);
+  --design-editor-panel-divider-color: hsl(0 0% 22%);
   --design-editor-accent-strong-color: var(--design-editor-accent-color);
   --design-editor-accent-contrast-color: #ffffff;
   --design-editor-measure-color: hsl(344 100% 63%);
-  --design-editor-panel-bg: hsl(220 5% 13%);
-  --design-editor-panel-raised-bg: hsl(220 4% 18%);
-  --design-editor-control-bg: hsl(220 4% 18%);
-  --design-editor-control-border: hsl(220 4% 24%);
-  --design-editor-canvas-bg: hsl(220 6% 6%);
+  --design-editor-panel-bg: hsl(0 0% 13%);
+  --design-editor-panel-raised-bg: hsl(0 0% 18%);
+  --design-editor-control-bg: hsl(0 0% 18%);
+  --design-editor-control-border: hsl(0 0% 24%);
+  --design-editor-canvas-bg: hsl(0 0% 10%);
+  --design-editor-skeleton-canvas-bg: hsl(0 0% 11%);
 }
 
 @layer base {
@@ -176,12 +178,38 @@
   background: hsl(var(--muted-foreground) / 0.4);
 }
 
+.design-editor-not-found-grid {
+  background-image:
+    linear-gradient(
+      var(--design-editor-panel-divider-color) 1px,
+      transparent 1px
+    ),
+    linear-gradient(
+      90deg,
+      var(--design-editor-panel-divider-color) 1px,
+      transparent 1px
+    );
+  background-size: 36px 36px;
+  -webkit-mask-image: radial-gradient(
+    circle at center,
+    black 0,
+    black 34%,
+    transparent 72%
+  );
+  mask-image: radial-gradient(
+    circle at center,
+    black 0,
+    black 34%,
+    transparent 72%
+  );
+}
+
 /* Design has a dense editor surface, so its side chrome needs more contrast
    than the shared shell defaults and a real divider in addition to shadow. */
 .agent-layout-shell,
 .agent-sidebar-shell {
-  --design-shell-chrome-bg: hsl(220 9% 93%);
-  --design-shell-divider: hsl(220 9% 79%);
+  --design-shell-chrome-bg: hsl(0 0% 93%);
+  --design-shell-divider: hsl(0 0% 79%);
   --agent-native-lower-surface: var(--design-shell-chrome-bg);
   --agent-native-raised-border: var(--design-shell-divider);
   --agent-native-raised-shadow-left: -1px 0 0 var(--design-shell-divider);
@@ -196,8 +224,8 @@
 .dark .agent-sidebar-shell,
 .dark.agent-layout-shell,
 .dark.agent-sidebar-shell {
-  --design-shell-chrome-bg: hsl(220 5% 9%);
-  --design-shell-divider: hsl(220 4% 20%);
+  --design-shell-chrome-bg: hsl(0 0% 10%);
+  --design-shell-divider: hsl(0 0% 22%);
   --agent-native-lower-surface: var(--design-shell-chrome-bg);
   --agent-native-raised-border: var(--design-shell-divider);
 }

package/corpus/templates/design/app/hooks/use-question-flow.ts

@@ -40,7 +40,7 @@ export function useQuestionFlow(
         formattedAnswers,
         "",
         designId
-          ? "Now continue the design. Honor any answer about variations: if the user asked to explore options, call present-design-variants with 2-5 complete HTML directions and wait for their pick; otherwise call generate-design with one complete, renderable index.html first. Do not ask another question unless a required decision is still genuinely missing."
+          ? "Now continue the design. Honor any answer about variations: if the user asked to explore options, call present-design-variants with 2-5 complete HTML directions, wait for their chat pick, delete the unchosen variant screens, then continue from the kept screen; otherwise call generate-design with one complete, renderable index.html first. Do not ask another question unless a required decision is still genuinely missing."
           : "Now continue the design. Honor any answer about variations: use variants only if requested; otherwise generate one polished direction.",
       ]
         .filter(Boolean)
@@ -78,7 +78,7 @@ export function useQuestionFlow(
         formattedAnswers,
         "",
         designId
-          ? "Now continue the design. Honor any answer about variations: if the user asked to explore options, call present-design-variants with 2-5 complete HTML directions and wait for their pick; otherwise call generate-design with one complete, renderable index.html first. Do not ask another question unless a required decision is still genuinely missing."
+          ? "Now continue the design. Honor any answer about variations: if the user asked to explore options, call present-design-variants with 2-5 complete HTML directions, wait for their chat pick, delete the unchosen variant screens, then continue from the kept screen; otherwise call generate-design with one complete, renderable index.html first. Do not ask another question unless a required decision is still genuinely missing."
           : "Now continue the design. Honor any answer about variations: use variants only if requested; otherwise generate one polished direction.",
       ]
         .filter(Boolean)

package/corpus/templates/design/app/hooks/useAgentEditRequest.ts

@@ -0,0 +1,131 @@
+import { sendToAgentChat, useT } from "@agent-native/core/client";
+import { useCallback } from "react";
+import { toast } from "sonner";
+
+export interface AgentEditRequestArgs {
+  /** Freeform user message describing the edit to make. */
+  message: string;
+  /** CSS selector or data-agent-native-node-id identifying the target element. */
+  selector?: string;
+  /** Source id (data-code-layer-id) of the target element. */
+  sourceId?: string;
+  /** The design file id (screen / file row id) being edited. */
+  fileId?: string;
+  /** The design id (row id of the design). */
+  designId?: string;
+  /** For localhost-connected screens: the source file path to route edits through. */
+  routeSourceFile?: string;
+  /** Human-readable filename for context (e.g. "index.html"). */
+  filename?: string;
+}
+
+/**
+ * Builds the hidden agent context string for an edit request, following the
+ * same pattern used by the tweaks panel (DesignEditor.tsx ~5293) and the
+ * extensions panel context builder (DesignExtensionsPanel.tsx ~120-131).
+ */
+function buildEditContext(args: AgentEditRequestArgs): string {
+  const lines: string[] = [];
+
+  if (args.designId) {
+    lines.push(`Design id: "${args.designId}".`);
+  }
+  if (args.fileId) {
+    lines.push(
+      args.filename
+        ? `Active file: "${args.filename}" (file id: "${args.fileId}").`
+        : `Active file id: "${args.fileId}".`,
+    );
+  } else if (args.filename) {
+    lines.push(`Active file: "${args.filename}".`);
+  }
+  if (args.selector) {
+    lines.push(`Selected element CSS selector: "${args.selector}".`);
+  }
+  if (args.sourceId) {
+    lines.push(
+      `Selected element source id (data-code-layer-id): "${args.sourceId}".`,
+    );
+  }
+  if (args.routeSourceFile) {
+    lines.push(
+      `Localhost source file to route edits through: "${args.routeSourceFile}".`,
+    );
+  }
+
+  lines.push("");
+  lines.push("Agent instructions:");
+  lines.push(
+    "1. Call view-screen first to see the current state of the design.",
+  );
+  lines.push(
+    "2. For style, class, text, or positional changes on the selected element, prefer apply-visual-edit — it is deterministic and does not require a full regeneration.",
+  );
+  lines.push(
+    "3. For structural changes, new sections, or multi-element edits, use edit-design (search/replace) for small targeted changes or generate-design for full rewrites.",
+  );
+  lines.push(
+    "4. If a routeSourceFile is provided, the design screen is connected to localhost source code. Route edits through the agent code editing surface for that file rather than modifying the inline HTML prototype.",
+  );
+
+  return lines.join("\n");
+}
+
+/**
+ * Builds the full pasteable prompt string (visible message + context block)
+ * for use in the "Copy prompt" flow.
+ */
+function buildFullPrompt(args: AgentEditRequestArgs): string {
+  const context = buildEditContext(args);
+  return `${args.message}\n\n---\n${context}`;
+}
+
+export interface UseAgentEditRequestReturn {
+  /**
+   * Routes the edit request directly to the agent chat sidebar.
+   * The message is shown in the chat; the context is hidden.
+   */
+  sendEdit: (args: AgentEditRequestArgs) => Promise<void>;
+  /**
+   * Builds the same prompt+context as a single string and copies it to the
+   * clipboard. Toasts success or blocked per the pattern in DesignEditor.tsx ~7608.
+   */
+  copyPrompt: (args: AgentEditRequestArgs) => Promise<void>;
+}
+
+/**
+ * Shared hook for routing AI edit requests from the inspector and the
+ * local-source banner. Reuses sendToAgentChat from @agent-native/core/client
+ * and the clipboard+toast pattern established in DesignEditor.tsx.
+ */
+export function useAgentEditRequest(): UseAgentEditRequestReturn {
+  const t = useT();
+
+  const sendEdit = useCallback(
+    async (args: AgentEditRequestArgs): Promise<void> => {
+      const context = buildEditContext(args);
+      sendToAgentChat({
+        message: args.message,
+        context,
+        submit: true,
+        openSidebar: true,
+      });
+    },
+    [],
+  );
+
+  const copyPrompt = useCallback(
+    async (args: AgentEditRequestArgs): Promise<void> => {
+      const text = buildFullPrompt(args);
+      try {
+        await navigator.clipboard.writeText(text);
+        toast.success(t("designEditor.toasts.codingHandoffCopied"));
+      } catch {
+        toast.error(t("designEditor.toasts.clipboardBlocked"));
+      }
+    },
+    [t],
+  );
+
+  return { sendEdit, copyPrompt };
+}

package/corpus/templates/design/app/hooks/useDesignHotkeys.ts

@@ -271,7 +271,14 @@ function handleDesignHotkey(
   if (
     event.key === "Tab" &&
     props.onTab &&
-    !isFocusableChromeTarget(event.target)
+    // Ignore synthetic (non-trusted) Tab events dispatched by handleIframeHotkey
+    // unless they carry the iframe-hotkey marker. This keeps inspector field
+    // tabbing native while allowing real iframe canvas Tab presses to cycle files.
+    (event.isTrusted !== false ||
+      (event as KeyboardEvent & { __agentNativeIframeHotkey?: boolean })
+        .__agentNativeIframeHotkey === true) &&
+    !isFocusableChromeTarget(event.target) &&
+    !isDesignHotkeyEditableTarget(document.activeElement)
   ) {
     prevent();
     props.onTab({ ...details, backwards: event.shiftKey });
@@ -300,7 +307,9 @@ function handleDesignHotkey(
   if (primary && key === "d") return run(props.onDuplicate);
   if (primary && key === "r") return run(props.onRename);
   if (primary && key === "g") {
-    return event.shiftKey ? run(props.onUngroup) : run(props.onGroup);
+    // Figma uses ⇧⌘G for ungroup; also support ⌥⌘G as an alias.
+    if (event.shiftKey || event.altKey) return run(props.onUngroup);
+    return run(props.onGroup);
   }
 
   if (primary && (key === "=" || key === "+")) return run(props.onZoomIn);