@agent-native/core 0.85.7 → 0.86.0

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

@@ -0,0 +1,208 @@
+import { IconAlertTriangle, IconCircleX } from "@tabler/icons-react";
+import type * as monaco from "monaco-editor";
+import { useEffect, useState, type MutableRefObject } from "react";
+
+import { cn } from "@/lib/utils";
+
+import { isFormattablePath } from "../format/prettier-format";
+import { modelRegistry } from "../model-registry";
+import { useWorkbench } from "../store";
+import { parseWorkbenchUri, providerKindFromKey } from "../workspace/types";
+import { languageDisplayName } from "./status-bar-lang";
+
+interface ProblemCounts {
+  errors: number;
+  warnings: number;
+}
+
+/**
+ * Count error/warning markers across the given set of open workbench tab
+ * uris, resolved to their Monaco model uris through the model registry.
+ * Pure given the monaco module + registry state, so it never counts markers
+ * for closed/background models.
+ */
+export function countProblemsForOpenTabs(
+  monacoModule: typeof monaco,
+  tabUris: string[],
+): ProblemCounts {
+  const openModelUriStrings = new Set(
+    tabUris
+      .map((uri) => modelRegistry.get(uri)?.model.uri.toString())
+      .filter((value): value is string => Boolean(value)),
+  );
+  let errors = 0;
+  let warnings = 0;
+  for (const marker of monacoModule.editor.getModelMarkers({})) {
+    if (!openModelUriStrings.has(marker.resource.toString())) continue;
+    if (marker.severity === monacoModule.MarkerSeverity.Error) errors += 1;
+    else if (marker.severity === monacoModule.MarkerSeverity.Warning) {
+      warnings += 1;
+    }
+  }
+  return { errors, warnings };
+}
+
+export interface StatusBarProps {
+  editorRef: MutableRefObject<monaco.editor.IStandaloneCodeEditor | null>;
+  onGoToLine: () => void;
+}
+
+/**
+ * 24px status bar, 11px text. Left: workspace badge + problems summary.
+ * Right: transient save flash, "Prettier" (only for formattable inline
+ * files), Ln/Col, "Spaces: 2", "UTF-8", "LF", language display name. Shows a
+ * conflict banner when the active buffer changed externally while dirty.
+ */
+export function StatusBar({ editorRef, onGoToLine }: StatusBarProps) {
+  const { state, api } = useWorkbench();
+  const [cursor, setCursor] = useState({ line: 1, column: 1 });
+  const [problems, setProblems] = useState<ProblemCounts>({
+    errors: 0,
+    warnings: 0,
+  });
+  const [showSaved, setShowSaved] = useState(false);
+
+  const activeUri = state.activeUri;
+  const activeMeta = activeUri ? state.buffers[activeUri] : null;
+  const activePath = activeUri ? parseWorkbenchUri(activeUri).path : "";
+  const providerKey = activeUri ? parseWorkbenchUri(activeUri).providerKey : "";
+  const isInlineActive = activeUri
+    ? providerKindFromKey(providerKey) === "inline"
+    : false;
+  const workspaceBadge = activeUri
+    ? isInlineActive
+      ? "designfs" /* i18n-ignore */
+      : "localhost" /* i18n-ignore */
+    : null;
+  const showPrettierStatus =
+    isInlineActive && Boolean(activePath) && isFormattablePath(activePath);
+
+  // Cursor position subscription follows the live editor instance, not
+  // React state, since MonacoHost owns editor creation/disposal.
+  useEffect(() => {
+    let disposed = false;
+    let disposable: monaco.IDisposable | null = null;
+    const attach = () => {
+      const editor = editorRef.current;
+      if (!editor) {
+        if (!disposed) requestAnimationFrame(attach);
+        return;
+      }
+      const update = () => {
+        const position = editor.getPosition();
+        if (position) {
+          setCursor({ line: position.lineNumber, column: position.column });
+        }
+      };
+      update();
+      disposable = editor.onDidChangeCursorPosition(update);
+    };
+    attach();
+    return () => {
+      disposed = true;
+      disposable?.dispose();
+    };
+  }, [editorRef, activeUri]);
+
+  // Problems summary: recompute on Monaco marker changes, scoped to
+  // currently open tabs.
+  const tabUriKey = state.tabs.map((tab) => tab.uri).join(",");
+  useEffect(() => {
+    let disposed = false;
+    let disposable: monaco.IDisposable | null = null;
+    void (async () => {
+      const monacoModule = await import("monaco-editor");
+      if (disposed) return;
+      const tabUris = tabUriKey ? tabUriKey.split(",") : [];
+      const update = () => {
+        setProblems(countProblemsForOpenTabs(monacoModule, tabUris));
+      };
+      update();
+      disposable = monacoModule.editor.onDidChangeMarkers(update);
+    })();
+    return () => {
+      disposed = true;
+      disposable?.dispose();
+    };
+  }, [tabUriKey]);
+
+  // "Saved" flash for 2s after lastSavedAt changes.
+  useEffect(() => {
+    if (!activeMeta?.lastSavedAt) return;
+    setShowSaved(true);
+    const timer = window.setTimeout(() => setShowSaved(false), 2000);
+    return () => window.clearTimeout(timer);
+  }, [activeMeta?.lastSavedAt]);
+
+  return (
+    <div
+      data-testid="workbench-status-bar"
+      className="flex h-6 shrink-0 items-center gap-3 border-t border-[var(--workbench-border)] bg-[var(--workbench-statusbar-bg)] px-2 text-[11px] text-[var(--workbench-statusbar-fg)]"
+    >
+      <div className="flex min-w-0 flex-1 items-center gap-3">
+        {workspaceBadge ? (
+          <StatusBarItem>{workspaceBadge}</StatusBarItem>
+        ) : null}
+        {problems.errors > 0 || problems.warnings > 0 ? (
+          <StatusBarItem>
+            <span className="flex items-center gap-1">
+              <IconCircleX className="size-3" />
+              {problems.errors}
+            </span>
+            <span className="flex items-center gap-1">
+              <IconAlertTriangle className="size-3" />
+              {problems.warnings}
+            </span>
+          </StatusBarItem>
+        ) : null}
+        {activeMeta?.conflict ? (
+          <button
+            type="button"
+            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 */}
+          </button>
+        ) : null}
+      </div>
+      {activeUri ? (
+        <div className="flex shrink-0 items-center gap-3">
+          {showSaved ? (
+            <span className="text-[var(--workbench-accent)]">
+              {"Saved" /* i18n-ignore */}
+            </span>
+          ) : null}
+          {showPrettierStatus ? (
+            <StatusBarItem>{"Prettier" /* i18n-ignore */}</StatusBarItem>
+          ) : null}
+          <button
+            type="button"
+            onClick={onGoToLine}
+            className="cursor-pointer rounded-[3px] px-1.5 hover:bg-[var(--workbench-list-hover-bg)]"
+          >
+            {`Ln ${cursor.line}, Col ${cursor.column}` /* i18n-ignore */}
+          </button>
+          <StatusBarItem>{"Spaces: 2" /* i18n-ignore */}</StatusBarItem>
+          <StatusBarItem>{"UTF-8" /* i18n-ignore */}</StatusBarItem>
+          <StatusBarItem>{"LF" /* i18n-ignore */}</StatusBarItem>
+          <StatusBarItem>
+            {languageDisplayName(activeMeta?.language)}
+          </StatusBarItem>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function StatusBarItem({ children }: { children: React.ReactNode }) {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-1.5 rounded-[3px] px-1.5",
+        "hover:bg-[var(--workbench-list-hover-bg)]",
+      )}
+    >
+      {children}
+    </span>
+  );
+}

