@agent-native/core 0.86.0 → 0.86.1

package/corpus/templates/design/AGENTS.md

@@ -92,13 +92,19 @@ patterns live in `.agents/skills/`.
   `inspectorTab: "extensions"` after installing it.
 - Follow linked design-system tokens and `customInstructions` whenever present;
   explicit user instructions in the current turn still win.
-- When a user wants tokens from design.md, CSS, theme/tokens JSON, Tailwind
-  config, local files, or the current design, call `import-design-tokens` and
-  preserve its `tokens`, `filesAnalyzed`, and provenance in your answer. Manual
-  `apply-design-token-edit` / one-by-one token entry is the fallback for a small
-  one-off token, not the primary import workflow. For Figma variables/styles or
-  raw `.fig` files, keep using Builder-backed design-system indexing instead of
-  local `.fig` parsing.
+- For reusable design-system setup from Figma, connected code/GitHub, local
+  code/design files, or optional `design.md`, use Builder-backed DSI indexing
+  through `index-design-system-with-builder` or `import-file --format fig`.
+  Pass readable `design.md` content as `designMd`, use the returned local design
+  system id in Design flows, and call `get-design-system` before generation to
+  hydrate Builder docs/tokens when available. Do not create a duplicate local
+  design system from raw Figma/code sources.
+- When a user wants one-off tokens from design.md, CSS, theme/tokens JSON,
+  Tailwind config, local files, or the current design, call
+  `import-design-tokens` and preserve its `tokens`, `filesAnalyzed`, and
+  provenance in your answer. Manual `apply-design-token-edit` / one-by-one
+  token entry is the fallback for a small one-off token, not the primary import
+  workflow.
 - Persist useful work early: create/update the design and files as soon as a
   coherent candidate exists, then iterate.
 - For non-trivial new design prompts, ask before generating: create/open the

package/corpus/templates/design/actions/get-design-system.ts

@@ -1,4 +1,8 @@
 import { defineAction } from "@agent-native/core";
+import {
+  hydrateBuilderDesignSystemReference,
+  parseBuilderDesignSystemProxyReference,
+} from "@agent-native/core/server";
 import { resolveAccess } from "@agent-native/core/sharing";
 import { z } from "zod";
 
@@ -19,6 +23,22 @@ export default defineAction({
     }
 
     const row = access.resource;
+    const builderReference = parseBuilderDesignSystemProxyReference(row.data);
+    const builder = builderReference
+      ? await hydrateBuilderDesignSystemReference(builderReference).catch(
+          (error) => ({
+            ...builderReference,
+            docs: [],
+            tokenValues: {},
+            docCount: 0,
+            warning:
+              error instanceof Error
+                ? error.message
+                : "Builder design-system docs could not be loaded.",
+          }),
+        )
+      : null;
+
     return {
       id: row.id,
       title: row.title,
@@ -30,6 +50,7 @@ export default defineAction({
       visibility: row.visibility,
       createdAt: row.createdAt,
       updatedAt: row.updatedAt,
+      builder,
     };
   },
 });

package/corpus/templates/design/actions/index-design-system-with-builder.ts

