npm - @agent-native/core - Versions diffs - 0.84.37 → 0.84.39 - Mend

@agent-native/core 0.84.37 → 0.84.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/corpus/templates/design/app/components/design/CodeWorkbenchHost.tsx CHANGED Viewed

@@ -1,6 +1,27 @@
 import { useActionMutation, useActionQuery } from "@agent-native/core/client";
-import { IconCode, IconDeviceFloppy } from "@tabler/icons-react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  IconCode,
+  IconDeviceFloppy,
+  IconFileCode,
+  IconFolder,
+  IconRefresh,
+  IconSearch,
+} from "@tabler/icons-react";
+import * as monaco 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";
+import {
+  type CSSProperties,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
@@ -65,6 +86,21 @@ function normalizeThemeColorValue(value: string): string {
   return trimmed;
 }
+function resolveCssColorValue(value: string): string {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return value;
+  }
+  const probe = document.createElement("span");
+  probe.style.color = value;
+  probe.style.position = "fixed";
+  probe.style.pointerEvents = "none";
+  probe.style.visibility = "hidden";
+  document.body.appendChild(probe);
+  const resolved = window.getComputedStyle(probe).color;
+  probe.remove();
+  return resolved || value;
+}
 function readThemeVar(
   elementStyles: CSSStyleDeclaration,
   rootStyles: CSSStyleDeclaration,
@@ -74,7 +110,7 @@ function readThemeVar(
     const value =
       elementStyles.getPropertyValue(name) || rootStyles.getPropertyValue(name);
     const normalized = normalizeThemeColorValue(value);
-    if (normalized) return normalized;
+    if (normalized) return resolveCssColorValue(normalized);
   }
   return undefined;
 }
@@ -101,198 +137,95 @@ function readCodeWorkbenchTheme(
   return { colorScheme, values };
 }
