@agent-native/core 0.82.0 → 0.84.0

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

@@ -1,121 +1,101 @@
 import { Skeleton } from "@/components/ui/skeleton";
+import { Spinner } from "@/components/ui/spinner";
+
+const panelGhost = "bg-[var(--design-editor-skeleton-panel-ghost-bg)]";
 
 /**
- * Loading placeholder for the design editor. Mirrors the real editor chrome
- * (side rails + canvas with a faux design frame) so the load reads as
- * "a design is coming" instead of a bare spinner on a black void.
+ * Loading placeholder for the design editor. Keeps the shell recognizable while
+ * staying quiet enough that it does not read as mock content.
  */
 export function DesignEditorSkeleton({
   embedded = false,
+  pendingGeneration = false,
 }: {
   embedded?: boolean;
+  pendingGeneration?: boolean;
 }) {
-  return (
-    <div className="flex h-full overflow-hidden bg-background">
-      {!embedded && (
-        <aside className="hidden w-80 shrink-0 border-r border-border bg-[var(--design-editor-panel-bg)] lg:flex">
-          <div className="flex w-[52px] shrink-0 flex-col items-center border-r border-border py-3">
-            <Skeleton className="mb-3 size-8 rounded-md" />
-            <Skeleton className="mb-5 h-px w-8 rounded-none" />
-            <div className="flex flex-1 flex-col items-center gap-4">
-              {Array.from({ length: 5 }).map((_, index) => (
-                <Skeleton key={index} className="h-[48px] w-12 rounded-lg" />
-              ))}
-            </div>
-          </div>
-          <div className="flex min-w-0 flex-1 flex-col">
-            <div className="flex h-10 shrink-0 items-center border-b border-border px-3">
-              <Skeleton className="h-5 min-w-0 flex-1 rounded" />
+  if (pendingGeneration) {
+    return (
+      <div className="flex h-full overflow-hidden bg-[var(--design-editor-canvas-bg)]">
+        {!embedded && (
+          <aside className="relative flex min-h-0 shrink-0 border-r border-[var(--design-editor-panel-divider-color)] bg-[var(--design-editor-panel-bg)]">
+            <div className="flex w-[52px] shrink-0 flex-col items-center p-3">
+              <Skeleton className={`size-8 rounded-md ${panelGhost}`} />
+              <div className="mt-8 flex w-full flex-col items-center gap-3">
+                <Skeleton className={`size-8 rounded-lg ${panelGhost}`} />
+                <Skeleton className={`size-8 rounded-lg ${panelGhost}`} />
+                <Skeleton className={`size-8 rounded-lg ${panelGhost}`} />
+              </div>
             </div>
-            <div className="shrink-0 border-b border-border p-2">
-              <div className="mb-2 flex items-center justify-between">
-                <Skeleton className="h-3 w-16 rounded" />
-                <div className="flex gap-1">
-                  <Skeleton className="size-6 rounded-sm" />
-                  <Skeleton className="size-6 rounded-sm" />
+            <div className="flex w-[320px] min-w-0 flex-col bg-[var(--design-editor-panel-bg)]">
+              <div className="border-b border-[var(--design-editor-panel-divider-color)] p-3">
+                <Skeleton className={`h-5 w-28 rounded ${panelGhost}`} />
+              </div>
+              <div className="flex min-h-0 flex-1 flex-col gap-4 p-3">
+                <Skeleton className={`h-16 w-full rounded-lg ${panelGhost}`} />
+                <Skeleton className={`h-24 w-5/6 rounded-lg ${panelGhost}`} />
+                <div className="mt-auto space-y-2">
+                  <Skeleton className={`h-9 w-full rounded-lg ${panelGhost}`} />
+                  <Skeleton className={`h-9 w-3/4 rounded-lg ${panelGhost}`} />
                 </div>
               </div>
-              <Skeleton className="h-7 w-full rounded-sm" />
-            </div>
-            <div className="shrink-0 border-b border-border p-2">
-              <Skeleton className="h-7 w-full rounded-sm" />
             </div>
-            <div className="flex-1 space-y-1 p-2">
-              <Skeleton className="h-6 w-full rounded-sm" />
-              <Skeleton className="h-6 w-11/12 rounded-sm" />
-              <Skeleton className="h-6 w-4/5 rounded-sm" />
-              <Skeleton className="h-6 w-2/3 rounded-sm" />
+          </aside>
+        )}
+
+        <main className="relative min-w-0 flex-1 overflow-hidden bg-[var(--design-editor-skeleton-canvas-bg)]">
+          <div className="flex h-full min-h-0 items-center justify-center px-8 py-10">
+            <div className="flex w-full max-w-md flex-col items-center text-center">
+              <div className="mb-4 flex size-12 items-center justify-center rounded-xl border border-[var(--design-editor-panel-divider-color)] bg-[var(--design-editor-panel-bg)] shadow-[0_18px_50px_-34px_rgba(0,0,0,0.8)]">
+                <Spinner className="size-5 text-foreground/40" />
+              </div>
+              <Skeleton className={`h-4 w-32 rounded ${panelGhost}`} />
             </div>
           </div>
+        </main>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full overflow-hidden bg-background">
+      {!embedded && (
+        <aside className="hidden w-80 shrink-0 bg-[var(--design-editor-panel-bg)] lg:flex">
+          <div className="flex w-[52px] shrink-0 flex-col items-center p-3">
+            <Skeleton className={`size-8 rounded-md ${panelGhost}`} />
+            <Skeleton className={`mt-8 h-40 w-full rounded-lg ${panelGhost}`} />
+          </div>
+          <div className="flex min-w-0 flex-1 flex-col gap-3 p-3">
+            <Skeleton className={`h-4 w-full rounded ${panelGhost}`} />
+            <Skeleton className={`h-24 w-full rounded-lg ${panelGhost}`} />
+            <Skeleton className={`h-36 w-4/5 rounded-lg ${panelGhost}`} />
+          </div>
         </aside>
       )}
 
       <main className="relative min-w-0 flex-1 overflow-hidden bg-[var(--design-editor-skeleton-canvas-bg)]">
-        <div className="flex h-full items-center justify-center p-8">
-          <div className="w-full max-w-4xl overflow-hidden rounded-xl border border-border bg-card shadow-2xl">
-            {/* Faux browser bar */}
-            <div className="flex items-center gap-2 border-b border-border px-4 py-3">
-              <Skeleton className="h-2.5 w-2.5 rounded-full" />
-              <Skeleton className="h-2.5 w-2.5 rounded-full" />
-              <Skeleton className="h-2.5 w-2.5 rounded-full" />
-              <Skeleton className="ml-3 h-4 w-48 rounded" />
-            </div>
-            {/* Faux content */}
-            <div className="space-y-6 p-8">
-              <div className="space-y-3">
-                <Skeleton className="h-8 w-2/3 rounded-lg" />
-                <Skeleton className="h-4 w-1/2 rounded" />
-              </div>
-              <div className="grid grid-cols-3 gap-4">
-                <Skeleton className="h-28 rounded-xl" />
-                <Skeleton className="h-28 rounded-xl" />
-                <Skeleton className="h-28 rounded-xl" />
-              </div>
-              <Skeleton className="h-40 w-full rounded-xl" />
-            </div>
-          </div>
+        <div className="flex h-full items-center justify-center px-10 pb-28 pt-10">
+          <Skeleton
+            aria-hidden="true"
+            className={`h-72 w-full max-w-[520px] rounded-xl ${panelGhost}`}
+          />
         </div>
 
         {!embedded && (
-          <div className="absolute bottom-4 left-1/2 z-[70] flex -translate-x-1/2 items-center gap-2 rounded-2xl border border-white/10 bg-[#2c2c2c]/95 p-2 shadow-[0_22px_55px_-24px_rgba(0,0,0,0.9)]">
-            <div className="flex gap-1">
-              {Array.from({ length: 6 }).map((_, index) => (
-                <Skeleton key={index} className="h-11 w-16 rounded-md" />
-              ))}
-            </div>
-            <Skeleton className="h-12 w-px rounded-none bg-white/15" />
-            <div className="flex gap-1 rounded-lg bg-white/10 p-1">
-              {Array.from({ length: 4 }).map((_, index) => (
-                <Skeleton key={index} className="size-10 rounded-md" />
-              ))}
-            </div>
-          </div>
+          <div
+            className={`absolute bottom-4 left-1/2 z-[70] h-11 w-64 -translate-x-1/2 rounded-xl ${panelGhost}`}
+          />
         )}
       </main>
 
       {!embedded && (
-        <aside className="hidden w-64 shrink-0 flex-col border-l border-border bg-[var(--design-editor-panel-bg)] lg:flex">
-          <div className="shrink-0 border-b border-border p-2">
-            <div className="flex flex-wrap justify-end gap-1">
-              <Skeleton className="h-7 w-12 rounded-md" />
-              <Skeleton className="h-7 w-14 rounded-md" />
-              <Skeleton className="h-7 w-16 rounded-md" />
-              <Skeleton className="size-7 rounded-md" />
-            </div>
-          </div>
-          <div className="flex h-11 shrink-0 items-center justify-between border-b border-border px-3">
-            <div className="flex gap-1">
-              <Skeleton className="h-7 w-16 rounded-md" />
-              <Skeleton className="h-7 w-16 rounded-md" />
-            </div>
-            <Skeleton className="h-7 w-12 rounded-md" />
+        <aside className="hidden w-80 shrink-0 flex-col bg-[var(--design-editor-panel-bg)] lg:flex">
+          <div className="flex h-12 shrink-0 items-center justify-end px-3">
+            <Skeleton className={`h-6 w-40 rounded-md ${panelGhost}`} />
           </div>
-          <div className="space-y-3 p-3">
-            <Skeleton className="h-4 w-24 rounded" />
-            <Skeleton className="h-7 w-full rounded-md" />
-            <Skeleton className="h-7 w-full rounded-md" />
-            <Skeleton className="h-4 w-20 rounded" />
-            <Skeleton className="h-24 w-full rounded-md" />
+          <div className="space-y-4 p-3">
+            <Skeleton className={`h-6 w-24 rounded ${panelGhost}`} />
+            <Skeleton className={`h-36 w-full rounded-lg ${panelGhost}`} />
           </div>
         </aside>
       )}

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

@@ -1,7 +1,6 @@
 // i18n-raw-literal-disable-file — new Design Studio panel; UI strings are localized when this feature is finalized in the follow-up PR.
 import {
   agentNativePath,
-  sendToAgentChat,
   useActionQuery,
   useActionMutation,
   useChangeVersions,
@@ -20,11 +19,12 @@ import {
   IconChevronDown,
   IconExternalLink,
   IconLock,
+  IconMessageCircle,
+  IconPalette,
   IconPhoto,
   IconPlayerPlay,
   IconPuzzle,
   IconSearch,
-  IconSparkles,
 } from "@tabler/icons-react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import {
@@ -53,6 +53,7 @@ import {
 import { Skeleton } from "@/components/ui/skeleton";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
+import { sendToDesignAgentChat } from "@/lib/agent-chat";
 import { cn } from "@/lib/utils";
 
 import { ShaderFillsPanel } from "./inspector/ShaderFillsPanel";
@@ -320,8 +321,7 @@ function FirstPartyExtRow({
           <span className="block truncate text-sm font-medium leading-tight text-foreground">
             {label}
           </span>
-          <span className="mt-0.5 flex items-center gap-1.5 truncate text-xs leading-none text-muted-foreground">
-            <IconPuzzle className="size-3 shrink-0" />
+          <span className="mt-0.5 block truncate text-xs leading-none text-muted-foreground">
             <span className="truncate">Built-in</span>
           </span>
         </span>
@@ -581,15 +581,15 @@ export function AssetLibraryPanel({ context }: AssetLibraryPanelProps) {
       <Tabs defaultValue="native" className="flex min-h-0 flex-1 flex-col">
         <div className="border-b border-border/60 px-2 py-1.5">
           <TabsList className="grid h-7 w-full grid-cols-3 rounded-md p-0.5">
-            <TabsTrigger value="native" className="h-6 gap-1 px-2 text-[11px]">
+            <TabsTrigger value="native" className="h-6 gap-1 px-2 !text-[11px]">
               <IconAssembly className="size-3" />
               Native
             </TabsTrigger>
-            <TabsTrigger value="media" className="h-6 gap-1 px-2 text-[11px]">
+            <TabsTrigger value="media" className="h-6 gap-1 px-2 !text-[11px]">
               <IconPhoto className="size-3" />
               Media
             </TabsTrigger>
-            <TabsTrigger value="figma" className="h-6 gap-1 px-2 text-[11px]">
+            <TabsTrigger value="figma" className="h-6 gap-1 px-2 !text-[11px]">
               <IconBrandFigma className="size-3" />
               Figma
             </TabsTrigger>
@@ -631,7 +631,7 @@ export function AssetLibraryPanel({ context }: AssetLibraryPanelProps) {
                   </span>
                   <span className="min-w-0 flex-1">
                     <span className="flex items-center gap-1.5">
-                      <span className="truncate text-[11px] font-medium leading-tight text-foreground">
+                      <span className="truncate !text-[11px] font-medium leading-tight text-foreground">
                         {asset.title}
                       </span>
                       <span className="shrink-0 rounded border border-border/70 px-1 py-0.5 text-[9px] leading-none text-muted-foreground">
@@ -678,19 +678,19 @@ export function AssetLibraryPanel({ context }: AssetLibraryPanelProps) {
               value={figmaFileInput}
               onChange={(event) => setFigmaFileInput(event.target.value)}
               placeholder="Figma file URL or key"
-              className="h-7 text-[11px]"
+              className="h-7 !text-[11px] md:!text-[11px]"
             />
             <div className="flex gap-1.5">
               <Input
                 value={figmaQueryInput}
                 onChange={(event) => setFigmaQueryInput(event.target.value)}
                 placeholder="Search components"
-                className="h-7 min-w-0 flex-1 text-[11px]"
+                className="h-7 min-w-0 flex-1 !text-[11px] md:!text-[11px]"
               />
               <Button
                 type="submit"
                 size="sm"
-                className="h-7 cursor-pointer gap-1 px-2 text-[11px]"
+                className="h-7 cursor-pointer gap-1 px-2 !text-[11px]"
                 disabled={!figmaFileInput.trim() || figmaAssets.isFetching}
               >
                 <IconSearch className="size-3" />
@@ -949,10 +949,10 @@ function ShaderFillsExtPanel({ context }: ShaderFillsExtPanelProps) {
           <Button
             type="button"
             size="sm"
-            className="h-6 cursor-pointer gap-1 px-2 text-[11px]"
+            className="h-6 cursor-pointer gap-1 px-2 !text-[11px]"
             onClick={() => setShowShaders(true)}
           >
-            <IconSparkles className="size-3" />
+            <IconPalette className="size-3" />
             Browse Shaders
           </Button>
         </div>
@@ -991,7 +991,7 @@ function ShaderFillsExtPanel({ context }: ShaderFillsExtPanelProps) {
           <Button
             type="button"
             size="sm"
-            className="h-6 cursor-pointer gap-1 px-2 text-[11px]"
+            className="h-6 cursor-pointer gap-1 px-2 !text-[11px]"
             disabled={!previewMatchesTarget || applyShaderFill.isPending}
             onClick={() => {
               if (previewMatchesTarget && previewed) {
@@ -999,7 +999,7 @@ function ShaderFillsExtPanel({ context }: ShaderFillsExtPanelProps) {
               }
             }}
           >
-            <IconSparkles className="size-3" />
+            <IconPalette className="size-3" />
             {applyShaderFill.isPending
               ? "Applying…"
               : previewMatchesTarget
@@ -1027,7 +1027,7 @@ function TokenAuditorPanel({ context }: TokenAuditorPanelProps) {
   const t = useT();
 
   const handleAskAgent = () => {
-    sendToAgentChat({
+    sendToDesignAgentChat({
       message:
         "Run a token audit on the active design: index CSS custom properties, surface any hard-coded colours that should be tokens, flag clashes, and suggest fixes.",
       context: [
@@ -1056,10 +1056,10 @@ function TokenAuditorPanel({ context }: TokenAuditorPanelProps) {
         <Button
           type="button"
           size="sm"
-          className="h-6 cursor-pointer gap-1 px-2 text-[11px]"
+          className="h-6 cursor-pointer gap-1 px-2 !text-[11px]"
           onClick={handleAskAgent}
         >
-          <IconSparkles className="size-3" />
+          <IconMessageCircle className="size-3" />
           {t("designEditor.askAgent") || "Ask agent"}
         </Button>
       </div>
@@ -1077,7 +1077,7 @@ function MotionPresetsPanel({ context }: MotionPresetsPanelProps) {
   const t = useT();
 
   const handleAskAgent = () => {
-    sendToAgentChat({
+    sendToDesignAgentChat({
       message:
         "Apply a motion preset to the selected element. Suggest fade-in, slide-up, pulse, bounce, or spin, then call apply-motion-edit to write the keyframes atomically.",
       context: [
@@ -1111,10 +1111,10 @@ function MotionPresetsPanel({ context }: MotionPresetsPanelProps) {
         <Button
           type="button"
           size="sm"
-          className="h-6 cursor-pointer gap-1 px-2 text-[11px]"
+          className="h-6 cursor-pointer gap-1 px-2 !text-[11px]"
           onClick={handleAskAgent}
         >
-          <IconSparkles className="size-3" />
+          <IconMessageCircle className="size-3" />
           {t("designEditor.askAgent") || "Ask agent"}
         </Button>
       </div>
@@ -1159,7 +1159,7 @@ export function DesignExtensionsPanel({
   const submitCreatePrompt: CreateExtensionSubmitHandler = (text: string) => {
     const trimmed = text.trim();
     if (!trimmed) return;
-    sendToAgentChat({
+    sendToDesignAgentChat({
       message: `Create a Design extension: ${trimmed}`,
       context: buildExtensionCreateContext(trimmed, context),
       submit: true,
@@ -1211,7 +1211,7 @@ export function DesignExtensionsPanel({
       label: "Shader Fills",
       description: "GPU shader fill presets — preview & apply",
       category: "shader",
-      icon: <IconSparkles className="size-3.5" />,
+      icon: <IconPalette className="size-3.5" />,
       panel: <ShaderFillsExtPanel context={context} />,
     },
     {
@@ -1454,11 +1454,10 @@ function CreateExtensionPopover({
           type="button"
           variant="outline"
           size="sm"
-          className="h-8 cursor-pointer gap-1.5 rounded-md bg-transparent px-3 text-sm font-medium"
+          className="h-8 cursor-pointer rounded-md bg-transparent px-3 text-sm font-medium"
           aria-label={t("designEditor.addExtension")}
         >
           Create
-          <IconChevronDown className="size-3.5 text-muted-foreground" />
         </Button>
       </PopoverTrigger>
       <PopoverContent align="end" sideOffset={8} className="w-80 p-3">
@@ -1486,10 +1485,9 @@ function CreateExtensionPopover({
             <Button
               type="submit"
               size="sm"
-              className="h-8 gap-1.5 px-3"
+              className="h-8 px-3"
               disabled={!canSubmit}
             >
-              <IconSparkles className="size-3.5" />
               Create
             </Button>
           </div>

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

@@ -91,7 +91,7 @@ function MobileFrame({
       {/* Status bar with notch */}
       <div className="relative flex items-center justify-between px-6 h-10 bg-black">
         {/* Time */}
-        <span className="text-[11px] font-semibold text-white">9:41</span>
+        <span className="!text-[11px] font-semibold text-white">9:41</span>
         {/* Dynamic Island / Notch */}
         <div className="absolute left-1/2 -translate-x-1/2 top-1.5 w-24 h-6 rounded-full bg-zinc-900" />
         {/* Status icons */}

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

@@ -386,7 +386,7 @@ export function DrawOverlay({ visible, onQueue, onSend }: DrawOverlayProps) {
         <Button
           variant="ghost"
           size="sm"
-          className="h-6 gap-1 px-2 text-[11px] text-muted-foreground hover:text-foreground"
+          className="h-6 gap-1 px-2 !text-[11px] text-muted-foreground hover:text-foreground"
           onClick={queueDrawing}
           disabled={strokes.length === 0}
         >
@@ -397,7 +397,7 @@ export function DrawOverlay({ visible, onQueue, onSend }: DrawOverlayProps) {
         {/* Send button */}
         <Button
           size="sm"
-          className="h-6 gap-1 px-3 text-[11px]"
+          className="h-6 gap-1 px-3 !text-[11px]"
           onClick={sendAll}
           disabled={totalQueued === 0 && strokes.length === 0}
         >