@opengeni/react 0.46.1 → 0.52.1

package/src/components/sandbox-workspace.tsx

@@ -4,7 +4,8 @@
 //   Changes  — review-first git: turn-end capture (cold) or live diff (warm)
 //   Files    — tree + inline editor (capture-backed cold, live warm)
 //   Terminal — interactive xterm wired to the box PTY (Channel-A projection)
-//   Desktop  — noVNC (Channel-B), watch by default + a server-gated take-control
+//   Browser  — workspace-wide BrowserSessions, tabs, live frames, and input
+//   Computer — workspace ComputerSessions: native targets, frames, and input
 // plus a machine-state chip in the dock header (the one truthful live/waking/
 // offline indicator) and any host-injected extra tabs (Run/Debug in apps/web).
 //
@@ -13,39 +14,63 @@
 // (no `sonner` import), and every surface renders with package primitives + og
 // tokens only. `apps/web` consumes this through the exact public surface an
 // external embedder uses — that is criterion F1.
-import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Popover } from "radix-ui";
+import {
+  lazy,
+  type ReactNode,
+  Suspense,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import type { SessionEvent } from "@opengeni/sdk";
 import {
   CircleCheckIcon,
   CpuIcon,
-  LaptopIcon,
+  FileCode2Icon,
+  GitCompareArrowsIcon,
+  Globe2Icon,
   LoaderCircleIcon,
+  MonitorIcon,
   RefreshCwIcon,
+  SquareTerminalIcon,
   TriangleAlertIcon,
 } from "lucide-react";
 
 import { type ClientOverride, useOpenGeni } from "../provider";
 import { cn } from "../lib/cn";
 import { xtermThemeFromTokens } from "../lib/xterm-theme";
-import { usePortalTokenStyle } from "../lib/use-portal-token-style";
+import { sandboxAcceptsLiveIo } from "../lib/sandbox-liveness";
+import type { BrowserFrameWebSocketFactory } from "../hooks/use-browser-frame-stream";
+import type { ComputerFrameWebSocketFactory } from "../hooks/use-computer-frame-stream";
 import { useSessionCapabilities } from "../hooks/use-session-capabilities";
 import { useSandboxFiles } from "../hooks/use-sandbox-files";
-import { useSandboxGit, type UseSandboxGitResult } from "../hooks/use-sandbox-git";
+import {
+  useSandboxGit,
+  type SandboxGitComparison,
+  type UseSandboxGitResult,
+} from "../hooks/use-sandbox-git";
 import { useSandboxTerminal } from "../hooks/use-sandbox-terminal";
 import { useWorkspaceCapture } from "../hooks/use-workspace-capture";
-import { formatAsOf, useMachineChip, type MachineChip } from "../hooks/use-machine-chip";
+import { useMachineChip, type MachineChip } from "../hooks/use-machine-chip";
 import { useMachines } from "../hooks/use-machines";
 import type { MachineView } from "../types/machines";
-import { connectionStatusForState } from "../types/machines";
-import { ConnectionStatusPill } from "./machine-status-pill";
-import { SharedMachineDisclosure } from "./machine-dock-bar";
 import { SandboxFiles } from "./sandbox-files";
 import { WorkbenchChanges } from "./workbench-changes";
 import { SandboxTerminal, type XtermTheme } from "./sandbox-terminal";
-import { DesktopViewer } from "./desktop-viewer";
 import { WorkspaceDock, type WorkspaceDockProps, type WorkspaceTab } from "./workspace-dock";
 
+const LazyBrowserViewer = lazy(async () => {
+  const viewers = await import("./interactive-workbench-viewers");
+  return { default: viewers.BrowserViewer };
+});
+
+const LazyComputerViewer = lazy(async () => {
+  const viewers = await import("./interactive-workbench-viewers");
+  return { default: viewers.ComputerViewer };
+});
+
 /** A host-routed notification (replaces the app-only `sonner` toast coupling). */
 export type WorkspaceNotification = { kind: "error" | "info"; message: string };
 
@@ -53,6 +78,7 @@ export type WorkspaceNotification = { kind: "error" | "info"; message: string };
 export const WORKBENCH_TAB_CHANGES = "changes";
 export const WORKBENCH_TAB_FILES = "files";
 export const WORKBENCH_TAB_TERMINAL = "terminal";
+export const WORKBENCH_TAB_BROWSER = "browser";
 export const WORKBENCH_TAB_DESKTOP = "desktop";
 
 /**
@@ -64,6 +90,7 @@ export const WORKBENCH_SURFACES = [
   WORKBENCH_TAB_CHANGES,
   WORKBENCH_TAB_FILES,
   WORKBENCH_TAB_TERMINAL,
+  WORKBENCH_TAB_BROWSER,
   WORKBENCH_TAB_DESKTOP,
 ] as const;
 
@@ -97,6 +124,29 @@ function captureDegradedMessage(reason: string): string {
   }
 }
 
+function WorkbenchTabLabel({ icon, children }: { icon: ReactNode; children: ReactNode }) {
+  return (
+    <span className="inline-flex items-center gap-1.5">
+      <span className="[&>svg]:size-3.5" aria-hidden>
+        {icon}
+      </span>
+      <span>{children}</span>
+    </span>
+  );
+}
+
+function WorkbenchSurfaceLoading({ name }: { name: "Browser" | "Computer" }) {
+  return (
+    <CenteredState
+      icon={
+        <LoaderCircleIcon className="size-5 animate-spin motion-reduce:animate-none" aria-hidden />
+      }
+    >
+      <p className="text-og-sm font-medium text-og-fg">Opening {name}</p>
+    </CenteredState>
+  );
+}
+
 /**
  * Decide a workspace tab from an already-local event log: the newest
  * `workspace.revision.captured` announce carries the change surface stats, so
@@ -121,7 +171,19 @@ export function initialWorkspaceTab(
     bestSeq = event.sequence;
     bestFileCount = typeof stats?.fileCount === "number" ? stats.fileCount : 0;
   }
-  return bestFileCount > 0 ? WORKBENCH_TAB_CHANGES : WORKBENCH_TAB_FILES;
+  if (bestFileCount > 0) return WORKBENCH_TAB_CHANGES;
+
+  let latestGitSeq = -1;
+  let committedOnly = false;
+  for (const event of events ?? []) {
+    if (event.type !== "git.changed" || event.sequence > bestSeq) continue;
+    if (event.sequence <= latestGitSeq) continue;
+    const payload = event.payload as { ahead?: number; reason?: string } | null;
+    latestGitSeq = event.sequence;
+    committedOnly =
+      (typeof payload?.ahead === "number" && payload.ahead > 0) || payload?.reason === "commit";
+  }
+  return committedOnly ? WORKBENCH_TAB_CHANGES : WORKBENCH_TAB_FILES;
 }
 
 /**
@@ -173,7 +235,7 @@ export type UseSandboxWorkspaceTabsOptions = ClientOverride & {
   /** Live event log (usually `useSessionEvents().events`). */
   events: SessionEvent[];
   /**
-   * Built-in surfaces this host wants to expose. Omit for all four. A disabled
+   * Built-in surfaces this host wants to expose. Omit for all five. A disabled
    * surface is behaviorally dormant: its data hooks, warm intents, stream
    * attachment, and navigation callbacks are not activated.
    */
@@ -181,9 +243,15 @@ export type UseSandboxWorkspaceTabsOptions = ClientOverride & {
   /** Override the source-driven default tab (e.g. a host landing tab id). When
    *  omitted the workbench picks Changes-vs-Files from capture or live Git. */
   initialTab?: string | null | undefined;
+  /** Actually selected dock tab. Inactive data surfaces retain cache but issue no live reads. */
+  activeTab?: string | null | undefined;
   /** Host-routed notifications (mutation errors, desktop-consent failures). The
    *  package never imports a toast library — the host decides how to surface. */
   onNotify?: ((notification: WorkspaceNotification) => void) | undefined;
+  /** Alternate frame transport for non-browser runtimes and deterministic tests. */
+  browserWebSocketFactory?: BrowserFrameWebSocketFactory | undefined;
+  /** Alternate Computer frame transport for non-browser runtimes and deterministic tests. */
+  computerWebSocketFactory?: ComputerFrameWebSocketFactory | undefined;
   /** File requested by a Changes guard. The Files surface defers the read until
    *  the sandbox is live, then reveals this path. */
   requestedFilePath?: string | null | undefined;
@@ -192,10 +260,14 @@ export type UseSandboxWorkspaceTabsOptions = ClientOverride & {
   requestedFileRequestId?: string | number | null | undefined;
   /** Route a guarded diff into the host's Files tab. */
   onOpenFile?: ((path: string) => void) | undefined;
+  /** Navigate the host dock to one exact linked ComputerSession. */
+  onOpenComputerSession?: ((computerSessionId: string) => void) | undefined;
+  requestedComputerSessionId?: string | null | undefined;
+  requestedComputerRequestId?: string | number | null | undefined;
 };
 
 export type UseSandboxWorkspaceTabsResult = {
-  /** Changes | Files | Terminal | Desktop (capability-gated where noted). */
+  /** Changes | Files | Terminal | Browser | Desktop (capability-gated where noted). */
   tabs: WorkspaceTab[];
   /** The source-driven default tab: Changes when the first authoritative capture
    *  or live Git result has changes, else Files (a host `initialTab` overrides).
@@ -208,7 +280,6 @@ export type UseSandboxWorkspaceTabsResult = {
 
 type SessionWarmIntents = {
   sessionId: string;
-  watchDesktop: boolean;
   warmTerminal: boolean;
   warmFiles: boolean;
 };
@@ -216,7 +287,6 @@ type SessionWarmIntents = {
 function emptyWarmIntents(sessionId: string): SessionWarmIntents {
   return {
     sessionId,
-    watchDesktop: false,
     warmTerminal: false,
     warmFiles: false,
   };
@@ -225,36 +295,71 @@ function emptyWarmIntents(sessionId: string): SessionWarmIntents {
 /**
  * Build the workbench tabs + the machine-chip model for one session. This is the
  * dock "brain": capability negotiation, capture-backed cold reads, prewarm
- * flags, desktop consent, and the xterm theme observer — all package-local.
+ * flags, automatic desktop acknowledgment, and the xterm theme observer — all
+ * package-local.
  */
 export function useSandboxWorkspaceTabs(
   options: UseSandboxWorkspaceTabsOptions,
 ): UseSandboxWorkspaceTabsResult {
   const { client, workspaceId } = useOpenGeni(options);
-  const { sessionId, events, onNotify, requestedFilePath, requestedFileRequestId, onOpenFile } =
-    options;
+  const {
+    sessionId,
+    events,
+    onNotify,
+    browserWebSocketFactory,
+    computerWebSocketFactory,
+    requestedFilePath,
+    requestedFileRequestId,
+    onOpenFile,
+    onOpenComputerSession,
+    requestedComputerSessionId,
+    requestedComputerRequestId,
+  } = options;
   const initialTab = options.initialTab ?? null;
+  const activeTab = options.activeTab ?? initialTab;
   const requestedSurfaces = options.surfaces ?? WORKBENCH_SURFACES;
   const surfaceSet = new Set<SandboxWorkspaceSurface>(requestedSurfaces);
   const changesEnabled = surfaceSet.has(WORKBENCH_TAB_CHANGES);
   const filesEnabled = surfaceSet.has(WORKBENCH_TAB_FILES);
   const terminalEnabled = surfaceSet.has(WORKBENCH_TAB_TERMINAL);
+  const browserEnabled = surfaceSet.has(WORKBENCH_TAB_BROWSER);
   const desktopEnabled = surfaceSet.has(WORKBENCH_TAB_DESKTOP);
+  const createLinkedComputer = useCallback(
+    async (name: string) => {
+      const response = await client.createComputerSession(workspaceId, {
+        operationId: crypto.randomUUID(),
+        sessionId,
+        name,
+      });
+      return {
+        id: response.session.id,
+        placement: response.session.placement,
+      };
+    },
+    [client, sessionId, workspaceId],
+  );
   const workspaceDataEnabled = changesEnabled || filesEnabled;
-  const anySurfaceEnabled = workspaceDataEnabled || terminalEnabled || desktopEnabled;
+  const machineSurfaceEnabled = workspaceDataEnabled || terminalEnabled || desktopEnabled;
+  // Do not speculatively activate both remote workspace surfaces while the dock
+  // is still resolving its selected tab. Modal calls cannot be cancelled after
+  // dispatch, so that transient state otherwise creates an aborted duplicate
+  // batch immediately before the real selected-tab request.
+  const resolvedActiveTab = activeTab ?? initialTab;
+  const changesActive = resolvedActiveTab === WORKBENCH_TAB_CHANGES;
+  const filesActive = resolvedActiveTab === WORKBENCH_TAB_FILES;
   const surfaceIdentity = WORKBENCH_SURFACES.filter((surface) => surfaceSet.has(surface)).join(",");
 
-  // The three box-warming INTENTS, each off by default and each
+  // The two box-warming INTENTS, each off by default and each
   // flipped true by a genuine user action (never on mount, never on a passive
-  // capture glance): desktop watch consent, terminal engagement (`onActivate`), and
-  // a deliberate live-file open/edit in Files. Browsing capture-served
+  // capture glance): terminal engagement (`onActivate`) and a deliberate
+  // live-file open/edit in Files. Browsing capture-served
   // Changes/Files warms nothing — that is the whole point of Refinement 1.
   const [storedWarmIntents, setStoredWarmIntents] = useState<SessionWarmIntents>(() =>
     emptyWarmIntents(sessionId),
   );
   const warmIntents =
     storedWarmIntents.sessionId === sessionId ? storedWarmIntents : emptyWarmIntents(sessionId);
-  const { watchDesktop, warmTerminal, warmFiles } = warmIntents;
+  const { warmTerminal, warmFiles } = warmIntents;
   const requestWarmIntent = useCallback(
     (intent: Exclude<keyof SessionWarmIntents, "sessionId">) => {
       setStoredWarmIntents((previous) => {
@@ -271,7 +376,7 @@ export function useSandboxWorkspaceTabs(
     workspaceId,
     sessionId,
     pollIntervalMs: 8000,
-    enabled: anySurfaceEnabled,
+    enabled: machineSurfaceEnabled,
   });
   const activeMachine: MachineView | null =
     machines.machines.find((m) => m.sandboxId === machines.activeSandboxId) ??
@@ -280,8 +385,8 @@ export function useSandboxWorkspaceTabs(
 
   const caps = useSessionCapabilities(sessionId, {
     events,
-    enabled: anySurfaceEnabled,
-    attachDesktop: desktopEnabled && watchDesktop,
+    enabled: machineSurfaceEnabled,
+    attachDesktop: false,
     attachTerminal: terminalEnabled && warmTerminal,
     // Explicit live-file intent only — NOT "the Files tab is open". A cold edit
     // or guarded-file open wakes the box; a glance at the tree/diff does not.
@@ -289,6 +394,11 @@ export function useSandboxWorkspaceTabs(
   });
   const capabilities = caps.capabilities;
   const liveness = capabilities?.liveness;
+  // A missing capability document is not evidence that the sandbox is live.
+  // Pass explicit null to live-I/O hooks so fast capture/event hydration cannot
+  // exploit their legacy "liveness omitted" compatibility path while negotiation
+  // is still pending.
+  const liveIoLiveness = liveness ?? null;
   const fileSystemOn = capabilities?.FileSystem.available ?? false;
   // The FS is writable only when it's live AND not read-only. A self-hosted box
   // that's offline (or any read-only advertisement) or a capture-served cold tree
@@ -300,26 +410,23 @@ export function useSandboxWorkspaceTabs(
   // Mutations are live-only. A capture is a review artifact, never a writable
   // surrogate for a sleeping machine; the user must deliberately open the live
   // workspace before create/rename/delete/edit controls appear.
-  const filesEditable =
-    fileSystemOn && !fsReadOnly && (liveness === "warm" || liveness === "draining");
+  const filesEditable = fileSystemOn && !fsReadOnly && sandboxAcceptsLiveIo(liveness);
   const gitOn = capabilities?.Git.available ?? false;
   const terminalOn = terminalEnabled && (capabilities?.Terminal.transport ?? null) !== null;
-  // The REAL interactive terminal is the ttyd pty-ws stream. When it's live the
-  // legacy HTTP PTY must NOT run; `useSandboxTerminal` opens its HTTP PTY only as
-  // the firehose-mode fallback (a backend without ttyd).
-  const ptyWsLive =
-    capabilities?.Terminal.transport === "pty-ws" && Boolean(capabilities?.Terminal.url);
-  const ptyCapable = (capabilities?.Terminal.ptyCapable ?? false) && !ptyWsLive;
+  // A descriptor-only pty-ws cell intentionally has no short-lived URL until
+  // terminal intent acquires one. Do not mistake that grant boundary for a
+  // legacy HTTP PTY and eagerly open a second terminal. The fallback exists only
+  // for a genuinely firehose-transport backend with no typed degradation.
+  const ptyCapable =
+    warmTerminal &&
+    (capabilities?.Terminal.ptyCapable ?? false) &&
+    capabilities?.Terminal.transport === "sse-events" &&
+    capabilities?.Terminal.reason === null;
   const terminal = useSandboxTerminal(sessionId, {
     events: terminalEnabled ? events : [],
     interactive: terminalEnabled && ptyCapable,
     liveness,
   });
-  const desktopAdvertised =
-    desktopEnabled &&
-    ((capabilities?.DesktopStream.transport ?? null) !== null ||
-      capabilities?.DesktopStream.reason === "lease_cold");
-
   // Lazy provisioning (#315) creates the box mid-turn on the first sandbox tool
   // call, emitting sandbox.provision started→completed/failed on the live stream.
   // The on-demand resting hook rests without polling, so when the box warms the
@@ -346,7 +453,7 @@ export function useSandboxWorkspaceTabs(
     enabled: workspaceDataEnabled,
   });
   const captureAvailable = captureState.available;
-  const liveWorkspaceExpected = liveness === "warm" || liveness === "draining";
+  const liveWorkspaceExpected = sandboxAcceptsLiveIo(liveness);
   // Capability negotiation and capture resolution are independent requests. A
   // cold capability document can win that race by a few milliseconds; enabling
   // the leaf hooks in that window would make them interpret `capture: null` as a
@@ -382,7 +489,9 @@ export function useSandboxWorkspaceTabs(
     // No passive Channel-A reads while cold, even after a conclusive capture
     // miss. A missing capture gets an explicit "Open live workspace" gate.
     enabled: filesEnabled && (captureAvailable || (fileSystemOn && liveWorkspaceExpected)),
-    liveness,
+    active: filesActive,
+    repoPaths,
+    liveness: liveIoLiveness,
     capture: captureState.capture,
     // A reverted optimistic mutation (e.g. a 409 rename collision) surfaces as a
     // host notification — the tree silently rolls back, the user sees why.
@@ -392,24 +501,58 @@ export function useSandboxWorkspaceTabs(
         message: `Could not ${op}: ${error.message}`,
       }),
   });
+  const [storedChangesComparison, setStoredChangesComparison] = useState<{
+    sessionId: string;
+    value: SandboxGitComparison;
+  } | null>(null);
+  const captureSupportsBranch =
+    captureState.capture !== null &&
+    captureState.capture.repos.length > 0 &&
+    captureState.capture.repos.every((repo) => repo.branchDiff !== undefined);
+  // A sleeping workspace can truthfully serve only the captured working-tree
+  // comparison. A live workspace defaults to the branch comparison so committed
+  // agent work remains visible. Explicit user selection is scoped per session.
+  const changesComparison =
+    storedChangesComparison?.sessionId === sessionId
+      ? storedChangesComparison.value
+      : liveWorkspaceExpected || captureSupportsBranch
+        ? "branch"
+        : "working";
+  const setChangesComparison = useCallback(
+    (value: SandboxGitComparison) => setStoredChangesComparison({ sessionId, value }),
+    [sessionId],
+  );
   const git = useSandboxGit(sessionId, {
     events,
-    enabled: workspaceDataEnabled && (captureAvailable || (gitOn && liveWorkspaceExpected)),
-    repoPaths,
-    liveness,
-    capture: captureState.capture,
-  });
-  const stagedGit = useSandboxGit(sessionId, {
-    events,
-    // Captures intentionally expose one combined review diff, not a staged
-    // index. Never probe the live index while the lease is cold.
-    enabled: filesEnabled && gitOn && liveWorkspaceExpected,
-    staged: true,
+    enabled:
+      changesComparison === "working"
+        ? workspaceDataEnabled && (captureAvailable || (gitOn && liveWorkspaceExpected))
+        : changesComparison === "branch"
+          ? workspaceDataEnabled && (captureSupportsBranch || (gitOn && liveWorkspaceExpected))
+          : workspaceDataEnabled && gitOn && liveWorkspaceExpected,
+    // Before the dock chooses its source-driven default, Git is the sole probe
+    // that may need to resolve that choice on a live workspace. Files remains
+    // dormant, avoiding the old duplicate full-tree read.
+    active: changesActive || resolvedActiveTab === null,
     repoPaths,
-    liveness,
-    capture: captureState.capture,
+    liveness: liveIoLiveness,
+    comparison: changesComparison,
+    capture: changesComparison === "staged" ? null : captureState.capture,
   });
-
+  useEffect(() => {
+    if (
+      changesComparison === "branch" &&
+      git.error &&
+      storedChangesComparison?.sessionId !== sessionId
+    ) {
+      // `origin/HEAD` is not guaranteed on a newly initialized repository, a
+      // connected machine, or a clone whose remote was renamed. The implicit
+      // live default must not strand the whole Changes surface when its ordinary
+      // working-tree comparison is still valid. Fall back once; an explicit
+      // user-selected Branch view remains selected and surfaces its real error.
+      setStoredChangesComparison({ sessionId, value: "working" });
+    }
+  }, [changesComparison, git.error, sessionId, storedChangesComparison?.sessionId]);
   // Token-derived xterm theme; re-derive on a `data-og-theme` flip. Generic — it
   // belongs in the package (an embedder's theme toggle drives it too).
   const [xtermTheme, setXtermTheme] = useState<XtermTheme | undefined>(undefined);
@@ -425,30 +568,6 @@ export function useSandboxWorkspaceTabs(
     return () => observer.disconnect();
   }, [terminalEnabled]);
 
-  async function acknowledgeAndWatch() {
-    try {
-      const shared = capabilities?.DesktopStream.shared ?? false;
-      await client.acknowledgeStream(workspaceId, sessionId, {
-        acknowledgeUnredacted: true,
-        acknowledgeShared: shared,
-      });
-      requestWarmIntent("watchDesktop");
-      caps.renegotiate();
-    } catch (error) {
-      onNotify?.({
-        kind: "error",
-        message: `Could not start the desktop stream: ${error instanceof Error ? error.message : String(error)}`,
-      });
-    }
-  }
-
-  // Re-warm WITHOUT re-acknowledging: the consent was already recorded, only the
-  // box drained back to cold. Idempotent — the viewer auto-warm de-dupes.
-  function rewarmDesktop() {
-    if (!watchDesktop) requestWarmIntent("watchDesktop");
-    caps.renegotiate();
-  }
-
   const dirtyCount = git.diff.length;
 
   // The one truthful machine indicator, derived from the live capability/liveness
@@ -458,10 +577,7 @@ export function useSandboxWorkspaceTabs(
     capabilitiesState: caps.state,
     activeMachineState: activeMachine?.state ?? null,
     activeIsSelfhosted: activeMachine?.kind === "selfhosted",
-    wantsWarm:
-      (terminalEnabled && warmTerminal) ||
-      (desktopEnabled && watchDesktop) ||
-      (workspaceDataEnabled && warmFiles),
+    wantsWarm: (terminalEnabled && warmTerminal) || (workspaceDataEnabled && warmFiles),
     capturedAt: captureState.capturedAt,
   });
   const workspaceWaking = chip.state === "waking";
@@ -484,7 +600,15 @@ export function useSandboxWorkspaceTabs(
   }
   const captureIsAuthoritative =
     !liveWorkspaceExpected && (liveness !== undefined || caps.error !== null);
-  const captureUnavailable = captureState.fileCount === 0 || captureState.error !== null;
+  const captureHasChanges =
+    (captureState.fileCount ?? 0) > 0 ||
+    (captureState.capture?.repos.some((repo) => (repo.branchDiff?.length ?? 0) > 0) ?? false);
+  const captureUnavailable =
+    (captureState.fileCount === 0 && !captureHasChanges) || captureState.error !== null;
+  const implicitBranchFallbackPending =
+    changesComparison === "branch" &&
+    git.error !== null &&
+    storedChangesComparison?.sessionId !== sessionId;
   if (defaultTabRef.current.value === null) {
     if (initialTab && (!isWorkbenchSurface(initialTab) || surfaceSet.has(initialTab))) {
       defaultTabRef.current.value = initialTab;
@@ -500,7 +624,7 @@ export function useSandboxWorkspaceTabs(
       captureState.available
     ) {
       defaultTabRef.current.value = sourceDrivenDefaultTab(
-        captureState.fileCount > 0,
+        captureHasChanges,
         changesEnabled,
         filesEnabled,
       );
@@ -523,13 +647,13 @@ export function useSandboxWorkspaceTabs(
       // A warm live read failed but the durable capture is intact: retain an
       // immediate, deterministic review surface instead of hanging unresolved.
       defaultTabRef.current.value = sourceDrivenDefaultTab(
-        captureState.fileCount > 0,
+        captureHasChanges,
         changesEnabled,
         filesEnabled,
       );
-    } else if (captureUnavailable && git.error) {
+    } else if (captureUnavailable && git.error && !implicitBranchFallbackPending) {
       // No capture and live Git failed: Files is the least surprising fallback
-      // and preserves the established no-capture degraded behavior.
+      // after the implicit branch-to-working fallback has also had its chance.
       defaultTabRef.current.value = sourceDrivenDefaultTab(false, changesEnabled, filesEnabled);
     }
   }
@@ -543,11 +667,13 @@ export function useSandboxWorkspaceTabs(
     if (changesEnabled)
       list.push({
         id: WORKBENCH_TAB_CHANGES,
-        label: "Changes",
+        label: <WorkbenchTabLabel icon={<GitCompareArrowsIcon />}>Changes</WorkbenchTabLabel>,
         badge: dirtyCount > 0 ? <DirtyBadge count={dirtyCount} /> : undefined,
         content: (
           <ChangesTabBody
             git={git}
+            comparison={changesComparison}
+            onComparisonChange={setChangesComparison}
             captureAvailable={captureAvailable}
             captureRevision={captureState.revision}
             capturePending={capturePending}
@@ -573,13 +699,12 @@ export function useSandboxWorkspaceTabs(
     if (filesEnabled)
       list.push({
         id: WORKBENCH_TAB_FILES,
-        label: "Files",
+        label: <WorkbenchTabLabel icon={<FileCode2Icon />}>Files</WorkbenchTabLabel>,
         content: (
           <SandboxFiles
             key={sessionId}
             files={files}
             git={git}
-            stagedGit={stagedGit}
             fileSystemAvailable={fileSystemOn || captureAvailable}
             editable={
               filesEditable && files.source === "live" && files.error === null && !files.loading
@@ -600,7 +725,7 @@ export function useSandboxWorkspaceTabs(
                   ...(requestedFileRequestId !== null && requestedFileRequestId !== undefined
                     ? { requestedPathRequestId: requestedFileRequestId }
                     : {}),
-                  requestedPathReady: liveness === "warm" || liveness === "draining",
+                  requestedPathReady: sandboxAcceptsLiveIo(liveness),
                 }
               : {})}
             // Ordinary capture browsing does not warm a box. The first edit — or an
@@ -615,10 +740,11 @@ export function useSandboxWorkspaceTabs(
     if (terminalOn) {
       list.push({
         id: WORKBENCH_TAB_TERMINAL,
-        label: "Terminal",
+        label: <WorkbenchTabLabel icon={<SquareTerminalIcon />}>Terminal</WorkbenchTabLabel>,
         content: (
           <div className="h-full bg-og-bg p-1">
             <SandboxTerminal
+              key={sessionId}
               result={terminal}
               terminalCapability={capabilities?.Terminal ?? null}
               onActivate={() => requestWarmIntent("warmTerminal")}
@@ -632,25 +758,51 @@ export function useSandboxWorkspaceTabs(
       });
     }
 
-    // Desktop — capability-gated + consent-gated.
-    if (desktopAdvertised) {
+    // Browser — independent from sandbox capability negotiation. BrowserSessions
+    // are workspace resources and may live in this agent's sandbox, a peer's
+    // sandbox, a connected machine, or an external browser placement.
+    if (browserEnabled) {
+      list.push({
+        id: WORKBENCH_TAB_BROWSER,
+        label: <WorkbenchTabLabel icon={<Globe2Icon />}>Browser</WorkbenchTabLabel>,
+        content: (
+          <Suspense fallback={<WorkbenchSurfaceLoading name="Browser" />}>
+            <LazyBrowserViewer
+              key={sessionId}
+              client={client}
+              workspaceId={workspaceId}
+              sessionId={sessionId}
+              onNotify={onNotify}
+              {...(desktopEnabled ? { createLinkedComputer } : {})}
+              {...(onOpenComputerSession ? { onOpenComputer: onOpenComputerSession } : {})}
+              {...(browserWebSocketFactory ? { webSocketFactory: browserWebSocketFactory } : {})}
+              className="h-full"
+            />
+          </Suspense>
+        ),
+      });
+    }
+
+    // Computer — stable legacy tab id, new workspace resource body. Like Browser,
+    // it is independent from the selected agent's sandbox capability document.
+    if (desktopEnabled) {
       list.push({
         id: WORKBENCH_TAB_DESKTOP,
-        label: "Desktop",
-        badge: watchDesktop ? (
-          <span className="rounded-og-xs bg-og-status-running/20 px-1 text-og-xs text-og-status-running">
-            Live
-          </span>
-        ) : undefined,
+        label: <WorkbenchTabLabel icon={<MonitorIcon />}>Computer</WorkbenchTabLabel>,
         content: (
-          <DesktopViewer
-            capability={capabilities?.DesktopStream ?? null}
-            viewerCapReached={caps.viewerCapReached}
-            watching={watchDesktop}
-            onAcknowledge={() => void acknowledgeAndWatch()}
-            onWarm={rewarmDesktop}
-            className="h-full"
-          />
+          <Suspense fallback={<WorkbenchSurfaceLoading name="Computer" />}>
+            <LazyComputerViewer
+              key={sessionId}
+              client={client}
+              workspaceId={workspaceId}
+              sessionId={sessionId}
+              onNotify={onNotify}
+              requestedComputerSessionId={requestedComputerSessionId}
+              requestedComputerRequestId={requestedComputerRequestId}
+              {...(computerWebSocketFactory ? { webSocketFactory: computerWebSocketFactory } : {})}
+              className="h-full"
+            />
+          </Suspense>
         ),
       });
     }
@@ -662,19 +814,27 @@ export function useSandboxWorkspaceTabs(
     changesEnabled,
     filesEnabled,
     terminalOn,
-    desktopAdvertised,
+    browserEnabled,
+    desktopEnabled,
     captureAvailable,
     dirtyCount,
-    watchDesktop,
     warmTerminal,
     requestedFilePath,
     requestedFileRequestId,
     onOpenFile,
+    onOpenComputerSession,
+    requestedComputerSessionId,
+    requestedComputerRequestId,
+    onNotify,
+    browserWebSocketFactory,
+    computerWebSocketFactory,
+    client,
+    workspaceId,
     liveness,
     sessionId,
     files,
     git,
-    stagedGit,
+    changesComparison,
     terminal,
     xtermTheme,
     capabilities,
@@ -683,13 +843,14 @@ export function useSandboxWorkspaceTabs(
     caps.error,
     caps.viewerCapReached,
     requestWarmIntent,
+    createLinkedComputer,
   ]);
 
   return {
     tabs,
     defaultTab,
     machine: {
-      enabled: anySurfaceEnabled,
+      enabled: machineSurfaceEnabled,
       chip,
       activeMachine,
       loading: machines.loading,
@@ -707,7 +868,7 @@ export type SandboxWorkspaceProps = ClientOverride & {
   primary: ReactNode;
   /**
    * Built-in surfaces this host wants to expose. Omit for Changes, Files,
-   * Terminal, and Desktop. Disabled surfaces remain behaviorally dormant.
+   * Terminal, Browser, and Desktop. Disabled surfaces remain behaviorally dormant.
    */
   surfaces?: readonly SandboxWorkspaceSurface[] | undefined;
   /** Host tabs injected BEFORE the workbench tabs (e.g. a "Run" landing tab). */
@@ -719,9 +880,15 @@ export type SandboxWorkspaceProps = ClientOverride & {
   initialTab?: string | undefined;
   /** Host-routed notifications (no toast dependency in the package). */
   onNotify?: ((notification: WorkspaceNotification) => void) | undefined;
+  /** Alternate Browser frame transport for non-browser runtimes and deterministic tests. */
+  browserWebSocketFactory?: BrowserFrameWebSocketFactory | undefined;
+  /** Alternate Computer frame transport for non-browser runtimes and deterministic tests. */
+  computerWebSocketFactory?: ComputerFrameWebSocketFactory | undefined;
   /** Controlled collapsed state for hosts with their own dock toggle. */
   collapsed?: boolean | undefined;
   onCollapsedChange?: ((collapsed: boolean) => void) | undefined;
+  /** Keep the dock's built-in collapse control with controlled collapsed state. */
+  showCollapseControl?: boolean | undefined;
   /** Host navigation shown only in the phone workspace overlay header. */
   mobileLeadingControl?: ReactNode | undefined;
   autoSaveId?: string | undefined;
@@ -735,7 +902,7 @@ export type SandboxWorkspaceProps = ClientOverride & {
  * The whole session workspace, ready to mount: `<SandboxWorkspace>` assembles the
  * capability-gated tabs, pins the machine-state chip in the dock header, and
  * renders the resizable `<WorkspaceDock>`. Wrap the tree in `<OpenGeniProvider>`
- * (client + workspaceId) and import `@opengeni/react/styles.css`; that is the
+ * (client + workspaceId) and import `@opengeni/react/compiled.css`; that is the
  * entire integration (see `docs/embedding-workbench.md`).
  */
 export function SandboxWorkspace(props: SandboxWorkspaceProps): ReactNode {
@@ -748,8 +915,11 @@ export function SandboxWorkspace(props: SandboxWorkspaceProps): ReactNode {
     trailingTabs,
     initialTab,
     onNotify,
+    browserWebSocketFactory,
+    computerWebSocketFactory,
     collapsed,
     onCollapsedChange,
+    showCollapseControl,
     mobileLeadingControl,
     autoSaveId,
     defaultSize,
@@ -767,7 +937,15 @@ export function SandboxWorkspace(props: SandboxWorkspaceProps): ReactNode {
     path: string;
     requestId: number;
   } | null>(null);
+  const [requestedComputer, setRequestedComputer] = useState<{
+    sessionId: string;
+    computerSessionId: string;
+    requestId: number;
+  } | null>(null);
   const nextFileRequestId = useRef(0);
+  const nextComputerRequestId = useRef(0);
+  const selectedTab = storedSelection?.sessionId === sessionId ? storedSelection.tab : null;
+  const activeTabHint = selectedTab ?? initialTab ?? leadingTabs?.[0]?.id ?? null;
   const openFile = useCallback(
     (path: string) => {
       nextFileRequestId.current += 1;
@@ -776,6 +954,18 @@ export function SandboxWorkspace(props: SandboxWorkspaceProps): ReactNode {
     },
     [sessionId],
   );
+  const openComputer = useCallback(
+    (computerSessionId: string) => {
+      nextComputerRequestId.current += 1;
+      setRequestedComputer({
+        sessionId,
+        computerSessionId,
+        requestId: nextComputerRequestId.current,
+      });
+      setStoredSelection({ sessionId, tab: WORKBENCH_TAB_DESKTOP });
+    },
+    [sessionId],
+  );
 
   const {
     tabs: workbenchTabs,
@@ -788,10 +978,18 @@ export function SandboxWorkspace(props: SandboxWorkspaceProps): ReactNode {
     events,
     ...(surfaces ? { surfaces } : {}),
     ...(initialTab ? { initialTab } : {}),
+    activeTab: activeTabHint,
     ...(onNotify ? { onNotify } : {}),
+    ...(browserWebSocketFactory ? { browserWebSocketFactory } : {}),
+    ...(computerWebSocketFactory ? { computerWebSocketFactory } : {}),
     requestedFilePath: requestedFile?.sessionId === sessionId ? requestedFile.path : null,
     requestedFileRequestId: requestedFile?.sessionId === sessionId ? requestedFile.requestId : null,
     onOpenFile: openFile,
+    onOpenComputerSession: openComputer,
+    requestedComputerSessionId:
+      requestedComputer?.sessionId === sessionId ? requestedComputer.computerSessionId : null,
+    requestedComputerRequestId:
+      requestedComputer?.sessionId === sessionId ? requestedComputer.requestId : null,
   });
 
   // A user's tab click wins forever; before that we follow the source-driven
@@ -800,7 +998,6 @@ export function SandboxWorkspace(props: SandboxWorkspaceProps): ReactNode {
   // (Changes) — whose body is a connecting/loading state until the capture lands,
   // so committing the real default at first-resolve produces no CONTENT switch.
   const tabs: WorkspaceTab[] = [...(leadingTabs ?? []), ...workbenchTabs, ...(trailingTabs ?? [])];
-  const selectedTab = storedSelection?.sessionId === sessionId ? storedSelection.tab : null;
   const preferredTab = selectedTab ?? defaultTab;
   const activeTab =
     preferredTab && tabs.some((tab) => tab.id === preferredTab) ? preferredTab : tabs[0]?.id;
@@ -817,19 +1014,13 @@ export function SandboxWorkspace(props: SandboxWorkspaceProps): ReactNode {
       onActiveTabChange={selectTab}
       {...(machine.enabled
         ? {
-            headerAccessory: (
-              <MachineStateChip
-                chip={machine.chip}
-                activeMachine={machine.activeMachine}
-                error={machine.error}
-                onRetry={() => void machine.refresh()}
-              />
-            ),
+            headerAccessory: <MachineStateChip chip={machine.chip} />,
           }
         : {})}
       {...(mobileLeadingControl !== undefined ? { mobileLeadingControl } : {})}
       {...(collapsed !== undefined ? { collapsed } : {})}
       {...(onCollapsedChange ? { onCollapsedChange } : {})}
+      {...(showCollapseControl !== undefined ? { showCollapseControl } : {})}
       {...(autoSaveId !== undefined ? { autoSaveId } : {})}
       {...(defaultSize !== undefined ? { defaultSize } : {})}
       {...(minSize !== undefined ? { minSize } : {})}
@@ -850,18 +1041,6 @@ function DirtyBadge({ count }: { count: number }) {
   );
 }
 
-/** A machine-kind glyph for the chip popover. */
-function MachineKindIcon({
-  kind,
-  className,
-}: {
-  kind: MachineView["kind"] | undefined;
-  className?: string;
-}) {
-  const Icon = kind === "selfhosted" ? LaptopIcon : CpuIcon;
-  return <Icon className={cn("size-3.5 shrink-0 text-og-fg-subtle", className)} aria-hidden />;
-}
-
 function chipDotClass(state: MachineChip["state"]): string {
   if (state === "live") return "bg-og-status-running";
   if (state === "waking") return "bg-og-status-idle animate-pulse motion-reduce:animate-none";
@@ -869,93 +1048,23 @@ function chipDotClass(state: MachineChip["state"]): string {
 }
 
 /**
- * The dock-header machine chip: the one truthful live/waking/offline indicator,
- * with a popover carrying the machine identity, connection state, the "shown as
- * of <time>" staleness note, the shared-session disclosure, and a retry when the
- * fleet failed to resolve (the old per-surface machine bar + Sandbox info tab,
- * folded into one header affordance — recommendation).
+ * The dock-header machine status: one quiet, truthful live/waking/offline
+ * indicator. It is intentionally not interactive; detailed machine controls do
+ * not belong in a transient popover above the workspace tabs.
  */
-function MachineStateChip({
-  chip,
-  activeMachine,
-  error,
-  onRetry,
-}: {
-  chip: MachineChip;
-  activeMachine: MachineView | null;
-  error: Error | null;
-  onRetry: () => void;
-}) {
-  const triggerRef = useRef<HTMLButtonElement | null>(null);
-  const portalStyle = usePortalTokenStyle(triggerRef);
+function MachineStateChip({ chip }: { chip: MachineChip }) {
   return (
-    <Popover.Root>
-      <Popover.Trigger asChild>
-        <button
-          ref={triggerRef}
-          type="button"
-          aria-label={`Machine: ${chip.label}`}
-          className="inline-flex min-h-7 items-center gap-1.5 rounded-og-sm px-2 py-1 text-og-xs font-medium text-og-fg-muted transition-colors hover:bg-og-surface-2 hover:text-og-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent max-[1023px]:min-h-11 pointer-coarse:min-h-11"
-        >
-          <span
-            className={cn("size-1.5 shrink-0 rounded-full", chipDotClass(chip.state))}
-            aria-hidden
-          />
-          <span className="max-w-[11rem] truncate">{chip.label}</span>
-        </button>
-      </Popover.Trigger>
-      <Popover.Portal forceMount>
-        <Popover.Content
-          forceMount
-          data-machine-state-popover
-          align="end"
-          sideOffset={6}
-          collisionPadding={8}
-          className="og-root z-50 w-64 max-w-[calc(100vw-1rem)] rounded-og-md border border-og-border bg-og-surface-1 p-3 text-og-sm text-og-fg shadow-lg outline-none"
-          style={portalStyle}
-        >
-          <div className="flex min-w-0 items-center gap-1.5">
-            <MachineKindIcon kind={activeMachine?.kind} />
-            <span className="min-w-0 truncate font-medium">{activeMachine?.name ?? "Sandbox"}</span>
-          </div>
-          <div className="mt-2.5 flex items-center justify-between gap-2">
-            <span className="text-og-xs text-og-fg-subtle">Connection</span>
-            {activeMachine ? (
-              <ConnectionStatusPill
-                status={connectionStatusForState(activeMachine.state)}
-                size="sm"
-              />
-            ) : (
-              <span className="text-og-xs text-og-fg-muted">{chip.label}</span>
-            )}
-          </div>
-          {chip.asOf ? (
-            <p className="mt-2.5 text-og-xs leading-4 text-og-fg-subtle">
-              Workspace shown as of {formatAsOf(chip.asOf, Date.now())} — the machine is not live.
-            </p>
-          ) : null}
-          {activeMachine && activeMachine.sharedSessionCount > 1 ? (
-            <div className="mt-2.5">
-              <SharedMachineDisclosure
-                sharedSessionCount={activeMachine.sharedSessionCount}
-                density="full"
-              />
-            </div>
-          ) : null}
-          {error ? (
-            <div className="mt-2.5 space-y-1.5 border-t border-og-border pt-2.5">
-              <p className="text-og-xs leading-4 text-og-danger">
-                Couldn't reach the sandbox for this session.
-              </p>
-              <DockActionButton onClick={onRetry}>
-                <RefreshCwIcon className="size-3" />
-                Retry
-              </DockActionButton>
-            </div>
-          ) : null}
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover.Root>
+    <div
+      role="status"
+      aria-label={`Machine: ${chip.label}`}
+      className="inline-flex min-h-7 items-center gap-1.5 px-2 py-1 text-og-xs font-medium text-og-fg-muted max-[1023px]:min-h-11 pointer-coarse:min-h-11"
+    >
+      <span
+        className={cn("size-1.5 shrink-0 rounded-full", chipDotClass(chip.state))}
+        aria-hidden
+      />
+      <span className="max-w-[11rem] truncate">{chip.label}</span>
+    </div>
   );
 }
 
@@ -965,7 +1074,7 @@ function DockActionButton({ onClick, children }: { onClick: () => void; children
     <button
       type="button"
       onClick={onClick}
-      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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent max-[1023px]:min-h-11 pointer-coarse:min-h-11"
+      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 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent max-[1023px]:min-h-11 pointer-coarse:min-h-11"
     >
       {children}
     </button>
@@ -979,7 +1088,49 @@ function DockActionButton({ onClick, children }: { onClick: () => void; children
  * The dock frame is untouched; this is the M5 seam.
  */
 function ChangesTabBody({
+  comparison,
+  onComparisonChange,
+  ...props
+}: {
+  comparison: SandboxGitComparison;
+  onComparisonChange: (comparison: SandboxGitComparison) => void;
+} & Parameters<typeof ChangesTabContent>[0]) {
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <div className="flex shrink-0 items-center gap-1 border-b border-og-border bg-og-surface-1 px-2 py-1.5">
+        {(
+          [
+            ["branch", "Branch"],
+            ["working", "Uncommitted"],
+            ["staged", "Staged"],
+          ] as const
+        ).map(([value, label]) => (
+          <button
+            key={value}
+            type="button"
+            aria-pressed={comparison === value}
+            onClick={() => onComparisonChange(value)}
+            className={cn(
+              "rounded-og-sm px-2 py-1 text-og-xs font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent max-[1023px]:min-h-11 pointer-coarse:min-h-11",
+              comparison === value
+                ? "bg-og-surface-2 text-og-fg shadow-sm"
+                : "text-og-fg-muted hover:bg-og-surface-2 hover:text-og-fg",
+            )}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+      <div className="min-h-0 flex-1">
+        <ChangesTabContent comparison={comparison} {...props} />
+      </div>
+    </div>
+  );
+}
+
+function ChangesTabContent({
   git,
+  comparison,
   captureAvailable,
   captureRevision,
   capturePending,
@@ -992,6 +1143,7 @@ function ChangesTabBody({
   onOpenFile,
 }: {
   git: UseSandboxGitResult;
+  comparison: SandboxGitComparison;
   captureAvailable: boolean;
   captureRevision: number | null;
   capturePending: boolean;
@@ -1025,7 +1177,7 @@ function ChangesTabBody({
               type="button"
               onClick={() => void git.refresh()}
               disabled={git.loading}
-              className="inline-flex min-h-7 shrink-0 items-center gap-1 rounded-og-sm border border-og-border bg-og-surface-1 px-2 font-medium text-og-fg transition-colors hover:border-og-border-strong focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:min-h-11"
+              className="inline-flex min-h-7 shrink-0 items-center gap-1 rounded-og-sm border border-og-border bg-og-surface-1 px-2 font-medium text-og-fg transition-colors hover:border-og-border-strong focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:min-h-11"
             >
               <RefreshCwIcon
                 className={cn("size-3", git.loading && "animate-spin motion-reduce:animate-none")}
@@ -1085,7 +1237,7 @@ function ChangesTabBody({
     );
   }
 
-  if (!liveWorkspaceExpected && !captureAvailable) {
+  if (!liveWorkspaceExpected && (comparison !== "working" || !captureAvailable)) {
     return (
       <CenteredState
         icon={
@@ -1105,7 +1257,11 @@ function ChangesTabBody({
         <p className="text-og-sm leading-5 text-og-fg-subtle">
           {workspaceWaking
             ? "Connecting to the live working tree…"
-            : "No captured revision is available yet. Wake the sandbox to inspect current changes."}
+            : comparison === "branch"
+              ? "Wake the sandbox to compare this branch with the remote default branch."
+              : comparison === "staged"
+                ? "Wake the sandbox to inspect staged changes."
+                : "No captured revision is available yet. Wake the sandbox to inspect uncommitted changes."}
         </p>
         {!workspaceWaking ? (
           <DockActionButton onClick={onWake}>
@@ -1135,9 +1291,19 @@ function ChangesTabBody({
 
   return (
     <CenteredState icon={<CircleCheckIcon className="size-5" aria-hidden />} tone="success">
-      <p className="text-og-sm font-medium text-og-fg">Working tree is clean</p>
+      <p className="text-og-sm font-medium text-og-fg">
+        {comparison === "branch"
+          ? "No branch changes"
+          : comparison === "staged"
+            ? "No staged changes"
+            : "No uncommitted changes"}
+      </p>
       <p className="text-og-sm leading-5 text-og-fg-subtle">
-        File edits from future turns will appear here.
+        {comparison === "branch"
+          ? "This branch matches the remote default branch."
+          : comparison === "staged"
+            ? "Stage files to review the next commit here."
+            : "Local edits not yet committed will appear here."}
       </p>
     </CenteredState>
   );