@agent-native/core 0.85.7 → 0.86.1

package/corpus/templates/design/app/components/design/TweaksPanel.tsx

@@ -1,4 +1,4 @@
-import { useT } from "@agent-native/core/client";
+import { useT, VisualTweakControl } from "@agent-native/core/client";
 import type { TweakDefinition } from "@shared/api";
 import {
   IconX,
@@ -9,8 +9,6 @@ import {
 import { useState, useRef, useCallback } from "react";
 
 import { Button } from "@/components/ui/button";
-import { Slider } from "@/components/ui/slider";
-import { Switch } from "@/components/ui/switch";
 import {
   Tooltip,
   TooltipContent,
@@ -221,101 +219,12 @@ function TweakControl({
   value: string | number | boolean;
   onChange: (v: string | number | boolean) => void;
 }) {
-  // Toggle gets an inline row; other types get a label above
-  if (tweak.type === "toggle") {
-    return (
-      <div className="flex h-6 items-center justify-between gap-1.5">
-        <span className="!text-[11px] text-muted-foreground">
-          {tweak.label}
-        </span>
-        <Switch
-          checked={!!value}
-          onCheckedChange={(checked) => onChange(checked)}
-          className="scale-[0.7] origin-right"
-        />
-      </div>
-    );
-  }
-
   return (
-    <div className="space-y-1">
-      <span className="!text-[11px] text-muted-foreground">{tweak.label}</span>
-
-      {((tweak.type as string) === "color-swatch" ||
-        (tweak.type as string) === "color-swatches") && (
-        <div className="flex gap-1.5">
-          {tweak.options?.map((opt) => (
-            <Tooltip key={opt.value}>
-              <TooltipTrigger asChild>
-                <button
-                  type="button"
-                  onClick={() => onChange(opt.value)}
-                  className={cn(
-                    "size-4 cursor-pointer rounded-sm transition-all",
-                    value === opt.value
-                      ? "ring-2 ring-foreground/80 ring-offset-1 ring-offset-card"
-                      : "ring-1 ring-border/60 hover:ring-border",
-                  )}
-                  style={{ backgroundColor: opt.color ?? opt.value }}
-                />
-              </TooltipTrigger>
-              <TooltipContent>{opt.label}</TooltipContent>
-            </Tooltip>
-          ))}
-        </div>
-      )}
-
-      {tweak.type === "segment" && (
-        <div className="flex h-6 overflow-hidden rounded border border-border">
-          {tweak.options?.map((opt) => (
-            <button
-              type="button"
-              key={opt.value}
-              onClick={() => onChange(opt.value)}
-              className={cn(
-                "flex flex-1 cursor-pointer items-center justify-center px-2 !text-[11px] font-medium transition-colors",
-                value === opt.value
-                  ? "bg-accent text-foreground"
-                  : "text-muted-foreground/70 hover:bg-accent/50 hover:text-foreground",
-              )}
-            >
-              {opt.label}
-            </button>
-          ))}
-        </div>
-      )}
-
-      {tweak.type === "slider" && (
-        <div className="flex h-6 items-center gap-1.5">
-          {(() => {
-            const sliderMin = tweak.min ?? 0;
-            const sliderMax = tweak.max ?? 100;
-            const rawNum = typeof value === "number" ? value : Number(value);
-            const sliderValue = Number.isFinite(rawNum)
-              ? Math.min(sliderMax, Math.max(sliderMin, rawNum))
-              : sliderMin;
-            return (
-              <>
-                <Slider
-                  min={sliderMin}
-                  max={sliderMax}
-                  step={tweak.step ?? 1}
-                  value={[sliderValue]}
-                  onValueChange={([v]) => onChange(v)}
-                  className="flex-1"
-                />
-                <span className="min-w-[2ch] text-right !text-[11px] tabular-nums text-muted-foreground">
-                  {sliderValue}
-                  {tweak.unit ??
-                    (tweak.cssVar?.toLowerCase().includes("radius")
-                      ? "px"
-                      : "")}
-                </span>
-              </>
-            );
-          })()}
-        </div>
-      )}
-    </div>
+    <VisualTweakControl
+      tweak={tweak}
+      value={value}
+      onChange={onChange}
+      className="min-w-0"
+    />
   );
 }

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

@@ -0,0 +1,85 @@
+import { IconFiles, IconSearch } from "@tabler/icons-react";
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+import { formatKeybinding } from "./commands";
+import { useWorkbench, type SideView } from "./store";
+
+interface ActivityBarItem {
+  view: SideView;
+  icon: typeof IconFiles;
+  label: string;
+  keybinding: string;
+}
+
+const ITEMS: ActivityBarItem[] = [
+  {
+    view: "explorer",
+    icon: IconFiles,
+    label: "Explorer" /* i18n-ignore */,
+    keybinding: "$mod+shift+e",
+  },
+  {
+    view: "search",
+    icon: IconSearch,
+    label: "Search" /* i18n-ignore */,
+    keybinding: "$mod+shift+f",
+  },
+];
+
+/**
+ * 40px vertical activity rail. Clicking the active view's icon toggles the
+ * sidebar closed (VS Code behavior); clicking an inactive view switches to
+ * it and ensures the sidebar is visible.
+ */
+export function ActivityBar() {
+  const { state, api } = useWorkbench();
+
+  return (
+    <div
+      data-testid="workbench-activity-bar"
+      className="flex w-10 shrink-0 flex-col items-center gap-1 border-r border-[var(--workbench-border)] bg-[var(--workbench-activitybar-bg,var(--workbench-surface-bg))] py-1.5"
+    >
+      {ITEMS.map((item) => {
+        const isActive = state.sideView === item.view && state.sidebarVisible;
+        const Icon = item.icon;
+        return (
+          <Tooltip key={item.view}>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                aria-label={item.label}
+                aria-pressed={isActive}
+                className={cn(
+                  "relative flex h-9 w-9 cursor-pointer items-center justify-center rounded-[5px] text-[var(--workbench-muted-fg)] outline-none transition-colors",
+                  "hover:text-[var(--workbench-fg)] focus-visible:ring-1 focus-visible:ring-[var(--workbench-accent)]",
+                  isActive && "text-[var(--workbench-accent)]",
+                )}
+                onClick={() => {
+                  if (state.sideView === item.view && state.sidebarVisible) {
+                    api.toggleSidebar();
+                    return;
+                  }
+                  api.setSideView(item.view);
+                }}
+              >
+                {isActive ? (
+                  <span className="absolute left-0 top-1/2 h-5 w-[2px] -translate-y-1/2 rounded-full bg-[var(--workbench-accent)]" />
+                ) : null}
+                <Icon className="size-[18px]" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="right">
+              {item.label} {formatKeybinding(item.keybinding)}
+            </TooltipContent>
+          </Tooltip>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,466 @@
+import {
+  readClientAppState,
+  setClientAppState,
+} from "@agent-native/core/client";
+import type * as monaco from "monaco-editor";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+} from "react";
+import { toast } from "sonner";
+
+import { cn } from "@/lib/utils";
+
+import {
+  readCodeWorkbenchTheme,
+  type CodeWorkbenchTheme,
+} from "../code-workbench-theme";
+import {
+  createCoreCommands,
+  dispatchKeybinding,
+  formatKeybinding,
+  type WorkbenchCommand,
+  type WorkbenchCommandContext,
+  type WorkbenchUiHandles,
+} from "./commands";
+import { Breadcrumbs } from "./editor/Breadcrumbs";
+import { BufferSyncGroup } from "./editor/BufferSync";
+import { EditorTabs } from "./editor/EditorTabs";
+import { ensureMonacoEnvironment } from "./editor/monaco-setup";
+import { MonacoHost } from "./editor/MonacoHost";
+import { StatusBar } from "./editor/StatusBar";
+import { useFormatOnFirstOpen } from "./format/format-on-open";
+import { registerPrettierFormatting } from "./format/prettier-format";
+import { modelRegistry } from "./model-registry";
+import { QuickInput, type QuickInputHandle } from "./quickinput/QuickInput";
+import { SideBar } from "./SideBar";
+import { useWorkbench, WorkbenchProvider } from "./store";
+import { createWorkspaceProviders } from "./workspace/create-providers";
+import {
+  parseWorkbenchUri,
+  providerKindFromKey,
+  workbenchUri,
+} from "./workspace/types";
+
+export interface CodeWorkbenchLocalhostConnection {
+  connectionId: string;
+  label: string;
+}
+
+export interface CodeWorkbenchActiveFile {
+  path: string;
+  fileId?: string;
+  dirty: boolean;
+  versionHash?: string;
+  backendKind: "virtual-inline" | "localhost-bridge";
+}
+
+export interface CodeWorkbenchProps {
+  designId: string;
+  canEdit: boolean;
+  activeFileId?: string | null;
+  activeFilename?: string | null;
+  selectedNodeId?: string | null;
+  selectedSelector?: string | null;
+  localhostConnections?: CodeWorkbenchLocalhostConnection[];
+  onActiveFileChange?: (file: CodeWorkbenchActiveFile | null) => void;
+  onRequestLocalWriteConsent?: (
+    connectionId: string,
+    retry: () => void,
+    filePath?: string,
+  ) => void;
+  extraCommands?: WorkbenchCommand[];
+}
+
+export function CodeWorkbench(props: CodeWorkbenchProps) {
+  const providers = useMemo(
+    () =>
+      createWorkspaceProviders({
+        designId: props.designId,
+        canEdit: props.canEdit,
+        localhostConnections: props.localhostConnections ?? [],
+      }),
+    [props.designId, props.canEdit, props.localhostConnections],
+  );
+  return (
+    <WorkbenchProvider key={props.designId} providers={providers}>
+      <CodeWorkbenchInner {...props} />
+    </WorkbenchProvider>
+  );
+}
+
+function CodeWorkbenchInner({
+  designId,
+  canEdit,
+  activeFileId,
+  activeFilename,
+  selectedNodeId,
+  selectedSelector,
+  onActiveFileChange,
+  onRequestLocalWriteConsent,
+  extraCommands,
+}: CodeWorkbenchProps) {
+  const { state, api } = useWorkbench();
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
+  const quickInputRef = useRef<QuickInputHandle | null>(null);
+  const lastExternalTargetKeyRef = useRef<string | null>(null);
+  const [searchSeed, setSearchSeed] = useState<{
+    value?: string;
+    token: number;
+  }>({ token: 0 });
+  const [explorerFocusToken, setExplorerFocusToken] = useState(0);
+  const [theme, setTheme] = useState<CodeWorkbenchTheme>(() => ({
+    colorScheme: "light",
+    values: {},
+  }));
+
+  useState(() => {
+    ensureMonacoEnvironment();
+    registerPrettierFormatting();
+    return null;
+  });
+
+  // Stable automation/E2E handle (used by Playwright specs and QA tooling —
+  // Monaco's EditContext-based input cannot be driven via synthetic DOM
+  // events alone).
+  useEffect(() => {
+    const target = window as typeof window & {
+      __designCodeWorkbench?: unknown;
+    };
+    target.__designCodeWorkbench = { api, modelRegistry };
+    return () => {
+      delete target.__designCodeWorkbench;
+    };
+  }, [api]);
+
+  useFormatOnFirstOpen({ enabled: canEdit });
+
+  useEffect(() => {
+    const updateTheme = () => {
+      const nextTheme = readCodeWorkbenchTheme(rootRef.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);
+    };
+  }, []);
+
+  const ui = useMemo<WorkbenchUiHandles>(
+    () => ({
+      openQuickInput: (prefill) => quickInputRef.current?.open(prefill),
+      focusExplorer: () => {
+        api.setSideView("explorer");
+        setExplorerFocusToken((token) => token + 1);
+      },
+      openSearch: (seed) => {
+        api.setSideView("search");
+        setSearchSeed((current) => ({ value: seed, token: current.token + 1 }));
+      },
+      getEditor: () => editorRef.current,
+      reportError: (message) => toast.error(message),
+      requestLocalWriteConsent: onRequestLocalWriteConsent
+        ? (connectionId, retry, filePath) =>
+            onRequestLocalWriteConsent(connectionId, retry, filePath)
+        : undefined,
+    }),
+    [api, onRequestLocalWriteConsent],
+  );
+
+  const commands = useMemo(
+    () => [...createCoreCommands(), ...(extraCommands ?? [])],
+    [extraCommands],
+  );
+  const commandContext = useMemo<WorkbenchCommandContext>(
+    () => ({ api, ui }),
+    [api, ui],
+  );
+
+  const handleKeyDownCapture = useCallback(
+    (event: React.KeyboardEvent) => {
+      dispatchKeybinding(event.nativeEvent, commands, commandContext);
+    },
+    [commands, commandContext],
+  );
+
+  // Restore and persist the workbench session (open tabs, active file,
+  // sidebar layout) per design via application state, so the agent can also
+  // observe it and reopening the design restores the editor session.
+  const persistenceKey = `code-workbench:${designId}`;
+  const restoredRef = useRef(false);
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const persisted =
+          await readClientAppState<PersistedWorkbenchSession>(persistenceKey);
+        if (cancelled || !persisted || typeof persisted !== "object") return;
+        const providerKeys = new Set(
+          api.listProviders().map((provider) => provider.key),
+        );
+        const tabs = Array.isArray(persisted.tabs) ? persisted.tabs : [];
+        for (const tab of tabs) {
+          if (!tab?.providerKey || !tab.path) continue;
+          if (!providerKeys.has(tab.providerKey)) continue;
+          void api.openFile(tab.providerKey, tab.path, {
+            preview: tab.preview === true,
+            activate: false,
+          });
+        }
+        if (persisted.activeUri) {
+          const { providerKey, path } = parseWorkbenchUri(persisted.activeUri);
+          if (
+            providerKeys.has(providerKey) &&
+            tabs.some(
+              (tab) => tab.providerKey === providerKey && tab.path === path,
+            )
+          ) {
+            void api.openFile(providerKey, path, {
+              preview: false,
+              activate: true,
+            });
+          }
+        }
+        if (persisted.sideView === "search") api.setSideView("search");
+        if (typeof persisted.sidebarWidth === "number") {
+          api.setSidebarWidth(persisted.sidebarWidth);
+        }
+        if (persisted.sidebarVisible === false) api.toggleSidebar();
+      } catch {
+        // Session restore is best-effort.
+      } finally {
+        if (!cancelled) restoredRef.current = true;
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [api, persistenceKey]);
+
+  useEffect(() => {
+    if (!restoredRef.current) return;
+    const timer = window.setTimeout(() => {
+      const session: PersistedWorkbenchSession = {
+        tabs: state.tabs.map((tab) => ({
+          providerKey: tab.providerKey,
+          path: tab.path,
+          preview: tab.preview,
+        })),
+        activeUri: state.activeUri,
+        sideView: state.sideView,
+        sidebarWidth: state.sidebarWidth,
+        sidebarVisible: state.sidebarVisible,
+      };
+      setClientAppState(persistenceKey, session).catch(() => {});
+    }, 500);
+    return () => window.clearTimeout(timer);
+  }, [
+    persistenceKey,
+    state.tabs,
+    state.activeUri,
+    state.sideView,
+    state.sidebarWidth,
+    state.sidebarVisible,
+  ]);
+
+  // Agent/URL-driven file targeting (navigate --leftPanel code --fileId …).
+  const inlineProviderKey = `inline:${designId}`;
+  useEffect(() => {
+    if (!activeFileId && !activeFilename) {
+      lastExternalTargetKeyRef.current = null;
+      return;
+    }
+    const targetKey = [activeFileId ?? "", activeFilename ?? ""].join(":");
+    if (lastExternalTargetKeyRef.current === targetKey) return;
+    lastExternalTargetKeyRef.current = targetKey;
+    void (async () => {
+      const provider = api.getProvider(inlineProviderKey);
+      if (!provider) return;
+      try {
+        const files = await provider.listFiles();
+        const match = files.find(
+          (file) =>
+            (activeFileId && file.fileId === activeFileId) ||
+            (activeFilename && file.path === activeFilename),
+        );
+        if (match) {
+          await api.openFile(inlineProviderKey, match.path, { preview: false });
+        }
+      } catch {
+        // File targeting is best-effort; the explorer still works.
+      }
+    })();
+  }, [activeFileId, activeFilename, api, inlineProviderKey]);
+
+  // Report the active file to the design editor shell / agent context.
+  const activeBuffer = state.activeUri ? state.buffers[state.activeUri] : null;
+  useEffect(() => {
+    if (!state.activeUri || !activeBuffer) {
+      onActiveFileChange?.(null);
+      return;
+    }
+    const { providerKey, path } = parseWorkbenchUri(state.activeUri);
+    onActiveFileChange?.({
+      path,
+      fileId: activeBuffer.fileId,
+      dirty: activeBuffer.dirty,
+      versionHash: activeBuffer.savedVersionHash,
+      backendKind:
+        providerKindFromKey(providerKey) === "inline"
+          ? "virtual-inline"
+          : "localhost-bridge",
+    });
+  }, [
+    state.activeUri,
+    activeBuffer?.fileId,
+    activeBuffer?.dirty,
+    activeBuffer?.savedVersionHash,
+    onActiveFileChange,
+  ]);
+
+  // Sidebar resize.
+  const handleSidebarResizeStart = useCallback(
+    (event: React.PointerEvent) => {
+      event.preventDefault();
+      const startX = event.clientX;
+      const startWidth = api.getState().sidebarWidth;
+      const target = event.currentTarget as HTMLElement;
+      target.setPointerCapture(event.pointerId);
+      const onMove = (moveEvent: PointerEvent) => {
+        api.setSidebarWidth(startWidth + (moveEvent.clientX - startX));
+      };
+      const onUp = () => {
+        target.removeEventListener("pointermove", onMove);
+        target.removeEventListener("pointerup", onUp);
+      };
+      target.addEventListener("pointermove", onMove);
+      target.addEventListener("pointerup", onUp);
+    },
+    [api],
+  );
+
+  const activeTabUri = state.activeUri;
+  const activePath = activeTabUri ? parseWorkbenchUri(activeTabUri).path : null;
+
+  return (
+    <div
+      ref={rootRef}
+      data-hotkeys-scope="text"
+      data-testid="design-code-workbench"
+      tabIndex={-1}
+      onKeyDownCapture={handleKeyDownCapture}
+      className="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-[var(--workbench-bg)] text-[var(--workbench-fg)] outline-none"
+      style={theme.values as CSSProperties}
+    >
+      <div className="flex min-h-0 flex-1">
+        {state.sidebarVisible ? (
+          <>
+            <div
+              style={{ width: state.sidebarWidth }}
+              className="flex min-h-0 shrink-0 flex-col border-r border-[var(--workbench-border)] bg-[var(--workbench-sidebar-bg)]"
+            >
+              <SideBar
+                designId={designId}
+                searchSeed={searchSeed}
+                explorerFocusToken={explorerFocusToken}
+                onRequestLocalWriteConsent={onRequestLocalWriteConsent}
+              />
+            </div>
+            <div
+              role="separator"
+              aria-orientation="vertical"
+              onPointerDown={handleSidebarResizeStart}
+              className="-ml-[3px] w-[5px] shrink-0 cursor-col-resize bg-transparent transition-colors hover:bg-[var(--workbench-accent)]/40"
+            />
+          </>
+        ) : null}
+        <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-[var(--workbench-editor-bg)]">
+          <EditorTabs />
+          {activeTabUri && activePath && activePath.includes("/") ? (
+            <Breadcrumbs />
+          ) : null}
+          <div className="relative min-h-0 flex-1">
+            <MonacoHost
+              editorRef={editorRef}
+              selectedNodeId={selectedNodeId}
+              selectedSelector={selectedSelector}
+              commands={commands}
+              commandContext={commandContext}
+            />
+            {!activeTabUri ? <WorkbenchEmptyState /> : null}
+          </div>
+        </div>
+      </div>
+      <StatusBar
+        editorRef={editorRef}
+        onGoToLine={() => ui.openQuickInput(":")}
+      />
+      <QuickInput
+        ref={quickInputRef}
+        commands={commands}
+        context={commandContext}
+      />
+      <BufferSyncGroup designId={designId} />
+    </div>
+  );
+}
+
+interface PersistedWorkbenchSession {
+  tabs: Array<{ providerKey: string; path: string; preview?: boolean }>;
+  activeUri: string | null;
+  sideView?: "explorer" | "search";
+  sidebarWidth?: number;
+  sidebarVisible?: boolean;
+}
+
+const EMPTY_STATE_ROWS: Array<{ label: string; binding: string }> = [
+  { label: "Go to File" /* i18n-ignore */, binding: "$mod+p" },
+  { label: "Command Palette" /* i18n-ignore */, binding: "$mod+shift+p" },
+  { label: "Find in Files" /* i18n-ignore */, binding: "$mod+shift+f" },
+  { label: "Toggle Sidebar" /* i18n-ignore */, binding: "$mod+b" },
+];
+
+function WorkbenchEmptyState() {
+  return (
+    <div className="absolute inset-0 grid place-items-center bg-[var(--workbench-editor-bg)]">
+      <div className="flex flex-col gap-2.5">
+        {EMPTY_STATE_ROWS.map((row) => (
+          <div
+            key={row.label}
+            className="flex items-center justify-between gap-8 text-[12px] text-[var(--workbench-muted-fg)]"
+          >
+            <span>{row.label}</span>
+            <kbd
+              className={cn(
+                "rounded-[4px] border border-[var(--workbench-border)] bg-[var(--workbench-surface-bg)]",
+                "px-1.5 py-0.5 font-sans text-[11px] text-[var(--workbench-muted-fg)]",
+              )}
+            >
+              {formatKeybinding(row.binding)}
+            </kbd>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export { workbenchUri };