@@ -1,7 +1,7 @@
 import { defineAction } from "@agent-native/core";
 import {
+  buildBuilderDesignSystemIndexFiles,
   startBuilderDesignSystemIndex,
-  type BuilderDesignSystemIndexFile,
 } from "@agent-native/core/server";
 import {
   getRequestOrgId,
@@ -11,50 +11,17 @@ import { z } from "zod";
 
 import { upsertBuilderProxyDesignSystem } from "../server/lib/builder-design-system-proxy.js";
 
-const MAX_CODE_FILES = 50;
-const MAX_TOTAL_CODE_BYTES = 2 * 1024 * 1024;
-
 const codeFileSchema = z.object({
   filename: z.string().trim().min(1).describe("File name or relative path"),
   content: z.string().describe("Raw text content of the code/design file"),
   mimeType: z.string().trim().optional().describe("Optional MIME type"),
 });
 
-function mimeTypeForFilename(filename: string, explicit?: string): string {
-  if (explicit?.trim()) return explicit.trim();
-  const lower = filename.toLowerCase();
-  if (lower.endsWith(".css")) return "text/css";
-  if (lower.endsWith(".json")) return "application/json";
-  if (lower.endsWith(".md") || lower.endsWith(".mdx")) return "text/markdown";
-  if (lower.endsWith(".html")) return "text/html";
-  if (lower.endsWith(".svg")) return "image/svg+xml";
-  return "text/plain";
-}
-
-function makeFiles(
-  codeFiles: Array<z.infer<typeof codeFileSchema>> | undefined,
-): BuilderDesignSystemIndexFile[] {
-  const encoder = new TextEncoder();
-  const files: BuilderDesignSystemIndexFile[] = [];
-  let totalBytes = 0;
-  for (const file of (codeFiles ?? []).slice(0, MAX_CODE_FILES)) {
-    const data = encoder.encode(file.content);
-    if (totalBytes + data.byteLength > MAX_TOTAL_CODE_BYTES) break;
-    totalBytes += data.byteLength;
-    files.push({
-      name: file.filename.replace(/^\/+/, "") || "code.txt",
-      data,
-      mimeType: mimeTypeForFilename(file.filename, file.mimeType),
-    });
-  }
-  return files;
-}
-
 export default defineAction({
   description:
-    "Start Builder design-system indexing from a GitHub repository and/or code files. " +
+    "Start Builder DSI design-system indexing from connected code, a GitHub repository, code/design files, and optional design.md guidance. " +
     "Use this instead of local import-code/import-github when the user wants a reusable brand kit or design system. " +
-    "Requires Builder.io to be connected; Builder owns the indexed design-system docs, generated guidance, and job state.",
+    "Requires Builder.io to be connected; Builder owns the indexed design-system docs, generated guidance, token/component extraction, and job state.",
   schema: z.object({
     projectName: z
       .string()
@@ -76,6 +43,12 @@ export default defineAction({
       .array(codeFileSchema)
       .optional()
       .describe("Optional inlined code/design files to upload to Builder"),
+    designMd: z
+      .string()
+      .optional()
+      .describe(
+        "Optional design.md guidance to upload to Builder DSI alongside Figma/code sources",
+      ),
   }),
   run: async ({
     projectName,
@@ -83,8 +56,12 @@ export default defineAction({
     githubRepoUrl,
     connectedProjectId,
     codeFiles,
+    designMd,
   }) => {
-    const files = makeFiles(codeFiles);
+    const files = buildBuilderDesignSystemIndexFiles({
+      codeFiles,
+      designMd,
+    });
     const result = await startBuilderDesignSystemIndex({
       projectName,
       description,

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 { IconFiles, IconSearch } from "@tabler/icons-react";
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 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

@@ -19,11 +19,16 @@ import {
   ContextMenuSeparator,
   ContextMenuTrigger,
 } from "@/components/ui/context-menu";
+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

@@ -69,7 +69,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",

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

@@ -34,7 +34,11 @@ 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/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/hooks/useDesignHotkeys.ts

@@ -174,6 +174,12 @@ export function isDesignHotkeyEditableTarget(target: EventTarget | null) {
   ) {
     return true;
   }
+  if (
+    editable instanceof HTMLElement &&
+    editable.getAttribute("role") === "textbox"
+  ) {
+    return true;
+  }
   const tagName = editable.tagName.toLowerCase();
   return tagName === "input" || tagName === "textarea" || tagName === "select";
 }

package/corpus/templates/design/app/i18n/zh-TW.ts

@@ -746,20 +746,20 @@ const messages = {
     continue: "繼續生成",
     title: "設定您的設計系統",
     description:
-      "提供來源的任意組合。您提供的脈絡越多，擷取的設計系統就越準確。",
-    figmaParsingTitle: "正在解析您的 Figma 檔案...",
-    figmaParsingDescription: "解碼檔案並擷取品牌權杖",
-    uploadFig: "上傳.fig 檔案",
-    figmaSaveLocalCopy: "在Figma中：檔案->儲存本機副本",
+      "透過 Builder DSI 連接 Figma、程式碼和選用的 design.md 指引。脈絡越多，代理得到的系統越準確。",
+    figmaParsingTitle: "正在啟動 Builder DSI 索引...",
+    figmaParsingDescription: "Builder 會擷取權杖、元件、資產和使用指引",
+    uploadFig: "連接 Figma .fig 檔案",
+    figmaSaveLocalCopy: "上傳 Figma 本機副本：File -> Save local copy",
     websiteUrl: "網站 URL",
     add: "新增",
     githubRepository: "GitHub 儲存庫",
     privateRepoPrefix: "私人倉庫需要一個細粒度的權杖，另存為",
     privateRepoSuffix: "具有內容讀取權限。",
-    localCodeFiles: "本機程式碼檔案",
-    dropCodeFiles: "將 CSS、Tailwind 設定、主題檔案拖放到此處，或點選瀏覽",
+    localCodeFiles: "連接程式碼檔案",
+    dropCodeFiles: "將 CSS、Tailwind 設定、主題檔案或 design.md 拖放到此處",
     codeFilePatterns:
-      "檔案型別: .css、.scss、tailwind.config.*、theme.*、tokens.*、package.json",
+      "檔案型別: .css、.scss、tailwind.config.*、theme.*、tokens.*、design.md、package.json",
     documents: "檔案和簡報",
     documentsHelp: "PPTX、DOCX、PDF、XLSX - 品牌指南、推介材料、風格檔案",
     visualReferences: "螢幕截圖和視覺參考",
@@ -800,21 +800,22 @@ const messages = {
     },
     sections: {
       figma: {
-        title: "從 Figma 檔案開始",
+        title: "連接 Figma",
         description:
-          "上傳.fig，我們會將品牌（顏色、字型比例、簽名漸變和品牌特徵簡介）深入擷取到即用型設計系統中。",
+          "上傳 .fig，Builder DSI 會將權杖、元件、資產和品牌指引索引成可重用的設計系統。",
       },
       company: {
         title: "公司/品牌",
         description: "名稱、描述和網站",
       },
       code: {
-        title: "程式碼",
-        description: "GitHub 儲存庫或本機檔案 - 設計權杖的最強信號",
+        title: "連接程式碼",
+        description:
+          "GitHub 儲存庫、本機程式碼檔案或 design.md 會交給 Builder DSI 索引。",
       },
       designFiles: {
-        title: "設計檔案",
-        description: "Figma 檔案、檔案、螢幕截圖、品牌資產",
+        title: "參考檔案",
+        description: "文件、截圖和品牌資產會補充 Builder DSI 的索引脈絡",
       },
       importExisting: {
         title: "從現有的匯入",