package/corpus/templates/design/app/components/design/code-workbench/editor/monaco-setup.ts

@@ -0,0 +1,61 @@
+import * as monaco from "monaco-editor";
+import { typescript as monacoTypescript } from "monaco-editor";
+
+import "monaco-editor/min/vs/editor/editor.main.css";
+import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
+import CssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
+import HtmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
+import JsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
+import TypeScriptWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
+
+/**
+ * Global Monaco environment + language-service wiring, adopted from the old
+ * CodeWorkbenchHost. Idempotent: safe to call from every mount site (the
+ * workbench root and any lazy-loaded packet component).
+ */
+
+let monacoEnvironmentInstalled = false;
+
+export function ensureMonacoEnvironment() {
+  if (monacoEnvironmentInstalled || typeof window === "undefined") return;
+  (
+    globalThis as typeof globalThis & { MonacoEnvironment?: unknown }
+  ).MonacoEnvironment = {
+    getWorker(_moduleId: string, label: string) {
+      if (label === "css" || label === "scss" || label === "less") {
+        return new CssWorker();
+      }
+      if (label === "html" || label === "handlebars" || label === "razor") {
+        return new HtmlWorker();
+      }
+      if (label === "json") return new JsonWorker();
+      if (label === "typescript" || label === "javascript") {
+        return new TypeScriptWorker();
+      }
+      return new EditorWorker();
+    },
+  };
+
+  // The browser workbench can't resolve module imports the way a real
+  // TypeScript project setup would, so semantic diagnostics (unresolved
+  // imports, missing types, etc.) produce a wall of bogus red squiggles.
+  // Keep syntax checking (real typos, malformed code) but disable semantic
+  // validation for both JS and TS. Also allow non-ts extensions (.tsx, .jsx
+  // content is common in these buffers regardless of file extension).
+  const tsDefaults = monacoTypescript.typescriptDefaults;
+  const jsDefaults = monacoTypescript.javascriptDefaults;
+  for (const defaults of [tsDefaults, jsDefaults]) {
+    defaults.setDiagnosticsOptions({
+      noSemanticValidation: true,
+      noSyntaxValidation: false,
+    });
+    defaults.setCompilerOptions({
+      ...defaults.getCompilerOptions(),
+      allowNonTsExtensions: true,
+    });
+  }
+
+  monacoEnvironmentInstalled = true;
+}
+
+export { monaco };

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

