@opengeni/react 0.6.2 → 0.8.0

package/src/components/message-timeline.tsx

@@ -11,7 +11,7 @@ import {
 } from "lucide-react";
 import type { ComponentType } from "react";
 import { AnimatePresence, motion } from "motion/react";
-import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import { cn } from "../lib/cn";
 import { formatRelativeTime, truncate } from "../lib/format";
 import { Markdown } from "./markdown";
@@ -32,6 +32,7 @@ import {
   TurnSummary,
 } from "../timeline";
 import { SESSION_STATUS_META, StatusDot } from "./session-status";
+import { EntranceAnimationProvider, useEntranceAnimation } from "../timeline/entrance";
 
 export type MessageTimelineProps = {
   /** Raw session events (projected internally) … */
@@ -52,6 +53,12 @@ export type MessageTimelineProps = {
   toolRegistry?: ToolRegistry | undefined;
   /** Follow new events when pinned to the bottom. Defaults to true. */
   autoFollow?: boolean | undefined;
+  /** Older durable history exists above the current window (see useSessionEvents). */
+  hasOlder?: boolean | undefined;
+  /** An older window is being fetched; shows the quiet top shimmer. */
+  loadingOlder?: boolean | undefined;
+  /** Called when the reader nears the top and older history should backfill. */
+  onLoadOlder?: (() => void) | undefined;
   emptyState?: ReactNode | undefined;
   className?: string | undefined;
 };
@@ -70,42 +77,208 @@ export function MessageTimeline({
   onOpenSession,
   toolRegistry = defaultToolRegistry,
   autoFollow = true,
+  hasOlder = false,
+  loadingOlder = false,
+  onLoadOlder,
   emptyState,
   className,
 }: MessageTimelineProps) {
   const resolvedItems = useMemo(() => items ?? buildTimeline(events ?? []), [items, events]);
   const groups = useMemo(() => groupTimeline(resolvedItems), [resolvedItems]);
+  const firstGroupKey = groups[0] ? timelineGroupKey(groups[0]) : null;
 
   const scrollRef = useRef<HTMLDivElement | null>(null);
+  const topSentinelRef = useRef<HTMLDivElement | null>(null);
+  const previousBulkFirstKeyRef = useRef<string | null | undefined>(undefined);
   const [pinned, setPinned] = useState(true);
+  const [bulkActive, setBulkActive] = useState(true);
+  // Content stays invisible until its first bottom-anchored frame, so a flash
+  // of the window's TOP while a large timeline lays out across commits is
+  // structurally impossible — the reader only ever sees it already at the
+  // bottom. An empty timeline reveals immediately (there is nothing to anchor).
+  const [revealed, setRevealed] = useState(false);
+  // Our own scrollTop assignments echo back as scroll events; those must never
+  // UNPIN the reader (they are not reader intent). Marked around every
+  // programmatic assignment and consumed by onScroll. When an assignment is a
+  // NO-OP (already at the target) no scroll event will fire, so the mark must
+  // self-clear — a stale mark would eat the reader's next real scroll-up.
+  const programmaticScrollRef = useRef(false);
+  const assignScrollTop = useCallback((node: HTMLElement, value: number) => {
+    const previous = node.scrollTop;
+    programmaticScrollRef.current = true;
+    node.scrollTop = value;
+    if (node.scrollTop === previous) {
+      programmaticScrollRef.current = false;
+    }
+  }, []);
+  // Mirror `pinned` into a ref so the ResizeObserver callback (a stable closure)
+  // always reads the live value without re-subscribing on every scroll.
+  const pinnedRef = useRef(true);
+  // The reader's visual anchor: the topmost still-visible timeline element and
+  // its offset from the viewport top. Recaptured on scroll and after every
+  // height change, it lets us hold the reader's position when content above the
+  // viewport expands or collapses (e.g. a turn folds when it settles).
+  const anchorRef = useRef<{ el: Element; top: number } | null>(null);
   const lastItem = resolvedItems[resolvedItems.length - 1];
   const streaming = lastItem !== undefined && (lastItem.kind === "agent-message" || lastItem.kind === "reasoning") && lastItem.streaming;
   const working = status === "running" && !streaming;
+  // Bulk paints (the initial tail window, a prepended older window — detected
+  // by the first group key changing) must not run per-row entrance animations.
+  const firstKeyChangedForBulk = previousBulkFirstKeyRef.current !== undefined && previousBulkFirstKeyRef.current !== firstGroupKey;
+  const bulkRender = groups.length > 0 && (bulkActive || firstKeyChangedForBulk);
+
+  // Snapshot the topmost visible element and where it sits in the viewport, so a
+  // later reflow can restore it to the same spot. Transient chrome (the backfill
+  // sentinel and shimmer) is skipped — anchoring to a row that unmounts when the
+  // older window lands would drop the correction mid-prepend.
+  const captureAnchor = useCallback(() => {
+    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)) {
+      if (child instanceof HTMLElement && child.dataset.ogTimelineChrome !== undefined) {
+        continue;
+      }
+      const rect = child.getBoundingClientRect();
+      if (rect.bottom > containerTop + 1) {
+        anchorRef.current = { el: child, top: rect.top - containerTop };
+        return;
+      }
+    }
+    anchorRef.current = null;
+  }, []);
 
   // Follow the stream while pinned to the bottom; never fight the reader.
