@agent-native/core 0.85.6 → 0.86.0

package/corpus/templates/design/app/components/design/code-workbench/workspace/create-providers.ts

@@ -0,0 +1,39 @@
+import { createInlineProvider } from "./inline-provider";
+import { createLocalhostProvider } from "./localhost-provider";
+import type { WorkspaceProvider } from "./types";
+
+export interface CreateWorkspaceProvidersOptions {
+  designId: string;
+  canEdit: boolean;
+  localhostConnections: Array<{
+    connectionId: string;
+    label: string;
+  }>;
+}
+
+/**
+ * Compose the workspace roots shown in the workbench explorer: the design's
+ * SQL-backed files first, then one root per connected local app. Future
+ * remote-container sources slot in here as additional providers.
+ */
+export function createWorkspaceProviders(
+  options: CreateWorkspaceProvidersOptions,
+): WorkspaceProvider[] {
+  const providers: WorkspaceProvider[] = [
+    createInlineProvider({
+      designId: options.designId,
+      canEdit: options.canEdit,
+    }),
+  ];
+  for (const connection of options.localhostConnections) {
+    providers.push(
+      createLocalhostProvider({
+        connectionId: connection.connectionId,
+        label: connection.label,
+        canEdit: options.canEdit,
+        designId: options.designId,
+      }),
+    );
+  }
+  return providers;
+}

package/corpus/templates/design/app/components/design/code-workbench/workspace/inline-provider.ts

