@agent-native/core 0.85.6 → 0.86.0

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

@@ -0,0 +1,115 @@
+import {
+  IconFile,
+  IconFileCode,
+  IconFileTypeCss,
+  IconFileTypeHtml,
+  IconFileTypeJs,
+  IconFileTypeJsx,
+  IconFileTypeTs,
+  IconFileTypeTsx,
+  IconFolder,
+  IconFolderOpen,
+  IconJson,
+  IconMarkdown,
+  IconPhoto,
+} from "@tabler/icons-react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * File-type icon for explorer rows, tabs, breadcrumbs, and search results.
+ * Tabler icons only, colored per language family using workbench vars where
+ * a semantic mapping exists (falls back to muted foreground otherwise).
+ */
+export function FileIcon({
+  path,
+  className,
+}: {
+  path: string;
+  className?: string;
+}) {
+  const common = cn("size-3.5 shrink-0", className);
+  const extension = path.split(".").pop()?.toLowerCase() ?? "";
+
+  switch (extension) {
+    case "html":
+    case "htm":
+    case "vue":
+    case "svelte":
+    case "astro":
+      return (
+        <IconFileTypeHtml className={cn(common, "text-[hsl(213_75%_50%)]")} />
+      );
+    case "css":
+    case "scss":
+    case "less":
+      return (
+        <IconFileTypeCss className={cn(common, "text-[hsl(263_55%_58%)]")} />
+      );
+    case "js":
+    case "mjs":
+    case "cjs":
+      return (
+        <IconFileTypeJs className={cn(common, "text-[hsl(48_90%_48%)]")} />
+      );
+    case "jsx":
+      return (
+        <IconFileTypeJsx className={cn(common, "text-[hsl(199_85%_50%)]")} />
+      );
+    case "ts":
+      return (
+        <IconFileTypeTs className={cn(common, "text-[hsl(213_75%_50%)]")} />
+      );
+    case "tsx":
+      return (
+        <IconFileTypeTsx className={cn(common, "text-[hsl(213_75%_50%)]")} />
+      );
+    case "json":
+      return <IconJson className={cn(common, "text-[hsl(28_70%_55%)]")} />;
+    case "md":
+    case "mdx":
+      return (
+        <IconMarkdown
+          className={cn(common, "text-[var(--workbench-muted-fg)]")}
+        />
+      );
+    case "png":
+    case "jpg":
+    case "jpeg":
+    case "gif":
+    case "svg":
+    case "webp":
+    case "ico":
+      return <IconPhoto className={cn(common, "text-[hsl(140_45%_45%)]")} />;
+    case "yml":
+    case "yaml":
+      return (
+        <IconFileCode
+          className={cn(common, "text-[var(--workbench-muted-fg)]")}
+        />
+      );
+    default:
+      return (
+        <IconFile className={cn(common, "text-[var(--workbench-muted-fg)]")} />
+      );
+  }
+}
+
+/** Explorer folder glyph — open when expanded, closed otherwise. */
+export function FolderIcon({
+  open,
+  className,
+}: {
+  open: boolean;
+  className?: string;
+}) {
+  const common = cn(
+    "size-3.5 shrink-0 text-[var(--workbench-accent)]",
+    className,
+  );
+  return open ? (
+    <IconFolderOpen className={common} />
+  ) : (
+    <IconFolder className={common} />
+  );
+}

package/corpus/templates/design/app/components/design/code-workbench/format/format-on-open.ts

