@opengeni/react 0.6.1 → 0.6.3

package/src/components/pierre-file.tsx

@@ -99,12 +99,12 @@ export function PierreFile({
   // Same shadow-DOM override vars as PierreDiff: pin the base background to the
   // dock surface so the viewer reads as part of the panel, not a black seam.
   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)",
   } as CSSProperties;
 
   return (
@@ -125,7 +125,7 @@ export function PierreFile({
 function PlainFile({ name, contents }: { name: string; contents: string }) {
   return (
     <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}
     >
       {contents}
@@ -135,7 +135,7 @@ function PlainFile({ name, contents }: { name: string; contents: string }) {
 
 function FileSkeleton() {
   return (
-    <div className="p-3 text-xs text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]">
+    <div className="p-3 text-og-sm text-og-fg-subtle">
       Loading file…
     </div>
   );

package/src/components/sandbox-files.tsx

@@ -30,15 +30,15 @@ export type SandboxFilesProps = {
 };
 
 const STATUS_TINT: Record<GitFileDiff["status"], string> = {
-  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",
 };
 
 const STATUS_LETTER: Record<GitFileDiff["status"], string> = {
@@ -158,13 +158,13 @@ export 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))]"
+              ? "w-[280px] shrink-0 border-r border-og-border"
               : "flex-1",
           )}
         >
           {changed.length > 0 && (
-            <div className="border-b border-[color:var(--og-color-border,var(--color-border,#2a2a2a))]">
-              <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))]">
+            <div className="border-b border-og-border">
+              <div className="px-2 py-1 text-og-xs font-medium uppercase tracking-wide text-og-fg-subtle">
                 Changes · {changed.length}
               </div>
               <ul className="pb-1">
@@ -174,14 +174,13 @@ export 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",
                       )}
                     >
                       <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_TINT[file.status],
                         )}
                       >
@@ -189,11 +188,11 @@ export function SandboxFiles({
                       </span>
                       <FileIcon className="size-3.5 shrink-0 opacity-70" />
                       <span className="truncate">{file.path}</span>
-                      <span className="ml-auto flex shrink-0 items-center gap-1.5 pl-2 text-[10px]">
-                        <span className="text-[color:var(--og-color-status-idle,var(--color-success,#3fb950))]">
+                      <span className="ml-auto flex shrink-0 items-center gap-1.5 pl-2 text-og-xs">
+                        <span className="text-og-status-idle">
                           +{file.additions}
                         </span>
-                        <span className="text-[color:var(--og-color-danger,var(--color-danger,#f85149))]">
+                        <span className="text-og-status-failed">
                           −{file.deletions}
                         </span>
                       </span>
@@ -204,14 +203,14 @@ export function SandboxFiles({
             </div>
           )}
 
-          <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))]">
+          <div className="px-2 py-1 text-og-xs font-medium uppercase tracking-wide text-og-fg-subtle">
             Files
           </div>
           <FileBrowser
             result={files}
             selectedPath={effectiveSelected ?? undefined}
             onSelectFile={selectFile}
-            emptyState="No files."
+            emptyState="This directory is empty"
             className="min-w-0"
           />
         </div>
@@ -223,14 +222,14 @@ export function SandboxFiles({
             "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))]",
+              : "flex-[1.4] border-t border-og-border",
           )}
         >
-          <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">
-            <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))]">
+          <div className="flex shrink-0 items-center justify-between gap-2 border-b border-og-border bg-og-surface-1 px-2 py-1">
+            <span className="min-w-0 truncate font-og-mono text-og-xs text-og-fg-muted">
               {effectiveSelected ?? "No file selected"}
             </span>