@@ -0,0 +1,196 @@
+import { callAction } from "@agent-native/core/client";
+
+import {
+  WorkspaceStaleVersionError,
+  type WorkspaceCapabilities,
+  type WorkspaceFileEntry,
+  type WorkspaceProvider,
+  type WorkspaceReadResult,
+  type WorkspaceWriteResult,
+} from "./types";
+
+/**
+ * Workspace provider over the design's SQL-backed inline source files
+ * (`designfs://<designId>/`), implemented against the existing agent-facing
+ * source-workspace action surface: list-source-files, read-source-file,
+ * preview-source-edit, apply-source-edit, create-file, update-file,
+ * delete-file. This provider does not introduce any new backend surface —
+ * it is a thin adapter so the workbench can treat inline files as one
+ * `WorkspaceProvider` root alongside future localhost/remote roots.
+ */
+
+interface ListSourceFilesResponse {
+  files: Array<{
+    path: string;
+    displayName?: string;
+    fileId?: string;
+    readonly?: boolean;
+    language?: string;
+  }>;
+}
+
+interface ReadSourceFileResponse {
+  content: string;
+  versionHash?: string;
+  readonly?: boolean;
+  language?: string;
+  fileId?: string;
+}
+
+interface PreviewSourceEditResponse {
+  okToApply: boolean;
+  currentVersionHash?: string;
+  message?: string;
+}
+
+interface ApplySourceEditResponse {
+  versionHash?: string;
+}
+
+interface CreateFileResponse {
+  id: string;
+}
+
+export interface CreateInlineProviderOptions {
+  designId: string;
+  canEdit: boolean;
+}
+
+export function createInlineProvider(
+  options: CreateInlineProviderOptions,
+): WorkspaceProvider {
+  const { designId, canEdit } = options;
+  const key = `inline:${designId}`;
+  // path -> fileId, populated by listFiles and refreshed on demand so
+  // renameFile/deleteFile can resolve a file's id without re-listing when
+  // it is already known.
+  const fileIdByPath = new Map<string, string>();
+
+  const capabilities: WorkspaceCapabilities = {
+    write: canEdit,
+    create: canEdit,
+    rename: canEdit,
+    delete: canEdit,
+  };
+
+  async function listFiles(): Promise<WorkspaceFileEntry[]> {
+    const response = await callAction<ListSourceFilesResponse>(
+      "list-source-files",
+      { designId },
+      { method: "GET" },
+    );
+    const entries: WorkspaceFileEntry[] = response.files.map((file) => {
+      if (file.fileId) fileIdByPath.set(file.path, file.fileId);
+      return {
+        path: file.path,
+        displayName: file.displayName,
+        fileId: file.fileId,
+        readonly: file.readonly,
+      };
+    });
+    return entries;
+  }
+
+  async function readFile(path: string): Promise<WorkspaceReadResult> {
+    const response = await callAction<ReadSourceFileResponse>(
+      "read-source-file",
+      { designId, path },
+      { method: "GET" },
+    );
+    if (response.fileId) fileIdByPath.set(path, response.fileId);
+    return {
+      content: response.content,
+      versionHash: response.versionHash,
+      readonly: response.readonly,
+      language: response.language,
+      fileId: response.fileId,
+    };
+  }
+
+  /**
+   * Persist content via the exact preview→apply chain used by the old
+   * CodeWorkbenchHost.saveSelectedFile: preview first with a full-replace
+   * edit; if the backend reports the file changed underneath us
+   * (okToApply === false), throw WorkspaceStaleVersionError instead of
+   * applying; otherwise apply using the preview's currentVersionHash (falling
+   * back to the original expectedVersionHash) so a benign no-op preview
+   * still chains through the same version the preview observed.
+   */
+  async function writeFile(
+    path: string,
+    content: string,
+    expectedVersionHash?: string,
+  ): Promise<WorkspaceWriteResult> {
+    const edit = { kind: "full-replace" as const, content };
+    const preview = await callAction<PreviewSourceEditResponse>(
+      "preview-source-edit",
+      { designId, path, expectedVersionHash, edit },
+    );
+    if (preview.okToApply === false) {
+      throw new WorkspaceStaleVersionError(
+        preview.message ||
+          "Source file changed since it was read" /* i18n-ignore */,
+      );
+    }
+    const result = await callAction<ApplySourceEditResponse>(
+      "apply-source-edit",
+      {
+        designId,
+        path,
+        expectedVersionHash: preview.currentVersionHash ?? expectedVersionHash,
+        edit,
+      },
+    );
+    return { versionHash: result.versionHash };
+  }
+
+  async function createFile(path: string, content: string): Promise<void> {
+    const response = await callAction<CreateFileResponse>("create-file", {
+      designId,
+      filename: path,
+      content,
+      fileType: "html",
+    });
+    if (response.id) fileIdByPath.set(path, response.id);
+  }
+
+  async function resolveFileId(path: string): Promise<string> {
+    const cached = fileIdByPath.get(path);
+    if (cached) return cached;
+    // Refresh from the server once before giving up — the cache may be cold
+    // (e.g. a fresh provider instance that never called listFiles for this
+    // path yet).
+    await listFiles();
+    const refreshed = fileIdByPath.get(path);
+    if (!refreshed) {
+      throw new Error(`Could not resolve file id for "${path}"`);
+    }
+    return refreshed;
+  }
+
+  async function renameFile(path: string, nextPath: string): Promise<void> {
+    const id = await resolveFileId(path);
+    await callAction("update-file", { id, filename: nextPath });
+    fileIdByPath.delete(path);
+    fileIdByPath.set(nextPath, id);
+  }
+
+  async function deleteFile(path: string): Promise<void> {
+    const id = await resolveFileId(path);
+    await callAction("delete-file", { id });
+    fileIdByPath.delete(path);
+  }
+
+  return {
+    key,
+    kind: "inline",
+    label: "Design files" /* i18n-ignore */,
+    capabilities,
+    listFiles,
+    readFile,
+    writeFile,
+    createFile,
+    renameFile,
+    deleteFile,
+  };
+}

package/corpus/templates/design/app/components/design/code-workbench/workspace/localhost-provider.ts

