@agent-native/core 0.85.6 → 0.86.0

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

@@ -0,0 +1,363 @@
+import { IconX } from "@tabler/icons-react";
+import { useCallback, useRef, useState } from "react";
+import { toast } from "sonner";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import { cn } from "@/lib/utils";
+
+import { FileIcon } from "../explorer/file-icons";
+import { useWorkbench, type EditorTab } from "../store";
+import { baseName, parseWorkbenchUri } from "../workspace/types";
+import { isTabReorderNoop, resolveTabDropIndex } from "./tab-drag";
+
+interface PendingClose {
+  /** Uris that will be closed by this operation. */
+  uris: string[];
+  /** The dirty subset needing a save-or-discard decision. */
+  dirtyUris: string[];
+}
+
+/**
+ * Module-level drag state, mirroring LayersPanel's pattern: HTML5 DnD's
+ * dataTransfer payload is unreliable for same-window reordering (some
+ * browsers withhold it during dragover), so the source index is tracked in
+ * module scope instead.
+ */
+let activeTabDrag: { fromIndex: number } | null = null;
+
+export function EditorTabs() {
+  const { state, api } = useWorkbench();
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const [dropIndicator, setDropIndicator] = useState<{
+    index: number;
+    side: "left" | "right";
+  } | null>(null);
+  const [pendingClose, setPendingClose] = useState<PendingClose | null>(null);
+
+  const closeUris = useCallback(
+    (uris: string[]) => {
+      for (const uri of uris) api.closeTab(uri);
+    },
+    [api],
+  );
+
+  // Closing dirty tabs asks Save / Don't Save / Cancel (VS Code behavior);
+  // clean tabs close immediately.
+  const requestClose = useCallback(
+    (uris: string[]) => {
+      const buffers = api.getState().buffers;
+      const dirtyUris = uris.filter((uri) => buffers[uri]?.dirty);
+      if (dirtyUris.length === 0) {
+        closeUris(uris);
+        return;
+      }
+      setPendingClose({ uris, dirtyUris });
+    },
+    [api, closeUris],
+  );
+
+  const requestCloseTab = useCallback(
+    (uri: string) => requestClose([uri]),
+    [requestClose],
+  );
+  const requestCloseOthers = useCallback(
+    (uri: string) =>
+      requestClose(
+        api
+          .getState()
+          .tabs.map((tab) => tab.uri)
+          .filter((entry) => entry !== uri),
+      ),
+    [api, requestClose],
+  );
+  const requestCloseAll = useCallback(
+    () => requestClose(api.getState().tabs.map((tab) => tab.uri)),
+    [api, requestClose],
+  );
+
+  const handleSaveAndClose = useCallback(async () => {
+    const pending = pendingClose;
+    if (!pending) return;
+    setPendingClose(null);
+    try {
+      for (const uri of pending.dirtyUris) {
+        await api.save(uri);
+      }
+    } catch (error) {
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : "Could not save file" /* i18n-ignore */,
+      );
+      return;
+    }
+    closeUris(pending.uris);
+  }, [api, closeUris, pendingClose]);
+
+  const handleDiscardAndClose = useCallback(() => {
+    const pending = pendingClose;
+    if (!pending) return;
+    setPendingClose(null);
+    closeUris(pending.uris);
+  }, [closeUris, pendingClose]);
+
+  const handleWheel = useCallback((event: React.WheelEvent) => {
+    const el = scrollRef.current;
+    if (!el || el.scrollWidth <= el.clientWidth) return;
+    if (event.deltaY === 0) return;
+    el.scrollLeft += event.deltaY;
+    event.preventDefault();
+  }, []);
+
+  const handleDragStart = useCallback(
+    (index: number) => (event: React.DragEvent) => {
+      activeTabDrag = { fromIndex: index };
+      event.dataTransfer.effectAllowed = "move";
+      // Firefox requires data to be set for drag to initiate.
+      event.dataTransfer.setData("text/plain", String(index));
+    },
+    [],
+  );
+
+  const handleDragOver = useCallback(
+    (index: number) => (event: React.DragEvent) => {
+      if (!activeTabDrag) return;
+      event.preventDefault();
+      event.dataTransfer.dropEffect = "move";
+      const rect = event.currentTarget.getBoundingClientRect();
+      const rightHalf = event.clientX - rect.left > rect.width / 2;
+      setDropIndicator({ index, side: rightHalf ? "right" : "left" });
+    },
+    [],
+  );
+
+  const handleDrop = useCallback(
+    (index: number) => (event: React.DragEvent) => {
+      event.preventDefault();
+      const drag = activeTabDrag;
+      activeTabDrag = null;
+      setDropIndicator(null);
+      if (!drag) return;
+      const rect = event.currentTarget.getBoundingClientRect();
+      const rightHalf = event.clientX - rect.left > rect.width / 2;
+      const toIndex = resolveTabDropIndex(drag.fromIndex, index, rightHalf);
+      if (isTabReorderNoop(drag.fromIndex, toIndex)) return;
+      api.reorderTabs(drag.fromIndex, toIndex);
+    },
+    [api],
+  );
+
+  const handleDragEnd = useCallback(() => {
+    activeTabDrag = null;
+    setDropIndicator(null);
+  }, []);
+
+  if (state.tabs.length === 0) {
+    return (
+      <div
+        data-testid="workbench-editor-tabs"
+        className="h-9 shrink-0 border-b border-[var(--workbench-tab-border)] bg-[var(--workbench-tabbar-bg)]"
+      />
+    );
+  }
+
+  return (
+    <div
+      ref={scrollRef}
+      onWheel={handleWheel}
+      data-testid="workbench-editor-tabs"
+      className="flex h-9 shrink-0 items-stretch overflow-x-auto overflow-y-hidden border-b border-[var(--workbench-tab-border)] bg-[var(--workbench-tabbar-bg)] [scrollbar-width:thin]"
+    >
+      {state.tabs.map((tab, index) => (
+        <EditorTabRow
+          key={tab.uri}
+          tab={tab}
+          index={index}
+          active={tab.uri === state.activeUri}
+          dropIndicator={
+            dropIndicator?.index === index ? dropIndicator.side : null
+          }
+          onDragStart={handleDragStart(index)}
+          onDragOver={handleDragOver(index)}
+          onDrop={handleDrop(index)}
+          onDragEnd={handleDragEnd}
+          onRequestClose={requestCloseTab}
+          onRequestCloseOthers={requestCloseOthers}
+          onRequestCloseAll={requestCloseAll}
+        />
+      ))}
+      <AlertDialog
+        open={pendingClose !== null}
+        onOpenChange={(open) => {
+          if (!open) setPendingClose(null);
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {"Save changes before closing?" /* i18n-ignore */}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {"The following files have unsaved changes:" /* i18n-ignore */}{" "}
+              {pendingClose?.dirtyUris
+                .map((uri) => baseName(parseWorkbenchUri(uri).path))
+                .join(", ")}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{"Cancel" /* i18n-ignore */}</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-transparent text-foreground shadow-none hover:bg-muted"
+              onClick={handleDiscardAndClose}
+            >
+              {"Don't Save" /* i18n-ignore */}
+            </AlertDialogAction>
+            <AlertDialogAction onClick={() => void handleSaveAndClose()}>
+              {"Save" /* i18n-ignore */}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}
+
+function EditorTabRow({
+  tab,
+  index,
+  active,
+  dropIndicator,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  onDragEnd,
+  onRequestClose,
+  onRequestCloseOthers,
+  onRequestCloseAll,
+}: {
+  tab: EditorTab;
+  index: number;
+  active: boolean;
+  dropIndicator: "left" | "right" | null;
+  onDragStart: (event: React.DragEvent) => void;
+  onDragOver: (event: React.DragEvent) => void;
+  onDrop: (event: React.DragEvent) => void;
+  onDragEnd: () => void;
+  onRequestClose: (uri: string) => void;
+  onRequestCloseOthers: (uri: string) => void;
+  onRequestCloseAll: () => void;
+}) {
+  const { state, api } = useWorkbench();
+  const [hovered, setHovered] = useState(false);
+  const meta = state.buffers[tab.uri];
+  const dirty = meta?.dirty ?? false;
+  const name = baseName(tab.path);
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        <div
+          draggable
+          onDragStart={onDragStart}
+          onDragOver={onDragOver}
+          onDrop={onDrop}
+          onDragEnd={onDragEnd}
+          onMouseEnter={() => setHovered(true)}
+          onMouseLeave={() => setHovered(false)}
+          onClick={() => api.setActive(tab.uri)}
+          onMouseDown={(event) => {
+            // Middle-click closes (VS Code parity).
+            if (event.button === 1) {
+              event.preventDefault();
+              onRequestClose(tab.uri);
+            }
+          }}
+          onDoubleClick={() => api.pinTab(tab.uri)}
+          title={tab.path}
+          data-testid="workbench-editor-tab"
+          data-active={active || undefined}
+          className={cn(
+            "relative flex h-9 min-w-0 max-w-[200px] shrink-0 cursor-pointer select-none items-center gap-1.5 border-r border-[var(--workbench-tab-border)] px-3 text-[12px] outline-none",
+            active
+              ? "bg-[var(--workbench-tab-active-bg)] text-[var(--workbench-tab-active-fg)]"
+              : "bg-[var(--workbench-tab-inactive-bg)] text-[var(--workbench-tab-inactive-fg)] hover:bg-[var(--workbench-list-hover-bg)]",
+            dropIndicator === "left" &&
+              "shadow-[inset_2px_0_0_0_var(--workbench-accent)]",
+            dropIndicator === "right" &&
+              "shadow-[inset_-2px_0_0_0_var(--workbench-accent)]",
+          )}
+        >
+          {active ? (
+            <span className="absolute inset-x-0 top-0 h-[2px] bg-[var(--workbench-accent)]" />
+          ) : null}
+          <FileIcon path={tab.path} />
+          <span
+            className={cn("min-w-0 flex-1 truncate", tab.preview && "italic")}
+          >
+            {name}
+          </span>
+          <button
+            type="button"
+            aria-label={
+              dirty
+                ? `Close ${name} (unsaved)` /* i18n-ignore */
+                : `Close ${name}` /* i18n-ignore */
+            }
+            className="flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-[3px] hover:bg-[var(--workbench-list-hover-bg)]"
+            onClick={(event) => {
+              event.stopPropagation();
+              onRequestClose(tab.uri);
+            }}
+          >
+            {dirty && !hovered ? (
+              <span className="size-2 rounded-full bg-[var(--workbench-accent)]" />
+            ) : (
+              <IconX className="size-3.5" />
+            )}
+          </button>
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem onSelect={() => onRequestClose(tab.uri)}>
+          {"Close" /* i18n-ignore */}
+        </ContextMenuItem>
+        <ContextMenuItem onSelect={() => onRequestCloseOthers(tab.uri)}>
+          {"Close Others" /* i18n-ignore */}
+        </ContextMenuItem>
+        <ContextMenuItem onSelect={() => api.closeSaved()}>
+          {"Close Saved" /* i18n-ignore */}
+        </ContextMenuItem>
+        <ContextMenuItem onSelect={() => onRequestCloseAll()}>
+          {"Close All" /* i18n-ignore */}
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem
+          onSelect={() => {
+            void navigator.clipboard?.writeText(tab.path);
+          }}
+        >
+          {"Copy Path" /* i18n-ignore */}
+        </ContextMenuItem>
+        <ContextMenuItem onSelect={() => api.setSideView("explorer")}>
+          {"Reveal in Explorer" /* i18n-ignore */}
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}

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

@@ -0,0 +1,268 @@
+import type * as monaco from "monaco-editor";
+import { useEffect, useRef, useState, type MutableRefObject } from "react";
+
+import { Spinner } from "@/components/ui/spinner";
+
+import {
+  readCodeWorkbenchTheme,
+  type CodeWorkbenchTheme,
+} from "../../code-workbench-theme";
+import {
+  dispatchKeybinding,
+  type WorkbenchCommand,
+  type WorkbenchCommandContext,
+} from "../commands";
+import { modelRegistry } from "../model-registry";
+import { useWorkbench } from "../store";
+import {
+  ensureMonacoEnvironment,
+  monaco as monacoModule,
+} from "./monaco-setup";
+import { defineWorkbenchMonacoTheme } from "./monaco-theme";
+
+const MONACO_FONT_FAMILY =
+  'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace';
+
+export interface MonacoHostProps {
+  editorRef: MutableRefObject<monaco.editor.IStandaloneCodeEditor | null>;
+  selectedNodeId?: string | null;
+  selectedSelector?: string | null;
+  commands: WorkbenchCommand[];
+  commandContext: WorkbenchCommandContext;
+}
+
+/**
+ * Single IStandaloneCodeEditor instance for the editor group. One model per
+ * open tab lives in the shared model-registry; this component only swaps
+ * `setModel` + view state on tab switch, so cursor/scroll/folds persist per
+ * tab like real VS Code editor groups.
+ */
+export function MonacoHost({
+  editorRef,
+  selectedNodeId,
+  selectedSelector,
+  commands,
+  commandContext,
+}: MonacoHostProps) {
+  const { state } = useWorkbench();
+  const hostRef = useRef<HTMLDivElement | null>(null);
+  const activeUriRef = useRef<string | null>(null);
+  const commandsRef = useRef(commands);
+  const commandContextRef = useRef(commandContext);
+  const lastSelectionKeyRef = useRef<string | null>(null);
+  const [theme, setTheme] = useState<CodeWorkbenchTheme>(() => ({
+    colorScheme: "light",
+    values: {},
+  }));
+
+  commandsRef.current = commands;
+  commandContextRef.current = commandContext;
+
+  // Create the editor once.
+  useEffect(() => {
+    ensureMonacoEnvironment();
+    if (!hostRef.current || editorRef.current) return;
+    const editor = monacoModule.editor.create(hostRef.current, {
+      value: "",
+      automaticLayout: true,
+      contextmenu: true,
+      fontFamily: MONACO_FONT_FAMILY,
+      fontSize: 12,
+      lineHeight: 20,
+      minimap: { enabled: true, scale: 0.75, showSlider: "mouseover" },
+      bracketPairColorization: { enabled: true },
+      guides: { bracketPairs: true, indentation: true },
+      lineNumbers: "on",
+      renderLineHighlight: "all",
+      scrollBeyondLastLine: false,
+      stickyScroll: { enabled: true },
+      tabSize: 2,
+      insertSpaces: true,
+      wordWrap: "off",
+      smoothScrolling: true,
+      cursorBlinking: "blink",
+      fontLigatures: false,
+      quickSuggestions: true,
+      folding: true,
+      links: true,
+      mouseWheelZoom: true,
+      find: { addExtraSpaceOnTop: true },
+    });
+    editorRef.current = editor;
+
+    // Safety net: Monaco's own Cmd+S binding (if any) is not guaranteed, and
+    // the root's capture-phase keydown handler already dispatches workbench
+    // commands before Monaco sees them — this addCommand is a belt-and-
+    // braces fallback for save specifically.
+    editor.addCommand(
+      monacoModule.KeyMod.CtrlCmd | monacoModule.KeyCode.KeyS,
+      () => {
+        void commandContextRef.current.api.save();
+      },
+    );
+
+    // Workbench-level shortcuts (Quick Open, Command Palette, Search,
+    // Explorer, sidebar toggle, tab navigation) must also work while Monaco
+    // has focus — Monaco swallows keydown otherwise, so register editor
+    // commands that call back into the same dispatcher the root uses.
+    const editorKeyDownDisposable = editor.onKeyDown((event) => {
+      const handled = dispatchKeybinding(
+        event.browserEvent,
+        commandsRef.current,
+        commandContextRef.current,
+      );
+      if (handled) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    });
+
+    return () => {
+      editorKeyDownDisposable.dispose();
+      editor.dispose();
+      editorRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Theme: watch documentElement class (light/dark) and reapply on change.
+  useEffect(() => {
+    const updateTheme = () => {
+      const nextTheme = readCodeWorkbenchTheme(hostRef.current);
+      setTheme((current) =>
+        current.colorScheme === nextTheme.colorScheme &&
+        JSON.stringify(current.values) === JSON.stringify(nextTheme.values)
+          ? current
+          : nextTheme,
+      );
+    };
+    updateTheme();
+    const observer = new MutationObserver(updateTheme);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "style", "data-theme"],
+    });
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    media.addEventListener("change", updateTheme);
+    return () => {
+      observer.disconnect();
+      media.removeEventListener("change", updateTheme);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!editorRef.current) return;
+    monacoModule.editor.setTheme(defineWorkbenchMonacoTheme(theme));
+  }, [theme, editorRef]);
+
+  // Active tab change: save view state for the outgoing model, set the
+  // incoming model (creating lazily from the buffer if needed), restore its
+  // view state, and focus.
+  const activeUri = state.activeUri;
+  const activeBuffer = activeUri ? state.buffers[activeUri] : null;
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    const previousUri = activeUriRef.current;
+    if (previousUri && previousUri !== activeUri) {
+      modelRegistry.saveViewState(previousUri, editor.saveViewState());
+    }
+    activeUriRef.current = activeUri;
+    if (!activeUri) {
+      editor.setModel(null);
+      return;
+    }
+    const entry = modelRegistry.get(activeUri);
+    if (!entry) {
+      // Buffer still loading; wait for the next render once the model
+      // registry has an entry (store.loadBuffer creates it on read success).
+      return;
+    }
+    if (editor.getModel() !== entry.model) {
+      editor.setModel(entry.model);
+      const viewState = modelRegistry.getViewState(activeUri);
+      if (viewState) editor.restoreViewState(viewState);
+      editor.focus();
+    }
+    const meta = activeBuffer;
+    editor.updateOptions({
+      readOnly: Boolean(meta?.readonly),
+      readOnlyMessage: meta?.readonly
+        ? {
+            value:
+              "This source is read-only in the current workspace." /* i18n-ignore */,
+          }
+        : undefined,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeUri, activeBuffer?.readonly, activeBuffer?.loading, editorRef]);
+
+  // Dirty tracking is owned by the store (subscribed at model creation), not
+  // here — models are created async after their tab appears, so a tab-list
+  // keyed subscription would miss freshly loaded buffers.
+
+  // Selection reveal: find data-agent-native-node-id / data-code-layer-id /
+  // selector in the active model's content and reveal+select the match.
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor || !activeUri) return;
+    const entry = modelRegistry.get(activeUri);
+    if (!entry) return;
+    const key = [
+      activeUri,
+      selectedNodeId ?? "",
+      selectedSelector ?? "",
+      activeBuffer?.savedVersionHash ?? "",
+    ].join(":");
+    if (lastSelectionKeyRef.current === key) return;
+    lastSelectionKeyRef.current = key;
+    if (!selectedNodeId && !selectedSelector) return;
+    const model = entry.model;
+    const content = model.getValue();
+    const targets: string[] = [];
+    if (selectedNodeId) {
+      targets.push(`data-agent-native-node-id="${selectedNodeId}"`);
+      targets.push(`data-code-layer-id="${selectedNodeId}"`);
+      targets.push(selectedNodeId);
+    }
+    if (selectedSelector) targets.push(selectedSelector);
+    for (const target of targets) {
+      const index = content.indexOf(target);
+      if (index < 0) continue;
+      const start = model.getPositionAt(index);
+      const end = model.getPositionAt(index + target.length);
+      const range = new monacoModule.Range(
+        start.lineNumber,
+        start.column,
+        end.lineNumber,
+        end.column,
+      );
+      editor.setSelection(range);
+      editor.revealRangeInCenter(range, monacoModule.editor.ScrollType.Smooth);
+      return;
+    }
+  }, [
+    activeUri,
+    activeBuffer?.savedVersionHash,
+    editorRef,
+    selectedNodeId,
+    selectedSelector,
+  ]);
+
+  const loading = Boolean(activeUri && activeBuffer?.loading);
+
+  return (
+    <div className="absolute inset-0">
+      <div
+        ref={hostRef}
+        data-testid="design-code-monaco-editor"
+        className="absolute inset-0"
+      />
+      {loading ? (
+        <div className="absolute inset-0 grid place-items-center bg-[var(--workbench-editor-bg)]/80 text-[var(--workbench-muted-fg)]">
+          <Spinner className="size-4" />
+        </div>
+      ) : null}
+    </div>
+  );
+}