-            <div className="flex shrink-0 items-center gap-1">
+            <div className="flex min-w-0 shrink-0 flex-wrap items-center justify-end gap-1">
               {/* The Working/Staged + Unified/Split toggles only apply to a diff.
                   Hide them in the read-only viewer (a non-changed tree file). */}
               {selectedDiff && stagedGit && (
@@ -306,7 +305,7 @@ export function SandboxFiles({
               ) : fileView.content !== null ? (
                 <>
                 {fileView.truncated && (
-                  <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))]">
+                  <div className="border-b border-og-border bg-og-surface-1 px-2 py-1 text-og-xs text-og-status-running">
                     Large file — showing a truncated preview ({fileView.sizeBytes ?? 0} bytes loaded). Editing is disabled to avoid corrupting the file.
                   </div>
                 )}
@@ -316,14 +315,14 @@ export function SandboxFiles({
                     contents={fileView.content}
                     themeType={resolvedTheme}
                     fallback={
-                      <pre className="overflow-auto whitespace-pre p-2 font-[family-name:var(--og-font-mono,var(--font-mono,monospace))] text-[12px] leading-[18px]">
+                      <pre className="overflow-auto whitespace-pre p-2 font-og-mono text-og-sm text-og-fg">
                         {fileView.content}
                       </pre>
                     }
                     className="p-1"
                   />
                 ) : (
-                  <pre className="overflow-auto whitespace-pre p-2 font-[family-name:var(--og-font-mono,var(--font-mono,monospace))] text-[12px] leading-[18px]">
+                  <pre className="overflow-auto whitespace-pre p-2 font-og-mono text-og-sm text-og-fg">
                     {fileView.content}
                   </pre>
                 )}
@@ -350,27 +349,25 @@ export function SandboxFiles({
 function GitHeader({ git, dirtyCount }: { git: UseSandboxGitResult; dirtyCount: number }) {
   const dirty = dirtyCount > 0;
   return (
-    <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">
+    <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">
       <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"}
       />
-      <span className="truncate font-[family-name:var(--og-font-mono,var(--font-mono,monospace))] text-[color:var(--og-color-fg,var(--color-fg,#e6e6e6))]">
+      <span className="truncate font-og-mono text-og-fg">
         {git.branch ?? (git.isRepo ? "(detached)" : "no repo")}
       </span>
       {(git.ahead > 0 || git.behind > 0) && (
-        <span className="flex shrink-0 items-center gap-1.5 text-[10px] text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]">
+        <span className="flex shrink-0 items-center gap-1.5 text-og-xs text-og-fg-subtle">
           {git.ahead > 0 && <span>↑{git.ahead}</span>}
           {git.behind > 0 && <span>↓{git.behind}</span>}
         </span>
       )}
       {dirty && (
-        <span className="ml-auto shrink-0 text-[10px] text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]">
+        <span className="ml-auto shrink-0 text-og-xs text-og-fg-subtle">
           {dirtyCount} changed
         </span>
       )}
@@ -388,17 +385,17 @@ function Segmented({
   onChange: (value: string) => void;
 }) {
   return (
-    <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">
+    <div className="flex flex-wrap items-center rounded-og-sm border border-og-border p-0.5">
       {options.map((opt) => (
         <button
           key={opt.value}
           type="button"
           onClick={() => onChange(opt.value)}
           className={cn(
-            "rounded-[var(--og-radius-xs,3px)] px-1.5 py-0.5 text-[10px]",
+            "rounded-og-xs px-1.5 py-0.5 text-og-xs pointer-coarse:min-h-10",
             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))]",
+              ? "bg-og-accent-soft text-og-fg"
+              : "text-og-fg-subtle hover:text-og-fg",
           )}
         >
           {opt.label}
@@ -499,7 +496,7 @@ function Notice({ children, className }: { children: ReactNode; className?: stri
   return (
     <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,
       )}
     >

package/src/components/sandbox-terminal.tsx

@@ -181,7 +181,7 @@ export 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
@@ -318,23 +318,21 @@ export function SandboxTerminal({
   return (
     <div className={cn("relative flex h-full w-full flex-col overflow-hidden", className)}>
       {showHeader && (
-        <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))]">
+        <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">
           <span className="flex min-w-0 items-center gap-1.5">
             <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",
               )}
             />
-            <span className="truncate font-[family-name:var(--og-font-mono,var(--font-mono,monospace))]">
+            <span className="truncate font-og-mono">
               pty: {shell ?? "shell"}
             </span>
           </span>
           <span className="flex shrink-0 items-center gap-2">
             {!interactive && (
-              <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">
+              <span className="rounded-og-sm bg-og-surface-2 px-1.5 py-0.5 text-og-xs uppercase tracking-wide">
                 read-only
               </span>
             )}
@@ -344,7 +342,7 @@ export function SandboxTerminal({
                 termRef.current?.clear();
                 writtenRef.current = 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"
             >
               Clear
             </button>
@@ -355,7 +353,7 @@ export function SandboxTerminal({
           with the terminal surface (capture so they win even though xterm's own
           listeners stop propagation). The host warms the box for pty-ws here. */}
       <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}
       >
@@ -379,7 +377,7 @@ const 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}
@@ -418,7 +416,7 @@ function ensureXtermBaseCss(): void {
 
 function TerminalPlaceholder() {
   return (
-    <div className="absolute inset-0 flex items-center justify-center text-xs text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]">
+    <div className="absolute inset-0 flex items-center justify-center text-og-sm text-og-fg-subtle">
       Loading terminal…
     </div>
   );

package/src/components/session-status.tsx

@@ -30,7 +30,7 @@ export const SESSION_STATUS_META: Record<SessionStatusValue, SessionStatusMeta>
     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,
@@ -65,7 +65,7 @@ export function SessionStatus({ status, label, size = "md", className }: Session
       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,
       )}

package/src/components/workspace-dock.tsx

@@ -4,6 +4,7 @@ import {
   Maximize2Icon,
   Minimize2Icon,
   PanelRightCloseIcon,
+  XIcon,
 } from "lucide-react";
 import {
   Group,
@@ -49,9 +50,43 @@ export type WorkspaceDockProps = {
  * restore button returns). Layout persists via `useDefaultLayout` keyed on
  * `autoSaveId`. Maximize is a mode ABOVE the Group (a `fixed inset-0` overlay) —
  * pushing a Panel to ~100% still fights min sizes and leaves a chat sliver.
+ *
+ * Below {@link DOCK_OVERLAY_BREAKPOINT} the side-by-side split can't work on a
+ * phone-width viewport, so the resizable panels are dropped entirely: the
+ * primary pane goes full-width and the dock becomes a full-screen overlay driven
+ * by the same `collapsed` / `onCollapsedChange` contract (collapsed → hidden).
+ * No drag splitter renders below the breakpoint.
  */
 const useDockLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 
+/**
+ * The dock stops being a side column at this width and becomes a full-screen
+ * overlay — matches the app's rail-drawer breakpoint (the single `isMobile`
+ * source). The package can't read app context, so it detects the width itself.
+ */
+const DOCK_OVERLAY_BREAKPOINT = 1024;
+
+/** SSR-safe `(max-width: …)` match; false until mounted, then live. */
+function useIsNarrow(maxWidth: number): boolean {
+  const [narrow, setNarrow] = useState(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);
+    }
+    // Legacy Safari.
+    mql.addListener(update);
+    return () => mql.removeListener(update);
+  }, [maxWidth]);
+  return narrow;
+}
+
 export function WorkspaceDock({
   primary,
   tabs,
@@ -65,11 +100,18 @@ export function WorkspaceDock({
   maxSize = 70,
   className,
 }: WorkspaceDockProps) {
+  const narrow = useIsNarrow(DOCK_OVERLAY_BREAKPOINT);
   const dockPanelRef = usePanelRef();
   const [internalCollapsed, setInternalCollapsed] = useState(false);
   const [maximized, setMaximized] = useState(false);
   const [internalTab, setInternalTab] = useState(tabs[0]?.id ?? "");
   const collapsed = collapsedProp ?? internalCollapsed;
+  // When the host supplies `collapsed` it owns the open/close affordance (e.g.
+  // the app header's panel toggle) — the dock must not offer a SECOND
+  // open/close control (duplicate buttons with near-identical icons read as a
+  // bug). Standalone (uncontrolled) usage keeps the built-in collapse button
+  // and the thin re-open rail as its only affordances.
+  const hostControlled = collapsedProp !== undefined;
 
   // Persisted layout (width split) keyed by autoSaveId.
   const { defaultLayout, onLayoutChanged } = useDefaultLayout({
@@ -117,16 +159,6 @@ export function WorkspaceDock({
     // rebuild tab JSX frequently; only id changes can invalidate the active tab.
   }, [tabIds, firstTabId, current, setTab]);
 
-  // Esc restores from maximize.
-  useEffect(() => {
-    if (!maximized) return;
-    const onKey = (event: KeyboardEvent) => {
-      if (event.key === "Escape") setMaximized(false);
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [maximized]);
-
   const collapse = useCallback(() => {
     dockPanelRef.current?.collapse();
     setCollapsed(true);
@@ -136,14 +168,74 @@ export function WorkspaceDock({
     setCollapsed(false);
   }, [dockPanelRef, setCollapsed]);
 
+  // Esc restores from maximize (desktop) and closes the mobile overlay.
+  useEffect(() => {
+    const overlayOpen = maximized || (narrow && !collapsed);
+    if (!overlayOpen) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return;
+      if (maximized) setMaximized(false);
+      else collapse();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [maximized, narrow, collapsed, collapse]);
+
+  // Below the breakpoint the dock is a full-screen overlay, not a resizable
+  // column: primary goes full-width and no splitter ever mounts. The overlay is
+  // driven by the same `collapsed` contract (collapsed → hidden).
+  if (narrow) {
+    return (
+      <div className={cn("relative flex h-full min-h-0 w-full min-w-0", className)}>
+        <div className="min-h-0 min-w-0 flex-1">{primary}</div>
+        {!collapsed && (
+          <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)",
+            }}
+          >
+            <DockChrome
+              tabs={tabs}
+              current={current}
+              onTab={setTab}
+              controls={
+                <ChromeButton onClick={collapse} title="Close workspace" label="Close workspace">
+                  <XIcon className="size-4" />
+                </ChromeButton>
+              }
+            />
+          </div>
+        )}
+      </div>
+    );
+  }
+
   const dockChrome = (
     <DockChrome
       tabs={tabs}
       current={current}
       onTab={setTab}
-      maximized={maximized}
-      onToggleMaximize={() => setMaximized((m) => !m)}
-      onCollapse={maximized ? () => setMaximized(false) : collapse}
+      controls={
+        <>
+          <ChromeButton
+            onClick={() => setMaximized((m) => !m)}
+            title={maximized ? "Restore (Esc)" : "Maximize"}
+            label={maximized ? "Restore dock" : "Maximize dock"}
+          >
+            {maximized ? <Minimize2Icon className="size-3.5" /> : <Maximize2Icon className="size-3.5" />}
+          </ChromeButton>
+          {hostControlled ? null : (
+            <ChromeButton onClick={collapse} title="Collapse" label="Collapse dock">
+              <PanelRightCloseIcon className="size-3.5" />
+            </ChromeButton>
+          )}
+        </>
+      }
     />
   );
 
@@ -161,7 +253,7 @@ export function WorkspaceDock({
 
         {!collapsed && (
           <Separator className="group relative w-1.5 shrink-0 outline-none">
-            <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))]" />
+            <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" />
           </Separator>
         )}
 
@@ -186,20 +278,21 @@ export function WorkspaceDock({
           {/* Hidden behind the overlay while maximized (avoids double-mounting
               the surfaces). */}
           {!collapsed && !maximized && (
-            <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))]">
+            <div className="flex h-full min-h-0 min-w-0 flex-col border-l border-og-border bg-og-bg">
               {dockChrome}
             </div>
           )}
         </Panel>
       </Group>
 
-      {/* Collapsed rail: a thin tab on the right edge that re-opens the dock. */}
-      {collapsed && !maximized && (
+      {/* Collapsed rail: the standalone fallback re-open affordance. Hidden
+          when the host controls collapse — its own toggle is the one way in. */}
+      {collapsed && !maximized && !hostControlled && (
         <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"
         >
           <ChevronsLeftRightIcon className="size-3.5" />
         </button>
@@ -207,7 +300,7 @@ export function WorkspaceDock({
 
       {/* Maximize overlay: full-workspace surface above everything. */}
       {maximized && (
-        <div className="fixed inset-0 z-40 flex flex-col bg-[color:var(--og-color-bg,var(--color-bg,#0d0d0d))]">
+        <div className="fixed inset-0 z-40 flex flex-col bg-og-bg">
           {dockChrome}
         </div>
       )}
@@ -215,26 +308,54 @@ export function WorkspaceDock({
   );
 }
 
+/** A dock-chrome control button — compact on fine pointers, ≥40px on coarse. */
+function ChromeButton({
+  onClick,
+  title,
+  label,
+  children,
+}: {
+  onClick: () => void;
+  title: string;
+  label: string;
+  children: ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      title={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}
+    </button>
+  );
+}
+
 function DockChrome({
   tabs,
   current,
   onTab,
-  maximized,
-  onToggleMaximize,
-  onCollapse,
+  controls,
 }: {
   tabs: WorkspaceTab[];
   current: string;
   onTab: (id: string) => void;
-  maximized: boolean;
-  onToggleMaximize: () => void;
-  onCollapse: () => void;
+  /** Right-aligned chrome controls (maximize / collapse, or the overlay close). */
+  controls: ReactNode;
 }) {
   const active = tabs.find((t) => t.id === current) ?? tabs[0];
   return (
     <>
-      <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">
-        <div className="flex min-w-0 items-center gap-0.5" role="tablist">
+      <div className="flex shrink-0 items-center gap-2 border-b border-og-border px-1.5 py-1">
+        {/* The tab list scrolls horizontally when it can't fit — it must never
+            grow into or overlap the chrome controls (they stay shrink-0). The
+            scrollbar is hidden to keep the strip calm. */}
+        <div
+          className="flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+          role="tablist"
+        >
           {tabs.map((tab) => (
             <button
               key={tab.id}
@@ -243,35 +364,18 @@ function DockChrome({
               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",
+                "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-[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))]",
+                  ? "bg-og-accent-soft text-og-fg"
+                  : "text-og-fg-subtle hover:text-og-fg",
               )}
             >
-              <span className="truncate">{tab.label}</span>
+              <span>{tab.label}</span>
               {tab.badge}
             </button>
           ))}
         </div>
-        <div className="flex shrink-0 items-center gap-0.5 text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]">
-          <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))]"
-          >
-            {maximized ? <Minimize2Icon className="size-3.5" /> : <Maximize2Icon className="size-3.5" />}
-          </button>
-          <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))]"
-          >
-            <PanelRightCloseIcon className="size-3.5" />
-          </button>
-        </div>
+        <div className="flex shrink-0 items-center gap-0.5 text-og-fg-subtle">{controls}</div>
       </div>
       <div className="min-h-0 min-w-0 flex-1 overflow-hidden" role="tabpanel">
         {active?.content}