-export const WORKBENCH_SRC_DOC = `<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
-<style>
-  :root {
-    color-scheme: light;
-    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-    --workbench-bg: Canvas;
-    --workbench-sidebar-bg: Canvas;
-    --workbench-editor-bg: Canvas;
-    --workbench-surface-bg: ButtonFace;
-    --workbench-border: color-mix(in srgb, CanvasText 16%, transparent);
-    --workbench-fg: CanvasText;
-    --workbench-muted-fg: color-mix(in srgb, CanvasText 56%, transparent);
-    --workbench-hover-bg: color-mix(in srgb, Highlight 10%, transparent);
-    --workbench-active-bg: color-mix(in srgb, Highlight 16%, transparent);
-    --workbench-active-fg: Highlight;
-    --workbench-accent: Highlight;
-    --workbench-button-bg: ButtonFace;
-    --workbench-button-fg: ButtonText;
-    --workbench-selection-bg: color-mix(in srgb, Highlight 28%, transparent);
-    --workbench-dirty: Mark;
-    background: var(--workbench-bg);
-    color: var(--workbench-fg);
-  }
-  * { box-sizing: border-box; }
-  body { margin: 0; height: 100vh; overflow: hidden; background: var(--workbench-bg); }
-  button { font: inherit; }
-  .shell { display: grid; grid-template-columns: 188px minmax(0, 1fr); height: 100vh; }
-  .explorer { border-right: 1px solid var(--workbench-border); background: var(--workbench-sidebar-bg); min-width: 0; display: flex; flex-direction: column; }
-  .title { height: 38px; display: flex; align-items: center; padding: 0 12px; gap: 8px; border-bottom: 1px solid var(--workbench-border); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--workbench-muted-fg); }
-  .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--workbench-accent); box-shadow: 0 0 18px color-mix(in srgb, var(--workbench-accent) 55%, transparent); }
-  .files { min-height: 0; overflow: auto; padding: 8px 6px; }
-  .file { width: 100%; min-width: 0; border: 0; border-radius: 7px; background: transparent; color: var(--workbench-muted-fg); display: flex; align-items: center; gap: 7px; padding: 7px 8px; cursor: pointer; text-align: left; }
-  .file:hover { background: var(--workbench-hover-bg); color: var(--workbench-fg); }
-  .file.active { background: var(--workbench-active-bg); color: var(--workbench-active-fg); }
-  .file .icon { width: 22px; color: var(--workbench-accent); font-size: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
-  .file .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
-  .status { border-top: 1px solid var(--workbench-border); color: var(--workbench-muted-fg); font-size: 11px; line-height: 1.35; padding: 9px 10px; }
-  .editor { min-width: 0; display: flex; flex-direction: column; background: var(--workbench-editor-bg); }
-  .tabbar { height: 38px; display: flex; align-items: center; border-bottom: 1px solid var(--workbench-border); background: var(--workbench-surface-bg); }
-  .tab { height: 38px; max-width: 260px; display: flex; align-items: center; gap: 8px; padding: 0 13px; border-right: 1px solid var(--workbench-border); color: var(--workbench-fg); font-size: 12px; }
-  .dirty { width: 7px; height: 7px; border-radius: 999px; background: var(--workbench-dirty); }
-  .toolbar { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 0 10px; color: var(--workbench-muted-fg); font-size: 11px; }
-  .toolbar button { height: 26px; border: 1px solid var(--workbench-border); border-radius: 6px; background: var(--workbench-button-bg); color: var(--workbench-button-fg); padding: 0 9px; cursor: pointer; }
-  .toolbar button:disabled { opacity: .4; cursor: default; }
-  textarea { flex: 1; width: 100%; min-width: 0; resize: none; border: 0; outline: 0; padding: 18px 20px 28px; background: var(--workbench-editor-bg); color: var(--workbench-fg); font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; tab-size: 2; }
-  textarea::selection { background: var(--workbench-selection-bg); }
-  .empty { flex: 1; display: grid; place-items: center; color: var(--workbench-muted-fg); font-size: 13px; text-align: center; padding: 24px; }
-</style>
-</head>
-<body>
-<div class="shell">
-  <aside class="explorer">
-    <div class="title"><span class="dot"></span><span>DesignFS</span></div>
-    <div id="files" class="files"></div>
-    <div id="status" class="status">Waiting for workspace...</div>
-  </aside>
-  <main class="editor">
-    <div class="tabbar">
-      <div id="tab" class="tab">No file</div>
-      <div class="toolbar">
-        <span id="meta"></span>
-        <button id="revert" type="button" disabled>Revert</button>
-        <button id="save" type="button" disabled>Save</button>
-      </div>
-    </div>
-    <textarea id="editor" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"></textarea>
-  </main>
-</div>
-<script>
-  const filesEl = document.getElementById("files");
-  const statusEl = document.getElementById("status");
-  const tabEl = document.getElementById("tab");
-  const metaEl = document.getElementById("meta");
-  const editorEl = document.getElementById("editor");
-  const saveEl = document.getElementById("save");
-  const revertEl = document.getElementById("revert");
-  let state = { files: [], activePath: null, content: "", savedContent: "", dirty: false, canEdit: false };
-  let lastSelectionKey = "";
-  function applyTheme(theme) {
-    const root = document.documentElement;
-    if (!theme) return;
-    root.style.colorScheme = theme.colorScheme === "dark" ? "dark" : "light";
-    const values = theme.values || {};
-    for (const name of Object.keys(values)) {
-      root.style.setProperty(name, values[name]);
-    }
-  }
-  function iconFor(path) {
-    if (/\\.css$/i.test(path)) return "#";
-    if (/\\.jsx?$/i.test(path)) return "JS";
-    if (/\\.tsx?$/i.test(path)) return "TS";
-    return "<>";
-  }
+let monacoEnvironmentInstalled = false;
-  function renderFiles() {
-    filesEl.innerHTML = "";
-    state.files.forEach((file) => {
-      const button = document.createElement("button");
-      button.type = "button";
-      button.className = "file" + (file.path === state.activePath ? " active" : "");
-      button.title = file.path;
-      const icon = document.createElement("span");
-      icon.className = "icon";
-      icon.textContent = iconFor(file.path);
-      const name = document.createElement("span");
-      name.className = "name";
-      name.textContent = file.displayName || file.path;
-      button.append(icon, name);
-      button.addEventListener("click", () => {
-        parent.postMessage({ type: "design-code-workbench:select-file", path: file.path }, "*");
-      });
-      filesEl.appendChild(button);
-    });
-  }
-  function focusSelection() {
-    const selection = state.selection || {};
-    const key = [state.activePath, selection.nodeId || "", selection.selector || "", state.versionHash || ""].join(":");
-    if (!state.content || key === lastSelectionKey) return;
-    lastSelectionKey = key;
-    const targets = [];
-    if (selection.nodeId) {
-      targets.push('data-agent-native-node-id="' + selection.nodeId + '"');
-      targets.push('data-code-layer-id="' + selection.nodeId + '"');
-      targets.push(selection.nodeId);
-    }
-    if (selection.selector) targets.push(selection.selector);
-    for (const target of targets) {
-      const index = state.content.indexOf(target);
-      if (index >= 0) {
-        editorEl.focus();
-        editorEl.setSelectionRange(index, Math.min(state.content.length, index + target.length));
-        return;
+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();
       }
-    }
-  }
-  function render() {
-    renderFiles();
-    const active = state.files.find((file) => file.path === state.activePath);
-    tabEl.replaceChildren();
-    if (active) {
-      const label = document.createElement("span");
-      label.textContent = active.path;
-      tabEl.appendChild(label);
-      if (state.dirty) {
-        const dirty = document.createElement("span");
-        dirty.className = "dirty";
-        tabEl.appendChild(dirty);
+      if (label === "html" || label === "handlebars" || label === "razor") {
+        return new HtmlWorker();
       }
-    } else {
-      tabEl.textContent = "No file";
-    }
-    metaEl.textContent = state.dirty ? "Unsaved changes" : (state.versionHash ? "Saved " + state.versionHash : "");
-    saveEl.disabled = !state.canEdit || !state.dirty || state.saving || !active;
-    revertEl.disabled = !state.dirty || !active;
-    statusEl.textContent = active
-      ? (state.backendKind || "virtual-inline") + " / " + state.workspaceUri
-      : state.files.length ? "Choose a file" : "No inline files";
-    if (editorEl.value !== state.content) editorEl.value = state.content || "";
-    editorEl.readOnly = !state.canEdit || !active;
-    focusSelection();
-  }
+      if (label === "json") return new JsonWorker();
+      if (label === "typescript" || label === "javascript") {
+        return new TypeScriptWorker();
+      }
+      return new EditorWorker();
+    },
+  };
+  monacoEnvironmentInstalled = true;
+}
-  window.addEventListener("message", (event) => {
-    const message = event.data || {};
-    if (message.type !== "design-code-workbench:state") return;
-    state = message.state || state;
-    applyTheme(state.theme);
-    render();
-  });
+function languageForPath(path: string, language?: string): string {
+  if (language === "html" || /\.html?$/i.test(path)) return "html";
+  if (language === "css" || /\.css$/i.test(path)) return "css";
+  if (language === "json" || /\.json$/i.test(path)) return "json";
+  if (language === "typescript" || /\.tsx?$/i.test(path)) return "typescript";
+  if (language === "javascript" || /\.jsx?$/i.test(path)) return "javascript";
+  return language || "plaintext";
+}
-  editorEl.addEventListener("input", () => {
-    parent.postMessage({ type: "design-code-workbench:content-change", content: editorEl.value }, "*");
-  });
-  saveEl.addEventListener("click", () => {
-    parent.postMessage({ type: "design-code-workbench:save" }, "*");
+function extensionBadgeForPath(path: string): string {
+  if (/\.css$/i.test(path)) return "CSS";
+  if (/\.tsx$/i.test(path)) return "TSX";
+  if (/\.ts$/i.test(path)) return "TS";
+  if (/\.jsx$/i.test(path)) return "JSX";
+  if (/\.js$/i.test(path)) return "JS";
+  if (/\.json$/i.test(path)) return "{}";
+  if (/\.html?$/i.test(path)) return "<>";
+  return "TXT";
+}
+function editorUriForPath(designId: string, path: string) {
+  return monaco.Uri.from({
+    scheme: "designfs",
+    authority: designId,
+    path: `/${path.replace(/^\/+/, "")}`,
   });
-  revertEl.addEventListener("click", () => {
-    parent.postMessage({ type: "design-code-workbench:revert" }, "*");
+}
+function defineMonacoTheme(theme: CodeWorkbenchTheme): string {
+  const dark = theme.colorScheme === "dark";
+  const values = theme.values;
+  const name = dark
+    ? "design-code-workbench-dark"
+    : "design-code-workbench-light";
+  const colors = Object.fromEntries(
+    Object.entries({
+      "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"],
+      "editorWidget.background": values["--workbench-surface-bg"],
+      "editorWidget.border": values["--workbench-border"],
+      focusBorder: values["--workbench-accent"],
+    }).filter(
+      (entry): entry is [string, string] =>
+        typeof entry[1] === "string" && entry[1].length > 0,
+    ),
+  );
+  monaco.editor.defineTheme(name, {
+    base: dark ? "vs-dark" : "vs",
+    inherit: true,
+    rules: [],
+    colors,
   });
+  return name;
+}
-  parent.postMessage({ type: "design-code-workbench:ready" }, "*");
-</script>
-</body>
-</html>`;
+const MONACO_FONT_FAMILY =
+  'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace';
 export function CodeWorkbenchHost({
   designId,
@@ -304,13 +237,21 @@ export function CodeWorkbenchHost({
   onActiveFileChange,
 }: CodeWorkbenchHostProps) {
   const containerRef = useRef<HTMLDivElement | null>(null);
-  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const editorHostRef = useRef<HTMLDivElement | null>(null);
+  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
+  const modelRef = useRef<monaco.editor.ITextModel | null>(null);
+  const applyingModelContentRef = useRef(false);
+  const contentChangeRef = useRef<(content: string) => void>(() => {});
+  const saveCommandRef = useRef<(() => void) | null>(null);
   const lastExternalTargetKeyRef = useRef<string | null>(null);
+  const lastSelectionKeyRef = useRef<string | null>(null);
   const [activePath, setActivePath] = useState<string | null>(null);
   const [draftsByPath, setDraftsByPath] = useState<
     Record<string, CodeWorkbenchDraft>
   >({});
-  const [ready, setReady] = useState(false);
+  const [editorReady, setEditorReady] = useState(false);
+  const [cursorLabel, setCursorLabel] = useState("Ln 1, Col 1");
+  const [previewSummary, setPreviewSummary] = useState<string | null>(null);
   const [theme, setTheme] = useState<CodeWorkbenchTheme>(() => ({
     colorScheme: "light",
     values: {},
@@ -327,6 +268,7 @@ export function CodeWorkbenchHost({
     { enabled: Boolean(selectedPath) },
   );
   const readSource = readSourceQuery.data as any;
+  const previewSourceEditMutation = useActionMutation("preview-source-edit");
   const applySourceEditMutation = useActionMutation("apply-source-edit");
   const savedContent = readSource?.content ?? "";
   const activeDraft = selectedPath ? draftsByPath[selectedPath] : undefined;
@@ -340,6 +282,14 @@ export function CodeWorkbenchHost({
       file.path === selectedPath ||
       (activeFileId && file.fileId === activeFileId),
   );
+  const activeDisplayName =
+    activeSourceFile?.displayName ?? readSource?.displayName ?? selectedPath;
+  const activeLanguage = languageForPath(selectedPath, readSource?.language);
+  const canEditSource = canEdit && readSource?.readonly !== true;
+  const saving =
+    previewSourceEditMutation.isPending || applySourceEditMutation.isPending;
+  const workspaceUri = backend?.workspaceUri ?? `designfs://${designId}/`;
+  const backendKind = backend?.kind ?? "virtual-inline";
   useEffect(() => {
     const updateTheme = () => {
@@ -369,6 +319,7 @@ export function CodeWorkbenchHost({
     setActivePath(null);
     setDraftsByPath({});
     lastExternalTargetKeyRef.current = null;
+    lastSelectionKeyRef.current = null;
     onActiveFileChange?.(null);
   }, [designId, onActiveFileChange]);
@@ -411,6 +362,97 @@ export function CodeWorkbenchHost({
     [readSource?.versionHash, savedContent, selectedPath],
   );
+  const revertSelectedFile = useCallback(() => {
+    setSelectedDraftContent(savedContent);
+    setPreviewSummary(null);
+  }, [savedContent, setSelectedDraftContent]);
+  useEffect(() => {
+    contentChangeRef.current = (content: string) => {
+      setSelectedDraftContent(content);
+      setPreviewSummary(null);
+    };
+  }, [setSelectedDraftContent]);
+  const saveSelectedFile = useCallback(() => {
+    if (!selectedPath || !dirty || !canEditSource || saving) return;
+    const edit = { kind: "full-replace" as const, content: draftContent };
+    previewSourceEditMutation.mutate(
+      {
+        designId,
+        path: selectedPath,
+        expectedVersionHash,
+        edit,
+      } as any,
+      {
+        onSuccess: (preview: any) => {
+          if (preview?.okToApply === false) {
+            toast.error(
+              preview.message ||
+                "Source file changed since it was read" /* i18n-ignore */,
+            );
+            return;
+          }
+          setPreviewSummary(
+            preview?.diff?.summary ||
+              `${preview?.editsApplied ?? 1} edit previewed` /* i18n-ignore */,
+          );
+          applySourceEditMutation.mutate(
+            {
+              designId,
+              path: selectedPath,
+              expectedVersionHash:
+                preview?.currentVersionHash ?? expectedVersionHash,
+              edit,
+            } as any,
+            {
+              onSuccess: (result: any) => {
+                setDraftsByPath((current) => {
+                  const next = { ...current };
+                  delete next[selectedPath];
+                  return next;
+                });
+                setPreviewSummary(
+                  result?.diff?.summary ||
+                    "Saved through source actions" /* i18n-ignore */,
+                );
+                toast.success("Source file saved" /* i18n-ignore */);
+              },
+              onError: (error) => {
+                toast.error(
+                  error instanceof Error
+                    ? error.message
+                    : "Could not save source file" /* i18n-ignore */,
+                );
+              },
+            },
+          );
+        },
+        onError: (error) => {
+          toast.error(
+            error instanceof Error
+              ? error.message
+              : "Could not preview source edit" /* i18n-ignore */,
+          );
+        },
+      },
+    );
+  }, [
+    applySourceEditMutation,
+    canEditSource,
+    designId,
+    dirty,
+    draftContent,
+    expectedVersionHash,
+    previewSourceEditMutation,
+    saving,
+    selectedPath,
+  ]);
+  useEffect(() => {
+    saveCommandRef.current = saveSelectedFile;
+  }, [saveSelectedFile]);
   useEffect(() => {
     onActiveFileChange?.(
       selectedPath
@@ -432,176 +474,179 @@ export function CodeWorkbenchHost({
     selectedPath,
   ]);
-  const workbenchState = useMemo(
-    () => ({
-      files: sourceFiles,
-      activePath: selectedPath || null,
-      content: draftContent,
-      savedContent,
-      dirty,
-      canEdit: canEdit && readSource?.readonly !== true,
-      saving: applySourceEditMutation.isPending,
-      versionHash: readSource?.versionHash,
-      workspaceUri: backend?.workspaceUri ?? `designfs://${designId}/`,
-      backendKind: backend?.kind ?? "virtual-inline",
-      theme,
-      selection: {
-        nodeId: selectedNodeId,
-        selector: selectedSelector,
-      },
-    }),
-    [
-      applySourceEditMutation.isPending,
-      backend?.kind,
-      backend?.workspaceUri,
-      canEdit,
-      designId,
-      dirty,
-      draftContent,
-      readSource?.readonly,
-      readSource?.versionHash,
-      savedContent,
-      selectedNodeId,
-      selectedPath,
-      selectedSelector,
-      sourceFiles,
-      theme,
-    ],
-  );
   useEffect(() => {
-    if (!ready) return;
-    iframeRef.current?.contentWindow?.postMessage(
-      { type: "design-code-workbench:state", state: workbenchState },
-      "*",
+    ensureMonacoEnvironment();
+    if (!editorHostRef.current || editorRef.current) return;
+    const editor = monaco.editor.create(editorHostRef.current, {
+      value: "",
+      language: "html",
+      theme: defineMonacoTheme(theme),
+      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",
+      renderWhitespace: "selection",
+      scrollBeyondLastLine: false,
+      stickyScroll: { enabled: true },
+      tabSize: 2,
+      insertSpaces: true,
+      wordWrap: "off",
+    });
+    editorRef.current = editor;
+    setEditorReady(true);
+    const updateCursorLabel = () => {
+      const position = editor.getPosition();
+      setCursorLabel(
+        position
+          ? `Ln ${position.lineNumber}, Col ${position.column}` /* i18n-ignore */
+          : "Ln 1, Col 1" /* i18n-ignore */,
+      );
+    };
+    const disposables = [
+      editor.onDidChangeModelContent(() => {
+        if (applyingModelContentRef.current) return;
+        contentChangeRef.current(editor.getValue());
+      }),
+      editor.onDidChangeCursorPosition(updateCursorLabel),
+    ];
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () =>
+      saveCommandRef.current?.(),
     );
-  }, [ready, workbenchState]);
+    updateCursorLabel();
+    return () => {
+      disposables.forEach((disposable) => disposable?.dispose?.());
+      editor.dispose();
+      modelRef.current?.dispose();
+      modelRef.current = null;
+      editorRef.current = null;
+    };
+  }, []);
   useEffect(() => {
-    const handleMessage = (event: MessageEvent) => {
-      if (event.source !== iframeRef.current?.contentWindow) return;
-      const message = event.data as
-        | { type?: string; path?: string; content?: string }
-        | undefined;
-      if (!message?.type) return;
-      if (message.type === "design-code-workbench:ready") {
-        setReady(true);
-        return;
-      }
-      if (
-        message.type === "design-code-workbench:select-file" &&
-        message.path
-      ) {
-        setActivePath(message.path);
-        return;
-      }
-      if (
-        message.type === "design-code-workbench:content-change" &&
-        typeof message.content === "string"
-      ) {
-        setSelectedDraftContent(message.content);
-        return;
-      }
-      if (message.type === "design-code-workbench:revert") {
-        setSelectedDraftContent(savedContent);
-        return;
-      }
-      if (message.type === "design-code-workbench:save") {
-        if (!selectedPath || !dirty) return;
-        applySourceEditMutation.mutate(
-          {
-            designId,
-            path: selectedPath,
-            expectedVersionHash,
-            edit: { kind: "full-replace", content: draftContent },
-          } as any,
-          {
-            onSuccess: () => {
-              setDraftsByPath((current) => {
-                const next = { ...current };
-                delete next[selectedPath];
-                return next;
-              });
-              toast.success("Source file saved" /* i18n-ignore */);
-            },
-            onError: (error) => {
-              toast.error(
-                error instanceof Error
-                  ? error.message
-                  : "Could not save source file" /* i18n-ignore */,
-              );
-            },
-          },
-        );
+    if (!editorRef.current) return;
+    monaco.editor.setTheme(defineMonacoTheme(theme));
+  }, [theme]);
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor || !selectedPath) return;
+    const uri = editorUriForPath(designId, selectedPath);
+    const language = activeLanguage;
+    const currentModel = modelRef.current;
+    if (currentModel?.uri.toString() !== uri.toString()) {
+      currentModel?.dispose();
+      const nextModel = monaco.editor.createModel(draftContent, language, uri);
+      modelRef.current = nextModel;
+      editor.setModel(nextModel);
+    } else if (currentModel) {
+      monaco.editor.setModelLanguage(currentModel, language);
+      if (currentModel.getValue() !== draftContent) {
+        applyingModelContentRef.current = true;
+        currentModel.setValue(draftContent);
+        applyingModelContentRef.current = false;
       }
-    };
-    window.addEventListener("message", handleMessage);
-    return () => window.removeEventListener("message", handleMessage);
+    }
+    editor.updateOptions({
+      readOnly: !canEditSource,
+      readOnlyMessage: {
+        value: canEdit
+          ? "This source backend is read-only in the current workspace." /* i18n-ignore */
+          : "Ask an owner for edit access before changing this file." /* i18n-ignore */,
+      },
+    });
   }, [
-    applySourceEditMutation,
+    activeLanguage,
+    canEdit,
+    canEditSource,
     designId,
-    dirty,
     draftContent,
-    expectedVersionHash,
+    selectedPath,
+  ]);
+  useEffect(() => {
+    const editor = editorRef.current;
+    const model = modelRef.current;
+    if (!editor || !model || !selectedPath) return;
+    const key = [
+      selectedPath,
+      selectedNodeId ?? "",
+      selectedSelector ?? "",
+      readSource?.versionHash ?? "",
+    ].join(":");
+    if (lastSelectionKeyRef.current === key) return;
+    lastSelectionKeyRef.current = key;
+    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 = draftContent.indexOf(target);
+      if (index < 0) continue;
+      const start = model.getPositionAt(index);
+      const end = model.getPositionAt(index + target.length);
+      const range = new monaco.Range(
+        start.lineNumber,
+        start.column,
+        end.lineNumber,
+        end.column,
+      );
+      editor.setSelection(range);
+      editor.revealRangeInCenter(range, monaco.editor.ScrollType.Smooth);
+      return;
+    }
+  }, [
+    draftContent,
     readSource?.versionHash,
-    savedContent,
+    selectedNodeId,
     selectedPath,
-    setSelectedDraftContent,
+    selectedSelector,
   ]);
   return (
     <div
       ref={containerRef}
-      className="flex min-h-0 flex-1 flex-col bg-[var(--design-editor-panel-bg)]"
+      className="flex min-h-0 flex-1 flex-col bg-[var(--workbench-bg)] text-[var(--workbench-fg)]"
+      style={theme.values as CSSProperties}
     >
-      <div className="flex h-10 shrink-0 items-center gap-2 border-b border-border/60 px-3">
+      <div className="flex h-10 shrink-0 items-center gap-2 border-b border-[var(--workbench-border)] bg-[var(--workbench-surface-bg)] px-3">
         <IconCode className="size-4 text-[var(--design-editor-accent-color)]" />
         <div className="min-w-0 flex-1">
-          <h3 className="truncate text-xs font-semibold text-foreground">
+          <h3 className="truncate text-xs font-semibold text-[var(--workbench-fg)]">
             {"Code" /* i18n-ignore */}
           </h3>
-          <p className="truncate text-[10px] text-muted-foreground">
-            {backend?.workspaceUri ?? `designfs://${designId}/`}
+          <p className="truncate text-[10px] text-[var(--workbench-muted-fg)]">
+            {workspaceUri}
           </p>
         </div>
+        <Button
+          size="sm"
+          variant="ghost"
+          className="h-7 gap-1.5 px-2 text-[11px]"
+          disabled={!dirty || saving}
+          onClick={revertSelectedFile}
+        >
+          <IconRefresh className="size-3" />
+          {"Revert" /* i18n-ignore */}
+        </Button>
         <Button
           size="sm"
           variant="outline"
           className="h-7 gap-1.5 px-2 text-[11px]"
-          disabled={!dirty || !canEdit || applySourceEditMutation.isPending}
-          onClick={() => {
-            iframeRef.current?.contentWindow?.postMessage(
-              { type: "design-code-workbench:state", state: workbenchState },
-              "*",
-            );
-            applySourceEditMutation.mutate(
-              {
-                designId,
-                path: selectedPath,
-                expectedVersionHash,
-                edit: { kind: "full-replace", content: draftContent },
-              } as any,
-              {
-                onSuccess: () => {
-                  setDraftsByPath((current) => {
-                    const next = { ...current };
-                    delete next[selectedPath];
-                    return next;
-                  });
-                  toast.success("Source file saved" /* i18n-ignore */);
-                },
-                onError: (error) => {
-                  toast.error(
-                    error instanceof Error
-                      ? error.message
-                      : "Could not save source file" /* i18n-ignore */,
-                  );
-                },
-              },
-            );
-          }}
+          disabled={!dirty || !canEditSource || saving}
+          onClick={saveSelectedFile}
         >
-          {applySourceEditMutation.isPending ? (
+          {saving ? (
             <Spinner className="size-3" />
           ) : (
             <IconDeviceFloppy className="size-3" />
@@ -611,19 +656,119 @@ export function CodeWorkbenchHost({
       </div>
       <div
         className={cn(
-          "min-h-0 flex-1 bg-[var(--design-editor-panel-bg)]",
+          "grid min-h-0 flex-1 grid-cols-[210px_minmax(0,1fr)] bg-[var(--workbench-editor-bg)]",
           (sourceFilesQuery.isLoading || readSourceQuery.isLoading) &&
             "opacity-80",
         )}
       >
-        <iframe
-          ref={iframeRef}
-          title={"Design code workspace" /* i18n-ignore */}
-          className="h-full w-full border-0"
-          srcDoc={WORKBENCH_SRC_DOC}
-          sandbox="allow-scripts"
-          allow="clipboard-read; clipboard-write"
-        />
+        <aside className="flex min-h-0 flex-col border-r border-[var(--workbench-border)] bg-[var(--workbench-sidebar-bg)]">
+          <div className="flex h-9 shrink-0 items-center gap-2 border-b border-[var(--workbench-border)] px-3 text-[11px] font-semibold uppercase tracking-[0.11em] text-[var(--workbench-muted-fg)]">
+            <IconFolder className="size-3.5" />
+            {"Explorer" /* i18n-ignore */}
+          </div>
+          <div className="flex h-8 shrink-0 items-center gap-2 border-b border-[var(--workbench-border)] px-3 text-[11px] text-[var(--workbench-muted-fg)]">
+            <IconSearch className="size-3.5" />
+            <span className="truncate">
+              {"Use Cmd/Ctrl+F in editor" /* i18n-ignore */}
+            </span>
+          </div>
+          <div className="min-h-0 flex-1 overflow-auto py-1">
+            {sourceFiles.length > 0 ? (
+              sourceFiles.map((file: any) => {
+                const active = file.path === selectedPath;
+                const disabled = file.readonly && !canEdit;
+                return (
+                  <button
+                    key={file.path}
+                    type="button"
+                    title={file.path}
+                    aria-current={active ? "page" : undefined}
+                    className={cn(
+                      "flex h-7 w-full min-w-0 cursor-pointer items-center gap-2 px-2 text-left text-xs text-[var(--workbench-muted-fg)] outline-none hover:bg-[var(--workbench-hover-bg)] hover:text-[var(--workbench-fg)] focus-visible:ring-1 focus-visible:ring-[var(--workbench-accent)]",
+                      active &&
+                        "bg-[var(--workbench-active-bg)] text-[var(--workbench-active-fg)]",
+                      disabled && "opacity-60",
+                    )}
+                    onClick={() => {
+                      setActivePath(file.path);
+                      setPreviewSummary(null);
+                    }}
+                  >
+                    <span className="w-7 shrink-0 font-mono text-[10px] text-[var(--workbench-accent)]">
+                      {extensionBadgeForPath(file.path)}
+                    </span>
+                    <span className="min-w-0 flex-1 truncate">
+                      {file.displayName || file.path}
+                    </span>
+                    {draftsByPath[file.path] ? (
+                      <span className="size-1.5 shrink-0 rounded-full bg-[var(--workbench-dirty)]" />
+                    ) : null}
+                  </button>
+                );
+              })
+            ) : (
+              <p className="px-3 py-4 text-xs text-[var(--workbench-muted-fg)]">
+                {"No inline source files" /* i18n-ignore */}
+              </p>
+            )}
+          </div>
+          <div className="border-t border-[var(--workbench-border)] px-3 py-2 text-[11px] leading-4 text-[var(--workbench-muted-fg)]">
+            <div className="truncate">{backendKind}</div>
+            <div className="truncate">{workspaceUri}</div>
+          </div>
+        </aside>
+        <main className="flex min-h-0 min-w-0 flex-col bg-[var(--workbench-editor-bg)]">
+          <div className="flex h-9 shrink-0 items-center border-b border-[var(--workbench-border)] bg-[var(--workbench-surface-bg)]">
+            <div className="flex h-full max-w-[360px] items-center gap-2 border-r border-[var(--workbench-border)] px-3 text-xs text-[var(--workbench-fg)]">
+              <IconFileCode className="size-3.5 text-[var(--workbench-accent)]" />
+              <span className="min-w-0 truncate">
+                {activeDisplayName || "No file" /* i18n-ignore */}
+              </span>
+              {dirty ? (
+                <span className="size-1.5 shrink-0 rounded-full bg-[var(--workbench-dirty)]" />
+              ) : null}
+            </div>
+            <div className="ml-auto flex min-w-0 items-center gap-3 px-3 text-[11px] text-[var(--workbench-muted-fg)]">
+              <span className="truncate">
+                {dirty
+                  ? "Unsaved changes" /* i18n-ignore */
+                  : readSource?.versionHash
+                    ? `Saved ${readSource.versionHash}` /* i18n-ignore */
+                    : previewSummary || ""}
+              </span>
+            </div>
+          </div>
+          <div className="relative min-h-0 flex-1">
+            <div
+              ref={editorHostRef}
+              data-testid="design-code-monaco-editor"
+              className="absolute inset-0"
+            />
+            {!selectedPath && !sourceFilesQuery.isLoading ? (
+              <div className="absolute inset-0 grid place-items-center px-6 text-center text-sm text-[var(--workbench-muted-fg)]">
+                {"Choose a source file to start editing." /* i18n-ignore */}
+              </div>
+            ) : null}
+            {!editorReady ? (
+              <div className="absolute inset-0 grid place-items-center bg-[var(--workbench-editor-bg)] text-[var(--workbench-muted-fg)]">
+                <Spinner className="size-4" />
+              </div>
+            ) : null}
+          </div>
+          <div className="flex h-6 shrink-0 items-center gap-4 border-t border-[var(--workbench-border)] bg-[var(--workbench-surface-bg)] px-3 text-[11px] text-[var(--workbench-muted-fg)]">
+            <span>{activeLanguage}</span>
+            <span>{cursorLabel}</span>
+            <span className="ml-auto truncate">
+              {
+                previewSummary ??
+                  (canEditSource
+                    ? "Preview on save, apply with version check" /* i18n-ignore */
+                    : "Read-only source") /* i18n-ignore */
+              }
+            </span>
+          </div>
+        </main>
       </div>
     </div>
   );