@opengeni/react 0.37.0 → 0.40.0

package/dist/index.js

@@ -25,7 +25,7 @@ import {
   healthPulses,
   pointsFor,
   useMachines
-} from "./chunk-ALA3UGWB.js";
+} from "./chunk-SXIQK54Z.js";
 import {
   SESSION_EVENT_BROWSER_MAX_BYTES,
   SESSION_EVENT_BROWSER_MAX_COUNT,
@@ -52,7 +52,7 @@ import {
   useSessionLineage,
   useSessionMcpApprovalPolicy,
   useTurnQueue
-} from "./chunk-FSPDND3P.js";
+} from "./chunk-JALF5FI3.js";
 import {
   ActivityDisclosure,
   ActivityRail,
@@ -62,6 +62,7 @@ import {
   CopyHoverFrame,
   DisclosureDefaultsProvider,
   HumanInputForm,
+  HumanInputSurface,
   LightboxProvider,
   Markdown,
   MediaEmpty,
@@ -106,7 +107,8 @@ import {
   useLightboxOptional,
   useThemeType,
   v4aToGitFileDiff
-} from "./chunk-UCZPNXV3.js";
+} from "./chunk-KR2SK5GJ.js";
+import "./chunk-YDNWMKXO.js";
 import {
   buildTimeline,
   creditExhaustedFromEvents,
@@ -119,7 +121,6 @@ import {
   Actions,
   AttachButton,
   Attachments,
-  BillingClassMark,
   CommandPalette,
   CommandPalette2,
   ComposerTranscriptionControl,
@@ -133,14 +134,9 @@ import {
   Input,
   ModelPicker,
   ModelPicker2,
-  ModelPolicyPicker,
-  ModelPolicyPickerMenu,
   OPEN_WORKSTREAM_CONTROL_EVENT,
   PauseButton,
   PausedState,
-  PickerAnimatedPage,
-  PickerBackHeader,
-  PickerNavRow,
   RestoredResources,
   Root,
   SendButton,
@@ -150,7 +146,6 @@ import {
   argHint,
   defaultChatComposerMessages,
   defaultCommands,
-  defaultModelPolicyPickerMessages,
   filterCommands,
   firstMissingRequiredArg,
   hasPermission,
@@ -161,21 +156,32 @@ import {
   useSlashCommands,
   useTranscription,
   useVoiceInput
-} from "./chunk-IP22SLO6.js";
+} from "./chunk-OMCFRWHL.js";
 import {
   FILE_ONLY_MESSAGE_TEXT,
   composeSendInput,
   shouldSteerOnKey,
   shouldSubmitOnKey,
   useComposer
-} from "./chunk-HJ4OQVGW.js";
+} from "./chunk-Q2NCKWTK.js";
 import {
   useMutationRunner,
-  useOpenGeni,
-  useOpenGeniClient,
   usePolledValue,
   useSessionEventTrigger
-} from "./chunk-7CJOAW3V.js";
+} from "./chunk-EB67J347.js";
+import {
+  BillingClassMark,
+  ModelPolicyPicker,
+  ModelPolicyPickerMenu,
+  PickerAnimatedPage,
+  PickerBackHeader,
+  PickerNavRow,
+  defaultModelPolicyPickerMessages
+} from "./chunk-WZT5G5OR.js";
+import {
+  useOpenGeni,
+  useOpenGeniClient
+} from "./chunk-EKZH6IDG.js";
 import {
   advancedSourceSummary,
   availabilityReasonLabel,
@@ -201,9 +207,6 @@ import {
   TooltipTrigger,
   usePortalTokenStyle
 } from "./chunk-ATSTR5P3.js";
-import {
-  cn
-} from "./chunk-TK7G6XLT.js";
 import {
   COMPOSER_PAYMENT_REQUIRED_MESSAGE,
   CREDIT_EXHAUSTION_MESSAGE,
@@ -217,7 +220,9 @@ import {
   truncate,
   tryParseJson
 } from "./chunk-LAKLF4PA.js";
-import "./chunk-YDNWMKXO.js";
+import {
+  cn
+} from "./chunk-TK7G6XLT.js";
 
 // src/hooks/use-last-started-turn-policy.ts
 import { useCallback, useEffect } from "react";
@@ -3333,8 +3338,10 @@ function ChatComposer({
   disabled,
   autoFocus,
   hint,
+  controlsLeading,
   controlsStart,
   actionsStart,
+  attachButtonClassName,
   transcription,
   header,
   onPaste,
@@ -3364,7 +3371,9 @@ function ChatComposer({
     onPaste,
     messages
   });
-  const hasControls = Boolean(attachments || models || controlsStart || transcription);
+  const hasControls = Boolean(
+    attachments || models || controlsLeading || controlsStart || transcription
+  );
   const stackActions = hasControls && Boolean(actionsStart);
   return /* @__PURE__ */ jsxs2(Root, { controller, className, children: [
     /* @__PURE__ */ jsxs2(Frame, { children: [
@@ -3377,7 +3386,8 @@ function ChatComposer({
         /* @__PURE__ */ jsx2(Input, { placeholder, autoFocus }),
         controller.confirmState ? /* @__PURE__ */ jsx2(Confirmation, {}) : /* @__PURE__ */ jsxs2(Footer, { className: stackActions ? "flex-wrap" : void 0, children: [
           hasControls ? /* @__PURE__ */ jsxs2(Controls, { className: stackActions ? "w-full sm:w-auto" : void 0, children: [
-            /* @__PURE__ */ jsx2(AttachButton, {}),
+            controlsLeading,
+            /* @__PURE__ */ jsx2(AttachButton, { className: attachButtonClassName }),
             transcription ? /* @__PURE__ */ jsx2(ComposerTranscriptionControl, { ...transcription }) : null,
             models ? /* @__PURE__ */ jsx2(ModelPicker2, { models, value: selectedModel, onChange: onSelectModel }) : null,
             controlsStart
@@ -5112,2414 +5122,2412 @@ function ContextMenu({
   );
 }
 
-// src/components/diff-view.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-function DiffView({
-  diff,
-  fallback,
-  layout = "unified",
-  themeType,
-  isRepo = true,
-  emptyState,
-  className
-}) {
-  if (diff.length === 0) {
-    return /* @__PURE__ */ jsx6("div", { className: cn("p-3 text-og-sm text-og-fg-subtle", className), children: emptyState ?? (isRepo ? "No changes" : "No repository mounted") });
-  }
-  return /* @__PURE__ */ jsx6(
-    PierreDiff,
-    {
-      diff,
-      layout,
-      themeType,
-      ...fallback !== void 0 ? { fallback } : {},
-      className
-    }
-  );
-}
-
-// src/components/pierre-file.tsx
+// src/components/workbench-changes.tsx
+import { ArrowUpRightIcon, FileWarningIcon, HistoryIcon } from "lucide-react";
 import {
-  lazy,
-  Suspense,
-  useEffect as useEffect16,
-  useState as useState13
+  useCallback as useCallback18,
+  useEffect as useEffect17,
+  useId as useId3,
+  useLayoutEffect as useLayoutEffect2,
+  useMemo as useMemo9,
+  useRef as useRef15,
+  useState as useState14
 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var LazyFile = lazy(async () => {
-  const mod = await import("@pierre/diffs/react");
-  return { default: mod.File };
-});
-function PierreFile({
-  path,
-  contents,
-  themeType,
-  theme,
-  disableWorkerPool,
-  loading,
-  fallback,
-  className
-}) {
-  const [failed, setFailed] = useState13(false);
+import { VList as VList2 } from "virtua";
+
+// src/hooks/use-windowed-sections.ts
+import { useCallback as useCallback17, useEffect as useEffect16, useMemo as useMemo8, useRef as useRef14, useState as useState13 } from "react";
+function computeWindowRange(heights, scrollTop, viewport, overscan) {
+  const n = heights.length;
+  if (n === 0) return { start: 0, end: 0 };
+  const top = Math.max(scrollTop, 0);
+  const bottom = top + Math.max(viewport, 0);
+  let firstVisible = -1;
+  let lastVisible = -1;
+  let acc = 0;
+  let anchor = 0;
+  for (let i = 0; i < n; i++) {
+    const secTop = acc;
+    const secBottom = secTop + Math.max(heights[i] ?? 0, 0);
+    if (secTop <= top) anchor = i;
+    if (secBottom > top && secTop < bottom) {
+      if (firstVisible === -1) firstVisible = i;
+      lastVisible = i;
+    }
+    acc = secBottom;
+  }
+  if (firstVisible === -1) {
+    firstVisible = anchor;
+    lastVisible = anchor;
+  }
+  return {
+    start: Math.max(0, firstVisible - overscan),
+    end: Math.min(n, lastVisible + 1 + overscan)
+  };
+}
+function useWindowedSections(opts) {
+  const { count, estimateHeight, overscan = 3 } = opts;
+  const scrollRef = useRef14(null);
+  const [heights, setHeights] = useState13(
+    () => Array.from({ length: count }, (_, i) => estimateHeight(i))
+  );
   useEffect16(() => {
-    let cancelled = false;
-    void import("@pierre/diffs/react").catch(() => {
-      if (!cancelled) setFailed(true);
+    setHeights((prev) => {
+      if (prev.length === count) return prev;
+      return Array.from({ length: count }, (_, i) => prev[i] ?? estimateHeight(i));
     });
+  }, [count]);
+  const heightsRef = useRef14(heights);
+  heightsRef.current = heights;
+  const [range, setRange] = useState13(() => ({
+    start: 0,
+    end: Math.min(count, overscan + 1)
+  }));
+  const recompute = useCallback17(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const next = computeWindowRange(heightsRef.current, el.scrollTop, el.clientHeight, overscan);
+    setRange((prev) => prev.start === next.start && prev.end === next.end ? prev : next);
+  }, [overscan]);
+  useEffect16(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    let raf = 0;
+    const onScroll = () => {
+      if (raf) return;
+      raf = typeof requestAnimationFrame === "function" ? requestAnimationFrame(() => {
+        raf = 0;
+        recompute();
+      }) : (recompute(), 0);
+    };
+    el.addEventListener("scroll", onScroll, { passive: true });
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => recompute()) : null;
+    ro?.observe(el);
+    recompute();
     return () => {
-      cancelled = true;
+      el.removeEventListener("scroll", onScroll);
+      ro?.disconnect();
+      if (raf && typeof cancelAnimationFrame === "function") cancelAnimationFrame(raf);
     };
+  }, [recompute, count]);
+  const measure = useCallback17((index, height) => {
+    if (height <= 0) return;
+    setHeights((prev) => {
+      if (Math.abs((prev[index] ?? 0) - height) < 1) return prev;
+      const next = prev.slice();
+      next[index] = height;
+      return next;
+    });
   }, []);
-  const name = path.split("/").filter(Boolean).pop() ?? path;
-  if (failed) {
-    return /* @__PURE__ */ jsx7("div", { className, children: fallback ?? /* @__PURE__ */ jsx7(PlainFile, { name, contents }) });
-  }
-  const options = {
-    overflow: "scroll",
-    stickyHeader: true,
-    showLineNumbers: true,
-    ...theme ? { theme } : {
-      theme: {
-        dark: "github-dark-high-contrast",
-        light: "github-light-high-contrast"
-      }
+  const offsets = useMemo8(() => {
+    const out = new Array(count + 1);
+    out[0] = 0;
+    for (let i = 0; i < count; i++) out[i + 1] = (out[i] ?? 0) + Math.max(heights[i] ?? 0, 0);
+    return out;
+  }, [heights, count]);
+  useEffect16(() => {
+    recompute();
+  }, [offsets, recompute]);
+  const scrollToIndex = useCallback17(
+    (index) => {
+      const el = scrollRef.current;
+      if (!el) return;
+      const clamped = Math.max(0, Math.min(count - 1, index));
+      el.scrollTop = offsets[clamped] ?? 0;
     },
-    themeType: themeType ?? "dark"
-  };
-  const pierreVars = {
-    "--diffs-dark-bg": "var(--og-color-bg)",
-    "--diffs-light-bg": "var(--og-color-bg)",
-    "--diffs-bg-buffer-override": "var(--og-color-surface-1)",
-    "--diffs-bg-separator-override": "var(--og-color-surface-1)",
-    "--diffs-font-size": "var(--og-code-font-size)",
-    "--diffs-line-height": "var(--og-code-line-height)"
-  };
-  return /* @__PURE__ */ jsx7("div", { className: cn("min-w-0", className), "data-opengeni-pierre-file": true, style: pierreVars, children: /* @__PURE__ */ jsx7(Suspense, { fallback: loading ?? /* @__PURE__ */ jsx7(FileSkeleton, {}), children: /* @__PURE__ */ jsx7(
-    LazyFile,
-    {
-      file: { name, contents },
-      options,
-      ...disableWorkerPool !== void 0 ? { disableWorkerPool } : {}
-    }
-  ) }) });
-}
-function PlainFile({ name, contents }) {
-  return /* @__PURE__ */ jsx7(
-    "pre",
-    {
-      className: "overflow-auto whitespace-pre p-2 font-og-mono text-og-sm text-og-fg",
-      "data-file": name,
-      children: contents
-    }
+    [offsets, count]
   );
-}
-function FileSkeleton() {
-  return /* @__PURE__ */ jsx7("div", { className: "p-3 text-og-sm text-og-fg-subtle", children: "Loading file\u2026" });
+  return {
+    scrollRef,
+    range,
+    offsets,
+    totalHeight: offsets[count] ?? 0,
+    measure,
+    scrollToIndex
+  };
 }
 
-// src/components/code-editor.tsx
-import { Loader2Icon, SaveIcon } from "lucide-react";
-import {
-  useCallback as useCallback17,
-  useEffect as useEffect17,
-  useMemo as useMemo8,
-  useRef as useRef14,
-  useState as useState14
-} from "react";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-var LANGUAGE_LOADERS = {
-  javascript: async () => (await import("@codemirror/lang-javascript")).javascript({ jsx: true, typescript: true }),
-  json: async () => (await import("@codemirror/lang-json")).json(),
-  python: async () => (await import("@codemirror/lang-python")).python(),
-  markdown: async () => (await import("@codemirror/lang-markdown")).markdown(),
-  css: async () => (await import("@codemirror/lang-css")).css(),
-  html: async () => (await import("@codemirror/lang-html")).html()
+// src/components/workbench-changes.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var GROUP_THRESHOLD = 20;
+var OVERSCAN = 2;
+var HEADER_PX = 30;
+var LINE_PX = 18;
+var GUARD_BODY_PX = 52;
+var COMPACT_SURFACE_PX = 560;
+var useChangesLayoutEffect = typeof window === "undefined" ? useEffect17 : useLayoutEffect2;
+var STATUS_TINT2 = {
+  added: "text-og-status-idle",
+  modified: "text-og-status-running",
+  deleted: "text-og-status-failed",
+  renamed: "text-og-accent",
+  copied: "text-og-accent",
+  untracked: "text-og-fg-subtle",
+  ignored: "text-og-fg-subtle",
+  conflicted: "text-og-status-failed",
+  typechange: "text-og-status-running"
 };
-function languageForPath(path) {
-  const name = path.split("/").pop() ?? path;
-  const ext = name.includes(".") ? (name.split(".").pop() ?? "").toLowerCase() : "";
-  switch (ext) {
-    case "js":
-    case "jsx":
-    case "ts":
-    case "tsx":
-    case "mjs":
-    case "cjs":
-      return "javascript";
-    case "json":
-    case "jsonc":
-      return "json";
-    case "py":
-    case "pyi":
-      return "python";
-    case "md":
-    case "markdown":
-    case "mdx":
-      return "markdown";
-    case "css":
-    case "scss":
-    case "less":
-      return "css";
-    case "html":
-    case "htm":
-    case "xml":
-    case "svg":
-    case "vue":
-      return "html";
-    default:
-      return null;
+var STATUS_LETTER = {
+  added: "A",
+  modified: "M",
+  deleted: "D",
+  renamed: "R",
+  copied: "C",
+  untracked: "U",
+  ignored: "I",
+  conflicted: "!",
+  typechange: "T"
+};
+function compactFileLabel(file) {
+  const slash = file.path.lastIndexOf("/");
+  const basename = slash >= 0 ? file.path.slice(slash + 1) : file.path;
+  const parent = slash >= 0 ? file.path.slice(0, slash + 1) : "";
+  return `${STATUS_LETTER[file.status]} \xB7 ${basename}${parent ? ` \u2014 ${parent}` : ""}`;
+}
+function buildRail(files) {
+  const roots = new Set(
+    files.flatMap((file) => file.repoRoot === void 0 ? [] : [file.repoRoot])
+  );
+  const groupByRepo = roots.size > 1;
+  if (!groupByRepo && files.length <= GROUP_THRESHOLD) {
+    return {
+      orderedFiles: files,
+      rows: files.map((file, index) => ({ kind: "file", file, index })),
+      grouped: false
+    };
+  }
+  const groups = /* @__PURE__ */ new Map();
+  for (const file of files) {
+    const slash = file.path.indexOf("/");
+    const key = groupByRepo ? file.repoRoot || "(workspace)" : slash > 0 ? file.path.slice(0, slash) : "(root)";
+    const bucket = groups.get(key);
+    if (bucket) bucket.push(file);
+    else groups.set(key, [file]);
+  }
+  const labels = [...groups.keys()].sort((a, b) => a.localeCompare(b));
+  const orderedFiles = [];
+  const rows = [];
+  for (const label of labels) {
+    const bucket = (groups.get(label) ?? []).slice().sort((a, b) => a.path.localeCompare(b.path));
+    rows.push({ kind: "group", label, count: bucket.length });
+    for (const file of bucket) {
+      rows.push({ kind: "file", file, index: orderedFiles.length });
+      orderedFiles.push(file);
+    }
   }
+  return { orderedFiles, rows, grouped: true };
 }
-function CodeEditor({
-  path,
-  initialContents,
-  onSave,
-  onOverwrite,
-  onReload,
-  onEditIntent,
-  readOnly = false,
-  themeType = "dark",
-  loading,
-  fallback,
+function isGuarded(file) {
+  return file.isBinary || file.truncated;
+}
+function estimateSectionHeight(file) {
+  if (isGuarded(file)) return HEADER_PX + GUARD_BODY_PX;
+  let lines = 0;
+  for (const hunk of file.hunks) lines += hunk.lines.length + 1;
+  return HEADER_PX + Math.max(lines, 1) * LINE_PX + 8;
+}
+function WorkbenchChanges({
+  diff,
+  source,
+  capturedAt,
+  captureRevision,
+  themeType,
+  onOpenFile,
   className
 }) {
-  const [failed, setFailed] = useState14(false);
-  const [bundle, setBundle] = useState14(null);
-  const [value, setValue] = useState14(initialContents);
-  const [baseline, setBaseline] = useState14(initialContents);
-  const [saving, setSaving] = useState14(false);
-  const [saveError, setSaveError] = useState14(null);
-  const [savedTick, setSavedTick] = useState14(false);
-  const dirty = value !== baseline;
-  const saveConflict = saveError !== null && saveError.code === "file_write_conflict";
-  const editIntentFiredRef = useRef14(false);
-  const lastSeed = useRef14({ path, contents: initialContents });
-  useEffect17(() => {
-    const seedChanged = lastSeed.current.path !== path || lastSeed.current.contents !== initialContents;
-    if (!seedChanged) return;
-    lastSeed.current = { path, contents: initialContents };
-    editIntentFiredRef.current = false;
-    setValue(initialContents);
-    setBaseline(initialContents);
-    setSaveError(null);
-    setSavedTick(false);
-  }, [path, initialContents]);
-  const noteEdit = useCallback17(
-    (next) => {
-      setValue(next);
-      setSavedTick(false);
-      if (!editIntentFiredRef.current && next !== baseline) {
-        editIntentFiredRef.current = true;
-        onEditIntent?.();
-      }
-    },
-    [baseline, onEditIntent]
+  const rootRef = useRef15(null);
+  const [compact, setCompact] = useState14(false);
+  const [coarsePointer, setCoarsePointer] = useState14(false);
+  const resolvedTheme = useThemeType(themeType);
+  const [layout, setLayout] = useState14("unified");
+  const [activePath, setActivePath] = useState14(null);
+  const pickerId = useId3();
+  const unicodeFontPaths = useMemo9(
+    () => diff.flatMap((file) => file.oldPath ? [file.path, file.oldPath] : [file.path]),
+    [diff]
   );
-  const langKey = useMemo8(() => languageForPath(path), [path]);
-  useEffect17(() => {
-    let cancelled = false;
-    void (async () => {
-      try {
-        const cmMod = await import("@uiw/react-codemirror");
-        let languageExtension = null;
-        if (langKey) {
-          try {
-            languageExtension = await LANGUAGE_LOADERS[langKey]?.() ?? null;
-          } catch {
-            languageExtension = null;
-          }
-        }
-        if (cancelled) return;
-        const saveKeymapExtension = (run) => cmMod.Prec.highest(
-          cmMod.keymap.of([
-            {
-              key: "Mod-s",
-              preventDefault: true,
-              run: () => {
-                run();
-                return true;
-              }
-            }
-          ])
-        );
-        setBundle({
-          Editor: cmMod.default,
-          saveKeymapExtension,
-          languageExtension
-        });
-        setFailed(false);
-      } catch {
-        if (!cancelled) setFailed(true);
-      }
-    })();
-    return () => {
-      cancelled = true;
+  useUnicodeFallbackFonts(unicodeFontPaths);
+  const { orderedFiles, rows, grouped } = useMemo9(() => buildRail(diff), [diff]);
+  const selectedIndex = orderedFiles.findIndex((file) => file.path === activePath);
+  const activeIndex = selectedIndex >= 0 ? selectedIndex : 0;
+  useChangesLayoutEffect(() => {
+    const root = rootRef.current;
+    if (!root || typeof ResizeObserver === "undefined") return;
+    const update = (width) => {
+      if (width > 0) setCompact(width < COMPACT_SURFACE_PX);
     };
-  }, [langKey]);
-  const saveRef = useRef14(() => {
+    update(root.getBoundingClientRect().width);
+    const observer = new ResizeObserver((entries) => {
+      update(entries[0]?.contentRect.width ?? root.getBoundingClientRect().width);
+    });
+    observer.observe(root);
+    return () => observer.disconnect();
+  }, []);
+  useChangesLayoutEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const query = window.matchMedia("(pointer: coarse)");
+    const update = () => setCoarsePointer(query.matches);
+    update();
+    if (typeof query.addEventListener === "function") {
+      query.addEventListener("change", update);
+      return () => query.removeEventListener("change", update);
+    }
+    if (typeof query.addListener === "function") {
+      query.addListener(update);
+      return () => query.removeListener(update);
+    }
+  }, []);
+  const additions = useMemo9(() => diff.reduce((sum, f) => sum + f.additions, 0), [diff]);
+  const deletions = useMemo9(() => diff.reduce((sum, f) => sum + f.deletions, 0), [diff]);
+  const estimateHeight = useCallback18(
+    (index) => {
+      const file = orderedFiles[index];
+      return file ? estimateSectionHeight(file) : HEADER_PX + LINE_PX;
+    },
+    [orderedFiles]
+  );
+  const windowed = useWindowedSections({
+    count: orderedFiles.length,
+    estimateHeight,
+    overscan: OVERSCAN
   });
-  const save = useCallback17(async () => {
-    if (readOnly) return;
-    const snapshot = value;
-    if (snapshot === baseline) return;
-    setSaving(true);
-    setSaveError(null);
-    setSavedTick(false);
-    try {
-      await onSave(snapshot);
-      setBaseline(snapshot);
-      lastSeed.current = { path, contents: snapshot };
-      setSavedTick(true);
-    } catch (cause) {
-      setSaveError(cause instanceof Error ? cause : new Error(String(cause)));
-    } finally {
-      setSaving(false);
+  const jumpTo = useCallback18(
+    (index) => {
+      setActivePath(orderedFiles[index]?.path ?? null);
+      windowed.scrollToIndex(index);
+    },
+    [orderedFiles, windowed]
+  );
+  const onPaneScroll = useCallback18(() => {
+    const el = windowed.scrollRef.current;
+    if (!el) {
+      return;
     }
-  }, [readOnly, value, baseline, onSave, path]);
-  const overwrite = useCallback17(async () => {
-    if (readOnly || !onOverwrite) return;
-    const snapshot = value;
-    if (snapshot === baseline) return;
-    setSaving(true);
-    setSaveError(null);
-    setSavedTick(false);
-    try {
-      await onOverwrite(snapshot);
-      setBaseline(snapshot);
-      lastSeed.current = { path, contents: snapshot };
-      setSavedTick(true);
-    } catch (cause) {
-      setSaveError(cause instanceof Error ? cause : new Error(String(cause)));
-    } finally {
-      setSaving(false);
+    const top = el.scrollTop;
+    const offsets = windowed.offsets;
+    let idx = 0;
+    for (let i = 0; i < orderedFiles.length; i++) {
+      if ((offsets[i] ?? 0) <= top + 4) idx = i;
+      else break;
     }
-  }, [readOnly, onOverwrite, value, baseline, path]);
-  saveRef.current = () => {
-    void save();
-  };
+    const nextPath = orderedFiles[idx]?.path ?? null;
+    setActivePath((previous) => previous === nextPath ? previous : nextPath);
+  }, [windowed, orderedFiles]);
   useEffect17(() => {
-    if (!savedTick) return;
-    const t = setTimeout(() => setSavedTick(false), 1800);
-    return () => clearTimeout(t);
-  }, [savedTick]);
-  const fileName = path.split("/").filter(Boolean).pop() ?? path;
-  const cmExtensions = useMemo8(() => {
-    if (!bundle) return [];
-    const exts = [bundle.saveKeymapExtension(() => saveRef.current())];
-    if (bundle.languageExtension) exts.push(bundle.languageExtension);
-    return exts;
-  }, [bundle]);
-  const Editor = bundle?.Editor;
+    const el = windowed.scrollRef.current;
+    if (!el) return;
+    el.addEventListener("scroll", onPaneScroll, { passive: true });
+    return () => el.removeEventListener("scroll", onPaneScroll);
+  }, [windowed.scrollRef, onPaneScroll]);
+  const sourceBadge = describeSource(source, capturedAt, captureRevision ?? null);
+  const activeFile = orderedFiles[activeIndex] ?? orderedFiles[0];
   return /* @__PURE__ */ jsxs6(
     "div",
     {
-      className: cn("flex h-full min-h-0 flex-col", className),
-      "data-opengeni-code-editor": true,
-      style: editorVars,
+      ref: rootRef,
+      className: cn("flex h-full min-h-0 min-w-0 flex-col", className),
+      "data-workbench-changes-layout": compact ? "compact" : "rail",
       children: [
-        /* @__PURE__ */ jsxs6("div", { className: "flex min-h-9 shrink-0 items-center gap-2 border-b border-og-border bg-og-surface-1 px-2 py-1", children: [
-          /* @__PURE__ */ jsx8(
-            "span",
-            {
-              className: cn(
-                "size-1.5 shrink-0 rounded-full transition-colors",
-                readOnly ? "bg-transparent" : dirty ? "bg-og-status-running" : "bg-og-status-idle"
-              ),
-              title: readOnly ? "read-only" : dirty ? "unsaved changes" : "saved"
-            }
-          ),
-          /* @__PURE__ */ jsxs6("span", { className: "truncate font-og-mono text-og-xs text-og-fg-muted", children: [
-            fileName,
-            dirty && !readOnly ? " \u2022" : ""
-          ] }),
-          /* @__PURE__ */ jsxs6("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: [
-            saveError && !saveConflict && /* @__PURE__ */ jsx8(
-              "span",
-              {
-                className: "max-w-[220px] truncate text-og-xs text-og-status-failed",
-                title: saveError.message,
-                children: saveError.message
-              }
-            ),
-            !saveError && savedTick && /* @__PURE__ */ jsx8("span", { className: "text-og-xs text-og-status-idle", children: "Saved" }),
-            readOnly ? /* @__PURE__ */ jsx8("span", { className: "text-og-xs uppercase tracking-wide text-og-fg-subtle", children: "Read-only" }) : !saveConflict ? /* @__PURE__ */ jsxs6(
-              "button",
-              {
-                type: "button",
-                onClick: () => void save(),
-                disabled: saving || !dirty,
-                className: cn(
-                  "flex items-center gap-1 rounded-og-sm border border-og-border px-1.5 py-0.5 text-og-xs pointer-coarse:min-h-11",
-                  saving || !dirty ? "cursor-default text-og-fg-subtle opacity-60" : "text-og-fg hover:bg-og-accent-soft"
-                ),
-                title: "Save (\u2318/Ctrl+S)",
-                children: [
-                  saving ? /* @__PURE__ */ jsx8(Loader2Icon, { className: "size-3 animate-spin" }) : /* @__PURE__ */ jsx8(SaveIcon, { className: "size-3" }),
-                  "Save"
-                ]
-              }
-            ) : null
-          ] })
-        ] }),
-        saveConflict ? /* @__PURE__ */ jsxs6(
+        /* @__PURE__ */ jsxs6(
           "div",
           {
-            className: "flex shrink-0 flex-wrap items-center gap-x-3 gap-y-2 border-b border-og-status-failed/25 bg-og-status-failed/8 px-2 py-2",
-            role: "alert",
+            className: cn(
+              "flex shrink-0 items-center justify-between gap-2 border-b border-og-border px-3 py-1.5",
+              compact && source === "capture" && "flex-col items-stretch gap-1.5 py-2"
+            ),
             children: [
-              /* @__PURE__ */ jsxs6("div", { className: "min-w-[12rem] flex-1 text-og-xs text-og-fg-muted", children: [
-                /* @__PURE__ */ jsx8("span", { className: "font-medium text-og-status-failed", children: "File changed on machine." }),
-                " ",
-                "Reloading discards your edits; overwriting replaces the live version."
-              ] }),
-              /* @__PURE__ */ jsxs6("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
-                onReload ? /* @__PURE__ */ jsx8(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => {
-                      setSaveError(null);
-                      onReload();
-                    },
-                    className: "min-h-8 rounded-og-sm border border-og-border bg-og-surface-1 px-2 text-og-xs font-medium text-og-fg hover:bg-og-surface-2 pointer-coarse:min-h-11",
-                    children: "Reload live"
-                  }
-                ) : null,
-                onOverwrite ? /* @__PURE__ */ jsx8(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => void overwrite(),
-                    disabled: saving,
-                    className: "min-h-8 rounded-og-sm border border-og-status-failed/40 px-2 text-og-xs font-medium text-og-status-failed hover:bg-og-status-failed/10 disabled:opacity-50 pointer-coarse:min-h-11",
-                    children: "Overwrite"
-                  }
-                ) : null
-              ] })
+              /* @__PURE__ */ jsxs6(
+                "span",
+                {
+                  role: "status",
+                  "aria-atomic": "true",
+                  "aria-live": "polite",
+                  "data-contrast-audited": true,
+                  className: "min-w-0 text-og-xs text-og-fg-muted",
+                  children: [
+                    diff.length,
+                    " ",
+                    diff.length === 1 ? "file" : "files",
+                    " changed",
+                    /* @__PURE__ */ jsxs6("span", { "data-contrast-audited": true, className: "ml-2 text-og-status-idle", children: [
+                      "+",
+                      additions
+                    ] }),
+                    /* @__PURE__ */ jsxs6("span", { "data-contrast-audited": true, className: "ml-1 text-og-status-failed", children: [
+                      "\u2212",
+                      deletions
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs6(
+                "div",
+                {
+                  className: cn(
+                    "flex shrink-0 items-center gap-2",
+                    compact && source === "capture" && "self-start"
+                  ),
+                  children: [
+                    compact ? null : /* @__PURE__ */ jsx6(LayoutToggle, { layout, onChange: setLayout }),
+                    /* @__PURE__ */ jsx6(SourceBadge, { source, capturedAt, label: sourceBadge })
+                  ]
+                }
+              )
             ]
           }
-        ) : null,
-        /* @__PURE__ */ jsx8("div", { className: "min-h-0 flex-1 overflow-auto", children: failed ? fallback ?? /* @__PURE__ */ jsx8(
-          PlainTextarea,
-          {
-            value,
-            readOnly,
-            onChange: noteEdit,
-            onSave: () => void save()
-          }
-        ) : Editor ? /* @__PURE__ */ jsx8(
-          Editor,
-          {
-            value,
-            theme: themeType === "light" ? "light" : "dark",
-            editable: !readOnly,
-            readOnly,
-            basicSetup: true,
-            extensions: cmExtensions,
-            height: "100%",
-            className: "og-cm-editor min-h-full text-og-sm",
-            onChange: readOnly ? void 0 : noteEdit
-          }
-        ) : loading ?? /* @__PURE__ */ jsx8(EditorSkeleton, {}) })
+        ),
+        compact ? /* @__PURE__ */ jsxs6("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "shrink-0 border-b border-og-border bg-og-surface-1 p-2", children: [
+            /* @__PURE__ */ jsx6("label", { className: "sr-only", htmlFor: pickerId, children: "Changed file" }),
+            /* @__PURE__ */ jsx6(
+              "select",
+              {
+                id: pickerId,
+                "aria-label": "Changed file",
+                value: activeIndex,
+                onChange: (event) => {
+                  const index = Number(event.currentTarget.value);
+                  setActivePath(orderedFiles[index]?.path ?? null);
+                },
+                title: activeFile?.path,
+                "data-compact-file-picker": true,
+                className: "h-11 w-full rounded-og-md border border-og-border bg-og-bg px-3 font-og-mono text-og-sm text-og-fg outline-none transition-colors focus:border-og-accent focus:ring-2 focus:ring-og-accent-soft",
+                children: orderedFiles.map((file, index) => /* @__PURE__ */ jsx6("option", { value: index, children: compactFileLabel(file) }, file.path))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx6("div", { className: "min-h-0 min-w-0 flex-1 overflow-auto", "data-opengeni-changes-pane": true, children: activeFile ? /* @__PURE__ */ jsx6(
+            DiffSection,
+            {
+              file: activeFile,
+              layout: "unified",
+              themeType: resolvedTheme,
+              ...onOpenFile ? { onOpenFile } : {}
+            }
+          ) : null })
+        ] }) : /* @__PURE__ */ jsxs6("div", { className: "flex min-h-0 flex-1", children: [
+          /* @__PURE__ */ jsx6("div", { className: "w-[clamp(12rem,28%,15rem)] shrink-0 border-r border-og-border bg-og-surface-1/35", children: /* @__PURE__ */ jsx6(
+            VList2,
+            {
+              className: "h-full",
+              itemSize: coarsePointer ? 44 : 28,
+              ssrCount: Math.min(30, rows.length),
+              children: rows.map(
+                (row) => row.kind === "group" ? /* @__PURE__ */ jsxs6(
+                  "div",
+                  {
+                    "data-rail-group": true,
+                    className: "flex items-center gap-1.5 px-2 pb-0.5 pt-2 text-og-xs font-medium uppercase tracking-wide text-og-fg-subtle",
+                    children: [
+                      /* @__PURE__ */ jsx6("span", { className: "min-w-0 truncate", children: row.label }),
+                      /* @__PURE__ */ jsx6("span", { className: "shrink-0", children: row.count })
+                    ]
+                  },
+                  `g:${row.label}`
+                ) : /* @__PURE__ */ jsx6(
+                  RailFileRow,
+                  {
+                    file: row.file,
+                    grouped,
+                    active: row.index === activeIndex,
+                    onClick: () => jumpTo(row.index)
+                  },
+                  row.file.path
+                )
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsx6(
+            "div",
+            {
+              ref: windowed.scrollRef,
+              className: "min-h-0 min-w-0 flex-1 overflow-auto",
+              "data-opengeni-changes-pane": true,
+              children: /* @__PURE__ */ jsx6("div", { style: { position: "relative", height: windowed.totalHeight }, children: orderedFiles.map((file, index) => {
+                if (index < windowed.range.start || index >= windowed.range.end) return null;
+                return /* @__PURE__ */ jsx6(
+                  MeasuredSection,
+                  {
+                    index,
+                    top: windowed.offsets[index] ?? 0,
+                    onMeasure: windowed.measure,
+                    children: /* @__PURE__ */ jsx6(
+                      DiffSection,
+                      {
+                        file,
+                        layout,
+                        themeType: resolvedTheme,
+                        ...onOpenFile ? { onOpenFile } : {}
+                      }
+                    )
+                  },
+                  file.path
+                );
+              }) })
+            }
+          )
+        ] })
       ]
     }
   );
 }
-var editorVars = {
-  "--og-cm-bg": "var(--og-color-bg)",
-  fontFamily: "var(--og-font-mono)"
-};
-function PlainTextarea({
-  value,
-  readOnly,
-  onChange,
-  onSave
+function SourceBadge({
+  source,
+  capturedAt,
+  label
 }) {
-  return /* @__PURE__ */ jsx8(
-    "textarea",
-    {
-      value,
-      readOnly,
-      spellCheck: false,
-      onChange: (e) => onChange(e.target.value),
-      onKeyDown: (event) => {
-        if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s") {
-          event.preventDefault();
-          onSave();
-        }
-      },
-      "aria-label": "Plain text file editor",
-      className: "h-full w-full resize-none bg-transparent p-2 font-og-mono text-og-sm text-og-fg outline-none"
-    }
-  );
-}
-function EditorSkeleton() {
-  return /* @__PURE__ */ jsx8("div", { className: "p-3 text-og-sm text-og-fg-subtle", children: "Loading editor\u2026" });
+  if (source === "capture" && capturedAt) {
+    return /* @__PURE__ */ jsxs6(
+      "span",
+      {
+        className: "inline-flex items-center gap-1 rounded-og-xs border border-og-border px-1.5 py-px text-og-xs text-og-fg-muted",
+        title: new Date(capturedAt).toLocaleString(),
+        children: [
+          /* @__PURE__ */ jsx6(HistoryIcon, { className: "size-3 shrink-0 text-og-status-running", "aria-hidden": true }),
+          label
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx6("span", { className: "rounded-og-xs bg-og-surface-2 px-1.5 py-px text-og-xs text-og-fg-subtle", children: label });
 }
-
-// src/components/sandbox-files.tsx
-import { FileCode2Icon, FileWarningIcon, LoaderCircleIcon } from "lucide-react";
-import { useCallback as useCallback18, useEffect as useEffect18, useRef as useRef15, useState as useState15 } from "react";
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
-function SandboxFiles({
-  files,
-  git,
-  fileSystemAvailable = true,
-  usePierre = true,
-  editable = true,
-  onEditIntent,
-  requestedPath,
-  requestedPathRequestId,
-  requestedPathReady = true,
-  workspaceResting = false,
-  workspaceWaking = false,
-  liveWorkspaceReady = true,
-  onWakeWorkspace,
-  themeType,
-  className
+function describeSource(source, capturedAt, revision) {
+  if (source !== "capture" || !capturedAt) return "Live diff";
+  const time = formatAsOf(capturedAt, Date.now());
+  return revision !== null ? `as of turn ${revision} \xB7 ${time}` : `as of ${time}`;
+}
+function RailFileRow({
+  file,
+  grouped,
+  active,
+  onClick
 }) {
-  const [selected, setSelected] = useState15(null);
-  const [editMode, setEditMode] = useState15(false);
-  const [liveRequestedPath, setLiveRequestedPath] = useState15(null);
-  const [viewReloadRevision, setViewReloadRevision] = useState15(0);
-  const pendingRequestRef = useRef15(null);
-  const handledRequestRef = useRef15(null);
-  const requestKey = requestedPath ? requestedPathRequestId ?? requestedPath : null;
-  useEffect18(() => {
-    if (!requestedPath || requestKey === null) {
-      pendingRequestRef.current = null;
-      handledRequestRef.current = null;
-      return;
-    }
-    if (handledRequestRef.current === requestKey) {
-      return;
-    }
-    if (!requestedPathReady) {
-      pendingRequestRef.current = requestKey;
-      return;
+  const repoPrefix = file.repoRoot ? `${file.repoRoot}/` : null;
+  const shown = grouped ? file.repoRoot !== void 0 ? repoPrefix && file.path.startsWith(repoPrefix) ? file.path.slice(repoPrefix.length) : file.path : file.path.slice(file.path.indexOf("/") + 1) || file.path : file.path;
+  return /* @__PURE__ */ jsxs6(
+    "button",
+    {
+      type: "button",
+      onClick,
+      title: file.path,
+      "data-rail-file": true,
+      className: cn(
+        "relative flex min-h-7 w-full items-center gap-1.5 truncate px-2 py-0.5 text-left text-og-sm transition-colors hover:bg-og-surface-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent pointer-coarse:min-h-11",
+        grouped && "pl-3",
+        active && "bg-og-accent-soft text-og-fg before:absolute before:inset-y-1 before:left-0 before:w-0.5 before:rounded-r-full before:bg-og-accent"
+      ),
+      children: [
+        /* @__PURE__ */ jsx6(
+          "span",
+          {
+            "data-contrast-audited": true,
+            className: cn("w-3 shrink-0 text-center font-og-mono text-og-xs", STATUS_TINT2[file.status]),
+            children: STATUS_LETTER[file.status]
+          }
+        ),
+        /* @__PURE__ */ jsx6("span", { className: "min-w-0 flex-1 truncate", children: shown }),
+        /* @__PURE__ */ jsxs6("span", { className: "ml-auto flex shrink-0 items-center gap-1 pl-1 font-og-mono text-og-xs", children: [
+          /* @__PURE__ */ jsxs6("span", { "data-contrast-audited": true, className: "text-og-status-idle", children: [
+            "+",
+            file.additions
+          ] }),
+          /* @__PURE__ */ jsxs6("span", { "data-contrast-audited": true, className: "text-og-status-failed", children: [
+            "\u2212",
+            file.deletions
+          ] })
+        ] })
+      ]
     }
-    handledRequestRef.current = requestKey;
-    pendingRequestRef.current = null;
-    setSelected(requestedPath);
-    setEditMode(false);
-  }, [requestKey, requestedPath, requestedPathReady]);
-  const rootRef = useRef15(null);
-  const [wide, setWide] = useState15(false);
-  useEffect18(() => {
-    const el = rootRef.current;
-    if (!el || typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver((entries) => {
-      const w = entries[0]?.contentRect.width ?? 0;
-      setWide(w >= 720);
-    });
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-  const resolvedTheme = useThemeType(themeType);
-  const viewPath = selected;
-  const fileView = useFileView(viewPath, files.readFile, viewReloadRevision);
-  const selectFile = useCallback18((path) => {
-    if (pendingRequestRef.current !== null) {
-      handledRequestRef.current = pendingRequestRef.current;
-      pendingRequestRef.current = null;
+  );
+}
+function MeasuredSection({
+  index,
+  top,
+  onMeasure,
+  children
+}) {
+  const ref = useRef15(null);
+  useEffect17(() => {
+    const el = ref.current;
+    if (!el) return;
+    const report = () => onMeasure(index, el.offsetHeight);
+    report();
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(report) : null;
+    ro?.observe(el);
+    return () => ro?.disconnect();
+  }, [index, onMeasure]);
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      ref,
+      "data-diff-section": true,
+      "data-diff-index": index,
+      style: { position: "absolute", top, left: 0, right: 0 },
+      children
     }
-    setSelected(path);
-    setEditMode(false);
-    setLiveRequestedPath(null);
-    setViewReloadRevision(0);
-  }, []);
-  const canEdit = editable && viewPath !== null && !fileView.loading && fileView.error === null && !fileView.isBinary && !fileView.truncated && fileView.content !== null;
-  const showEditor = canEdit && editMode;
-  const captureFileUnavailable = fileView.error instanceof CapturedFileUnavailableError ? fileView.error : null;
-  const waitingForSelectedFile = liveRequestedPath === viewPath && (!liveWorkspaceReady || files.loading) && captureFileUnavailable !== null;
-  if (!fileSystemAvailable) {
-    return /* @__PURE__ */ jsx9(
-      Notice,
-      {
-        className,
-        icon: /* @__PURE__ */ jsx9(FileWarningIcon, { className: "size-5", "aria-hidden": true }),
-        title: "Files unavailable",
-        announce: "alert",
-        children: "This sandbox does not expose a file system."
-      }
-    );
+  );
+}
+function DiffSection({
+  file,
+  layout,
+  themeType,
+  onOpenFile
+}) {
+  if (isGuarded(file)) {
+    const renamed = file.oldPath && file.oldPath !== file.path;
+    return /* @__PURE__ */ jsxs6("section", { className: "border-b border-og-border pb-1", children: [
+      /* @__PURE__ */ jsxs6("header", { className: "flex items-center justify-between gap-2 bg-og-surface-1 px-3 py-1.5 text-og-sm", children: [
+        /* @__PURE__ */ jsx6("span", { className: "min-w-0 truncate font-og-mono text-og-xs", children: renamed ? `${file.oldPath} \u2192 ${file.path}` : file.path }),
+        /* @__PURE__ */ jsxs6("span", { className: "flex shrink-0 items-center gap-2 font-og-mono text-og-xs", children: [
+          /* @__PURE__ */ jsxs6("span", { className: "text-og-status-idle", children: [
+            "+",
+            file.additions
+          ] }),
+          /* @__PURE__ */ jsxs6("span", { className: "text-og-status-failed", children: [
+            "\u2212",
+            file.deletions
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx6(GuardBody, { file, ...onOpenFile ? { onOpenFile } : {} })
+    ] });
   }
-  if (workspaceResting || workspaceWaking) {
-    return /* @__PURE__ */ jsx9("div", { className: cn("h-full", className), "data-opengeni-workspace-resting": true, children: /* @__PURE__ */ jsxs7(
-      Notice,
+  return /* @__PURE__ */ jsx6("section", { "data-pierre-section": true, className: "border-b border-og-border pb-2", children: /* @__PURE__ */ jsx6(PierreDiff, { diff: [file], layout, themeType, className: "px-1" }) });
+}
+function GuardBody({
+  file,
+  onOpenFile
+}) {
+  const reason = file.isBinary ? "Binary file" : "Diff too large to show here";
+  return /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap items-center gap-2 px-3 py-3 text-og-sm text-og-fg-subtle", children: [
+    /* @__PURE__ */ jsx6(FileWarningIcon, { className: "size-3.5 shrink-0", "aria-hidden": true }),
+    /* @__PURE__ */ jsxs6("span", { className: "min-w-0 flex-1", children: [
+      reason,
+      "."
+    ] }),
+    onOpenFile ? /* @__PURE__ */ jsxs6(
+      "button",
       {
-        icon: workspaceWaking ? /* @__PURE__ */ jsx9(
-          LoaderCircleIcon,
-          {
-            className: "size-5 animate-spin motion-reduce:animate-none",
-            "aria-hidden": true
-          }
-        ) : /* @__PURE__ */ jsx9(FileCode2Icon, { className: "size-5", "aria-hidden": true }),
-        title: workspaceWaking ? "Waking workspace" : "Workspace is resting",
-        announce: "status",
+        type: "button",
+        onClick: () => onOpenFile(file.path),
+        className: "inline-flex min-h-8 shrink-0 items-center gap-1.5 rounded-og-sm border border-og-border px-2 py-1 text-og-xs font-medium text-og-fg-muted transition-colors hover:border-og-border-strong hover:bg-og-surface-2 hover:text-og-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:min-h-11",
         children: [
-          /* @__PURE__ */ jsx9("p", { children: workspaceWaking ? "Connecting to the live file system\u2026" : "No captured revision is available yet. Wake the sandbox to browse its current files." }),
-          !workspaceWaking && onWakeWorkspace ? /* @__PURE__ */ jsx9(WakeButton, { onClick: onWakeWorkspace, children: "Open live workspace" }) : null
+          "Open in Files",
+          /* @__PURE__ */ jsx6(ArrowUpRightIcon, { className: "size-3.5", "aria-hidden": true })
         ]
       }
-    ) });
-  }
-  return /* @__PURE__ */ jsxs7("div", { ref: rootRef, className: cn("flex h-full min-h-0 min-w-0 flex-col", className), children: [
-    /* @__PURE__ */ jsx9(GitHeader, { git, dirtyCount: git.diff.length }),
-    /* @__PURE__ */ jsxs7("div", { className: cn("flex min-h-0 flex-1", wide ? "flex-row" : "flex-col"), children: [
-      /* @__PURE__ */ jsx9(
-        "div",
-        {
-          className: cn(
-            "flex min-h-0 flex-col",
-            wide ? "w-[280px] shrink-0 border-r border-og-border" : "flex-1"
-          ),
-          children: /* @__PURE__ */ jsx9(
-            FileBrowser,
-            {
-              result: files,
-              selectedPath: selected ?? void 0,
-              onSelectFile: selectFile,
-              editable,
-              emptyState: "This directory is empty",
-              className: "min-w-0 flex-1"
-            }
-          )
-        }
+    ) : null
+  ] });
+}
+function LayoutToggle({
+  layout,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx6("div", { className: "inline-flex items-center rounded-og-sm border border-og-border p-0.5", children: ["unified", "split"].map((value) => /* @__PURE__ */ jsx6(
+    "button",
+    {
+      type: "button",
+      onClick: () => onChange(value),
+      className: cn(
+        "min-h-7 rounded-og-xs px-1.5 py-0.5 text-og-xs capitalize focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent max-[1023px]:min-w-11 pointer-coarse:min-h-11 pointer-coarse:min-w-11",
+        layout === value ? "bg-og-accent-soft text-og-fg" : "text-og-fg-subtle hover:text-og-fg"
       ),
-      /* @__PURE__ */ jsxs7(
-        "div",
-        {
-          className: cn(
-            "flex min-h-0 min-w-0 flex-col",
-            wide ? "flex-1" : "flex-[1.4] border-t border-og-border"
-          ),
-          children: [
-            /* @__PURE__ */ jsxs7("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-og-border bg-og-surface-1 px-2 py-1", children: [
-              /* @__PURE__ */ jsx9(
-                "span",
-                {
-                  "data-opengeni-selected-file": true,
-                  className: "min-w-0 truncate font-og-mono text-og-xs text-og-fg-muted",
-                  children: selected ?? "No file selected"
-                }
-              ),
-              canEdit && /* @__PURE__ */ jsx9(
-                Segmented,
-                {
-                  options: [
-                    { value: "view", label: "View" },
-                    { value: "edit", label: "Edit" }
-                  ],
-                  value: editMode ? "edit" : "view",
-                  onChange: (v) => setEditMode(v === "edit")
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx9("div", { className: "min-h-0 flex-1 overflow-auto", children: viewPath ? showEditor && fileView.content !== null ? /* @__PURE__ */ jsx9(
-              CodeEditor,
-              {
-                path: viewPath,
-                initialContents: fileView.content,
-                themeType: resolvedTheme,
-                onSave: (contents) => files.writeFile(viewPath, contents, { expectedContent: fileView.content }),
-                onOverwrite: (contents) => files.writeFile(viewPath, contents, { force: true }),
-                onReload: () => setViewReloadRevision((revision) => revision + 1),
-                ...onEditIntent ? { onEditIntent } : {},
-                className: "h-full"
-              },
-              viewPath
-            ) : waitingForSelectedFile ? /* @__PURE__ */ jsxs7(
-              Notice,
-              {
-                icon: /* @__PURE__ */ jsx9(
-                  LoaderCircleIcon,
-                  {
-                    className: "size-5 animate-spin motion-reduce:animate-none",
-                    "aria-hidden": true
-                  }
-                ),
-                title: "Waking workspace",
-                announce: "status",
-                children: [
-                  "Opening ",
-                  viewPath,
-                  " when the live file system is ready\u2026"
-                ]
-              }
-            ) : captureFileUnavailable ? /* @__PURE__ */ jsxs7(Notice, { icon: /* @__PURE__ */ jsx9(FileCode2Icon, { className: "size-5", "aria-hidden": true }), title: "On machine", children: [
-              /* @__PURE__ */ jsx9("p", { children: captureFileUnavailable.reason === "too-large" ? "This file is larger than the captured preview limit." : captureFileUnavailable.reason === "content-missing" ? "The captured copy is no longer available." : "This file was indexed, but it was not changed in the captured turn." }),
-              onWakeWorkspace ? /* @__PURE__ */ jsx9(
-                WakeButton,
-                {
-                  onClick: () => {
-                    setLiveRequestedPath(viewPath);
-                    if (liveWorkspaceReady) void files.refresh();
-                    else onWakeWorkspace();
-                  },
-                  children: liveWorkspaceReady ? "Retry live file" : "Open live file"
-                }
-              ) : null
-            ] }) : fileView.error ? /* @__PURE__ */ jsxs7(Notice, { announce: "alert", children: [
-              "Could not open ",
-              viewPath,
-              ": ",
-              fileView.error.message
-            ] }) : fileView.loading ? /* @__PURE__ */ jsxs7(Notice, { announce: "status", children: [
-              "Loading ",
-              viewPath,
-              "\u2026"
-            ] }) : fileView.isBinary ? /* @__PURE__ */ jsxs7(Notice, { children: [
-              viewPath,
-              " is a binary file (",
-              fileView.sizeBytes ?? 0,
-              " bytes)."
-            ] }) : fileView.content !== null ? /* @__PURE__ */ jsxs7(Fragment3, { children: [
-              fileView.truncated && /* @__PURE__ */ jsxs7("div", { className: "border-b border-og-border bg-og-surface-1 px-2 py-1 text-og-xs text-og-status-running", children: [
-                "Large file \u2014 showing a truncated preview (",
-                fileView.sizeBytes ?? 0,
-                " bytes loaded). Editing is disabled to avoid corrupting the file."
-              ] }),
-              usePierre ? /* @__PURE__ */ jsx9(
-                PierreFile,
-                {
-                  path: viewPath,
-                  contents: fileView.content,
-                  themeType: resolvedTheme,
-                  fallback: /* @__PURE__ */ jsx9("pre", { className: "overflow-auto whitespace-pre p-2 font-og-mono text-og-sm text-og-fg", children: fileView.content }),
-                  className: "p-1"
-                }
-              ) : /* @__PURE__ */ jsx9("pre", { className: "overflow-auto whitespace-pre p-2 font-og-mono text-og-sm text-og-fg", children: fileView.content })
-            ] }) : /* @__PURE__ */ jsxs7(Notice, { announce: "status", children: [
-              "Loading ",
-              viewPath,
-              "\u2026"
-            ] }) : (
-              // Nothing selected — the tree shows the whole workspace; pick a file.
-              requestedPath && !requestedPathReady ? /* @__PURE__ */ jsxs7(
-                Notice,
-                {
-                  icon: /* @__PURE__ */ jsx9(
-                    LoaderCircleIcon,
-                    {
-                      className: "size-5 animate-spin motion-reduce:animate-none",
-                      "aria-hidden": true
-                    }
-                  ),
-                  title: "Waking sandbox",
-                  announce: "status",
-                  children: [
-                    "Opening ",
-                    requestedPath,
-                    " when the live workspace is ready\u2026"
-                  ]
-                }
-              ) : /* @__PURE__ */ jsx9(Notice, { icon: /* @__PURE__ */ jsx9(FileCode2Icon, { className: "size-5", "aria-hidden": true }), title: "Choose a file", children: "Select a file in the tree to preview it." })
-            ) })
-          ]
-        }
-      )
-    ] })
-  ] });
+      children: value
+    },
+    value
+  )) });
 }
-function WakeButton({ children, onClick }) {
-  return /* @__PURE__ */ jsx9(
-    "button",
+
+// src/components/diff-view.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function DiffView({
+  diff,
+  fallback,
+  layout = "unified",
+  themeType,
+  isRepo = true,
+  emptyState,
+  className
+}) {
+  if (diff.length === 0) {
+    return /* @__PURE__ */ jsx7("div", { className: cn("p-3 text-og-sm text-og-fg-subtle", className), children: emptyState ?? (isRepo ? "No changes" : "No repository mounted") });
+  }
+  return /* @__PURE__ */ jsx7(
+    PierreDiff,
     {
-      type: "button",
-      onClick,
-      className: "mt-1 inline-flex min-h-11 items-center justify-center rounded-og-md bg-og-accent px-3 py-2 text-og-sm font-medium text-og-on-accent shadow-sm transition-colors hover:bg-og-accent-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent focus-visible:ring-offset-2 focus-visible:ring-offset-og-bg",
-      children
+      diff,
+      layout,
+      themeType,
+      ...fallback !== void 0 ? { fallback } : {},
+      className
     }
   );
 }
-function GitHeader({ git, dirtyCount }) {
-  const dirty = dirtyCount > 0;
-  return /* @__PURE__ */ jsxs7("div", { className: "flex shrink-0 items-center gap-2 border-b border-og-border bg-og-surface-1 px-2 py-1 text-og-sm", children: [
-    /* @__PURE__ */ jsx9(
-      "span",
-      {
-        "aria-hidden": "true",
-        className: cn(
-          "size-2 shrink-0 rounded-full",
-          dirty ? "bg-og-status-running" : "bg-og-status-idle"
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx9("span", { className: "sr-only", children: dirty ? `Working tree has ${dirtyCount} changed files` : "Working tree clean" }),
-    /* @__PURE__ */ jsx9("span", { className: "truncate font-og-mono text-og-fg", children: git.repoCount > 1 ? `${git.repoCount} repositories` : git.branch ?? (git.isRepo ? "(detached)" : "no repo") }),
-    (git.ahead > 0 || git.behind > 0) && /* @__PURE__ */ jsxs7("span", { className: "flex shrink-0 items-center gap-1.5 text-og-xs text-og-fg-subtle", children: [
-      git.ahead > 0 && /* @__PURE__ */ jsxs7("span", { children: [
-        "\u2191",
-        git.ahead
-      ] }),
-      git.behind > 0 && /* @__PURE__ */ jsxs7("span", { children: [
-        "\u2193",
-        git.behind
-      ] })
-    ] }),
-    dirty && /* @__PURE__ */ jsxs7(
-      "span",
-      {
-        "aria-hidden": "true",
-        "data-contrast-audited": true,
-        className: "ml-auto shrink-0 text-og-xs text-og-fg-subtle",
-        children: [
-          dirtyCount,
-          " changed"
-        ]
-      }
-    )
-  ] });
-}
-function Segmented({
-  options,
-  value,
-  onChange
+
+// src/components/pierre-file.tsx
+import {
+  lazy,
+  Suspense,
+  useEffect as useEffect18,
+  useState as useState15
+} from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var LazyFile = lazy(async () => {
+  const mod = await import("@pierre/diffs/react");
+  return { default: mod.File };
+});
+function PierreFile({
+  path,
+  contents,
+  themeType,
+  theme,
+  disableWorkerPool,
+  loading,
+  fallback,
+  className
 }) {
-  return /* @__PURE__ */ jsx9("div", { className: "flex flex-wrap items-center rounded-og-sm border border-og-border p-0.5", children: options.map((opt) => /* @__PURE__ */ jsx9(
-    "button",
-    {
-      type: "button",
-      onClick: () => onChange(opt.value),
-      className: cn(
-        "min-h-7 rounded-og-xs px-1.5 py-0.5 text-og-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent max-[1023px]:min-h-11 max-[1023px]:min-w-11 pointer-coarse:min-h-11 pointer-coarse:min-w-11",
-        opt.value === value ? "bg-og-accent-soft text-og-fg" : "text-og-fg-subtle hover:text-og-fg"
-      ),
-      children: opt.label
-    },
-    opt.value
-  )) });
-}
-function useFileView(path, readFile, reloadRevision = 0) {
-  const [state, setState] = useState15({
-    content: null,
-    isBinary: false,
-    truncated: false,
-    sizeBytes: null,
-    loading: false,
-    error: null
-  });
+  const [failed, setFailed] = useState15(false);
   useEffect18(() => {
-    if (!path) {
-      setState({
-        content: null,
-        isBinary: false,
-        truncated: false,
-        sizeBytes: null,
-        loading: false,
-        error: null
-      });
-      return;
-    }
     let cancelled = false;
-    const abort = new AbortController();
-    setState({
-      content: null,
-      isBinary: false,
-      truncated: false,
-      sizeBytes: null,
-      loading: true,
-      error: null
-    });
-    void readFile(path, { signal: abort.signal }).then((res) => {
-      if (cancelled) return;
-      const content = res.isBinary ? null : res.encoding === "base64" ? decodeBase64Utf8(res.content) : res.content;
-      setState({
-        content,
-        isBinary: res.isBinary,
-        truncated: res.truncated,
-        sizeBytes: res.sizeBytes,
-        loading: false,
-        error: null
-      });
-    }).catch((cause) => {
-      if (cancelled) return;
-      setState({
-        content: null,
-        isBinary: false,
-        truncated: false,
-        sizeBytes: null,
-        loading: false,
-        error: cause instanceof Error ? cause : new Error(String(cause))
-      });
+    void import("@pierre/diffs/react").catch(() => {
+      if (!cancelled) setFailed(true);
     });
     return () => {
       cancelled = true;
-      abort.abort();
     };
-  }, [path, readFile, reloadRevision]);
-  return state;
-}
-function decodeBase64Utf8(b64) {
-  try {
-    if (typeof atob === "function") {
-      const binary = atob(b64);
-      const bytes = new Uint8Array(binary.length);
-      for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
-      return new TextDecoder().decode(bytes);
-    }
-  } catch {
+  }, []);
+  const name = path.split("/").filter(Boolean).pop() ?? path;
+  if (failed) {
+    return /* @__PURE__ */ jsx8("div", { className, children: fallback ?? /* @__PURE__ */ jsx8(PlainFile, { name, contents }) });
   }
-  return b64;
-}
-function Notice({
-  children,
-  className,
-  icon,
-  title,
-  announce
-}) {
-  return /* @__PURE__ */ jsx9(
-    "div",
-    {
-      role: announce,
-      "aria-atomic": announce ? "true" : void 0,
-      "aria-live": announce === "alert" ? "assertive" : announce === "status" ? "polite" : void 0,
-      className: cn(
-        "flex h-full items-center justify-center p-4 text-center text-og-sm text-og-fg-subtle",
-        className
-      ),
-      children: /* @__PURE__ */ jsxs7("div", { className: "flex max-w-sm flex-col items-center gap-2.5", children: [
-        icon ? /* @__PURE__ */ jsx9("span", { className: "grid size-10 place-items-center rounded-og-lg border border-og-border bg-og-surface-1 text-og-fg-muted shadow-sm", children: icon }) : null,
-        title ? /* @__PURE__ */ jsx9("p", { className: "font-medium text-og-fg", children: title }) : null,
-        /* @__PURE__ */ jsx9("div", { className: "leading-5", children })
-      ] })
-    }
-  );
-}
-
-// src/components/desktop-viewer.tsx
-import { LoaderCircleIcon as LoaderCircleIcon2, MonitorIcon, MousePointerClickIcon, WifiOffIcon } from "lucide-react";
-import { useEffect as useEffect19, useRef as useRef16, useState as useState16 } from "react";
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
-var DESKTOP_MEDIA_BACKGROUND = "#000";
-function isHardUnavailable(reason) {
-  switch (reason) {
-    case "backend_unsupported":
-    case "os_unsupported":
-    case "not_provisioned":
-    case "disabled_by_policy":
-    case "tier_headless":
-      return true;
+  const options = {
+    overflow: "scroll",
+    stickyHeader: true,
+    showLineNumbers: true,
+    ...theme ? { theme } : {
+      theme: {
+        dark: "github-dark-high-contrast",
+        light: "github-light-high-contrast"
+      }
+    },
+    themeType: themeType ?? "dark"
+  };
+  const pierreVars = {
+    "--diffs-dark-bg": "var(--og-color-bg)",
+    "--diffs-light-bg": "var(--og-color-bg)",
+    "--diffs-bg-buffer-override": "var(--og-color-surface-1)",
+    "--diffs-bg-separator-override": "var(--og-color-surface-1)",
+    "--diffs-font-size": "var(--og-code-font-size)",
+    "--diffs-line-height": "var(--og-code-line-height)"
+  };
+  return /* @__PURE__ */ jsx8("div", { className: cn("min-w-0", className), "data-opengeni-pierre-file": true, style: pierreVars, children: /* @__PURE__ */ jsx8(Suspense, { fallback: loading ?? /* @__PURE__ */ jsx8(FileSkeleton, {}), children: /* @__PURE__ */ jsx8(
+    LazyFile,
+    {
+      file: { name, contents },
+      options,
+      ...disableWorkerPool !== void 0 ? { disableWorkerPool } : {}
+    }
+  ) }) });
+}
+function PlainFile({ name, contents }) {
+  return /* @__PURE__ */ jsx8(
+    "pre",
+    {
+      className: "overflow-auto whitespace-pre p-2 font-og-mono text-og-sm text-og-fg",
+      "data-file": name,
+      children: contents
+    }
+  );
+}
+function FileSkeleton() {
+  return /* @__PURE__ */ jsx8("div", { className: "p-3 text-og-sm text-og-fg-subtle", children: "Loading file\u2026" });
+}
+
+// src/components/code-editor.tsx
+import { Loader2Icon, SaveIcon } from "lucide-react";
+import {
+  useCallback as useCallback19,
+  useEffect as useEffect19,
+  useMemo as useMemo10,
+  useRef as useRef16,
+  useState as useState16
+} from "react";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var LANGUAGE_LOADERS = {
+  javascript: async () => (await import("@codemirror/lang-javascript")).javascript({ jsx: true, typescript: true }),
+  json: async () => (await import("@codemirror/lang-json")).json(),
+  python: async () => (await import("@codemirror/lang-python")).python(),
+  markdown: async () => (await import("@codemirror/lang-markdown")).markdown(),
+  css: async () => (await import("@codemirror/lang-css")).css(),
+  html: async () => (await import("@codemirror/lang-html")).html()
+};
+function languageForPath(path) {
+  const name = path.split("/").pop() ?? path;
+  const ext = name.includes(".") ? (name.split(".").pop() ?? "").toLowerCase() : "";
+  switch (ext) {
+    case "js":
+    case "jsx":
+    case "ts":
+    case "tsx":
+    case "mjs":
+    case "cjs":
+      return "javascript";
+    case "json":
+    case "jsonc":
+      return "json";
+    case "py":
+    case "pyi":
+      return "python";
+    case "md":
+    case "markdown":
+    case "mdx":
+      return "markdown";
+    case "css":
+    case "scss":
+    case "less":
+      return "css";
+    case "html":
+    case "htm":
+    case "xml":
+    case "svg":
+    case "vue":
+      return "html";
     default:
-      return false;
+      return null;
   }
 }
-function DesktopViewer({
-  capability,
-  interactive,
-  showControlToggle = true,
-  scaleViewport,
-  rfbFactory,
-  webSocketFactory,
-  renderConsentGate,
-  onAcknowledge,
-  watching,
-  onWarm,
-  renderUnavailable,
-  renderWarming,
-  renderViewerCap,
-  viewerCapReached,
-  connectTimeoutMs = 13e3,
+function CodeEditor({
+  path,
+  initialContents,
+  onSave,
+  onOverwrite,
+  onReload,
+  onEditIntent,
+  readOnly = false,
+  themeType = "dark",
+  loading,
+  fallback,
   className
 }) {
-  const containerRef = useRef16(null);
-  const [consented, setConsented] = useState16(false);
-  const [takeControl, setTakeControl] = useState16(interactive ?? false);
-  const externallyControlled = interactive !== void 0;
-  const serverAllowsControl = capability?.mode !== "read-only";
-  const wantControl = externallyControlled ? interactive : takeControl;
-  const inControl = Boolean(wantControl) && serverAllowsControl;
-  const isWatching = watching ?? consented;
-  const transportNull = !capability || capability.transport === null;
-  const reason = capability?.reason ?? null;
-  const needsAck = capability?.requiresAcknowledgment === true && capability.acknowledged !== true && !consented;
-  const noLiveAddress = Boolean(capability) && !transportNull && !capability.url;
-  const coldWarmable = transportNull && reason === "lease_cold" || !transportNull && noLiveAddress;
-  const hardUnavailable = transportNull && isHardUnavailable(reason);
-  const accept = () => {
-    setConsented(true);
-    onAcknowledge?.();
-  };
+  const [failed, setFailed] = useState16(false);
+  const [bundle, setBundle] = useState16(null);
+  const [value, setValue] = useState16(initialContents);
+  const [baseline, setBaseline] = useState16(initialContents);
+  const [saving, setSaving] = useState16(false);
+  const [saveError, setSaveError] = useState16(null);
+  const [savedTick, setSavedTick] = useState16(false);
+  const dirty = value !== baseline;
+  const saveConflict = saveError !== null && saveError.code === "file_write_conflict";
+  const editIntentFiredRef = useRef16(false);
+  const lastSeed = useRef16({ path, contents: initialContents });
   useEffect19(() => {
-    if (!inControl || externallyControlled) return;
-    const onKey = (event) => {
-      if (event.ctrlKey && event.altKey && event.shiftKey && (event.key === "Control" || event.key === "Alt" || event.key === "Shift")) {
-        event.preventDefault();
-        setTakeControl(false);
+    const seedChanged = lastSeed.current.path !== path || lastSeed.current.contents !== initialContents;
+    if (!seedChanged) return;
+    lastSeed.current = { path, contents: initialContents };
+    editIntentFiredRef.current = false;
+    setValue(initialContents);
+    setBaseline(initialContents);
+    setSaveError(null);
+    setSavedTick(false);
+  }, [path, initialContents]);
+  const noteEdit = useCallback19(
+    (next) => {
+      setValue(next);
+      setSavedTick(false);
+      if (!editIntentFiredRef.current && next !== baseline) {
+        editIntentFiredRef.current = true;
+        onEditIntent?.();
       }
-    };
-    window.addEventListener("keydown", onKey);
+    },
+    [baseline, onEditIntent]
+  );
+  const langKey = useMemo10(() => languageForPath(path), [path]);
+  useEffect19(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const cmMod = await import("@uiw/react-codemirror");
+        let languageExtension = null;
+        if (langKey) {
+          try {
+            languageExtension = await LANGUAGE_LOADERS[langKey]?.() ?? null;
+          } catch {
+            languageExtension = null;
+          }
+        }
+        if (cancelled) return;
+        const saveKeymapExtension = (run) => cmMod.Prec.highest(
+          cmMod.keymap.of([
+            {
+              key: "Mod-s",
+              preventDefault: true,
+              run: () => {
+                run();
+                return true;
+              }
+            }
+          ])
+        );
+        setBundle({
+          Editor: cmMod.default,
+          saveKeymapExtension,
+          languageExtension
+        });
+        setFailed(false);
+      } catch {
+        if (!cancelled) setFailed(true);
+      }
+    })();
     return () => {
-      window.removeEventListener("keydown", onKey);
+      cancelled = true;
     };
-  }, [inControl, externallyControlled]);
-  const connectCapability = !transportNull && !needsAck && !viewerCapReached ? capability : null;
-  const stream = useDesktopStream({
-    capability: connectCapability,
-    containerRef,
-    interactive: inControl,
-    ...scaleViewport !== void 0 ? { scaleViewport } : {},
-    ...rfbFactory ? { rfbFactory } : {},
-    ...webSocketFactory ? { webSocketFactory } : {}
+  }, [langKey]);
+  const saveRef = useRef16(() => {
   });
-  const connected = stream.state === "connected";
-  const hasLiveUrl = Boolean(connectCapability?.url);
-  const streamStateRef = useRef16(stream.state);
-  streamStateRef.current = stream.state;
-  const warmKeyRef = useRef16(null);
-  useEffect19(() => {
-    if (!isWatching || !coldWarmable || needsAck || viewerCapReached) {
-      if (!coldWarmable) warmKeyRef.current = null;
-      return;
+  const save = useCallback19(async () => {
+    if (readOnly) return;
+    const snapshot = value;
+    if (snapshot === baseline) return;
+    setSaving(true);
+    setSaveError(null);
+    setSavedTick(false);
+    try {
+      await onSave(snapshot);
+      setBaseline(snapshot);
+      lastSeed.current = { path, contents: snapshot };
+      setSavedTick(true);
+    } catch (cause) {
+      setSaveError(cause instanceof Error ? cause : new Error(String(cause)));
+    } finally {
+      setSaving(false);
     }
-    const warm = onWarm ?? onAcknowledge;
-    if (!warm) return;
-    const key = `${capability?.reason ?? ""}:${capability?.url ?? ""}:${capability?.expiresAt ?? ""}`;
-    if (warmKeyRef.current === key) return;
-    warmKeyRef.current = key;
-    warm();
-  }, [isWatching, coldWarmable, needsAck, viewerCapReached, capability, onWarm, onAcknowledge]);
-  useEffect19(() => {
-    if (!hasLiveUrl || typeof document === "undefined") return;
-    const maybeReattach = () => {
-      if (document.visibilityState !== "visible") return;
-      if (streamStateRef.current === "idle") stream.reconnect();
-    };
-    document.addEventListener("visibilitychange", maybeReattach);
-    return () => document.removeEventListener("visibilitychange", maybeReattach);
-  }, [hasLiveUrl, connectCapability?.url]);
-  const [connectTimedOut, setConnectTimedOut] = useState16(false);
-  const [reconnectNonce, setReconnectNonce] = useState16(0);
-  useEffect19(() => {
-    setConnectTimedOut(false);
-    if (!hasLiveUrl || connected || stream.error || connectTimeoutMs <= 0) return;
-    const timer = setTimeout(() => setConnectTimedOut(true), connectTimeoutMs);
-    return () => clearTimeout(timer);
-  }, [
-    hasLiveUrl,
-    connected,
-    connectTimeoutMs,
-    connectCapability?.url,
-    stream.error,
-    reconnectNonce
-  ]);
-  const reconnect = () => {
-    setConnectTimedOut(false);
-    setReconnectNonce((n) => n + 1);
-    stream.reconnect();
+  }, [readOnly, value, baseline, onSave, path]);
+  const overwrite = useCallback19(async () => {
+    if (readOnly || !onOverwrite) return;
+    const snapshot = value;
+    if (snapshot === baseline) return;
+    setSaving(true);
+    setSaveError(null);
+    setSavedTick(false);
+    try {
+      await onOverwrite(snapshot);
+      setBaseline(snapshot);
+      lastSeed.current = { path, contents: snapshot };
+      setSavedTick(true);
+    } catch (cause) {
+      setSaveError(cause instanceof Error ? cause : new Error(String(cause)));
+    } finally {
+      setSaving(false);
+    }
+  }, [readOnly, onOverwrite, value, baseline, path]);
+  saveRef.current = () => {
+    void save();
   };
-  let uiState;
-  if (viewerCapReached) uiState = "viewer_cap";
-  else if (hardUnavailable) uiState = "unavailable";
-  else if (needsAck && !isWatching) uiState = "consent";
-  else if (coldWarmable) uiState = "warming";
-  else if (connected) uiState = "connected";
-  else if (stream.error) uiState = "error";
-  else if (connectTimedOut) uiState = "connect_failed";
-  else uiState = "connecting";
-  const overlayShown = uiState !== "connected" && uiState !== "connecting";
-  const showToggle = showControlToggle && !overlayShown;
-  let overlay = null;
-  switch (uiState) {
-    case "viewer_cap":
-      overlay = renderViewerCap?.() ?? defaultNotice(
-        "Too many viewers",
-        "This session has reached its live-viewer limit. Try again shortly."
-      );
-      break;
-    case "unavailable":
-      overlay = renderUnavailable?.(reason) ?? defaultNotice("Desktop unavailable", unavailableCopy(reason));
-      break;
-    case "consent":
-      overlay = renderConsentGate ? renderConsentGate(accept, capability?.shared ?? false) : /* @__PURE__ */ jsx10(DefaultConsentGate, { shared: capability?.shared ?? false, onAccept: accept });
-      break;
-    case "warming":
-      overlay = renderWarming?.() ?? /* @__PURE__ */ jsx10(WarmingNotice, {});
-      break;
-    case "connect_failed":
-      overlay = defaultNotice(
-        "Couldn\u2019t connect",
-        "The desktop is warm but the live stream didn\u2019t come up. This usually clears on a retry.",
-        reconnect
-      );
-      break;
-    case "error":
-      overlay = defaultNotice(
-        "Desktop disconnected",
-        stream.error?.message ?? "The stream dropped.",
-        reconnect
-      );
-      break;
-    case "connecting":
-    case "connected":
-      overlay = null;
-      break;
-  }
-  return /* @__PURE__ */ jsxs8(
+  useEffect19(() => {
+    if (!savedTick) return;
+    const t = setTimeout(() => setSavedTick(false), 1800);
+    return () => clearTimeout(t);
+  }, [savedTick]);
+  const fileName = path.split("/").filter(Boolean).pop() ?? path;
+  const cmExtensions = useMemo10(() => {
+    if (!bundle) return [];
+    const exts = [bundle.saveKeymapExtension(() => saveRef.current())];
+    if (bundle.languageExtension) exts.push(bundle.languageExtension);
+    return exts;
+  }, [bundle]);
+  const Editor = bundle?.Editor;
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
-      className: cn(
-        "relative h-full w-full overflow-hidden",
-        inControl && "ring-2 ring-inset ring-og-accent",
-        className
-      ),
-      style: { backgroundColor: DESKTOP_MEDIA_BACKGROUND },
-      "data-opengeni-desktop": true,
-      "data-state": stream.state,
-      "data-ui-state": uiState,
-      "data-in-control": inControl ? "true" : void 0,
+      className: cn("flex h-full min-h-0 flex-col", className),
+      "data-opengeni-code-editor": true,
+      style: editorVars,
       children: [
-        /* @__PURE__ */ jsx10(
-          "div",
-          {
-            ref: containerRef,
-            className: "absolute inset-0 overflow-hidden",
-            "data-opengeni-desktop-canvas": true,
-            "data-state": stream.state
-          }
-        ),
-        uiState === "connecting" && /* @__PURE__ */ jsxs8("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-3 text-og-fg-subtle", children: [
-          /* @__PURE__ */ jsxs8("span", { className: "relative flex items-center justify-center", children: [
-            /* @__PURE__ */ jsx10(MonitorIcon, { className: "size-8 opacity-30", strokeWidth: 1.5 }),
-            /* @__PURE__ */ jsx10(
-              LoaderCircleIcon2,
+        /* @__PURE__ */ jsxs7("div", { className: "flex min-h-9 shrink-0 items-center gap-2 border-b border-og-border bg-og-surface-1 px-2 py-1", children: [
+          /* @__PURE__ */ jsx9(
+            "span",
+            {
+              className: cn(
+                "size-1.5 shrink-0 rounded-full transition-colors",
+                readOnly ? "bg-transparent" : dirty ? "bg-og-status-running" : "bg-og-status-idle"
+              ),
+              title: readOnly ? "read-only" : dirty ? "unsaved changes" : "saved"
+            }
+          ),
+          /* @__PURE__ */ jsxs7("span", { className: "truncate font-og-mono text-og-xs text-og-fg-muted", children: [
+            fileName,
+            dirty && !readOnly ? " \u2022" : ""
+          ] }),
+          /* @__PURE__ */ jsxs7("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: [
+            saveError && !saveConflict && /* @__PURE__ */ jsx9(
+              "span",
               {
-                className: "absolute size-12 animate-og-spin text-og-accent opacity-70",
-                strokeWidth: 1.25
+                className: "max-w-[220px] truncate text-og-xs text-og-status-failed",
+                title: saveError.message,
+                children: saveError.message
               }
-            )
-          ] }),
-          /* @__PURE__ */ jsx10("span", { className: "text-og-sm", children: "Connecting to the desktop\u2026" })
+            ),
+            !saveError && savedTick && /* @__PURE__ */ jsx9("span", { className: "text-og-xs text-og-status-idle", children: "Saved" }),
+            readOnly ? /* @__PURE__ */ jsx9("span", { className: "text-og-xs uppercase tracking-wide text-og-fg-subtle", children: "Read-only" }) : !saveConflict ? /* @__PURE__ */ jsxs7(
+              "button",
+              {
+                type: "button",
+                onClick: () => void save(),
+                disabled: saving || !dirty,
+                className: cn(
+                  "flex items-center gap-1 rounded-og-sm border border-og-border px-1.5 py-0.5 text-og-xs pointer-coarse:min-h-11",
+                  saving || !dirty ? "cursor-default text-og-fg-subtle opacity-60" : "text-og-fg hover:bg-og-accent-soft"
+                ),
+                title: "Save (\u2318/Ctrl+S)",
+                children: [
+                  saving ? /* @__PURE__ */ jsx9(Loader2Icon, { className: "size-3 animate-spin" }) : /* @__PURE__ */ jsx9(SaveIcon, { className: "size-3" }),
+                  "Save"
+                ]
+              }
+            ) : null
+          ] })
         ] }),
-        showToggle && !externallyControlled && inControl && /* @__PURE__ */ jsx10(
-          InControlBar,
+        saveConflict ? /* @__PURE__ */ jsxs7(
+          "div",
           {
-            shared: capability?.shared ?? false,
-            onRelease: () => setTakeControl(false)
+            className: "flex shrink-0 flex-wrap items-center gap-x-3 gap-y-2 border-b border-og-status-failed/25 bg-og-status-failed/8 px-2 py-2",
+            role: "alert",
+            children: [
+              /* @__PURE__ */ jsxs7("div", { className: "min-w-[12rem] flex-1 text-og-xs text-og-fg-muted", children: [
+                /* @__PURE__ */ jsx9("span", { className: "font-medium text-og-status-failed", children: "File changed on machine." }),
+                " ",
+                "Reloading discards your edits; overwriting replaces the live version."
+              ] }),
+              /* @__PURE__ */ jsxs7("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
+                onReload ? /* @__PURE__ */ jsx9(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      setSaveError(null);
+                      onReload();
+                    },
+                    className: "min-h-8 rounded-og-sm border border-og-border bg-og-surface-1 px-2 text-og-xs font-medium text-og-fg hover:bg-og-surface-2 pointer-coarse:min-h-11",
+                    children: "Reload live"
+                  }
+                ) : null,
+                onOverwrite ? /* @__PURE__ */ jsx9(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => void overwrite(),
+                    disabled: saving,
+                    className: "min-h-8 rounded-og-sm border border-og-status-failed/40 px-2 text-og-xs font-medium text-og-status-failed hover:bg-og-status-failed/10 disabled:opacity-50 pointer-coarse:min-h-11",
+                    children: "Overwrite"
+                  }
+                ) : null
+              ] })
+            ]
           }
-        ),
-        showToggle && !externallyControlled && !inControl && connected && /* @__PURE__ */ jsx10(
-          TakeControlCallToAction,
+        ) : null,
+        /* @__PURE__ */ jsx9("div", { className: "min-h-0 flex-1 overflow-auto", children: failed ? fallback ?? /* @__PURE__ */ jsx9(
+          PlainTextarea,
           {
-            disabled: !serverAllowsControl,
-            disabledReason: !serverAllowsControl ? capability?.client === "frames" ? "View-only \u2014 live control isn't available for this machine yet." : "This deployment streams the desktop read-only." : void 0,
-            onTakeControl: () => setTakeControl(true)
+            value,
+            readOnly,
+            onChange: noteEdit,
+            onSave: () => void save()
           }
-        ),
-        overlay && /* @__PURE__ */ jsx10("div", { className: "absolute inset-0 flex items-center justify-center p-4", children: overlay })
+        ) : Editor ? /* @__PURE__ */ jsx9(
+          Editor,
+          {
+            value,
+            theme: themeType === "light" ? "light" : "dark",
+            editable: !readOnly,
+            readOnly,
+            basicSetup: true,
+            extensions: cmExtensions,
+            height: "100%",
+            className: "og-cm-editor min-h-full text-og-sm",
+            onChange: readOnly ? void 0 : noteEdit
+          }
+        ) : loading ?? /* @__PURE__ */ jsx9(EditorSkeleton, {}) })
       ]
     }
   );
 }
-function TakeControlCallToAction({
-  disabled,
-  disabledReason,
-  onTakeControl
+var editorVars = {
+  "--og-cm-bg": "var(--og-color-bg)",
+  fontFamily: "var(--og-font-mono)"
+};
+function PlainTextarea({
+  value,
+  readOnly,
+  onChange,
+  onSave
 }) {
-  return (
-    // The wrapper spans the surface but is click-through (pointer-events-none); only
-    // the button itself is interactive, so watchers can still see the desktop.
-    /* @__PURE__ */ jsx10("div", { className: "pointer-events-none absolute inset-0 flex items-end justify-center pb-[8%]", children: /* @__PURE__ */ jsxs8(
-      "button",
-      {
-        type: "button",
-        disabled,
-        "aria-label": "Take control of the desktop",
-        title: disabled ? disabledReason : "Take control of the desktop",
-        onClick: onTakeControl,
-        className: cn(
-          "group pointer-events-auto flex items-center gap-3 rounded-og-lg border px-5 py-3",
-          "border-og-border",
-          "bg-og-bg/85 backdrop-blur-md",
-          "shadow-og-lg",
-          "outline-none transition-all duration-150 ease-out",
-          "focus-visible:ring-2 focus-visible:ring-og-accent focus-visible:ring-offset-2 focus-visible:ring-offset-og-bg",
-          disabled ? "cursor-not-allowed opacity-60" : cn(
-            "cursor-pointer opacity-90 hover:-translate-y-0.5 hover:opacity-100",
-            "hover:border-og-accent",
-            "hover:bg-og-accent/10"
-          )
-        ),
-        children: [
-          /* @__PURE__ */ jsx10(
-            "span",
-            {
-              className: cn(
-                "flex size-9 shrink-0 items-center justify-center rounded-full transition-colors",
-                "bg-og-accent",
-                "text-og-accent-fg",
-                disabled ? "" : "group-hover:scale-105"
-              ),
-              children: /* @__PURE__ */ jsx10(MousePointerClickIcon, { className: "size-5", strokeWidth: 2 })
-            }
-          ),
-          /* @__PURE__ */ jsxs8("span", { className: "flex flex-col items-start leading-tight", children: [
-            /* @__PURE__ */ jsx10("span", { className: "text-og-base font-semibold text-og-fg", children: "Take control" }),
-            /* @__PURE__ */ jsx10("span", { className: "text-og-xs text-og-fg-subtle", children: disabled && disabledReason ? disabledReason : "Drive the mouse & keyboard" })
-          ] })
-        ]
-      }
-    ) })
+  return /* @__PURE__ */ jsx9(
+    "textarea",
+    {
+      value,
+      readOnly,
+      spellCheck: false,
+      onChange: (e) => onChange(e.target.value),
+      onKeyDown: (event) => {
+        if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s") {
+          event.preventDefault();
+          onSave();
+        }
+      },
+      "aria-label": "Plain text file editor",
+      className: "h-full w-full resize-none bg-transparent p-2 font-og-mono text-og-sm text-og-fg outline-none"
+    }
   );
 }
-function InControlBar({ shared, onRelease }) {
-  return /* @__PURE__ */ jsxs8("div", { className: "pointer-events-none absolute inset-x-0 top-0 flex items-center justify-between gap-2 p-2", children: [
-    /* @__PURE__ */ jsxs8("span", { className: "pointer-events-auto inline-flex items-center gap-2 rounded-og-sm bg-og-accent px-2.5 py-1 text-og-xs font-medium text-og-accent-fg shadow-og-md", children: [
-      /* @__PURE__ */ jsx10("span", { className: "size-1.5 animate-pulse rounded-full bg-current", "aria-hidden": true }),
-      "You're in control",
-      /* @__PURE__ */ jsx10("span", { className: "opacity-75", children: "\xB7 click Return control (or Ctrl+Alt+Shift)" })
-    ] }),
-    /* @__PURE__ */ jsxs8("div", { className: "pointer-events-auto flex items-center gap-1.5", children: [
-      shared && /* @__PURE__ */ jsx10("span", { className: "rounded-og-sm bg-og-status-failed/85 px-2 py-0.5 text-og-xs text-og-accent-fg", children: "Shared sandbox \u2014 others are watching" }),
+function EditorSkeleton() {
+  return /* @__PURE__ */ jsx9("div", { className: "p-3 text-og-sm text-og-fg-subtle", children: "Loading editor\u2026" });
+}
+
+// src/components/sandbox-files.tsx
+import { FileCode2Icon, FileWarningIcon as FileWarningIcon2, LoaderCircleIcon } from "lucide-react";
+import { useCallback as useCallback20, useEffect as useEffect20, useRef as useRef17, useState as useState17 } from "react";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+function SandboxFiles({
+  files,
+  git,
+  fileSystemAvailable = true,
+  usePierre = true,
+  editable = true,
+  onEditIntent,
+  requestedPath,
+  requestedPathRequestId,
+  requestedPathReady = true,
+  workspaceResting = false,
+  workspaceWaking = false,
+  liveWorkspaceReady = true,
+  onWakeWorkspace,
+  themeType,
+  className
+}) {
+  const [selected, setSelected] = useState17(null);
+  const [editMode, setEditMode] = useState17(false);
+  const [liveRequestedPath, setLiveRequestedPath] = useState17(null);
+  const [viewReloadRevision, setViewReloadRevision] = useState17(0);
+  const pendingRequestRef = useRef17(null);
+  const handledRequestRef = useRef17(null);
+  const requestKey = requestedPath ? requestedPathRequestId ?? requestedPath : null;
+  useEffect20(() => {
+    if (!requestedPath || requestKey === null) {
+      pendingRequestRef.current = null;
+      handledRequestRef.current = null;
+      return;
+    }
+    if (handledRequestRef.current === requestKey) {
+      return;
+    }
+    if (!requestedPathReady) {
+      pendingRequestRef.current = requestKey;
+      return;
+    }
+    handledRequestRef.current = requestKey;
+    pendingRequestRef.current = null;
+    setSelected(requestedPath);
+    setEditMode(false);
+  }, [requestKey, requestedPath, requestedPathReady]);
+  const rootRef = useRef17(null);
+  const [wide, setWide] = useState17(false);
+  useEffect20(() => {
+    const el = rootRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver((entries) => {
+      const w = entries[0]?.contentRect.width ?? 0;
+      setWide(w >= 720);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  const resolvedTheme = useThemeType(themeType);
+  const viewPath = selected;
+  const fileView = useFileView(viewPath, files.readFile, viewReloadRevision);
+  const selectFile = useCallback20((path) => {
+    if (pendingRequestRef.current !== null) {
+      handledRequestRef.current = pendingRequestRef.current;
+      pendingRequestRef.current = null;
+    }
+    setSelected(path);
+    setEditMode(false);
+    setLiveRequestedPath(null);
+    setViewReloadRevision(0);
+  }, []);
+  const canEdit = editable && viewPath !== null && !fileView.loading && fileView.error === null && !fileView.isBinary && !fileView.truncated && fileView.content !== null;
+  const showEditor = canEdit && editMode;
+  const captureFileUnavailable = fileView.error instanceof CapturedFileUnavailableError ? fileView.error : null;
+  const waitingForSelectedFile = liveRequestedPath === viewPath && (!liveWorkspaceReady || files.loading) && captureFileUnavailable !== null;
+  if (!fileSystemAvailable) {
+    return /* @__PURE__ */ jsx10(
+      Notice,
+      {
+        className,
+        icon: /* @__PURE__ */ jsx10(FileWarningIcon2, { className: "size-5", "aria-hidden": true }),
+        title: "Files unavailable",
+        announce: "alert",
+        children: "This sandbox does not expose a file system."
+      }
+    );
+  }
+  if (workspaceResting || workspaceWaking) {
+    return /* @__PURE__ */ jsx10("div", { className: cn("h-full", className), "data-opengeni-workspace-resting": true, children: /* @__PURE__ */ jsxs8(
+      Notice,
+      {
+        icon: workspaceWaking ? /* @__PURE__ */ jsx10(
+          LoaderCircleIcon,
+          {
+            className: "size-5 animate-spin motion-reduce:animate-none",
+            "aria-hidden": true
+          }
+        ) : /* @__PURE__ */ jsx10(FileCode2Icon, { className: "size-5", "aria-hidden": true }),
+        title: workspaceWaking ? "Waking workspace" : "Workspace is resting",
+        announce: "status",
+        children: [
+          /* @__PURE__ */ jsx10("p", { children: workspaceWaking ? "Connecting to the live file system\u2026" : "No captured revision is available yet. Wake the sandbox to browse its current files." }),
+          !workspaceWaking && onWakeWorkspace ? /* @__PURE__ */ jsx10(WakeButton, { onClick: onWakeWorkspace, children: "Open live workspace" }) : null
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs8("div", { ref: rootRef, className: cn("flex h-full min-h-0 min-w-0 flex-col", className), children: [
+    /* @__PURE__ */ jsx10(GitHeader, { git, dirtyCount: git.diff.length }),
+    /* @__PURE__ */ jsxs8("div", { className: cn("flex min-h-0 flex-1", wide ? "flex-row" : "flex-col"), children: [
+      /* @__PURE__ */ jsx10(
+        "div",
+        {
+          className: cn(
+            "flex min-h-0 flex-col",
+            wide ? "w-[280px] shrink-0 border-r border-og-border" : "flex-1"
+          ),
+          children: /* @__PURE__ */ jsx10(
+            FileBrowser,
+            {
+              result: files,
+              selectedPath: selected ?? void 0,
+              onSelectFile: selectFile,
+              editable,
+              emptyState: "This directory is empty",
+              className: "min-w-0 flex-1"
+            }
+          )
+        }
+      ),
       /* @__PURE__ */ jsxs8(
-        "button",
+        "div",
         {
-          type: "button",
-          onClick: onRelease,
-          title: "Return control (or press Ctrl+Alt+Shift)",
           className: cn(
-            "inline-flex items-center gap-1.5 rounded-og-sm border px-2.5 py-1 text-og-xs font-semibold shadow-og-md transition-colors",
-            "border-og-accent bg-og-bg/90 text-og-fg backdrop-blur-sm",
-            "outline-none hover:bg-og-accent hover:text-og-accent-fg focus-visible:ring-2 focus-visible:ring-og-accent"
+            "flex min-h-0 min-w-0 flex-col",
+            wide ? "flex-1" : "flex-[1.4] border-t border-og-border"
           ),
           children: [
-            /* @__PURE__ */ jsx10(MonitorIcon, { className: "size-3.5", strokeWidth: 2, "aria-hidden": true }),
-            "Return control"
+            /* @__PURE__ */ jsxs8("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-og-border bg-og-surface-1 px-2 py-1", children: [
+              /* @__PURE__ */ jsx10(
+                "span",
+                {
+                  "data-opengeni-selected-file": true,
+                  className: "min-w-0 truncate font-og-mono text-og-xs text-og-fg-muted",
+                  children: selected ?? "No file selected"
+                }
+              ),
+              canEdit && /* @__PURE__ */ jsx10(
+                Segmented,
+                {
+                  options: [
+                    { value: "view", label: "View" },
+                    { value: "edit", label: "Edit" }
+                  ],
+                  value: editMode ? "edit" : "view",
+                  onChange: (v) => setEditMode(v === "edit")
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx10("div", { className: "min-h-0 flex-1 overflow-auto", children: viewPath ? showEditor && fileView.content !== null ? /* @__PURE__ */ jsx10(
+              CodeEditor,
+              {
+                path: viewPath,
+                initialContents: fileView.content,
+                themeType: resolvedTheme,
+                onSave: (contents) => files.writeFile(viewPath, contents, { expectedContent: fileView.content }),
+                onOverwrite: (contents) => files.writeFile(viewPath, contents, { force: true }),
+                onReload: () => setViewReloadRevision((revision) => revision + 1),
+                ...onEditIntent ? { onEditIntent } : {},
+                className: "h-full"
+              },
+              viewPath
+            ) : waitingForSelectedFile ? /* @__PURE__ */ jsxs8(
+              Notice,
+              {
+                icon: /* @__PURE__ */ jsx10(
+                  LoaderCircleIcon,
+                  {
+                    className: "size-5 animate-spin motion-reduce:animate-none",
+                    "aria-hidden": true
+                  }
+                ),
+                title: "Waking workspace",
+                announce: "status",
+                children: [
+                  "Opening ",
+                  viewPath,
+                  " when the live file system is ready\u2026"
+                ]
+              }
+            ) : captureFileUnavailable ? /* @__PURE__ */ jsxs8(Notice, { icon: /* @__PURE__ */ jsx10(FileCode2Icon, { className: "size-5", "aria-hidden": true }), title: "On machine", children: [
+              /* @__PURE__ */ jsx10("p", { children: captureFileUnavailable.reason === "too-large" ? "This file is larger than the captured preview limit." : captureFileUnavailable.reason === "content-missing" ? "The captured copy is no longer available." : "This file was indexed, but it was not changed in the captured turn." }),
+              onWakeWorkspace ? /* @__PURE__ */ jsx10(
+                WakeButton,
+                {
+                  onClick: () => {
+                    setLiveRequestedPath(viewPath);
+                    if (liveWorkspaceReady) void files.refresh();
+                    else onWakeWorkspace();
+                  },
+                  children: liveWorkspaceReady ? "Retry live file" : "Open live file"
+                }
+              ) : null
+            ] }) : fileView.error ? /* @__PURE__ */ jsxs8(Notice, { announce: "alert", children: [
+              "Could not open ",
+              viewPath,
+              ": ",
+              fileView.error.message
+            ] }) : fileView.loading ? /* @__PURE__ */ jsxs8(Notice, { announce: "status", children: [
+              "Loading ",
+              viewPath,
+              "\u2026"
+            ] }) : fileView.isBinary ? /* @__PURE__ */ jsxs8(Notice, { children: [
+              viewPath,
+              " is a binary file (",
+              fileView.sizeBytes ?? 0,
+              " bytes)."
+            ] }) : fileView.content !== null ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
+              fileView.truncated && /* @__PURE__ */ jsxs8("div", { className: "border-b border-og-border bg-og-surface-1 px-2 py-1 text-og-xs text-og-status-running", children: [
+                "Large file \u2014 showing a truncated preview (",
+                fileView.sizeBytes ?? 0,
+                " bytes loaded). Editing is disabled to avoid corrupting the file."
+              ] }),
+              usePierre ? /* @__PURE__ */ jsx10(
+                PierreFile,
+                {
+                  path: viewPath,
+                  contents: fileView.content,
+                  themeType: resolvedTheme,
+                  fallback: /* @__PURE__ */ jsx10("pre", { className: "overflow-auto whitespace-pre p-2 font-og-mono text-og-sm text-og-fg", children: fileView.content }),
+                  className: "p-1"
+                }
+              ) : /* @__PURE__ */ jsx10("pre", { className: "overflow-auto whitespace-pre p-2 font-og-mono text-og-sm text-og-fg", children: fileView.content })
+            ] }) : /* @__PURE__ */ jsxs8(Notice, { announce: "status", children: [
+              "Loading ",
+              viewPath,
+              "\u2026"
+            ] }) : (
+              // Nothing selected — the tree shows the whole workspace; pick a file.
+              requestedPath && !requestedPathReady ? /* @__PURE__ */ jsxs8(
+                Notice,
+                {
+                  icon: /* @__PURE__ */ jsx10(
+                    LoaderCircleIcon,
+                    {
+                      className: "size-5 animate-spin motion-reduce:animate-none",
+                      "aria-hidden": true
+                    }
+                  ),
+                  title: "Waking sandbox",
+                  announce: "status",
+                  children: [
+                    "Opening ",
+                    requestedPath,
+                    " when the live workspace is ready\u2026"
+                  ]
+                }
+              ) : /* @__PURE__ */ jsx10(Notice, { icon: /* @__PURE__ */ jsx10(FileCode2Icon, { className: "size-5", "aria-hidden": true }), title: "Choose a file", children: "Select a file in the tree to preview it." })
+            ) })
           ]
         }
       )
     ] })
   ] });
 }
-function unavailableCopy(reason) {
-  switch (reason) {
-    case "backend_unsupported":
-      return "This sandbox backend cannot stream a desktop.";
-    case "tier_headless":
-      return "This deployment is headless \u2014 terminal, files, and diff only.";
-    case "os_unsupported":
-      return "The sandbox OS does not support a desktop stream.";
-    case "not_provisioned":
-      return "This sandbox doesn't have a desktop yet.";
-    case "disabled_by_policy":
-      return "Desktop streaming is disabled on this deployment.";
-    case "lease_cold":
-      return "Waiting for the sandbox to start\u2026";
-    default:
-      return "The desktop isn\u2019t available for this sandbox.";
-  }
-}
-function WarmingNotice({ onRetry }) {
-  return /* @__PURE__ */ jsxs8("div", { className: "flex max-w-sm flex-col items-center gap-3 rounded-og-lg border border-og-border bg-og-bg/90 p-5 text-center text-og-base text-og-fg backdrop-blur-sm", children: [
-    /* @__PURE__ */ jsx10(LoaderCircleIcon2, { className: "size-7 animate-og-spin text-og-accent", strokeWidth: 1.5 }),
-    /* @__PURE__ */ jsxs8("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx10("div", { className: "font-medium", children: "Warming the sandbox\u2026" }),
-      /* @__PURE__ */ jsx10("p", { className: "text-og-sm text-og-fg-subtle", children: "Spinning up the desktop \u2014 this takes a few seconds." })
-    ] }),
-    onRetry && /* @__PURE__ */ jsx10(
-      "button",
-      {
-        type: "button",
-        onClick: onRetry,
-        className: "rounded-og-sm border border-og-border px-3 py-1.5 text-og-sm text-og-fg-muted transition-colors hover:text-og-fg pointer-coarse:min-h-11",
-        children: "Taking too long? Retry"
-      }
-    )
-  ] });
+function WakeButton({ children, onClick }) {
+  return /* @__PURE__ */ jsx10(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: "mt-1 inline-flex min-h-11 items-center justify-center rounded-og-md bg-og-accent-deep px-3 py-2 text-og-sm font-medium text-og-accent-fg shadow-sm transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent focus-visible:ring-offset-2 focus-visible:ring-offset-og-bg",
+      children
+    }
+  );
 }
-function DefaultConsentGate({ shared, onAccept }) {
-  return /* @__PURE__ */ jsxs8("div", { className: "max-w-sm rounded-og-lg border border-og-border bg-og-bg p-4 text-center text-og-base text-og-fg", children: [
-    /* @__PURE__ */ jsx10("div", { className: "mb-1 font-medium", children: "Watch the live desktop?" }),
-    /* @__PURE__ */ jsxs8("p", { className: "mb-3 text-og-sm text-og-fg-subtle", children: [
-      "The desktop pixel stream is ",
-      /* @__PURE__ */ jsx10("strong", { children: "un-redacted" }),
-      " \u2014 it can show secrets the agent prints on screen.",
-      shared ? " This sandbox is shared: you'll also see other sessions' agents on the same screen." : ""
-    ] }),
+function GitHeader({ git, dirtyCount }) {
+  const dirty = dirtyCount > 0;
+  return /* @__PURE__ */ jsxs8("div", { className: "flex shrink-0 items-center gap-2 border-b border-og-border bg-og-surface-1 px-2 py-1 text-og-sm", children: [
     /* @__PURE__ */ jsx10(
-      "button",
+      "span",
       {
-        type: "button",
-        onClick: onAccept,
-        className: "rounded-og-sm bg-og-accent px-3 py-1.5 text-og-sm font-medium text-og-accent-fg pointer-coarse:min-h-11",
-        children: "I understand \u2014 show the desktop"
+        "aria-hidden": "true",
+        className: cn(
+          "size-2 shrink-0 rounded-full",
+          dirty ? "bg-og-status-running" : "bg-og-status-idle"
+        )
       }
-    )
-  ] });
-}
-function defaultNotice(title, body, onRetry) {
-  return /* @__PURE__ */ jsxs8("div", { className: "max-w-sm rounded-og-lg border border-og-border bg-og-bg p-4 text-center text-og-base text-og-fg", children: [
-    /* @__PURE__ */ jsxs8("div", { className: "mb-1 flex items-center justify-center gap-1.5 font-medium", children: [
-      onRetry && /* @__PURE__ */ jsx10(WifiOffIcon, { className: "size-4 opacity-70", strokeWidth: 1.75 }),
-      title
+    ),
+    /* @__PURE__ */ jsx10("span", { className: "sr-only", children: dirty ? `Working tree has ${dirtyCount} changed files` : "Working tree clean" }),
+    /* @__PURE__ */ jsx10("span", { className: "truncate font-og-mono text-og-fg", children: git.repoCount > 1 ? `${git.repoCount} repositories` : git.branch ?? (git.isRepo ? "(detached)" : "no repo") }),
+    (git.ahead > 0 || git.behind > 0) && /* @__PURE__ */ jsxs8("span", { className: "flex shrink-0 items-center gap-1.5 text-og-xs text-og-fg-subtle", children: [
+      git.ahead > 0 && /* @__PURE__ */ jsxs8("span", { children: [
+        "\u2191",
+        git.ahead
+      ] }),
+      git.behind > 0 && /* @__PURE__ */ jsxs8("span", { children: [
+        "\u2193",
+        git.behind
+      ] })
     ] }),
-    /* @__PURE__ */ jsx10("p", { className: "text-og-sm text-og-fg-subtle", children: body }),
-    onRetry && /* @__PURE__ */ jsx10(
-      "button",
+    dirty && /* @__PURE__ */ jsxs8(
+      "span",
       {
-        type: "button",
-        onClick: onRetry,
-        className: "mt-3 rounded-og-sm border border-og-border px-3 py-1.5 text-og-sm transition-colors hover:border-og-accent pointer-coarse:min-h-11",
-        children: "Reconnect"
+        "aria-hidden": "true",
+        "data-contrast-audited": true,
+        className: "ml-auto shrink-0 text-og-xs text-og-fg-subtle",
+        children: [
+          dirtyCount,
+          " changed"
+        ]
       }
     )
   ] });
 }
-
-// src/components/workspace-dock.tsx
-import {
-  useCallback as useCallback19,
-  useEffect as useEffect20,
-  useId as useId3,
-  useLayoutEffect as useLayoutEffect2,
-  useRef as useRef17,
-  useState as useState17
-} from "react";
-import {
-  ChevronsLeftRightIcon,
-  Maximize2Icon,
-  Minimize2Icon,
-  PanelRightCloseIcon,
-  XIcon as XIcon2
-} from "lucide-react";
-import {
-  Group,
-  Panel,
-  Separator,
-  useDefaultLayout,
-  usePanelRef
-} from "react-resizable-panels";
-import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
-var SERVER_LAYOUT_STORAGE = {
-  getItem: () => null,
-  setItem: () => {
-  }
-};
-function getLayoutStorage() {
-  if (typeof window === "undefined") return SERVER_LAYOUT_STORAGE;
-  try {
-    return window.localStorage;
-  } catch {
-    return SERVER_LAYOUT_STORAGE;
-  }
+function Segmented({
+  options,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx10("div", { className: "flex flex-wrap items-center rounded-og-sm border border-og-border p-0.5", children: options.map((opt) => /* @__PURE__ */ jsx10(
+    "button",
+    {
+      type: "button",
+      onClick: () => onChange(opt.value),
+      className: cn(
+        "min-h-7 rounded-og-xs px-1.5 py-0.5 text-og-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent max-[1023px]:min-h-11 max-[1023px]:min-w-11 pointer-coarse:min-h-11 pointer-coarse:min-w-11",
+        opt.value === value ? "bg-og-accent-soft text-og-fg" : "text-og-fg-subtle hover:text-og-fg"
+      ),
+      children: opt.label
+    },
+    opt.value
+  )) });
 }
-var useDockLayoutEffect = typeof window === "undefined" ? useEffect20 : useLayoutEffect2;
-var DOCK_OVERLAY_BREAKPOINT = 1024;
-function useIsNarrow(maxWidth) {
-  const [narrow, setNarrow] = useState17(false);
-  useDockLayoutEffect(() => {
-    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+function useFileView(path, readFile, reloadRevision = 0) {
+  const [state, setState] = useState17({
+    content: null,
+    isBinary: false,
+    truncated: false,
+    sizeBytes: null,
+    loading: false,
+    error: null
+  });
+  useEffect20(() => {
+    if (!path) {
+      setState({
+        content: null,
+        isBinary: false,
+        truncated: false,
+        sizeBytes: null,
+        loading: false,
+        error: null
+      });
       return;
     }
-    const mql = window.matchMedia(`(max-width: ${maxWidth - 1}px)`);
-    const update = () => setNarrow(mql.matches);
-    update();
-    if (typeof mql.addEventListener === "function") {
-      mql.addEventListener("change", update);
-      return () => mql.removeEventListener("change", update);
+    let cancelled = false;
+    const abort = new AbortController();
+    setState({
+      content: null,
+      isBinary: false,
+      truncated: false,
+      sizeBytes: null,
+      loading: true,
+      error: null
+    });
+    void readFile(path, { signal: abort.signal }).then((res) => {
+      if (cancelled) return;
+      const content = res.isBinary ? null : res.encoding === "base64" ? decodeBase64Utf8(res.content) : res.content;
+      setState({
+        content,
+        isBinary: res.isBinary,
+        truncated: res.truncated,
+        sizeBytes: res.sizeBytes,
+        loading: false,
+        error: null
+      });
+    }).catch((cause) => {
+      if (cancelled) return;
+      setState({
+        content: null,
+        isBinary: false,
+        truncated: false,
+        sizeBytes: null,
+        loading: false,
+        error: cause instanceof Error ? cause : new Error(String(cause))
+      });
+    });
+    return () => {
+      cancelled = true;
+      abort.abort();
+    };
+  }, [path, readFile, reloadRevision]);
+  return state;
+}
+function decodeBase64Utf8(b64) {
+  try {
+    if (typeof atob === "function") {
+      const binary = atob(b64);
+      const bytes = new Uint8Array(binary.length);
+      for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+      return new TextDecoder().decode(bytes);
     }
-    mql.addListener(update);
-    return () => mql.removeListener(update);
-  }, [maxWidth]);
-  return narrow;
+  } catch {
+  }
+  return b64;
 }
-function WorkspaceDock({
-  primary,
-  tabs,
-  activeTab,
-  onActiveTabChange,
-  collapsed: collapsedProp,
-  onCollapsedChange,
-  headerAccessory,
-  mobileLeadingControl,
-  autoSaveId = "og.session.dock",
-  defaultSize = 34,
-  minSize = 22,
-  maxSize = 70,
-  className
+function Notice({
+  children,
+  className,
+  icon,
+  title,
+  announce
 }) {
-  const narrow = useIsNarrow(DOCK_OVERLAY_BREAKPOINT);
-  const rootRef = useRef17(null);
-  const reopenRef = useRef17(null);
-  const returnFocusRef = useRef17(null);
-  const initialNarrowFocusRef = useRef17(false);
-  const dockPanelRef = usePanelRef();
-  const [internalCollapsed, setInternalCollapsed] = useState17(false);
-  const [maximized, setMaximized] = useState17(false);
-  const [internalTab, setInternalTab] = useState17(tabs[0]?.id ?? "");
-  const collapsed = collapsedProp ?? internalCollapsed;
-  const hostControlled = collapsedProp !== void 0;
-  const previousCollapsedRef = useRef17(collapsed);
-  const { defaultLayout, onLayoutChanged } = useDefaultLayout({
-    panelIds: ["primary", "dock"],
-    storage: getLayoutStorage(),
-    id: autoSaveId
-  });
-  const requestedTab = activeTab ?? internalTab;
-  const tabIds = tabs.map((tab) => tab.id);
-  const firstTabId = tabs[0]?.id ?? "";
-  const requestedTabIsValid = tabIds.includes(requestedTab);
-  const current = requestedTabIsValid ? requestedTab : firstTabId;
-  const setTab = useCallback19(
-    (id) => {
-      setInternalTab(id);
-      onActiveTabChange?.(id);
-    },
-    [onActiveTabChange]
-  );
-  const setCollapsed = useCallback19(
-    (next) => {
-      setInternalCollapsed((previous) => previous === next ? previous : next);
-      onCollapsedChange?.(next);
-    },
-    [onCollapsedChange]
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      role: announce,
+      "aria-atomic": announce ? "true" : void 0,
+      "aria-live": announce === "alert" ? "assertive" : announce === "status" ? "polite" : void 0,
+      className: cn(
+        "flex h-full items-center justify-center p-4 text-center text-og-sm text-og-fg-subtle",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs8("div", { className: "flex max-w-sm flex-col items-center gap-2.5", children: [
+        icon ? /* @__PURE__ */ jsx10("span", { className: "grid size-10 place-items-center rounded-og-lg border border-og-border bg-og-surface-1 text-og-fg-muted shadow-sm", children: icon }) : null,
+        title ? /* @__PURE__ */ jsx10("p", { className: "font-medium text-og-fg", children: title }) : null,
+        /* @__PURE__ */ jsx10("div", { className: "leading-5", children })
+      ] })
+    }
   );
-  useDockLayoutEffect(() => {
-    if (collapsedProp === void 0) {
-      return;
-    }
-    if (collapsedProp) {
-      dockPanelRef.current?.collapse();
-      setMaximized(false);
-    } else {
-      dockPanelRef.current?.expand();
-    }
-  }, [collapsedProp, dockPanelRef]);
-  useEffect20(() => {
-    const previous = previousCollapsedRef.current;
-    previousCollapsedRef.current = collapsed;
-    if (previous === collapsed) return;
-    if (!collapsed) {
-      const active = document.activeElement;
-      const workspaceSurface = rootRef.current?.querySelector(
-        narrow ? '[role="dialog"]' : "[data-workspace-surface]"
-      );
-      if (active instanceof HTMLElement && !workspaceSurface?.contains(active)) {
-        returnFocusRef.current = active;
-      }
-      if (narrow) {
-        const frame2 = requestAnimationFrame(() => {
-          rootRef.current?.querySelector('[role="dialog"] [role="tab"][aria-selected="true"]')?.focus();
-        });
-        return () => cancelAnimationFrame(frame2);
-      }
-      return;
-    }
-    const frame = requestAnimationFrame(() => {
-      if (!hostControlled) {
-        reopenRef.current?.focus();
-        return;
-      }
-      const target = returnFocusRef.current;
-      if (target?.isConnected) target.focus();
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [collapsed, hostControlled, narrow]);
-  useEffect20(() => {
-    if (!narrow || collapsed || initialNarrowFocusRef.current) return;
-    initialNarrowFocusRef.current = true;
-    const active = document.activeElement;
-    const workspaceSurface = rootRef.current?.querySelector('[role="dialog"]');
-    if (active instanceof HTMLElement && !workspaceSurface?.contains(active)) {
-      returnFocusRef.current = active;
-    }
-    const frame = requestAnimationFrame(() => {
-      workspaceSurface?.querySelector('[role="tab"][aria-selected="true"]')?.focus();
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [collapsed, narrow]);
-  useEffect20(() => {
-    if (firstTabId && !requestedTabIsValid) {
-      setTab(firstTabId);
-    }
-  }, [firstTabId, requestedTabIsValid, setTab]);
-  const collapse = useCallback19(() => {
-    dockPanelRef.current?.collapse();
-    setCollapsed(true);
-  }, [dockPanelRef, setCollapsed]);
-  const expand = useCallback19(() => {
-    dockPanelRef.current?.expand();
-    setCollapsed(false);
-  }, [dockPanelRef, setCollapsed]);
-  useEffect20(() => {
-    const overlayOpen = maximized || narrow && !collapsed;
-    if (!overlayOpen) return;
+}
+
+// src/components/desktop-viewer.tsx
+import { LoaderCircleIcon as LoaderCircleIcon2, MonitorIcon, MousePointerClickIcon, WifiOffIcon } from "lucide-react";
+import { useEffect as useEffect21, useRef as useRef18, useState as useState18 } from "react";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var DESKTOP_MEDIA_BACKGROUND = "#000";
+function isHardUnavailable(reason) {
+  switch (reason) {
+    case "backend_unsupported":
+    case "os_unsupported":
+    case "not_provisioned":
+    case "disabled_by_policy":
+    case "tier_headless":
+      return true;
+    default:
+      return false;
+  }
+}
+function DesktopViewer({
+  capability,
+  interactive,
+  showControlToggle = true,
+  scaleViewport,
+  rfbFactory,
+  webSocketFactory,
+  renderConsentGate,
+  onAcknowledge,
+  watching,
+  onWarm,
+  renderUnavailable,
+  renderWarming,
+  renderViewerCap,
+  viewerCapReached,
+  connectTimeoutMs = 13e3,
+  className
+}) {
+  const containerRef = useRef18(null);
+  const [consented, setConsented] = useState18(false);
+  const [takeControl, setTakeControl] = useState18(interactive ?? false);
+  const externallyControlled = interactive !== void 0;
+  const serverAllowsControl = capability?.mode !== "read-only";
+  const wantControl = externallyControlled ? interactive : takeControl;
+  const inControl = Boolean(wantControl) && serverAllowsControl;
+  const isWatching = watching ?? consented;
+  const transportNull = !capability || capability.transport === null;
+  const reason = capability?.reason ?? null;
+  const needsAck = capability?.requiresAcknowledgment === true && capability.acknowledged !== true && !consented;
+  const noLiveAddress = Boolean(capability) && !transportNull && !capability.url;
+  const coldWarmable = transportNull && reason === "lease_cold" || !transportNull && noLiveAddress;
+  const hardUnavailable = transportNull && isHardUnavailable(reason);
+  const accept = () => {
+    setConsented(true);
+    onAcknowledge?.();
+  };
+  useEffect21(() => {
+    if (!inControl || externallyControlled) return;
     const onKey = (event) => {
-      if (event.key === "Escape") {
-        if (maximized) setMaximized(false);
-        else collapse();
-        return;
-      }
-      if (event.key !== "Tab") return;
-      const surface = rootRef.current?.querySelector(
-        narrow ? '[role="dialog"]' : "[data-workspace-surface]"
-      );
-      if (!surface) return;
-      const focusable = Array.from(surface.querySelectorAll("*")).filter(
-        (element) => element.tabIndex >= 0 && !element.hasAttribute("disabled") && element.getClientRects().length > 0 && getComputedStyle(element).visibility !== "hidden"
-      );
-      const first = focusable[0];
-      const last = focusable.at(-1);
-      const active = document.activeElement;
-      if (!first || !last) {
-        event.preventDefault();
-        surface.focus();
-        return;
-      }
-      if (!surface.contains(active)) {
-        event.preventDefault();
-        (event.shiftKey ? last : first).focus();
-        return;
-      }
-      if (event.shiftKey && active === first || !event.shiftKey && active === last) {
+      if (event.ctrlKey && event.altKey && event.shiftKey && (event.key === "Control" || event.key === "Alt" || event.key === "Shift")) {
         event.preventDefault();
-        (event.shiftKey ? last : first).focus();
-        return;
+        setTakeControl(false);
       }
-      requestAnimationFrame(() => {
-        const next = document.activeElement;
-        if (!surface.contains(next)) (event.shiftKey ? last : first).focus();
-      });
     };
     window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [maximized, narrow, collapsed, collapse]);
-  if (narrow) {
-    return /* @__PURE__ */ jsxs9("div", { ref: rootRef, className: cn("relative flex h-full min-h-0 w-full min-w-0", className), children: [
-      /* @__PURE__ */ jsx11(
-        "div",
-        {
-          "data-workspace-primary": true,
-          "aria-hidden": !collapsed ? true : void 0,
-          className: "min-h-0 min-w-0 flex-1",
-          inert: !collapsed ? true : void 0,
-          children: primary
-        }
-      ),
-      /* @__PURE__ */ jsx11(
-        "div",
-        {
-          "data-workspace-surface": true,
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-label": "Workspace",
-          className: "fixed inset-0 z-40 flex flex-col bg-og-bg",
-          hidden: collapsed,
-          style: {
-            paddingTop: "env(safe-area-inset-top)",
-            paddingBottom: "env(safe-area-inset-bottom)"
-          },
-          children: /* @__PURE__ */ jsx11(
-            DockChrome,
-            {
-              tabs,
-              current,
-              onTab: setTab,
-              leading: mobileLeadingControl,
-              accessory: headerAccessory,
-              controls: /* @__PURE__ */ jsx11(ChromeButton, { onClick: collapse, title: "Close workspace", label: "Close workspace", children: /* @__PURE__ */ jsx11(XIcon2, { className: "size-4" }) })
-            }
-          )
-        }
-      ),
-      collapsed && !hostControlled ? /* @__PURE__ */ jsx11(
-        "button",
-        {
-          ref: reopenRef,
-          type: "button",
-          onClick: expand,
-          title: "Open workspace",
-          "aria-label": "Open workspace",
-          className: "absolute right-3 top-3 z-30 inline-flex size-11 items-center justify-center rounded-og-md border border-og-border bg-og-surface-1 text-og-fg-muted shadow-lg transition-colors hover:border-og-border-strong hover:text-og-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent",
-          style: { marginTop: "env(safe-area-inset-top)" },
-          children: /* @__PURE__ */ jsx11(ChevronsLeftRightIcon, { className: "size-4", "aria-hidden": true })
-        }
-      ) : null
-    ] });
+    return () => {
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [inControl, externallyControlled]);
+  const connectCapability = !transportNull && !needsAck && !viewerCapReached ? capability : null;
+  const stream = useDesktopStream({
+    capability: connectCapability,
+    containerRef,
+    interactive: inControl,
+    ...scaleViewport !== void 0 ? { scaleViewport } : {},
+    ...rfbFactory ? { rfbFactory } : {},
+    ...webSocketFactory ? { webSocketFactory } : {}
+  });
+  const connected = stream.state === "connected";
+  const hasLiveUrl = Boolean(connectCapability?.url);
+  const streamStateRef = useRef18(stream.state);
+  streamStateRef.current = stream.state;
+  const warmKeyRef = useRef18(null);
+  useEffect21(() => {
+    if (!isWatching || !coldWarmable || needsAck || viewerCapReached) {
+      if (!coldWarmable) warmKeyRef.current = null;
+      return;
+    }
+    const warm = onWarm ?? onAcknowledge;
+    if (!warm) return;
+    const key = `${capability?.reason ?? ""}:${capability?.url ?? ""}:${capability?.expiresAt ?? ""}`;
+    if (warmKeyRef.current === key) return;
+    warmKeyRef.current = key;
+    warm();
+  }, [isWatching, coldWarmable, needsAck, viewerCapReached, capability, onWarm, onAcknowledge]);
+  useEffect21(() => {
+    if (!hasLiveUrl || typeof document === "undefined") return;
+    const maybeReattach = () => {
+      if (document.visibilityState !== "visible") return;
+      if (streamStateRef.current === "idle") stream.reconnect();
+    };
+    document.addEventListener("visibilitychange", maybeReattach);
+    return () => document.removeEventListener("visibilitychange", maybeReattach);
+  }, [hasLiveUrl, connectCapability?.url]);
+  const [connectTimedOut, setConnectTimedOut] = useState18(false);
+  const [reconnectNonce, setReconnectNonce] = useState18(0);
+  useEffect21(() => {
+    setConnectTimedOut(false);
+    if (!hasLiveUrl || connected || stream.error || connectTimeoutMs <= 0) return;
+    const timer = setTimeout(() => setConnectTimedOut(true), connectTimeoutMs);
+    return () => clearTimeout(timer);
+  }, [
+    hasLiveUrl,
+    connected,
+    connectTimeoutMs,
+    connectCapability?.url,
+    stream.error,
+    reconnectNonce
+  ]);
+  const reconnect = () => {
+    setConnectTimedOut(false);
+    setReconnectNonce((n) => n + 1);
+    stream.reconnect();
+  };
+  let uiState;
+  if (viewerCapReached) uiState = "viewer_cap";
+  else if (hardUnavailable) uiState = "unavailable";
+  else if (needsAck && !isWatching) uiState = "consent";
+  else if (coldWarmable) uiState = "warming";
+  else if (connected) uiState = "connected";
+  else if (stream.error) uiState = "error";
+  else if (connectTimedOut) uiState = "connect_failed";
+  else uiState = "connecting";
+  const overlayShown = uiState !== "connected" && uiState !== "connecting";
+  const showToggle = showControlToggle && !overlayShown;
+  let overlay = null;
+  switch (uiState) {
+    case "viewer_cap":
+      overlay = renderViewerCap?.() ?? defaultNotice(
+        "Too many viewers",
+        "This session has reached its live-viewer limit. Try again shortly."
+      );
+      break;
+    case "unavailable":
+      overlay = renderUnavailable?.(reason) ?? defaultNotice("Desktop unavailable", unavailableCopy(reason));
+      break;
+    case "consent":
+      overlay = renderConsentGate ? renderConsentGate(accept, capability?.shared ?? false) : /* @__PURE__ */ jsx11(DefaultConsentGate, { shared: capability?.shared ?? false, onAccept: accept });
+      break;
+    case "warming":
+      overlay = renderWarming?.() ?? /* @__PURE__ */ jsx11(WarmingNotice, {});
+      break;
+    case "connect_failed":
+      overlay = defaultNotice(
+        "Couldn\u2019t connect",
+        "The desktop is warm but the live stream didn\u2019t come up. This usually clears on a retry.",
+        reconnect
+      );
+      break;
+    case "error":
+      overlay = defaultNotice(
+        "Desktop disconnected",
+        stream.error?.message ?? "The stream dropped.",
+        reconnect
+      );
+      break;
+    case "connecting":
+    case "connected":
+      overlay = null;
+      break;
   }
-  const dockChrome = /* @__PURE__ */ jsx11(
-    DockChrome,
+  return /* @__PURE__ */ jsxs9(
+    "div",
     {
-      tabs,
-      current,
-      onTab: setTab,
-      accessory: headerAccessory,
-      controls: /* @__PURE__ */ jsxs9(Fragment4, { children: [
+      className: cn(
+        "relative h-full w-full overflow-hidden",
+        inControl && "ring-2 ring-inset ring-og-accent",
+        className
+      ),
+      style: { backgroundColor: DESKTOP_MEDIA_BACKGROUND },
+      "data-opengeni-desktop": true,
+      "data-state": stream.state,
+      "data-ui-state": uiState,
+      "data-in-control": inControl ? "true" : void 0,
+      children: [
         /* @__PURE__ */ jsx11(
-          ChromeButton,
+          "div",
           {
-            onClick: () => setMaximized((m) => !m),
-            title: maximized ? "Restore (Esc)" : "Maximize",
-            label: maximized ? "Restore dock" : "Maximize dock",
-            children: maximized ? /* @__PURE__ */ jsx11(Minimize2Icon, { className: "size-3.5" }) : /* @__PURE__ */ jsx11(Maximize2Icon, { className: "size-3.5" })
+            ref: containerRef,
+            className: "absolute inset-0 overflow-hidden",
+            "data-opengeni-desktop-canvas": true,
+            "data-state": stream.state
           }
         ),
-        hostControlled ? null : /* @__PURE__ */ jsx11(ChromeButton, { onClick: collapse, title: "Collapse", label: "Collapse dock", children: /* @__PURE__ */ jsx11(PanelRightCloseIcon, { className: "size-3.5" }) })
-      ] })
+        uiState === "connecting" && /* @__PURE__ */ jsxs9("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-3 text-og-fg-subtle", children: [
+          /* @__PURE__ */ jsxs9("span", { className: "relative flex items-center justify-center", children: [
+            /* @__PURE__ */ jsx11(MonitorIcon, { className: "size-8 opacity-30", strokeWidth: 1.5 }),
+            /* @__PURE__ */ jsx11(
+              LoaderCircleIcon2,
+              {
+                className: "absolute size-12 animate-og-spin text-og-accent opacity-70",
+                strokeWidth: 1.25
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx11("span", { className: "text-og-sm", children: "Connecting to the desktop\u2026" })
+        ] }),
+        showToggle && !externallyControlled && inControl && /* @__PURE__ */ jsx11(
+          InControlBar,
+          {
+            shared: capability?.shared ?? false,
+            onRelease: () => setTakeControl(false)
+          }
+        ),
+        showToggle && !externallyControlled && !inControl && connected && /* @__PURE__ */ jsx11(
+          TakeControlCallToAction,
+          {
+            disabled: !serverAllowsControl,
+            disabledReason: !serverAllowsControl ? capability?.client === "frames" ? "View-only \u2014 live control isn't available for this machine yet." : "This deployment streams the desktop read-only." : void 0,
+            onTakeControl: () => setTakeControl(true)
+          }
+        ),
+        overlay && /* @__PURE__ */ jsx11("div", { className: "absolute inset-0 flex items-center justify-center p-4", children: overlay })
+      ]
     }
   );
-  return /* @__PURE__ */ jsxs9("div", { ref: rootRef, className: cn("relative flex h-full min-h-0 w-full min-w-0", className), children: [
-    /* @__PURE__ */ jsxs9(
-      Group,
+}
+function TakeControlCallToAction({
+  disabled,
+  disabledReason,
+  onTakeControl
+}) {
+  return (
+    // The wrapper spans the surface but is click-through (pointer-events-none); only
+    // the button itself is interactive, so watchers can still see the desktop.
+    /* @__PURE__ */ jsx11("div", { className: "pointer-events-none absolute inset-0 flex items-end justify-center pb-[8%]", children: /* @__PURE__ */ jsxs9(
+      "button",
       {
-        orientation: "horizontal",
-        className: "min-h-0 flex-1",
-        ...defaultLayout ? { defaultLayout } : {},
-        onLayoutChanged,
+        type: "button",
+        disabled,
+        "aria-label": "Take control of the desktop",
+        title: disabled ? disabledReason : "Take control of the desktop",
+        onClick: onTakeControl,
+        className: cn(
+          "group pointer-events-auto flex items-center gap-3 rounded-og-lg border px-5 py-3",
+          "border-og-border",
+          "bg-og-bg/85 backdrop-blur-md",
+          "shadow-og-lg",
+          "outline-none transition-all duration-150 ease-out",
+          "focus-visible:ring-2 focus-visible:ring-og-accent focus-visible:ring-offset-2 focus-visible:ring-offset-og-bg",
+          disabled ? "cursor-not-allowed opacity-60" : cn(
+            "cursor-pointer opacity-90 hover:-translate-y-0.5 hover:opacity-100",
+            "hover:border-og-accent",
+            "hover:bg-og-accent/10"
+          )
+        ),
         children: [
-          /* @__PURE__ */ jsx11(Panel, { id: "primary", minSize: "30%", className: "min-h-0 min-w-0", children: /* @__PURE__ */ jsx11(
-            "div",
-            {
-              "data-workspace-primary": true,
-              "aria-hidden": maximized ? true : void 0,
-              className: "h-full min-h-0 min-w-0",
-              inert: maximized ? true : void 0,
-              children: primary
-            }
-          ) }),
-          !collapsed && /* @__PURE__ */ jsx11(Separator, { className: "group relative z-10 w-1.5 shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent max-[1023px]:-mx-[19px] max-[1023px]:w-11 pointer-coarse:-mx-[19px] pointer-coarse:w-11", children: /* @__PURE__ */ jsx11("span", { className: "absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-og-border transition-colors group-hover:bg-og-accent group-focus-visible:bg-og-accent group-data-[separator-state=dragging]:bg-og-accent" }) }),
           /* @__PURE__ */ jsx11(
-            Panel,
+            "span",
             {
-              id: "dock",
-              panelRef: dockPanelRef,
-              collapsible: true,
-              collapsedSize: "0%",
-              defaultSize: `${defaultSize}%`,
-              minSize: `${minSize}%`,
-              maxSize: `${maxSize}%`,
-              onResize: (size, _id, previousSize) => {
-                const isCollapsed = size.asPercentage <= 1;
-                const canInferCollapse = collapsedProp === void 0 || previousSize !== void 0;
-                if (canInferCollapse && isCollapsed !== collapsed) {
-                  setCollapsed(isCollapsed);
-                }
-              },
-              className: "min-h-0 min-w-0",
-              children: /* @__PURE__ */ jsx11(
-                "div",
-                {
-                  "data-workspace-surface": true,
-                  role: maximized ? "dialog" : void 0,
-                  "aria-modal": maximized ? true : void 0,
-                  "aria-label": maximized ? "Workspace" : void 0,
-                  "aria-hidden": collapsed ? true : void 0,
-                  className: cn(
-                    "flex h-full min-h-0 min-w-0 flex-col bg-og-bg",
-                    maximized ? "fixed inset-0 z-40" : "border-l border-og-border",
-                    collapsed && "invisible pointer-events-none"
-                  ),
-                  children: dockChrome
-                }
-              )
+              className: cn(
+                "flex size-9 shrink-0 items-center justify-center rounded-full transition-colors",
+                "bg-og-accent",
+                "text-og-accent-fg",
+                disabled ? "" : "group-hover:scale-105"
+              ),
+              children: /* @__PURE__ */ jsx11(MousePointerClickIcon, { className: "size-5", strokeWidth: 2 })
             }
-          )
+          ),
+          /* @__PURE__ */ jsxs9("span", { className: "flex flex-col items-start leading-tight", children: [
+            /* @__PURE__ */ jsx11("span", { className: "text-og-base font-semibold text-og-fg", children: "Take control" }),
+            /* @__PURE__ */ jsx11("span", { className: "text-og-xs text-og-fg-subtle", children: disabled && disabledReason ? disabledReason : "Drive the mouse & keyboard" })
+          ] })
         ]
       }
-    ),
-    collapsed && !maximized && !hostControlled && /* @__PURE__ */ jsx11(
-      "button",
-      {
-        ref: reopenRef,
-        type: "button",
-        onClick: expand,
-        title: "Open workspace",
-        className: "absolute inset-y-0 right-0 flex w-6 shrink-0 items-center justify-center border-l border-og-border bg-og-surface-1 text-og-fg-subtle hover:text-og-fg",
-        children: /* @__PURE__ */ jsx11(ChevronsLeftRightIcon, { className: "size-3.5" })
-      }
-    )
-  ] });
-}
-function ChromeButton({
-  onClick,
-  title,
-  label,
-  children
-}) {
-  return /* @__PURE__ */ jsx11(
-    "button",
-    {
-      type: "button",
-      onClick,
-      title,
-      "aria-label": label,
-      className: "inline-flex size-7 items-center justify-center rounded-og-sm p-1 transition-colors hover:bg-og-surface-2 hover:text-og-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent max-[1023px]:size-11 pointer-coarse:size-11",
-      children
-    }
+    ) })
   );
 }
-function DockChrome({
-  tabs,
-  current,
-  onTab,
-  leading,
-  accessory,
-  controls
-}) {
-  const active = tabs.find((t) => t.id === current) ?? tabs[0];
-  const tabsetId = useId3();
-  const tabRefs = useRef17([]);
-  const tabListRef = useRef17(null);
-  const [visitedTabs, setVisitedTabs] = useState17(() => /* @__PURE__ */ new Set());
-  const [tabOverflow, setTabOverflow] = useState17({ start: false, end: false });
-  const activeId = active?.id ?? "";
-  const activeTabIndex = tabs.findIndex((tab) => tab.id === activeId);
-  const keepActiveTabVisible = useCallback19(() => {
-    const selected = activeTabIndex >= 0 ? tabRefs.current[activeTabIndex] : null;
-    selected?.scrollIntoView({ block: "nearest", inline: "nearest" });
-  }, [activeTabIndex]);
-  useEffect20(() => {
-    if (!activeId) return;
-    setVisitedTabs((previous) => {
-      if (previous.has(activeId)) return previous;
-      const next = new Set(previous);
-      next.add(activeId);
-      return next;
-    });
-  }, [activeId]);
-  useDockLayoutEffect(() => {
-    keepActiveTabVisible();
-  }, [activeId, keepActiveTabVisible]);
-  useDockLayoutEffect(() => {
-    const list = tabListRef.current;
-    if (!list) return;
-    const update = () => {
-      const max = Math.max(0, list.scrollWidth - list.clientWidth);
-      const next = { start: list.scrollLeft > 1, end: list.scrollLeft < max - 1 };
-      setTabOverflow(
-        (previous) => previous.start === next.start && previous.end === next.end ? previous : next
-      );
-    };
-    update();
-    list.addEventListener("scroll", update, { passive: true });
-    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => {
-      keepActiveTabVisible();
-      update();
-    });
-    observer?.observe(list);
-    for (const tab of tabRefs.current) {
-      if (tab) observer?.observe(tab);
-    }
-    return () => {
-      list.removeEventListener("scroll", update);
-      observer?.disconnect();
-    };
-  }, [activeId, keepActiveTabVisible, tabs.length]);
-  const tabMask = tabOverflow.start && tabOverflow.end ? "linear-gradient(to right, transparent 0, black 14px, black calc(100% - 14px), transparent 100%)" : tabOverflow.start ? "linear-gradient(to right, transparent 0, black 14px, black 100%)" : tabOverflow.end ? "linear-gradient(to right, black 0, black calc(100% - 14px), transparent 100%)" : void 0;
-  const activateTab = (index) => {
-    const tab = tabs[index];
-    if (!tab) {
-      return;
-    }
-    onTab(tab.id);
-    tabRefs.current[index]?.focus();
-  };
-  const onTabKeyDown = (event, index) => {
-    if (tabs.length === 0) return;
-    let nextIndex = null;
-    if (event.key === "ArrowRight") nextIndex = (index + 1) % tabs.length;
-    else if (event.key === "ArrowLeft") nextIndex = (index - 1 + tabs.length) % tabs.length;
-    else if (event.key === "Home") nextIndex = 0;
-    else if (event.key === "End") nextIndex = tabs.length - 1;
-    if (nextIndex === null) return;
-    event.preventDefault();
-    activateTab(nextIndex);
-  };
-  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
-    /* @__PURE__ */ jsxs9("div", { className: "grid shrink-0 grid-cols-[auto_minmax(0,1fr)_auto_auto] items-center gap-x-2 border-b border-og-border px-1.5 py-1 max-[1023px]:grid-cols-[auto_minmax(0,1fr)_auto] max-[1023px]:gap-y-0 max-[1023px]:px-2 max-[1023px]:pb-1 max-[1023px]:pt-0 min-[640px]:max-[1023px]:grid-cols-[auto_minmax(0,1fr)_auto_auto]", children: [
-      /* @__PURE__ */ jsx11("div", { className: "flex min-w-0 shrink-0 items-center max-[1023px]:min-h-11 min-[640px]:max-[1023px]:col-start-1 min-[640px]:max-[1023px]:row-start-1", children: leading ?? /* @__PURE__ */ jsx11("span", { className: "hidden truncate px-1 text-og-sm font-semibold text-og-fg max-[1023px]:inline", children: "Workspace" }) }),
-      /* @__PURE__ */ jsx11(
-        "div",
+function InControlBar({ shared, onRelease }) {
+  return /* @__PURE__ */ jsxs9("div", { className: "pointer-events-none absolute inset-x-0 top-0 flex items-center justify-between gap-2 p-2", children: [
+    /* @__PURE__ */ jsxs9("span", { className: "pointer-events-auto inline-flex items-center gap-2 rounded-og-sm bg-og-accent px-2.5 py-1 text-og-xs font-medium text-og-accent-fg shadow-og-md", children: [
+      /* @__PURE__ */ jsx11("span", { className: "size-1.5 animate-pulse rounded-full bg-current", "aria-hidden": true }),
+      "You're in control",
+      /* @__PURE__ */ jsx11("span", { className: "opacity-75", children: "\xB7 click Return control (or Ctrl+Alt+Shift)" })
+    ] }),
+    /* @__PURE__ */ jsxs9("div", { className: "pointer-events-auto flex items-center gap-1.5", children: [
+      shared && /* @__PURE__ */ jsx11("span", { className: "rounded-og-sm bg-og-status-failed/85 px-2 py-0.5 text-og-xs text-og-accent-fg", children: "Shared sandbox \u2014 others are watching" }),
+      /* @__PURE__ */ jsxs9(
+        "button",
         {
-          ref: tabListRef,
-          className: "flex min-w-0 items-center gap-0.5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden max-[1023px]:col-span-3 max-[1023px]:row-start-2 max-[1023px]:w-full min-[640px]:max-[1023px]:col-span-1 min-[640px]:max-[1023px]:col-start-2 min-[640px]:max-[1023px]:row-start-1",
-          role: "tablist",
-          "aria-orientation": "horizontal",
-          style: {
-            maskImage: tabMask,
-            WebkitMaskImage: tabMask,
-            scrollPaddingInline: "16px"
-          },
-          children: tabs.map((tab, index) => /* @__PURE__ */ jsxs9(
-            "button",
-            {
-              ref: (node) => {
-                tabRefs.current[index] = node;
-              },
-              id: `${tabsetId}-tab-${index}`,
-              type: "button",
-              role: "tab",
-              "aria-selected": tab.id === current,
-              "aria-controls": `${tabsetId}-panel-${index}`,
-              tabIndex: tab.id === current ? 0 : -1,
-              onClick: () => onTab(tab.id),
-              onKeyDown: (event) => onTabKeyDown(event, index),
-              className: cn(
-                "flex min-h-7 shrink-0 items-center justify-center gap-1 rounded-og-sm px-2 py-1 text-og-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent max-[1023px]:min-h-11 max-[1023px]:min-w-11 pointer-coarse:min-h-11 pointer-coarse:min-w-11",
-                tab.id === current ? "bg-og-accent-soft text-og-fg" : "text-og-fg-subtle hover:text-og-fg"
-              ),
-              children: [
-                /* @__PURE__ */ jsx11("span", { "data-contrast-audited": true, children: tab.label }),
-                tab.badge
-              ]
-            },
-            tab.id
-          ))
+          type: "button",
+          onClick: onRelease,
+          title: "Return control (or press Ctrl+Alt+Shift)",
+          className: cn(
+            "inline-flex items-center gap-1.5 rounded-og-sm border px-2.5 py-1 text-og-xs font-semibold shadow-og-md transition-colors",
+            "border-og-accent bg-og-bg/90 text-og-fg backdrop-blur-sm",
+            "outline-none hover:bg-og-accent hover:text-og-accent-fg focus-visible:ring-2 focus-visible:ring-og-accent"
+          ),
+          children: [
+            /* @__PURE__ */ jsx11(MonitorIcon, { className: "size-3.5", strokeWidth: 2, "aria-hidden": true }),
+            "Return control"
+          ]
         }
-      ),
-      /* @__PURE__ */ jsx11("div", { className: "flex min-w-0 shrink-0 items-center justify-self-end min-[640px]:max-[1023px]:col-start-3 min-[640px]:max-[1023px]:row-start-1", children: accessory }),
-      /* @__PURE__ */ jsx11("div", { className: "flex shrink-0 items-center gap-0.5 text-og-fg-subtle min-[640px]:max-[1023px]:col-start-4 min-[640px]:max-[1023px]:row-start-1", children: controls })
+      )
+    ] })
+  ] });
+}
+function unavailableCopy(reason) {
+  switch (reason) {
+    case "backend_unsupported":
+      return "This sandbox backend cannot stream a desktop.";
+    case "tier_headless":
+      return "This deployment is headless \u2014 terminal, files, and diff only.";
+    case "os_unsupported":
+      return "The sandbox OS does not support a desktop stream.";
+    case "not_provisioned":
+      return "This sandbox doesn't have a desktop yet.";
+    case "disabled_by_policy":
+      return "Desktop streaming is disabled on this deployment.";
+    case "lease_cold":
+      return "Waiting for the sandbox to start\u2026";
+    default:
+      return "The desktop isn\u2019t available for this sandbox.";
+  }
+}
+function WarmingNotice({ onRetry }) {
+  return /* @__PURE__ */ jsxs9("div", { className: "flex max-w-sm flex-col items-center gap-3 rounded-og-lg border border-og-border bg-og-bg/90 p-5 text-center text-og-base text-og-fg backdrop-blur-sm", children: [
+    /* @__PURE__ */ jsx11(LoaderCircleIcon2, { className: "size-7 animate-og-spin text-og-accent", strokeWidth: 1.5 }),
+    /* @__PURE__ */ jsxs9("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx11("div", { className: "font-medium", children: "Warming the sandbox\u2026" }),
+      /* @__PURE__ */ jsx11("p", { className: "text-og-sm text-og-fg-subtle", children: "Spinning up the desktop \u2014 this takes a few seconds." })
     ] }),
-    /* @__PURE__ */ jsx11("div", { className: "min-h-0 min-w-0 flex-1 overflow-hidden", children: tabs.length > 0 ? tabs.map((tab, index) => {
-      const selected = tab.id === activeId;
-      const shouldMount = selected || visitedTabs.has(tab.id);
-      return /* @__PURE__ */ jsx11(
-        "div",
-        {
-          id: `${tabsetId}-panel-${index}`,
-          "aria-labelledby": `${tabsetId}-tab-${index}`,
-          className: "h-full min-h-0 min-w-0 overflow-hidden",
-          hidden: !selected,
-          role: "tabpanel",
-          children: shouldMount ? tab.content : null
-        },
-        tab.id
-      );
-    }) : /* @__PURE__ */ jsx11("div", { className: "h-full min-h-0 min-w-0", "aria-label": "Workspace", role: "tabpanel" }) })
+    onRetry && /* @__PURE__ */ jsx11(
+      "button",
+      {
+        type: "button",
+        onClick: onRetry,
+        className: "rounded-og-sm border border-og-border px-3 py-1.5 text-og-sm text-og-fg-muted transition-colors hover:text-og-fg pointer-coarse:min-h-11",
+        children: "Taking too long? Retry"
+      }
+    )
+  ] });
+}
+function DefaultConsentGate({ shared, onAccept }) {
+  return /* @__PURE__ */ jsxs9("div", { className: "max-w-sm rounded-og-lg border border-og-border bg-og-bg p-4 text-center text-og-base text-og-fg", children: [
+    /* @__PURE__ */ jsx11("div", { className: "mb-1 font-medium", children: "Watch the live desktop?" }),
+    /* @__PURE__ */ jsxs9("p", { className: "mb-3 text-og-sm text-og-fg-subtle", children: [
+      "The desktop pixel stream is ",
+      /* @__PURE__ */ jsx11("strong", { children: "un-redacted" }),
+      " \u2014 it can show secrets the agent prints on screen.",
+      shared ? " This sandbox is shared: you'll also see other sessions' agents on the same screen." : ""
+    ] }),
+    /* @__PURE__ */ jsx11(
+      "button",
+      {
+        type: "button",
+        onClick: onAccept,
+        className: "rounded-og-sm bg-og-accent px-3 py-1.5 text-og-sm font-medium text-og-accent-fg pointer-coarse:min-h-11",
+        children: "I understand \u2014 show the desktop"
+      }
+    )
+  ] });
+}
+function defaultNotice(title, body, onRetry) {
+  return /* @__PURE__ */ jsxs9("div", { className: "max-w-sm rounded-og-lg border border-og-border bg-og-bg p-4 text-center text-og-base text-og-fg", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "mb-1 flex items-center justify-center gap-1.5 font-medium", children: [
+      onRetry && /* @__PURE__ */ jsx11(WifiOffIcon, { className: "size-4 opacity-70", strokeWidth: 1.75 }),
+      title
+    ] }),
+    /* @__PURE__ */ jsx11("p", { className: "text-og-sm text-og-fg-subtle", children: body }),
+    onRetry && /* @__PURE__ */ jsx11(
+      "button",
+      {
+        type: "button",
+        onClick: onRetry,
+        className: "mt-3 rounded-og-sm border border-og-border px-3 py-1.5 text-og-sm transition-colors hover:border-og-accent pointer-coarse:min-h-11",
+        children: "Reconnect"
+      }
+    )
   ] });
 }
 
-// src/components/sandbox-workspace.tsx
-import { useCallback as useCallback22, useEffect as useEffect23, useMemo as useMemo11, useRef as useRef20, useState as useState20 } from "react";
-import { Popover } from "radix-ui";
-import {
-  CircleCheckIcon,
-  CpuIcon,
-  LaptopIcon,
-  LoaderCircleIcon as LoaderCircleIcon3,
-  RefreshCwIcon as RefreshCwIcon2,
-  TriangleAlertIcon as TriangleAlertIcon2
-} from "lucide-react";
-
-// src/components/workbench-changes.tsx
-import { ArrowUpRightIcon, FileWarningIcon as FileWarningIcon2, HistoryIcon } from "lucide-react";
+// src/components/workspace-dock.tsx
 import {
   useCallback as useCallback21,
   useEffect as useEffect22,
   useId as useId4,
-  useLayoutEffect as useLayoutEffect3,
-  useMemo as useMemo10,
-  useRef as useRef19,
-  useState as useState19
-} from "react";
-import { VList as VList2 } from "virtua";
-
-// src/hooks/use-windowed-sections.ts
-import { useCallback as useCallback20, useEffect as useEffect21, useMemo as useMemo9, useRef as useRef18, useState as useState18 } from "react";
-function computeWindowRange(heights, scrollTop, viewport, overscan) {
-  const n = heights.length;
-  if (n === 0) return { start: 0, end: 0 };
-  const top = Math.max(scrollTop, 0);
-  const bottom = top + Math.max(viewport, 0);
-  let firstVisible = -1;
-  let lastVisible = -1;
-  let acc = 0;
-  let anchor = 0;
-  for (let i = 0; i < n; i++) {
-    const secTop = acc;
-    const secBottom = secTop + Math.max(heights[i] ?? 0, 0);
-    if (secTop <= top) anchor = i;
-    if (secBottom > top && secTop < bottom) {
-      if (firstVisible === -1) firstVisible = i;
-      lastVisible = i;
-    }
-    acc = secBottom;
-  }
-  if (firstVisible === -1) {
-    firstVisible = anchor;
-    lastVisible = anchor;
-  }
-  return {
-    start: Math.max(0, firstVisible - overscan),
-    end: Math.min(n, lastVisible + 1 + overscan)
-  };
-}
-function useWindowedSections(opts) {
-  const { count, estimateHeight, overscan = 3 } = opts;
-  const scrollRef = useRef18(null);
-  const [heights, setHeights] = useState18(
-    () => Array.from({ length: count }, (_, i) => estimateHeight(i))
-  );
-  useEffect21(() => {
-    setHeights((prev) => {
-      if (prev.length === count) return prev;
-      return Array.from({ length: count }, (_, i) => prev[i] ?? estimateHeight(i));
-    });
-  }, [count]);
-  const heightsRef = useRef18(heights);
-  heightsRef.current = heights;
-  const [range, setRange] = useState18(() => ({
-    start: 0,
-    end: Math.min(count, overscan + 1)
-  }));
-  const recompute = useCallback20(() => {
-    const el = scrollRef.current;
-    if (!el) return;
-    const next = computeWindowRange(heightsRef.current, el.scrollTop, el.clientHeight, overscan);
-    setRange((prev) => prev.start === next.start && prev.end === next.end ? prev : next);
-  }, [overscan]);
-  useEffect21(() => {
-    const el = scrollRef.current;
-    if (!el) return;
-    let raf = 0;
-    const onScroll = () => {
-      if (raf) return;
-      raf = typeof requestAnimationFrame === "function" ? requestAnimationFrame(() => {
-        raf = 0;
-        recompute();
-      }) : (recompute(), 0);
-    };
-    el.addEventListener("scroll", onScroll, { passive: true });
-    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => recompute()) : null;
-    ro?.observe(el);
-    recompute();
-    return () => {
-      el.removeEventListener("scroll", onScroll);
-      ro?.disconnect();
-      if (raf && typeof cancelAnimationFrame === "function") cancelAnimationFrame(raf);
-    };
-  }, [recompute, count]);
-  const measure = useCallback20((index, height) => {
-    if (height <= 0) return;
-    setHeights((prev) => {
-      if (Math.abs((prev[index] ?? 0) - height) < 1) return prev;
-      const next = prev.slice();
-      next[index] = height;
-      return next;
-    });
-  }, []);
-  const offsets = useMemo9(() => {
-    const out = new Array(count + 1);
-    out[0] = 0;
-    for (let i = 0; i < count; i++) out[i + 1] = (out[i] ?? 0) + Math.max(heights[i] ?? 0, 0);
-    return out;
-  }, [heights, count]);
-  useEffect21(() => {
-    recompute();
-  }, [offsets, recompute]);
-  const scrollToIndex = useCallback20(
-    (index) => {
-      const el = scrollRef.current;
-      if (!el) return;
-      const clamped = Math.max(0, Math.min(count - 1, index));
-      el.scrollTop = offsets[clamped] ?? 0;
-    },
-    [offsets, count]
-  );
-  return {
-    scrollRef,
-    range,
-    offsets,
-    totalHeight: offsets[count] ?? 0,
-    measure,
-    scrollToIndex
-  };
-}
-
-// src/components/workbench-changes.tsx
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
-var GROUP_THRESHOLD = 20;
-var OVERSCAN = 2;
-var HEADER_PX = 30;
-var LINE_PX = 18;
-var GUARD_BODY_PX = 52;
-var COMPACT_SURFACE_PX = 560;
-var useChangesLayoutEffect = typeof window === "undefined" ? useEffect22 : useLayoutEffect3;
-var STATUS_TINT2 = {
-  added: "text-og-status-idle",
-  modified: "text-og-status-running",
-  deleted: "text-og-status-failed",
-  renamed: "text-og-accent",
-  copied: "text-og-accent",
-  untracked: "text-og-fg-subtle",
-  ignored: "text-og-fg-subtle",
-  conflicted: "text-og-status-failed",
-  typechange: "text-og-status-running"
-};
-var STATUS_LETTER = {
-  added: "A",
-  modified: "M",
-  deleted: "D",
-  renamed: "R",
-  copied: "C",
-  untracked: "U",
-  ignored: "I",
-  conflicted: "!",
-  typechange: "T"
-};
-function compactFileLabel(file) {
-  const slash = file.path.lastIndexOf("/");
-  const basename = slash >= 0 ? file.path.slice(slash + 1) : file.path;
-  const parent = slash >= 0 ? file.path.slice(0, slash + 1) : "";
-  return `${STATUS_LETTER[file.status]} \xB7 ${basename}${parent ? ` \u2014 ${parent}` : ""}`;
-}
-function buildRail(files) {
-  const roots = new Set(
-    files.flatMap((file) => file.repoRoot === void 0 ? [] : [file.repoRoot])
-  );
-  const groupByRepo = roots.size > 1;
-  if (!groupByRepo && files.length <= GROUP_THRESHOLD) {
-    return {
-      orderedFiles: files,
-      rows: files.map((file, index) => ({ kind: "file", file, index })),
-      grouped: false
-    };
-  }
-  const groups = /* @__PURE__ */ new Map();
-  for (const file of files) {
-    const slash = file.path.indexOf("/");
-    const key = groupByRepo ? file.repoRoot || "(workspace)" : slash > 0 ? file.path.slice(0, slash) : "(root)";
-    const bucket = groups.get(key);
-    if (bucket) bucket.push(file);
-    else groups.set(key, [file]);
+  useLayoutEffect as useLayoutEffect3,
+  useRef as useRef19,
+  useState as useState19
+} from "react";
+import {
+  ChevronsLeftRightIcon,
+  Maximize2Icon,
+  Minimize2Icon,
+  PanelRightCloseIcon,
+  XIcon as XIcon2
+} from "lucide-react";
+import {
+  Group,
+  Panel,
+  Separator,
+  useDefaultLayout,
+  usePanelRef
+} from "react-resizable-panels";
+import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+var SERVER_LAYOUT_STORAGE = {
+  getItem: () => null,
+  setItem: () => {
   }
-  const labels = [...groups.keys()].sort((a, b) => a.localeCompare(b));
-  const orderedFiles = [];
-  const rows = [];
-  for (const label of labels) {
-    const bucket = (groups.get(label) ?? []).slice().sort((a, b) => a.path.localeCompare(b.path));
-    rows.push({ kind: "group", label, count: bucket.length });
-    for (const file of bucket) {
-      rows.push({ kind: "file", file, index: orderedFiles.length });
-      orderedFiles.push(file);
-    }
+};
+function getLayoutStorage() {
+  if (typeof window === "undefined") return SERVER_LAYOUT_STORAGE;
+  try {
+    return window.localStorage;
+  } catch {
+    return SERVER_LAYOUT_STORAGE;
   }
-  return { orderedFiles, rows, grouped: true };
-}
-function isGuarded(file) {
-  return file.isBinary || file.truncated;
 }
-function estimateSectionHeight(file) {
-  if (isGuarded(file)) return HEADER_PX + GUARD_BODY_PX;
-  let lines = 0;
-  for (const hunk of file.hunks) lines += hunk.lines.length + 1;
-  return HEADER_PX + Math.max(lines, 1) * LINE_PX + 8;
+var useDockLayoutEffect = typeof window === "undefined" ? useEffect22 : useLayoutEffect3;
+var DOCK_OVERLAY_BREAKPOINT = 1024;
+function useIsNarrow(maxWidth) {
+  const [narrow, setNarrow] = useState19(false);
+  useDockLayoutEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const mql = window.matchMedia(`(max-width: ${maxWidth - 1}px)`);
+    const update = () => setNarrow(mql.matches);
+    update();
+    if (typeof mql.addEventListener === "function") {
+      mql.addEventListener("change", update);
+      return () => mql.removeEventListener("change", update);
+    }
+    mql.addListener(update);
+    return () => mql.removeListener(update);
+  }, [maxWidth]);
+  return narrow;
 }
-function WorkbenchChanges({
-  diff,
-  source,
-  capturedAt,
-  captureRevision,
-  themeType,
-  onOpenFile,
+function WorkspaceDock({
+  primary,
+  tabs,
+  activeTab,
+  onActiveTabChange,
+  collapsed: collapsedProp,
+  onCollapsedChange,
+  headerAccessory,
+  mobileLeadingControl,
+  autoSaveId = "og.session.dock",
+  defaultSize = 34,
+  minSize = 22,
+  maxSize = 70,
   className
 }) {
+  const narrow = useIsNarrow(DOCK_OVERLAY_BREAKPOINT);
   const rootRef = useRef19(null);
-  const [compact, setCompact] = useState19(false);
-  const [coarsePointer, setCoarsePointer] = useState19(false);
-  const resolvedTheme = useThemeType(themeType);
-  const [layout, setLayout] = useState19("unified");
-  const [activePath, setActivePath] = useState19(null);
-  const pickerId = useId4();
-  const unicodeFontPaths = useMemo10(
-    () => diff.flatMap((file) => file.oldPath ? [file.path, file.oldPath] : [file.path]),
-    [diff]
-  );
-  useUnicodeFallbackFonts(unicodeFontPaths);
-  const { orderedFiles, rows, grouped } = useMemo10(() => buildRail(diff), [diff]);
-  const selectedIndex = orderedFiles.findIndex((file) => file.path === activePath);
-  const activeIndex = selectedIndex >= 0 ? selectedIndex : 0;
-  useChangesLayoutEffect(() => {
-    const root = rootRef.current;
-    if (!root || typeof ResizeObserver === "undefined") return;
-    const update = (width) => {
-      if (width > 0) setCompact(width < COMPACT_SURFACE_PX);
-    };
-    update(root.getBoundingClientRect().width);
-    const observer = new ResizeObserver((entries) => {
-      update(entries[0]?.contentRect.width ?? root.getBoundingClientRect().width);
-    });
-    observer.observe(root);
-    return () => observer.disconnect();
-  }, []);
-  useChangesLayoutEffect(() => {
-    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
-    const query = window.matchMedia("(pointer: coarse)");
-    const update = () => setCoarsePointer(query.matches);
-    update();
-    if (typeof query.addEventListener === "function") {
-      query.addEventListener("change", update);
-      return () => query.removeEventListener("change", update);
-    }
-    if (typeof query.addListener === "function") {
-      query.addListener(update);
-      return () => query.removeListener(update);
-    }
-  }, []);
-  const additions = useMemo10(() => diff.reduce((sum, f) => sum + f.additions, 0), [diff]);
-  const deletions = useMemo10(() => diff.reduce((sum, f) => sum + f.deletions, 0), [diff]);
-  const estimateHeight = useCallback21(
-    (index) => {
-      const file = orderedFiles[index];
-      return file ? estimateSectionHeight(file) : HEADER_PX + LINE_PX;
+  const reopenRef = useRef19(null);
+  const returnFocusRef = useRef19(null);
+  const initialNarrowFocusRef = useRef19(false);
+  const dockPanelRef = usePanelRef();
+  const [internalCollapsed, setInternalCollapsed] = useState19(false);
+  const [maximized, setMaximized] = useState19(false);
+  const [internalTab, setInternalTab] = useState19(tabs[0]?.id ?? "");
+  const collapsed = collapsedProp ?? internalCollapsed;
+  const hostControlled = collapsedProp !== void 0;
+  const previousCollapsedRef = useRef19(collapsed);
+  const { defaultLayout, onLayoutChanged } = useDefaultLayout({
+    panelIds: ["primary", "dock"],
+    storage: getLayoutStorage(),
+    id: autoSaveId
+  });
+  const requestedTab = activeTab ?? internalTab;
+  const tabIds = tabs.map((tab) => tab.id);
+  const firstTabId = tabs[0]?.id ?? "";
+  const requestedTabIsValid = tabIds.includes(requestedTab);
+  const current = requestedTabIsValid ? requestedTab : firstTabId;
+  const setTab = useCallback21(
+    (id) => {
+      setInternalTab(id);
+      onActiveTabChange?.(id);
     },
-    [orderedFiles]
+    [onActiveTabChange]
   );
-  const windowed = useWindowedSections({
-    count: orderedFiles.length,
-    estimateHeight,
-    overscan: OVERSCAN
-  });
-  const jumpTo = useCallback21(
-    (index) => {
-      setActivePath(orderedFiles[index]?.path ?? null);
-      windowed.scrollToIndex(index);
+  const setCollapsed = useCallback21(
+    (next) => {
+      setInternalCollapsed((previous) => previous === next ? previous : next);
+      onCollapsedChange?.(next);
     },
-    [orderedFiles, windowed]
+    [onCollapsedChange]
   );
-  const onPaneScroll = useCallback21(() => {
-    const el = windowed.scrollRef.current;
-    if (!el) {
+  useDockLayoutEffect(() => {
+    if (collapsedProp === void 0) {
       return;
     }
-    const top = el.scrollTop;
-    const offsets = windowed.offsets;
-    let idx = 0;
-    for (let i = 0; i < orderedFiles.length; i++) {
-      if ((offsets[i] ?? 0) <= top + 4) idx = i;
-      else break;
+    if (collapsedProp) {
+      dockPanelRef.current?.collapse();
+      setMaximized(false);
+    } else {
+      dockPanelRef.current?.expand();
     }
-    const nextPath = orderedFiles[idx]?.path ?? null;
-    setActivePath((previous) => previous === nextPath ? previous : nextPath);
-  }, [windowed, orderedFiles]);
+  }, [collapsedProp, dockPanelRef]);
   useEffect22(() => {
-    const el = windowed.scrollRef.current;
-    if (!el) return;
-    el.addEventListener("scroll", onPaneScroll, { passive: true });
-    return () => el.removeEventListener("scroll", onPaneScroll);
-  }, [windowed.scrollRef, onPaneScroll]);
-  const sourceBadge = describeSource(source, capturedAt, captureRevision ?? null);
-  const activeFile = orderedFiles[activeIndex] ?? orderedFiles[0];
-  return /* @__PURE__ */ jsxs10(
-    "div",
+    const previous = previousCollapsedRef.current;
+    previousCollapsedRef.current = collapsed;
+    if (previous === collapsed) return;
+    if (!collapsed) {
+      const active = document.activeElement;
+      const workspaceSurface = rootRef.current?.querySelector(
+        narrow ? '[role="dialog"]' : "[data-workspace-surface]"
+      );
+      if (active instanceof HTMLElement && !workspaceSurface?.contains(active)) {
+        returnFocusRef.current = active;
+      }
+      if (narrow) {
+        const frame2 = requestAnimationFrame(() => {
+          rootRef.current?.querySelector('[role="dialog"] [role="tab"][aria-selected="true"]')?.focus();
+        });
+        return () => cancelAnimationFrame(frame2);
+      }
+      return;
+    }
+    const frame = requestAnimationFrame(() => {
+      if (!hostControlled) {
+        reopenRef.current?.focus();
+        return;
+      }
+      const target = returnFocusRef.current;
+      if (target?.isConnected) target.focus();
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [collapsed, hostControlled, narrow]);
+  useEffect22(() => {
+    if (!narrow || collapsed || initialNarrowFocusRef.current) return;
+    initialNarrowFocusRef.current = true;
+    const active = document.activeElement;
+    const workspaceSurface = rootRef.current?.querySelector('[role="dialog"]');
+    if (active instanceof HTMLElement && !workspaceSurface?.contains(active)) {
+      returnFocusRef.current = active;
+    }
+    const frame = requestAnimationFrame(() => {
+      workspaceSurface?.querySelector('[role="tab"][aria-selected="true"]')?.focus();
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [collapsed, narrow]);
+  useEffect22(() => {
+    if (firstTabId && !requestedTabIsValid) {
+      setTab(firstTabId);
+    }
+  }, [firstTabId, requestedTabIsValid, setTab]);
+  const collapse = useCallback21(() => {
+    dockPanelRef.current?.collapse();
+    setCollapsed(true);
+  }, [dockPanelRef, setCollapsed]);
+  const expand = useCallback21(() => {
+    dockPanelRef.current?.expand();
+    setCollapsed(false);
+  }, [dockPanelRef, setCollapsed]);
+  useEffect22(() => {
+    const overlayOpen = maximized || narrow && !collapsed;
+    if (!overlayOpen) return;
+    const onKey = (event) => {
+      if (event.key === "Escape") {
+        if (maximized) setMaximized(false);
+        else collapse();
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const surface = rootRef.current?.querySelector(
+        narrow ? '[role="dialog"]' : "[data-workspace-surface]"
+      );
+      if (!surface) return;
+      const focusable = Array.from(surface.querySelectorAll("*")).filter(
+        (element) => element.tabIndex >= 0 && !element.hasAttribute("disabled") && element.getClientRects().length > 0 && getComputedStyle(element).visibility !== "hidden"
+      );
+      const first = focusable[0];
+      const last = focusable.at(-1);
+      const active = document.activeElement;
+      if (!first || !last) {
+        event.preventDefault();
+        surface.focus();
+        return;
+      }
+      if (!surface.contains(active)) {
+        event.preventDefault();
+        (event.shiftKey ? last : first).focus();
+        return;
+      }
+      if (event.shiftKey && active === first || !event.shiftKey && active === last) {
+        event.preventDefault();
+        (event.shiftKey ? last : first).focus();
+        return;
+      }
+      requestAnimationFrame(() => {
+        const next = document.activeElement;
+        if (!surface.contains(next)) (event.shiftKey ? last : first).focus();
+      });
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [maximized, narrow, collapsed, collapse]);
+  if (narrow) {
+    return /* @__PURE__ */ jsxs10("div", { ref: rootRef, className: cn("relative flex h-full min-h-0 w-full min-w-0", className), children: [
+      /* @__PURE__ */ jsx12(
+        "div",
+        {
+          "data-workspace-primary": true,
+          "aria-hidden": !collapsed ? true : void 0,
+          className: "min-h-0 min-w-0 flex-1",
+          inert: !collapsed ? true : void 0,
+          children: primary
+        }
+      ),
+      /* @__PURE__ */ jsx12(
+        "div",
+        {
+          "data-workspace-surface": true,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "Workspace",
+          className: "fixed inset-0 z-40 flex flex-col bg-og-bg",
+          hidden: collapsed,
+          style: {
+            paddingTop: "env(safe-area-inset-top)",
+            paddingBottom: "env(safe-area-inset-bottom)"
+          },
+          children: /* @__PURE__ */ jsx12(
+            DockChrome,
+            {
+              tabs,
+              current,
+              onTab: setTab,
+              leading: mobileLeadingControl,
+              accessory: headerAccessory,
+              controls: /* @__PURE__ */ jsx12(ChromeButton, { onClick: collapse, title: "Close workspace", label: "Close workspace", children: /* @__PURE__ */ jsx12(XIcon2, { className: "size-4" }) })
+            }
+          )
+        }
+      ),
+      collapsed && !hostControlled ? /* @__PURE__ */ jsx12(
+        "button",
+        {
+          ref: reopenRef,
+          type: "button",
+          onClick: expand,
+          title: "Open workspace",
+          "aria-label": "Open workspace",
+          className: "absolute right-3 top-3 z-30 inline-flex size-11 items-center justify-center rounded-og-md border border-og-border bg-og-surface-1 text-og-fg-muted shadow-lg transition-colors hover:border-og-border-strong hover:text-og-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent",
+          style: { marginTop: "env(safe-area-inset-top)" },
+          children: /* @__PURE__ */ jsx12(ChevronsLeftRightIcon, { className: "size-4", "aria-hidden": true })
+        }
+      ) : null
+    ] });
+  }
+  const dockChrome = /* @__PURE__ */ jsx12(
+    DockChrome,
     {
-      ref: rootRef,
-      className: cn("flex h-full min-h-0 min-w-0 flex-col", className),
-      "data-workbench-changes-layout": compact ? "compact" : "rail",
-      children: [
-        /* @__PURE__ */ jsxs10(
-          "div",
+      tabs,
+      current,
+      onTab: setTab,
+      accessory: headerAccessory,
+      controls: /* @__PURE__ */ jsxs10(Fragment4, { children: [
+        /* @__PURE__ */ jsx12(
+          ChromeButton,
           {
-            className: cn(
-              "flex shrink-0 items-center justify-between gap-2 border-b border-og-border px-3 py-1.5",
-              compact && source === "capture" && "flex-col items-stretch gap-1.5 py-2"
-            ),
-            children: [
-              /* @__PURE__ */ jsxs10(
-                "span",
-                {
-                  role: "status",
-                  "aria-atomic": "true",
-                  "aria-live": "polite",
-                  "data-contrast-audited": true,
-                  className: "min-w-0 text-og-xs text-og-fg-muted",
-                  children: [
-                    diff.length,
-                    " ",
-                    diff.length === 1 ? "file" : "files",
-                    " changed",
-                    /* @__PURE__ */ jsxs10("span", { "data-contrast-audited": true, className: "ml-2 text-og-status-idle", children: [
-                      "+",
-                      additions
-                    ] }),
-                    /* @__PURE__ */ jsxs10("span", { "data-contrast-audited": true, className: "ml-1 text-og-status-failed", children: [
-                      "\u2212",
-                      deletions
-                    ] })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs10(
-                "div",
-                {
-                  className: cn(
-                    "flex shrink-0 items-center gap-2",
-                    compact && source === "capture" && "self-start"
-                  ),
-                  children: [
-                    compact ? null : /* @__PURE__ */ jsx12(LayoutToggle, { layout, onChange: setLayout }),
-                    /* @__PURE__ */ jsx12(SourceBadge, { source, capturedAt, label: sourceBadge })
-                  ]
-                }
-              )
-            ]
+            onClick: () => setMaximized((m) => !m),
+            title: maximized ? "Restore (Esc)" : "Maximize",
+            label: maximized ? "Restore dock" : "Maximize dock",
+            children: maximized ? /* @__PURE__ */ jsx12(Minimize2Icon, { className: "size-3.5" }) : /* @__PURE__ */ jsx12(Maximize2Icon, { className: "size-3.5" })
           }
         ),
-        compact ? /* @__PURE__ */ jsxs10("div", { className: "flex min-h-0 flex-1 flex-col", children: [
-          /* @__PURE__ */ jsxs10("div", { className: "shrink-0 border-b border-og-border bg-og-surface-1 p-2", children: [
-            /* @__PURE__ */ jsx12("label", { className: "sr-only", htmlFor: pickerId, children: "Changed file" }),
-            /* @__PURE__ */ jsx12(
-              "select",
-              {
-                id: pickerId,
-                "aria-label": "Changed file",
-                value: activeIndex,
-                onChange: (event) => {
-                  const index = Number(event.currentTarget.value);
-                  setActivePath(orderedFiles[index]?.path ?? null);
-                },
-                title: activeFile?.path,
-                "data-compact-file-picker": true,
-                className: "h-11 w-full rounded-og-md border border-og-border bg-og-bg px-3 font-og-mono text-og-sm text-og-fg outline-none transition-colors focus:border-og-accent focus:ring-2 focus:ring-og-accent-soft",
-                children: orderedFiles.map((file, index) => /* @__PURE__ */ jsx12("option", { value: index, children: compactFileLabel(file) }, file.path))
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx12("div", { className: "min-h-0 min-w-0 flex-1 overflow-auto", "data-opengeni-changes-pane": true, children: activeFile ? /* @__PURE__ */ jsx12(
-            DiffSection,
-            {
-              file: activeFile,
-              layout: "unified",
-              themeType: resolvedTheme,
-              ...onOpenFile ? { onOpenFile } : {}
-            }
-          ) : null })
-        ] }) : /* @__PURE__ */ jsxs10("div", { className: "flex min-h-0 flex-1", children: [
-          /* @__PURE__ */ jsx12("div", { className: "w-[clamp(12rem,28%,15rem)] shrink-0 border-r border-og-border bg-og-surface-1/35", children: /* @__PURE__ */ jsx12(
-            VList2,
+        hostControlled ? null : /* @__PURE__ */ jsx12(ChromeButton, { onClick: collapse, title: "Collapse", label: "Collapse dock", children: /* @__PURE__ */ jsx12(PanelRightCloseIcon, { className: "size-3.5" }) })
+      ] })
+    }
+  );
+  return /* @__PURE__ */ jsxs10("div", { ref: rootRef, className: cn("relative flex h-full min-h-0 w-full min-w-0", className), children: [
+    /* @__PURE__ */ jsxs10(
+      Group,
+      {
+        orientation: "horizontal",
+        className: "min-h-0 flex-1",
+        ...defaultLayout ? { defaultLayout } : {},
+        onLayoutChanged,
+        children: [
+          /* @__PURE__ */ jsx12(Panel, { id: "primary", minSize: "30%", className: "min-h-0 min-w-0", children: /* @__PURE__ */ jsx12(
+            "div",
             {
-              className: "h-full",
-              itemSize: coarsePointer ? 44 : 28,
-              ssrCount: Math.min(30, rows.length),
-              children: rows.map(
-                (row) => row.kind === "group" ? /* @__PURE__ */ jsxs10(
-                  "div",
-                  {
-                    "data-rail-group": true,
-                    className: "flex items-center gap-1.5 px-2 pb-0.5 pt-2 text-og-xs font-medium uppercase tracking-wide text-og-fg-subtle",
-                    children: [
-                      /* @__PURE__ */ jsx12("span", { className: "min-w-0 truncate", children: row.label }),
-                      /* @__PURE__ */ jsx12("span", { className: "shrink-0", children: row.count })
-                    ]
-                  },
-                  `g:${row.label}`
-                ) : /* @__PURE__ */ jsx12(
-                  RailFileRow,
-                  {
-                    file: row.file,
-                    grouped,
-                    active: row.index === activeIndex,
-                    onClick: () => jumpTo(row.index)
-                  },
-                  row.file.path
-                )
-              )
+              "data-workspace-primary": true,
+              "aria-hidden": maximized ? true : void 0,
+              className: "h-full min-h-0 min-w-0",
+              inert: maximized ? true : void 0,
+              children: primary
             }
           ) }),
+          !collapsed && /* @__PURE__ */ jsx12(Separator, { className: "group relative z-10 w-1.5 shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent max-[1023px]:-mx-[19px] max-[1023px]:w-11 pointer-coarse:-mx-[19px] pointer-coarse:w-11", children: /* @__PURE__ */ jsx12("span", { className: "absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-og-border transition-colors group-hover:bg-og-accent group-focus-visible:bg-og-accent group-data-[separator-state=dragging]:bg-og-accent" }) }),
           /* @__PURE__ */ jsx12(
-            "div",
+            Panel,
             {
-              ref: windowed.scrollRef,
-              className: "min-h-0 min-w-0 flex-1 overflow-auto",
-              "data-opengeni-changes-pane": true,
-              children: /* @__PURE__ */ jsx12("div", { style: { position: "relative", height: windowed.totalHeight }, children: orderedFiles.map((file, index) => {
-                if (index < windowed.range.start || index >= windowed.range.end) return null;
-                return /* @__PURE__ */ jsx12(
-                  MeasuredSection,
-                  {
-                    index,
-                    top: windowed.offsets[index] ?? 0,
-                    onMeasure: windowed.measure,
-                    children: /* @__PURE__ */ jsx12(
-                      DiffSection,
-                      {
-                        file,
-                        layout,
-                        themeType: resolvedTheme,
-                        ...onOpenFile ? { onOpenFile } : {}
-                      }
-                    )
-                  },
-                  file.path
-                );
-              }) })
+              id: "dock",
+              panelRef: dockPanelRef,
+              collapsible: true,
+              collapsedSize: "0%",
+              defaultSize: `${defaultSize}%`,
+              minSize: `${minSize}%`,
+              maxSize: `${maxSize}%`,
+              onResize: (size, _id, previousSize) => {
+                const isCollapsed = size.asPercentage <= 1;
+                const canInferCollapse = collapsedProp === void 0 || previousSize !== void 0;
+                if (canInferCollapse && isCollapsed !== collapsed) {
+                  setCollapsed(isCollapsed);
+                }
+              },
+              className: "min-h-0 min-w-0",
+              children: /* @__PURE__ */ jsx12(
+                "div",
+                {
+                  "data-workspace-surface": true,
+                  role: maximized ? "dialog" : void 0,
+                  "aria-modal": maximized ? true : void 0,
+                  "aria-label": maximized ? "Workspace" : void 0,
+                  "aria-hidden": collapsed ? true : void 0,
+                  className: cn(
+                    "flex h-full min-h-0 min-w-0 flex-col bg-og-bg",
+                    maximized ? "fixed inset-0 z-40" : "border-l border-og-border",
+                    collapsed && "invisible pointer-events-none"
+                  ),
+                  children: dockChrome
+                }
+              )
             }
           )
-        ] })
-      ]
-    }
-  );
-}
-function SourceBadge({
-  source,
-  capturedAt,
-  label
-}) {
-  if (source === "capture" && capturedAt) {
-    return /* @__PURE__ */ jsxs10(
-      "span",
-      {
-        className: "inline-flex items-center gap-1 rounded-og-xs border border-og-border px-1.5 py-px text-og-xs text-og-fg-muted",
-        title: new Date(capturedAt).toLocaleString(),
-        children: [
-          /* @__PURE__ */ jsx12(HistoryIcon, { className: "size-3 shrink-0 text-og-status-running", "aria-hidden": true }),
-          label
         ]
       }
-    );
-  }
-  return /* @__PURE__ */ jsx12("span", { className: "rounded-og-xs bg-og-surface-2 px-1.5 py-px text-og-xs text-og-fg-subtle", children: label });
-}
-function describeSource(source, capturedAt, revision) {
-  if (source !== "capture" || !capturedAt) return "Live diff";
-  const time = formatAsOf(capturedAt, Date.now());
-  return revision !== null ? `as of turn ${revision} \xB7 ${time}` : `as of ${time}`;
+    ),
+    collapsed && !maximized && !hostControlled && /* @__PURE__ */ jsx12(
+      "button",
+      {
+        ref: reopenRef,
+        type: "button",
+        onClick: expand,
+        title: "Open workspace",
+        className: "absolute inset-y-0 right-0 flex w-6 shrink-0 items-center justify-center border-l border-og-border bg-og-surface-1 text-og-fg-subtle hover:text-og-fg",
+        children: /* @__PURE__ */ jsx12(ChevronsLeftRightIcon, { className: "size-3.5" })
+      }
+    )
+  ] });
 }
-function RailFileRow({
-  file,
-  grouped,
-  active,
-  onClick
+function ChromeButton({
+  onClick,
+  title,
+  label,
+  children
 }) {
-  const repoPrefix = file.repoRoot ? `${file.repoRoot}/` : null;
-  const shown = grouped ? file.repoRoot !== void 0 ? repoPrefix && file.path.startsWith(repoPrefix) ? file.path.slice(repoPrefix.length) : file.path : file.path.slice(file.path.indexOf("/") + 1) || file.path : file.path;
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsx12(
     "button",
     {
       type: "button",
       onClick,
-      title: file.path,
-      "data-rail-file": true,
-      className: cn(
-        "relative flex min-h-7 w-full items-center gap-1.5 truncate px-2 py-0.5 text-left text-og-sm transition-colors hover:bg-og-surface-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent pointer-coarse:min-h-11",
-        grouped && "pl-3",
-        active && "bg-og-accent-soft text-og-fg before:absolute before:inset-y-1 before:left-0 before:w-0.5 before:rounded-r-full before:bg-og-accent"
-      ),
-      children: [
-        /* @__PURE__ */ jsx12(
-          "span",
-          {
-            "data-contrast-audited": true,
-            className: cn("w-3 shrink-0 text-center font-og-mono text-og-xs", STATUS_TINT2[file.status]),
-            children: STATUS_LETTER[file.status]
-          }
-        ),
-        /* @__PURE__ */ jsx12("span", { className: "min-w-0 flex-1 truncate", children: shown }),
-        /* @__PURE__ */ jsxs10("span", { className: "ml-auto flex shrink-0 items-center gap-1 pl-1 font-og-mono text-og-xs", children: [
-          /* @__PURE__ */ jsxs10("span", { "data-contrast-audited": true, className: "text-og-status-idle", children: [
-            "+",
-            file.additions
-          ] }),
-          /* @__PURE__ */ jsxs10("span", { "data-contrast-audited": true, className: "text-og-status-failed", children: [
-            "\u2212",
-            file.deletions
-          ] })
-        ] })
-      ]
+      title,
+      "aria-label": label,
+      className: "inline-flex size-7 items-center justify-center rounded-og-sm p-1 transition-colors hover:bg-og-surface-2 hover:text-og-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent max-[1023px]:size-11 pointer-coarse:size-11",
+      children
     }
   );
 }
-function MeasuredSection({
-  index,
-  top,
-  onMeasure,
-  children
+function DockChrome({
+  tabs,
+  current,
+  onTab,
+  leading,
+  accessory,
+  controls
 }) {
-  const ref = useRef19(null);
+  const active = tabs.find((t) => t.id === current) ?? tabs[0];
+  const tabsetId = useId4();
+  const tabRefs = useRef19([]);
+  const tabListRef = useRef19(null);
+  const [visitedTabs, setVisitedTabs] = useState19(() => /* @__PURE__ */ new Set());
+  const [tabOverflow, setTabOverflow] = useState19({ start: false, end: false });
+  const activeId = active?.id ?? "";
+  const activeTabIndex = tabs.findIndex((tab) => tab.id === activeId);
+  const keepActiveTabVisible = useCallback21(() => {
+    const selected = activeTabIndex >= 0 ? tabRefs.current[activeTabIndex] : null;
+    selected?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }, [activeTabIndex]);
   useEffect22(() => {
-    const el = ref.current;
-    if (!el) return;
-    const report = () => onMeasure(index, el.offsetHeight);
-    report();
-    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(report) : null;
-    ro?.observe(el);
-    return () => ro?.disconnect();
-  }, [index, onMeasure]);
-  return /* @__PURE__ */ jsx12(
-    "div",
-    {
-      ref,
-      "data-diff-section": true,
-      "data-diff-index": index,
-      style: { position: "absolute", top, left: 0, right: 0 },
-      children
+    if (!activeId) return;
+    setVisitedTabs((previous) => {
+      if (previous.has(activeId)) return previous;
+      const next = new Set(previous);
+      next.add(activeId);
+      return next;
+    });
+  }, [activeId]);
+  useDockLayoutEffect(() => {
+    keepActiveTabVisible();
+  }, [activeId, keepActiveTabVisible]);
+  useDockLayoutEffect(() => {
+    const list = tabListRef.current;
+    if (!list) return;
+    const update = () => {
+      const max = Math.max(0, list.scrollWidth - list.clientWidth);
+      const next = { start: list.scrollLeft > 1, end: list.scrollLeft < max - 1 };
+      setTabOverflow(
+        (previous) => previous.start === next.start && previous.end === next.end ? previous : next
+      );
+    };
+    update();
+    list.addEventListener("scroll", update, { passive: true });
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => {
+      keepActiveTabVisible();
+      update();
+    });
+    observer?.observe(list);
+    for (const tab of tabRefs.current) {
+      if (tab) observer?.observe(tab);
     }
-  );
-}
-function DiffSection({
-  file,
-  layout,
-  themeType,
-  onOpenFile
-}) {
-  if (isGuarded(file)) {
-    const renamed = file.oldPath && file.oldPath !== file.path;
-    return /* @__PURE__ */ jsxs10("section", { className: "border-b border-og-border pb-1", children: [
-      /* @__PURE__ */ jsxs10("header", { className: "flex items-center justify-between gap-2 bg-og-surface-1 px-3 py-1.5 text-og-sm", children: [
-        /* @__PURE__ */ jsx12("span", { className: "min-w-0 truncate font-og-mono text-og-xs", children: renamed ? `${file.oldPath} \u2192 ${file.path}` : file.path }),
-        /* @__PURE__ */ jsxs10("span", { className: "flex shrink-0 items-center gap-2 font-og-mono text-og-xs", children: [
-          /* @__PURE__ */ jsxs10("span", { className: "text-og-status-idle", children: [
-            "+",
-            file.additions
-          ] }),
-          /* @__PURE__ */ jsxs10("span", { className: "text-og-status-failed", children: [
-            "\u2212",
-            file.deletions
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx12(GuardBody, { file, ...onOpenFile ? { onOpenFile } : {} })
-    ] });
-  }
-  return /* @__PURE__ */ jsx12("section", { "data-pierre-section": true, className: "border-b border-og-border pb-2", children: /* @__PURE__ */ jsx12(PierreDiff, { diff: [file], layout, themeType, className: "px-1" }) });
-}
-function GuardBody({
-  file,
-  onOpenFile
-}) {
-  const reason = file.isBinary ? "Binary file" : "Diff too large to show here";
-  return /* @__PURE__ */ jsxs10("div", { className: "flex flex-wrap items-center gap-2 px-3 py-3 text-og-sm text-og-fg-subtle", children: [
-    /* @__PURE__ */ jsx12(FileWarningIcon2, { className: "size-3.5 shrink-0", "aria-hidden": true }),
-    /* @__PURE__ */ jsxs10("span", { className: "min-w-0 flex-1", children: [
-      reason,
-      "."
+    return () => {
+      list.removeEventListener("scroll", update);
+      observer?.disconnect();
+    };
+  }, [activeId, keepActiveTabVisible, tabs.length]);
+  const tabMask = tabOverflow.start && tabOverflow.end ? "linear-gradient(to right, transparent 0, black 14px, black calc(100% - 14px), transparent 100%)" : tabOverflow.start ? "linear-gradient(to right, transparent 0, black 14px, black 100%)" : tabOverflow.end ? "linear-gradient(to right, black 0, black calc(100% - 14px), transparent 100%)" : void 0;
+  const activateTab = (index) => {
+    const tab = tabs[index];
+    if (!tab) {
+      return;
+    }
+    onTab(tab.id);
+    tabRefs.current[index]?.focus();
+  };
+  const onTabKeyDown = (event, index) => {
+    if (tabs.length === 0) return;
+    let nextIndex = null;
+    if (event.key === "ArrowRight") nextIndex = (index + 1) % tabs.length;
+    else if (event.key === "ArrowLeft") nextIndex = (index - 1 + tabs.length) % tabs.length;
+    else if (event.key === "Home") nextIndex = 0;
+    else if (event.key === "End") nextIndex = tabs.length - 1;
+    if (nextIndex === null) return;
+    event.preventDefault();
+    activateTab(nextIndex);
+  };
+  return /* @__PURE__ */ jsxs10(Fragment4, { children: [
+    /* @__PURE__ */ jsxs10("div", { className: "grid shrink-0 grid-cols-[auto_minmax(0,1fr)_auto_auto] items-center gap-x-2 border-b border-og-border px-1.5 py-1 max-[1023px]:grid-cols-[auto_minmax(0,1fr)_auto] max-[1023px]:gap-y-0 max-[1023px]:px-2 max-[1023px]:pb-1 max-[1023px]:pt-0 min-[640px]:max-[1023px]:grid-cols-[auto_minmax(0,1fr)_auto_auto]", children: [
+      /* @__PURE__ */ jsx12("div", { className: "flex min-w-0 shrink-0 items-center max-[1023px]:min-h-11 min-[640px]:max-[1023px]:col-start-1 min-[640px]:max-[1023px]:row-start-1", children: leading ?? /* @__PURE__ */ jsx12("span", { className: "hidden truncate px-1 text-og-sm font-semibold text-og-fg max-[1023px]:inline", children: "Workspace" }) }),
+      /* @__PURE__ */ jsx12(
+        "div",
+        {
+          ref: tabListRef,
+          className: "flex min-w-0 items-center gap-0.5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden max-[1023px]:col-span-3 max-[1023px]:row-start-2 max-[1023px]:w-full min-[640px]:max-[1023px]:col-span-1 min-[640px]:max-[1023px]:col-start-2 min-[640px]:max-[1023px]:row-start-1",
+          role: "tablist",
+          "aria-orientation": "horizontal",
+          style: {
+            maskImage: tabMask,
+            WebkitMaskImage: tabMask,
+            scrollPaddingInline: "16px"
+          },
+          children: tabs.map((tab, index) => /* @__PURE__ */ jsxs10(
+            "button",
+            {
+              ref: (node) => {
+                tabRefs.current[index] = node;
+              },
+              id: `${tabsetId}-tab-${index}`,
+              type: "button",
+              role: "tab",
+              "aria-selected": tab.id === current,
+              "aria-controls": `${tabsetId}-panel-${index}`,
+              tabIndex: tab.id === current ? 0 : -1,
+              onClick: () => onTab(tab.id),
+              onKeyDown: (event) => onTabKeyDown(event, index),
+              className: cn(
+                "flex min-h-7 shrink-0 items-center justify-center gap-1 rounded-og-sm px-2 py-1 text-og-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent max-[1023px]:min-h-11 max-[1023px]:min-w-11 pointer-coarse:min-h-11 pointer-coarse:min-w-11",
+                tab.id === current ? "bg-og-accent-soft text-og-fg" : "text-og-fg-subtle hover:text-og-fg"
+              ),
+              children: [
+                /* @__PURE__ */ jsx12("span", { "data-contrast-audited": true, children: tab.label }),
+                tab.badge
+              ]
+            },
+            tab.id
+          ))
+        }
+      ),
+      /* @__PURE__ */ jsx12("div", { className: "flex min-w-0 shrink-0 items-center justify-self-end min-[640px]:max-[1023px]:col-start-3 min-[640px]:max-[1023px]:row-start-1", children: accessory }),
+      /* @__PURE__ */ jsx12("div", { className: "flex shrink-0 items-center gap-0.5 text-og-fg-subtle min-[640px]:max-[1023px]:col-start-4 min-[640px]:max-[1023px]:row-start-1", children: controls })
     ] }),
-    onOpenFile ? /* @__PURE__ */ jsxs10(
-      "button",
-      {
-        type: "button",
-        onClick: () => onOpenFile(file.path),
-        className: "inline-flex min-h-8 shrink-0 items-center gap-1.5 rounded-og-sm border border-og-border px-2 py-1 text-og-xs font-medium text-og-fg-muted transition-colors hover:border-og-border-strong hover:bg-og-surface-2 hover:text-og-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:min-h-11",
-        children: [
-          "Open in Files",
-          /* @__PURE__ */ jsx12(ArrowUpRightIcon, { className: "size-3.5", "aria-hidden": true })
-        ]
-      }
-    ) : null
+    /* @__PURE__ */ jsx12("div", { className: "min-h-0 min-w-0 flex-1 overflow-hidden", children: tabs.length > 0 ? tabs.map((tab, index) => {
+      const selected = tab.id === activeId;
+      const shouldMount = selected || visitedTabs.has(tab.id);
+      return /* @__PURE__ */ jsx12(
+        "div",
+        {
+          id: `${tabsetId}-panel-${index}`,
+          "aria-labelledby": `${tabsetId}-tab-${index}`,
+          className: "h-full min-h-0 min-w-0 overflow-hidden",
+          hidden: !selected,
+          role: "tabpanel",
+          children: shouldMount ? tab.content : null
+        },
+        tab.id
+      );
+    }) : /* @__PURE__ */ jsx12("div", { className: "h-full min-h-0 min-w-0", "aria-label": "Workspace", role: "tabpanel" }) })
   ] });
 }
-function LayoutToggle({
-  layout,
-  onChange
-}) {
-  return /* @__PURE__ */ jsx12("div", { className: "inline-flex items-center rounded-og-sm border border-og-border p-0.5", children: ["unified", "split"].map((value) => /* @__PURE__ */ jsx12(
-    "button",
-    {
-      type: "button",
-      onClick: () => onChange(value),
-      className: cn(
-        "min-h-7 rounded-og-xs px-1.5 py-0.5 text-og-xs capitalize focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent max-[1023px]:min-w-11 pointer-coarse:min-h-11 pointer-coarse:min-w-11",
-        layout === value ? "bg-og-accent-soft text-og-fg" : "text-og-fg-subtle hover:text-og-fg"
-      ),
-      children: value
-    },
-    value
-  )) });
-}
 
 // src/components/sandbox-workspace.tsx
+import { useCallback as useCallback22, useEffect as useEffect23, useMemo as useMemo11, useRef as useRef20, useState as useState20 } from "react";
+import { Popover } from "radix-ui";
+import {
+  CircleCheckIcon,
+  CpuIcon,
+  LaptopIcon,
+  LoaderCircleIcon as LoaderCircleIcon3,
+  RefreshCwIcon as RefreshCwIcon2,
+  TriangleAlertIcon as TriangleAlertIcon2
+} from "lucide-react";
 import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 var WORKBENCH_TAB_CHANGES = "changes";
 var WORKBENCH_TAB_FILES = "files";
@@ -8413,6 +8421,7 @@ export {
   FleetTile,
   HEALTH_TOKEN,
   HumanInputForm,
+  HumanInputSurface,
   INITIAL_TRANSCRIPTION_CONTROL_STATE,
   LightboxProvider,
   MACHINE_STATE_BADGE_META,
@@ -8471,6 +8480,7 @@ export {
   WORKBENCH_TAB_DESKTOP,
   WORKBENCH_TAB_FILES,
   WORKBENCH_TAB_TERMINAL,
+  WorkbenchChanges,
   WorkspaceDock,
   advancedSourceSummary,
   answersFromDrafts,