@agent-native/core 0.86.0 → 0.87.0

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

@@ -161,7 +161,7 @@ export function StatusBar({ editorRef, onGoToLine }: StatusBarProps) {
             onClick={() => activeUri && void api.reloadBuffer(activeUri)}
             className="flex cursor-pointer items-center gap-1 rounded-[3px] px-1.5 text-[var(--workbench-warning)] hover:bg-[var(--workbench-list-hover-bg)]"
           >
-            {"File changed externally — click to reload" /* i18n-ignore */}
+            {"File changed elsewhere — reload latest" /* i18n-ignore */}
           </button>
         ) : null}
       </div>

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

@@ -1,9 +1,11 @@
 import { useActionQuery } from "@agent-native/core/client";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
+import { prettyScreenName } from "@/lib/screen-names";
+
 import { useWorkbench } from "../store";
 import { buildFileTree } from "../workspace/tree";
-import type { WorkspaceFileEntry } from "../workspace/types";
+import { baseName, type WorkspaceFileEntry } from "../workspace/types";
 import { FileTree } from "./FileTree";
 
 export interface ExplorerViewProps {
@@ -40,7 +42,11 @@ export function ExplorerView({
     return files.map((file) => ({
       path: String(file.path ?? ""),
       displayName:
-        typeof file.displayName === "string" ? file.displayName : undefined,
+        typeof file.path === "string"
+          ? prettyScreenName(baseName(file.path))
+          : typeof file.displayName === "string"
+            ? file.displayName
+            : undefined,
       fileId: typeof file.fileId === "string" ? file.fileId : undefined,
       readonly: Boolean(file.readonly),
     }));

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

@@ -1,18 +1,3 @@
-import {
-  IconChevronDown,
-  IconChevronRight,
-  IconFold,
-  IconPlus,
-  IconRefresh,
-} from "@tabler/icons-react";
-import {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  type KeyboardEvent,
-} from "react";
-
 import {
   AlertDialog,
   AlertDialogAction,
@@ -22,19 +7,38 @@ 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 {
+  IconChevronDown,
+  IconChevronRight,
+  IconFold,
+  IconPlus,
+  IconRefresh,
+} from "@tabler/icons-react";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type KeyboardEvent,
+} from "react";
+
 import { cn } from "@/lib/utils";
 
 import { useWorkbench } from "../store";
 import { flattenVisibleTree, type TreeNode } from "../workspace/tree";
-import { workbenchUri, type WorkspaceCapabilities } from "../workspace/types";
+import {
+  baseName,
+  workbenchUri,
+  type WorkspaceCapabilities,
+} from "../workspace/types";
 import { FileIcon, FolderIcon } from "./file-icons";
 
 interface PendingNewFile {
@@ -118,7 +122,7 @@ export function FileTree({
 
   const startRename = useCallback((node: TreeNode) => {
     setRenamingPath(node.path);
-    setRenameDraft(node.name);
+    setRenameDraft(baseName(node.path));
   }, []);
 
   const handleWriteError = useCallback(
@@ -145,7 +149,7 @@ export function FileTree({
     async (node: TreeNode) => {
       const nextName = renameDraft.trim();
       setRenamingPath(null);
-      if (!nextName || nextName === node.name) return;
+      if (!nextName || nextName === baseName(node.path)) return;
       const parentPath = node.path.split("/").slice(0, -1).join("/");
       const nextPath = parentPath ? `${parentPath}/${nextName}` : nextName;
       try {

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

@@ -1,7 +1,3 @@
-import { IconChevronDown, IconChevronRight, IconX } from "@tabler/icons-react";
-import * as monaco from "monaco-editor";
-import { useEffect, useMemo, useRef, useState } from "react";
-
 import {
   AlertDialog,
   AlertDialogAction,
@@ -11,8 +7,12 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Input } from "@/components/ui/input";
+} from "@agent-native/toolkit/ui/alert-dialog";
+import { Input } from "@agent-native/toolkit/ui/input";
+import { IconChevronDown, IconChevronRight, IconX } from "@tabler/icons-react";
+import * as monaco from "monaco-editor";
+import { useEffect, useMemo, useRef, useState } from "react";
+
 import { cn } from "@/lib/utils";
 
 import { FileIcon } from "../explorer/file-icons";

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

@@ -591,6 +591,34 @@ export function WorkbenchProvider({
             },
           });
         } catch (error) {
+          if (error instanceof WorkspaceStaleVersionError) {
+            try {
+              const latest = await provider.readFile(path);
+              if (latest.content === content) {
+                rememberVersionHash(uri, latest.versionHash);
+                modelRegistry.markSaved(uri, altVersionId);
+                dispatch({
+                  type: "PATCH_BUFFER",
+                  uri,
+                  patch: {
+                    saving: false,
+                    dirty: modelRegistry.isDirty(uri),
+                    conflict: false,
+                    readonly: latest.readonly ?? meta.readonly,
+                    language: latest.language ?? meta.language,
+                    fileId: latest.fileId ?? meta.fileId,
+                    savedVersionHash:
+                      latest.versionHash ?? meta.savedVersionHash,
+                    lastSavedAt: Date.now(),
+                  },
+                });
+                return;
+              }
+            } catch {
+              // Keep the original stale-version error; the user can reload
+              // latest from the status bar without losing this buffer first.
+            }
+          }
           dispatch({
             type: "PATCH_BUFFER",
             uri,
@@ -619,6 +647,26 @@ export function WorkbenchProvider({
         if (read.versionHash && read.versionHash === meta.savedVersionHash) {
           return;
         }
+        const entry = modelRegistry.get(uri);
+        if (entry && !entry.model.isDisposed()) {
+          if (entry.model.getValue() === read.content) {
+            rememberVersionHash(uri, read.versionHash);
+            modelRegistry.markSaved(uri, entry.model.getAlternativeVersionId());
+            dispatch({
+              type: "PATCH_BUFFER",
+              uri,
+              patch: {
+                savedVersionHash: read.versionHash ?? meta.savedVersionHash,
+                dirty: false,
+                conflict: false,
+                readonly: read.readonly ?? meta.readonly,
+                language: read.language ?? meta.language,
+                fileId: read.fileId ?? meta.fileId,
+              },
+            });
+            return;
+          }
+        }
         // Stale echo: a poll that resolved out of order carries a hash this
         // client already loaded or saved. Never apply it over newer content.
         if (

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

@@ -1,11 +1,11 @@
-import type { ComponentType } from "react";
-
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@agent-native/toolkit/ui/tooltip";
+import type { ComponentType } from "react";
+
 import { cn } from "@/lib/utils";
 
 export type AlignmentHorizontal = "left" | "center" | "right";

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

@@ -1,8 +1,5 @@
-import { IconArrowBackUp } from "@tabler/icons-react";
-import { type ReactNode, useState } from "react";
-
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Checkbox } from "@agent-native/toolkit/ui/checkbox";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -10,13 +7,16 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+} from "@agent-native/toolkit/ui/dropdown-menu";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@agent-native/toolkit/ui/tooltip";
+import { IconArrowBackUp } from "@tabler/icons-react";
+import { type ReactNode, useState } from "react";
+
 import { cn } from "@/lib/utils";
 
 import type {

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

@@ -1,5 +1,3 @@
-import { useState } from "react";
-
 import {
   Select,
   SelectContent,
@@ -7,7 +5,9 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
+} from "@agent-native/toolkit/ui/select";
+import { useState } from "react";
+
 import { cn } from "@/lib/utils";
 
 export type HorizontalConstraint =

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

@@ -1,3 +1,21 @@
+import { Input } from "@agent-native/toolkit/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@agent-native/toolkit/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@agent-native/toolkit/ui/select";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
 import {
   alphaToOpacity,
   parseCssColor,
@@ -23,24 +41,6 @@ import {
   type PointerEvent,
 } from "react";
 
-import { Input } from "@/components/ui/input";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
 import {

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

@@ -1,8 +1,5 @@
-import { IconDownload, IconPlus, IconX } from "@tabler/icons-react";
-import { useEffect, useState } from "react";
-
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Input } from "@agent-native/toolkit/ui/input";
 import {
   Select,
   SelectContent,
@@ -10,7 +7,10 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
+} from "@agent-native/toolkit/ui/select";
+import { IconDownload, IconPlus, IconX } from "@tabler/icons-react";
+import { useEffect, useState } from "react";
+
 import { cn } from "@/lib/utils";
 
 export type ExportFormat = "png" | "jpg" | "svg" | "pdf" | "webp";

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

@@ -1,19 +1,19 @@
-import { IconPhotoPlus, IconX } from "@tabler/icons-react";
-import { useEffect, useRef, useState } from "react";
-
-import { Input } from "@/components/ui/input";
+import { Input } from "@agent-native/toolkit/ui/input";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
+} from "@agent-native/toolkit/ui/select";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@agent-native/toolkit/ui/tooltip";
+import { IconPhotoPlus, IconX } from "@tabler/icons-react";
+import { useEffect, useRef, useState } from "react";
+
 import { cn } from "@/lib/utils";
 
 // ─── Types ───────────────────────────────────────────────────────────────────

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

@@ -1,4 +1,11 @@
 import { useT } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@agent-native/toolkit/ui/collapsible";
+import { Textarea } from "@agent-native/toolkit/ui/textarea";
 import {
   IconClipboard,
   IconChevronDown,
@@ -6,13 +13,6 @@ import {
 } from "@tabler/icons-react";
 import { useState } from "react";
 
-import { Button } from "@/components/ui/button";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible";
-import { Textarea } from "@/components/ui/textarea";
 import { useAgentEditRequest } from "@/hooks/useAgentEditRequest";
 import { cn } from "@/lib/utils";
 

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

@@ -1,3 +1,10 @@
+import { Input } from "@agent-native/toolkit/ui/input";
+import { Label } from "@agent-native/toolkit/ui/label";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
 import { IconArrowsHorizontal } from "@tabler/icons-react";
 import {
   useEffect,
@@ -9,13 +16,6 @@ import {
   type ReactNode,
 } from "react";
 
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
 import {

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

@@ -1,3 +1,17 @@
+import { Label } from "@agent-native/toolkit/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@agent-native/toolkit/ui/select";
+import { Switch } from "@agent-native/toolkit/ui/switch";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
 import {
   Dithering,
   GodRays,
@@ -24,20 +38,6 @@ import {
 import { IconArrowLeft, IconX } from "@tabler/icons-react";
 import { useMemo, useState } from "react";
 
-import { Label } from "@/components/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
 import { type ScrubInputChangeMeta, ScrubInput } from "./ScrubInput";

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

@@ -1,20 +1,20 @@
-import {
-  SHADER_PRESET_MAP,
-  type ShaderDescriptor,
-} from "@shared/shader-presets";
-import { IconTrash } from "@tabler/icons-react";
-
-import { Button } from "@/components/ui/button";
+import { Button } from "@agent-native/toolkit/ui/button";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover";
+} from "@agent-native/toolkit/ui/popover";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@agent-native/toolkit/ui/tooltip";
+import {
+  SHADER_PRESET_MAP,
+  type ShaderDescriptor,
+} from "@shared/shader-presets";
+import { IconTrash } from "@tabler/icons-react";
+
 import { cn } from "@/lib/utils";
 
 import { ShaderControls } from "./ShaderControls";

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

@@ -1,4 +1,10 @@
 import { useActionMutation } from "@agent-native/core/client";
+import { Input } from "@agent-native/toolkit/ui/input";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
 import {
   Dithering,
   GodRays,
@@ -25,12 +31,6 @@ import {
 } from "@tabler/icons-react";
 import { Component, useMemo, useState, type ReactNode } from "react";
 
-import { Input } from "@/components/ui/input";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
 import { ShaderControls } from "./ShaderControls";

package/corpus/templates/design/app/components/design-system/DesignSystemCard.tsx

@@ -1,10 +1,9 @@
-import { IconPalette, IconStar, IconStarFilled } from "@tabler/icons-react";
-
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@agent-native/toolkit/ui/tooltip";
+import { IconPalette, IconStar, IconStarFilled } from "@tabler/icons-react";
 
 import type { DesignSystemData } from "../../../shared/api";
 

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

@@ -8,33 +8,36 @@ import {
   EmbeddedApp,
   type EmbeddedAppRef,
 } from "@agent-native/core/embedding/react";
+import { Button } from "@agent-native/toolkit/ui/button";
 import {
-  IconApps,
-  IconPalette,
-  IconPhoto,
-  IconPlus,
-  IconUpload,
-  IconX,
-} from "@tabler/icons-react";
-import { useState, useEffect, useCallback, useRef } from "react";
-import { toast } from "sonner";
-
-import { Button } from "@/components/ui/button";
-import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from "@agent-native/toolkit/ui/dialog";
 import {
   Popover,
   PopoverAnchor,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover";
+} from "@agent-native/toolkit/ui/popover";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
-import { Skeleton } from "@/components/ui/skeleton";
+} from "@agent-native/toolkit/ui/select";
+import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
+import {
+  IconApps,
+  IconPalette,
+  IconPhoto,
+  IconPlus,
+  IconUpload,
+  IconX,
+} from "@tabler/icons-react";
+import { useState, useEffect, useCallback, useRef } from "react";
+import { toast } from "sonner";
 
 export interface UploadedFile {
   path: string;

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

@@ -6,11 +6,13 @@ import {
 } from "@agent-native/core/client";
 import { AgentToggleButton } from "@agent-native/core/client";
 import { RunsTray } from "@agent-native/core/client/progress";
+import {
+  useHeaderTitle,
+  useHeaderActions,
+} from "@agent-native/toolkit/app-shell";
 import { useCallback } from "react";
 import { useLocation } from "react-router";
 
-import { useHeaderTitle, useHeaderActions } from "./HeaderActions";
-
 const pageTitleKeys: Record<string, string> = {
   "/": "navigation.designs",
   "/design-systems": "navigation.designSystems",

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

@@ -6,6 +6,7 @@ import {
   useSession,
   useT,
 } from "@agent-native/core/client";
+import { HeaderActionsProvider } from "@agent-native/toolkit/app-shell";
 import { IconMenu2 } from "@tabler/icons-react";
 import {
   createContext,
@@ -22,7 +23,6 @@ import { DESIGN_CHAT_STORAGE_KEY } from "@/lib/agent-chat";
 import { cn } from "@/lib/utils";
 
 import { Header } from "./Header";
-import { HeaderActionsProvider } from "./HeaderActions";
 import { Sidebar } from "./Sidebar";
 
 interface LayoutProps {

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

@@ -6,6 +6,11 @@ import {
 } from "@agent-native/core/client";
 import { ExtensionsSidebarSection } from "@agent-native/core/client/extensions";
 import { OrgSwitcher } from "@agent-native/core/client/org";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
 import {
   IconPencil,
   IconPalette,
@@ -17,11 +22,6 @@ import { useEffect, useState } from "react";
 import { Link, useLocation } from "react-router";
 
 import { ThemeToggle } from "@/components/ThemeToggle";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
 const navItems = [

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

@@ -1,4 +1,11 @@
 import { useT } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Textarea } from "@agent-native/toolkit/ui/textarea";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
 import {
   IconAlertTriangle,
   IconBolt,
@@ -10,13 +17,6 @@ import {
 } from "@tabler/icons-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { sendToDesignAgentChat } from "@/lib/agent-chat";
 import { cn } from "@/lib/utils";