@@ -0,0 +1,177 @@
+import { callAction } from "@agent-native/core/client";
+
+import {
+  WorkspaceStaleVersionError,
+  type WorkspaceCapabilities,
+  type WorkspaceFileEntry,
+  type WorkspaceProvider,
+  type WorkspaceReadResult,
+  type WorkspaceWriteResult,
+} from "./types";
+
+/**
+ * Workspace provider over a connected local app's real files, via the
+ * localhost design bridge (list-local-files, read-local-file,
+ * write-local-file actions -> packages/core design-connect bridge).
+ *
+ * Reads require only editor access + a valid bridge connection. Writes
+ * additionally require a user-approved write-consent grant (verified
+ * server-side by write-local-file / verifyWriteGrant); a missing or expired
+ * grant surfaces here as LocalWriteConsentRequiredError so the UI can run the
+ * existing LocalhostWriteConsentDialog flow and retry.
+ */
+
+export class LocalWriteConsentRequiredError extends Error {
+  connectionId: string;
+  /** The relative path the consent dialog should show/scope to, when known. */
+  path?: string;
+
+  constructor(connectionId: string, path?: string, message?: string) {
+    super(
+      message ??
+        "Local write consent is required before saving this file" /* i18n-ignore */,
+    );
+    this.name = "LocalWriteConsentRequiredError";
+    this.connectionId = connectionId;
+    this.path = path;
+  }
+}
+
+interface ListLocalFilesResponse {
+  files: Array<{ path: string; size: number }>;
+  truncated: boolean;
+}
+
+interface ReadLocalFileResponse {
+  content: string;
+  versionHash?: string;
+  readonly?: boolean;
+}
+
+interface WriteLocalFileResponse {
+  written: boolean;
+  versionHash?: string;
+}
+
+/** Detect the write-local-file action's grant-related error messages. */
+function isWriteConsentError(error: unknown): boolean {
+  if (!(error instanceof Error)) return false;
+  return (
+    /write-consent grant/i.test(error.message) ||
+    /grant expired/i.test(error.message)
+  );
+}
+
+/** Detect the bridge's version-conflict error message (see design-connect.ts). */
+function isVersionConflictError(error: unknown): boolean {
+  if (!(error instanceof Error)) return false;
+  return /version conflict/i.test(error.message);
+}
+
+export interface CreateLocalhostProviderOptions {
+  connectionId: string;
+  label: string;
+  /**
+   * Whether the current user has editor access to the design. Local files are
+   * editable whenever this is true — the write-consent grant is enforced
+   * server-side at save time, and a missing grant surfaces as
+   * LocalWriteConsentRequiredError so the shell can run the consent dialog and
+   * retry the save.
+   */
+  canEdit: boolean;
+  /**
+   * The owning design's id. write-local-file requires {designId,
+   * connectionId, relPath, content} — designId is not optional server-side
+   * (verifyWriteGrant looks up the grant by designId + connectionId +
+   * ownerEmail).
+   */
+  designId: string;
+}
+
+export function createLocalhostProvider(
+  options: CreateLocalhostProviderOptions,
+): WorkspaceProvider {
+  const { connectionId, label, canEdit, designId } = options;
+  const key = `localhost:${connectionId}`;
+
+  const capabilities: WorkspaceCapabilities = {
+    write: canEdit,
+    create: false,
+    rename: false,
+    delete: false,
+  };
+
+  async function listFiles(): Promise<WorkspaceFileEntry[]> {
+    const response = await callAction<ListLocalFilesResponse>(
+      "list-local-files",
+      { designId, connectionId },
+      { method: "GET" },
+    );
+    return response.files.map((file) => ({
+      path: file.path,
+      size: file.size,
+      readonly: !canEdit,
+    }));
+  }
+
+  async function readFile(path: string): Promise<WorkspaceReadResult> {
+    const response = await callAction<ReadLocalFileResponse>(
+      "read-local-file",
+      { designId, connectionId, path },
+      { method: "GET" },
+    );
+    return {
+      content: response.content,
+      versionHash: response.versionHash,
+      readonly: response.readonly ?? !canEdit,
+    };
+  }
+
+  async function writeFile(
+    path: string,
+    content: string,
+    expectedVersionHash?: string,
+  ): Promise<WorkspaceWriteResult> {
+    // write-local-file's schema uses relPath (not path) and a bare content
+    // field (not a {mode} wrapper) — see templates/design/actions/write-local-file.ts.
+    try {
+      const response = await callAction<WriteLocalFileResponse>(
+        "write-local-file",
+        {
+          designId,
+          connectionId,
+          relPath: path,
+          content,
+          expectedVersionHash,
+        },
+      );
+      return { versionHash: response.versionHash };
+    } catch (error) {
+      if (isVersionConflictError(error)) {
+        throw new WorkspaceStaleVersionError(
+          error instanceof Error
+            ? error.message
+            : "File changed on disk since it was last read" /* i18n-ignore */,
+        );
+      }
+      if (isWriteConsentError(error)) {
+        throw new LocalWriteConsentRequiredError(
+          connectionId,
+          path,
+          error instanceof Error ? error.message : undefined,
+        );
+      }
+      throw error;
+    }
+  }
+
+  return {
+    key,
+    kind: "localhost",
+    label,
+    capabilities,
+    listFiles,
+    readFile,
+    writeFile,
+  };
+}