@@ -0,0 +1,65 @@
+import { useEffect } from "react";
+
+import { modelRegistry } from "../model-registry";
+import { useWorkbench, type BufferLoadedEvent } from "../store";
+import { providerKindFromKey } from "../workspace/types";
+import { formatWithPrettier, isFormattablePath } from "./prettier-format";
+
+/**
+ * Auto-format-on-first-open policy: the design's SQL-backed (inline) files
+ * are machine-generated, so the first time a formattable inline buffer is
+ * opened in a session we silently run Prettier over it and persist the
+ * result. This is idempotent cleanup, not a user edit — no toast, no visible
+ * "formatting…" state. Never runs against localhost (real disk) files.
+ */
+
+const MAX_FORMAT_ON_OPEN_BYTES = 200_000;
+
+// Attempt at most once per (uri, versionHash) per session, regardless of how
+// many times the buffer gets reloaded.
+const attemptedKeys = new Set<string>();
+
+function attemptKey(uri: string, event: BufferLoadedEvent): string {
+  return `${uri}@${event.read.versionHash ?? ""}`;
+}
+
+export function useFormatOnFirstOpen({ enabled }: { enabled: boolean }): void {
+  const { api } = useWorkbench();
+
+  useEffect(() => {
+    return api.onBufferLoaded((event) => {
+      if (!enabled) return;
+      if (!event.firstLoad) return;
+      if (providerKindFromKey(event.providerKey) !== "inline") return;
+      if (event.read.readonly) return;
+      if (!isFormattablePath(event.path)) return;
+      if (event.read.content.length > MAX_FORMAT_ON_OPEN_BYTES) return;
+
+      const key = attemptKey(event.uri, event);
+      if (attemptedKeys.has(key)) return;
+      attemptedKeys.add(key);
+
+      void (async () => {
+        const result = await formatWithPrettier(event.read.content, event.path);
+        if ("error" in result) return;
+        if (result.formatted === event.read.content) return;
+
+        const entry = modelRegistry.get(event.uri);
+        if (!entry || entry.model.isDisposed()) return;
+        // Push the formatted text without touching savedAltVersionId, so the
+        // buffer becomes dirty (matches the "formatted but unsaved" state a
+        // real edit would produce) — then save silently.
+        entry.model.pushEditOperations(
+          null,
+          [{ range: entry.model.getFullModelRange(), text: result.formatted }],
+          () => null,
+        );
+        api.markDirty(event.uri, true);
+        void api.save(event.uri).catch(() => {
+          // Save failed (e.g. stale version) — leave the buffer
+          // formatted+dirty; the user or a later save will resolve it.
+        });
+      })();
+    });
+  }, [api, enabled]);
+}

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

