@opengeni/react 0.6.1 → 0.6.3

package/src/components/file-browser.tsx

@@ -51,11 +51,11 @@ export type FileBrowserProps = {
 };
 
 const STATUS_TINT: Record<NonNullable<FileTreeNode["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))] 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",
 };
 
 /** Parent dir of a workspace-relative POSIX path ("" for a root entry). */
@@ -397,15 +397,9 @@ export function FileBrowser({
     };
   }, [menu]);
 
-  if (result.error && result.tree.length === 0) {
-    return (
-      <div className={cn("p-3 text-xs text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]", className)}>
-        {fallback ?? `Files unavailable: ${result.error.message}`}
-      </div>
-    );
-  }
-
+  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: FileTreeNode, depth: number): ReactNode => {
     const isOpen = expanded.has(node.path);
@@ -489,13 +483,11 @@ export 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] : undefined,
             )}
             style={{ paddingLeft: `${depth * 12 + 4}px` }}
@@ -503,7 +495,7 @@ export function FileBrowser({
             {isDir ? (
               isLoading ? (
                 <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"
                 />
               ) : (
@@ -526,7 +518,7 @@ export function FileBrowser({
                   const rect = (e.currentTarget as HTMLElement).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"
               >
                 ⋯
               </span>
@@ -555,7 +547,7 @@ export function FileBrowser({
             {[0, 1, 2].map((i) => (
               <div
                 key={i}
-                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}%` }}
               />
             ))}
@@ -570,34 +562,38 @@ export function FileBrowser({
 
   return (
     <div className={cn("flex min-w-0 flex-col", className)}>
-      {supportsMutation && (
-        <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">
-          <ToolbarButton label="New file" onClick={() => startCreate("file")} disabled={busy}>
-            <FilePlusIcon className="size-3.5" />
-          </ToolbarButton>
-          <ToolbarButton label="New folder" onClick={() => startCreate("dir")} disabled={busy}>
-            <FolderPlusIcon className="size-3.5" />
-          </ToolbarButton>
-          <ToolbarButton
-            label="Rename"
-            onClick={() => {
-              const node = cursor ? findNode(result.tree, cursor) : undefined;
-              if (node) startRename(node);
-            }}
-            disabled={busy || !cursor}
-          >
-            <PencilIcon className="size-3.5" />
-          </ToolbarButton>
-          <ToolbarButton
-            label="Delete"
-            onClick={() => {
-              const node = cursor ? findNode(result.tree, cursor) : undefined;
-              if (node) void runDelete(node);
-            }}
-            disabled={busy || !cursor}
-          >
-            <Trash2Icon className="size-3.5" />
-          </ToolbarButton>
+      {showToolbar && (
+        <div className="flex shrink-0 flex-wrap items-center gap-0.5 border-b border-og-border px-1 py-1">
+          {supportsMutation ? (
+            <>
+              <ToolbarButton label="New file" onClick={() => startCreate("file")} disabled={busy}>
+                <FilePlusIcon className="size-3.5" />
+              </ToolbarButton>
+              <ToolbarButton label="New folder" onClick={() => startCreate("dir")} disabled={busy}>
+                <FolderPlusIcon className="size-3.5" />
+              </ToolbarButton>
+              <ToolbarButton
+                label="Rename"
+                onClick={() => {
+                  const node = cursor ? findNode(result.tree, cursor) : undefined;
+                  if (node) startRename(node);
+                }}
+                disabled={busy || !cursor}
+              >
+                <PencilIcon className="size-3.5" />
+              </ToolbarButton>
+              <ToolbarButton
+                label="Delete"
+                onClick={() => {
+                  const node = cursor ? findNode(result.tree, cursor) : undefined;
+                  if (node) void runDelete(node);
+                }}
+                disabled={busy || !cursor}
+              >
+                <Trash2Icon className="size-3.5" />
+              </ToolbarButton>
+            </>
+          ) : null}
           <span className="ml-auto" />
           <ToolbarButton label="Refresh" onClick={() => void result.refresh()} disabled={busy || result.loading}>
             <RefreshCwIcon className={cn("size-3.5", result.loading && "animate-spin")} />
@@ -633,7 +629,7 @@ export function FileBrowser({
         }
         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
       >
@@ -647,9 +643,22 @@ export function FileBrowser({
             onCancel={() => setDraftCreate(null)}
           />
         )}
-        {showEmpty ? (
-          <div className="p-2 text-xs text-[color:var(--og-color-fg-subtle,var(--color-fg-subtle,#888))]">
-            {emptyState ?? "No files."}
+        {showErrorEmpty ? (
+          <div className="flex flex-col items-start gap-2 p-2 text-og-sm text-og-fg-subtle">
+            <div>{fallback ?? `Could not load files: ${result.error?.message ?? "refresh the file list to try again"}`}</div>
+            <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"
+            >
+              <RefreshCwIcon className={cn("size-3.5", result.loading && "animate-spin")} aria-hidden />
+              Retry
+            </button>
+          </div>
+        ) : showEmpty ? (
+          <div className="p-2 text-og-sm text-og-fg-subtle">
+            {emptyState ?? "This directory is empty"}
           </div>
         ) : (
           result.tree.map((node) => renderRow(node, 0))
@@ -690,8 +699,8 @@ function ToolbarButton({
       onClick={onClick}
       disabled={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",
       )}
     >
@@ -759,8 +768,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",
         )}
       />
@@ -801,11 +810,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",
       )}
     >
       {icon}
@@ -820,15 +827,15 @@ 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",
       )}
     >
       {isDir && (
         <>
           {item("New file", <FilePlusIcon className="size-3.5" />, onNewFile)}
           {item("New folder", <FolderPlusIcon className="size-3.5" />, onNewFolder)}
-          <div className="my-1 h-px bg-[color:var(--og-color-border,var(--color-border,#2a2a2a))]" />
+          <div className="my-1 h-px bg-og-border" />
         </>
       )}
       {item("Rename", <PencilIcon className="size-3.5" />, onRename)}

package/src/components/fleet-tile.tsx

@@ -60,11 +60,11 @@ export function FleetTile({ session, title, subtitle, onOpen, className }: Fleet
         )}
       />
       <span className="flex w-full items-start justify-between gap-3">
-        <span className="line-clamp-2 min-w-0 text-sm font-medium leading-snug text-og-fg">{title ?? sessionDisplayTitle(session)}</span>
+        <span className="line-clamp-2 min-w-0 text-og-base font-medium leading-snug text-og-fg">{title ?? sessionDisplayTitle(session)}</span>
         <SessionStatus status={session.status} size="sm" className="mt-px" />
       </span>
-      {subtitle ? <span className="line-clamp-1 text-xs text-og-fg-muted">{subtitle}</span> : null}
-      <span className="mt-auto flex w-full items-center gap-2 text-[11px] text-og-fg-subtle">
+      {subtitle ? <span className="line-clamp-1 text-og-sm text-og-fg-muted">{subtitle}</span> : null}
+      <span className="mt-auto flex w-full items-center gap-2 text-og-xs text-og-fg-subtle">
         <span className="font-og-mono">{session.id.slice(0, 8)}</span>
         <span aria-hidden>·</span>
         <span className="truncate">{session.model}</span>

package/src/components/machine-card.tsx

@@ -60,17 +60,17 @@ export function MachineCard({ machine, onAttach, attaching, className }: Machine
           </span>
           <div className="min-w-0">
             <div className="flex items-center gap-2">
-              <span className="truncate text-sm font-medium text-og-fg">{machine.name}</span>
+              <span className="truncate text-og-base font-medium text-og-fg">{machine.name}</span>
               {machine.active ? (
                 <span
                   data-active-marker
-                  className="shrink-0 rounded-full border border-og-accent/30 bg-og-accent-soft px-1.5 py-px text-[10px] font-medium text-og-accent"
+                  className="shrink-0 rounded-full border border-og-accent/30 bg-og-accent-soft px-1.5 py-px text-og-xs font-medium text-og-accent"
                 >
                   Active
                 </span>
               ) : null}
             </div>
-            <div className="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px] text-og-fg-subtle">
+            <div className="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-og-xs text-og-fg-subtle">
               <span className="capitalize">{machine.isSessionGroup ? "session sandbox" : machine.kind}</span>
               <span aria-hidden>·</span>
               <span className="font-og-mono">
@@ -94,7 +94,7 @@ export function MachineCard({ machine, onAttach, attaching, className }: Machine
       {shared ? (
         <p
           data-shared-disclosure
-          className="flex items-center gap-1.5 rounded-og-md border border-og-accent/25 bg-og-accent-soft px-2.5 py-1.5 text-[11px] text-og-fg-muted"
+          className="flex items-center gap-1.5 rounded-og-md border border-og-accent/25 bg-og-accent-soft px-2.5 py-1.5 text-og-xs text-og-fg-muted"
         >
           <UsersIcon className="size-3.5 shrink-0 text-og-accent" aria-hidden />
           Shared — {machine.sharedSessionCount} sessions are on this machine.
@@ -103,7 +103,7 @@ export function MachineCard({ machine, onAttach, attaching, className }: Machine
 
       <MachineMetrics metrics={machine.metrics} />
 
-      <div className="mt-1 flex items-center justify-between gap-3 text-[11px] text-og-fg-subtle">
+      <div className="mt-1 flex items-center justify-between gap-3 text-og-xs text-og-fg-subtle">
         <span>
           {machine.lastSeenAt ? <>Last seen {formatRelativeTime(machine.lastSeenAt)}</> : "Never connected"}
         </span>
@@ -116,7 +116,7 @@ export function MachineCard({ machine, onAttach, attaching, className }: Machine
             disabled={attaching}
             onClick={() => onAttach?.(machine)}
             className={cn(
-              "rounded-og-sm border border-og-border px-2.5 py-1 text-[11px] font-medium text-og-fg-muted transition-colors",
+              "rounded-og-sm border border-og-border px-2.5 py-1 text-og-xs font-medium text-og-fg-muted transition-colors pointer-coarse:min-h-10",
               "hover:border-og-border-strong hover:text-og-fg disabled:cursor-not-allowed disabled:opacity-50",
             )}
           >

package/src/components/machine-status-pill.tsx

@@ -80,7 +80,7 @@ export function ConnectionStatusPill({ status, label, size = "md", className }:
       data-connection-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-og-sm",
         meta.badgeClassName,
         className,
       )}
@@ -132,7 +132,7 @@ export function MachineStatusPill({ state, sharedSessionCount, size = "md", clas
           data-state-badge={state}
           className={cn(
             "inline-flex shrink-0 items-center rounded-full border font-medium",
-            size === "sm" ? "px-1.5 py-px text-[10px]" : "px-2 py-0.5 text-xs",
+            size === "sm" ? "px-1.5 py-px text-og-xs" : "px-2 py-0.5 text-og-sm",
             stateBadge.badgeClassName,
           )}
         >
@@ -145,7 +145,7 @@ export function MachineStatusPill({ state, sharedSessionCount, size = "md", clas
           className={cn(
             "inline-flex shrink-0 items-center gap-1 rounded-full border font-medium",
             "text-og-accent border-og-accent/30 bg-og-accent-soft",
-            size === "sm" ? "px-1.5 py-px text-[10px]" : "px-2 py-0.5 text-xs",
+            size === "sm" ? "px-1.5 py-px text-og-xs" : "px-2 py-0.5 text-og-sm",
           )}
           title={`${sharedSessionCount} sessions are on this machine`}
         >

package/src/components/machines-dashboard.tsx

@@ -30,8 +30,8 @@ function EmptyState({ onEnroll }: { onEnroll?: (() => void) | undefined }) {
         <LaptopIcon className="size-5" aria-hidden />
       </span>
       <div className="space-y-1">
-        <p className="text-sm font-medium text-og-fg">No machines yet</p>
-        <p className="max-w-xs text-[12px] text-og-fg-muted">
+        <p className="text-og-base font-medium text-og-fg">No machines yet</p>
+        <p className="max-w-xs text-og-sm text-og-fg-muted">
           Enroll your own computer to run the agent on it — your files, your terminal, your desktop.
         </p>
       </div>
@@ -40,7 +40,7 @@ function EmptyState({ onEnroll }: { onEnroll?: (() => void) | undefined }) {
           type="button"
           data-enroll-cta
           onClick={onEnroll}
-          className="inline-flex items-center gap-1.5 rounded-og-sm bg-og-accent px-3 py-1.5 text-xs font-medium text-og-accent-fg transition-colors hover:bg-og-accent-strong"
+          className="inline-flex items-center gap-1.5 rounded-og-sm bg-og-accent px-3 py-1.5 text-og-sm font-medium text-og-accent-fg transition-colors hover:bg-og-accent-strong pointer-coarse:min-h-10"
         >
           <PlusIcon className="size-3.5" aria-hidden />
           Enroll a machine
@@ -54,16 +54,18 @@ function Header({
   count,
   onEnroll,
   onRefresh,
+  loading,
 }: {
   count: number;
   onEnroll?: (() => void) | undefined;
   onRefresh?: (() => void) | undefined;
+  loading?: boolean | undefined;
 }): ReactNode {
   return (
     <div className="flex items-center justify-between gap-3">
       <div className="flex items-baseline gap-2">
-        <h2 className="text-sm font-semibold text-og-fg">Machines</h2>
-        <span className="font-og-mono text-[11px] text-og-fg-subtle">{count}</span>
+        <h2 className="text-og-base font-semibold text-og-fg">Machines</h2>
+        <span className="font-og-mono text-og-xs text-og-fg-subtle">{count}</span>
       </div>
       <div className="flex items-center gap-1.5">
         {onRefresh ? (
@@ -74,7 +76,7 @@ function Header({
             title="Refresh"
             className="rounded-og-sm p-1.5 text-og-fg-subtle transition-colors hover:bg-og-surface-2 hover:text-og-fg"
           >
-            <RefreshCwIcon className="size-3.5" aria-hidden />
+            <RefreshCwIcon className={cn("size-3.5", loading && "animate-og-spin")} aria-hidden />
           </button>
         ) : null}
         {onEnroll ? (
@@ -82,10 +84,10 @@ function Header({
             type="button"
             data-enroll-cta
             onClick={onEnroll}
-            className="inline-flex items-center gap-1.5 rounded-og-sm border border-og-border px-2.5 py-1 text-xs font-medium text-og-fg-muted transition-colors hover:border-og-border-strong hover:text-og-fg"
+            className="inline-flex items-center gap-1.5 rounded-og-sm border border-og-border px-2.5 py-1 text-og-sm font-medium text-og-fg-muted transition-colors hover:border-og-border-strong hover:text-og-fg pointer-coarse:min-h-10"
           >
             <PlusIcon className="size-3.5" aria-hidden />
-            Enroll
+            Enroll machine
           </button>
         ) : null}
       </div>
@@ -95,7 +97,7 @@ function Header({
 
 /**
  * The workspace Machines dashboard: the fleet of selfhosted enrollments + the
- * session's Modal sandbox, each with its connection-status pill, state badges,
+ * session's managed sandbox, each with its connection-status pill, state badges,
  * latest metrics, and an attach/swap affordance. Renders the empty state (no
  * machines → enroll CTA), a load error, and the populated grid. The component
  * is purely presentational — feed it `MachinesResponse` data via `useMachines`.
@@ -115,15 +117,27 @@ export function MachinesDashboard({
 
   return (
     <section data-machines-dashboard className={cn("og-root flex flex-col gap-3", className)}>
-      <Header count={machines.length} onEnroll={onEnroll} onRefresh={onRefresh} />
+      <Header count={machines.length} onEnroll={onEnroll} onRefresh={onRefresh} loading={loading} />
 
       {error ? (
-        <p
+        <div
           data-machines-error
-          className="rounded-og-md border border-og-status-failed/30 bg-og-status-failed/10 px-3 py-2 text-[12px] text-og-status-failed"
+          className="flex flex-wrap items-center justify-between gap-2 rounded-og-md border border-og-status-failed/30 bg-og-status-failed/10 px-3 py-2 text-og-sm text-og-status-failed"
         >
-          Could not load machines: {error.message}
-        </p>
+          <span>Could not load machines: {error.message}</span>
+          {onRefresh ? (
+            <button
+              type="button"
+              data-machines-retry
+              onClick={onRefresh}
+              disabled={loading}
+              className="inline-flex items-center gap-1.5 rounded-og-sm border border-og-status-failed/30 px-2 py-1 text-og-xs font-medium transition-colors hover:border-og-status-failed/50 disabled:cursor-not-allowed disabled:opacity-60 pointer-coarse:min-h-10"
+            >
+              <RefreshCwIcon className={cn("size-3.5", loading && "animate-og-spin")} aria-hidden />
+              {loading ? "Retrying…" : "Retry"}
+            </button>
+          ) : null}
+        </div>
       ) : null}
 
       {loading && machines.length === 0 ? (

package/src/components/markdown.tsx

@@ -36,12 +36,12 @@ const components: Components = {
     </h2>
   ),
   h3: ({ children, ...props }) => (
-    <h3 className="mt-4 mb-1.5 text-[15px] font-semibold tracking-tight text-og-fg first:mt-0" {...props}>
+    <h3 className="mt-4 mb-1.5 text-og-md font-semibold tracking-tight text-og-fg first:mt-0" {...props}>
       {children}
     </h3>
   ),
   h4: ({ children, ...props }) => (
-    <h4 className="mt-4 mb-1.5 text-sm font-semibold uppercase tracking-[0.04em] text-og-fg-muted first:mt-0" {...props}>
+    <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}
     </h4>
   ),
@@ -94,7 +94,7 @@ const components: Components = {
         {...props}
         type="checkbox"
         disabled
-        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"
       />
     ) : (
       <input type={type} {...props} />
@@ -113,7 +113,7 @@ const components: Components = {
   // the `pre` renderer), so a `code` reaching here is treated as inline.
   code: ({ children, className: _className, ...props }) => (
     <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}
@@ -123,7 +123,7 @@ const components: Components = {
   // visual consistency (bordered, scrollable, mono, surface background).
   pre: ({ children, ...props }) => (
     <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}
@@ -131,7 +131,7 @@ const components: Components = {
   ),
   table: ({ children, ...props }) => (
     <div className="my-3 max-w-full overflow-x-auto rounded-og-md border border-og-border first:mt-0 last:mb-0">
-      <table className="w-full border-collapse text-[13px]" {...props}>
+      <table className="w-full border-collapse text-og-base" {...props}>
         {children}
       </table>
     </div>

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, useMemo, useRef, useState, type ReactNode } from "react";
 import { cn } from "../lib/cn";
 import { formatRelativeTime, truncate } from "../lib/format";
 import { Markdown } from "./markdown";
@@ -78,10 +78,38 @@ export function MessageTimeline({
 
   const scrollRef = useRef<HTMLDivElement | null>(null);
   const [pinned, setPinned] = useState(true);
+  // 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;
 
+  // Snapshot the topmost visible element and where it sits in the viewport, so a
+  // later reflow can restore it to the same spot.
+  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)) {
+      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(() => {
     const node = scrollRef.current;
@@ -90,12 +118,51 @@ export function MessageTimeline({
     }
   }, [resolvedItems, working, autoFollow, pinned]);
 
+  // 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) {
+        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 (
@@ -135,6 +202,7 @@ export function MessageTimeline({
               if (node) {
                 node.scrollTo({ top: node.scrollHeight, behavior: "smooth" });
               }
+              pinnedRef.current = true;
               setPinned(true);
             }}
             className={cn(
@@ -287,8 +355,11 @@ function UserMessageRow({
 }) {
   return (
     <div className="animate-og-enter flex justify-end">
-      <div className="max-w-[85%] 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">
-        {renderMessageText ? renderMessageText(item.text, item) : <Markdown>{item.text}</Markdown>}
+      <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">
+          {renderMessageText ? renderMessageText(item.text, item) : <Markdown>{item.text}</Markdown>}
+        </div>
       </div>
     </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>
   );