@agent-native/core 0.86.0 → 0.87.0

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

@@ -11,6 +11,27 @@ import {
   EmbeddedApp,
   type EmbeddedAppRef,
 } from "@agent-native/core/embedding/react";
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@agent-native/toolkit/ui/dropdown-menu";
+import { Input } from "@agent-native/toolkit/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@agent-native/toolkit/ui/popover";
+import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@agent-native/toolkit/ui/tabs";
+import { Textarea } from "@agent-native/toolkit/ui/textarea";
 import type { ShaderDescriptor } from "@shared/shader-presets";
 import {
   IconAdjustmentsHorizontal,
@@ -39,22 +60,6 @@ import {
 } from "react";
 import { toast } from "sonner";
 
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Input } from "@/components/ui/input";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-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";
 

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

@@ -1,4 +1,7 @@
 import { appApiPath, useActionMutation, useT } from "@agent-native/core/client";
+import { Badge } from "@agent-native/toolkit/ui/badge";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Textarea } from "@agent-native/toolkit/ui/textarea";
 import {
   IconBrandFigma,
   IconBrandGithub,
@@ -14,9 +17,6 @@ import { useCallback, useRef, useState, type ReactNode } from "react";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
 
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
 import {
   importResultSummary,
   looksLikeStandaloneHtml,

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

@@ -1,4 +1,11 @@
 import { useT } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Input } from "@agent-native/toolkit/ui/input";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
 import {
   IconEraser,
   IconArrowBackUp,
@@ -8,13 +15,6 @@ import {
 } from "@tabler/icons-react";
 import { useState, useRef, useCallback, useEffect } from "react";
 
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
 import type { DrawAnnotation } from "./types";

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

@@ -3,6 +3,36 @@ import {
   useActionQuery,
   useT,
 } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@agent-native/toolkit/ui/dropdown-menu";
+import { Input } from "@agent-native/toolkit/ui/input";
+import { Label } from "@agent-native/toolkit/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@agent-native/toolkit/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@agent-native/toolkit/ui/select";
+import { Slider } from "@agent-native/toolkit/ui/slider";
+import { Switch } from "@agent-native/toolkit/ui/switch";
+import { Tabs, TabsList, TabsTrigger } from "@agent-native/toolkit/ui/tabs";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
 import type { TweakDefinition } from "@shared/api";
 import {
   alphaToOpacity,
@@ -78,36 +108,6 @@ import {
 import { useParams } from "react-router";
 import { toast } from "sonner";
 
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Slider } from "@/components/ui/slider";
-import { Switch } from "@/components/ui/switch";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
 import {

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

@@ -1,4 +1,12 @@
 import { useActionMutation, useActionQuery } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@agent-native/toolkit/ui/dropdown-menu";
+import { Spinner } from "@agent-native/toolkit/ui/spinner";
 import {
   IconAlertTriangle,
   IconApps,
@@ -10,15 +18,6 @@ import {
 } from "@tabler/icons-react";
 import { useEffect, useRef, useState } from "react";
 
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Spinner } from "@/components/ui/spinner";
-
 const SYNC_POLL_INTERVAL_MS = 8000;
 const EDITS_REFETCH_INTERVAL_MS = 10000;
 const DEPLOY_POLL_INTERVAL_MS = 6000;

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

@@ -1,4 +1,18 @@
 import { useT } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@agent-native/toolkit/ui/context-menu";
+import { Input } from "@agent-native/toolkit/ui/input";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
 import {
   IconChevronDown,
   IconChevronRight,
@@ -29,20 +43,6 @@ import {
   type RefObject,
 } from "react";
 
-import { Button } from "@/components/ui/button";
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuSeparator,
-  ContextMenuTrigger,
-} from "@/components/ui/context-menu";
-import { Input } from "@/components/ui/input";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
 export type LayersPanelNodeType =

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

@@ -1,8 +1,5 @@
 import { callAction } from "@agent-native/core/client";
-import { IconDeviceFloppy, IconFolderOpen } from "@tabler/icons-react";
-import { useState } from "react";
-
-import { Button } from "@/components/ui/button";
+import { Button } from "@agent-native/toolkit/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -10,8 +7,10 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog";
-import { Spinner } from "@/components/ui/spinner";
+} from "@agent-native/toolkit/ui/dialog";
+import { Spinner } from "@agent-native/toolkit/ui/spinner";
+import { IconDeviceFloppy, IconFolderOpen } from "@tabler/icons-react";
+import { useState } from "react";
 
 export interface LocalhostWriteConsentPayload {
   /** The path being granted write access. */

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

@@ -17,6 +17,21 @@
  * All times are normalised to [0, 1] internally; the ruler maps them to px.
  */
 
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@agent-native/toolkit/ui/dropdown-menu";
+import { Input } from "@agent-native/toolkit/ui/input";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
 import type {
   MotionTrack,
   MotionKeyframe,
@@ -55,21 +70,6 @@ import {
 } from "react";
 import { toast } from "sonner";
 
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Input } from "@/components/ui/input";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
 // ─── Constants ────────────────────────────────────────────────────────────────

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

@@ -8,13 +8,13 @@ import {
   type GuidedQuestion,
   type GuidedQuestionOption,
 } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Slider } from "@agent-native/toolkit/ui/slider";
+import { Textarea } from "@agent-native/toolkit/ui/textarea";
 import type { QuestionFlowQuestion } from "@shared/api";
 import { IconCheck, IconPalette, IconUpload, IconX } from "@tabler/icons-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
-import { Button } from "@/components/ui/button";
-import { Slider } from "@/components/ui/slider";
-import { Textarea } from "@/components/ui/textarea";
 import { cn } from "@/lib/utils";
 
 interface QuestionFlowProps {

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

@@ -21,6 +21,9 @@
  */
 
 import { useActionMutation } from "@agent-native/core/client";
+import { Badge } from "@agent-native/toolkit/ui/badge";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Separator } from "@agent-native/toolkit/ui/separator";
 import {
   IconAlertCircle,
   IconArrowsLeftRight,
@@ -33,9 +36,6 @@ import {
 } from "@tabler/icons-react";
 import { useState } from "react";
 
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
 
 import {

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

@@ -13,6 +13,19 @@
  */
 
 import { useActionMutation, useActionQuery } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@agent-native/toolkit/ui/dropdown-menu";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
 import {
   IconCamera,
   IconChevronRight,
@@ -27,19 +40,6 @@ import {
 import { useState } from "react";
 import { toast } from "sonner";
 
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
 import type {

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

@@ -19,6 +19,20 @@ import {
   useActionQuery,
   useT,
 } from "@agent-native/core/client";
+import { Badge } from "@agent-native/toolkit/ui/badge";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Input } from "@agent-native/toolkit/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@agent-native/toolkit/ui/popover";
+import { Textarea } from "@agent-native/toolkit/ui/textarea";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
 import {
   IconBrush,
   IconChevronDown,
@@ -37,20 +51,6 @@ import {
 } from "@tabler/icons-react";
 import { useEffect, useRef, useState } from "react";
 
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Textarea } from "@/components/ui/textarea";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
 // ---------------------------------------------------------------------------

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

@@ -1,4 +1,10 @@
 import { useT, VisualTweakControl } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
 import type { TweakDefinition } from "@shared/api";
 import {
   IconX,
@@ -8,12 +14,6 @@ import {
 } from "@tabler/icons-react";
 import { useState, useRef, useCallback } from "react";
 
-import { Button } from "@/components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
 interface TweaksPanelProps {

package/corpus/templates/design/app/components/design/code-workbench/ActivityBar.tsx

@@ -1,10 +1,10 @@
-import { IconFiles, IconSearch } from "@tabler/icons-react";
-
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@agent-native/toolkit/ui/tooltip";
+import { IconFiles, IconSearch } from "@tabler/icons-react";
+
 import { cn } from "@/lib/utils";
 
 import { formatKeybinding } from "./commands";

package/corpus/templates/design/app/components/design/code-workbench/CodeWorkbench.tsx

@@ -19,7 +19,6 @@ import {
   readCodeWorkbenchTheme,
   type CodeWorkbenchTheme,
 } from "../code-workbench-theme";
-import { ActivityBar } from "./ActivityBar";
 import {
   createCoreCommands,
   dispatchKeybinding,
@@ -372,7 +371,6 @@ function CodeWorkbenchInner({
       style={theme.values as CSSProperties}
     >
       <div className="flex min-h-0 flex-1">
-        <ActivityBar />
         {state.sidebarVisible ? (
           <>
             <div
@@ -396,7 +394,9 @@ function CodeWorkbenchInner({
         ) : null}
         <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-[var(--workbench-editor-bg)]">
           <EditorTabs />
-          {activeTabUri && activePath ? <Breadcrumbs /> : null}
+          {activeTabUri && activePath && activePath.includes("/") ? (
+            <Breadcrumbs />
+          ) : null}
           <div className="relative min-h-0 flex-1">
             <MonacoHost
               editorRef={editorRef}

package/corpus/templates/design/app/components/design/code-workbench/SideBar.tsx

@@ -1,8 +1,16 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
+import { IconFiles, IconSearch } from "@tabler/icons-react";
+
 import { cn } from "@/lib/utils";
 
+import { formatKeybinding } from "./commands";
 import { ExplorerView } from "./explorer/ExplorerView";
 import { SearchView } from "./search/SearchView";
-import { useWorkbench } from "./store";
+import { useWorkbench, type SideView } from "./store";
 
 export interface SideBarProps {
   designId: string;
@@ -14,13 +22,30 @@ export interface SideBarProps {
   ) => void;
 }
 
-const VIEW_LABELS: Record<"explorer" | "search", string> = {
-  explorer: "Explorer" /* i18n-ignore */,
-  search: "Search" /* i18n-ignore */,
-};
+interface SideBarTab {
+  view: SideView;
+  icon: typeof IconFiles;
+  label: string;
+  keybinding: string;
+}
+
+const VIEW_TABS: SideBarTab[] = [
+  {
+    view: "explorer",
+    icon: IconFiles,
+    label: "Explorer" /* i18n-ignore */,
+    keybinding: "$mod+shift+e",
+  },
+  {
+    view: "search",
+    icon: IconSearch,
+    label: "Search" /* i18n-ignore */,
+    keybinding: "$mod+shift+f",
+  },
+];
 
 /**
- * Sidebar shell: 35px uppercase header + the active view. Both the explorer
+ * Sidebar shell: top view tabs + the active view. Both the explorer
  * and search views stay mounted (hidden via CSS) so search query/results and
  * explorer scroll/expansion state survive switching between them.
  */
@@ -30,13 +55,49 @@ export function SideBar({
   explorerFocusToken,
   onRequestLocalWriteConsent,
 }: SideBarProps) {
-  const { state } = useWorkbench();
+  const { state, api } = useWorkbench();
   const view = state.sideView;
 
   return (
     <div className="flex min-h-0 flex-1 flex-col">
-      <div className="flex h-[35px] shrink-0 items-center px-3 text-[11px] font-semibold uppercase tracking-wide text-[var(--workbench-muted-fg)]">
-        {VIEW_LABELS[view]}
+      <div
+        role="tablist"
+        aria-label="Code sidebar views" /* i18n-ignore */
+        className="flex h-10 shrink-0 items-center gap-1 border-b border-[var(--workbench-border)] px-2"
+      >
+        {VIEW_TABS.map((item) => {
+          const Icon = item.icon;
+          const active = view === item.view;
+          return (
+            <Tooltip key={item.view}>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  role="tab"
+                  aria-selected={active}
+                  aria-label={item.label}
+                  className={cn(
+                    "relative flex size-8 cursor-pointer items-center justify-center rounded-[5px] text-[var(--workbench-muted-fg)] outline-none transition-colors",
+                    "hover:bg-[var(--workbench-hover-bg)] hover:text-[var(--workbench-fg)] focus-visible:ring-1 focus-visible:ring-[var(--workbench-accent)]",
+                    active &&
+                      "bg-[var(--workbench-list-active-bg,var(--workbench-active-bg))] text-[var(--workbench-accent)]",
+                  )}
+                  onClick={() => {
+                    if (!active) api.setSideView(item.view);
+                  }}
+                >
+                  {active ? (
+                    <span className="absolute inset-x-1 bottom-0 h-[2px] rounded-full bg-[var(--workbench-accent)]" />
+                  ) : null}
+                  <Icon className="size-[18px]" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">
+                {item.label} {formatKeybinding(item.keybinding)}
+              </TooltipContent>
+            </Tooltip>
+          );
+        })}
       </div>
       <div className={cn("min-h-0 flex-1", view !== "explorer" && "hidden")}>
         <ExplorerView

package/corpus/templates/design/app/components/design/code-workbench/editor/EditorTabs.tsx

@@ -1,7 +1,3 @@
-import { IconX } from "@tabler/icons-react";
-import { useCallback, useRef, useState } from "react";
-import { toast } from "sonner";
-
 import {
   AlertDialog,
   AlertDialogAction,
@@ -11,19 +7,28 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
+} from "@agent-native/toolkit/ui/alert-dialog";
 import {
   ContextMenu,
   ContextMenuContent,
   ContextMenuItem,
   ContextMenuSeparator,
   ContextMenuTrigger,
-} from "@/components/ui/context-menu";
+} from "@agent-native/toolkit/ui/context-menu";
+import { IconX } from "@tabler/icons-react";
+import { useCallback, useRef, useState } from "react";
+import { toast } from "sonner";
+
+import { prettyScreenName } from "@/lib/screen-names";
 import { cn } from "@/lib/utils";
 
 import { FileIcon } from "../explorer/file-icons";
 import { useWorkbench, type EditorTab } from "../store";
-import { baseName, parseWorkbenchUri } from "../workspace/types";
+import {
+  baseName,
+  parseWorkbenchUri,
+  providerKindFromKey,
+} from "../workspace/types";
 import { isTabReorderNoop, resolveTabDropIndex } from "./tab-drag";
 
 interface PendingClose {
@@ -267,7 +272,11 @@ function EditorTabRow({
   const [hovered, setHovered] = useState(false);
   const meta = state.buffers[tab.uri];
   const dirty = meta?.dirty ?? false;
-  const name = baseName(tab.path);
+  const fileName = baseName(tab.path);
+  const name =
+    providerKindFromKey(tab.providerKey) === "inline"
+      ? prettyScreenName(fileName)
+      : fileName;
 
   return (
     <ContextMenu>

package/corpus/templates/design/app/components/design/code-workbench/editor/MonacoHost.tsx

@@ -1,8 +1,7 @@
+import { Spinner } from "@agent-native/toolkit/ui/spinner";
 import type * as monaco from "monaco-editor";
 import { useEffect, useRef, useState, type MutableRefObject } from "react";
 
-import { Spinner } from "@/components/ui/spinner";
-
 import {
   readCodeWorkbenchTheme,
   type CodeWorkbenchTheme,
@@ -69,7 +68,7 @@ export function MonacoHost({
       fontFamily: MONACO_FONT_FAMILY,
       fontSize: 12,
       lineHeight: 20,
-      minimap: { enabled: true, scale: 0.75, showSlider: "mouseover" },
+      minimap: { enabled: false },
       bracketPairColorization: { enabled: true },
       guides: { bracketPairs: true, indentation: true },
       lineNumbers: "on",