@opengeni/react 0.12.0 → 0.13.0

package/src/components/file-browser.tsx

@@ -4,7 +4,6 @@ import {
   FilePlusIcon,
   FolderIcon,
   FolderPlusIcon,
-  Loader2Icon,
   PencilIcon,
   RefreshCwIcon,
   Trash2Icon,
@@ -14,10 +13,12 @@ import {
   type ReactNode,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
 } from "react";
+import { VList, type VListHandle } from "virtua";
 import { cn } from "../lib/cn";
 import type { FileTreeNode, UseSandboxFilesResult } from "../hooks/use-sandbox-files";
 
@@ -57,6 +58,7 @@ const STATUS_TINT: Record<NonNullable<FileTreeNode["status"]>, string> = {
   renamed: "text-og-accent",
   untracked: "text-og-fg-subtle",
 };
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 
 /** Parent dir of a workspace-relative POSIX path ("" for a root entry). */
 function parentOf(path: string): string {
@@ -69,6 +71,20 @@ function joinPath(parent: string, name: string): string {
   return parent ? `${parent}/${name}` : name;
 }
 
+/** A stable React key for a flat render item. */
+function itemKey(item: RenderItem): string {
+  switch (item.type) {
+    case "node":
+      return item.node.path;
+    case "create":
+      return `create:${item.parent}`;
+    case "skeleton":
+      return `skeleton:${item.path}`;
+    case "residue":
+      return `residue:${item.path}`;
+  }
+}
+
 /** Walk the tree to find a node by path. */
 function findNode(nodes: FileTreeNode[], path: string): FileTreeNode | undefined {
   for (const node of nodes) {
@@ -87,6 +103,14 @@ type DraftCreate = { parent: string; kind: "file" | "dir" };
 type DraftRename = { path: string };
 type ContextMenuState = { node: FileTreeNode | null; x: number; y: number };
 
+/** One virtualized row. Nodes plus the synthetic rows the recursive renderer
+ *  used to nest inline. */
+type RenderItem =
+  | { type: "node"; node: FileTreeNode; depth: number }
+  | { type: "create"; parent: string; kind: "file" | "dir"; depth: number }
+  | { type: "skeleton"; path: string; depth: number }
+  | { type: "residue"; path: string; depth: number };
+
 /**
  * The file MANAGER, fed by the FileSystem service via `useSandboxFiles`. This is
  * a first-class editable tree (not a render-only view): lazy-expand with a
@@ -121,7 +145,24 @@ export function FileBrowser({
   const [dragOver, setDragOver] = useState<string | null>(null);
   const [menu, setMenu] = useState<ContextMenuState | null>(null);
   const [busy, setBusy] = useState(false);
+  const [coarsePointer, setCoarsePointer] = useState(false);
   const containerRef = useRef<HTMLDivElement | null>(null);
+  const vlistRef = useRef<VListHandle>(null);
+
+  useBrowserLayoutEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const query = window.matchMedia("(pointer: coarse)");
+    const update = () => setCoarsePointer(query.matches);
+    update();
+    if (typeof query.addEventListener === "function") {
+      query.addEventListener("change", update);
+      return () => query.removeEventListener("change", update);
+    }
+    if (typeof query.addListener === "function") {
+      query.addListener(update);
+      return () => query.removeListener(update);
+    }
+  }, []);
 
   // The keyboard cursor: an explicitly-navigated node falls back to the
   // externally-selected file so arrow keys pick up where the preview pane is.
@@ -169,20 +210,53 @@ export function FileBrowser({
     [expanded, expand],
   );
 
-  // The visible rows in DOM order — drives keyboard up/down navigation.
-  const flatRows = useMemo(() => {
-    const rows: { node: FileTreeNode; depth: number }[] = [];
+  // Flatten the VISIBLE (expanded) tree into a single ordered render list — the
+  // input to the virtualizer. Interleaves the synthetic rows the recursive
+  // renderer used to nest (inline create input, lazy-expand skeleton, and the
+  // cold residue "contents on machine" row) so every visual row is one list item.
+  const cold = result.source !== "live";
+  const renderItems = useMemo(() => {
+    const items: RenderItem[] = [];
+    if (draftCreate && draftCreate.parent === "") {
+      items.push({ type: "create", parent: "", kind: draftCreate.kind, depth: 0 });
+    }
     const walk = (nodes: FileTreeNode[], depth: number) => {
       for (const node of nodes) {
-        rows.push({ node, depth });
-        if (node.kind === "dir" && expanded.has(node.path) && node.children?.length) {
+        items.push({ type: "node", node, depth });
+        if (node.kind !== "dir" || !expanded.has(node.path)) continue;
+        if (draftCreate && draftCreate.parent === node.path) {
+          items.push({
+            type: "create",
+            parent: node.path,
+            kind: draftCreate.kind,
+            depth: depth + 1,
+          });
+        }
+        const childless = node.children === undefined || node.children.length === 0;
+        const isLoading = loadingPaths.has(node.path) || result.expandingPaths.has(node.path);
+        // A collapsed residue dir (node_modules, .git, …) can't list children from
+        // the cold capture — offer to open it live rather than a dead skeleton.
+        if (node.truncated && childless && cold && !isLoading) {
+          items.push({ type: "residue", path: node.path, depth: depth + 1 });
+        } else if (node.children && node.children.length > 0) {
           walk(node.children, depth + 1);
+        } else if (isLoading && childless) {
+          items.push({ type: "skeleton", path: node.path, depth: depth + 1 });
         }
       }
     };
     walk(result.tree, 0);
-    return rows;
-  }, [result.tree, expanded]);
+    return items;
+  }, [result.tree, expanded, draftCreate, loadingPaths, result.expandingPaths, cold]);
+
+  // The visible NODE rows in order — drives keyboard up/down navigation.
+  const flatRows = useMemo(
+    () =>
+      renderItems.flatMap((item) =>
+        item.type === "node" ? [{ node: item.node, depth: item.depth }] : [],
+      ),
+    [renderItems],
+  );
 
   const supportsMutation = editable;
 
@@ -380,7 +454,19 @@ export function FileBrowser({
           break;
       }
     },
-    [draftCreate, draftRename, flatRows, cursor, expanded, open, toggle, onSelectFile, startRename, runDelete, supportsMutation],
+    [
+      draftCreate,
+      draftRename,
+      flatRows,
+      cursor,
+      expanded,
+      open,
+      toggle,
+      onSelectFile,
+      startRename,
+      runDelete,
+      supportsMutation,
+    ],
   );
 
   // Close the context menu on any outside interaction.
@@ -401,10 +487,12 @@ export function FileBrowser({
   const showEmpty = !result.loading && result.tree.length === 0 && !draftCreate;
   const showToolbar = supportsMutation || Boolean(result.error) || result.loading;
 
-  const renderRow = (node: FileTreeNode, depth: number): ReactNode => {
+  // Render a SINGLE node row (no recursion — children are separate flat items the
+  // virtualizer renders). Returns the row element; the caller assigns the key.
+  const renderNodeRow = (node: FileTreeNode, depth: number): ReactNode => {
     const isOpen = expanded.has(node.path);
     if (renderNode) {
-      return <div key={node.path}>{renderNode(node, depth, isOpen)}</div>;
+      return <div>{renderNode(node, depth, isOpen)}</div>;
     }
     const isDir = node.kind === "dir";
     const isSelected = node.path === selectedPath || node.path === active;
@@ -412,12 +500,10 @@ export function FileBrowser({
     const isLoading = loadingPaths.has(node.path) || result.expandingPaths.has(node.path);
     const isRenaming = draftRename?.path === node.path;
     const isDropTarget = dragOver === (isDir ? node.path : parentOf(node.path));
-    const showSkeleton = isDir && isOpen && isLoading && (node.children === undefined || node.children.length === 0);
     const dropDir = isDir ? node.path : parentOf(node.path);
 
     return (
       <div
-        key={node.path}
         role="treeitem"
         aria-expanded={isDir ? isOpen : undefined}
         aria-selected={isCursor || undefined}
@@ -483,28 +569,34 @@ export function FileBrowser({
               setMenu({ node, x: e.clientX, y: e.clientY });
             }}
             className={cn(
-              "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",
+              "group relative flex min-h-7 w-full items-center gap-1 truncate rounded-og-sm px-1 py-0.5 text-left text-og-sm pointer-coarse:min-h-11",
               "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",
+              // A thin progress shimmer on the expanding row — no per-node spinner.
+              isLoading &&
+                "after:pointer-events-none after:absolute after:inset-x-1 after:bottom-0 after:h-px after:animate-pulse after:rounded-full after:bg-og-accent-soft",
               node.status ? STATUS_TINT[node.status] : undefined,
             )}
             style={{ paddingLeft: `${depth * 12 + 4}px` }}
           >
             {isDir ? (
-              isLoading ? (
-                <Loader2Icon
-                  className="size-3 shrink-0 animate-spin text-og-fg-subtle"
-                  aria-label="Loading"
-                />
-              ) : (
-                <ChevronRightIcon className={cn("size-3 shrink-0 transition-transform", isOpen && "rotate-90")} />
-              )
+              <ChevronRightIcon
+                className={cn(
+                  "size-3 shrink-0 transition-transform",
+                  isOpen && "rotate-90",
+                  isLoading && "text-og-accent",
+                )}
+              />
             ) : (
               <span className="inline-block w-3 shrink-0" />
             )}
-            {isDir ? <FolderIcon className="size-3.5 shrink-0" /> : <FileIcon className="size-3.5 shrink-0" />}
+            {isDir ? (
+              <FolderIcon className="size-3.5 shrink-0" />
+            ) : (
+              <FileIcon className="size-3.5 shrink-0" />
+            )}
             <span className="truncate">{node.name}</span>
             {supportsMutation && (
               <span
@@ -525,23 +617,31 @@ export function FileBrowser({
             )}
           </button>
         )}
+      </div>
+    );
+  };
 
-        {/* Inline create input nested directly under an expanded directory. */}
-        {draftCreate?.parent === node.path && isDir && isOpen && (
+  // Render one flat list item (node row or a synthetic create/skeleton/residue row).
+  const renderItem = (item: RenderItem): ReactNode => {
+    switch (item.type) {
+      case "node":
+        return renderNodeRow(item.node, item.depth);
+      case "create":
+        return (
           <InlineInput
-            depth={depth + 1}
-            kind={draftCreate.kind}
+            depth={item.depth}
+            kind={item.kind}
             initialValue=""
             onCommit={(name) => void commitCreate(name)}
             onCancel={() => setDraftCreate(null)}
           />
-        )}
-
-        {showSkeleton && (
+        );
+      case "skeleton":
+        return (
           <div
             role="group"
             aria-hidden
-            style={{ paddingLeft: `${(depth + 1) * 12 + 4}px` }}
+            style={{ paddingLeft: `${item.depth * 12 + 4}px` }}
             className="space-y-1 py-1"
           >
             {[0, 1, 2].map((i) => (
@@ -552,16 +652,29 @@ export function FileBrowser({
               />
             ))}
           </div>
-        )}
-        {isDir && isOpen && node.children && node.children.length > 0 && (
-          <div role="group">{node.children.map((child) => renderRow(child, depth + 1))}</div>
-        )}
-      </div>
-    );
+        );
+      case "residue":
+        return (
+          <div
+            style={{ paddingLeft: `${item.depth * 12 + 4}px` }}
+            className="flex items-center gap-1.5 py-0.5 pr-1 text-og-xs italic text-og-fg-subtle"
+          >
+            <span className="inline-block w-3 shrink-0" />
+            <span className="min-w-0 truncate">contents on machine — open when live</span>
+          </div>
+        );
+    }
   };
 
+  // Keep the keyboard cursor's row on screen even though off-screen rows unmount.
+  useEffect(() => {
+    if (!cursor) return;
+    const index = renderItems.findIndex((it) => it.type === "node" && it.node.path === cursor);
+    if (index >= 0) vlistRef.current?.scrollToIndex(index);
+  }, [cursor, renderItems]);
+
   return (
-    <div className={cn("flex min-w-0 flex-col", className)}>
+    <div className={cn("flex min-h-0 min-w-0 flex-col", className)}>
       {showToolbar && (
         <div className="flex shrink-0 flex-wrap items-center gap-0.5 border-b border-og-border px-1 py-1">
           {supportsMutation ? (
@@ -595,7 +708,11 @@ export function FileBrowser({
             </>
           ) : null}
           <span className="ml-auto" />
-          <ToolbarButton label="Refresh" onClick={() => void result.refresh()} disabled={busy || result.loading}>
+          <ToolbarButton
+            label="Refresh"
+            onClick={() => void result.refresh()}
+            disabled={busy || result.loading}
+          >
             <RefreshCwIcon className={cn("size-3.5", result.loading && "animate-spin")} />
           </ToolbarButton>
         </div>
@@ -628,31 +745,27 @@ export function FileBrowser({
             : undefined
         }
         className={cn(
-          "min-w-0 flex-1 overflow-auto p-1 outline-none",
+          "flex min-h-0 min-w-0 flex-1 flex-col p-1 outline-none",
           dragOver === "" && "ring-1 ring-inset ring-og-accent",
         )}
         data-opengeni-file-tree
       >
-        {/* A root-level create input sits above the rows. */}
-        {draftCreate?.parent === "" && (
-          <InlineInput
-            depth={0}
-            kind={draftCreate.kind}
-            initialValue=""
-            onCommit={(name) => void commitCreate(name)}
-            onCancel={() => setDraftCreate(null)}
-          />
-        )}
         {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>
+            <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 />
+              <RefreshCwIcon
+                className={cn("size-3.5", result.loading && "animate-spin")}
+                aria-hidden
+              />
               Retry
             </button>
           </div>
@@ -661,7 +774,21 @@ export function FileBrowser({
             {emptyState ?? "This directory is empty"}
           </div>
         ) : (
-          result.tree.map((node) => renderRow(node, 0))
+          // Virtualized: only the rows in/near the viewport mount, so a 3k-node
+          // tree stays responsive. The flat item list already carries the
+          // expanded subtree + synthetic (create/skeleton/residue) rows.
+          <VList
+            ref={vlistRef}
+            className="min-h-0 flex-1"
+            itemSize={coarsePointer ? 44 : 28}
+            ssrCount={Math.min(32, renderItems.length)}
+          >
+            {renderItems.map((item) => (
+              <div key={itemKey(item)} className="min-w-0">
+                {renderItem(item)}
+              </div>
+            ))}
+          </VList>
         )}
       </div>
 
@@ -699,7 +826,7 @@ function ToolbarButton({
       onClick={onClick}
       disabled={disabled}
       className={cn(
-        "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",
+        "inline-flex size-7 items-center justify-center rounded-og-sm p-1 text-og-fg-muted max-[1023px]:size-11 pointer-coarse:min-h-11 pointer-coarse:min-w-11",
         "hover:bg-og-surface-2 hover:text-og-fg",
         "disabled:cursor-not-allowed disabled:opacity-40",
       )}
@@ -746,9 +873,16 @@ function InlineInput({
   };
 
   return (
-    <div className="flex items-center gap-1 px-1 py-0.5" style={{ paddingLeft: `${depth * 12 + 4}px` }}>
+    <div
+      className="flex items-center gap-1 px-1 py-0.5"
+      style={{ paddingLeft: `${depth * 12 + 4}px` }}
+    >
       <span className="inline-block w-3 shrink-0" />
-      {kind === "dir" ? <FolderIcon className="size-3.5 shrink-0" /> : <FileIcon className="size-3.5 shrink-0" />}
+      {kind === "dir" ? (
+        <FolderIcon className="size-3.5 shrink-0" />
+      ) : (
+        <FileIcon className="size-3.5 shrink-0" />
+      )}
       <input
         ref={ref}
         value={value}

package/src/components/fleet-tile.tsx

@@ -47,7 +47,8 @@ export function FleetTile({ session, title, subtitle, onOpen, className }: Fleet
         "og-root group relative flex w-full flex-col gap-2.5 overflow-hidden rounded-og-lg border border-og-border",
         "bg-og-surface-1 p-4 text-left shadow-og-sm",
         "transition-[border-color,background-color,box-shadow,transform] duration-200 ease-og-out",
-        onOpen && "hover:-translate-y-px hover:border-og-border-strong hover:bg-og-surface-2 hover:shadow-og-md",
+        onOpen &&
+          "hover:-translate-y-px hover:border-og-border-strong hover:bg-og-surface-2 hover:shadow-og-md",
         "disabled:cursor-default",
         className,
       )}
@@ -56,14 +57,22 @@ export function FleetTile({ session, title, subtitle, onOpen, className }: Fleet
         aria-hidden
         className={cn(
           "absolute inset-y-0 left-0 w-0.5 transition-opacity duration-300",
-          running ? "bg-og-accent opacity-100" : needsYou ? "bg-og-status-waiting opacity-100" : "opacity-0",
+          running
+            ? "bg-og-accent opacity-100"
+            : needsYou
+              ? "bg-og-status-waiting opacity-100"
+              : "opacity-0",
         )}
       />
       <span className="flex w-full items-start justify-between gap-3">
-        <span className="line-clamp-2 min-w-0 text-og-base 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-og-sm text-og-fg-muted">{subtitle}</span> : null}
+      {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>

package/src/components/machine-card.tsx

@@ -22,7 +22,8 @@ export type MachineCardProps = {
 };
 
 function KindIcon({ machine }: { machine: MachineView }) {
-  if (machine.isSessionGroup) return <ServerIcon className="size-4 text-og-fg-subtle" aria-hidden />;
+  if (machine.isSessionGroup)
+    return <ServerIcon className="size-4 text-og-fg-subtle" aria-hidden />;
   if (machine.kind === "modal") return <CpuIcon className="size-4 text-og-fg-subtle" aria-hidden />;
   return <LaptopIcon className="size-4 text-og-fg-subtle" aria-hidden />;
 }
@@ -71,7 +72,9 @@ export function MachineCard({ machine, onAttach, attaching, className }: Machine
               ) : null}
             </div>
             <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 className="capitalize">
+                {machine.isSessionGroup ? "session sandbox" : machine.kind}
+              </span>
               <span aria-hidden>·</span>
               <span className="font-og-mono">
                 {machine.os}/{machine.arch}
@@ -88,7 +91,12 @@ export function MachineCard({ machine, onAttach, attaching, className }: Machine
             </div>
           </div>
         </div>
-        <MachineStatusPill state={machine.state} sharedSessionCount={machine.sharedSessionCount} size="sm" className="shrink-0" />
+        <MachineStatusPill
+          state={machine.state}
+          sharedSessionCount={machine.sharedSessionCount}
+          size="sm"
+          className="shrink-0"
+        />
       </div>
 
       {shared ? (
@@ -105,7 +113,11 @@ export function MachineCard({ machine, onAttach, attaching, className }: Machine
 
       <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"}
+          {machine.lastSeenAt ? (
+            <>Last seen {formatRelativeTime(machine.lastSeenAt)}</>
+          ) : (
+            "Never connected"
+          )}
         </span>
         {machine.active ? (
           <span className="text-og-accent">Routing here</span>

package/src/components/machine-dock-bar.tsx

@@ -22,10 +22,9 @@ export type MachineDockBarProps = {
  * render IDENTICALLY regardless of backend — this bar is the only backend-aware
  * chrome (the dock-parity contract: selfhosted == Modal for the surfaces).
  */
-export function MachineDockBar({ name, kind, state, sharedSessionCount, className }: MachineDockBarProps) {
+export function MachineDockBar({ name, kind, state, className }: MachineDockBarProps) {
   const Icon = kind === "selfhosted" ? LaptopIcon : CpuIcon;
   const stateBadge = MACHINE_STATE_BADGE_META[state];
-  const shared = (sharedSessionCount ?? 0) > 1;
   return (
     <div
       data-machine-dock-bar
@@ -40,13 +39,20 @@ export function MachineDockBar({ name, kind, state, sharedSessionCount, classNam
         {stateBadge ? (
           <span
             data-state-badge={state}
-            className={cn("shrink-0 rounded-full border px-1.5 py-px text-[10px] font-medium", stateBadge.badgeClassName)}
+            className={cn(
+              "shrink-0 rounded-full border px-1.5 py-px text-[10px] font-medium",
+              stateBadge.badgeClassName,
+            )}
           >
             {stateBadge.label}
           </span>
         ) : null}
       </div>
-      <ConnectionStatusPill status={connectionStatusForState(state)} size="sm" className="shrink-0" />
+      <ConnectionStatusPill
+        status={connectionStatusForState(state)}
+        size="sm"
+        className="shrink-0"
+      />
     </div>
   );
 }
@@ -63,21 +69,27 @@ export type SharedMachineDisclosureProps = {
  * dock (and reused on the desktop take-control gate) so the user knows others are
  * driving the same whole-machine lease. Render when `sharedSessionCount > 1`.
  */
-export function SharedMachineDisclosure({ sharedSessionCount, density = "compact", className }: SharedMachineDisclosureProps) {
+export function SharedMachineDisclosure({
+  sharedSessionCount,
+  density = "compact",
+  className,
+}: SharedMachineDisclosureProps) {
   const others = Math.max(0, sharedSessionCount - 1);
   return (
     <div
       data-shared-disclosure
       className={cn(
         "flex items-center gap-1.5 border-og-accent/25 bg-og-accent-soft text-og-fg-muted",
-        density === "full" ? "rounded-og-md border px-3 py-2 text-[12px]" : "border-b px-2.5 py-1 text-[11px]",
+        density === "full"
+          ? "rounded-og-md border px-3 py-2 text-[12px]"
+          : "border-b px-2.5 py-1 text-[11px]",
         className,
       )}
     >
       <UsersIcon className="size-3.5 shrink-0 text-og-accent" aria-hidden />
       <span>
-        Shared — {others === 1 ? "another session is" : `${others} other sessions are`} on this machine. They see the same
-        terminal, files, and desktop.
+        Shared — {others === 1 ? "another session is" : `${others} other sessions are`} on this
+        machine. They see the same terminal, files, and desktop.
       </span>
     </div>
   );

package/src/components/machine-metrics.tsx

@@ -29,11 +29,17 @@ function Meter({
   tone: "ok" | "warn" | "hot";
 }) {
   const fillClass =
-    tone === "hot" ? "bg-og-status-failed" : tone === "warn" ? "bg-og-status-waiting" : "bg-og-status-running";
+    tone === "hot"
+      ? "bg-og-status-failed"
+      : tone === "warn"
+        ? "bg-og-status-waiting"
+        : "bg-og-status-running";
   return (
     <div className="flex min-w-0 flex-col gap-1" data-metric={label.toLowerCase()}>
       <div className="flex items-baseline justify-between gap-2">
-        <span className="text-[10px] font-medium uppercase tracking-wide text-og-fg-subtle">{label}</span>
+        <span className="text-[10px] font-medium uppercase tracking-wide text-og-fg-subtle">
+          {label}
+        </span>
         <span className="font-og-mono text-[11px] tabular-nums text-og-fg-muted">{value}</span>
       </div>
       <div className="h-1 w-full overflow-hidden rounded-full bg-og-surface-2">
@@ -55,7 +61,11 @@ function toneFor(p: number): "ok" | "warn" | "hot" {
 
 /** The token text color for a tone (matches the `Meter` fill ramp). */
 function toneTextClass(tone: "ok" | "warn" | "hot"): string {
-  return tone === "hot" ? "text-og-status-failed" : tone === "warn" ? "text-og-status-waiting" : "text-og-status-running";
+  return tone === "hot"
+    ? "text-og-status-failed"
+    : tone === "warn"
+      ? "text-og-status-waiting"
+      : "text-og-status-running";
 }
 
 /**
@@ -86,11 +96,18 @@ function StatTriple({
   return (
     <div className="flex items-center justify-between gap-3" data-metric="load">
       <div className="flex min-w-0 flex-col gap-1">
-        <span className="text-[10px] font-medium uppercase tracking-wide text-og-fg-subtle">Load</span>
+        <span className="text-[10px] font-medium uppercase tracking-wide text-og-fg-subtle">
+          Load
+        </span>
         <div className="flex items-baseline gap-3">
           {stats.map((s) => (
             <div key={s.label} className="flex items-baseline gap-1">
-              <span className={cn("text-[10px] font-medium uppercase tracking-wide", toneTextClass(tone))}>
+              <span
+                className={cn(
+                  "text-[10px] font-medium uppercase tracking-wide",
+                  toneTextClass(tone),
+                )}
+              >
                 {s.label}
               </span>
               <span className={cn("font-og-mono text-[12px] tabular-nums", toneTextClass(tone))}>
@@ -128,8 +145,10 @@ export function MachineMetrics({ metrics, density = "compact", className }: Mach
     );
   }
 
-  const memPct = metrics.memTotalBytes > 0 ? (metrics.memUsedBytes / metrics.memTotalBytes) * 100 : 0;
-  const diskPct = metrics.diskTotalBytes > 0 ? (metrics.diskUsedBytes / metrics.diskTotalBytes) * 100 : 0;
+  const memPct =
+    metrics.memTotalBytes > 0 ? (metrics.memUsedBytes / metrics.memTotalBytes) * 100 : 0;
+  const diskPct =
+    metrics.diskTotalBytes > 0 ? (metrics.diskUsedBytes / metrics.diskTotalBytes) * 100 : 0;
   const hasGpu = metrics.gpuUtilPct !== null;
   const gpuMemLabel = metrics.gpuMemBytes !== null ? formatBytes(metrics.gpuMemBytes) : null;
   // Memory & disk are honest used/total ratios → full-width meters; stack them in
@@ -165,7 +184,11 @@ export function MachineMetrics({ metrics, density = "compact", className }: Mach
         {hasGpu ? (
           <Meter
             label="GPU"
-            value={gpuMemLabel ? `${metrics.gpuUtilPct!.toFixed(0)}% · ${gpuMemLabel}` : `${metrics.gpuUtilPct!.toFixed(0)}%`}
+            value={
+              gpuMemLabel
+                ? `${metrics.gpuUtilPct!.toFixed(0)}% · ${gpuMemLabel}`
+                : `${metrics.gpuUtilPct!.toFixed(0)}%`
+            }
             fillPct={metrics.gpuUtilPct!}
             tone={toneFor(metrics.gpuUtilPct!)}
           />