@opengeni/react 0.6.2 → 0.6.3

package/dist/index.js

@@ -16,6 +16,7 @@ import {
   connectionStatusForState,
   formatBytes,
   formatRelativeTime,
+  humanizeFailureReason,
   stringifyPayload,
   truncate,
   tryParseJson,
@@ -26,7 +27,7 @@ import {
   useOpenGeniClient,
   usePolledValue,
   useSessionEventTrigger
-} from "./chunk-DEW2ZNF2.js";
+} from "./chunk-5C7RGAWA.js";
 
 // src/hooks/use-session.ts
 import { useCallback, useState } from "react";
@@ -732,7 +733,7 @@ function failureMessage(payload) {
   for (const key of ["error", "message"]) {
     const value = payload[key];
     if (typeof value === "string" && value.trim().length > 0) {
-      return value;
+      return humanizeFailureReason(value);
     }
   }
   return null;
@@ -1028,6 +1029,88 @@ function unwrapMcpOutput(output) {
   }
   return { text: typeof output === "string" ? output : output == null ? "" : JSON.stringify(output), isError: false };
 }
+function screenshotDataUrl(out) {
+  if (typeof out === "string") {
+    if (out.startsWith("data:image")) {
+      return out;
+    }
+    if (out.startsWith("{") || out.startsWith("[")) {
+      const parsed = tryParseJson(out);
+      if (parsed !== void 0 && parsed !== out) {
+        return screenshotDataUrl(parsed);
+      }
+    }
+    return null;
+  }
+  if (Array.isArray(out)) {
+    for (const entry of out) {
+      const url = screenshotDataUrl(entry);
+      if (url) {
+        return url;
+      }
+    }
+    return null;
+  }
+  if (out === null || typeof out !== "object") {
+    return null;
+  }
+  const record = out;
+  const imageUrl = record.image_url ?? record.imageUrl;
+  if (typeof imageUrl === "string" && imageUrl.startsWith("data:image")) {
+    return imageUrl;
+  }
+  if (imageUrl && typeof imageUrl === "object") {
+    const url = imageUrl.url;
+    if (typeof url === "string" && url.startsWith("data:image")) {
+      return url;
+    }
+  }
+  const image = record.image;
+  if (image && typeof image === "object") {
+    const mediaType = typeof image.mediaType === "string" ? image.mediaType : "image/png";
+    const base64 = bytesToBase64(image.data);
+    if (base64) {
+      return `data:${mediaType};base64,${base64}`;
+    }
+    if (typeof image.data === "string" && image.data.length > 0) {
+      return `data:${mediaType};base64,${image.data}`;
+    }
+  }
+  return null;
+}
+function bytesToBase64(data) {
+  const isByte = (n) => typeof n === "number" && Number.isInteger(n) && n >= 0 && n <= 255;
+  let bytes = null;
+  if (Array.isArray(data) && data.every(isByte)) {
+    bytes = data;
+  } else if (data && typeof data === "object") {
+    const record = data;
+    if (record.type === "Buffer" && Array.isArray(record.data) && record.data.every(isByte)) {
+      bytes = record.data;
+    } else {
+      const keys = Object.keys(record);
+      if (keys.length > 0 && keys.every((key) => /^\d+$/.test(key))) {
+        const values = keys.sort((a, b) => Number(a) - Number(b)).map((key) => record[key]);
+        if (values.every(isByte)) {
+          bytes = values;
+        }
+      }
+    }
+  }
+  if (!bytes || bytes.length === 0) {
+    return null;
+  }
+  try {
+    let binary = "";
+    const CHUNK = 32768;
+    for (let i = 0; i < bytes.length; i += CHUNK) {
+      binary += String.fromCharCode(...bytes.slice(i, i + CHUNK));
+    }
+    return typeof btoa === "function" ? btoa(binary) : Buffer.from(binary, "binary").toString("base64");
+  } catch {
+    return null;
+  }
+}
 
 // src/timeline/shared.tsx
 import { CameraIcon, CameraOffIcon, ChevronRightIcon } from "lucide-react";
@@ -1131,7 +1214,7 @@ function LightboxRoot({ children }) {
                       }
                     )
                   ] }),
-                  state.caption ? /* @__PURE__ */ jsx2("figcaption", { className: "max-w-2xl text-center font-og-mono text-og-xs text-white/55", children: state.caption }) : /* @__PURE__ */ jsx2("figcaption", { className: "font-og-mono text-[10px] uppercase tracking-[0.1em] text-white/35", children: "Esc or click outside to close" })
+                  state.caption ? /* @__PURE__ */ jsx2("figcaption", { className: "max-w-2xl text-center font-og-mono text-og-xs text-white/55", children: state.caption }) : /* @__PURE__ */ jsx2("figcaption", { className: "font-og-mono text-og-xs uppercase tracking-[0.1em] text-white/35", children: "Esc or click outside to close" })
                 ] })
               ]
             }