@@ -0,0 +1,182 @@
+/**
+ * Prettier formatting for the code workbench. Prettier's browser bundle
+ * (`prettier/standalone`) and per-language plugins are loaded lazily via
+ * dynamic import so the initial workbench bundle stays lean — most sessions
+ * never touch a language whose plugin hasn't loaded yet. `monaco-editor`
+ * itself is also imported lazily (only inside `registerPrettierFormatting`)
+ * so this module stays safe to import from node-side (non-DOM) unit tests.
+ */
+
+type PrettierStandalone = typeof import("prettier/standalone");
+
+type SupportedLanguage =
+  | "html"
+  | "css"
+  | "javascript"
+  | "typescript"
+  | "json"
+  | "markdown";
+
+interface FormatSpec {
+  parser: string;
+  /** Dynamic plugin module loaders, in the order Prettier expects them. */
+  plugins: Array<() => Promise<unknown>>;
+}
+
+const FORMAT_SPECS: Record<SupportedLanguage, FormatSpec> = {
+  html: {
+    parser: "html",
+    plugins: [
+      () => import("prettier/plugins/html"),
+      () => import("prettier/plugins/postcss"),
+      () => import("prettier/plugins/babel"),
+      () => import("prettier/plugins/estree"),
+    ],
+  },
+  css: {
+    parser: "css",
+    plugins: [() => import("prettier/plugins/postcss")],
+  },
+  javascript: {
+    parser: "babel",
+    plugins: [
+      () => import("prettier/plugins/babel"),
+      () => import("prettier/plugins/estree"),
+    ],
+  },
+  typescript: {
+    parser: "typescript",
+    plugins: [
+      () => import("prettier/plugins/typescript"),
+      () => import("prettier/plugins/estree"),
+    ],
+  },
+  json: {
+    parser: "json",
+    plugins: [
+      () => import("prettier/plugins/babel"),
+      () => import("prettier/plugins/estree"),
+    ],
+  },
+  markdown: {
+    parser: "markdown",
+    plugins: [() => import("prettier/plugins/markdown")],
+  },
+};
+
+/** Extension → supported-language mapping used to pick the format spec. */
+function languageForFormatting(path: string): SupportedLanguage | null {
+  if (/\.(html?|vue|svelte|astro)$/i.test(path)) return "html";
+  if (/\.(css|scss|less)$/i.test(path)) return "css";
+  if (/\.(jsx?|mjs|cjs)$/i.test(path)) return "javascript";
+  if (/\.tsx?$/i.test(path)) return "typescript";
+  if (/\.json$/i.test(path)) return "json";
+  if (/\.(md|mdx)$/i.test(path)) return "markdown";
+  return null;
+}
+
+export function isFormattablePath(path: string): boolean {
+  return languageForFormatting(path) !== null;
+}
+
+let standaloneModulePromise: Promise<PrettierStandalone> | null = null;
+function loadStandalone(): Promise<PrettierStandalone> {
+  if (!standaloneModulePromise) {
+    standaloneModulePromise = import("prettier/standalone");
+  }
+  return standaloneModulePromise;
+}
+
+// Cache loaded plugin modules per language so repeated formats (and repeated
+// tabs of the same language) don't re-import.
+const pluginModulesCache = new Map<SupportedLanguage, Promise<unknown[]>>();
+function loadPlugins(language: SupportedLanguage): Promise<unknown[]> {
+  let cached = pluginModulesCache.get(language);
+  if (!cached) {
+    cached = Promise.all(FORMAT_SPECS[language].plugins.map((load) => load()));
+    pluginModulesCache.set(language, cached);
+  }
+  return cached;
+}
+
+export type FormatResult = { formatted: string } | { error: string };
+
+/**
+ * Format `content` for the file at `path` using Prettier. Never throws —
+ * parse/format failures are returned as `{ error }` so callers (format on
+ * open, the Monaco formatting provider) can fail soft.
+ */
+export async function formatWithPrettier(
+  content: string,
+  path: string,
+): Promise<FormatResult> {
+  const language = languageForFormatting(path);
+  if (!language) {
+    return {
+      error: `No formatter available for this file type` /* i18n-ignore */,
+    };
+  }
+  try {
+    const [prettier, plugins] = await Promise.all([
+      loadStandalone(),
+      loadPlugins(language),
+    ]);
+    const formatted = await prettier.format(content, {
+      parser: FORMAT_SPECS[language].parser,
+      plugins: plugins as never,
+      printWidth: 100,
+      tabWidth: 2,
+    });
+    return { formatted };
+  } catch (error) {
+    return {
+      error:
+        error instanceof Error
+          ? error.message
+          : "Could not format file" /* i18n-ignore */,
+    };
+  }
+}
+
+const MONACO_FORMAT_LANGUAGES = [
+  "html",
+  "css",
+  "javascript",
+  "typescript",
+  "json",
+  "markdown",
+];
+
+let prettierFormattingRegistered = false;
+
+/**
+ * Register a Monaco DocumentFormattingEditProvider backed by Prettier for
+ * html/css/javascript/typescript/json/markdown, so Shift+Alt+F and the
+ * editor's "Format Document" context-menu action work. Idempotent — safe to
+ * call multiple times (e.g. across CodeWorkbench remounts).
+ */
+export function registerPrettierFormatting(): void {
+  if (prettierFormattingRegistered || typeof window === "undefined") return;
+  prettierFormattingRegistered = true;
+  void (async () => {
+    const monaco: typeof import("monaco-editor") =
+      await import("monaco-editor");
+    for (const language of MONACO_FORMAT_LANGUAGES) {
+      monaco.languages.registerDocumentFormattingEditProvider(language, {
+        async provideDocumentFormattingEdits(model) {
+          const path = model.uri.path.replace(/^\/+/, "");
+          const content = model.getValue();
+          const result = await formatWithPrettier(content, path);
+          if ("error" in result) return [];
+          if (result.formatted === content) return [];
+          return [
+            {
+              range: model.getFullModelRange(),
+              text: result.formatted,
+            },
+          ];
+        },
+      });
+    }
+  })();
+}

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