@@ -0,0 +1,191 @@
+import { normalizeMonacoThemeColor } from "../../code-workbench-theme";
+
+/**
+ * Pure theme-rule/color builders, extracted from monaco-theme.ts so unit
+ * tests can exercise the palette/color-mapping logic without importing
+ * `monaco-editor` (it requires a `window` global and can't load under
+ * vitest's default node environment).
+ */
+
+export interface MonacoThemeRule {
+  token: string;
+  foreground?: string;
+  fontStyle?: string;
+}
+
+/**
+ * Curated syntax palette, light/dark HSL pairs converted to hex at build
+ * time (Monaco theme rules require hex, no `hsl()`/`var()` support). Kept at
+ * modest saturation to match the app's clean Figma-esque visual language.
+ */
+const SYNTAX_PALETTE: Record<
+  string,
+  { light: string; dark: string; fontStyle?: string }
+> = {
+  comment: {
+    light: "hsl(0 0% 55%)",
+    dark: "hsl(0 0% 50%)",
+    fontStyle: "italic",
+  },
+  keyword: { light: "hsl(263 55% 52%)", dark: "hsl(263 70% 74%)" },
+  storage: { light: "hsl(263 55% 52%)", dark: "hsl(263 70% 74%)" },
+  string: { light: "hsl(140 45% 36%)", dark: "hsl(140 40% 62%)" },
+  number: { light: "hsl(25 75% 45%)", dark: "hsl(28 70% 62%)" },
+  constant: { light: "hsl(25 75% 45%)", dark: "hsl(28 70% 62%)" },
+  tag: { light: "hsl(213 75% 45%)", dark: "hsl(213 85% 70%)" },
+  "attribute.name": { light: "hsl(263 45% 55%)", dark: "hsl(263 55% 75%)" },
+  "attribute.value": { light: "hsl(140 45% 36%)", dark: "hsl(140 40% 62%)" },
+  "delimiter.html": { light: "hsl(213 75% 45%)", dark: "hsl(213 85% 70%)" },
+  function: { light: "hsl(213 75% 45%)", dark: "hsl(213 85% 70%)" },
+  type: { light: "hsl(180 45% 35%)", dark: "hsl(180 45% 60%)" },
+  class: { light: "hsl(180 45% 35%)", dark: "hsl(180 45% 60%)" },
+  delimiter: { light: "hsl(0 0% 40%)", dark: "hsl(0 0% 65%)" },
+  operator: { light: "hsl(0 0% 40%)", dark: "hsl(0 0% 65%)" },
+};
+
+/** VS Code token identifiers each palette entry applies to. */
+const PALETTE_TOKEN_SCOPES: Record<string, string[]> = {
+  comment: ["comment", "comment.block", "comment.line"],
+  keyword: ["keyword", "keyword.control", "keyword.operator.new"],
+  storage: ["storage", "storage.type", "storage.modifier"],
+  string: ["string", "string.quoted", "string.template"],
+  number: ["number", "constant.numeric"],
+  constant: ["constant", "constant.language", "constant.character"],
+  tag: ["tag", "entity.name.tag", "metatag"],
+  "attribute.name": ["attribute.name", "entity.other.attribute-name"],
+  "attribute.value": ["attribute.value", "string.attribute-value"],
+  "delimiter.html": ["delimiter.html", "delimiter.xml"],
+  function: ["entity.name.function", "support.function", "meta.function-call"],
+  type: ["type", "entity.name.type", "support.type"],
+  class: ["entity.name.class", "support.class"],
+  delimiter: ["delimiter", "delimiter.bracket", "delimiter.parenthesis"],
+  operator: ["operator", "keyword.operator"],
+};
+
+function hslToHex(hsl: string): string {
+  const match = /hsl\(\s*([\d.]+)\s+([\d.]+)%\s+([\d.]+)%\s*\)/i.exec(hsl);
+  if (!match) return "#000000";
+  const h = Number(match[1]);
+  const s = Number(match[2]) / 100;
+  const l = Number(match[3]) / 100;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = l - c / 2;
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (h < 60) [r, g, b] = [c, x, 0];
+  else if (h < 120) [r, g, b] = [x, c, 0];
+  else if (h < 180) [r, g, b] = [0, c, x];
+  else if (h < 240) [r, g, b] = [0, x, c];
+  else if (h < 300) [r, g, b] = [x, 0, c];
+  else [r, g, b] = [c, 0, x];
+  const toHex = (value: number) =>
+    Math.round((value + m) * 255)
+      .toString(16)
+      .padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+/**
+ * Build the Monaco theme `rules` array (token -> foreground/fontStyle) for a
+ * given color scheme.
+ */
+export function buildThemeRules(
+  colorScheme: "light" | "dark",
+): MonacoThemeRule[] {
+  const rules: MonacoThemeRule[] = [];
+  for (const [paletteKey, scopes] of Object.entries(PALETTE_TOKEN_SCOPES)) {
+    const entry = SYNTAX_PALETTE[paletteKey];
+    if (!entry) continue;
+    const foreground = hslToHex(entry[colorScheme]).replace("#", "");
+    for (const token of scopes) {
+      rules.push({
+        token,
+        foreground,
+        ...(entry.fontStyle ? { fontStyle: entry.fontStyle } : {}),
+      });
+    }
+  }
+  return rules;
+}
+
+/**
+ * Build the Monaco theme `colors` map from resolved `--workbench-*` CSS
+ * values.
+ */
+export function buildThemeColors(
+  values: Record<string, string>,
+): Record<string, string> {
+  const source: Record<string, string | undefined> = {
+    "editor.background": values["--workbench-editor-bg"],
+    "editor.foreground": values["--workbench-fg"],
+    "editor.lineHighlightBackground": values["--workbench-hover-bg"],
+    "editor.selectionBackground": values["--workbench-selection-bg"],
+    "editor.inactiveSelectionBackground": values["--workbench-active-bg"],
+    "editorCursor.foreground": values["--workbench-accent"],
+    "editorLineNumber.foreground": values["--workbench-muted-fg"],
+    "editorLineNumber.activeForeground": values["--workbench-fg"],
+    "editorIndentGuide.background1": values["--workbench-border"],
+    "editorIndentGuide.activeBackground1": values["--workbench-muted-fg"],
+    "editorGutter.background": values["--workbench-editor-bg"],
+
+    // Widgets: find, suggest, hover.
+    "editorWidget.background": values["--workbench-surface-bg"],
+    "editorWidget.border": values["--workbench-border"],
+    "editorWidget.foreground": values["--workbench-fg"],
+    "editorSuggestWidget.background": values["--workbench-surface-bg"],
+    "editorSuggestWidget.border": values["--workbench-border"],
+    "editorSuggestWidget.foreground": values["--workbench-fg"],
+    "editorSuggestWidget.selectedBackground":
+      values["--workbench-list-active-bg"],
+    "editorSuggestWidget.highlightForeground": values["--workbench-accent"],
+    "editorHoverWidget.background": values["--workbench-surface-bg"],
+    "editorHoverWidget.border": values["--workbench-border"],
+
+    // Minimap + scrollbar.
+    "minimap.background": values["--workbench-editor-bg"],
+    "minimapSlider.background": values["--workbench-hover-bg"],
+    "minimapSlider.hoverBackground": values["--workbench-active-bg"],
+    "minimapSlider.activeBackground": values["--workbench-active-bg"],
+    "scrollbarSlider.background": values["--workbench-hover-bg"],
+    "scrollbarSlider.hoverBackground": values["--workbench-active-bg"],
+    "scrollbarSlider.activeBackground": values["--workbench-active-bg"],
+
+    // Bracket match + sticky scroll.
+    "editorBracketMatch.background": values["--workbench-hover-bg"],
+    "editorBracketMatch.border": values["--workbench-accent"],
+    "editorStickyScroll.background": values["--workbench-surface-bg"],
+    "editorStickyScrollHover.background": values["--workbench-hover-bg"],
+
+    // List (reused for suggest widget rows).
+    "list.hoverBackground": values["--workbench-list-hover-bg"],
+    "list.activeSelectionBackground": values["--workbench-list-active-bg"],
+    "list.inactiveSelectionBackground": values["--workbench-list-selection-bg"],
+    "list.focusBackground": values["--workbench-list-active-bg"],
+    "list.highlightForeground": values["--workbench-accent"],
+
+    // Inputs.
+    "input.background": values["--workbench-input-bg"],
+    "input.border": values["--workbench-input-border"],
+    "input.foreground":
+      values["--workbench-input-fg"] ?? values["--workbench-fg"],
+    "inputOption.activeBorder": values["--workbench-accent"],
+
+    // Diff editor (future-proof).
+    "diffEditor.insertedTextBackground": values["--workbench-selection-bg"],
+    "diffEditor.removedTextBackground": values["--workbench-error"],
+
+    // Markers.
+    "editorError.foreground": values["--workbench-error"],
+    "editorWarning.foreground": values["--workbench-warning"],
+
+    focusBorder: values["--workbench-accent"],
+  };
+  const colors: Record<string, string> = {};
+  for (const [key, value] of Object.entries(source)) {
+    const normalized = normalizeMonacoThemeColor(value);
+    if (normalized) colors[key] = normalized;
+  }
+  return colors;
+}

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

@@ -0,0 +1,29 @@
+import * as monaco from "monaco-editor";
+
+import type { CodeWorkbenchTheme } from "../../code-workbench-theme";
+import { buildThemeColors, buildThemeRules } from "./monaco-theme-palette";
+
+export { buildThemeColors, buildThemeRules } from "./monaco-theme-palette";
+export type { MonacoThemeRule } from "./monaco-theme-palette";
+
+/**
+ * Define (or redefine) the Monaco theme for the given workbench theme and
+ * return its name. Safe to call repeatedly — `monaco.editor.defineTheme`
+ * overwrites the existing definition by name. VS Code-quality theme: base
+ * vs/vs-dark, inherit true, curated syntax `rules`, and a comprehensive
+ * `colors` map, all built from the `--workbench-*` CSS bridge vars via the
+ * pure builders in monaco-theme-palette.ts.
+ */
+export function defineWorkbenchMonacoTheme(theme: CodeWorkbenchTheme): string {
+  const dark = theme.colorScheme === "dark";
+  const name = dark
+    ? "design-code-workbench-dark"
+    : "design-code-workbench-light";
+  monaco.editor.defineTheme(name, {
+    base: dark ? "vs-dark" : "vs",
+    inherit: true,
+    rules: buildThemeRules(theme.colorScheme),
+    colors: buildThemeColors(theme.values),
+  });
+  return name;
+}

package/corpus/templates/design/app/components/design/code-workbench/editor/status-bar-lang.ts

@@ -0,0 +1,21 @@
+/**
+ * Language id -> display name mapping, extracted from StatusBar so it can be
+ * unit-tested without importing `monaco-editor` (which requires a `window`
+ * global and can't load under vitest's default node environment).
+ */
+export const LANGUAGE_DISPLAY_NAMES: Record<string, string> = {
+  html: "HTML" /* i18n-ignore */,
+  css: "CSS" /* i18n-ignore */,
+  json: "JSON" /* i18n-ignore */,
+  typescript: "TypeScript" /* i18n-ignore */,
+  javascript: "JavaScript" /* i18n-ignore */,
+  markdown: "Markdown" /* i18n-ignore */,
+  yaml: "YAML" /* i18n-ignore */,
+  xml: "XML" /* i18n-ignore */,
+  plaintext: "Plain Text" /* i18n-ignore */,
+};
+
+export function languageDisplayName(language: string | undefined): string {
+  if (!language) return LANGUAGE_DISPLAY_NAMES.plaintext;
+  return LANGUAGE_DISPLAY_NAMES[language] ?? language;
+}

package/corpus/templates/design/app/components/design/code-workbench/editor/tab-drag.ts

@@ -0,0 +1,27 @@
+/**
+ * Pure index math for HTML5 drag-and-drop tab reordering. Extracted so it's
+ * unit-testable without mounting EditorTabs.
+ */
+
+/**
+ * Resolve the drop target index for a tab dragged from `fromIndex` and
+ * dropped over `overIndex`, given whether the pointer is in the left/right
+ * half of the hovered tab. Mirrors VS Code's tab reorder feel: dropping on
+ * the left half of a tab inserts before it, the right half inserts after.
+ */
+export function resolveTabDropIndex(
+  fromIndex: number,
+  overIndex: number,
+  dropOnRightHalf: boolean,
+): number {
+  let toIndex = dropOnRightHalf ? overIndex + 1 : overIndex;
+  // Reducing the array by removing `fromIndex` shifts later indices down by
+  // one before the re-insertion happens.
+  if (fromIndex < toIndex) toIndex -= 1;
+  return toIndex;
+}
+
+/** True when a reorder from `fromIndex` to `toIndex` is a real move. */
+export function isTabReorderNoop(fromIndex: number, toIndex: number): boolean {
+  return fromIndex < 0 || toIndex < 0 || fromIndex === toIndex;
+}