-  useEffect(() => {
+  // A LAYOUT effect so the very first paint of a freshly loaded session is
+  // already anchored at the bottom — no visible traversal down the history.
+  useLayoutEffect(() => {
     const node = scrollRef.current;
     if (node && autoFollow && pinned) {
-      node.scrollTop = node.scrollHeight;
+      assignScrollTop(node, node.scrollHeight);
+    }
+    if (!revealed && groups.length > 0) {
+      setRevealed(true);
     }
-  }, [resolvedItems, working, autoFollow, pinned]);
+  }, [resolvedItems, working, autoFollow, pinned, revealed, groups.length, assignScrollTop]);
+
+  // A cleared timeline (stream identity change) re-arms the reveal so the next
+  // session also first paints at its bottom.
+  useLayoutEffect(() => {
+    if (groups.length === 0 && revealed) {
+      setRevealed(false);
+    }
+  }, [groups.length, revealed]);
+
+  // Clear the bulk-paint marker a frame after it renders, so rows appended
+  // live (streams, new turns) animate exactly as before.
+  useLayoutEffect(() => {
+    previousBulkFirstKeyRef.current = firstGroupKey;
+    if (!bulkRender) {
+      return;
+    }
+    setBulkActive(true);
+    const frame = requestFrame(() => setBulkActive(false));
+    return () => cancelFrame(frame);
+  }, [bulkRender, firstGroupKey]);
+
+  // Prefetch older history well before the reader reaches the top: the
+  // sentinel sits above the first group and trips 1600px early, so backfill
+  // is usually rendered (and anchored by the ResizeObserver below) before the
+  // top of the window ever becomes visible.
+  useEffect(() => {
+    const root = scrollRef.current;
+    const target = topSentinelRef.current;
+    if (!root || !target || !hasOlder || loadingOlder || !onLoadOlder || typeof IntersectionObserver === "undefined") {
+      return;
+    }
+    const observer = new IntersectionObserver((entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) {
+        onLoadOlder();
+      }
+    }, { root, rootMargin: "1600px 0px 0px 0px" });
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [hasOlder, loadingOlder, onLoadOlder, firstGroupKey]);
+
+  // Scroll anchoring: when the content reflows (a fold expands/collapses, a
+  // stream appends), keep following the bottom if pinned; otherwise pin the
+  // reader's anchor in place. A change ABOVE the anchor shifts its viewport
+  // offset — we correct scrollTop by that shift so the reader never gets yanked.
+  // A change BELOW the anchor (a bottom append while scrolled up) leaves the
+  // anchor put, so `diff` is 0 and we leave scrollTop alone.
+  useEffect(() => {
+    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) {
+        assignScrollTop(current, 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) {
+            assignScrollTop(current, current.scrollTop + diff);
+          }
+        }
+      }
+      captureAnchor();
+    });
+    observer.observe(inner);
+    return () => observer.disconnect();
+  }, [autoFollow, captureAnchor, assignScrollTop]);
 
   const onScroll = () => {
     const node = scrollRef.current;
     if (!node) {
       return;
     }
-    setPinned(node.scrollHeight - node.scrollTop - node.clientHeight < 48);
+    const programmatic = programmaticScrollRef.current;
+    programmaticScrollRef.current = false;
+    const nextPinned = node.scrollHeight - node.scrollTop - node.clientHeight < 48;
+    // Echoes of our own assignments may PIN but never UNPIN — only the reader
+    // scrolling away releases the bottom-follow.
+    if (nextPinned || !programmatic) {
+      pinnedRef.current = nextPinned;
+      setPinned(nextPinned);
+    }
+    captureAnchor();
   };
 
   return (
     <LightboxProvider>
+    <EntranceAnimationProvider value={!bulkRender}>
     <div className={cn("og-root relative flex min-h-0 flex-col", className)}>
-      <div ref={scrollRef} onScroll={onScroll} className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-6 sm:px-6">
+      {/* overflow-anchor off: the browser's native scroll anchoring would fight
+          the ResizeObserver corrections above — one authority only. */}
+      <div
+        ref={scrollRef}
+        onScroll={onScroll}
+        style={groups.length > 0 && !revealed ? { visibility: "hidden" } : undefined}
+        className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-6 [overflow-anchor:none] sm:px-6"
+      >
         <div className="mx-auto flex w-full max-w-3xl flex-col gap-5">
           {groups.length === 0 && !working
             ? (emptyState ?? <p className="py-10 text-center text-sm text-og-fg-subtle">No activity yet.</p>)
             : null}
+          {hasOlder ? <div ref={topSentinelRef} data-og-top-sentinel="" data-og-timeline-chrome="" aria-hidden="true" className="h-px w-full shrink-0" /> : null}
+          {loadingOlder ? (
+            <div data-og-timeline-chrome="" className="flex items-center gap-2 text-sm">
+              <span className="og-shimmer-text font-medium">Loading earlier activity…</span>
+            </div>
+          ) : null}
           {groups.map((group) => (
             <TimelineGroupView
               key={timelineGroupKey(group)}
@@ -116,7 +289,7 @@ export function MessageTimeline({
             />
           ))}
           {working ? (
-            <div className="animate-og-enter flex items-center gap-2 text-sm">
+            <div className="flex items-center gap-2 text-sm">
               <span className="og-shimmer-text font-medium">Working…</span>
             </div>
           ) : null}
@@ -135,6 +308,7 @@ export function MessageTimeline({
               if (node) {
                 node.scrollTo({ top: node.scrollHeight, behavior: "smooth" });
               }
+              pinnedRef.current = true;
               setPinned(true);
             }}
             className={cn(
@@ -150,10 +324,26 @@ export function MessageTimeline({
         ) : null}
       </AnimatePresence>
     </div>
+    </EntranceAnimationProvider>
     </LightboxProvider>
   );
 }
 
+function requestFrame(callback: FrameRequestCallback): number {
+  if (typeof requestAnimationFrame === "function") {
+    return requestAnimationFrame(callback);
+  }
+  return window.setTimeout(() => callback(performance.now()), 16);
+}
+
+function cancelFrame(id: number): void {
+  if (typeof cancelAnimationFrame === "function") {
+    cancelAnimationFrame(id);
+    return;
+  }
+  window.clearTimeout(id);
+}
+
 function TimelineGroupView({
   group,
   renderMessageText,
@@ -285,8 +475,9 @@ function UserMessageRow({
   item: UserMessageItem;
   renderMessageText?: ((text: string, item: AgentMessageItem | UserMessageItem) => ReactNode) | undefined;
 }) {
+  const enter = useEntranceAnimation();
   return (
-    <div className="animate-og-enter flex justify-end">
+    <div className={cn(enter && "animate-og-enter", "flex justify-end")}>
       <div className="flex max-w-[85%] min-w-0 flex-col items-end gap-1">
         {item.pending ? <span className="px-1 text-og-xs text-og-fg-subtle">queued</span> : null}
         <div className="w-fit max-w-full min-w-0 rounded-og-lg rounded-br-og-xs border border-og-border bg-og-surface-2 px-4 py-2.5 text-og-md leading-6 text-og-fg">
@@ -304,11 +495,12 @@ function AgentMessageRow({
   item: AgentMessageItem;
   renderMessageText?: ((text: string, item: AgentMessageItem | UserMessageItem) => ReactNode) | undefined;
 }) {
+  const enter = useEntranceAnimation();
   const caret = item.streaming ? (
     <span className="ml-0.5 inline-block h-[1.1em] w-[2px] translate-y-[3px] animate-og-blink rounded-full bg-og-accent" aria-hidden />
   ) : null;
   return (
-    <div className="animate-og-enter min-w-0 text-og-md leading-7 text-og-fg">
+    <div className={cn(enter && "animate-og-enter", "min-w-0 text-og-md leading-7 text-og-fg")}>
       {renderMessageText ? (
         <>
           {renderMessageText(item.text, item)}
@@ -328,9 +520,10 @@ function AgentMessageRow({
 }
 
 function SessionStatusRow({ item }: { item: { status: SessionStatus; occurredAt: string } }) {
+  const enter = useEntranceAnimation();
   const meta = SESSION_STATUS_META[item.status];
   return (
-    <div className="animate-og-enter flex items-center gap-3 text-og-xs text-og-fg-subtle" role="status">
+    <div className={cn(enter && "animate-og-enter", "flex items-center gap-3 text-og-xs text-og-fg-subtle")} role="status">
       <span className="h-px flex-1 bg-og-border" />
       <span className="inline-flex items-center gap-1.5">
         <StatusDot status={item.status} className="size-1" />
@@ -377,9 +570,10 @@ const GOAL_META: Record<GoalItem["action"], GoalMeta> = {
  * palette stays restrained — see that table for the per-action rationale.
  */
 function GoalRow({ item }: { item: GoalItem }) {
+  const enter = useEntranceAnimation();
   const { label, pill, icon: Icon } = GOAL_META[item.action];
   return (
-    <div className="animate-og-enter flex justify-center">
+    <div className={cn(enter && "animate-og-enter", "flex justify-center")}>
       <span className={cn("inline-flex max-w-full items-center gap-1.5 rounded-full border px-3 py-1 text-og-sm", pill)}>
         <Icon className="size-3.5 shrink-0" />
         <span className="truncate">
@@ -392,6 +586,7 @@ function GoalRow({ item }: { item: GoalItem }) {
 }
 
 function NoticeRow({ item }: { item: NoticeItem }) {
+  const enter = useEntranceAnimation();
   const tone =
     item.tone === "failed"
       ? "border-og-status-failed/35 bg-og-status-failed/10 text-og-status-failed"
@@ -399,7 +594,7 @@ function NoticeRow({ item }: { item: NoticeItem }) {
         ? "border-og-status-waiting/35 bg-og-status-waiting/10 text-og-status-waiting"
         : "border-og-border bg-og-surface-1 text-og-fg-muted";
   return (
-    <div className={cn("animate-og-enter flex items-start gap-2.5 rounded-og-md border px-3.5 py-2.5 text-sm", tone)} role="status">
+    <div className={cn(enter && "animate-og-enter", "flex items-start gap-2.5 rounded-og-md border px-3.5 py-2.5 text-sm", tone)} role="status">
       <TriangleAlertIcon className={cn("mt-0.5 size-4 shrink-0", item.tone === "cancelled" && "opacity-60")} />
       <span className="min-w-0 whitespace-pre-wrap break-words">{item.text}</span>
     </div>

package/src/components/pierre-diff.tsx

@@ -98,16 +98,15 @@ export function PierreDiff({
 
   // Pierre renders inside a shadow DOM, so host CSS can't reach it — but it reads
   // a set of `--diffs-*-override` custom properties through the shadow boundary.
-  // Pin the diff's own base background to the dock surface (Pierre's dark default
-  // is pure #000, which reads as a seam against our #0d0d0d panel) and quiet the
-  // hunk-separator slab so the collapsed-context row isn't a heavy gray bar.
+  // Pin the diff's own base background to the dock surface and quiet the hunk
+  // separator slab so collapsed context rows do not become heavy bars.
   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 (
@@ -133,7 +132,7 @@ export function PierreDiff({
 
 function DiffSkeleton() {
   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 diff…
     </div>
   );

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,
       )}
     >