@opengeni/react 0.5.0 → 0.6.1

package/src/components/enrollment-consent.tsx

@@ -0,0 +1,245 @@
+import { type ReactNode, useState } from "react";
+import {
+  CircleAlertIcon,
+  LaptopIcon,
+  MonitorIcon,
+  ScreenShareIcon,
+  ShieldAlertIcon,
+  TerminalIcon,
+  UsersIcon,
+} from "lucide-react";
+import { cn } from "../lib/cn";
+
+/** The machine identity surfaced to the approver, from the device-flow start. */
+export type EnrollmentConsentMachine = {
+  /** Human-friendly name (hostname by default). */
+  machineName: string;
+  os: string;
+  arch: string;
+  /** The agent can offer a display (a real screen / Xvfb is available). */
+  canOfferDisplay: boolean;
+  /** The agent requests screen control (computer-use). */
+  requestsScreenControl: boolean;
+};
+
+/** The phase of the approve page (drives the rendered panel). */
+export type EnrollmentConsentPhase = "review" | "approving" | "approved" | "denied" | "error";
+
+export type EnrollmentConsentProps = {
+  /** The short code the user typed / scanned (echoed back for confirmation). */
+  userCode: string;
+  machine: EnrollmentConsentMachine;
+  phase?: EnrollmentConsentPhase | undefined;
+  /** Approve with the chosen screen-control consent. */
+  onApprove?: ((allowScreenControl: boolean) => void) | undefined;
+  onDeny?: (() => void) | undefined;
+  /** Error message when phase === "error". */
+  errorMessage?: string | undefined;
+  className?: string | undefined;
+};
+
+function Capability({ icon, title, body }: { icon: ReactNode; title: string; body: string }) {
+  return (
+    <li className="flex items-start gap-2.5">
+      <span className="mt-0.5 shrink-0 text-og-status-failed">{icon}</span>
+      <span className="min-w-0">
+        <span className="block text-[13px] font-medium text-og-fg">{title}</span>
+        <span className="block text-[12px] text-og-fg-muted">{body}</span>
+      </span>
+    </li>
+  );
+}
+
+/**
+ * The user-facing APPROVE page for the device-flow enrollment: a LOUD,
+ * un-minimised whole-machine consent. Approving grants the agent FULL access to
+ * this machine — exec, files, terminal — and (when toggled) live screen control.
+ * The danger framing is deliberate (§18 hardening: whole-machine = loud consent),
+ * never buried. Renders review / approving / approved / denied / error phases.
+ */
+export function EnrollmentConsent({
+  userCode,
+  machine,
+  phase = "review",
+  onApprove,
+  onDeny,
+  errorMessage,
+  className,
+}: EnrollmentConsentProps) {
+  const [allowScreenControl, setAllowScreenControl] = useState(machine.requestsScreenControl);
+  const busy = phase === "approving";
+
+  if (phase === "approved") {
+    return (
+      <ConsentResult
+        className={className}
+        tone="ok"
+        title="Machine connected"
+        body={`${machine.machineName} is now enrolled in this workspace. You can close this page — it will appear in your Machines dashboard.`}
+      />
+    );
+  }
+  if (phase === "denied") {
+    return (
+      <ConsentResult
+        className={className}
+        tone="muted"
+        title="Enrollment denied"
+        body={`You declined to connect ${machine.machineName}. The agent has no access to this machine. You can re-run the install one-liner to try again.`}
+      />
+    );
+  }
+  if (phase === "error") {
+    return (
+      <ConsentResult
+        className={className}
+        tone="danger"
+        title="Could not complete enrollment"
+        body={errorMessage ?? "The code may have expired. Re-run the install one-liner on the machine for a fresh code."}
+      />
+    );
+  }
+
+  return (
+    <div
+      data-enrollment-consent
+      className={cn(
+        "og-root mx-auto flex w-full max-w-md flex-col gap-5 rounded-og-lg border border-og-status-failed/30 bg-og-surface-1 p-6 shadow-og-md",
+        className,
+      )}
+    >
+      <div className="flex items-start gap-3">
+        <span className="flex size-9 shrink-0 items-center justify-center rounded-full bg-og-status-failed/15 text-og-status-failed">
+          <ShieldAlertIcon className="size-5" aria-hidden />
+        </span>
+        <div className="min-w-0">
+          <h1 className="text-base font-semibold text-og-fg">Give the agent your whole machine?</h1>
+          <p className="mt-1 text-[13px] text-og-fg-muted">
+            Approving lets the OpenGeni agent run on <span className="font-medium text-og-fg">{machine.machineName}</span> with
+            full access. This is your real computer — not a sandbox.
+          </p>
+        </div>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-2 rounded-og-md border border-og-border bg-og-surface-2 px-3 py-2 text-[12px]">
+        <LaptopIcon className="size-4 text-og-fg-subtle" aria-hidden />
+        <span className="font-medium text-og-fg">{machine.machineName}</span>
+        <span className="font-og-mono text-og-fg-subtle">
+          {machine.os}/{machine.arch}
+        </span>
+        <span aria-hidden className="text-og-fg-subtle">·</span>
+        <span className="text-og-fg-subtle">
+          code <span className="font-og-mono font-medium text-og-fg">{userCode}</span>
+        </span>
+      </div>
+
+      <ul className="flex flex-col gap-3">
+        <Capability
+          icon={<TerminalIcon className="size-4" aria-hidden />}
+          title="Read, write & run anything"
+          body="The agent can read and modify any file, run any command, and use your git credentials — as if it were you at the keyboard."
+        />
+        {machine.canOfferDisplay ? (
+          <Capability
+            icon={<MonitorIcon className="size-4" aria-hidden />}
+            title="See your screen"
+            body="The agent can capture this machine's display to watch what it is doing."
+          />
+        ) : null}
+        <Capability
+          icon={<UsersIcon className="size-4" aria-hidden />}
+          title="Shared while connected"
+          body="Any session in this workspace can use this machine while it is online. Disconnect the agent to revoke access instantly."
+        />
+      </ul>
+
+      {machine.canOfferDisplay ? (
+        <label
+          data-screen-control-toggle
+          className="flex cursor-pointer items-start gap-3 rounded-og-md border border-og-border bg-og-bg px-3 py-2.5"
+        >
+          <input
+            type="checkbox"
+            checked={allowScreenControl}
+            disabled={busy}
+            onChange={(e) => setAllowScreenControl(e.target.checked)}
+            className="mt-0.5 size-4 accent-[var(--og-color-accent)]"
+          />
+          <span className="min-w-0">
+            <span className="flex items-center gap-1.5 text-[13px] font-medium text-og-fg">
+              <ScreenShareIcon className="size-3.5 text-og-fg-muted" aria-hidden />
+              Also let the agent control my mouse & keyboard
+            </span>
+            <span className="mt-0.5 block text-[12px] text-og-fg-muted">
+              Optional. Enables computer-use — the agent can move the pointer, type, and click on this machine's desktop. Leave
+              off to let it only watch.
+            </span>
+          </span>
+        </label>
+      ) : (
+        <p className="flex items-start gap-2 rounded-og-md border border-og-border bg-og-bg px-3 py-2 text-[12px] text-og-fg-muted">
+          <CircleAlertIcon className="mt-px size-3.5 shrink-0 text-og-fg-subtle" aria-hidden />
+          This machine has no display, so screen control isn't available — files, terminal, and git only.
+        </p>
+      )}
+
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          data-deny
+          disabled={busy}
+          onClick={() => onDeny?.()}
+          className="flex-1 rounded-og-sm border border-og-border px-3 py-2 text-sm font-medium text-og-fg-muted transition-colors hover:border-og-border-strong hover:text-og-fg disabled:opacity-50"
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          data-approve
+          disabled={busy}
+          onClick={() => onApprove?.(allowScreenControl)}
+          className="flex-1 rounded-og-sm bg-og-status-failed px-3 py-2 text-sm font-semibold text-white transition-colors hover:opacity-90 disabled:opacity-50"
+        >
+          {busy ? "Connecting…" : "Grant full access"}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function ConsentResult({
+  tone,
+  title,
+  body,
+  className,
+}: {
+  tone: "ok" | "muted" | "danger";
+  title: string;
+  body: string;
+  className?: string | undefined;
+}) {
+  const ring =
+    tone === "ok"
+      ? "border-og-status-running/30"
+      : tone === "danger"
+        ? "border-og-status-failed/30"
+        : "border-og-border";
+  const iconClass =
+    tone === "ok" ? "text-og-status-running" : tone === "danger" ? "text-og-status-failed" : "text-og-fg-subtle";
+  return (
+    <div
+      data-enrollment-result={tone}
+      className={cn(
+        "og-root mx-auto flex w-full max-w-md flex-col items-center gap-3 rounded-og-lg border bg-og-surface-1 p-6 text-center shadow-og-md",
+        ring,
+        className,
+      )}
+    >
+      <span className={cn("flex size-10 items-center justify-center rounded-full bg-og-surface-2", iconClass)}>
+        <LaptopIcon className="size-5" aria-hidden />
+      </span>
+      <h1 className="text-base font-semibold text-og-fg">{title}</h1>
+      <p className="max-w-sm text-[13px] text-og-fg-muted">{body}</p>
+    </div>
+  );
+}

package/src/components/enrollment-device-flow.tsx

@@ -0,0 +1,182 @@
+import { type ReactNode } from "react";
+import { CopyIcon, ExternalLinkIcon, LaptopIcon, TerminalIcon } from "lucide-react";
+import { cn } from "../lib/cn";
+import type { MachineState } from "../types/machines";
+import { ConnectionStatusPill } from "./machine-status-pill";
+
+/** The poll state of an in-flight device-flow enrollment. */
+export type DeviceFlowPhase = "pending" | "authorized" | "denied" | "expired" | "disabled";
+
+export type EnrollmentDeviceFlowProps = {
+  /** The short user code the agent printed (shown big for the human to confirm). */
+  userCode: string;
+  /** Where the user approves — the same-origin device page. */
+  verificationUri: string;
+  /** The complete URI (code pre-filled) for a one-click / QR open. */
+  verificationUriComplete?: string | undefined;
+  /** The install one-liner the user ran (echoed for context). Optional. */
+  installCommand?: string | undefined;
+  phase?: DeviceFlowPhase | undefined;
+  /** Seconds remaining before the code expires (drives a quiet countdown). */
+  expiresInSeconds?: number | undefined;
+  onCopyCode?: (() => void) | undefined;
+  onCopyInstall?: (() => void) | undefined;
+  onOpenVerification?: (() => void) | undefined;
+  className?: string | undefined;
+};
+
+const PHASE_TO_STATE: Record<DeviceFlowPhase, MachineState> = {
+  pending: "enrolling",
+  authorized: "online",
+  denied: "offline",
+  expired: "offline",
+  disabled: "offline",
+};
+
+function PhaseLabel({ phase }: { phase: DeviceFlowPhase }): ReactNode {
+  const text: Record<DeviceFlowPhase, string> = {
+    pending: "Waiting for approval",
+    authorized: "Connected",
+    denied: "Denied",
+    expired: "Code expired",
+    disabled: "Enrollment disabled",
+  };
+  return <span>{text[phase]}</span>;
+}
+
+/**
+ * The IN-SESSION device-flow panel: the agent (after the install one-liner) prints
+ * a short `userCode` + a `verificationUri`; this surfaces them so the user can open
+ * the approve page and confirm the code. Polls in the caller; this renders the
+ * pending → authorized/denied/expired progression with a connection pill. This is
+ * the FIRST step of the IA flow (device-flow → Machines list → attach/swap).
+ */
+export function EnrollmentDeviceFlow({
+  userCode,
+  verificationUri,
+  verificationUriComplete,
+  installCommand,
+  phase = "pending",
+  expiresInSeconds,
+  onCopyCode,
+  onCopyInstall,
+  onOpenVerification,
+  className,
+}: EnrollmentDeviceFlowProps) {
+  const href = verificationUriComplete ?? verificationUri;
+  // Before the one-liner runs the caller passes a placeholder (dashes) for the
+  // code — surface that as an explicit waiting state rather than dashes that look
+  // like a real code to type.
+  const codeIsPlaceholder = !/[A-Za-z0-9]/.test(userCode);
+  const awaitingCode = phase === "pending" && codeIsPlaceholder;
+  return (
+    <div
+      data-enrollment-device-flow
+      className={cn(
+        "og-root flex w-full max-w-md flex-col gap-4 rounded-og-lg border border-og-border bg-og-surface-1 p-5 shadow-og-sm",
+        className,
+      )}
+    >
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <span className="flex size-7 items-center justify-center rounded-full bg-og-surface-2 text-og-fg-muted">
+            <LaptopIcon className="size-4" aria-hidden />
+          </span>
+          <h2 className="text-sm font-semibold text-og-fg">Connect a machine</h2>
+        </div>
+        <ConnectionStatusPill
+          status={
+            PHASE_TO_STATE[phase] === "online"
+              ? "online"
+              : PHASE_TO_STATE[phase] === "offline"
+                ? "offline"
+                : "reconnecting"
+          }
+          label={(<PhaseLabel phase={phase} />) as unknown as string}
+          size="sm"
+        />
+      </div>
+
+      {installCommand ? (
+        <div className="flex flex-col gap-1.5">
+          <span className="text-[11px] font-medium uppercase tracking-wide text-og-fg-subtle">1 · Run on the machine</span>
+          <div className="flex items-center justify-between gap-2 overflow-hidden rounded-og-md border border-og-border bg-og-bg px-2.5 py-1.5">
+            <code className="flex min-w-0 items-center gap-2 overflow-x-auto font-og-mono text-[12px] text-og-fg">
+              <TerminalIcon className="size-3.5 shrink-0 text-og-fg-subtle" aria-hidden />
+              {installCommand}
+            </code>
+            <button
+              type="button"
+              data-copy-install
+              onClick={onCopyInstall}
+              title="Copy command"
+              className="shrink-0 rounded-og-sm p-1.5 text-og-fg-subtle transition-colors hover:bg-og-surface-2 hover:text-og-fg"
+            >
+              <CopyIcon className="size-4" aria-hidden />
+            </button>
+          </div>
+        </div>
+      ) : null}
+
+      <div className="flex flex-col gap-1.5">
+        <span className="text-[11px] font-medium uppercase tracking-wide text-og-fg-subtle">
+          {installCommand ? "2 · Approve the machine" : "Approve the machine"}
+        </span>
+        <div className="flex items-center justify-between gap-3 rounded-og-md border border-og-border bg-og-bg px-3 py-2.5">
+          {awaitingCode ? (
+            <span data-user-code className="font-og-mono text-[13px] text-og-fg-subtle">
+              Run the command above — your code appears here
+            </span>
+          ) : (
+            <span
+              data-user-code
+              className="select-all font-og-mono text-2xl font-semibold tracking-[0.25em] text-og-fg"
+            >
+              {userCode}
+            </span>
+          )}
+          <button
+            type="button"
+            data-copy-code
+            onClick={onCopyCode}
+            disabled={awaitingCode}
+            title="Copy code"
+            className="shrink-0 rounded-og-sm p-1.5 text-og-fg-subtle transition-colors hover:bg-og-surface-2 hover:text-og-fg disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-og-fg-subtle"
+          >
+            <CopyIcon className="size-4" aria-hidden />
+          </button>
+        </div>
+      </div>
+
+      <a
+        href={href}
+        data-open-verification
+        target="_blank"
+        rel="noreferrer"
+        onClick={onOpenVerification}
+        className="inline-flex items-center justify-center gap-1.5 rounded-og-sm bg-og-accent px-3 py-2 text-sm font-medium text-og-accent-fg transition-colors hover:bg-og-accent-strong"
+      >
+        Open approval page
+        <ExternalLinkIcon className="size-3.5" aria-hidden />
+      </a>
+
+      <p className="text-center text-[11px] text-og-fg-subtle">
+        {awaitingCode ? (
+          <>
+            The one-liner prints a short code. Open{" "}
+            <span className="font-og-mono text-og-fg-muted">{verificationUri}</span> and confirm the code shown there
+            matches.
+          </>
+        ) : (
+          <>
+            Confirm code <span className="font-og-mono text-og-fg-muted">{userCode}</span> — the one printed by the
+            one-liner — at <span className="font-og-mono text-og-fg-muted">{verificationUri}</span>.
+            {typeof expiresInSeconds === "number" ? (
+              <> Expires in {Math.max(0, Math.round(expiresInSeconds / 60))} min.</>
+            ) : null}
+          </>
+        )}
+      </p>
+    </div>
+  );
+}

package/src/components/machine-card.tsx

@@ -0,0 +1,131 @@
+import {
+  CpuIcon,
+  LaptopIcon,
+  MonitorIcon,
+  MonitorOffIcon,
+  ServerIcon,
+  UsersIcon,
+} from "lucide-react";
+import { cn } from "../lib/cn";
+import { formatRelativeTime } from "../lib/format";
+import type { MachineView } from "../types/machines";
+import { MachineMetrics } from "./machine-metrics";
+import { MachineStatusPill } from "./machine-status-pill";
+
+export type MachineCardProps = {
+  machine: MachineView;
+  /** Attach/swap the session's active sandbox to this machine. */
+  onAttach?: ((machine: MachineView) => void) | undefined;
+  /** Whether an attach/swap is currently in flight (disables the affordance). */
+  attaching?: boolean | 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.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).
+ */
+export function MachineCard({ machine, onAttach, attaching, className }: MachineCardProps) {
+  const offline = machine.state === "offline";
+  const attachable = !machine.active && !offline && Boolean(onAttach);
+  const shared = machine.sharedSessionCount > 1;
+
+  return (
+    <div
+      data-machine-card={machine.sandboxId}
+      data-active={machine.active ? "true" : "false"}
+      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",
+        machine.active && "border-og-accent/40",
+        className,
+      )}
+    >
+      {machine.active ? (
+        <span aria-hidden className="absolute inset-y-0 left-0 w-0.5 bg-og-accent" />
+      ) : null}
+
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex min-w-0 items-start gap-2.5">
+          <span className="mt-0.5 shrink-0">
+            <KindIcon machine={machine} />
+          </span>
+          <div className="min-w-0">
+            <div className="flex items-center gap-2">
+              <span className="truncate text-sm font-medium text-og-fg">{machine.name}</span>
+              {machine.active ? (
+                <span
+                  data-active-marker
+                  className="shrink-0 rounded-full border border-og-accent/30 bg-og-accent-soft px-1.5 py-px text-[10px] font-medium text-og-accent"
+                >
+                  Active
+                </span>
+              ) : null}
+            </div>
+            <div className="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px] text-og-fg-subtle">
+              <span className="capitalize">{machine.isSessionGroup ? "session sandbox" : machine.kind}</span>
+              <span aria-hidden>·</span>
+              <span className="font-og-mono">
+                {machine.os}/{machine.arch}
+              </span>
+              <span aria-hidden>·</span>
+              <span className="inline-flex items-center gap-1">
+                {machine.hasDisplay ? (
+                  <MonitorIcon className="size-3" aria-hidden />
+                ) : (
+                  <MonitorOffIcon className="size-3" aria-hidden />
+                )}
+                {machine.hasDisplay ? "display" : "headless"}
+              </span>
+            </div>
+          </div>
+        </div>
+        <MachineStatusPill state={machine.state} sharedSessionCount={machine.sharedSessionCount} size="sm" className="shrink-0" />
+      </div>
+
+      {shared ? (
+        <p
+          data-shared-disclosure
+          className="flex items-center gap-1.5 rounded-og-md border border-og-accent/25 bg-og-accent-soft px-2.5 py-1.5 text-[11px] text-og-fg-muted"
+        >
+          <UsersIcon className="size-3.5 shrink-0 text-og-accent" aria-hidden />
+          Shared — {machine.sharedSessionCount} sessions are on this machine.
+        </p>
+      ) : null}
+
+      <MachineMetrics metrics={machine.metrics} />
+
+      <div className="mt-1 flex items-center justify-between gap-3 text-[11px] text-og-fg-subtle">
+        <span>
+          {machine.lastSeenAt ? <>Last seen {formatRelativeTime(machine.lastSeenAt)}</> : "Never connected"}
+        </span>
+        {machine.active ? (
+          <span className="text-og-accent">Routing here</span>
+        ) : attachable ? (
+          <button
+            type="button"
+            data-attach
+            disabled={attaching}
+            onClick={() => onAttach?.(machine)}
+            className={cn(
+              "rounded-og-sm border border-og-border px-2.5 py-1 text-[11px] font-medium text-og-fg-muted transition-colors",
+              "hover:border-og-border-strong hover:text-og-fg disabled:cursor-not-allowed disabled:opacity-50",
+            )}
+          >
+            {attaching ? "Switching…" : "Attach"}
+          </button>
+        ) : (
+          <span className="text-og-fg-subtle/70">{offline ? "Unavailable" : "—"}</span>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,84 @@
+import { LaptopIcon, CpuIcon, UsersIcon } from "lucide-react";
+import { cn } from "../lib/cn";
+import type { MachineKind, MachineState } from "../types/machines";
+import { ConnectionStatusPill, MACHINE_STATE_BADGE_META } from "./machine-status-pill";
+import { connectionStatusForState } from "../types/machines";
+
+export type MachineDockBarProps = {
+  /** The active machine's display name. */
+  name: string;
+  kind: MachineKind;
+  state: MachineState;
+  /** Live sessions sharing this whole-machine lease (>1 ⇒ shared disclosure). */
+  sharedSessionCount?: number | undefined;
+  className?: string | undefined;
+};
+
+/**
+ * A slim bar that surfaces WHICH machine the dock surfaces (Files/Terminal/
+ * Desktop) are bound to + its connection status. Mounted above the dock tabs so
+ * the user always knows whether they are looking at the Modal box or their own
+ * machine, and whether it is online / reconnecting / offline. The surfaces below
+ * 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) {
+  const Icon = kind === "selfhosted" ? LaptopIcon : CpuIcon;
+  const stateBadge = MACHINE_STATE_BADGE_META[state];
+  const shared = (sharedSessionCount ?? 0) > 1;
+  return (
+    <div
+      data-machine-dock-bar
+      className={cn(
+        "flex shrink-0 items-center justify-between gap-2 border-b border-og-border bg-og-surface-1 px-2.5 py-1",
+        className,
+      )}
+    >
+      <div className="flex min-w-0 items-center gap-1.5">
+        <Icon className="size-3.5 shrink-0 text-og-fg-subtle" aria-hidden />
+        <span className="truncate text-[11px] font-medium text-og-fg">{name}</span>
+        {stateBadge ? (
+          <span
+            data-state-badge={state}
+            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" />
+    </div>
+  );
+}
+
+export type SharedMachineDisclosureProps = {
+  sharedSessionCount: number;
+  /** Compact (inline strip) vs full (a notice block). */
+  density?: "compact" | "full" | undefined;
+  className?: string | undefined;
+};
+
+/**
+ * The "shared — another session is on this machine" disclosure. Surfaced in the
+ * 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) {
+  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]",
+        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.
+      </span>
+    </div>
+  );
+}