package/corpus/templates/design/app/components/design/code-workbench/workspace/tree.ts

@@ -0,0 +1,110 @@
+import type { WorkspaceFileEntry } from "./types";
+
+/**
+ * Pure file-tree construction for the explorer. Given a flat list of
+ * root-relative paths, builds a folders-first, case-insensitive alphabetical
+ * tree — matching VS Code explorer ordering.
+ */
+
+export interface TreeFileNode {
+  kind: "file";
+  path: string;
+  name: string;
+  entry: WorkspaceFileEntry;
+}
+
+export interface TreeFolderNode {
+  kind: "folder";
+  path: string;
+  name: string;
+  children: TreeNode[];
+}
+
+export type TreeNode = TreeFileNode | TreeFolderNode;
+
+function compareNames(a: string, b: string): number {
+  return a.localeCompare(b, undefined, { sensitivity: "base" });
+}
+
+function sortTree(nodes: TreeNode[]): TreeNode[] {
+  const folders = nodes
+    .filter((node): node is TreeFolderNode => node.kind === "folder")
+    .sort((a, b) => compareNames(a.name, b.name))
+    .map((folder) => ({ ...folder, children: sortTree(folder.children) }));
+  const files = nodes
+    .filter((node): node is TreeFileNode => node.kind === "file")
+    .sort((a, b) => compareNames(a.name, b.name));
+  return [...folders, ...files];
+}
+
+/**
+ * Build a folders-first tree from a flat list of workspace file entries.
+ * Folders are derived from `/`-separated path segments; each level is sorted
+ * alphabetically (case-insensitive) with folders before files.
+ */
+export function buildFileTree(entries: WorkspaceFileEntry[]): TreeNode[] {
+  const root: TreeNode[] = [];
+  const folderIndex = new Map<string, TreeFolderNode>();
+
+  for (const entry of entries) {
+    const segments = entry.path.split("/").filter(Boolean);
+    if (segments.length === 0) continue;
+    let siblings = root;
+    let currentPath = "";
+    for (let index = 0; index < segments.length - 1; index += 1) {
+      const segment = segments[index]!;
+      currentPath = currentPath ? `${currentPath}/${segment}` : segment;
+      let folder = folderIndex.get(currentPath);
+      if (!folder) {
+        folder = {
+          kind: "folder",
+          path: currentPath,
+          name: segment,
+          children: [],
+        };
+        folderIndex.set(currentPath, folder);
+        siblings.push(folder);
+      }
+      siblings = folder.children;
+    }
+    const fileName = segments[segments.length - 1]!;
+    siblings.push({
+      kind: "file",
+      path: entry.path,
+      name: entry.displayName || fileName,
+      entry,
+    });
+  }
+
+  return sortTree(root);
+}
+
+export interface FlatTreeRow {
+  node: TreeNode;
+  path: string;
+  depth: number;
+  parentPath: string | null;
+}
+
+/**
+ * Flatten a tree into the currently visible rows given a set of expanded
+ * folder paths. Used for keyboard nav (Up/Down/typeahead) over the rendered
+ * rows without re-deriving DOM order.
+ */
+export function flattenVisibleTree(
+  nodes: TreeNode[],
+  expandedPaths: ReadonlySet<string> | readonly string[],
+  depth = 0,
+  parentPath: string | null = null,
+  rows: FlatTreeRow[] = [],
+): FlatTreeRow[] {
+  const expanded =
+    expandedPaths instanceof Set ? expandedPaths : new Set(expandedPaths);
+  for (const node of nodes) {
+    rows.push({ node, path: node.path, depth, parentPath });
+    if (node.kind === "folder" && expanded.has(node.path)) {
+      flattenVisibleTree(node.children, expanded, depth + 1, node.path, rows);
+    }
+  }
+  return rows;
+}

