@opengeni/react 0.12.0 → 0.15.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

@@ -1,4 +1,5 @@
 import {
+  ArrowRightIcon,
   CpuIcon,
   LaptopIcon,
   MonitorIcon,
@@ -8,9 +9,10 @@ import {
 } from "lucide-react";
 import { cn } from "../lib/cn";
 import { formatRelativeTime } from "../lib/format";
-import type { MachineView } from "../types/machines";
+import type { MachineView, MetricSample } from "../types/machines";
+import { MachineHealthPill } from "./machine-health-pill";
 import { MachineMetrics } from "./machine-metrics";
-import { MachineStatusPill } from "./machine-status-pill";
+import { MetricSparkline } from "./machines/metric-sparkline";
 
 export type MachineCardProps = {
   machine: MachineView;
@@ -18,33 +20,68 @@ export type MachineCardProps = {
   onAttach?: ((machine: MachineView) => void) | undefined;
   /** Whether an attach/swap is currently in flight (disables the affordance). */
   attaching?: boolean | undefined;
+  /** Short recent history (e.g. 15m) — drives the card's CPU trend + preview. */
+  series?: MetricSample[] | undefined;
+  /** Open the full per-machine telemetry detail. Makes the whole card actionable. */
+  onOpenDetail?: ((machine: MachineView) => void) | undefined;
+  now?: number | undefined;
   className?: string | undefined;
 };
 
 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 />;
 }
 
 /**
- * One machine in the Machines dashboard: name + kind + OS/arch, the composite
- * connection/state/shared status, latest resource meters, last-seen recency, and
- * an attach/swap affordance. The session's currently-active sandbox carries an
- * accent edge + an "Active" marker (never an attach button — it's already active).
+ * One machine in the Machines dashboard: name + kind + OS/arch, the fused HEALTH
+ * verdict, latest resource meters, a CPU trend that previews the history, live
+ * freshness, and attach/swap. The whole card opens the telemetry detail when
+ * `onOpenDetail` is wired. The session's active sandbox carries an accent edge.
  */
-export function MachineCard({ machine, onAttach, attaching, className }: MachineCardProps) {
+export function MachineCard({
+  machine,
+  onAttach,
+  attaching,
+  series,
+  onOpenDetail,
+  now,
+  className,
+}: MachineCardProps) {
   const offline = machine.state === "offline";
   const attachable = !machine.active && !offline && Boolean(onAttach);
   const shared = machine.sharedSessionCount > 1;
+  const clockNow = now ?? Date.now();
+  const sampledAgo = machine.metrics
+    ? formatRelativeTime(machine.metrics.sampledAt, new Date(clockNow))
+    : null;
+  const cpuPts = (series ?? []).map((s) => ({ t: new Date(s.sampledAt).getTime(), v: s.cpuPct }));
+  const openable = Boolean(onOpenDetail);
 
   return (
     <div
       data-machine-card={machine.sandboxId}
       data-active={machine.active ? "true" : "false"}
+      role={openable ? "button" : undefined}
+      tabIndex={openable ? 0 : undefined}
+      onClick={openable ? () => onOpenDetail?.(machine) : undefined}
+      onKeyDown={
+        openable
+          ? (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onOpenDetail?.(machine);
+              }
+            }
+          : undefined
+      }
       className={cn(
-        "og-root relative flex flex-col gap-3 overflow-hidden rounded-og-lg border border-og-border",
-        "bg-og-surface-1 p-4 shadow-og-sm",
+        "og-root group relative flex flex-col gap-3 overflow-hidden rounded-og-lg border border-og-border",
+        "bg-og-surface-1 p-4 shadow-og-sm transition-colors",
+        openable &&
+          "cursor-pointer hover:border-og-border-strong focus-visible:border-og-accent/60 focus-visible:outline-none",
         machine.active && "border-og-accent/40",
         className,
       )}
@@ -71,7 +108,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 +127,13 @@ export function MachineCard({ machine, onAttach, attaching, className }: Machine
             </div>
           </div>
         </div>
-        <MachineStatusPill state={machine.state} sharedSessionCount={machine.sharedSessionCount} size="sm" className="shrink-0" />
+        <MachineHealthPill
+          state={machine.state}
+          metrics={machine.metrics}
+          now={clockNow}
+          size="sm"
+          className="shrink-0"
+        />
       </div>
 
       {shared ? (
@@ -103,9 +148,39 @@ export function MachineCard({ machine, onAttach, attaching, className }: Machine
 
       <MachineMetrics metrics={machine.metrics} />
 
+      {/* CPU trend — previews the history and invites opening the detail. */}
+      {cpuPts.length > 1 ? (
+        <div className="flex flex-col gap-1 rounded-og-md bg-og-surface-2/40 p-2.5">
+          <div className="flex items-center justify-between text-[10px] font-medium uppercase tracking-wide text-og-fg-subtle">
+            <span>CPU · last 15m</span>
+            {openable ? (
+              <span className="flex items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
+                Telemetry <ArrowRightIcon className="size-2.5" aria-hidden />
+              </span>
+            ) : null}
+          </div>
+          <MetricSparkline points={cpuPts} color="var(--og-color-accent)" yMax={100} height={26} />
+        </div>
+      ) : null}
+
       <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 className="inline-flex items-center gap-1.5">
+          {sampledAgo ? (
+            <>
+              <span
+                className={cn(
+                  "size-1.5 rounded-full",
+                  sampledAgo === "now" ? "bg-og-status-idle" : "bg-og-fg-subtle",
+                )}
+                aria-hidden
+              />
+              {sampledAgo === "now" ? "Live" : `Updated ${sampledAgo} ago`}
+            </>
+          ) : machine.lastSeenAt ? (
+            <>Last seen {formatRelativeTime(machine.lastSeenAt, new Date(clockNow))}</>
+          ) : (
+            "Never connected"
+          )}
         </span>
         {machine.active ? (
           <span className="text-og-accent">Routing here</span>
@@ -114,7 +189,10 @@ export function MachineCard({ machine, onAttach, attaching, className }: Machine
             type="button"
             data-attach
             disabled={attaching}
-            onClick={() => onAttach?.(machine)}
+            onClick={(e) => {
+              e.stopPropagation();
+              onAttach?.(machine);
+            }}
             className={cn(
               "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",