@agent-native/core 0.85.6 → 0.86.0

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

@@ -0,0 +1,53 @@
+import { cn } from "@/lib/utils";
+
+import { ExplorerView } from "./explorer/ExplorerView";
+import { SearchView } from "./search/SearchView";
+import { useWorkbench } from "./store";
+
+export interface SideBarProps {
+  designId: string;
+  searchSeed: { value?: string; token: number };
+  explorerFocusToken: number;
+  onRequestLocalWriteConsent?: (
+    connectionId: string,
+    retry: () => void,
+  ) => void;
+}
+
+const VIEW_LABELS: Record<"explorer" | "search", string> = {
+  explorer: "Explorer" /* i18n-ignore */,
+  search: "Search" /* i18n-ignore */,
+};
+
+/**
+ * Sidebar shell: 35px uppercase header + 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.
+ */
+export function SideBar({
+  designId,
+  searchSeed,
+  explorerFocusToken,
+  onRequestLocalWriteConsent,
+}: SideBarProps) {
+  const { state } = 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>
+      <div className={cn("min-h-0 flex-1", view !== "explorer" && "hidden")}>
+        <ExplorerView
+          designId={designId}
+          explorerFocusToken={explorerFocusToken}
+          onRequestLocalWriteConsent={onRequestLocalWriteConsent}
+        />
+      </div>
+      <div className={cn("min-h-0 flex-1", view !== "search" && "hidden")}>
+        <SearchView searchSeed={searchSeed} />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,339 @@
+import type * as monaco from "monaco-editor";
+
+import type { WorkbenchApi } from "./store";
+
+/**
+ * Workbench command registry + keybinding matching.
+ *
+ * Commands power the command palette (⇧⌘P) and the workbench-level keybinding
+ * dispatcher on the workbench root. Monaco's own text-editing keybindings
+ * (multi-cursor, find, line moves…) are NOT registered here — Monaco owns them
+ * while the editor has focus.
+ *
+ * Keybinding strings: lowercase tokens joined by `+`. Modifier tokens:
+ * `$mod` (⌘ on macOS, Ctrl elsewhere), `ctrl`, `alt`, `shift`. Key token is
+ * last: a letter/digit, `f1`–`f12`, `[`, `]`, `arrowleft`, `arrowright`,
+ * `arrowup`, `arrowdown`, `enter`, `escape`.
+ */
+
+export interface WorkbenchUiHandles {
+  /** Open the quick input overlay with the given prefill ("" | ">" | ":" …). */
+  openQuickInput(prefill: string): void;
+  /** Focus the explorer tree (switching the side view if needed). */
+  focusExplorer(): void;
+  /** Open the search view, optionally seeding the query. */
+  openSearch(seed?: string): void;
+  /** The live Monaco editor instance, when mounted. */
+  getEditor(): monaco.editor.IStandaloneCodeEditor | null;
+  /** Surface a command error to the user (toast). */
+  reportError(message: string): void;
+  /**
+   * Ask the shell to run the local-file write-consent flow, then retry the
+   * failed operation. Wired to the design editor's consent dialog.
+   */
+  requestLocalWriteConsent?(
+    connectionId: string,
+    retry: () => void,
+    filePath?: string,
+  ): void;
+}
+
+/**
+ * Detect the localhost provider's consent error without importing its module
+ * (keeps the command registry decoupled from provider implementations).
+ */
+function localWriteConsentDetails(
+  error: unknown,
+): { connectionId: string; filePath?: string } | null {
+  if (
+    error instanceof Error &&
+    error.name === "LocalWriteConsentRequiredError" &&
+    typeof (error as { connectionId?: unknown }).connectionId === "string"
+  ) {
+    const details = error as unknown as {
+      connectionId: string;
+      path?: unknown;
+    };
+    return {
+      connectionId: details.connectionId,
+      filePath: typeof details.path === "string" ? details.path : undefined,
+    };
+  }
+  return null;
+}
+
+async function saveWithConsentRetry(
+  context: WorkbenchCommandContext,
+  run: () => Promise<void>,
+) {
+  try {
+    await run();
+  } catch (error) {
+    const consent = localWriteConsentDetails(error);
+    if (consent && context.ui.requestLocalWriteConsent) {
+      context.ui.requestLocalWriteConsent(
+        consent.connectionId,
+        () => {
+          run().catch((retryError) => {
+            context.ui.reportError(
+              retryError instanceof Error
+                ? retryError.message
+                : "Could not save file" /* i18n-ignore */,
+            );
+          });
+        },
+        consent.filePath,
+      );
+      return;
+    }
+    throw error;
+  }
+}
+
+export interface WorkbenchCommandContext {
+  api: WorkbenchApi;
+  ui: WorkbenchUiHandles;
+}
+
+export interface WorkbenchCommand {
+  id: string;
+  title: string;
+  category?: string;
+  keybindings?: string[];
+  /** Hide from the command palette (still keybinding-dispatchable). */
+  showInPalette?: boolean;
+  when?: (context: WorkbenchCommandContext) => boolean;
+  run: (context: WorkbenchCommandContext) => void | Promise<void>;
+}
+
+const IS_MAC =
+  typeof navigator !== "undefined" &&
+  /Mac|iPhone|iPad/.test(navigator.platform);
+
+interface ParsedKeybinding {
+  mod: boolean;
+  ctrl: boolean;
+  alt: boolean;
+  shift: boolean;
+  key: string;
+}
+
+export function parseKeybinding(binding: string): ParsedKeybinding {
+  const tokens = binding.toLowerCase().split("+");
+  const parsed: ParsedKeybinding = {
+    mod: false,
+    ctrl: false,
+    alt: false,
+    shift: false,
+    key: "",
+  };
+  for (const token of tokens) {
+    if (token === "$mod") parsed.mod = true;
+    else if (token === "ctrl") parsed.ctrl = true;
+    else if (token === "alt") parsed.alt = true;
+    else if (token === "shift") parsed.shift = true;
+    else parsed.key = token;
+  }
+  return parsed;
+}
+
+function eventKeyToken(event: KeyboardEvent): string {
+  // Bracket keys shift on some layouts; match by physical code.
+  if (event.code === "BracketLeft") return "[";
+  if (event.code === "BracketRight") return "]";
+  const key = event.key.toLowerCase();
+  if (key === " ") return "space";
+  return key;
+}
+
+export function matchKeybinding(
+  event: KeyboardEvent,
+  binding: string,
+): boolean {
+  const parsed = parseKeybinding(binding);
+  const wantMeta = IS_MAC ? parsed.mod : false;
+  const wantCtrl = parsed.ctrl || (!IS_MAC && parsed.mod);
+  if (event.metaKey !== wantMeta) return false;
+  if (event.ctrlKey !== wantCtrl) return false;
+  if (event.altKey !== parsed.alt) return false;
+  if (event.shiftKey !== parsed.shift) return false;
+  return eventKeyToken(event) === parsed.key;
+}
+
+const MAC_KEY_LABELS: Record<string, string> = {
+  arrowleft: "←",
+  arrowright: "→",
+  arrowup: "↑",
+  arrowdown: "↓",
+  enter: "↩",
+  escape: "⎋",
+};
+
+/** Human-readable keybinding, e.g. "⇧⌘P" on macOS or "Ctrl+Shift+P". */
+export function formatKeybinding(binding: string): string {
+  const parsed = parseKeybinding(binding);
+  const keyLabel =
+    parsed.key.length === 1 ? parsed.key.toUpperCase() : parsed.key;
+  if (IS_MAC) {
+    return [
+      parsed.ctrl ? "⌃" : "",
+      parsed.alt ? "⌥" : "",
+      parsed.shift ? "⇧" : "",
+      parsed.mod ? "⌘" : "",
+      MAC_KEY_LABELS[parsed.key] ??
+        (keyLabel.startsWith("f") && keyLabel.length <= 3
+          ? keyLabel.toUpperCase()
+          : keyLabel),
+    ].join("");
+  }
+  const parts: string[] = [];
+  if (parsed.mod || parsed.ctrl) parts.push("Ctrl");
+  if (parsed.alt) parts.push("Alt");
+  if (parsed.shift) parts.push("Shift");
+  parts.push(keyLabel.length === 1 ? keyLabel.toUpperCase() : keyLabel);
+  return parts.join("+");
+}
+
+/**
+ * Dispatch a keydown against the command list. Returns true (and prevents
+ * default) when a command ran.
+ */
+export function dispatchKeybinding(
+  event: KeyboardEvent,
+  commands: WorkbenchCommand[],
+  context: WorkbenchCommandContext,
+): boolean {
+  for (const command of commands) {
+    if (!command.keybindings?.length) continue;
+    if (command.when && !command.when(context)) continue;
+    if (
+      command.keybindings.some((binding) => matchKeybinding(event, binding))
+    ) {
+      event.preventDefault();
+      event.stopPropagation();
+      void runCommand(command, context);
+      return true;
+    }
+  }
+  return false;
+}
+
+export async function runCommand(
+  command: WorkbenchCommand,
+  context: WorkbenchCommandContext,
+) {
+  try {
+    await command.run(context);
+  } catch (error) {
+    context.ui.reportError(
+      error instanceof Error
+        ? error.message
+        : "Command failed" /* i18n-ignore */,
+    );
+  }
+}
+
+/**
+ * Core workbench commands. Packet components may append their own commands via
+ * the `extraCommands` prop on CodeWorkbench (not by editing this list).
+ */
+export function createCoreCommands(): WorkbenchCommand[] {
+  return [
+    {
+      id: "workbench.save",
+      title: "File: Save" /* i18n-ignore */,
+      keybindings: ["$mod+s"],
+      run: (context) => saveWithConsentRetry(context, () => context.api.save()),
+    },
+    {
+      id: "workbench.saveAll",
+      title: "File: Save All" /* i18n-ignore */,
+      keybindings: ["$mod+alt+s"],
+      run: (context) =>
+        saveWithConsentRetry(context, () => context.api.saveAll()),
+    },
+    {
+      id: "workbench.quickOpen",
+      title: "Go to File…" /* i18n-ignore */,
+      keybindings: ["$mod+p"],
+      run: ({ ui }) => ui.openQuickInput(""),
+    },
+    {
+      id: "workbench.commandPalette",
+      title: "Command Palette…" /* i18n-ignore */,
+      keybindings: ["$mod+shift+p", "f1"],
+      run: ({ ui }) => ui.openQuickInput(">"),
+    },
+    {
+      id: "workbench.search",
+      title: "Search: Find in Files" /* i18n-ignore */,
+      keybindings: ["$mod+shift+f"],
+      run: ({ ui }) => {
+        const editor = ui.getEditor();
+        const selection = editor?.getSelection();
+        const seed =
+          selection && !selection.isEmpty()
+            ? (editor?.getModel()?.getValueInRange(selection) ?? undefined)
+            : undefined;
+        ui.openSearch(seed);
+      },
+    },
+    {
+      id: "workbench.explorer",
+      title: "View: Show Explorer" /* i18n-ignore */,
+      keybindings: ["$mod+shift+e"],
+      run: ({ ui }) => ui.focusExplorer(),
+    },
+    {
+      id: "workbench.toggleSidebar",
+      title: "View: Toggle Sidebar" /* i18n-ignore */,
+      keybindings: ["$mod+b"],
+      run: ({ api }) => api.toggleSidebar(),
+    },
+    {
+      id: "workbench.nextTab",
+      title: "View: Next Editor" /* i18n-ignore */,
+      keybindings: ["$mod+shift+]", "$mod+alt+arrowright"],
+      run: ({ api }) => api.activateNextTab(1),
+    },
+    {
+      id: "workbench.previousTab",
+      title: "View: Previous Editor" /* i18n-ignore */,
+      keybindings: ["$mod+shift+[", "$mod+alt+arrowleft"],
+      run: ({ api }) => api.activateNextTab(-1),
+    },
+    {
+      id: "workbench.closeTab",
+      title: "View: Close Editor" /* i18n-ignore */,
+      showInPalette: true,
+      run: ({ api }) => {
+        const active = api.getState().activeUri;
+        if (active) api.closeTab(active);
+      },
+    },
+    {
+      id: "editor.formatDocument",
+      title: "Format Document" /* i18n-ignore */,
+      // Shift+Alt+F is Monaco's built-in binding while the editor has focus;
+      // this palette entry covers discoverability.
+      run: ({ ui }) => {
+        void ui.getEditor()?.getAction("editor.action.formatDocument")?.run();
+      },
+    },
+    {
+      id: "editor.gotoSymbol",
+      title: "Go to Symbol in Editor…" /* i18n-ignore */,
+      keybindings: ["$mod+shift+o"],
+      run: ({ ui }) => {
+        ui.getEditor()?.focus();
+        void ui.getEditor()?.getAction("editor.action.quickOutline")?.run();
+      },
+    },
+    {
+      id: "editor.gotoLine",
+      title: "Go to Line/Column…" /* i18n-ignore */,
+      keybindings: ["ctrl+g"],
+      run: ({ ui }) => ui.openQuickInput(":"),
+    },
+  ];
+}

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

@@ -0,0 +1,42 @@
+import { IconChevronRight } from "@tabler/icons-react";
+
+import { FileIcon } from "../explorer/file-icons";
+import { useWorkbench } from "../store";
+import { parseWorkbenchUri } from "../workspace/types";
+
+/**
+ * 24px breadcrumb row for the active tab's path, folder segments then the
+ * filename with its file icon. VS Code parity: muted 11px, chevron
+ * separators, no interactivity beyond hover (segment click-to-navigate is
+ * out of scope for this pass).
+ */
+export function Breadcrumbs() {
+  const { state } = useWorkbench();
+  if (!state.activeUri) return null;
+  const { path } = parseWorkbenchUri(state.activeUri);
+  const segments = path.split("/").filter(Boolean);
+  if (segments.length === 0) return null;
+  const fileName = segments[segments.length - 1];
+  const folderSegments = segments.slice(0, -1);
+
+  return (
+    <div
+      data-testid="workbench-breadcrumbs"
+      className="flex h-6 shrink-0 items-center gap-1 overflow-hidden border-b border-[var(--workbench-border)] px-3 text-[11px] text-[var(--workbench-breadcrumb-fg)]"
+    >
+      {folderSegments.map((segment, index) => (
+        <span
+          key={`${segment}-${index}`}
+          className="flex shrink-0 items-center gap-1"
+        >
+          <span className="truncate">{segment}</span>
+          <IconChevronRight className="size-3 shrink-0 opacity-60" />
+        </span>
+      ))}
+      <span className="flex min-w-0 items-center gap-1">
+        <FileIcon path={fileName} />
+        <span className="truncate text-[var(--workbench-fg)]">{fileName}</span>
+      </span>
+    </div>
+  );
+}

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

@@ -0,0 +1,128 @@
+import { useActionQuery } from "@agent-native/core/client";
+import { useEffect, useRef } from "react";
+
+import { useWorkbench } from "../store";
+import { providerKindFromKey, workbenchUri } from "../workspace/types";
+
+/**
+ * Keeps open workbench tabs in sync with out-of-band edits.
+ *
+ * - Inline (designfs) tabs sync via `read-source-file`, using the shared
+ *   query cache's normal refetch behavior (agent/canvas edits invalidate
+ *   the query).
+ * - Localhost tabs have no shared query cache to invalidate from (the file
+ *   lives on the user's disk, edited by their own editor or the agent
+ *   through the bridge) so they are synced by polling `provider.readFile`
+ *   on an interval instead.
+ *
+ * Both paths funnel through `api.applyExternalRead`, which is a no-op when
+ * the versionHash is unchanged and flags a conflict instead of clobbering
+ * unsaved local edits.
+ *
+ * Renders nothing — this is purely a data-sync component mounted once per
+ * workbench.
+ */
+export function BufferSyncGroup({ designId }: { designId: string }) {
+  const { state } = useWorkbench();
+  const inlineTabs = state.tabs.filter(
+    (tab) => providerKindFromKey(tab.providerKey) === "inline",
+  );
+  const localhostTabs = state.tabs.filter(
+    (tab) => providerKindFromKey(tab.providerKey) === "localhost",
+  );
+  return (
+    <>
+      {inlineTabs.map((tab) => (
+        <BufferSyncOne key={tab.uri} designId={designId} path={tab.path} />
+      ))}
+      {localhostTabs.map((tab) => (
+        <LocalhostBufferSyncOne
+          key={tab.uri}
+          providerKey={tab.providerKey}
+          path={tab.path}
+        />
+      ))}
+    </>
+  );
+}
+
+function BufferSyncOne({ designId, path }: { designId: string; path: string }) {
+  const { state, api } = useWorkbench();
+  const uri = workbenchUri(`inline:${designId}`, path);
+  const { data } = useActionQuery("read-source-file", { designId, path });
+  const read = data as
+    | {
+        content: string;
+        versionHash?: string;
+        readonly?: boolean;
+        language?: string;
+        fileId?: string;
+      }
+    | undefined;
+  const buffer = state.buffers[uri];
+  const versionHash = read?.versionHash;
+  const savedVersionHash = buffer?.savedVersionHash;
+  useEffect(() => {
+    if (!read || !buffer) return;
+    if (versionHash === savedVersionHash) return;
+    api.applyExternalRead(uri, read);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [uri, versionHash, savedVersionHash, Boolean(buffer)]);
+  return null;
+}
+
+const LOCALHOST_POLL_INTERVAL_MS = 5000;
+
+/**
+ * Polls a single open localhost tab's file for external changes (edits made
+ * directly on disk, or by the agent through the bridge outside this
+ * workbench session). Skips polling while the tab/document is hidden, clears
+ * its interval on unmount, and swallows read errors silently — the bridge
+ * may be temporarily unreachable (dev server restarting, bridge stopped),
+ * which should not surface as a workbench error.
+ */
+function LocalhostBufferSyncOne({
+  providerKey,
+  path,
+}: {
+  providerKey: string;
+  path: string;
+}) {
+  const { state, api } = useWorkbench();
+  const uri = workbenchUri(providerKey, path);
+  const buffer = state.buffers[uri];
+  const savedVersionHash = buffer?.savedVersionHash;
+  // Keep the latest values in refs so the interval callback always sees
+  // current state without needing to be re-created every render.
+  const savedVersionHashRef = useRef(savedVersionHash);
+  savedVersionHashRef.current = savedVersionHash;
+
+  useEffect(() => {
+    if (!buffer) return;
+    const provider = api.getProvider(providerKey);
+    if (!provider) return;
+
+    let cancelled = false;
+    const poll = async () => {
+      if (document.hidden) return;
+      try {
+        const read = await provider.readFile(path);
+        if (cancelled) return;
+        if (read.versionHash === savedVersionHashRef.current) return;
+        api.applyExternalRead(uri, read);
+      } catch {
+        // Bridge may be down or the connection may have dropped — ignore and
+        // retry on the next tick.
+      }
+    };
+
+    const interval = setInterval(poll, LOCALHOST_POLL_INTERVAL_MS);
+    return () => {
+      cancelled = true;
+      clearInterval(interval);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [uri, providerKey, path, Boolean(buffer)]);
+
+  return null;
+}