package/corpus/templates/design/app/components/design/code-workbench/workspace/types.ts

@@ -0,0 +1,103 @@
+/**
+ * Workspace provider contract for the code workbench.
+ *
+ * A provider is one workspace root in the explorer: the design's SQL-backed
+ * files (`inline`) or a connected local app's real files (`localhost`).
+ * Future remote-container sources become additional providers implementing
+ * this same interface.
+ */
+
+export type WorkspaceRootKind = "inline" | "localhost";
+
+export interface WorkspaceCapabilities {
+  write: boolean;
+  create: boolean;
+  rename: boolean;
+  delete: boolean;
+}
+
+export interface WorkspaceFileEntry {
+  /** Root-relative path, `/`-separated, no leading slash. */
+  path: string;
+  displayName?: string;
+  fileId?: string;
+  readonly?: boolean;
+  size?: number;
+}
+
+export interface WorkspaceReadResult {
+  content: string;
+  versionHash?: string;
+  readonly?: boolean;
+  language?: string;
+  fileId?: string;
+}
+
+export interface WorkspaceWriteResult {
+  versionHash?: string;
+}
+
+export interface WorkspaceProvider {
+  /** Stable key: `inline:<designId>` or `localhost:<connectionId>`. */
+  key: string;
+  kind: WorkspaceRootKind;
+  /** Explorer section label, e.g. "Design files" or the local app name. */
+  label: string;
+  capabilities: WorkspaceCapabilities;
+  listFiles(): Promise<WorkspaceFileEntry[]>;
+  readFile(path: string): Promise<WorkspaceReadResult>;
+  /**
+   * Persist content. Implementations own their concurrency story (the inline
+   * provider chains preview-source-edit → apply-source-edit with version
+   * hashes). Throws on failure; throws WorkspaceStaleVersionError when the
+   * file changed underneath the caller.
+   */
+  writeFile(
+    path: string,
+    content: string,
+    expectedVersionHash?: string,
+  ): Promise<WorkspaceWriteResult>;
+  createFile?(path: string, content: string): Promise<void>;
+  renameFile?(path: string, nextPath: string): Promise<void>;
+  deleteFile?(path: string): Promise<void>;
+}
+
+export class WorkspaceStaleVersionError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = "WorkspaceStaleVersionError";
+  }
+}
+
+const URI_SEPARATOR = "::";
+
+/** Workbench-internal uri: `<providerKey>::<path>`. */
+export function workbenchUri(providerKey: string, path: string): string {
+  return `${providerKey}${URI_SEPARATOR}${path.replace(/^\/+/, "")}`;
+}
+
+export function parseWorkbenchUri(uri: string): {
+  providerKey: string;
+  path: string;
+} {
+  const index = uri.indexOf(URI_SEPARATOR);
+  if (index < 0) return { providerKey: "", path: uri };
+  return {
+    providerKey: uri.slice(0, index),
+    path: uri.slice(index + URI_SEPARATOR.length),
+  };
+}
+
+export function providerKindFromKey(providerKey: string): WorkspaceRootKind {
+  return providerKey.startsWith("localhost:") ? "localhost" : "inline";
+}
+
+export function baseName(path: string): string {
+  const segments = path.split("/").filter(Boolean);
+  return segments[segments.length - 1] ?? path;
+}
+
+export function dirName(path: string): string {
+  const segments = path.split("/").filter(Boolean);
+  return segments.slice(0, -1).join("/");
+}