@@ -1172,7 +1255,10 @@ function ActivityDisclosure({
   const previewVisible = preview != null && !open;
   const rowClass = cn(
     "group/disclosure flex w-full min-w-0 items-center gap-2 rounded-og-sm px-1.5 py-1.5 text-left text-og-base",
-    "text-og-fg-muted transition-colors duration-150"
+    "text-og-fg-muted transition-colors duration-150",
+    // A tool row is a touch target on coarse pointers: grow its padding so the
+    // hit area clears the 40px minimum without loosening the dense desktop rail.
+    "pointer-coarse:py-2.5"
   );
   const inner = /* @__PURE__ */ jsxs2(Fragment2, { children: [
     hasBody ? /* @__PURE__ */ jsx3(ChevronRightIcon, { className: "size-3.5 shrink-0 text-og-fg-subtle transition-transform duration-150 ease-og-in-out group-data-[state=open]/disclosure:rotate-90" }) : /* @__PURE__ */ jsx3("span", { className: "size-3.5 shrink-0" }),
@@ -1247,7 +1333,7 @@ function TermBlock({
   const shown = full || !big ? output : lines.slice(-tailLines).join("\n");
   const showMore = big && !full;
   const showHeader = command != null || workdir != null;
-  return /* @__PURE__ */ jsxs2("div", { className: "overflow-hidden rounded-og-sm border border-og-border bg-og-bg/70", children: [
+  return /* @__PURE__ */ jsxs2("div", { className: "min-w-0 overflow-hidden rounded-og-sm border border-og-border bg-og-bg/70", children: [
     showHeader ? /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 border-b border-og-border/70 px-2.5 py-1.5", children: [
       /* @__PURE__ */ jsx3("span", { className: "select-none text-og-status-idle", children: "$" }),
       command != null ? /* @__PURE__ */ jsx3("span", { className: "min-w-0 flex-1 truncate font-og-mono text-og-sm text-og-fg-muted", children: command }) : /* @__PURE__ */ jsx3("span", { className: "flex-1" }),
@@ -1412,7 +1498,7 @@ function DiffView({
     return /* @__PURE__ */ jsx4("div", { className, children: fallback });
   }
   if (diff.length === 0) {
-    return /* @__PURE__ */ jsx4("div", { className: cn("p-3 text-xs text-[color:var(--color-fg-subtle,#888)]", className), children: emptyState ?? (isRepo ? "No changes." : "No repository mounted.") });
+    return /* @__PURE__ */ jsx4("div", { className: cn("p-3 text-og-sm text-og-fg-subtle", className), children: emptyState ?? (isRepo ? "No changes" : "No repository mounted") });
   }
   return /* @__PURE__ */ jsx4("div", { className: cn("min-w-0 overflow-auto", className), "data-opengeni-diff": true, children: diff.map((file) => /* @__PURE__ */ jsx4(
     FileDiffBlock,
@@ -1431,24 +1517,24 @@ function FileDiffBlock({
   theme,
   onSelect
 }) {
-  return /* @__PURE__ */ jsxs3("section", { className: "mb-2 overflow-hidden rounded border border-[color:var(--color-border,#2a2a2a)]", children: [
+  return /* @__PURE__ */ jsxs3("section", { className: "mb-2 overflow-hidden rounded-og-sm border border-og-border", children: [
     /* @__PURE__ */ jsxs3(
       "header",
       {
         className: cn(
-          "flex items-center justify-between gap-2 border-b border-[color:var(--color-border,#2a2a2a)] bg-[color:var(--color-bg-subtle,#161616)] px-2 py-1 text-xs",
+          "flex items-center justify-between gap-2 border-b border-og-border bg-og-surface-1 px-2 py-1 text-og-sm",
           onSelect && "cursor-pointer"
         ),
         onClick: onSelect,
         children: [
-          /* @__PURE__ */ jsx4("span", { className: "truncate font-mono", children: file.oldPath && file.oldPath !== file.path ? `${file.oldPath} \u2192 ${file.path}` : file.path }),
+          /* @__PURE__ */ jsx4("span", { className: "truncate font-og-mono", children: file.oldPath && file.oldPath !== file.path ? `${file.oldPath} \u2192 ${file.path}` : file.path }),
           /* @__PURE__ */ jsxs3("span", { className: "flex shrink-0 items-center gap-2", children: [
-            /* @__PURE__ */ jsx4("span", { className: "rounded bg-[color:var(--color-bg,#0d0d0d)] px-1 py-0.5 text-[10px] uppercase tracking-wide text-[color:var(--color-fg-subtle,#888)]", children: STATUS_LABEL[file.status] }),
-            /* @__PURE__ */ jsxs3("span", { className: "text-[color:var(--color-success,#3fb950)]", children: [
+            /* @__PURE__ */ jsx4("span", { className: "rounded-og-xs bg-og-bg px-1 py-0.5 text-og-xs text-og-fg-subtle", children: STATUS_LABEL[file.status] }),
+            /* @__PURE__ */ jsxs3("span", { className: "text-og-status-idle", children: [
               "+",
               file.additions
             ] }),
-            /* @__PURE__ */ jsxs3("span", { className: "text-[color:var(--color-danger,#f85149)]", children: [
+            /* @__PURE__ */ jsxs3("span", { className: "text-og-status-failed", children: [
               "\u2212",
               file.deletions
             ] })
@@ -1456,12 +1542,12 @@ function FileDiffBlock({
         ]
       }
     ),
-    file.isBinary ? /* @__PURE__ */ jsx4("div", { className: "px-2 py-3 text-xs text-[color:var(--color-fg-subtle,#888)]", children: "Binary file not shown." }) : file.truncated ? /* @__PURE__ */ jsx4("div", { className: "px-2 py-3 text-xs text-[color:var(--color-fg-subtle,#888)]", children: "Diff too large \u2014 truncated." }) : layout === "split" ? /* @__PURE__ */ jsx4(SplitHunks, { file, theme }) : /* @__PURE__ */ jsx4(UnifiedHunks, { file, theme })
+    file.isBinary ? /* @__PURE__ */ jsx4("div", { className: "px-2 py-3 text-og-sm text-og-fg-subtle", children: "Binary file not shown" }) : file.truncated ? /* @__PURE__ */ jsx4("div", { className: "px-2 py-3 text-og-sm text-og-fg-subtle", children: "Diff too large \u2014 truncated" }) : layout === "split" ? /* @__PURE__ */ jsx4(SplitHunks, { file, theme }) : /* @__PURE__ */ jsx4(UnifiedHunks, { file, theme })
   ] });
 }
 function lineBg(type, theme) {
-  if (type === "add") return theme?.addBackground ?? "var(--color-diff-add, rgba(63,185,80,0.15))";
-  if (type === "del") return theme?.delBackground ?? "var(--color-diff-del, rgba(248,81,73,0.15))";
+  if (type === "add") return theme?.addBackground ?? "var(--og-color-diff-add-bg)";
+  if (type === "del") return theme?.delBackground ?? "var(--og-color-diff-del-bg)";
   if (type === "meta") return void 0;
   return theme?.contextBackground;
 }
@@ -1471,11 +1557,11 @@ function marker(type) {
   return " ";
 }
 function UnifiedHunks({ file, theme }) {
-  return /* @__PURE__ */ jsx4("div", { className: "font-mono text-[11px] leading-tight", children: file.hunks.map((hunk, hi) => /* @__PURE__ */ jsxs3("div", { children: [
+  return /* @__PURE__ */ jsx4("div", { className: "font-og-mono text-og-xs", children: file.hunks.map((hunk, hi) => /* @__PURE__ */ jsxs3("div", { children: [
     /* @__PURE__ */ jsx4(
       "div",
       {
-        className: "px-2 py-0.5 text-[color:var(--color-info,#58a6ff)]",
+        className: "px-2 py-0.5 text-og-accent",
         style: { color: theme?.metaForeground },
         children: hunk.header
       }
@@ -1486,9 +1572,9 @@ function UnifiedHunks({ file, theme }) {
         className: "flex",
         style: { backgroundColor: lineBg(line.type, theme) },
         children: [
-          /* @__PURE__ */ jsx4("span", { className: "w-10 shrink-0 select-none px-1 text-right text-[color:var(--color-fg-subtle,#666)]", children: line.oldNo ?? "" }),
-          /* @__PURE__ */ jsx4("span", { className: "w-10 shrink-0 select-none px-1 text-right text-[color:var(--color-fg-subtle,#666)]", children: line.newNo ?? "" }),
-          /* @__PURE__ */ jsx4("span", { className: "w-4 shrink-0 select-none text-center text-[color:var(--color-fg-subtle,#888)]", children: marker(line.type) }),
+          /* @__PURE__ */ jsx4("span", { className: "w-10 shrink-0 select-none px-1 text-right text-og-fg-subtle", children: line.oldNo ?? "" }),
+          /* @__PURE__ */ jsx4("span", { className: "w-10 shrink-0 select-none px-1 text-right text-og-fg-subtle", children: line.newNo ?? "" }),
+          /* @__PURE__ */ jsx4("span", { className: "w-4 shrink-0 select-none text-center text-og-fg-subtle", children: marker(line.type) }),
           /* @__PURE__ */ jsx4("span", { className: "whitespace-pre-wrap break-all px-1", children: line.text })
         ]
       },
@@ -1497,7 +1583,7 @@ function UnifiedHunks({ file, theme }) {
   ] }, `${file.path}-h${hi}`)) });
 }
 function SplitHunks({ file, theme }) {
-  return /* @__PURE__ */ jsx4("div", { className: "font-mono text-[11px] leading-tight", children: file.hunks.map((hunk, hi) => {
+  return /* @__PURE__ */ jsx4("div", { className: "font-og-mono text-og-xs", children: file.hunks.map((hunk, hi) => {
     const left = [];
     const right = [];
     for (const line of hunk.lines) {
@@ -1512,7 +1598,7 @@ function SplitHunks({ file, theme }) {
     }
     const rows = Math.max(left.length, right.length);
     return /* @__PURE__ */ jsxs3("div", { children: [
-      /* @__PURE__ */ jsx4("div", { className: "px-2 py-0.5 text-[color:var(--color-info,#58a6ff)]", style: { color: theme?.metaForeground }, children: hunk.header }),
+      /* @__PURE__ */ jsx4("div", { className: "px-2 py-0.5 text-og-accent", style: { color: theme?.metaForeground }, children: hunk.header }),
       Array.from({ length: rows }).map((_, ri) => {
         const l = left[ri] ?? null;
         const r = right[ri] ?? null;
@@ -1523,7 +1609,7 @@ function SplitHunks({ file, theme }) {
               className: "flex w-1/2 min-w-0",
               style: { backgroundColor: l ? lineBg(l.type, theme) : void 0 },
               children: [
-                /* @__PURE__ */ jsx4("span", { className: "w-10 shrink-0 select-none px-1 text-right text-[color:var(--color-fg-subtle,#666)]", children: l?.oldNo ?? "" }),
+                /* @__PURE__ */ jsx4("span", { className: "w-10 shrink-0 select-none px-1 text-right text-og-fg-subtle", children: l?.oldNo ?? "" }),
                 /* @__PURE__ */ jsx4("span", { className: "whitespace-pre-wrap break-all px-1", children: l?.text ?? "" })
               ]
             }
@@ -1531,10 +1617,10 @@ function SplitHunks({ file, theme }) {
           /* @__PURE__ */ jsxs3(
             "span",
             {
-              className: "flex w-1/2 min-w-0 border-l border-[color:var(--color-border,#2a2a2a)]",
+              className: "flex w-1/2 min-w-0 border-l border-og-border",
               style: { backgroundColor: r ? lineBg(r.type, theme) : void 0 },
               children: [
-                /* @__PURE__ */ jsx4("span", { className: "w-10 shrink-0 select-none px-1 text-right text-[color:var(--color-fg-subtle,#666)]", children: r?.newNo ?? "" }),
+                /* @__PURE__ */ jsx4("span", { className: "w-10 shrink-0 select-none px-1 text-right text-og-fg-subtle", children: r?.newNo ?? "" }),
                 /* @__PURE__ */ jsx4("span", { className: "whitespace-pre-wrap break-all px-1", children: r?.text ?? "" })
               ]
             }
@@ -1619,12 +1705,12 @@ function PierreDiff({
     themeType: themeType ?? "dark"
   };
   const pierreVars = {
-    "--diffs-dark-bg": "var(--og-color-bg, #0d0d0d)",
-    "--diffs-light-bg": "var(--og-color-bg, #ffffff)",
-    "--diffs-bg-buffer-override": "var(--og-color-surface-1, #161616)",
-    "--diffs-bg-separator-override": "var(--og-color-surface-1, #161616)",
-    "--diffs-font-size": "12.5px",
-    "--diffs-line-height": "20px"
+    "--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__ */ jsx5(
     "div",
@@ -1644,7 +1730,7 @@ function PierreDiff({
   );
 }
 function DiffSkeleton() {
-  return /* @__PURE__ */ jsx5("div", { className: "p-3 text-xs text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]", children: "Loading diff\u2026" });
+  return /* @__PURE__ */ jsx5("div", { className: "p-3 text-og-sm text-og-fg-subtle", children: "Loading diff\u2026" });
 }
 
 // src/timeline/tool-diff.tsx
@@ -1672,7 +1758,7 @@ function LayoutToggle({ layout, onChange }) {
       type: "button",
       onClick: () => onChange(value),
       className: cn(
-        "rounded-[5px] px-2 py-[3px] text-[11px] font-medium capitalize transition-colors",
+        "rounded-og-xs px-2 py-[3px] text-og-xs font-medium capitalize transition-colors",
         layout === value ? "bg-og-surface-2 text-og-fg" : "text-og-fg-subtle hover:text-og-fg-muted"
       ),
       children: value
@@ -2024,16 +2110,34 @@ function computerVerb(action) {
       return action.type;
   }
 }
+function asComputerArgs(args) {
+  if (!args) {
+    return {};
+  }
+  const parsed = typeof args === "string" ? tryParseJson(args) : args;
+  if (!parsed || typeof parsed !== "object") {
+    return {};
+  }
+  const record = parsed;
+  return {
+    ...typeof record.x === "number" ? { x: record.x } : {},
+    ...typeof record.y === "number" ? { y: record.y } : {},
+    ...typeof record.text === "string" ? { text: record.text } : {},
+    ...Array.isArray(record.keys) ? { keys: record.keys } : {},
+    ...typeof record.button === "string" ? { button: record.button } : {}
+  };
+}
 function ComputerCallRenderer({ item }) {
   const raw = item.raw ?? {};
-  const action = raw.action;
+  const functionAction = !raw.action && item.name.startsWith("computer_") && item.name !== "computer_call" ? { type: item.name.slice("computer_".length), ...asComputerArgs(item.arguments) } : void 0;
+  const action = raw.action ?? functionAction;
   const actions = raw.actions ?? (action ? [action] : []);
   const verb = computerVerb(action);
   const out = item.output;
   const running = item.status === "running";
   const rejected = raw.providerData?.approvalStatus === "rejected";
   const readOnly = typeof out === "string" && out.includes("read-only");
-  const isImage2 = typeof out === "string" && out.startsWith("data:image");
+  const shotUrl = screenshotDataUrl(out);
   const empty = out === "" || out == null;
   const batched = actions.length > 1 ? actions.map((a) => computerVerb(a)).join(" \xB7 ") : null;
   const countSuffix = actions.length > 1 ? ` \xB7${actions.length}` : "";
@@ -2078,8 +2182,8 @@ function ComputerCallRenderer({ item }) {
   }
   const isFailed = item.status === "failed";
   const isCancelled = item.status === "cancelled";
-  if (isImage2 && typeof out === "string") {
-    const caption = `computer_call \xB7 ${verb}${actions.length > 1 ? ` (+${actions.length - 1} more)` : ""}`;
+  if (shotUrl) {
+    const caption = `${verb}${actions.length > 1 ? ` (+${actions.length - 1} more)` : ""}`;
     return /* @__PURE__ */ jsxs5(
       ActivityDisclosure,
       {
@@ -2088,9 +2192,9 @@ function ComputerCallRenderer({ item }) {
         title: `${verb}${countSuffix}`,
         failed: isFailed,
         cancelled: isCancelled,
-        media: /* @__PURE__ */ jsx7(Thumbnail, { src: out, caption }),
+        media: /* @__PURE__ */ jsx7(Thumbnail, { src: shotUrl, caption }),
         children: [
-          /* @__PURE__ */ jsx7(ScreenshotFigure, { src: out, caption }),
+          /* @__PURE__ */ jsx7(ScreenshotFigure, { src: shotUrl, caption }),
           batched ? /* @__PURE__ */ jsxs5(BodyNote, { children: [
             "batched: ",
             batched
@@ -2368,6 +2472,15 @@ var BASE_ENTRIES = [
   { match: "name", name: "write_stdin", render: WriteStdinRenderer },
   { match: "name", name: "apply_patch_call", render: ApplyPatchRenderer },
   { match: "name", name: "computer_call", render: ComputerCallRenderer },
+  // Function-mode computer tools (codex / chat-wire transports).
+  { match: "name", name: "computer_screenshot", render: ComputerCallRenderer },
+  { match: "name", name: "computer_click", render: ComputerCallRenderer },
+  { match: "name", name: "computer_double_click", render: ComputerCallRenderer },
+  { match: "name", name: "computer_move", render: ComputerCallRenderer },
+  { match: "name", name: "computer_scroll", render: ComputerCallRenderer },
+  { match: "name", name: "computer_type", render: ComputerCallRenderer },
+  { match: "name", name: "computer_keypress", render: ComputerCallRenderer },
+  { match: "name", name: "computer_drag", render: ComputerCallRenderer },
   { match: "name", name: "web_search_call", render: WebSearchRenderer },
   { match: "name", name: "view_image", render: ViewImageRenderer },
   { match: "name", name: "environment_set_variable", render: SecretSetRenderer }
@@ -2497,7 +2610,7 @@ function WorkerRow({ item, onOpenSession }) {
             type: "button",
             onClick: () => item.workerSessionId && onOpenSession(item.workerSessionId),
             className: cn(
-              "shrink-0 self-center rounded-og-sm border border-og-border px-2.5 py-1 text-og-sm font-medium text-og-fg-muted",
+              "shrink-0 self-center rounded-og-sm border border-og-border px-2.5 py-1 text-og-sm font-medium text-og-fg-muted pointer-coarse:py-2",
               "outline-none transition-colors duration-150 hover:border-og-border-strong hover:text-og-fg",
               "focus-visible:ring-2 focus-visible:ring-og-accent"
             ),
@@ -2524,6 +2637,9 @@ function TurnSummary({ items, outcome, failureText, durationMs, defaultOpen, chi
       {
         className: cn(
           "group flex w-full items-center gap-2.5 rounded-og-md border px-3 py-2 text-left text-og-base transition-colors",
+          // A folded turn is a touch target on coarse pointers: grow the row so
+          // it clears the 40px minimum without disturbing the calm desktop rhythm.
+          "pointer-coarse:py-2.5",
           // Only a failed turn earns the one filled/tinted card in the timeline;
           // complete and cancelled stay flat and calm.
           outcome === "failed" ? "border-og-status-failed/30 bg-og-status-failed/[0.06] hover:border-og-status-failed/50" : "border-og-border bg-og-surface-1/50 hover:border-og-border-strong"
@@ -2547,7 +2663,19 @@ function TurnSummary({ items, outcome, failureText, durationMs, defaultOpen, chi
               failureText
             ] }) : null,
             outcome === "cancelled" ? /* @__PURE__ */ jsx9("span", { className: "text-og-fg-subtle", children: " \xB7 interrupted" }) : null
-          ] })
+          ] }),
+          /* @__PURE__ */ jsx9(
+            "span",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "ml-auto shrink-0 pl-2 text-og-xs text-og-fg-subtle transition-opacity duration-150",
+                "opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100",
+                "pointer-coarse:opacity-100"
+              ),
+              children: open ? "hide steps" : "show steps"
+            }
+          )
         ]
       }
     ),
@@ -2566,8 +2694,8 @@ function summarizeTurn(items, durationMs) {
       files += applyPatchOps(item.raw).length;
     } else if (item.name === "exec_command") {
       commands += 1;
-    } else if (rawTypeOf(item) === "computer_call" || item.name === "computer_call") {
-      if (typeof item.output === "string" && item.output.startsWith("data:image")) {
+    } else if (rawTypeOf(item) === "computer_call" || item.name === "computer_call" || item.name === "computer_screenshot") {
+      if (screenshotDataUrl(item.output) !== null) {
         screenshots += 1;
       }
     }
@@ -2812,15 +2940,28 @@ function generateClientEventId() {
 }
 
 // src/hooks/use-file-attachments.ts
-import { useCallback as useCallback4, useState as useState10 } from "react";
+import { useCallback as useCallback4, useRef as useRef3, useState as useState10 } from "react";
 var isImage = (file) => file.type.startsWith("image/");
 function useFileAttachments(options = {}) {
   const { client, workspaceId } = useOpenGeni(options);
   const pasteFilter = options.pasteFilter ?? isImage;
   const [attachments, setAttachments] = useState10([]);
+  const sources = useRef3(/* @__PURE__ */ new Map());
+  const startUpload = useCallback4((id, file) => {
+    void client.uploadFile(workspaceId, {
+      filename: file.name || "file",
+      contentType: file.type || "application/octet-stream",
+      data: file
+    }).then((asset) => {
+      setAttachments((current) => current.map((attachment) => attachment.id === id ? { ...attachment, status: "ready", file: asset, name: asset.filename, contentType: asset.contentType, sizeBytes: asset.sizeBytes, error: void 0 } : attachment));
+    }).catch((error) => {
+      setAttachments((current) => current.map((attachment) => attachment.id === id ? { ...attachment, status: "failed", error: error instanceof Error ? error.message : String(error) } : attachment));
+    });
+  }, [client, workspaceId]);
   const addFiles = useCallback4((files) => {
     for (const file of files) {
       const id = crypto.randomUUID();
+      sources.current.set(id, file);
       const previewUrl = isImage(file) ? URL.createObjectURL(file) : void 0;
       setAttachments((current) => [...current, {
         id,
@@ -2830,17 +2971,17 @@ function useFileAttachments(options = {}) {
         status: "uploading",
         ...previewUrl ? { previewUrl } : {}
       }]);
-      void client.uploadFile(workspaceId, {
-        filename: file.name || "file",
-        contentType: file.type || "application/octet-stream",
-        data: file
-      }).then((asset) => {
-        setAttachments((current) => current.map((attachment) => attachment.id === id ? { ...attachment, status: "ready", file: asset, name: asset.filename, contentType: asset.contentType, sizeBytes: asset.sizeBytes } : attachment));
-      }).catch((error) => {
-        setAttachments((current) => current.map((attachment) => attachment.id === id ? { ...attachment, status: "failed", error: error instanceof Error ? error.message : String(error) } : attachment));
-      });
+      startUpload(id, file);
     }
-  }, [client, workspaceId]);
+  }, [startUpload]);
+  const retry = useCallback4((id) => {
+    const file = sources.current.get(id);
+    if (!file) {
+      return;
+    }
+    setAttachments((current) => current.map((attachment) => attachment.id === id ? { ...attachment, status: "uploading", error: void 0 } : attachment));
+    startUpload(id, file);
+  }, [startUpload]);
   const addFromPaste = useCallback4((event) => {
     const clipboardFiles = event.clipboardData?.files;
     if (!clipboardFiles) {
@@ -2852,6 +2993,7 @@ function useFileAttachments(options = {}) {
     }
   }, [addFiles, pasteFilter]);
   const remove = useCallback4((id) => {
+    sources.current.delete(id);
     setAttachments((current) => {
       const removed = current.find((attachment) => attachment.id === id);
       if (removed?.previewUrl) {
@@ -2861,6 +3003,7 @@ function useFileAttachments(options = {}) {
     });
   }, []);
   const clear = useCallback4(() => {
+    sources.current.clear();
     setAttachments((current) => {
       for (const attachment of current) {
         if (attachment.previewUrl) {
@@ -2876,13 +3019,14 @@ function useFileAttachments(options = {}) {
     uploading: attachments.some((attachment) => attachment.status === "uploading"),
     addFiles,
     addFromPaste,
+    retry,
     remove,
     clear
   };
 }
 
 // src/hooks/use-turn-queue.ts
-import { useCallback as useCallback5, useEffect as useEffect5, useRef as useRef3, useState as useState11 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect5, useRef as useRef4, useState as useState11 } from "react";
 function isTurnQueueEvent(event) {
   return event.type.startsWith("turn.");
 }
@@ -2926,8 +3070,8 @@ function useTurnQueue(sessionId, options = {}) {
   const [loading, setLoading] = useState11(enabled);
   const [error, setError] = useState11(null);
   const mutation = useMutationRunner();
-  const generation = useRef3(0);
-  const targetKeyRef = useRef3(null);
+  const generation = useRef4(0);
+  const targetKeyRef = useRef4(null);
   const load = useCallback5(async () => {
     if (!sessionId) {
       return;
@@ -3046,7 +3190,7 @@ function useTurnQueue(sessionId, options = {}) {
 
 // src/hooks/use-goal.ts
 import { OpenGeniApiError } from "@opengeni/sdk";
-import { useCallback as useCallback6, useEffect as useEffect6, useRef as useRef4, useState as useState12 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect6, useRef as useRef5, useState as useState12 } from "react";
 function isGoalEvent(event) {
   return event.type.startsWith("goal.");
 }
@@ -3059,8 +3203,8 @@ function useGoal(sessionId, options = {}) {
   const [loading, setLoading] = useState12(enabled);
   const [error, setError] = useState12(null);
   const mutation = useMutationRunner();
-  const generation = useRef4(0);
-  const targetKeyRef = useRef4(null);
+  const generation = useRef5(0);
+  const targetKeyRef = useRef5(null);
   const load = useCallback6(async () => {
     if (!sessionId) {
       return;
@@ -3465,7 +3609,7 @@ import {
   OpenGeniApiError as OpenGeniApiError2,
   applyUrlRotation
 } from "@opengeni/sdk";
-import { useCallback as useCallback15, useEffect as useEffect7, useRef as useRef5, useState as useState13 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect7, useRef as useRef6, useState as useState13 } from "react";
 function desktopAttachable(cell) {
   if (cell.transport !== null) return true;
   return cell.reason === "lease_cold" || cell.reason === "not_provisioned" || cell.reason === null;
@@ -3500,8 +3644,8 @@ function useSessionCapabilities(sessionId, options = {}) {
   const [viewerCapReached, setViewerCapReached] = useState13(false);
   const [viewerId, setViewerId] = useState13(null);
   const [nonce, setNonce] = useState13(0);
-  const epochRef = useRef5(0);
-  const viewerIdRef = useRef5(null);
+  const epochRef = useRef6(0);
+  const viewerIdRef = useRef6(null);
   const renegotiate = useCallback15(() => {
     setNonce((n) => n + 1);
   }, []);
@@ -3700,7 +3844,7 @@ import {
   desktopSocketUrl,
   nextDesktopState
 } from "@opengeni/sdk";
-import { useEffect as useEffect9, useRef as useRef7, useState as useState15 } from "react";
+import { useEffect as useEffect9, useRef as useRef8, useState as useState15 } from "react";
 
 // src/lib/relay-wire.ts
 import { BinaryReader, BinaryWriter } from "@bufbuild/protobuf/wire";
@@ -3773,7 +3917,7 @@ function decodeStreamFrame(bytes) {
 }
 
 // src/hooks/use-relay-frame-stream.ts
-import { useEffect as useEffect8, useRef as useRef6, useState as useState14 } from "react";
+import { useEffect as useEffect8, useRef as useRef7, useState as useState14 } from "react";
 var TAG_OPEN = 1;
 var TAG_OPENACK = 2;
 var TAG_FRAME = 3;
@@ -3791,7 +3935,7 @@ function useRelayFrameStream(options) {
   const [state, setState] = useState14("idle");
   const [error, setError] = useState14(null);
   const [nonce, setNonce] = useState14(0);
-  const stateRef = useRef6("idle");
+  const stateRef = useRef7("idle");
   const setBoth = (next) => {
     stateRef.current = next;
     setState(next);
@@ -3800,7 +3944,7 @@ function useRelayFrameStream(options) {
   const transport = capability?.transport ?? null;
   const url = capability?.url ?? null;
   const token = capability?.token ?? null;
-  const factoryRef = useRef6(webSocketFactory);
+  const factoryRef = useRef7(webSocketFactory);
   factoryRef.current = webSocketFactory;
   useEffect8(() => {
     if (typeof window === "undefined") return;
@@ -3994,7 +4138,7 @@ function useDesktopStream(options) {
   const [state, setState] = useState15("idle");
   const [error, setError] = useState15(null);
   const [nonce, setNonce] = useState15(0);
-  const stateRef = useRef7("idle");
+  const stateRef = useRef8("idle");
   const setBoth = (next) => {
     stateRef.current = next;
     setState(next);
@@ -4004,11 +4148,11 @@ function useDesktopStream(options) {
   const token = capability?.token ?? null;
   const transport = capability?.transport ?? null;
   const mode = capability?.mode ?? "read-only";
-  const rfbRef = useRef7(null);
-  const interactiveRef = useRef7(interactive);
-  const scaleViewportRef = useRef7(scaleViewport);
-  const modeRef = useRef7(mode);
-  const rfbFactoryRef = useRef7(rfbFactory);
+  const rfbRef = useRef8(null);
+  const interactiveRef = useRef8(interactive);
+  const scaleViewportRef = useRef8(scaleViewport);
+  const modeRef = useRef8(mode);
+  const rfbFactoryRef = useRef8(rfbFactory);
   interactiveRef.current = interactive;
   scaleViewportRef.current = scaleViewport;
   modeRef.current = mode;
@@ -4101,7 +4245,7 @@ import {
   ttydResizeFrame,
   TtydServerCommand
 } from "@opengeni/sdk";
-import { useEffect as useEffect10, useMemo as useMemo3, useRef as useRef8, useState as useState16 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo3, useRef as useRef9, useState as useState16 } from "react";
 function decodeFrame(data) {
   if (typeof data === "string") {
     return { command: data.charAt(0), payload: data.slice(1) };
@@ -4114,13 +4258,13 @@ function decodeFrame(data) {
 function useTerminalStream(options) {
   const { capability, onOutput, onTitle, initialCols, initialRows } = options;
   const [status, setStatus] = useState16("closed");
-  const wsRef = useRef8(null);
-  const sizeRef = useRef8({
+  const wsRef = useRef9(null);
+  const sizeRef = useRef9({
     cols: initialCols ?? 80,
     rows: initialRows ?? 24
   });
-  const onOutputRef = useRef8(onOutput);
-  const onTitleRef = useRef8(onTitle);
+  const onOutputRef = useRef9(onOutput);
+  const onTitleRef = useRef9(onTitle);
   onOutputRef.current = onOutput;
   onTitleRef.current = onTitle;
   const transport = capability?.transport ?? null;
@@ -4223,7 +4367,7 @@ function useTerminalStream(options) {
 
 // src/hooks/use-sandbox-terminal.ts
 import { OpenGeniApiError as OpenGeniApiError3 } from "@opengeni/sdk";
-import { useCallback as useCallback16, useEffect as useEffect11, useMemo as useMemo4, useRef as useRef9, useState as useState17 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect11, useMemo as useMemo4, useRef as useRef10, useState as useState17 } from "react";
 function useSandboxTerminal(sessionId, options) {
   const { client, workspaceId } = useOpenGeni(options);
   const includeAgentFirehose = options.includeAgentFirehose ?? true;
@@ -4233,7 +4377,7 @@ function useSandboxTerminal(sessionId, options) {
   const [openedPtyId, setOpenedPtyId] = useState17(null);
   const [openError, setOpenError] = useState17(null);
   const [reopenNonce, setReopenNonce] = useState17(0);
-  const openInFlight = useRef9(false);
+  const openInFlight = useRef10(false);
   const boxWarm = liveness === void 0 || liveness === "warm" || liveness === "draining";
   useEffect11(() => {
     if (!interactive || !sessionId || ptyFilter || !boxWarm) return;
@@ -4339,7 +4483,7 @@ function useSandboxTerminal(sessionId, options) {
 }
 
 // src/hooks/use-sandbox-files.ts
-import { useCallback as useCallback17, useEffect as useEffect12, useRef as useRef10, useState as useState18 } from "react";
+import { useCallback as useCallback17, useEffect as useEffect12, useRef as useRef11, useState as useState18 } from "react";
 function parentOf(path) {
   const i = path.lastIndexOf("/");
   return i <= 0 ? "" : path.slice(0, i);
@@ -4459,12 +4603,12 @@ function useSandboxFiles(sessionId, options = {}) {
   const enabled = (options.enabled ?? true) && Boolean(sessionId);
   const rootPath = options.rootPath ?? "";
   const [tree, setTree] = useState18([]);
-  const treeRef = useRef10([]);
+  const treeRef = useRef11([]);
   const [loading, setLoading] = useState18(false);
   const [expandingPaths, setExpandingPaths] = useState18(/* @__PURE__ */ new Set());
   const [error, setError] = useState18(null);
-  const statusRef = useRef10(/* @__PURE__ */ new Map());
-  const ownRevisionsRef = useRef10(/* @__PURE__ */ new Set());
+  const statusRef = useRef11(/* @__PURE__ */ new Map());
+  const ownRevisionsRef = useRef11(/* @__PURE__ */ new Set());
   const onMutationError = options.onMutationError;
   treeRef.current = tree;
   const applyStatus = useCallback17((nodes) => {
@@ -4679,10 +4823,10 @@ function useSandboxFiles(sessionId, options = {}) {
     }
   }, [client, workspaceId, sessionId, rootPath, applyStatus]);
   const events = options.events;
-  const lastSeqRef = useRef10(0);
-  const pendingParentsRef = useRef10(/* @__PURE__ */ new Set());
-  const pendingGitRef = useRef10(false);
-  const debounceRef = useRef10(null);
+  const lastSeqRef = useRef11(0);
+  const pendingParentsRef = useRef11(/* @__PURE__ */ new Set());
+  const pendingGitRef = useRef11(false);
+  const debounceRef = useRef11(null);
   useEffect12(() => {
     if (!enabled || !events) return;
     let sawNew = false;
@@ -4726,7 +4870,7 @@ function useSandboxFiles(sessionId, options = {}) {
     },
     []
   );
-  const wasLiveRef = useRef10(false);
+  const wasLiveRef = useRef11(false);
   const liveness = options.liveness;
   useEffect12(() => {
     const live = liveness === "warm" || liveness === "draining";
@@ -4754,7 +4898,7 @@ function useSandboxFiles(sessionId, options = {}) {
 }
 
 // src/hooks/use-sandbox-git.ts
-import { useCallback as useCallback18, useEffect as useEffect13, useRef as useRef11, useState as useState19 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect13, useRef as useRef12, useState as useState19 } from "react";
 function useSandboxGit(sessionId, options = {}) {
   const { client, workspaceId } = useOpenGeni(options);
   const enabled = (options.enabled ?? true) && Boolean(sessionId);
@@ -4799,7 +4943,7 @@ function useSandboxGit(sessionId, options = {}) {
     void refresh();
   }, [enabled, refresh]);
   const events = options.events;
-  const lastChangeRef = useRef11(0);
+  const lastChangeRef = useRef12(0);
   useEffect13(() => {
     if (!enabled || !events) return;
     let latest = lastChangeRef.current;
@@ -5048,14 +5192,14 @@ function clearErrorMessage(cause) {
 }
 
 // src/hooks/use-slash-commands.ts
-import { useCallback as useCallback19, useMemo as useMemo5, useRef as useRef12, useState as useState20 } from "react";
+import { useCallback as useCallback19, useMemo as useMemo5, useRef as useRef13, useState as useState20 } from "react";
 function useSlashCommands(options) {
   const { commands, context, handlers, value, setValue } = options;
   const [highlight, setHighlight] = useState20(0);
   const [dismissedValue, setDismissedValue] = useState20(null);
   const dismissed = dismissedValue !== null && dismissedValue === value;
-  const navigatedRef = useRef12(false);
-  const navTokenRef = useRef12(value);
+  const navigatedRef = useRef13(false);
+  const navTokenRef = useRef13(value);
   if (navTokenRef.current !== value) {
     navTokenRef.current = value;
     navigatedRef.current = false;
@@ -5182,7 +5326,7 @@ function useSlashCommands(options) {
     },
     [items, runResolved]
   );
-  const runningRef = useRef12(false);
+  const runningRef = useRef13(false);
   const onKeyDown = useCallback19(
     (event) => {
       if (!open) {
@@ -5323,9 +5467,9 @@ function CommandPalette({ open, items, highlight, onHighlight, onRun, argHintTex
 }
 
 // src/components/chat-composer.tsx
-import { ArrowUpIcon, FileIcon, ImageIcon as ImageIcon2, LoaderCircleIcon, PaperclipIcon, SquareIcon, XIcon as XIcon2 } from "lucide-react";
+import { ArrowUpIcon, FileIcon, ImageIcon as ImageIcon2, LoaderCircleIcon, PaperclipIcon, RotateCwIcon, SquareIcon, XIcon as XIcon2 } from "lucide-react";
 import { AnimatePresence as AnimatePresence3, motion as motion3 } from "motion/react";
-import { useCallback as useCallback20, useEffect as useEffect14, useId as useId2, useMemo as useMemo7, useRef as useRef13, useState as useState21 } from "react";
+import { useCallback as useCallback20, useEffect as useEffect14, useId as useId2, useMemo as useMemo7, useRef as useRef14, useState as useState21 } from "react";
 
 // src/components/model-picker.tsx
 import { ChevronDownIcon } from "lucide-react";
@@ -5402,8 +5546,8 @@ function ChatComposer({
   commandContext,
   onClearView
 }) {
-  const textareaRef = useRef13(null);
-  const fileInputRef = useRef13(null);
+  const textareaRef = useRef14(null);
+  const fileInputRef = useRef14(null);
   const active = status != null && ACTIVE_STATUSES.has(status);
   const blockedByUpload = attachments?.uploading === true;
   const hasReadyAttachment = (attachments?.readyResources.length ?? 0) > 0;
@@ -5545,217 +5689,258 @@ function ChatComposer({
     [commands, commandContext]
   );
   const activeNotice = notice ?? (composer.error ? { tone: "error", message: composer.error.message || "Sending failed \u2014 your draft is still here. Try again." } : null);
-  return /* @__PURE__ */ jsxs10("div", { className: cn("og-root", className), children: [
-    /* @__PURE__ */ jsxs10("div", { className: "relative", children: [
-      paletteEnabled ? /* @__PURE__ */ jsx12(
-        CommandPalette,
-        {
-          open: palette.open && confirmState === null,
-          items: palette.items,
-          highlight: palette.highlight,
-          onHighlight: palette.setHighlight,
-          onRun: (index) => {
-            palette.setHighlight(index);
-            void palette.runAt(index);
-          },
-          argHintText: palette.activeArgHint,
-          listboxId
-        }
-      ) : null,
-      /* @__PURE__ */ jsxs10(
-        "div",
-        {
-          onDragOver: attachments ? handleDragOver : void 0,
-          onDragLeave: attachments ? handleDragLeave : void 0,
-          onDrop: attachments ? handleDrop : void 0,
-          className: cn(
-            "relative rounded-og-lg border border-og-border bg-og-surface-1 shadow-og-sm",
-            "transition-[border-color,box-shadow] duration-200",
-            "focus-within:border-og-accent/60 focus-within:shadow-og-glow",
-            // While files are dragged over, swap to a dashed accent border to
-            // signal a live drop target (the overlay carries the label).
-            dragging && "border-dashed border-og-accent"
-          ),
-          children: [
-            dragging ? /* @__PURE__ */ jsx12(
-              "div",
-              {
-                "aria-hidden": true,
-                className: cn(
-                  "pointer-events-none absolute inset-0 z-10 flex items-center justify-center",
-                  "rounded-og-lg bg-og-surface-1/85 text-sm font-medium text-og-accent backdrop-blur-[1px]"
-                ),
-                children: /* @__PURE__ */ jsxs10("span", { className: "inline-flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx12(PaperclipIcon, { className: "size-4" }),
-                  "Drop files to attach"
-                ] })
-              }
-            ) : null,
-            attachments && attachments.attachments.length > 0 ? /* @__PURE__ */ jsx12(AttachmentChips, { attachments: attachments.attachments, onRemove: attachments.remove }) : null,
-            header,
-            /* @__PURE__ */ jsx12(
-              "textarea",
-              {
-                ref: textareaRef,
-                rows: 1,
-                value: composer.value,
-                onChange: (event) => composer.setValue(event.target.value),
-                onKeyDown,
-                onPaste: handlePaste,
-                placeholder: placeholder ?? "Message the agent\u2026",
-                disabled,
-                autoFocus,
-                "aria-label": "Message the agent",
-                role: paletteEnabled && palette.open ? "combobox" : void 0,
-                "aria-expanded": paletteEnabled ? palette.open : void 0,
-                "aria-controls": paletteEnabled && palette.open ? listboxId : void 0,
-                "aria-activedescendant": paletteEnabled && palette.open ? `${listboxId}-option-${palette.highlight}` : void 0,
-                className: cn(
-                  "block w-full resize-none bg-transparent px-4 pt-3.5 pb-1 text-[15px] leading-6",
-                  // The wrapper owns the whole-composer focus affordance (focus-within
-                  // border + soft glow). Suppress any self-scoped focus outline on the
-                  // textarea itself: `focus:outline-none` alone only sets outline-style
-                  // on `:focus`, which a host app's zero-specificity
-                  // `:where(...):focus-visible { outline: ... }` base rule re-applies as
-                  // the full shorthand. `focus-visible:outline-none` matches the same
-                  // state at class specificity and wins, so no second highlight (the
-                  // top-half rectangle bounded to the textarea box) ever paints.
-                  "text-og-fg placeholder:text-og-fg-subtle focus:outline-none focus-visible:outline-none",
-                  "disabled:cursor-not-allowed disabled:opacity-60"
-                )
-              }
+  return (
+    // Respect the iOS home-indicator inset so the sticky composer never sits
+    // under it (0 on non-notch devices and desktop, so it's inert there).
+    /* @__PURE__ */ jsxs10("div", { className: cn("og-root", className), style: { paddingBottom: "env(safe-area-inset-bottom)" }, children: [
+      /* @__PURE__ */ jsxs10("div", { className: "relative", children: [
+        paletteEnabled ? /* @__PURE__ */ jsx12(
+          CommandPalette,
+          {
+            open: palette.open && confirmState === null,
+            items: palette.items,
+            highlight: palette.highlight,
+            onHighlight: palette.setHighlight,
+            onRun: (index) => {
+              palette.setHighlight(index);
+              void palette.runAt(index);
+            },
+            argHintText: palette.activeArgHint,
+            listboxId
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs10(
+          "div",
+          {
+            onDragOver: attachments ? handleDragOver : void 0,
+            onDragLeave: attachments ? handleDragLeave : void 0,
+            onDrop: attachments ? handleDrop : void 0,
+            className: cn(
+              "relative rounded-og-lg border border-og-border bg-og-surface-1 shadow-og-sm",
+              "transition-[border-color,box-shadow] duration-200",
+              "focus-within:border-og-accent/60 focus-within:shadow-og-glow",
+              // While files are dragged over, swap to a dashed accent border to
+              // signal a live drop target (the overlay carries the label).
+              dragging && "border-dashed border-og-accent"
             ),
-            confirmState && pendingDangerCommand ? /* @__PURE__ */ jsx12(
-              ConfirmBar,
-              {
-                command: pendingDangerCommand,
-                onCancel: () => confirmState.resolve(false),
-                onConfirm: () => confirmState.resolve(true)
-              }
-            ) : /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between gap-2 px-2.5 pb-2.5 pt-1", children: [
-              attachments || models || controlsStart ? /* @__PURE__ */ jsxs10("span", { className: "flex min-w-0 items-center gap-1.5", children: [
-                attachments ? /* @__PURE__ */ jsxs10(Fragment3, { children: [
-                  /* @__PURE__ */ jsx12(
-                    "input",
-                    {
-                      ref: fileInputRef,
-                      type: "file",
-                      multiple: true,
-                      className: "hidden",
-                      onChange: handleFileChange
-                    }
+            children: [
+              dragging ? /* @__PURE__ */ jsx12(
+                "div",
+                {
+                  "aria-hidden": true,
+                  className: cn(
+                    "pointer-events-none absolute inset-0 z-10 flex items-center justify-center",
+                    "rounded-og-lg bg-og-surface-1/85 text-sm font-medium text-og-accent backdrop-blur-[1px]"
                   ),
+                  children: /* @__PURE__ */ jsxs10("span", { className: "inline-flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx12(PaperclipIcon, { className: "size-4" }),
+                    "Drop files to attach"
+                  ] })
+                }
+              ) : null,
+              attachments && attachments.attachments.length > 0 ? /* @__PURE__ */ jsx12(
+                AttachmentChips,
+                {
+                  attachments: attachments.attachments,
+                  onRemove: attachments.remove,
+                  onRetry: attachments.retry
+                }
+              ) : null,
+              header,
+              /* @__PURE__ */ jsx12(
+                "textarea",
+                {
+                  ref: textareaRef,
+                  rows: 1,
+                  value: composer.value,
+                  onChange: (event) => composer.setValue(event.target.value),
+                  onKeyDown,
+                  onPaste: handlePaste,
+                  placeholder: placeholder ?? "Message the agent\u2026",
+                  disabled,
+                  autoFocus,
+                  "aria-label": "Message the agent",
+                  role: paletteEnabled && palette.open ? "combobox" : void 0,
+                  "aria-expanded": paletteEnabled ? palette.open : void 0,
+                  "aria-controls": paletteEnabled && palette.open ? listboxId : void 0,
+                  "aria-activedescendant": paletteEnabled && palette.open ? `${listboxId}-option-${palette.highlight}` : void 0,
+                  className: cn(
+                    // Font size steps up to 16px below `md` so iOS never zooms the
+                    // viewport on focus; desktop keeps the 15px og-md rhythm.
+                    "block w-full resize-none bg-transparent px-4 pt-3.5 pb-1 text-base leading-6 md:text-og-md",
+                    // The wrapper owns the whole-composer focus affordance (focus-within
+                    // border + soft glow). Suppress any self-scoped focus outline on the
+                    // textarea itself: `focus:outline-none` alone only sets outline-style
+                    // on `:focus`, which a host app's zero-specificity
+                    // `:where(...):focus-visible { outline: ... }` base rule re-applies as
+                    // the full shorthand. `focus-visible:outline-none` matches the same
+                    // state at class specificity and wins, so no second highlight (the
+                    // top-half rectangle bounded to the textarea box) ever paints.
+                    "text-og-fg placeholder:text-og-fg-subtle focus:outline-none focus-visible:outline-none",
+                    "disabled:cursor-not-allowed disabled:opacity-60"
+                  )
+                }
+              ),
+              confirmState && pendingDangerCommand ? /* @__PURE__ */ jsx12(
+                ConfirmBar,
+                {
+                  command: pendingDangerCommand,
+                  onCancel: () => confirmState.resolve(false),
+                  onConfirm: () => confirmState.resolve(true),
+                  returnFocusRef: textareaRef
+                }
+              ) : /* @__PURE__ */ jsxs10("div", { className: "flex items-end gap-2 px-2.5 pb-2.5 pt-1", children: [
+                attachments || models || controlsStart ? (
+                  // The control group wraps onto extra rows when it can't fit
+                  // (narrow viewports) instead of clipping under the rounded
+                  // corner; send/stop stays anchored bottom-right (shrink-0).
+                  /* @__PURE__ */ jsxs10("span", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1.5", children: [
+                    attachments ? /* @__PURE__ */ jsxs10(Fragment3, { children: [
+                      /* @__PURE__ */ jsx12(
+                        "input",
+                        {
+                          ref: fileInputRef,
+                          type: "file",
+                          multiple: true,
+                          className: "hidden",
+                          onChange: handleFileChange
+                        }
+                      ),
+                      /* @__PURE__ */ jsx12(
+                        "button",
+                        {
+                          type: "button",
+                          disabled: disabled === true,
+                          onClick: () => fileInputRef.current?.click(),
+                          "aria-label": "Attach files",
+                          title: "Attach files",
+                          className: cn(
+                            "inline-flex size-8 items-center justify-center rounded-og-md",
+                            "text-og-fg-muted transition-colors duration-150 hover:bg-og-surface-2 hover:text-og-fg",
+                            "disabled:cursor-not-allowed disabled:opacity-50"
+                          ),
+                          children: /* @__PURE__ */ jsx12(PaperclipIcon, { className: "size-4" })
+                        }
+                      )
+                    ] }) : null,
+                    models ? /* @__PURE__ */ jsx12(
+                      ModelPicker,
+                      {
+                        models,
+                        value: selectedModel,
+                        onChange: (modelId) => onSelectModel?.(modelId),
+                        disabled: disabled === true
+                      }
+                    ) : null,
+                    controlsStart
+                  ] })
+                ) : /* @__PURE__ */ jsx12("span", { className: "min-w-0 flex-1 px-1.5 text-og-xs text-og-fg-subtle max-sm:hidden", children: hint ?? "Enter to send \xB7 Shift+Enter for a new line \xB7 / for commands" }),
+                /* @__PURE__ */ jsxs10("span", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsx12(AnimatePresence3, { initial: false, children: active ? /* @__PURE__ */ jsx12(
+                    motion3.button,
+                    {
+                      type: "button",
+                      initial: { opacity: 0, scale: 0.8 },
+                      animate: { opacity: 1, scale: 1 },
+                      exit: { opacity: 0, scale: 0.8 },
+                      transition: { duration: 0.15, ease: "easeOut" },
+                      onClick: () => void composer.interrupt(),
+                      disabled: composer.interrupting,
+                      "aria-label": "Stop the current turn",
+                      title: "Stop the current turn",
+                      className: cn(
+                        "inline-flex size-8 items-center justify-center rounded-og-md border border-og-border pointer-coarse:size-11",
+                        "bg-og-surface-2 text-og-fg-muted transition-colors duration-150",
+                        "hover:border-og-status-failed/50 hover:text-og-status-failed",
+                        "disabled:opacity-50"
+                      ),
+                      children: composer.interrupting ? /* @__PURE__ */ jsx12(LoaderCircleIcon, { className: "size-3.5 animate-og-spin" }) : /* @__PURE__ */ jsx12(SquareIcon, { className: "size-3 fill-current" })
+                    },
+                    "stop"
+                  ) : null }),
                   /* @__PURE__ */ jsx12(
                     "button",
                     {
                       type: "button",
-                      disabled: disabled === true,
-                      onClick: () => fileInputRef.current?.click(),
-                      "aria-label": "Attach files",
-                      title: "Attach files",
+                      onClick: () => {
+                        if (blockedByUpload) {
+                          return;
+                        }
+                        void composer.send();
+                      },
+                      disabled: !canSend || disabled === true || commandDraftBlocked,
+                      "aria-label": "Send message",
                       className: cn(
-                        "inline-flex size-8 items-center justify-center rounded-og-md",
-                        "text-og-fg-muted transition-colors duration-150 hover:bg-og-surface-2 hover:text-og-fg",
-                        "disabled:cursor-not-allowed disabled:opacity-50"
+                        "inline-flex size-8 items-center justify-center rounded-og-md pointer-coarse:size-11",
+                        "bg-og-accent text-og-accent-fg shadow-og-sm",
+                        "transition-[background-color,transform,opacity] duration-150 ease-og-spring",
+                        "hover:bg-og-accent-strong active:scale-95",
+                        "disabled:cursor-not-allowed disabled:bg-og-surface-3 disabled:text-og-fg-subtle disabled:shadow-none"
                       ),
-                      children: /* @__PURE__ */ jsx12(PaperclipIcon, { className: "size-4" })
+                      children: composer.sending ? /* @__PURE__ */ jsx12(LoaderCircleIcon, { className: "size-4 animate-og-spin" }) : /* @__PURE__ */ jsx12(ArrowUpIcon, { className: "size-4" })
                     }
                   )
-                ] }) : null,
-                models ? /* @__PURE__ */ jsx12(
-                  ModelPicker,
-                  {
-                    models,
-                    value: selectedModel,
-                    onChange: (modelId) => onSelectModel?.(modelId),
-                    disabled: disabled === true
-                  }
-                ) : null,
-                controlsStart
-              ] }) : /* @__PURE__ */ jsx12("span", { className: "px-1.5 text-[11px] text-og-fg-subtle max-sm:hidden", children: hint ?? "Enter to send \xB7 Shift+Enter for a new line \xB7 / for commands" }),
-              /* @__PURE__ */ jsxs10("span", { className: "flex items-center gap-1.5", children: [
-                /* @__PURE__ */ jsx12(AnimatePresence3, { initial: false, children: active ? /* @__PURE__ */ jsx12(
-                  motion3.button,
-                  {
-                    type: "button",
-                    initial: { opacity: 0, scale: 0.8 },
-                    animate: { opacity: 1, scale: 1 },
-                    exit: { opacity: 0, scale: 0.8 },
-                    transition: { duration: 0.15, ease: "easeOut" },
-                    onClick: () => void composer.interrupt(),
-                    disabled: composer.interrupting,
-                    "aria-label": "Stop the current turn",
-                    title: "Stop the current turn",
-                    className: cn(
-                      "inline-flex size-8 items-center justify-center rounded-og-md border border-og-border",
-                      "bg-og-surface-2 text-og-fg-muted transition-colors duration-150",
-                      "hover:border-og-status-failed/50 hover:text-og-status-failed",
-                      "disabled:opacity-50"
-                    ),
-                    children: composer.interrupting ? /* @__PURE__ */ jsx12(LoaderCircleIcon, { className: "size-3.5 animate-og-spin" }) : /* @__PURE__ */ jsx12(SquareIcon, { className: "size-3 fill-current" })
-                  },
-                  "stop"
-                ) : null }),
-                /* @__PURE__ */ jsx12(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => {
-                      if (blockedByUpload) {
-                        return;
-                      }
-                      void composer.send();
-                    },
-                    disabled: !canSend || disabled === true || commandDraftBlocked,
-                    "aria-label": "Send message",
-                    className: cn(
-                      "inline-flex size-8 items-center justify-center rounded-og-md",
-                      "bg-og-accent text-og-accent-fg shadow-og-sm",
-                      "transition-[background-color,transform,opacity] duration-150 ease-og-spring",
-                      "hover:bg-og-accent-strong active:scale-95",
-                      "disabled:cursor-not-allowed disabled:bg-og-surface-3 disabled:text-og-fg-subtle disabled:shadow-none"
-                    ),
-                    children: composer.sending ? /* @__PURE__ */ jsx12(LoaderCircleIcon, { className: "size-4 animate-og-spin" }) : /* @__PURE__ */ jsx12(ArrowUpIcon, { className: "size-4" })
-                  }
-                )
+                ] })
               ] })
-            ] })
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx12(AnimatePresence3, { children: helpOpen ? /* @__PURE__ */ jsx12(HelpPanel, { commands: helpCommands, onClose: () => setHelpOpen(false) }) : null }),
-    /* @__PURE__ */ jsx12(AnimatePresence3, { children: activeNotice ? /* @__PURE__ */ jsx12(
-      motion3.p,
-      {
-        initial: { opacity: 0, height: 0 },
-        animate: { opacity: 1, height: "auto" },
-        exit: { opacity: 0, height: 0 },
-        className: cn(
-          "overflow-hidden px-1 pt-1.5 text-xs",
-          activeNotice.tone === "ok" ? "text-og-fg-muted" : "text-og-status-failed"
-        ),
-        role: activeNotice.tone === "error" ? "alert" : "status",
-        onAnimationComplete: () => {
-          if (activeNotice.tone === "ok") {
-            window.setTimeout(() => setNotice((current) => current === activeNotice ? null : current), 2400);
+            ]
           }
-        },
-        children: activeNotice.message
-      }
-    ) : null })
-  ] });
+        )
+      ] }),
+      /* @__PURE__ */ jsx12(AnimatePresence3, { children: helpOpen ? /* @__PURE__ */ jsx12(HelpPanel, { commands: helpCommands, onClose: () => setHelpOpen(false) }) : null }),
+      /* @__PURE__ */ jsx12(AnimatePresence3, { children: activeNotice ? /* @__PURE__ */ jsx12(
+        motion3.p,
+        {
+          initial: { opacity: 0, height: 0 },
+          animate: { opacity: 1, height: "auto" },
+          exit: { opacity: 0, height: 0 },
+          className: cn(
+            "overflow-hidden px-1 pt-1.5 text-xs",
+            activeNotice.tone === "ok" ? "text-og-fg-muted" : "text-og-status-failed"
+          ),
+          role: activeNotice.tone === "error" ? "alert" : "status",
+          onAnimationComplete: () => {
+            if (activeNotice.tone === "ok") {
+              window.setTimeout(() => setNotice((current) => current === activeNotice ? null : current), 2400);
+            }
+          },
+          children: activeNotice.message
+        }
+      ) : null })
+    ] })
+  );
 }
-function ConfirmBar({ command, onCancel, onConfirm }) {
+function ConfirmBar({
+  command,
+  onCancel,
+  onConfirm,
+  returnFocusRef
+}) {
+  const confirmRef = useRef14(null);
+  const descriptionId = useId2();
+  useEffect14(() => {
+    const returnTo = returnFocusRef?.current ?? null;
+    confirmRef.current?.focus();
+    return () => {
+      returnTo?.focus();
+    };
+  }, [returnFocusRef]);
   return /* @__PURE__ */ jsxs10(
     "div",
     {
       role: "alertdialog",
       "aria-label": `Confirm /${command.name}`,
+      "aria-describedby": descriptionId,
       "data-testid": "danger-confirm",
-      className: "flex items-center justify-between gap-2 px-2.5 pb-2.5 pt-1",
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          event.stopPropagation();
+          onCancel();
+        }
+      },
+      className: "flex items-end justify-between gap-2 px-2.5 pb-2.5 pt-1",
       children: [
-        /* @__PURE__ */ jsxs10("span", { className: "px-1.5 text-[12px] text-og-status-failed", children: [
+        /* @__PURE__ */ jsxs10("span", { id: descriptionId, className: "min-w-0 flex-1 px-1.5 text-og-sm text-og-status-failed", children: [
           "Run ",
           /* @__PURE__ */ jsxs10("span", { className: "font-mono", children: [
             "/",
@@ -5764,24 +5949,27 @@ function ConfirmBar({ command, onCancel, onConfirm }) {
           "? ",
           command.description
         ] }),
-        /* @__PURE__ */ jsxs10("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxs10("span", { className: "flex shrink-0 items-center gap-1.5", children: [
           /* @__PURE__ */ jsx12(
             "button",
             {
               type: "button",
               onClick: onCancel,
-              className: "rounded-og-md border border-og-border bg-og-surface-2 px-2.5 py-1 text-[12px] text-og-fg-muted hover:bg-og-surface-3",
+              className: "rounded-og-md border border-og-border bg-og-surface-2 px-2.5 py-1 text-og-sm text-og-fg-muted hover:bg-og-surface-3 pointer-coarse:min-h-10",
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsxs10(
             "button",
             {
+              ref: confirmRef,
               type: "button",
-              autoFocus: true,
               onClick: onConfirm,
-              className: "rounded-og-md border border-og-status-failed/50 bg-og-status-failed/15 px-2.5 py-1 text-[12px] text-og-status-failed hover:bg-og-status-failed/25",
-              children: "Confirm"
+              className: "rounded-og-md border border-og-status-failed/50 bg-og-status-failed/15 px-2.5 py-1 text-og-sm text-og-status-failed hover:bg-og-status-failed/25 pointer-coarse:min-h-10",
+              children: [
+                "Run /",
+                command.name
+              ]
             }
           )
         ] })
@@ -5789,44 +5977,57 @@ function ConfirmBar({ command, onCancel, onConfirm }) {
     }
   );
 }
-function AttachmentChips({ attachments, onRemove }) {
-  return /* @__PURE__ */ jsx12("div", { className: "flex flex-wrap gap-2 border-b border-og-border px-3 py-2", children: attachments.map((attachment) => /* @__PURE__ */ jsxs10(
-    "div",
-    {
-      className: cn(
-        "flex min-w-0 max-w-[240px] items-center gap-2 rounded-og-md border px-2 py-1.5",
-        "border-og-border bg-og-surface-2 text-xs"
-      ),
-      children: [
-        attachment.previewUrl ? /* @__PURE__ */ jsx12("img", { src: attachment.previewUrl, alt: "", className: "size-8 shrink-0 rounded object-cover" }) : attachment.contentType.startsWith("image/") ? /* @__PURE__ */ jsx12(ImageIcon2, { className: "size-4 shrink-0 text-og-fg-muted" }) : /* @__PURE__ */ jsx12(FileIcon, { className: "size-4 shrink-0 text-og-fg-muted" }),
-        /* @__PURE__ */ jsxs10("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx12("div", { className: "truncate font-medium text-og-fg", children: attachment.name }),
+function AttachmentChips({ attachments, onRemove, onRetry }) {
+  return /* @__PURE__ */ jsx12("div", { className: "flex flex-wrap gap-2 border-b border-og-border px-3 py-2", children: attachments.map((attachment) => {
+    const failed = attachment.status === "failed";
+    const statusText = attachment.status === "uploading" ? "Uploading" : failed ? attachment.error || "Upload failed" : formatBytes(attachment.sizeBytes);
+    return /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        className: cn(
+          "flex min-w-0 max-w-[240px] items-center gap-2 rounded-og-md border px-2 py-1.5 text-og-sm",
+          failed ? "border-og-status-failed/40 bg-og-status-failed/10" : "border-og-border bg-og-surface-2"
+        ),
+        children: [
+          attachment.previewUrl ? /* @__PURE__ */ jsx12("img", { src: attachment.previewUrl, alt: "", className: "size-8 shrink-0 rounded object-cover" }) : attachment.contentType.startsWith("image/") ? /* @__PURE__ */ jsx12(ImageIcon2, { className: "size-4 shrink-0 text-og-fg-muted" }) : /* @__PURE__ */ jsx12(FileIcon, { className: "size-4 shrink-0 text-og-fg-muted" }),
+          /* @__PURE__ */ jsxs10("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx12("div", { className: "truncate font-medium text-og-fg", children: attachment.name }),
+            /* @__PURE__ */ jsx12(
+              "div",
+              {
+                className: cn("truncate text-og-xs", failed ? "text-og-status-failed" : "text-og-fg-subtle"),
+                title: failed ? statusText : void 0,
+                children: statusText
+              }
+            )
+          ] }),
+          attachment.status === "uploading" ? /* @__PURE__ */ jsx12(LoaderCircleIcon, { className: "size-3.5 shrink-0 animate-og-spin" }) : null,
+          failed && onRetry ? /* @__PURE__ */ jsx12(
+            "button",
+            {
+              type: "button",
+              onClick: () => onRetry(attachment.id),
+              className: "shrink-0 rounded-og-xs p-1 text-og-fg-muted hover:bg-og-surface-1 hover:text-og-fg pointer-coarse:size-8",
+              "aria-label": `Retry ${attachment.name}`,
+              title: "Retry upload",
+              children: /* @__PURE__ */ jsx12(RotateCwIcon, { className: "size-3.5" })
+            }
+          ) : null,
           /* @__PURE__ */ jsx12(
-            "div",
+            "button",
             {
-              className: cn(
-                "truncate text-[11px]",
-                attachment.status === "failed" ? "text-og-status-failed" : "text-og-fg-subtle"
-              ),
-              children: attachment.status === "uploading" ? "Uploading" : attachment.status === "failed" ? "Upload failed" : formatBytes(attachment.sizeBytes)
+              type: "button",
+              onClick: () => onRemove(attachment.id),
+              className: "shrink-0 rounded-og-xs p-1 text-og-fg-muted hover:bg-og-surface-1 hover:text-og-fg pointer-coarse:size-8",
+              "aria-label": `Remove ${attachment.name}`,
+              children: /* @__PURE__ */ jsx12(XIcon2, { className: "size-3.5" })
             }
           )
-        ] }),
-        attachment.status === "uploading" ? /* @__PURE__ */ jsx12(LoaderCircleIcon, { className: "size-3.5 shrink-0 animate-og-spin" }) : null,
-        /* @__PURE__ */ jsx12(
-          "button",
-          {
-            type: "button",
-            onClick: () => onRemove(attachment.id),
-            className: "shrink-0 rounded-og-xs p-1 text-og-fg-muted hover:bg-og-surface-1 hover:text-og-fg",
-            "aria-label": `Remove ${attachment.name}`,
-            children: /* @__PURE__ */ jsx12(XIcon2, { className: "size-3.5" })
-          }
-        )
-      ]
-    },
-    attachment.id
-  )) });
+        ]
+      },
+      attachment.id
+    );
+  }) });
 }
 function HelpPanel({ commands, onClose }) {
   return /* @__PURE__ */ jsxs10(
@@ -5838,19 +6039,19 @@ function HelpPanel({ commands, onClose }) {
       className: "mt-2 overflow-hidden rounded-og-lg border border-og-border bg-og-surface-2",
       children: [
         /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between border-b border-og-border px-3 py-1.5", children: [
-          /* @__PURE__ */ jsx12("span", { className: "text-[12px] font-medium text-og-fg", children: "Commands" }),
-          /* @__PURE__ */ jsx12("button", { type: "button", onClick: onClose, className: "text-[11px] text-og-fg-subtle hover:text-og-fg", children: "Close" })
+          /* @__PURE__ */ jsx12("span", { className: "text-og-sm font-medium text-og-fg", children: "Commands" }),
+          /* @__PURE__ */ jsx12("button", { type: "button", onClick: onClose, className: "text-og-xs text-og-fg-subtle hover:text-og-fg", children: "Close" })
         ] }),
         /* @__PURE__ */ jsx12("ul", { className: "py-1", children: commands.map((command) => {
           const hint = argHint(command.args);
           return /* @__PURE__ */ jsxs10("li", { className: "flex items-baseline gap-2 px-3 py-1", children: [
-            /* @__PURE__ */ jsxs10("span", { className: "font-mono text-[12px] text-og-accent", children: [
+            /* @__PURE__ */ jsxs10("span", { className: "font-mono text-og-sm text-og-accent", children: [
               "/",
               command.name,
               hint ? /* @__PURE__ */ jsx12("span", { className: "ml-1 text-og-fg-subtle", children: hint }) : null
             ] }),
-            /* @__PURE__ */ jsx12("span", { className: "text-[12px] text-og-fg-muted", children: command.description }),
-            command.danger ? /* @__PURE__ */ jsx12("span", { className: "ml-auto rounded-og-xs bg-og-status-failed/15 px-1 text-[10px] uppercase tracking-wide text-og-status-failed", children: "danger" }) : null
+            /* @__PURE__ */ jsx12("span", { className: "text-og-sm text-og-fg-muted", children: command.description }),
+            command.danger ? /* @__PURE__ */ jsx12("span", { className: "ml-auto rounded-og-xs bg-og-status-failed/15 px-1 text-og-xs uppercase tracking-wide text-og-status-failed", children: "danger" }) : null
           ] }, command.name);
         }) })
       ]
@@ -5870,7 +6071,7 @@ import {
   TriangleAlertIcon as TriangleAlertIcon2
 } from "lucide-react";
 import { AnimatePresence as AnimatePresence4, motion as motion4 } from "motion/react";
-import { useEffect as useEffect15, useMemo as useMemo8, useRef as useRef14, useState as useState22 } from "react";
+import { useCallback as useCallback21, useEffect as useEffect15, useMemo as useMemo8, useRef as useRef15, useState as useState22 } from "react";
 
 // src/components/markdown.tsx
 import { memo } from "react";
@@ -5880,8 +6081,8 @@ import { jsx as jsx13 } from "react/jsx-runtime";
 var components = {
   h1: ({ children, ...props }) => /* @__PURE__ */ jsx13("h1", { className: "mt-5 mb-2.5 text-xl font-semibold tracking-tight text-og-fg first:mt-0", ...props, children }),
   h2: ({ children, ...props }) => /* @__PURE__ */ jsx13("h2", { className: "mt-5 mb-2 text-lg font-semibold tracking-tight text-og-fg first:mt-0", ...props, children }),
-  h3: ({ children, ...props }) => /* @__PURE__ */ jsx13("h3", { className: "mt-4 mb-1.5 text-[15px] font-semibold tracking-tight text-og-fg first:mt-0", ...props, children }),
-  h4: ({ children, ...props }) => /* @__PURE__ */ jsx13("h4", { className: "mt-4 mb-1.5 text-sm font-semibold uppercase tracking-[0.04em] text-og-fg-muted first:mt-0", ...props, children }),
+  h3: ({ children, ...props }) => /* @__PURE__ */ jsx13("h3", { className: "mt-4 mb-1.5 text-og-md font-semibold tracking-tight text-og-fg first:mt-0", ...props, children }),
+  h4: ({ children, ...props }) => /* @__PURE__ */ jsx13("h4", { className: "mt-4 mb-1.5 text-og-sm font-semibold uppercase tracking-[0.04em] text-og-fg-muted first:mt-0", ...props, children }),
   p: ({ children, ...props }) => /* @__PURE__ */ jsx13("p", { className: "my-2.5 leading-7 first:mt-0 last:mb-0", ...props, children }),
   strong: ({ children, ...props }) => /* @__PURE__ */ jsx13("strong", { className: "font-semibold text-og-fg", ...props, children }),
   em: ({ children, ...props }) => /* @__PURE__ */ jsx13("em", { className: "italic", ...props, children }),
@@ -5907,7 +6108,7 @@ var components = {
       ...props,
       type: "checkbox",
       disabled: true,
-      className: "mr-2 size-3.5 translate-y-[2px] cursor-default appearance-none rounded-[3px] border border-og-border bg-og-surface-1 align-baseline checked:border-og-accent checked:bg-og-accent checked:[background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M2.5%206.2l2.2%202.2%204.6-4.8%22%2F%3E%3C%2Fsvg%3E')] checked:bg-[length:11px_11px] checked:bg-center checked:bg-no-repeat"
+      className: "mr-2 size-3.5 translate-y-[2px] cursor-default accent-og-accent align-baseline"
     }
   ) : /* @__PURE__ */ jsx13("input", { type, ...props }),
   blockquote: ({ children, ...props }) => /* @__PURE__ */ jsx13(
@@ -5925,7 +6126,7 @@ var components = {
   code: ({ children, className: _className, ...props }) => /* @__PURE__ */ jsx13(
     "code",
     {
-      className: "rounded-og-xs border border-og-border bg-og-surface-1 px-1 py-0.5 font-og-mono text-[0.85em] text-og-fg",
+      className: "rounded-og-xs border border-og-border bg-og-surface-1 px-1 py-0.5 font-og-mono text-og-sm text-og-fg",
       ...props,
       children
     }
@@ -5935,12 +6136,12 @@ var components = {
   pre: ({ children, ...props }) => /* @__PURE__ */ jsx13(
     "pre",
     {
-      className: "my-3 max-h-96 overflow-auto rounded-og-md border border-og-border bg-og-bg/60 p-3 font-og-mono text-[12.5px] leading-5 text-og-fg-muted [&>code]:border-0 [&>code]:bg-transparent [&>code]:p-0 [&>code]:text-inherit first:mt-0 last:mb-0",
+      className: "my-3 max-h-96 overflow-auto rounded-og-md border border-og-border bg-og-bg/60 p-3 font-og-mono text-og-sm text-og-fg-muted [&>code]:border-0 [&>code]:bg-transparent [&>code]:p-0 [&>code]:text-inherit first:mt-0 last:mb-0",
       ...props,
       children
     }
   ),
-  table: ({ children, ...props }) => /* @__PURE__ */ jsx13("div", { className: "my-3 max-w-full overflow-x-auto rounded-og-md border border-og-border first:mt-0 last:mb-0", children: /* @__PURE__ */ jsx13("table", { className: "w-full border-collapse text-[13px]", ...props, children }) }),
+  table: ({ children, ...props }) => /* @__PURE__ */ jsx13("div", { className: "my-3 max-w-full overflow-x-auto rounded-og-md border border-og-border first:mt-0 last:mb-0", children: /* @__PURE__ */ jsx13("table", { className: "w-full border-collapse text-og-base", ...props, children }) }),
   thead: ({ children, ...props }) => /* @__PURE__ */ jsx13("thead", { className: "bg-og-surface-1", ...props, children }),
   th: ({ children, ...props }) => /* @__PURE__ */ jsx13("th", { className: "border-b border-og-border px-3 py-1.5 text-left font-medium text-og-fg", ...props, children }),
   td: ({ children, ...props }) => /* @__PURE__ */ jsx13("td", { className: "border-b border-og-border px-3 py-1.5 align-top text-og-fg-muted [tr:last-child>&]:border-b-0", ...props, children }),
@@ -5977,7 +6178,7 @@ var SESSION_STATUS_META = {
     pulse: false
   },
   requires_action: {
-    label: "Needs you",
+    label: "Waiting on you",
     dotClassName: "bg-og-status-waiting",
     badgeClassName: "text-og-status-waiting border-og-status-waiting/35 bg-og-status-waiting/10",
     pulse: true
@@ -6003,7 +6204,7 @@ function SessionStatus({ status, label, size = "md", className }) {
       "data-status": status,
       className: cn(
         "og-root inline-flex shrink-0 items-center rounded-full border font-medium",
-        size === "sm" ? "gap-1 px-1.5 py-px text-[10px]" : "gap-1.5 px-2 py-0.5 text-xs",
+        size === "sm" ? "gap-1 px-1.5 py-px text-og-xs" : "gap-1.5 px-2 py-0.5 text-xs",
         meta.badgeClassName,
         className
       ),
@@ -6034,23 +6235,74 @@ function MessageTimeline({
 }) {
   const resolvedItems = useMemo8(() => items ?? buildTimeline(events ?? []), [items, events]);
   const groups = useMemo8(() => groupTimeline(resolvedItems), [resolvedItems]);
-  const scrollRef = useRef14(null);
+  const scrollRef = useRef15(null);
   const [pinned, setPinned] = useState22(true);
+  const pinnedRef = useRef15(true);
+  const anchorRef = useRef15(null);
   const lastItem = resolvedItems[resolvedItems.length - 1];
   const streaming = lastItem !== void 0 && (lastItem.kind === "agent-message" || lastItem.kind === "reasoning") && lastItem.streaming;
   const working = status === "running" && !streaming;
+  const captureAnchor = useCallback21(() => {
+    const node = scrollRef.current;
+    const inner = node?.firstElementChild;
+    if (!node || !inner) {
+      anchorRef.current = null;
+      return;
+    }
+    const containerTop = node.getBoundingClientRect().top;
+    for (const child of Array.from(inner.children)) {
+      const rect = child.getBoundingClientRect();
+      if (rect.bottom > containerTop + 1) {
+        anchorRef.current = { el: child, top: rect.top - containerTop };
+        return;
+      }
+    }
+    anchorRef.current = null;
+  }, []);
   useEffect15(() => {
     const node = scrollRef.current;
     if (node && autoFollow && pinned) {
       node.scrollTop = node.scrollHeight;
     }
   }, [resolvedItems, working, autoFollow, pinned]);
+  useEffect15(() => {
+    const node = scrollRef.current;
+    const inner = node?.firstElementChild;
+    if (!node || !inner || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const observer = new ResizeObserver(() => {
+      const current = scrollRef.current;
+      if (!current) {
+        return;
+      }
+      if (autoFollow && pinnedRef.current) {
+        current.scrollTop = current.scrollHeight;
+      } else {
+        const anchor = anchorRef.current;
+        if (anchor && anchor.el.isConnected) {
+          const containerTop = current.getBoundingClientRect().top;
+          const now = anchor.el.getBoundingClientRect().top - containerTop;
+          const diff = now - anchor.top;
+          if (diff !== 0) {
+            current.scrollTop += diff;
+          }
+        }
+      }
+      captureAnchor();
+    });
+    observer.observe(inner);
+    return () => observer.disconnect();
+  }, [autoFollow, captureAnchor]);
   const onScroll = () => {
     const node = scrollRef.current;
     if (!node) {
       return;
     }
-    setPinned(node.scrollHeight - node.scrollTop - node.clientHeight < 48);
+    const nextPinned = node.scrollHeight - node.scrollTop - node.clientHeight < 48;
+    pinnedRef.current = nextPinned;
+    setPinned(nextPinned);
+    captureAnchor();
   };
   return /* @__PURE__ */ jsx15(LightboxProvider, { children: /* @__PURE__ */ jsxs12("div", { className: cn("og-root relative flex min-h-0 flex-col", className), children: [
     /* @__PURE__ */ jsx15("div", { ref: scrollRef, onScroll, className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-6 sm:px-6", children: /* @__PURE__ */ jsxs12("div", { className: "mx-auto flex w-full max-w-3xl flex-col gap-5", children: [
@@ -6080,6 +6332,7 @@ function MessageTimeline({
           if (node) {
             node.scrollTo({ top: node.scrollHeight, behavior: "smooth" });
           }
+          pinnedRef.current = true;
           setPinned(true);
         },
         className: cn(
@@ -6302,11 +6555,11 @@ function FleetTile({ session, title, subtitle, onOpen, className }) {
           }
         ),
         /* @__PURE__ */ jsxs13("span", { className: "flex w-full items-start justify-between gap-3", children: [
-          /* @__PURE__ */ jsx16("span", { className: "line-clamp-2 min-w-0 text-sm font-medium leading-snug text-og-fg", children: title ?? sessionDisplayTitle(session) }),
+          /* @__PURE__ */ jsx16("span", { className: "line-clamp-2 min-w-0 text-og-base font-medium leading-snug text-og-fg", children: title ?? sessionDisplayTitle(session) }),
           /* @__PURE__ */ jsx16(SessionStatus, { status: session.status, size: "sm", className: "mt-px" })
         ] }),
-        subtitle ? /* @__PURE__ */ jsx16("span", { className: "line-clamp-1 text-xs text-og-fg-muted", children: subtitle }) : null,
-        /* @__PURE__ */ jsxs13("span", { className: "mt-auto flex w-full items-center gap-2 text-[11px] text-og-fg-subtle", children: [
+        subtitle ? /* @__PURE__ */ jsx16("span", { className: "line-clamp-1 text-og-sm text-og-fg-muted", children: subtitle }) : null,
+        /* @__PURE__ */ jsxs13("span", { className: "mt-auto flex w-full items-center gap-2 text-og-xs text-og-fg-subtle", children: [
           /* @__PURE__ */ jsx16("span", { className: "font-og-mono", children: session.id.slice(0, 8) }),
           /* @__PURE__ */ jsx16("span", { "aria-hidden": true, children: "\xB7" }),
           /* @__PURE__ */ jsx16("span", { className: "truncate", children: session.model }),
@@ -6318,7 +6571,7 @@ function FleetTile({ session, title, subtitle, onOpen, className }) {
 }
 
 // src/components/sandbox-terminal.tsx
-import { useEffect as useEffect16, useRef as useRef15, useState as useState23 } from "react";
+import { useEffect as useEffect16, useRef as useRef16, useState as useState23 } from "react";
 import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 function SandboxTerminal({
   result,
@@ -6333,13 +6586,13 @@ function SandboxTerminal({
   onActivate,
   className
 }) {
-  const containerRef = useRef15(null);
-  const termRef = useRef15(null);
-  const fitRef = useRef15(null);
-  const writtenRef = useRef15(/* @__PURE__ */ new Set());
+  const containerRef = useRef16(null);
+  const termRef = useRef16(null);
+  const fitRef = useRef16(null);
+  const writtenRef = useRef16(/* @__PURE__ */ new Set());
   const [ready, setReady] = useState23(false);
   const ptyWs = terminalCapability?.transport === "pty-ws" && Boolean(terminalCapability?.url);
-  const ptyOutputQueueRef = useRef15([]);
+  const ptyOutputQueueRef = useRef16([]);
   const ptyStream = useTerminalStream({
     capability: ptyWs ? {
       transport: terminalCapability.transport,
@@ -6387,7 +6640,7 @@ function SandboxTerminal({
         convertEol: true,
         disableStdin: !interactive,
         cursorBlink: interactive,
-        fontFamily: fontFamily ?? "var(--og-font-mono, var(--font-mono, monospace))",
+        fontFamily: fontFamily ?? "var(--og-font-mono)",
         fontSize: fontSize ?? 13,
         lineHeight: 1.25,
         // A little breathing room from the panel edge so output isn't flush to
@@ -6434,7 +6687,7 @@ function SandboxTerminal({
     if (!ready || !term || !theme) return;
     term.options.theme = theme;
   }, [ready, theme]);
-  const enteredPtyRef = useRef15(false);
+  const enteredPtyRef = useRef16(false);
   useEffect16(() => {
     const term = termRef.current;
     if (!ready || !term) return;
@@ -6490,24 +6743,24 @@ function SandboxTerminal({
     };
   }, [ready]);
   return /* @__PURE__ */ jsxs14("div", { className: cn("relative flex h-full w-full flex-col overflow-hidden", className), children: [
-    showHeader && /* @__PURE__ */ jsxs14("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-[color:var(--og-color-border,var(--color-border,#2a2a2a))] px-2 py-1 text-[11px] text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]", children: [
+    showHeader && /* @__PURE__ */ jsxs14("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-og-border px-2 py-1 text-og-xs text-og-fg-subtle", children: [
       /* @__PURE__ */ jsxs14("span", { className: "flex min-w-0 items-center gap-1.5", children: [
         /* @__PURE__ */ jsx17(
           "span",
           {
             className: cn(
               "size-1.5 shrink-0 rounded-full",
-              result.running ? "bg-[color:var(--og-color-status-running,var(--color-status-running,#d29922))]" : "bg-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]"
+              result.running ? "bg-og-status-running" : "bg-og-fg-subtle"
             )
           }
         ),
-        /* @__PURE__ */ jsxs14("span", { className: "truncate font-[family-name:var(--og-font-mono,var(--font-mono,monospace))]", children: [
+        /* @__PURE__ */ jsxs14("span", { className: "truncate font-og-mono", children: [
           "pty: ",
           shell ?? "shell"
         ] })
       ] }),
       /* @__PURE__ */ jsxs14("span", { className: "flex shrink-0 items-center gap-2", children: [
-        !interactive && /* @__PURE__ */ jsx17("span", { className: "rounded-[var(--og-radius-sm,4px)] bg-[color:var(--og-color-surface-2,var(--color-surface-2,#161616))] px-1.5 py-0.5 text-[10px] uppercase tracking-wide", children: "read-only" }),
+        !interactive && /* @__PURE__ */ jsx17("span", { className: "rounded-og-sm bg-og-surface-2 px-1.5 py-0.5 text-og-xs uppercase tracking-wide", children: "read-only" }),
         /* @__PURE__ */ jsx17(
           "button",
           {
@@ -6516,7 +6769,7 @@ function SandboxTerminal({
               termRef.current?.clear();
               writtenRef.current = /* @__PURE__ */ new Set();
             },
-            className: "rounded-[var(--og-radius-sm,4px)] px-1.5 py-0.5 text-[10px] hover:text-[color:var(--og-color-fg,var(--color-fg,#e6e6e6))]",
+            className: "rounded-og-sm px-1.5 py-0.5 text-og-xs hover:text-og-fg pointer-coarse:min-h-10",
             children: "Clear"
           }
         )
@@ -6525,7 +6778,7 @@ function SandboxTerminal({
     /* @__PURE__ */ jsxs14(
       "div",
       {
-        className: "relative min-h-0 flex-1 bg-[color:var(--og-color-bg,var(--color-bg,#0d0d0d))] px-2 py-1.5",
+        className: "relative min-h-0 flex-1 bg-og-bg px-2 py-1.5",
         onPointerDownCapture: onActivate,
         onFocusCapture: onActivate,
         children: [
@@ -6542,7 +6795,7 @@ var XTERM_BASE_CSS = `
 .xterm.focus,.xterm:focus{outline:none}
 .xterm .xterm-helpers{position:absolute;top:0;z-index:5}
 .xterm .xterm-helper-textarea{padding:0;border:0;margin:0;position:absolute;opacity:0;left:-9999em;top:0;width:0;height:0;z-index:-5;white-space:nowrap;overflow:hidden;resize:none}
-.xterm .composition-view{background:#000;color:#FFF;display:none;position:absolute;white-space:nowrap;z-index:1}
+.xterm .composition-view{background:var(--og-color-bg);color:var(--og-color-fg);display:none;position:absolute;white-space:nowrap;z-index:1}
 .xterm .composition-view.active{display:block}
 .xterm .xterm-viewport{background-color:transparent;overflow-y:scroll;cursor:default;position:absolute;right:0;left:0;top:0;bottom:0}
 .xterm .xterm-screen{position:relative}
@@ -6578,7 +6831,7 @@ function ensureXtermBaseCss() {
   document.head.appendChild(style);
 }
 function TerminalPlaceholder() {
-  return /* @__PURE__ */ jsx17("div", { className: "absolute inset-0 flex items-center justify-center text-xs text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]", children: "Loading terminal\u2026" });
+  return /* @__PURE__ */ jsx17("div", { className: "absolute inset-0 flex items-center justify-center text-og-sm text-og-fg-subtle", children: "Loading terminal\u2026" });
 }
 
 // src/components/file-browser.tsx
@@ -6594,19 +6847,19 @@ import {
   Trash2Icon
 } from "lucide-react";
 import {
-  useCallback as useCallback21,
+  useCallback as useCallback22,
   useEffect as useEffect17,
   useMemo as useMemo9,
-  useRef as useRef16,
+  useRef as useRef17,
   useState as useState24
 } from "react";
 import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 var STATUS_TINT = {
-  added: "text-[color:var(--og-color-status-idle,var(--color-success,#3fb950))]",
-  modified: "text-[color:var(--og-color-status-running,var(--color-warning,#d29922))]",
-  deleted: "text-[color:var(--og-color-danger,var(--color-danger,#f85149))] line-through",
-  renamed: "text-[color:var(--og-color-accent,var(--color-info,#58a6ff))]",
-  untracked: "text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]"
+  added: "text-og-status-idle",
+  modified: "text-og-status-running",
+  deleted: "text-og-status-failed line-through",
+  renamed: "text-og-accent",
+  untracked: "text-og-fg-subtle"
 };
 function parentOf2(path) {
   const i = path.lastIndexOf("/");
@@ -6644,9 +6897,9 @@ function FileBrowser({
   const [dragOver, setDragOver] = useState24(null);
   const [menu, setMenu] = useState24(null);
   const [busy, setBusy] = useState24(false);
-  const containerRef = useRef16(null);
+  const containerRef = useRef17(null);
   const cursor = active ?? selectedPath ?? null;
-  const expand = useCallback21(
+  const expand = useCallback22(
     async (path) => {
       const node = findNode(result.tree, path);
       if (node && node.kind === "dir" && node.children === void 0) {
@@ -6664,14 +6917,14 @@ function FileBrowser({
     },
     [result]
   );
-  const open = useCallback21(
+  const open = useCallback22(
     (path) => {
       setExpanded((prev) => new Set(prev).add(path));
       void expand(path);
     },
     [expand]
   );
-  const toggle = useCallback21(
+  const toggle = useCallback22(
     async (node) => {
       if (node.kind !== "dir") return;
       const isOpen = expanded.has(node.path);
@@ -6699,7 +6952,7 @@ function FileBrowser({
     return rows;
   }, [result.tree, expanded]);
   const supportsMutation = editable;
-  const runDelete = useCallback21(
+  const runDelete = useCallback22(
     async (node) => {
       if (!supportsMutation) return;
       const recursive = node.kind === "dir";
@@ -6718,7 +6971,7 @@ function FileBrowser({
     },
     [supportsMutation, confirmDelete, result]
   );
-  const commitCreate = useCallback21(
+  const commitCreate = useCallback22(
     async (name) => {
       const draft = draftCreate;
       setDraftCreate(null);
@@ -6743,7 +6996,7 @@ function FileBrowser({
     },
     [draftCreate, supportsMutation, result, open, onSelectFile]
   );
-  const commitRename = useCallback21(
+  const commitRename = useCallback22(
     async (name) => {
       const draft = draftRename;
       setDraftRename(null);
@@ -6766,7 +7019,7 @@ function FileBrowser({
     },
     [draftRename, supportsMutation, result, selectedPath, active, onSelectFile]
   );
-  const startCreate = useCallback21(
+  const startCreate = useCallback22(
     (kind) => {
       if (!supportsMutation) return;
       const anchor = cursor ? findNode(result.tree, cursor) : void 0;
@@ -6778,7 +7031,7 @@ function FileBrowser({
     },
     [supportsMutation, cursor, result.tree, open]
   );
-  const startRename = useCallback21(
+  const startRename = useCallback22(
     (node) => {
       if (!supportsMutation) return;
       setDraftCreate(null);
@@ -6787,7 +7040,7 @@ function FileBrowser({
     },
     [supportsMutation]
   );
-  const onDropOnto = useCallback21(
+  const onDropOnto = useCallback22(
     async (targetDir, sourcePath) => {
       setDragOver(null);
       if (!supportsMutation || !sourcePath) return;
@@ -6811,7 +7064,7 @@ function FileBrowser({
     },
     [supportsMutation, result, selectedPath, active, onSelectFile]
   );
-  const onKeyDown = useCallback21(
+  const onKeyDown = useCallback22(
     (e) => {
       if (draftCreate || draftRename) return;
       if (flatRows.length === 0) return;
@@ -6888,10 +7141,9 @@ function FileBrowser({
       window.removeEventListener("resize", close);
     };
   }, [menu]);
-  if (result.error && result.tree.length === 0) {
-    return /* @__PURE__ */ jsx18("div", { className: cn("p-3 text-xs text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]", className), children: fallback ?? `Files unavailable: ${result.error.message}` });
-  }
+  const showErrorEmpty = result.error && result.tree.length === 0 && !draftCreate;
   const showEmpty = !result.loading && result.tree.length === 0 && !draftCreate;
+  const showToolbar = supportsMutation || Boolean(result.error) || result.loading;
   const renderRow = (node, depth) => {
     const isOpen = expanded.has(node.path);
     if (renderNode) {
@@ -6959,11 +7211,11 @@ function FileBrowser({
                 setMenu({ node, x: e.clientX, y: e.clientY });
               },
               className: cn(
-                "group flex w-full items-center gap-1 truncate rounded px-1 py-0.5 text-left text-xs",
-                "hover:bg-[color:var(--og-color-surface-2,var(--color-bg-subtle,#1c1c1c))]",
-                isSelected && "bg-[color:var(--og-color-surface-2,var(--color-bg-subtle,#1c1c1c))]",
-                isCursor && "outline outline-1 -outline-offset-1 outline-[color:var(--og-color-accent,var(--color-info,#58a6ff))]",
-                isDropTarget && "ring-1 ring-inset ring-[color:var(--og-color-accent,var(--color-info,#58a6ff))] bg-[color:var(--og-color-accent-soft,rgba(88,166,255,0.12))]",
+                "group flex w-full items-center gap-1 truncate rounded-og-sm px-1 py-0.5 text-left text-og-sm pointer-coarse:min-h-10",
+                "hover:bg-og-surface-2",
+                isSelected && "bg-og-surface-2",
+                isCursor && "outline outline-1 -outline-offset-1 outline-og-accent",
+                isDropTarget && "bg-og-accent-soft ring-1 ring-inset ring-og-accent",
                 node.status ? STATUS_TINT[node.status] : void 0
               ),
               style: { paddingLeft: `${depth * 12 + 4}px` },
@@ -6971,7 +7223,7 @@ function FileBrowser({
                 isDir ? isLoading ? /* @__PURE__ */ jsx18(
                   Loader2Icon,
                   {
-                    className: "size-3 shrink-0 animate-spin text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]",
+                    className: "size-3 shrink-0 animate-spin text-og-fg-subtle",
                     "aria-label": "Loading"
                   }
                 ) : /* @__PURE__ */ jsx18(ChevronRightIcon3, { className: cn("size-3 shrink-0 transition-transform", isOpen && "rotate-90") }) : /* @__PURE__ */ jsx18("span", { className: "inline-block w-3 shrink-0" }),
@@ -6990,7 +7242,7 @@ function FileBrowser({
                       const rect = e.currentTarget.getBoundingClientRect();
                       setMenu({ node, x: rect.right, y: rect.bottom });
                     },
-                    className: "ml-auto hidden shrink-0 px-1 text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))] hover:text-[color:var(--og-color-fg,var(--color-fg,#e6e6e6))] group-hover:inline",
+                    className: "ml-auto hidden shrink-0 px-1 text-og-fg-subtle hover:text-og-fg group-hover:inline",
                     children: "\u22EF"
                   }
                 )
@@ -7017,7 +7269,7 @@ function FileBrowser({
               children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx18(
                 "div",
                 {
-                  className: "h-2.5 animate-pulse rounded bg-[color:var(--og-color-surface-2,var(--color-bg-subtle,#1c1c1c))]",
+                  className: "h-2.5 animate-pulse rounded-og-sm bg-og-surface-2",
                   style: { width: `${70 - i * 12}%` }
                 },
                 i
@@ -7031,33 +7283,35 @@ function FileBrowser({
     );
   };
   return /* @__PURE__ */ jsxs15("div", { className: cn("flex min-w-0 flex-col", className), children: [
-    supportsMutation && /* @__PURE__ */ jsxs15("div", { className: "flex shrink-0 items-center gap-0.5 border-b border-[color:var(--og-color-border,var(--color-border,#2a2a2a))] px-1 py-1", children: [
-      /* @__PURE__ */ jsx18(ToolbarButton, { label: "New file", onClick: () => startCreate("file"), disabled: busy, children: /* @__PURE__ */ jsx18(FilePlusIcon, { className: "size-3.5" }) }),
-      /* @__PURE__ */ jsx18(ToolbarButton, { label: "New folder", onClick: () => startCreate("dir"), disabled: busy, children: /* @__PURE__ */ jsx18(FolderPlusIcon, { className: "size-3.5" }) }),
-      /* @__PURE__ */ jsx18(
-        ToolbarButton,
-        {
-          label: "Rename",
-          onClick: () => {
-            const node = cursor ? findNode(result.tree, cursor) : void 0;
-            if (node) startRename(node);
-          },
-          disabled: busy || !cursor,
-          children: /* @__PURE__ */ jsx18(PencilIcon, { className: "size-3.5" })
-        }
-      ),
-      /* @__PURE__ */ jsx18(
-        ToolbarButton,
-        {
-          label: "Delete",
-          onClick: () => {
-            const node = cursor ? findNode(result.tree, cursor) : void 0;
-            if (node) void runDelete(node);
-          },
-          disabled: busy || !cursor,
-          children: /* @__PURE__ */ jsx18(Trash2Icon, { className: "size-3.5" })
-        }
-      ),
+    showToolbar && /* @__PURE__ */ jsxs15("div", { className: "flex shrink-0 flex-wrap items-center gap-0.5 border-b border-og-border px-1 py-1", children: [
+      supportsMutation ? /* @__PURE__ */ jsxs15(Fragment5, { children: [
+        /* @__PURE__ */ jsx18(ToolbarButton, { label: "New file", onClick: () => startCreate("file"), disabled: busy, children: /* @__PURE__ */ jsx18(FilePlusIcon, { className: "size-3.5" }) }),
+        /* @__PURE__ */ jsx18(ToolbarButton, { label: "New folder", onClick: () => startCreate("dir"), disabled: busy, children: /* @__PURE__ */ jsx18(FolderPlusIcon, { className: "size-3.5" }) }),
+        /* @__PURE__ */ jsx18(
+          ToolbarButton,
+          {
+            label: "Rename",
+            onClick: () => {
+              const node = cursor ? findNode(result.tree, cursor) : void 0;
+              if (node) startRename(node);
+            },
+            disabled: busy || !cursor,
+            children: /* @__PURE__ */ jsx18(PencilIcon, { className: "size-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          ToolbarButton,
+          {
+            label: "Delete",
+            onClick: () => {
+              const node = cursor ? findNode(result.tree, cursor) : void 0;
+              if (node) void runDelete(node);
+            },
+            disabled: busy || !cursor,
+            children: /* @__PURE__ */ jsx18(Trash2Icon, { className: "size-3.5" })
+          }
+        )
+      ] }) : null,
       /* @__PURE__ */ jsx18("span", { className: "ml-auto" }),
       /* @__PURE__ */ jsx18(ToolbarButton, { label: "Refresh", onClick: () => void result.refresh(), disabled: busy || result.loading, children: /* @__PURE__ */ jsx18(RefreshCwIcon, { className: cn("size-3.5", result.loading && "animate-spin") }) })
     ] }),
@@ -7081,7 +7335,7 @@ function FileBrowser({
         } : void 0,
         className: cn(
           "min-w-0 flex-1 overflow-auto p-1 outline-none",
-          dragOver === "" && "ring-1 ring-inset ring-[color:var(--og-color-accent,var(--color-info,#58a6ff))]"
+          dragOver === "" && "ring-1 ring-inset ring-og-accent"
         ),
         "data-opengeni-file-tree": true,
         children: [
@@ -7095,7 +7349,22 @@ function FileBrowser({
               onCancel: () => setDraftCreate(null)
             }
           ),
-          showEmpty ? /* @__PURE__ */ jsx18("div", { className: "p-2 text-xs text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]", children: emptyState ?? "No files." }) : result.tree.map((node) => renderRow(node, 0))
+          showErrorEmpty ? /* @__PURE__ */ jsxs15("div", { className: "flex flex-col items-start gap-2 p-2 text-og-sm text-og-fg-subtle", children: [
+            /* @__PURE__ */ jsx18("div", { children: fallback ?? `Could not load files: ${result.error?.message ?? "refresh the file list to try again"}` }),
+            /* @__PURE__ */ jsxs15(
+              "button",
+              {
+                type: "button",
+                onClick: () => void result.refresh(),
+                disabled: result.loading,
+                className: "inline-flex 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:text-og-fg disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:min-h-10",
+                children: [
+                  /* @__PURE__ */ jsx18(RefreshCwIcon, { className: cn("size-3.5", result.loading && "animate-spin"), "aria-hidden": true }),
+                  "Retry"
+                ]
+              }
+            )
+          ] }) : showEmpty ? /* @__PURE__ */ jsx18("div", { className: "p-2 text-og-sm text-og-fg-subtle", children: emptyState ?? "This directory is empty" }) : result.tree.map((node) => renderRow(node, 0))
         ]
       }
     ),
@@ -7128,8 +7397,8 @@ function ToolbarButton({
       onClick,
       disabled,
       className: cn(
-        "inline-flex items-center justify-center rounded p-1 text-[color:var(--og-color-fg-muted,var(--color-fg-muted,#aaa))]",
-        "hover:bg-[color:var(--og-color-surface-2,var(--color-bg-subtle,#1c1c1c))] hover:text-[color:var(--og-color-fg,var(--color-fg,#e6e6e6))]",
+        "inline-flex items-center justify-center rounded-og-sm p-1 text-og-fg-muted pointer-coarse:min-h-10 pointer-coarse:min-w-10",
+        "hover:bg-og-surface-2 hover:text-og-fg",
         "disabled:cursor-not-allowed disabled:opacity-40"
       ),
       children
@@ -7144,8 +7413,8 @@ function InlineInput({
   onCancel
 }) {
   const [value, setValue] = useState24(initialValue);
-  const ref = useRef16(null);
-  const doneRef = useRef16(false);
+  const ref = useRef17(null);
+  const doneRef = useRef17(false);
   useEffect17(() => {
     const el = ref.current;
     if (!el) return;
@@ -7184,8 +7453,8 @@ function InlineInput({
           e.stopPropagation();
         },
         className: cn(
-          "min-w-0 flex-1 rounded border bg-[color:var(--og-color-bg,var(--color-bg,#0d0d0d))] px-1 py-0 text-xs",
-          "border-[color:var(--og-color-accent,var(--color-info,#58a6ff))] text-[color:var(--og-color-fg,var(--color-fg,#e6e6e6))]",
+          "min-w-0 flex-1 rounded-og-sm border bg-og-bg px-1 py-0 text-og-sm",
+          "border-og-accent text-og-fg",
           "outline-none"
         )
       }
@@ -7215,9 +7484,9 @@ function ContextMenu({
         onClick();
       },
       className: cn(
-        "flex w-full items-center gap-2 px-2.5 py-1 text-left text-xs",
-        "hover:bg-[color:var(--og-color-surface-2,var(--color-bg-subtle,#1c1c1c))]",
-        danger ? "text-[color:var(--og-color-danger,var(--color-danger,#f85149))]" : "text-[color:var(--og-color-fg,var(--color-fg,#e6e6e6))]"
+        "flex w-full items-center gap-2 px-2.5 py-1 text-left text-og-sm pointer-coarse:min-h-10",
+        "hover:bg-og-surface-2",
+        danger ? "text-og-status-failed" : "text-og-fg"
       ),
       children: [
         icon,
@@ -7233,14 +7502,14 @@ function ContextMenu({
       style: { left, top },
       className: cn(
         "fixed z-50 min-w-[160px] overflow-hidden rounded-md border py-1 shadow-lg",
-        "border-[color:var(--og-color-border,var(--color-border,#2a2a2a))]",
-        "bg-[color:var(--og-color-surface-1,var(--color-surface,#161616))]"
+        "border-og-border",
+        "bg-og-surface-1"
       ),
       children: [
         isDir && /* @__PURE__ */ jsxs15(Fragment5, { children: [
           item("New file", /* @__PURE__ */ jsx18(FilePlusIcon, { className: "size-3.5" }), onNewFile),
           item("New folder", /* @__PURE__ */ jsx18(FolderPlusIcon, { className: "size-3.5" }), onNewFolder),
-          /* @__PURE__ */ jsx18("div", { className: "my-1 h-px bg-[color:var(--og-color-border,var(--color-border,#2a2a2a))]" })
+          /* @__PURE__ */ jsx18("div", { className: "my-1 h-px bg-og-border" })
         ] }),
         item("Rename", /* @__PURE__ */ jsx18(PencilIcon, { className: "size-3.5" }), onRename),
         item("Delete", /* @__PURE__ */ jsx18(Trash2Icon, { className: "size-3.5" }), onDelete, true)
@@ -7293,12 +7562,12 @@ function PierreFile({
     themeType: themeType ?? "dark"
   };
   const pierreVars = {
-    "--diffs-dark-bg": "var(--og-color-bg, #0d0d0d)",
-    "--diffs-light-bg": "var(--og-color-bg, #ffffff)",
-    "--diffs-bg-buffer-override": "var(--og-color-surface-1, #161616)",
-    "--diffs-bg-separator-override": "var(--og-color-surface-1, #161616)",
-    "--diffs-font-size": "12.5px",
-    "--diffs-line-height": "20px"
+    "--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__ */ jsx19("div", { className: cn("min-w-0", className), "data-opengeni-pierre-file": true, style: pierreVars, children: /* @__PURE__ */ jsx19(Suspense2, { fallback: loading ?? /* @__PURE__ */ jsx19(FileSkeleton, {}), children: /* @__PURE__ */ jsx19(
     LazyFile,
@@ -7313,14 +7582,14 @@ function PlainFile({ name, contents }) {
   return /* @__PURE__ */ jsx19(
     "pre",
     {
-      className: "overflow-auto whitespace-pre p-2 font-[family-name:var(--og-font-mono,var(--font-mono,monospace))] text-[12px] leading-[18px] text-[color:var(--og-color-fg,var(--color-fg,#e6e6e6))]",
+      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__ */ jsx19("div", { className: "p-3 text-xs text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]", children: "Loading file\u2026" });
+  return /* @__PURE__ */ jsx19("div", { className: "p-3 text-og-sm text-og-fg-subtle", children: "Loading file\u2026" });
 }
 
 // src/components/code-editor.tsx
@@ -7328,10 +7597,10 @@ import { Loader2Icon as Loader2Icon2, SaveIcon } from "lucide-react";
 import {
   lazy as lazy3,
   Suspense as Suspense3,
-  useCallback as useCallback22,
+  useCallback as useCallback23,
   useEffect as useEffect19,
   useMemo as useMemo10,
-  useRef as useRef17,
+  useRef as useRef18,
   useState as useState26
 } from "react";
 import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
@@ -7400,7 +7669,7 @@ function CodeEditor({
   const [saveError, setSaveError] = useState26(null);
   const [savedTick, setSavedTick] = useState26(false);
   const dirty = value !== baseline;
-  const lastSeed = useRef17({ path, contents: initialContents });
+  const lastSeed = useRef18({ path, contents: initialContents });
   useEffect19(() => {
     const seedChanged = lastSeed.current.path !== path || lastSeed.current.contents !== initialContents;
     if (!seedChanged) return;
@@ -7443,9 +7712,9 @@ function CodeEditor({
       cancelled = true;
     };
   }, [langKey]);
-  const saveRef = useRef17(() => {
+  const saveRef = useRef18(() => {
   });
-  const save = useCallback22(async () => {
+  const save = useCallback23(async () => {
     if (readOnly) return;
     const snapshot = value;
     if (snapshot === baseline) return;
@@ -7498,18 +7767,18 @@ function CodeEditor({
       "data-opengeni-code-editor": true,
       style: editorVars,
       children: [
-        /* @__PURE__ */ jsxs16("div", { className: "flex shrink-0 items-center gap-2 border-b border-[color:var(--og-color-border,var(--color-border,#2a2a2a))] bg-[color:var(--og-color-surface-1,var(--color-surface,#161616))] px-2 py-1", children: [
+        /* @__PURE__ */ jsxs16("div", { className: "flex shrink-0 items-center gap-2 border-b border-og-border bg-og-surface-1 px-2 py-1", children: [
           /* @__PURE__ */ jsx20(
             "span",
             {
               className: cn(
                 "size-1.5 shrink-0 rounded-full transition-colors",
-                readOnly ? "bg-transparent" : dirty ? "bg-[color:var(--og-color-status-running,var(--color-warning,#d29922))]" : "bg-[color:var(--og-color-status-idle,var(--color-success,#3fb950))]"
+                readOnly ? "bg-transparent" : dirty ? "bg-og-status-running" : "bg-og-status-idle"
               ),
               title: readOnly ? "read-only" : dirty ? "unsaved changes" : "saved"
             }
           ),
-          /* @__PURE__ */ jsxs16("span", { className: "truncate font-[family-name:var(--og-font-mono,var(--font-mono,monospace))] text-[11px] text-[color:var(--og-color-fg-muted,var(--color-fg-muted,#aaa))]", children: [
+          /* @__PURE__ */ jsxs16("span", { className: "truncate font-og-mono text-og-xs text-og-fg-muted", children: [
             fileName,
             dirty && !readOnly ? " \u2022" : ""
           ] }),
@@ -7517,21 +7786,21 @@ function CodeEditor({
             saveError && /* @__PURE__ */ jsx20(
               "span",
               {
-                className: "max-w-[220px] truncate text-[10px] text-[color:var(--og-color-danger,var(--color-danger,#f85149))]",
+                className: "max-w-[220px] truncate text-og-xs text-og-status-failed",
                 title: saveError.message,
                 children: saveError.message
               }
             ),
-            !saveError && savedTick && /* @__PURE__ */ jsx20("span", { className: "text-[10px] text-[color:var(--og-color-status-idle,var(--color-success,#3fb950))]", children: "Saved" }),
-            readOnly ? /* @__PURE__ */ jsx20("span", { className: "text-[10px] uppercase tracking-wide text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]", children: "Read-only" }) : /* @__PURE__ */ jsxs16(
+            !saveError && savedTick && /* @__PURE__ */ jsx20("span", { className: "text-og-xs text-og-status-idle", children: "Saved" }),
+            readOnly ? /* @__PURE__ */ jsx20("span", { className: "text-og-xs uppercase tracking-wide text-og-fg-subtle", children: "Read-only" }) : /* @__PURE__ */ jsxs16(
               "button",
               {
                 type: "button",
                 onClick: () => void save(),
                 disabled: saving || !dirty,
                 className: cn(
-                  "flex items-center gap-1 rounded-[var(--og-radius-sm,4px)] border border-[color:var(--og-color-border,var(--color-border,#2a2a2a))] px-1.5 py-0.5 text-[10px]",
-                  saving || !dirty ? "cursor-default text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))] opacity-60" : "text-[color:var(--og-color-fg,var(--color-fg,#e6e6e6))] hover:bg-[color:var(--og-color-accent-soft,var(--color-surface-2,#222))]"
+                  "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-10",
+                  saving || !dirty ? "cursor-default text-og-fg-subtle opacity-60" : "text-og-fg hover:bg-og-accent-soft"
                 ),
                 title: "Save (\u2318/Ctrl+S)",
                 children: [
@@ -7552,7 +7821,7 @@ function CodeEditor({
             basicSetup: true,
             extensions: cmExtensions,
             height: "100%",
-            className: "og-cm-editor min-h-full text-[12.5px]",
+            className: "og-cm-editor min-h-full text-og-sm",
             onChange: readOnly ? void 0 : (next) => {
               setValue(next);
               setSavedTick(false);
@@ -7564,8 +7833,8 @@ function CodeEditor({
   );
 }
 var editorVars = {
-  "--og-cm-bg": "var(--og-color-bg, #0d0d0d)",
-  fontFamily: "var(--og-font-mono, var(--font-mono, monospace))"
+  "--og-cm-bg": "var(--og-color-bg)",
+  fontFamily: "var(--og-font-mono)"
 };
 function PlainTextarea({
   value,
@@ -7579,28 +7848,28 @@ function PlainTextarea({
       readOnly,
       spellCheck: false,
       onChange: (e) => onChange(e.target.value),
-      className: "h-full w-full resize-none bg-transparent p-2 font-[family-name:var(--og-font-mono,var(--font-mono,monospace))] text-[12px] leading-[18px] text-[color:var(--og-color-fg,var(--color-fg,#e6e6e6))] outline-none"
+      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__ */ jsx20("div", { className: "p-3 text-xs text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]", children: "Loading editor\u2026" });
+  return /* @__PURE__ */ jsx20("div", { className: "p-3 text-og-sm text-og-fg-subtle", children: "Loading editor\u2026" });
 }
 
 // src/components/sandbox-files.tsx
 import { FileIcon as FileIcon3 } from "lucide-react";
-import { useCallback as useCallback23, useEffect as useEffect20, useMemo as useMemo11, useRef as useRef18, useState as useState27 } from "react";
+import { useCallback as useCallback24, useEffect as useEffect20, useMemo as useMemo11, useRef as useRef19, useState as useState27 } from "react";
 import { Fragment as Fragment6, jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 var STATUS_TINT2 = {
-  added: "text-[color:var(--og-color-status-idle,var(--color-success,#3fb950))]",
-  modified: "text-[color:var(--og-color-status-running,var(--color-warning,#d29922))]",
-  deleted: "text-[color:var(--og-color-danger,var(--color-danger,#f85149))]",
-  renamed: "text-[color:var(--og-color-accent,var(--color-info,#58a6ff))]",
-  copied: "text-[color:var(--og-color-accent,var(--color-info,#58a6ff))]",
-  untracked: "text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]",
-  ignored: "text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]",
-  conflicted: "text-[color:var(--og-color-danger,var(--color-danger,#f85149))]",
-  typechange: "text-[color:var(--og-color-status-running,var(--color-warning,#d29922))]"
+  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",
@@ -7627,7 +7896,7 @@ function SandboxFiles({
   const [staged, setStaged] = useState27(false);
   const [layout, setLayout] = useState27("unified");
   const [editMode, setEditMode] = useState27(false);
-  const rootRef = useRef18(null);
+  const rootRef = useRef19(null);
   const [wide, setWide] = useState27(false);
   useEffect20(() => {
     const el = rootRef.current;
@@ -7647,7 +7916,7 @@ function SandboxFiles({
   const selectedDiff = changed.find((f) => f.path === effectiveSelected) ?? null;
   const viewPath = effectiveSelected && !selectedDiff ? effectiveSelected : null;
   const fileView = useFileView(viewPath, files.readFile);
-  const selectFile = useCallback23((path) => {
+  const selectFile = useCallback24((path) => {
     setSelected(path);
     setEditMode(false);
   }, []);
@@ -7664,11 +7933,11 @@ function SandboxFiles({
         {
           className: cn(
             "min-h-0 overflow-auto",
-            wide ? "w-[280px] shrink-0 border-r border-[color:var(--og-color-border,var(--color-border,#2a2a2a))]" : "flex-1"
+            wide ? "w-[280px] shrink-0 border-r border-og-border" : "flex-1"
           ),
           children: [
-            changed.length > 0 && /* @__PURE__ */ jsxs17("div", { className: "border-b border-[color:var(--og-color-border,var(--color-border,#2a2a2a))]", children: [
-              /* @__PURE__ */ jsxs17("div", { className: "px-2 py-1 text-[10px] font-medium uppercase tracking-wide text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]", children: [
+            changed.length > 0 && /* @__PURE__ */ jsxs17("div", { className: "border-b border-og-border", children: [
+              /* @__PURE__ */ jsxs17("div", { className: "px-2 py-1 text-og-xs font-medium uppercase tracking-wide text-og-fg-subtle", children: [
                 "Changes \xB7 ",
                 changed.length
               ] }),
@@ -7678,15 +7947,15 @@ function SandboxFiles({
                   type: "button",
                   onClick: () => selectFile(file.path),
                   className: cn(
-                    "flex w-full items-center gap-1.5 truncate px-2 py-0.5 text-left text-xs hover:bg-[color:var(--og-color-surface-2,var(--color-bg-subtle,#1c1c1c))]",
-                    file.path === effectiveSelected && "bg-[color:var(--og-color-surface-2,var(--color-bg-subtle,#1c1c1c))]"
+                    "flex w-full items-center gap-1.5 truncate px-2 py-0.5 text-left text-og-sm hover:bg-og-surface-2 pointer-coarse:min-h-10",
+                    file.path === effectiveSelected && "bg-og-surface-2"
                   ),
                   children: [
                     /* @__PURE__ */ jsx21(
                       "span",
                       {
                         className: cn(
-                          "w-3 shrink-0 text-center font-[family-name:var(--og-font-mono,var(--font-mono,monospace))] text-[10px]",
+                          "w-3 shrink-0 text-center font-og-mono text-og-xs",
                           STATUS_TINT2[file.status]
                         ),
                         children: STATUS_LETTER[file.status]
@@ -7694,12 +7963,12 @@ function SandboxFiles({
                     ),
                     /* @__PURE__ */ jsx21(FileIcon3, { className: "size-3.5 shrink-0 opacity-70" }),
                     /* @__PURE__ */ jsx21("span", { className: "truncate", children: file.path }),
-                    /* @__PURE__ */ jsxs17("span", { className: "ml-auto flex shrink-0 items-center gap-1.5 pl-2 text-[10px]", children: [
-                      /* @__PURE__ */ jsxs17("span", { className: "text-[color:var(--og-color-status-idle,var(--color-success,#3fb950))]", children: [
+                    /* @__PURE__ */ jsxs17("span", { className: "ml-auto flex shrink-0 items-center gap-1.5 pl-2 text-og-xs", children: [
+                      /* @__PURE__ */ jsxs17("span", { className: "text-og-status-idle", children: [
                         "+",
                         file.additions
                       ] }),
-                      /* @__PURE__ */ jsxs17("span", { className: "text-[color:var(--og-color-danger,var(--color-danger,#f85149))]", children: [
+                      /* @__PURE__ */ jsxs17("span", { className: "text-og-status-failed", children: [
                         "\u2212",
                         file.deletions
                       ] })
@@ -7708,14 +7977,14 @@ function SandboxFiles({
                 }
               ) }, file.path)) })
             ] }),
-            /* @__PURE__ */ jsx21("div", { className: "px-2 py-1 text-[10px] font-medium uppercase tracking-wide text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]", children: "Files" }),
+            /* @__PURE__ */ jsx21("div", { className: "px-2 py-1 text-og-xs font-medium uppercase tracking-wide text-og-fg-subtle", children: "Files" }),
             /* @__PURE__ */ jsx21(
               FileBrowser,
               {
                 result: files,
                 selectedPath: effectiveSelected ?? void 0,
                 onSelectFile: selectFile,
-                emptyState: "No files.",
+                emptyState: "This directory is empty",
                 className: "min-w-0"
               }
             )
@@ -7727,12 +7996,12 @@ function SandboxFiles({
         {
           className: cn(
             "flex min-h-0 min-w-0 flex-col",
-            wide ? "flex-1" : "flex-[1.4] border-t border-[color:var(--og-color-border,var(--color-border,#2a2a2a))]"
+            wide ? "flex-1" : "flex-[1.4] border-t border-og-border"
           ),
           children: [
-            /* @__PURE__ */ jsxs17("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-[color:var(--og-color-border,var(--color-border,#2a2a2a))] bg-[color:var(--og-color-surface-1,var(--color-surface,#161616))] px-2 py-1", children: [
-              /* @__PURE__ */ jsx21("span", { className: "truncate font-[family-name:var(--og-font-mono,var(--font-mono,monospace))] text-[11px] text-[color:var(--og-color-fg-muted,var(--color-fg-muted,#aaa))]", children: effectiveSelected ?? "No file selected" }),
-              /* @__PURE__ */ jsxs17("div", { className: "flex shrink-0 items-center gap-1", children: [
+            /* @__PURE__ */ jsxs17("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__ */ jsx21("span", { className: "min-w-0 truncate font-og-mono text-og-xs text-og-fg-muted", children: effectiveSelected ?? "No file selected" }),
+              /* @__PURE__ */ jsxs17("div", { className: "flex min-w-0 shrink-0 flex-wrap items-center justify-end gap-1", children: [
                 selectedDiff && stagedGit && /* @__PURE__ */ jsx21(
                   Segmented,
                   {
@@ -7809,7 +8078,7 @@ function SandboxFiles({
                 fileView.sizeBytes ?? 0,
                 " bytes)."
               ] }) : fileView.content !== null ? /* @__PURE__ */ jsxs17(Fragment6, { children: [
-                fileView.truncated && /* @__PURE__ */ jsxs17("div", { className: "border-b border-[color:var(--og-color-border,var(--color-border,#2a2a2a))] bg-[color:var(--og-color-surface-1,var(--color-surface,#161616))] px-2 py-1 text-[10px] text-[color:var(--og-color-status-running,var(--color-warning,#d29922))]", children: [
+                fileView.truncated && /* @__PURE__ */ jsxs17("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."
@@ -7820,10 +8089,10 @@ function SandboxFiles({
                     path: viewPath,
                     contents: fileView.content,
                     themeType: resolvedTheme,
-                    fallback: /* @__PURE__ */ jsx21("pre", { className: "overflow-auto whitespace-pre p-2 font-[family-name:var(--og-font-mono,var(--font-mono,monospace))] text-[12px] leading-[18px]", children: fileView.content }),
+                    fallback: /* @__PURE__ */ jsx21("pre", { className: "overflow-auto whitespace-pre p-2 font-og-mono text-og-sm text-og-fg", children: fileView.content }),
                     className: "p-1"
                   }
-                ) : /* @__PURE__ */ jsx21("pre", { className: "overflow-auto whitespace-pre p-2 font-[family-name:var(--og-font-mono,var(--font-mono,monospace))] text-[12px] leading-[18px]", children: fileView.content })
+                ) : /* @__PURE__ */ jsx21("pre", { className: "overflow-auto whitespace-pre p-2 font-og-mono text-og-sm text-og-fg", children: fileView.content })
               ] }) : /* @__PURE__ */ jsxs17(Notice, { children: [
                 "Loading ",
                 viewPath,
@@ -7842,19 +8111,19 @@ function SandboxFiles({
 }
 function GitHeader({ git, dirtyCount }) {
   const dirty = dirtyCount > 0;
-  return /* @__PURE__ */ jsxs17("div", { className: "flex shrink-0 items-center gap-2 border-b border-[color:var(--og-color-border,var(--color-border,#2a2a2a))] bg-[color:var(--og-color-surface-1,var(--color-surface,#161616))] px-2 py-1 text-xs", children: [
+  return /* @__PURE__ */ jsxs17("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__ */ jsx21(
       "span",
       {
         className: cn(
           "size-2 shrink-0 rounded-full",
-          dirty ? "bg-[color:var(--og-color-status-running,var(--color-warning,#d29922))]" : "bg-[color:var(--og-color-status-idle,var(--color-success,#3fb950))]"
+          dirty ? "bg-og-status-running" : "bg-og-status-idle"
         ),
         title: dirty ? `${dirtyCount} changed` : "clean"
       }
     ),
-    /* @__PURE__ */ jsx21("span", { className: "truncate font-[family-name:var(--og-font-mono,var(--font-mono,monospace))] text-[color:var(--og-color-fg,var(--color-fg,#e6e6e6))]", children: git.branch ?? (git.isRepo ? "(detached)" : "no repo") }),
-    (git.ahead > 0 || git.behind > 0) && /* @__PURE__ */ jsxs17("span", { className: "flex shrink-0 items-center gap-1.5 text-[10px] text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]", children: [
+    /* @__PURE__ */ jsx21("span", { className: "truncate font-og-mono text-og-fg", children: git.branch ?? (git.isRepo ? "(detached)" : "no repo") }),
+    (git.ahead > 0 || git.behind > 0) && /* @__PURE__ */ jsxs17("span", { className: "flex shrink-0 items-center gap-1.5 text-og-xs text-og-fg-subtle", children: [
       git.ahead > 0 && /* @__PURE__ */ jsxs17("span", { children: [
         "\u2191",
         git.ahead
@@ -7864,7 +8133,7 @@ function GitHeader({ git, dirtyCount }) {
         git.behind
       ] })
     ] }),
-    dirty && /* @__PURE__ */ jsxs17("span", { className: "ml-auto shrink-0 text-[10px] text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]", children: [
+    dirty && /* @__PURE__ */ jsxs17("span", { className: "ml-auto shrink-0 text-og-xs text-og-fg-subtle", children: [
       dirtyCount,
       " changed"
     ] })
@@ -7875,14 +8144,14 @@ function Segmented({
   value,
   onChange
 }) {
-  return /* @__PURE__ */ jsx21("div", { className: "flex items-center rounded-[var(--og-radius-sm,4px)] border border-[color:var(--og-color-border,var(--color-border,#2a2a2a))] p-0.5", children: options.map((opt) => /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx21("div", { className: "flex flex-wrap items-center rounded-og-sm border border-og-border p-0.5", children: options.map((opt) => /* @__PURE__ */ jsx21(
     "button",
     {
       type: "button",
       onClick: () => onChange(opt.value),
       className: cn(
-        "rounded-[var(--og-radius-xs,3px)] px-1.5 py-0.5 text-[10px]",
-        opt.value === value ? "bg-[color:var(--og-color-accent-soft,var(--color-surface-2,#222))] text-[color:var(--og-color-fg,var(--color-fg,#e6e6e6))]" : "text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))] hover:text-[color:var(--og-color-fg,var(--color-fg,#e6e6e6))]"
+        "rounded-og-xs px-1.5 py-0.5 text-og-xs pointer-coarse:min-h-10",
+        opt.value === value ? "bg-og-accent-soft text-og-fg" : "text-og-fg-subtle hover:text-og-fg"
       ),
       children: opt.label
     },
@@ -7950,7 +8219,7 @@ function Notice({ children, className }) {
     "div",
     {
       className: cn(
-        "flex h-full items-center justify-center p-4 text-center text-xs text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]",
+        "flex h-full items-center justify-center p-4 text-center text-og-sm text-og-fg-subtle",
         className
       ),
       children
@@ -7960,8 +8229,9 @@ function Notice({ children, className }) {
 
 // src/components/desktop-viewer.tsx
 import { LoaderCircleIcon as LoaderCircleIcon2, MonitorIcon, MousePointerClickIcon, WifiOffIcon } from "lucide-react";
-import { useEffect as useEffect21, useRef as useRef19, useState as useState28 } from "react";
+import { useEffect as useEffect21, useRef as useRef20, useState as useState28 } from "react";
 import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+var DESKTOP_MEDIA_BACKGROUND = "#000";
 function isHardUnavailable(reason) {
   switch (reason) {
     case "backend_unsupported":
@@ -7992,7 +8262,7 @@ function DesktopViewer({
   connectTimeoutMs = 13e3,
   className
 }) {
-  const containerRef = useRef19(null);
+  const containerRef = useRef20(null);
   const [consented, setConsented] = useState28(false);
   const [takeControl, setTakeControl] = useState28(interactive ?? false);
   const externallyControlled = interactive !== void 0;
@@ -8034,9 +8304,9 @@ function DesktopViewer({
   });
   const connected = stream.state === "connected";
   const hasLiveUrl = Boolean(connectCapability?.url);
-  const streamStateRef = useRef19(stream.state);
+  const streamStateRef = useRef20(stream.state);
   streamStateRef.current = stream.state;
-  const warmKeyRef = useRef19(null);
+  const warmKeyRef = useRef20(null);
   useEffect21(() => {
     if (!isWatching || !coldWarmable || needsAck || viewerCapReached) {
       if (!coldWarmable) warmKeyRef.current = null;
@@ -8115,10 +8385,11 @@ function DesktopViewer({
     "div",
     {
       className: cn(
-        "relative h-full w-full overflow-hidden bg-black",
-        inControl && "ring-2 ring-inset ring-[color:var(--og-color-accent,var(--color-brand,#3b82f6))]",
+        "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,
@@ -8133,18 +8404,18 @@ function DesktopViewer({
             "data-state": stream.state
           }
         ),
-        uiState === "connecting" && /* @__PURE__ */ jsxs18("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-3 text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]", children: [
+        uiState === "connecting" && /* @__PURE__ */ jsxs18("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-3 text-og-fg-subtle", children: [
           /* @__PURE__ */ jsxs18("span", { className: "relative flex items-center justify-center", children: [
             /* @__PURE__ */ jsx22(MonitorIcon, { className: "size-8 opacity-30", strokeWidth: 1.5 }),
             /* @__PURE__ */ jsx22(
               LoaderCircleIcon2,
               {
-                className: "absolute size-12 animate-og-spin text-[color:var(--og-color-accent,var(--color-brand,#3b82f6))] opacity-70",
+                className: "absolute size-12 animate-og-spin text-og-accent opacity-70",
                 strokeWidth: 1.25
               }
             )
           ] }),
-          /* @__PURE__ */ jsx22("span", { className: "text-xs", children: "Connecting to the desktop\u2026" })
+          /* @__PURE__ */ jsx22("span", { className: "text-og-sm", children: "Connecting to the desktop\u2026" })
         ] }),
         showToggle && !externallyControlled && inControl && /* @__PURE__ */ jsx22(
           InControlBar,
@@ -8157,7 +8428,7 @@ function DesktopViewer({
           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,
+            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)
           }
         ),
@@ -8183,16 +8454,16 @@ function TakeControlCallToAction({
         title: disabled ? disabledReason : "Take control of the desktop",
         onClick: onTakeControl,
         className: cn(
-          "group pointer-events-auto flex items-center gap-3 rounded-[var(--og-radius-lg,12px)] border px-5 py-3",
-          "border-[color:var(--og-color-border,var(--color-border,#2a2a2a))]",
-          "bg-[color:var(--og-color-bg,#0d0d0d)]/85 backdrop-blur-md",
-          "shadow-[var(--og-shadow-lg,0_10px_30px_-10px_rgba(0,0,0,0.6))]",
+          "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-[color:var(--og-color-accent,var(--color-brand,#3b82f6))] focus-visible:ring-offset-2 focus-visible:ring-offset-black",
+          "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-[color:var(--og-color-accent,var(--color-brand,#3b82f6))]",
-            "hover:bg-[color:var(--og-color-accent,var(--color-brand,#3b82f6))]/10"
+            "hover:border-og-accent",
+            "hover:bg-og-accent/10"
           )
         ),
         children: [
@@ -8201,16 +8472,16 @@ function TakeControlCallToAction({
             {
               className: cn(
                 "flex size-9 shrink-0 items-center justify-center rounded-full transition-colors",
-                "bg-[color:var(--og-color-accent,var(--color-brand,#3b82f6))]",
-                "text-[color:var(--og-color-accent-fg,#fff)]",
+                "bg-og-accent",
+                "text-og-accent-fg",
                 disabled ? "" : "group-hover:scale-105"
               ),
               children: /* @__PURE__ */ jsx22(MousePointerClickIcon, { className: "size-5", strokeWidth: 2 })
             }
           ),
           /* @__PURE__ */ jsxs18("span", { className: "flex flex-col items-start leading-tight", children: [
-            /* @__PURE__ */ jsx22("span", { className: "text-sm font-semibold text-[color:var(--og-color-fg,#e6e6e6)]", children: "Take control" }),
-            /* @__PURE__ */ jsx22("span", { className: "text-[11px] text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]", children: disabled && disabledReason ? disabledReason : "Drive the mouse & keyboard" })
+            /* @__PURE__ */ jsx22("span", { className: "text-og-base font-semibold text-og-fg", children: "Take control" }),
+            /* @__PURE__ */ jsx22("span", { className: "text-og-xs text-og-fg-subtle", children: disabled && disabledReason ? disabledReason : "Drive the mouse & keyboard" })
           ] })
         ]
       }
@@ -8219,13 +8490,13 @@ function TakeControlCallToAction({
 }
 function InControlBar({ shared, onRelease }) {
   return /* @__PURE__ */ jsxs18("div", { className: "pointer-events-none absolute inset-x-0 top-0 flex items-center justify-between gap-2 p-2", children: [
-    /* @__PURE__ */ jsxs18("span", { className: "pointer-events-auto inline-flex items-center gap-2 rounded-[var(--og-radius-sm,4px)] bg-[color:var(--og-color-accent,var(--color-brand,#3b82f6))] px-2.5 py-1 text-[11px] font-medium text-[color:var(--og-color-accent-fg,#fff)] shadow-[var(--og-shadow-md)]", children: [
+    /* @__PURE__ */ jsxs18("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__ */ jsx22("span", { className: "size-1.5 animate-pulse rounded-full bg-current", "aria-hidden": true }),
       "You're in control",
       /* @__PURE__ */ jsx22("span", { className: "opacity-75", children: "\xB7 click Return control (or Ctrl+Alt+Shift)" })
     ] }),
     /* @__PURE__ */ jsxs18("div", { className: "pointer-events-auto flex items-center gap-1.5", children: [
-      shared && /* @__PURE__ */ jsx22("span", { className: "rounded-[var(--og-radius-sm,4px)] bg-[color:var(--og-color-danger,var(--color-danger,#f85149))]/85 px-2 py-0.5 text-[10px] text-white", children: "Shared box \u2014 others are watching" }),
+      shared && /* @__PURE__ */ jsx22("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__ */ jsxs18(
         "button",
         {
@@ -8233,9 +8504,9 @@ function InControlBar({ shared, onRelease }) {
           onClick: onRelease,
           title: "Return control (or press Ctrl+Alt+Shift)",
           className: cn(
-            "inline-flex items-center gap-1.5 rounded-[var(--og-radius-sm,4px)] border px-2.5 py-1 text-[11px] font-semibold shadow-[var(--og-shadow-md)] transition-colors",
-            "border-[color:var(--og-color-accent,var(--color-brand,#3b82f6))] bg-[color:var(--og-color-bg,#0d0d0d)]/90 text-[color:var(--og-color-fg,#e6e6e6)] backdrop-blur-sm",
-            "outline-none hover:bg-[color:var(--og-color-accent,var(--color-brand,#3b82f6))] hover:text-[color:var(--og-color-accent-fg,#fff)] focus-visible:ring-2 focus-visible:ring-[color:var(--og-color-accent,var(--color-brand,#3b82f6))]"
+            "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__ */ jsx22(MonitorIcon, { className: "size-3.5", strokeWidth: 2, "aria-hidden": true }),
@@ -8255,7 +8526,7 @@ function unavailableCopy(reason) {
     case "os_unsupported":
       return "The sandbox OS does not support a desktop stream.";
     case "not_provisioned":
-      return "No display stack is provisioned on this box yet.";
+      return "This sandbox doesn't have a desktop yet.";
     case "disabled_by_policy":
       return "Desktop streaming is disabled on this deployment.";
     case "lease_cold":
@@ -8265,62 +8536,62 @@ function unavailableCopy(reason) {
   }
 }
 function WarmingNotice({ onRetry }) {
-  return /* @__PURE__ */ jsxs18("div", { className: "flex max-w-sm flex-col items-center gap-3 rounded-lg border border-[color:var(--color-border,#2a2a2a)] bg-[color:var(--color-bg,#0d0d0d)]/90 p-5 text-center text-sm text-[color:var(--color-fg,#e6e6e6)] backdrop-blur-sm", children: [
+  return /* @__PURE__ */ jsxs18("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__ */ jsx22(
       LoaderCircleIcon2,
       {
-        className: "size-7 animate-og-spin text-[color:var(--og-color-accent,var(--color-brand,#3b82f6))]",
+        className: "size-7 animate-og-spin text-og-accent",
         strokeWidth: 1.5
       }
     ),
     /* @__PURE__ */ jsxs18("div", { className: "space-y-1", children: [
       /* @__PURE__ */ jsx22("div", { className: "font-medium", children: "Warming the sandbox\u2026" }),
-      /* @__PURE__ */ jsx22("p", { className: "text-xs text-[color:var(--color-fg-subtle,#888)]", children: "Spinning up the desktop \u2014 this takes a few seconds." })
+      /* @__PURE__ */ jsx22("p", { className: "text-og-sm text-og-fg-subtle", children: "Spinning up the desktop \u2014 this takes a few seconds." })
     ] }),
     onRetry && /* @__PURE__ */ jsx22(
       "button",
       {
         type: "button",
         onClick: onRetry,
-        className: "rounded border border-[color:var(--color-border,#2a2a2a)] px-3 py-1.5 text-xs text-[color:var(--color-fg-muted,#aaa)] transition-colors hover:text-[color:var(--color-fg,#e6e6e6)]",
+        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-10",
         children: "Taking too long? Retry"
       }
     )
   ] });
 }
 function DefaultConsentGate({ shared, onAccept }) {
-  return /* @__PURE__ */ jsxs18("div", { className: "max-w-sm rounded-lg border border-[color:var(--color-border,#2a2a2a)] bg-[color:var(--color-bg,#0d0d0d)] p-4 text-center text-sm text-[color:var(--color-fg,#e6e6e6)]", children: [
+  return /* @__PURE__ */ jsxs18("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__ */ jsx22("div", { className: "mb-1 font-medium", children: "Watch the live desktop?" }),
-    /* @__PURE__ */ jsxs18("p", { className: "mb-3 text-xs text-[color:var(--color-fg-subtle,#888)]", children: [
+    /* @__PURE__ */ jsxs18("p", { className: "mb-3 text-og-sm text-og-fg-subtle", children: [
       "The desktop pixel stream is ",
       /* @__PURE__ */ jsx22("strong", { children: "un-redacted" }),
       " \u2014 it can show secrets the agent prints on screen.",
-      shared ? " This box is shared: you will also see sibling sessions' agents on the same screen." : ""
+      shared ? " This sandbox is shared: you'll also see other sessions' agents on the same screen." : ""
     ] }),
     /* @__PURE__ */ jsx22(
       "button",
       {
         type: "button",
         onClick: onAccept,
-        className: "rounded bg-[color:var(--color-brand,#3b82f6)] px-3 py-1.5 text-xs font-medium text-white",
+        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-10",
         children: "I understand \u2014 show the desktop"
       }
     )
   ] });
 }
 function defaultNotice(title, body, onRetry) {
-  return /* @__PURE__ */ jsxs18("div", { className: "max-w-sm rounded-lg border border-[color:var(--color-border,#2a2a2a)] bg-[color:var(--color-bg,#0d0d0d)] p-4 text-center text-sm text-[color:var(--color-fg,#e6e6e6)]", children: [
+  return /* @__PURE__ */ jsxs18("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__ */ jsxs18("div", { className: "mb-1 flex items-center justify-center gap-1.5 font-medium", children: [
       onRetry && /* @__PURE__ */ jsx22(WifiOffIcon, { className: "size-4 opacity-70", strokeWidth: 1.75 }),
       title
     ] }),
-    /* @__PURE__ */ jsx22("p", { className: "text-xs text-[color:var(--color-fg-subtle,#888)]", children: body }),
+    /* @__PURE__ */ jsx22("p", { className: "text-og-sm text-og-fg-subtle", children: body }),
     onRetry && /* @__PURE__ */ jsx22(
       "button",
       {
         type: "button",
         onClick: onRetry,
-        className: "mt-3 rounded border border-[color:var(--color-border,#2a2a2a)] px-3 py-1.5 text-xs transition-colors hover:border-[color:var(--og-color-accent,var(--color-brand,#3b82f6))]",
+        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-10",
         children: "Reconnect"
       }
     )
@@ -8328,12 +8599,13 @@ function defaultNotice(title, body, onRetry) {
 }
 
 // src/components/workspace-dock.tsx
-import { useCallback as useCallback24, useEffect as useEffect22, useLayoutEffect, useState as useState29 } from "react";
+import { useCallback as useCallback25, useEffect as useEffect22, useLayoutEffect, useState as useState29 } from "react";
 import {
   ChevronsLeftRightIcon,
   Maximize2Icon,
   Minimize2Icon,
-  PanelRightCloseIcon
+  PanelRightCloseIcon,
+  XIcon as XIcon3
 } from "lucide-react";
 import {
   Group,
@@ -8344,6 +8616,25 @@ import {
 } from "react-resizable-panels";
 import { Fragment as Fragment7, jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 var useDockLayoutEffect = typeof window === "undefined" ? useEffect22 : useLayoutEffect;
+var DOCK_OVERLAY_BREAKPOINT = 1024;
+function useIsNarrow(maxWidth) {
+  const [narrow, setNarrow] = useState29(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 WorkspaceDock({
   primary,
   tabs,
@@ -8357,11 +8648,13 @@ function WorkspaceDock({
   maxSize = 70,
   className
 }) {
+  const narrow = useIsNarrow(DOCK_OVERLAY_BREAKPOINT);
   const dockPanelRef = usePanelRef();
   const [internalCollapsed, setInternalCollapsed] = useState29(false);
   const [maximized, setMaximized] = useState29(false);
   const [internalTab, setInternalTab] = useState29(tabs[0]?.id ?? "");
   const collapsed = collapsedProp ?? internalCollapsed;
+  const hostControlled = collapsedProp !== void 0;
   const { defaultLayout, onLayoutChanged } = useDefaultLayout({
     panelIds: ["primary", "dock"],
     storage: typeof window !== "undefined" ? window.localStorage : void 0,
@@ -8370,14 +8663,14 @@ function WorkspaceDock({
   const current = activeTab ?? internalTab;
   const tabIds = tabs.map((tab) => tab.id).join("\0");
   const firstTabId = tabs[0]?.id ?? "";
-  const setTab = useCallback24(
+  const setTab = useCallback25(
     (id) => {
       setInternalTab(id);
       onActiveTabChange?.(id);
     },
     [onActiveTabChange]
   );
-  const setCollapsed = useCallback24(
+  const setCollapsed = useCallback25(
     (next) => {
       setInternalCollapsed((previous) => previous === next ? previous : next);
       onCollapsedChange?.(next);
@@ -8400,31 +8693,70 @@ function WorkspaceDock({
       setTab(firstTabId);
     }
   }, [tabIds, firstTabId, current, setTab]);
-  useEffect22(() => {
-    if (!maximized) return;
-    const onKey = (event) => {
-      if (event.key === "Escape") setMaximized(false);
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [maximized]);
-  const collapse = useCallback24(() => {
+  const collapse = useCallback25(() => {
     dockPanelRef.current?.collapse();
     setCollapsed(true);
   }, [dockPanelRef, setCollapsed]);
-  const expand = useCallback24(() => {
+  const expand = useCallback25(() => {
     dockPanelRef.current?.expand();
     setCollapsed(false);
   }, [dockPanelRef, setCollapsed]);
+  useEffect22(() => {
+    const overlayOpen = maximized || narrow && !collapsed;
+    if (!overlayOpen) return;
+    const onKey = (event) => {
+      if (event.key !== "Escape") return;
+      if (maximized) setMaximized(false);
+      else collapse();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [maximized, narrow, collapsed, collapse]);
+  if (narrow) {
+    return /* @__PURE__ */ jsxs19("div", { className: cn("relative flex h-full min-h-0 w-full min-w-0", className), children: [
+      /* @__PURE__ */ jsx23("div", { className: "min-h-0 min-w-0 flex-1", children: primary }),
+      !collapsed && /* @__PURE__ */ jsx23(
+        "div",
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "Workspace",
+          className: "fixed inset-0 z-40 flex flex-col bg-og-bg",
+          style: {
+            paddingTop: "env(safe-area-inset-top)",
+            paddingBottom: "env(safe-area-inset-bottom)"
+          },
+          children: /* @__PURE__ */ jsx23(
+            DockChrome,
+            {
+              tabs,
+              current,
+              onTab: setTab,
+              controls: /* @__PURE__ */ jsx23(ChromeButton, { onClick: collapse, title: "Close workspace", label: "Close workspace", children: /* @__PURE__ */ jsx23(XIcon3, { className: "size-4" }) })
+            }
+          )
+        }
+      )
+    ] });
+  }
   const dockChrome = /* @__PURE__ */ jsx23(
     DockChrome,
     {
       tabs,
       current,
       onTab: setTab,
-      maximized,
-      onToggleMaximize: () => setMaximized((m) => !m),
-      onCollapse: maximized ? () => setMaximized(false) : collapse
+      controls: /* @__PURE__ */ jsxs19(Fragment7, { children: [
+        /* @__PURE__ */ jsx23(
+          ChromeButton,
+          {
+            onClick: () => setMaximized((m) => !m),
+            title: maximized ? "Restore (Esc)" : "Maximize",
+            label: maximized ? "Restore dock" : "Maximize dock",
+            children: maximized ? /* @__PURE__ */ jsx23(Minimize2Icon, { className: "size-3.5" }) : /* @__PURE__ */ jsx23(Maximize2Icon, { className: "size-3.5" })
+          }
+        ),
+        hostControlled ? null : /* @__PURE__ */ jsx23(ChromeButton, { onClick: collapse, title: "Collapse", label: "Collapse dock", children: /* @__PURE__ */ jsx23(PanelRightCloseIcon, { className: "size-3.5" }) })
+      ] })
     }
   );
   return /* @__PURE__ */ jsxs19("div", { className: cn("relative flex h-full min-h-0 w-full min-w-0", className), children: [
@@ -8437,7 +8769,7 @@ function WorkspaceDock({
         onLayoutChanged,
         children: [
           /* @__PURE__ */ jsx23(Panel, { id: "primary", minSize: "30%", className: "min-h-0 min-w-0", children: primary }),
-          !collapsed && /* @__PURE__ */ jsx23(Separator, { className: "group relative w-1.5 shrink-0 outline-none", children: /* @__PURE__ */ jsx23("span", { className: "absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-[color:var(--og-color-border,var(--color-border,#2a2a2a))] transition-colors group-hover:bg-[color:var(--og-color-accent,var(--color-brand,#3b82f6))] group-data-[separator-state=dragging]:bg-[color:var(--og-color-accent,var(--color-brand,#3b82f6))]" }) }),
+          !collapsed && /* @__PURE__ */ jsx23(Separator, { className: "group relative w-1.5 shrink-0 outline-none", children: /* @__PURE__ */ jsx23("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-data-[separator-state=dragging]:bg-og-accent" }) }),
           /* @__PURE__ */ jsx23(
             Panel,
             {
@@ -8456,83 +8788,85 @@ function WorkspaceDock({
                 }
               },
               className: "min-h-0 min-w-0",
-              children: !collapsed && !maximized && /* @__PURE__ */ jsx23("div", { className: "flex h-full min-h-0 min-w-0 flex-col border-l border-[color:var(--og-color-border,var(--color-border,#2a2a2a))] bg-[color:var(--og-color-bg,var(--color-bg,#0d0d0d))]", children: dockChrome })
+              children: !collapsed && !maximized && /* @__PURE__ */ jsx23("div", { className: "flex h-full min-h-0 min-w-0 flex-col border-l border-og-border bg-og-bg", children: dockChrome })
             }
           )
         ]
       }
     ),
-    collapsed && !maximized && /* @__PURE__ */ jsx23(
+    collapsed && !maximized && !hostControlled && /* @__PURE__ */ jsx23(
       "button",
       {
         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-[color:var(--og-color-border,var(--color-border,#2a2a2a))] bg-[color:var(--og-color-surface-1,var(--color-surface,#161616))] text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))] hover:text-[color:var(--og-color-fg,var(--color-fg,#e6e6e6))]",
+        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__ */ jsx23(ChevronsLeftRightIcon, { className: "size-3.5" })
       }
     ),
-    maximized && /* @__PURE__ */ jsx23("div", { className: "fixed inset-0 z-40 flex flex-col bg-[color:var(--og-color-bg,var(--color-bg,#0d0d0d))]", children: dockChrome })
+    maximized && /* @__PURE__ */ jsx23("div", { className: "fixed inset-0 z-40 flex flex-col bg-og-bg", children: dockChrome })
   ] });
 }
+function ChromeButton({
+  onClick,
+  title,
+  label,
+  children
+}) {
+  return /* @__PURE__ */ jsx23(
+    "button",
+    {
+      type: "button",
+      onClick,
+      title,
+      "aria-label": label,
+      className: "inline-flex items-center justify-center rounded-og-sm p-1 transition-colors hover:bg-og-surface-2 hover:text-og-fg pointer-coarse:size-10",
+      children
+    }
+  );
+}
 function DockChrome({
   tabs,
   current,
   onTab,
-  maximized,
-  onToggleMaximize,
-  onCollapse
+  controls
 }) {
   const active = tabs.find((t) => t.id === current) ?? tabs[0];
   return /* @__PURE__ */ jsxs19(Fragment7, { children: [
-    /* @__PURE__ */ jsxs19("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-[color:var(--og-color-border,var(--color-border,#2a2a2a))] px-1.5 py-1", children: [
-      /* @__PURE__ */ jsx23("div", { className: "flex min-w-0 items-center gap-0.5", role: "tablist", children: tabs.map((tab) => /* @__PURE__ */ jsxs19(
-        "button",
+    /* @__PURE__ */ jsxs19("div", { className: "flex shrink-0 items-center gap-2 border-b border-og-border px-1.5 py-1", children: [
+      /* @__PURE__ */ jsx23(
+        "div",
         {
-          type: "button",
-          role: "tab",
-          "aria-selected": tab.id === current,
-          onClick: () => onTab(tab.id),
-          className: cn(
-            "flex items-center gap-1 rounded-[var(--og-radius-sm,4px)] px-2 py-1 text-[11px] font-medium transition-colors",
-            tab.id === current ? "bg-[color:var(--og-color-accent-soft,var(--color-surface-2,#222))] text-[color:var(--og-color-fg,var(--color-fg,#e6e6e6))]" : "text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))] hover:text-[color:var(--og-color-fg,var(--color-fg,#e6e6e6))]"
-          ),
-          children: [
-            /* @__PURE__ */ jsx23("span", { className: "truncate", children: tab.label }),
-            tab.badge
-          ]
-        },
-        tab.id
-      )) }),
-      /* @__PURE__ */ jsxs19("div", { className: "flex shrink-0 items-center gap-0.5 text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]", children: [
-        /* @__PURE__ */ jsx23(
-          "button",
-          {
-            type: "button",
-            onClick: onToggleMaximize,
-            title: maximized ? "Restore (Esc)" : "Maximize",
-            className: "rounded-[var(--og-radius-sm,4px)] p-1 hover:bg-[color:var(--og-color-surface-2,var(--color-surface-2,#222))] hover:text-[color:var(--og-color-fg,var(--color-fg,#e6e6e6))]",
-            children: maximized ? /* @__PURE__ */ jsx23(Minimize2Icon, { className: "size-3.5" }) : /* @__PURE__ */ jsx23(Maximize2Icon, { className: "size-3.5" })
-          }
-        ),
-        /* @__PURE__ */ jsx23(
-          "button",
-          {
-            type: "button",
-            onClick: onCollapse,
-            title: maximized ? "Restore" : "Collapse",
-            className: "rounded-[var(--og-radius-sm,4px)] p-1 hover:bg-[color:var(--og-color-surface-2,var(--color-surface-2,#222))] hover:text-[color:var(--og-color-fg,var(--color-fg,#e6e6e6))]",
-            children: /* @__PURE__ */ jsx23(PanelRightCloseIcon, { className: "size-3.5" })
-          }
-        )
-      ] })
+          className: "flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+          role: "tablist",
+          children: tabs.map((tab) => /* @__PURE__ */ jsxs19(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              "aria-selected": tab.id === current,
+              onClick: () => onTab(tab.id),
+              className: cn(
+                "flex shrink-0 items-center gap-1 rounded-og-sm px-2 py-1 text-og-xs font-medium transition-colors pointer-coarse:min-h-10",
+                tab.id === current ? "bg-og-accent-soft text-og-fg" : "text-og-fg-subtle hover:text-og-fg"
+              ),
+              children: [
+                /* @__PURE__ */ jsx23("span", { children: tab.label }),
+                tab.badge
+              ]
+            },
+            tab.id
+          ))
+        }
+      ),
+      /* @__PURE__ */ jsx23("div", { className: "flex shrink-0 items-center gap-0.5 text-og-fg-subtle", children: controls })
     ] }),
     /* @__PURE__ */ jsx23("div", { className: "min-h-0 min-w-0 flex-1 overflow-hidden", role: "tabpanel", children: active?.content })
   ] });
 }
 
 // src/hooks/use-codex-accounts.ts
-import { useCallback as useCallback25, useState as useState30 } from "react";
+import { useCallback as useCallback26, useState as useState30 } from "react";
 function isCodexAccountEvent(event) {
   return event.type === "codex.account.switched" || event.type === "turn.started";
 }
@@ -8549,7 +8883,7 @@ function useCodexAccounts(options = {}) {
   const codexClient = options.codexClient ?? client;
   const sessionId = options.sessionId;
   const sharedEvents = options.events;
-  const load = useCallback25(async () => {
+  const load = useCallback26(async () => {
     const accountsP = codexClient.listCodexAccounts(workspaceId);
     const sessionP = sessionId && codexClient.getSession ? codexClient.getSession(workspaceId, sessionId).catch(() => null) : Promise.resolve(null);
     const [acc, session] = await Promise.all([accountsP, sessionP]);
@@ -8573,7 +8907,7 @@ function useCodexAccounts(options = {}) {
     () => void state.refresh(),
     { enabled: options.enabled ?? true, ...sharedEvents !== void 0 ? { events: sharedEvents } : {} }
   );
-  const pin = useCallback25(
+  const pin = useCallback26(
     async (target) => {
       if (!sessionId || !codexClient.pinSessionCodexAccount) {
         return false;
@@ -8589,7 +8923,7 @@ function useCodexAccounts(options = {}) {
     },
     [codexClient, workspaceId, sessionId, mutation.run, state.refresh]
   );
-  const refreshUsage = useCallback25(
+  const refreshUsage = useCallback26(
     async () => {
       if (!codexClient.refreshCodexUsage) {
         return false;
@@ -8628,16 +8962,13 @@ function xtermThemeFromTokens(root) {
   if (typeof window === "undefined" || typeof getComputedStyle === "undefined") return void 0;
   const el = root ?? document.documentElement;
   const style = getComputedStyle(el);
-  const read = (names) => {
-    for (const name of names) {
-      const value = style.getPropertyValue(name).trim();
-      if (value) return value;
-    }
-    return void 0;
+  const read = (name) => {
+    const value = style.getPropertyValue(name).trim();
+    return value || void 0;
   };
-  const bg = read(["--og-color-bg", "--color-bg"]);
-  const fg = read(["--og-color-fg", "--color-fg"]);
-  const accent = read(["--og-color-accent", "--color-brand", "--color-accent"]);
+  const bg = read("--og-color-bg");
+  const fg = read("--og-color-fg");
+  const accent = read("--og-color-accent");
   const theme = {};
   if (bg) theme.background = bg;
   if (fg) theme.foreground = fg;
@@ -8663,6 +8994,7 @@ export {
   DisclosureDefaultsProvider,
   EnrollmentConsent,
   EnrollmentDeviceFlow,
+  FILE_ONLY_MESSAGE_TEXT,
   FileBrowser,
   FleetTile,
   LightboxProvider,
@@ -8718,6 +9050,7 @@ export {
   gitFileDiffToPatch,
   groupTimeline,
   hasPermission,
+  humanizeFailureReason,
   isApplyPatch,
   isCodexAccountEvent,
   isExecSessionLostBanner,