@@ -0,0 +1,133 @@
+import * as monaco from "monaco-editor";
+
+import { parseWorkbenchUri, providerKindFromKey } from "./workspace/types";
+
+/**
+ * Monaco models are the source of truth for draft buffer content. React state
+ * (the workbench store) only tracks metadata — dirty flags, version hashes,
+ * loading states — so typing never re-renders the tree.
+ *
+ * Dirty tracking uses Monaco's alternative version id (O(1), undo-aware):
+ * a buffer is dirty when the model's current alternative version id differs
+ * from the one captured at load/save time.
+ */
+
+export interface WorkbenchModelEntry {
+  model: monaco.editor.ITextModel;
+  savedAltVersionId: number;
+  viewState: monaco.editor.ICodeEditorViewState | null;
+}
+
+function monacoUriFor(uri: string): monaco.Uri {
+  const { providerKey, path } = parseWorkbenchUri(uri);
+  const kind = providerKindFromKey(providerKey);
+  const authority = providerKey.split(":").slice(1).join(":") || "workspace";
+  return monaco.Uri.from({
+    scheme: kind === "inline" ? "designfs" : "localfs",
+    authority,
+    path: `/${path.replace(/^\/+/, "")}`,
+  });
+}
+
+class WorkbenchModelRegistry {
+  private entries = new Map<string, WorkbenchModelEntry>();
+
+  get(uri: string): WorkbenchModelEntry | undefined {
+    return this.entries.get(uri);
+  }
+
+  has(uri: string): boolean {
+    return this.entries.has(uri);
+  }
+
+  ensureModel(
+    uri: string,
+    content: string,
+    language: string,
+  ): WorkbenchModelEntry {
+    const existing = this.entries.get(uri);
+    if (existing && !existing.model.isDisposed()) {
+      monaco.editor.setModelLanguage(existing.model, language);
+      return existing;
+    }
+    const monacoUri = monacoUriFor(uri);
+    const model =
+      monaco.editor.getModel(monacoUri) ??
+      monaco.editor.createModel(content, language, monacoUri);
+    const entry: WorkbenchModelEntry = {
+      model,
+      savedAltVersionId: model.getAlternativeVersionId(),
+      viewState: null,
+    };
+    this.entries.set(uri, entry);
+    return entry;
+  }
+
+  getContent(uri: string): string | null {
+    const entry = this.entries.get(uri);
+    if (!entry || entry.model.isDisposed()) return null;
+    return entry.model.getValue();
+  }
+
+  isDirty(uri: string): boolean {
+    const entry = this.entries.get(uri);
+    if (!entry || entry.model.isDisposed()) return false;
+    return entry.model.getAlternativeVersionId() !== entry.savedAltVersionId;
+  }
+
+  /**
+   * Replace buffer content from an external change (agent edit, canvas edit)
+   * while preserving the undo stack.
+   */
+  applyExternalContent(uri: string, content: string) {
+    const entry = this.entries.get(uri);
+    if (!entry || entry.model.isDisposed()) return;
+    const model = entry.model;
+    if (model.getValue() === content) {
+      entry.savedAltVersionId = model.getAlternativeVersionId();
+      return;
+    }
+    model.pushEditOperations(
+      null,
+      [{ range: model.getFullModelRange(), text: content }],
+      () => null,
+    );
+    entry.savedAltVersionId = model.getAlternativeVersionId();
+  }
+
+  /** Mark the buffer clean as of the given alternative version id. */
+  markSaved(uri: string, altVersionId: number) {
+    const entry = this.entries.get(uri);
+    if (!entry) return;
+    entry.savedAltVersionId = altVersionId;
+  }
+
+  saveViewState(
+    uri: string,
+    viewState: monaco.editor.ICodeEditorViewState | null,
+  ) {
+    const entry = this.entries.get(uri);
+    if (entry) entry.viewState = viewState;
+  }
+
+  getViewState(uri: string): monaco.editor.ICodeEditorViewState | null {
+    return this.entries.get(uri)?.viewState ?? null;
+  }
+
+  dispose(uri: string) {
+    const entry = this.entries.get(uri);
+    if (entry) {
+      if (!entry.model.isDisposed()) entry.model.dispose();
+      this.entries.delete(uri);
+    }
+  }
+
+  disposeAll() {
+    for (const entry of this.entries.values()) {
+      if (!entry.model.isDisposed()) entry.model.dispose();
+    }
+    this.entries.clear();
+  }
+}
+
+export const modelRegistry = new WorkbenchModelRegistry();