package/corpus/templates/design/app/components/design/code-workbench-theme.ts

@@ -22,6 +22,71 @@ const WORKBENCH_THEME_VARS: Record<string, string[]> = {
   "--workbench-button-fg": ["--foreground"],
   "--workbench-selection-bg": ["--design-editor-selection-color", "--accent"],
   "--workbench-dirty": ["--warning", "--destructive"],
+
+  // Activity bar (40px icon rail).
+  "--workbench-activitybar-bg": [
+    "--design-editor-control-bg",
+    "--design-editor-panel-bg",
+  ],
+  "--workbench-activitybar-fg": ["--muted-foreground"],
+
+  // Tab strip.
+  "--workbench-tabbar-bg": ["--design-editor-control-bg", "--muted"],
+  "--workbench-tab-active-bg": ["--design-editor-panel-bg", "--background"],
+  "--workbench-tab-active-fg": ["--foreground"],
+  "--workbench-tab-inactive-bg": ["--design-editor-control-bg", "--muted"],
+  "--workbench-tab-inactive-fg": ["--muted-foreground"],
+  "--workbench-tab-border": ["--design-editor-control-border", "--border"],
+
+  // Breadcrumbs.
+  "--workbench-breadcrumb-fg": ["--muted-foreground"],
+
+  // Status bar.
+  "--workbench-statusbar-bg": ["--design-editor-control-bg", "--muted"],
+  "--workbench-statusbar-fg": ["--muted-foreground"],
+
+  // List rows (explorer tree, search results, suggest widget).
+  "--workbench-list-hover-bg": [
+    "--design-editor-layer-hover-color",
+    "--accent",
+  ],
+  "--workbench-list-active-bg": [
+    "--design-editor-active-row-color",
+    "--accent",
+  ],
+  "--workbench-list-selection-bg": [
+    "--design-editor-selection-color",
+    "--accent",
+  ],
+
+  // Inputs (search box, quick input, rename inline input).
+  "--workbench-input-bg": ["--design-editor-control-bg", "--background"],
+  "--workbench-input-border": ["--design-editor-control-border", "--border"],
+  "--workbench-input-fg": ["--foreground"],
+
+  // Quick input overlay + badges.
+  "--workbench-quickinput-bg": ["--design-editor-panel-bg", "--popover"],
+  "--workbench-badge-bg": ["--design-editor-accent-color", "--primary"],
+  "--workbench-badge-fg": ["--primary-foreground"],
+
+  // Search match highlight.
+  "--workbench-search-match-bg": [
+    "--design-editor-selection-color",
+    "--accent",
+  ],
+};
+
+/**
+ * Error/warning colors are color-scheme aware literals (not sourced from an
+ * app design token) since the app doesn't define semantic red/amber tokens.
+ * Kept modest saturation to match the "clean Figma" palette.
+ */
+const WORKBENCH_STATUS_COLORS: Record<
+  "light" | "dark",
+  { error: string; warning: string }
+> = {
+  light: { error: "hsl(0 72% 51%)", warning: "hsl(38 92% 42%)" },
+  dark: { error: "hsl(0 72% 62%)", warning: "hsl(38 92% 58%)" },
 };
 
 const HEX_COLOR_RE = /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
@@ -146,5 +211,8 @@ export function readCodeWorkbenchTheme(
     rootStyles.colorScheme.includes("dark")
       ? "dark"
       : "light";
+  const statusColors = WORKBENCH_STATUS_COLORS[colorScheme];
+  values["--workbench-error"] = resolveCssColorValue(statusColors.error);
+  values["--workbench-warning"] = resolveCssColorValue(statusColors.warning);
   return { colorScheme, values };
 }