@opengeni/react 0.13.0 → 0.20.0

package/dist/chunk-6BXBGJ3B.js

@@ -0,0 +1,1956 @@
+import {
+  cn
+} from "./chunk-TK7G6XLT.js";
+import {
+  OpenGeniContext,
+  formatBytes,
+  formatRelativeTime,
+  useMutationRunner,
+  useOpenGeni,
+  usePolledValue
+} from "./chunk-HHFA4AFX.js";
+
+// src/types/machines.ts
+function connectionStatusForState(state) {
+  switch (state) {
+    case "online":
+    case "consent_required":
+    case "display_unavailable":
+      return "online";
+    case "reconnecting":
+    case "enrolling":
+      return "reconnecting";
+    case "offline":
+      return "offline";
+    default: {
+      const _never = state;
+      return _never;
+    }
+  }
+}
+
+// src/components/machine-status-pill.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var CONNECTION_STATUS_META = {
+  online: {
+    label: "Online",
+    dotClassName: "bg-og-status-running",
+    badgeClassName: "text-og-status-running border-og-status-running/30 bg-og-status-running/10",
+    pulse: false
+  },
+  reconnecting: {
+    label: "Reconnecting",
+    dotClassName: "bg-og-status-waiting",
+    badgeClassName: "text-og-status-waiting border-og-status-waiting/35 bg-og-status-waiting/10",
+    pulse: true
+  },
+  offline: {
+    label: "Offline",
+    dotClassName: "bg-og-status-failed",
+    badgeClassName: "text-og-fg-subtle border-og-border bg-og-status-failed/10",
+    pulse: false
+  }
+};
+var MACHINE_STATE_BADGE_META = {
+  consent_required: {
+    label: "Consent required",
+    badgeClassName: "text-og-status-waiting border-og-status-waiting/35 bg-og-status-waiting/10"
+  },
+  display_unavailable: {
+    label: "No display",
+    badgeClassName: "text-og-fg-muted border-og-border bg-og-surface-2"
+  },
+  enrolling: {
+    label: "Enrolling",
+    badgeClassName: "text-og-accent border-og-accent/30 bg-og-accent-soft"
+  }
+};
+function ConnectionStatusPill({
+  status,
+  label,
+  size = "md",
+  className
+}) {
+  const meta = CONNECTION_STATUS_META[status];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-connection-status": status,
+      className: cn(
+        "og-root inline-flex shrink-0 items-center rounded-full border font-medium",
+        size === "sm" ? "gap-1 px-1.5 py-px text-og-xs" : "gap-1.5 px-2 py-0.5 text-og-sm",
+        meta.badgeClassName,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(ConnectionDot, { status, className: size === "sm" ? "size-1" : "size-1.5" }),
+        label ?? meta.label
+      ]
+    }
+  );
+}
+function ConnectionDot({ status, className }) {
+  const meta = CONNECTION_STATUS_META[status];
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "relative inline-flex size-1.5 shrink-0 rounded-full",
+        meta.dotClassName,
+        className
+      ),
+      children: meta.pulse ? /* @__PURE__ */ jsx("span", { className: cn("absolute inset-0 animate-og-pulse rounded-full", meta.dotClassName) }) : null
+    }
+  );
+}
+function MachineStatusPill({
+  state,
+  sharedSessionCount,
+  size = "md",
+  className
+}) {
+  const stateBadge = MACHINE_STATE_BADGE_META[state];
+  const shared = (sharedSessionCount ?? 0) > 1;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn("og-root inline-flex flex-wrap items-center gap-1", className),
+      "data-machine-state": state,
+      children: [
+        /* @__PURE__ */ jsx(ConnectionStatusPill, { status: connectionStatusForState(state), size }),
+        stateBadge ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-state-badge": state,
+            className: cn(
+              "inline-flex shrink-0 items-center rounded-full border font-medium",
+              size === "sm" ? "px-1.5 py-px text-og-xs" : "px-2 py-0.5 text-og-sm",
+              stateBadge.badgeClassName
+            ),
+            children: stateBadge.label
+          }
+        ) : null,
+        shared ? /* @__PURE__ */ jsxs(
+          "span",
+          {
+            "data-shared-chip": true,
+            className: cn(
+              "inline-flex shrink-0 items-center gap-1 rounded-full border font-medium",
+              "text-og-accent border-og-accent/30 bg-og-accent-soft",
+              size === "sm" ? "px-1.5 py-px text-og-xs" : "px-2 py-0.5 text-og-sm"
+            ),
+            title: `${sharedSessionCount} sessions are on this machine`,
+            children: [
+              "Shared \xB7 ",
+              sharedSessionCount
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/components/machine-metrics.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function pct(value) {
+  if (!Number.isFinite(value)) return 0;
+  return Math.max(0, Math.min(100, value));
+}
+function Meter({
+  label,
+  value,
+  fillPct,
+  tone
+}) {
+  const fillClass = tone === "hot" ? "bg-og-status-failed" : tone === "warn" ? "bg-og-status-running" : "bg-og-status-idle";
+  return /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-col gap-1", "data-metric": label.toLowerCase(), children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline justify-between gap-2", children: [
+      /* @__PURE__ */ jsx2("span", { className: "text-[10px] font-medium uppercase tracking-wide text-og-fg-subtle", children: label }),
+      /* @__PURE__ */ jsx2("span", { className: "font-og-mono text-[11px] tabular-nums text-og-fg-muted", children: value })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "h-1 w-full overflow-hidden rounded-full bg-og-surface-2", children: /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: cn("h-full rounded-full transition-[width] duration-500", fillClass),
+        style: { width: `${pct(fillPct)}%` }
+      }
+    ) })
+  ] });
+}
+function toneFor(p) {
+  if (p >= 90) return "hot";
+  if (p >= 70) return "warn";
+  return "ok";
+}
+function StatTriple({
+  load1,
+  load5,
+  load15,
+  runQueue
+}) {
+  const stats = [
+    { label: "1m", value: load1 },
+    { label: "5m", value: load5 },
+    { label: "15m", value: load15 }
+  ];
+  return /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-3", "data-metric": "load", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-col gap-1", children: [
+      /* @__PURE__ */ jsx2("span", { className: "text-[10px] font-medium uppercase tracking-wide text-og-fg-subtle", children: "Load" }),
+      /* @__PURE__ */ jsx2("div", { className: "flex items-baseline gap-3", children: stats.map((s) => /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline gap-1", children: [
+        /* @__PURE__ */ jsx2("span", { className: "text-[10px] font-medium uppercase tracking-wide text-og-fg-subtle", children: s.label }),
+        /* @__PURE__ */ jsx2("span", { className: "font-og-mono text-[12px] tabular-nums text-og-fg", children: s.value.toFixed(2) })
+      ] }, s.label)) })
+    ] }),
+    runQueue > 0 ? /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: "flex shrink-0 items-baseline gap-1.5 rounded-og-sm bg-og-surface-2 px-2 py-1 text-[11px] text-og-fg-subtle",
+        "data-metric": "runqueue",
+        children: [
+          /* @__PURE__ */ jsx2("span", { className: "font-medium uppercase tracking-wide", children: "Queue" }),
+          /* @__PURE__ */ jsx2("span", { className: "font-og-mono tabular-nums text-og-fg-muted", children: runQueue })
+        ]
+      }
+    ) : null
+  ] });
+}
+function MachineMetrics({ metrics, density = "compact", className }) {
+  if (!metrics) {
+    return /* @__PURE__ */ jsx2("div", { className: cn("text-[11px] text-og-fg-subtle", className), "data-metrics-empty": true, children: "No metrics yet" });
+  }
+  const memPct2 = metrics.memTotalBytes > 0 ? metrics.memUsedBytes / metrics.memTotalBytes * 100 : 0;
+  const diskPct2 = metrics.diskTotalBytes > 0 ? metrics.diskUsedBytes / metrics.diskTotalBytes * 100 : 0;
+  const hasGpu = metrics.gpuUtilPct !== null;
+  const gpuMemLabel = metrics.gpuMemBytes !== null ? formatBytes(metrics.gpuMemBytes) : null;
+  const ratioGridClass = density === "full" ? "grid-cols-1" : "grid-cols-1 sm:grid-cols-2";
+  return /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-col gap-3", className), "data-machine-metrics": true, children: [
+    /* @__PURE__ */ jsxs2("div", { className: cn("grid gap-x-4 gap-y-2.5", ratioGridClass), children: [
+      /* @__PURE__ */ jsx2(
+        Meter,
+        {
+          label: "Memory",
+          value: `${formatBytes(metrics.memUsedBytes)} / ${formatBytes(metrics.memTotalBytes)}`,
+          fillPct: memPct2,
+          tone: toneFor(memPct2)
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        Meter,
+        {
+          label: "Disk",
+          value: `${formatBytes(metrics.diskUsedBytes)} / ${formatBytes(metrics.diskTotalBytes)}`,
+          fillPct: diskPct2,
+          tone: toneFor(diskPct2)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2.5", children: [
+      /* @__PURE__ */ jsx2(
+        Meter,
+        {
+          label: "CPU",
+          value: `${metrics.cpuPct.toFixed(0)}%`,
+          fillPct: metrics.cpuPct,
+          tone: toneFor(metrics.cpuPct)
+        }
+      ),
+      hasGpu ? /* @__PURE__ */ jsx2(
+        Meter,
+        {
+          label: "GPU",
+          value: gpuMemLabel ? `${metrics.gpuUtilPct.toFixed(0)}% \xB7 ${gpuMemLabel}` : `${metrics.gpuUtilPct.toFixed(0)}%`,
+          fillPct: metrics.gpuUtilPct,
+          tone: toneFor(metrics.gpuUtilPct)
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsx2(
+      StatTriple,
+      {
+        load1: metrics.load1,
+        load5: metrics.load5,
+        load15: metrics.load15,
+        runQueue: metrics.runQueue
+      }
+    )
+  ] });
+}
+
+// src/components/machine-card.tsx
+import {
+  ArrowRightIcon,
+  CpuIcon,
+  LaptopIcon,
+  MonitorIcon,
+  MonitorOffIcon,
+  ServerIcon,
+  UsersIcon
+} from "lucide-react";
+
+// src/components/machines/health.ts
+var PRESSURE = {
+  cpu: { warn: 90, crit: 98 },
+  mem: { warn: 85, crit: 95 },
+  disk: { warn: 90, crit: 96 }
+};
+var STALE_AFTER_MS = 45e3;
+function pct2(used, total) {
+  if (!Number.isFinite(used) || !Number.isFinite(total) || total <= 0) return 0;
+  return used / total * 100;
+}
+function deriveHealth(state, metrics, now = Date.now()) {
+  if (state === "offline") {
+    return { level: "offline", label: "Offline", reason: "Not reachable", stale: true };
+  }
+  if (state === "enrolling") {
+    return { level: "unknown", label: "Enrolling", reason: "Completing enrollment", stale: false };
+  }
+  const stale = metrics ? now - new Date(metrics.sampledAt).getTime() > STALE_AFTER_MS : true;
+  if (state === "reconnecting") {
+    return { level: "degraded", label: "Reconnecting", reason: "Re-establishing link", stale };
+  }
+  if (!metrics) {
+    return { level: "unknown", label: "Online", reason: "Awaiting first sample", stale };
+  }
+  if (stale) {
+    return { level: "degraded", label: "Telemetry stale", reason: "No recent sample", stale: true };
+  }
+  const memPct2 = pct2(metrics.memUsedBytes, metrics.memTotalBytes);
+  const diskPct2 = pct2(metrics.diskUsedBytes, metrics.diskTotalBytes);
+  const cpu = metrics.cpuPct;
+  const pressures = [
+    resolve("Disk", diskPct2, PRESSURE.disk),
+    resolve("Memory", memPct2, PRESSURE.mem),
+    resolve("CPU", cpu, PRESSURE.cpu)
+  ];
+  const worst = pressures.reduce((a, b) => b.sev > a.sev ? b : a);
+  if (worst.sev === 2) return { level: "critical", label: "Critical", reason: worst.reason, stale };
+  if (worst.sev === 1)
+    return { level: "degraded", label: "Under load", reason: worst.reason, stale };
+  return { level: "healthy", label: "Healthy", reason: "All systems nominal", stale };
+}
+function resolve(name, value, t) {
+  const rounded = Math.round(value);
+  if (value >= t.crit) return { level: "critical", reason: `${name} ${rounded}%`, sev: 2 };
+  if (value >= t.warn) return { level: "degraded", reason: `${name} ${rounded}%`, sev: 1 };
+  return { level: "healthy", reason: `${name} ${rounded}%`, sev: 0 };
+}
+var HEALTH_TOKEN = {
+  healthy: {
+    text: "text-og-status-idle",
+    dot: "bg-og-status-idle",
+    soft: "bg-og-status-idle/10 border-og-status-idle/25"
+  },
+  degraded: {
+    text: "text-og-status-running",
+    dot: "bg-og-status-running",
+    soft: "bg-og-status-running/10 border-og-status-running/25"
+  },
+  critical: {
+    text: "text-og-status-failed",
+    dot: "bg-og-status-failed",
+    soft: "bg-og-status-failed/10 border-og-status-failed/30"
+  },
+  offline: {
+    text: "text-og-fg-subtle",
+    dot: "bg-og-fg-subtle",
+    soft: "bg-og-surface-2 border-og-border"
+  },
+  unknown: {
+    text: "text-og-fg-muted",
+    dot: "bg-og-fg-muted",
+    soft: "bg-og-surface-2 border-og-border"
+  }
+};
+function healthPulses(level) {
+  return level === "degraded" || level === "critical";
+}
+
+// src/components/machine-health-pill.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function MachineHealthPill({
+  state,
+  metrics,
+  now,
+  size = "sm",
+  className
+}) {
+  const health = deriveHealth(state, metrics, now ?? Date.now());
+  const tone = HEALTH_TOKEN[health.level];
+  const badge = MACHINE_STATE_BADGE_META[state];
+  const pad = size === "md" ? "px-2.5 py-1 text-og-sm" : "px-2 py-0.5 text-og-xs";
+  return /* @__PURE__ */ jsxs3("div", { className: cn("flex shrink-0 items-center gap-1.5", className), children: [
+    badge ? /* @__PURE__ */ jsx3(
+      "span",
+      {
+        className: cn(
+          "rounded-full border px-2 py-0.5 text-og-xs font-medium",
+          badge.badgeClassName
+        ),
+        children: badge.label
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs3(
+      "span",
+      {
+        className: cn(
+          "inline-flex items-center gap-1.5 rounded-full border font-medium",
+          pad,
+          tone.soft,
+          tone.text
+        ),
+        "data-health": health.level,
+        title: health.reason,
+        children: [
+          /* @__PURE__ */ jsxs3("span", { className: "relative flex size-2", children: [
+            healthPulses(health.level) && /* @__PURE__ */ jsx3(
+              "span",
+              {
+                className: cn(
+                  "absolute inline-flex size-full animate-og-pulse rounded-full opacity-60",
+                  tone.dot
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx3("span", { className: cn("relative inline-flex size-2 rounded-full", tone.dot) })
+          ] }),
+          health.label
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/machines/metric-sparkline.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var VW = 120;
+function MetricSparkline({
+  points,
+  color = "var(--og-color-accent)",
+  yMax = "auto",
+  height = 28,
+  className
+}) {
+  const valued = points.filter(
+    (p) => p.v != null && Number.isFinite(p.v)
+  );
+  if (valued.length < 2) {
+    return /* @__PURE__ */ jsx4("div", { className, style: { height }, "aria-hidden": true });
+  }
+  const vh = height;
+  const top = yMax === "auto" ? Math.max(1, ...valued.map((p) => p.v)) * 1.1 : yMax;
+  const tMin = valued[0].t;
+  const tSpan = Math.max(1, valued[valued.length - 1].t - tMin);
+  const xy = valued.map((p) => ({
+    x: (p.t - tMin) / tSpan * VW,
+    y: vh - Math.min(top, Math.max(0, p.v)) / Math.max(1e-6, top) * (vh - 2) - 1
+  }));
+  let d = `M${xy[0].x},${xy[0].y}`;
+  for (let i = 0; i < xy.length - 1; i++) {
+    const p0 = xy[i - 1] ?? xy[i];
+    const p1 = xy[i];
+    const p2 = xy[i + 1];
+    const p3 = xy[i + 2] ?? p2;
+    d += `C${p1.x + (p2.x - p0.x) / 6},${p1.y + (p2.y - p0.y) / 6} ${p2.x - (p3.x - p1.x) / 6},${p2.y - (p3.y - p1.y) / 6} ${p2.x},${p2.y}`;
+  }
+  const last = xy[xy.length - 1];
+  const gid = `spark-${Math.round(top)}-${color.length}`;
+  return /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      viewBox: `0 0 ${VW} ${vh}`,
+      preserveAspectRatio: "none",
+      className,
+      style: { height, width: "100%" },
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx4("defs", { children: /* @__PURE__ */ jsxs4("linearGradient", { id: gid, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsx4("stop", { offset: "0%", stopColor: color, stopOpacity: "0.22" }),
+          /* @__PURE__ */ jsx4("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
+        ] }) }),
+        /* @__PURE__ */ jsx4("path", { d: `${d} L${last.x},${vh} L${xy[0].x},${vh} Z`, fill: `url(#${gid})` }),
+        /* @__PURE__ */ jsx4(
+          "path",
+          {
+            d,
+            fill: "none",
+            stroke: color,
+            strokeWidth: 1.25,
+            strokeLinejoin: "round",
+            strokeLinecap: "round",
+            vectorEffect: "non-scaling-stroke"
+          }
+        ),
+        /* @__PURE__ */ jsx4("circle", { cx: last.x, cy: last.y, r: 1.6, fill: color, vectorEffect: "non-scaling-stroke" })
+      ]
+    }
+  );
+}
+
+// src/components/machine-card.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function KindIcon({ machine }) {
+  if (machine.isSessionGroup)
+    return /* @__PURE__ */ jsx5(ServerIcon, { className: "size-4 text-og-fg-subtle", "aria-hidden": true });
+  if (machine.kind === "modal") return /* @__PURE__ */ jsx5(CpuIcon, { className: "size-4 text-og-fg-subtle", "aria-hidden": true });
+  return /* @__PURE__ */ jsx5(LaptopIcon, { className: "size-4 text-og-fg-subtle", "aria-hidden": true });
+}
+function MachineCard({
+  machine,
+  onAttach,
+  attaching,
+  series,
+  onOpenDetail,
+  now,
+  className
+}) {
+  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 /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      "data-machine-card": machine.sandboxId,
+      "data-active": machine.active ? "true" : "false",
+      role: openable ? "button" : void 0,
+      tabIndex: openable ? 0 : void 0,
+      onClick: openable ? () => onOpenDetail?.(machine) : void 0,
+      onKeyDown: openable ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onOpenDetail?.(machine);
+        }
+      } : void 0,
+      className: cn(
+        "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
+      ),
+      children: [
+        machine.active ? /* @__PURE__ */ jsx5("span", { "aria-hidden": true, className: "absolute inset-y-0 left-0 w-0.5 bg-og-accent" }) : null,
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 items-start gap-2.5", children: [
+            /* @__PURE__ */ jsx5("span", { className: "mt-0.5 shrink-0", children: /* @__PURE__ */ jsx5(KindIcon, { machine }) }),
+            /* @__PURE__ */ jsxs5("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx5("span", { className: "truncate text-og-base font-medium text-og-fg", children: machine.name }),
+                machine.active ? /* @__PURE__ */ jsx5(
+                  "span",
+                  {
+                    "data-active-marker": true,
+                    className: "shrink-0 rounded-full border border-og-accent/30 bg-og-accent-soft px-1.5 py-px text-og-xs font-medium text-og-accent",
+                    children: "Active"
+                  }
+                ) : null
+              ] }),
+              /* @__PURE__ */ jsxs5("div", { className: "mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-og-xs text-og-fg-subtle", children: [
+                /* @__PURE__ */ jsx5("span", { className: "capitalize", children: machine.isSessionGroup ? "session sandbox" : machine.kind }),
+                /* @__PURE__ */ jsx5("span", { "aria-hidden": true, children: "\xB7" }),
+                /* @__PURE__ */ jsxs5("span", { className: "font-og-mono", children: [
+                  machine.os,
+                  "/",
+                  machine.arch
+                ] }),
+                /* @__PURE__ */ jsx5("span", { "aria-hidden": true, children: "\xB7" }),
+                /* @__PURE__ */ jsxs5("span", { className: "inline-flex items-center gap-1", children: [
+                  machine.hasDisplay ? /* @__PURE__ */ jsx5(MonitorIcon, { className: "size-3", "aria-hidden": true }) : /* @__PURE__ */ jsx5(MonitorOffIcon, { className: "size-3", "aria-hidden": true }),
+                  machine.hasDisplay ? "display" : "headless"
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx5(
+            MachineHealthPill,
+            {
+              state: machine.state,
+              metrics: machine.metrics,
+              now: clockNow,
+              size: "sm",
+              className: "shrink-0"
+            }
+          )
+        ] }),
+        shared ? /* @__PURE__ */ jsxs5(
+          "p",
+          {
+            "data-shared-disclosure": true,
+            className: "flex items-center gap-1.5 rounded-og-md border border-og-accent/25 bg-og-accent-soft px-2.5 py-1.5 text-og-xs text-og-fg-muted",
+            children: [
+              /* @__PURE__ */ jsx5(UsersIcon, { className: "size-3.5 shrink-0 text-og-accent", "aria-hidden": true }),
+              "Shared \u2014 ",
+              machine.sharedSessionCount,
+              " sessions are on this machine."
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsx5(MachineMetrics, { metrics: machine.metrics }),
+        cpuPts.length > 1 ? /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-1 rounded-og-md bg-og-surface-2/40 p-2.5", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between text-[10px] font-medium uppercase tracking-wide text-og-fg-subtle", children: [
+            /* @__PURE__ */ jsx5("span", { children: "CPU \xB7 last 15m" }),
+            openable ? /* @__PURE__ */ jsxs5("span", { className: "flex items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100", children: [
+              "Telemetry ",
+              /* @__PURE__ */ jsx5(ArrowRightIcon, { className: "size-2.5", "aria-hidden": true })
+            ] }) : null
+          ] }),
+          /* @__PURE__ */ jsx5(MetricSparkline, { points: cpuPts, color: "var(--og-color-accent)", yMax: 100, height: 26 })
+        ] }) : null,
+        /* @__PURE__ */ jsxs5("div", { className: "mt-1 flex items-center justify-between gap-3 text-og-xs text-og-fg-subtle", children: [
+          /* @__PURE__ */ jsx5("span", { className: "inline-flex items-center gap-1.5", children: sampledAgo ? /* @__PURE__ */ jsxs5(Fragment, { children: [
+            /* @__PURE__ */ jsx5(
+              "span",
+              {
+                className: cn(
+                  "size-1.5 rounded-full",
+                  sampledAgo === "now" ? "bg-og-status-idle" : "bg-og-fg-subtle"
+                ),
+                "aria-hidden": true
+              }
+            ),
+            sampledAgo === "now" ? "Live" : `Updated ${sampledAgo} ago`
+          ] }) : machine.lastSeenAt ? /* @__PURE__ */ jsxs5(Fragment, { children: [
+            "Last seen ",
+            formatRelativeTime(machine.lastSeenAt, new Date(clockNow))
+          ] }) : "Never connected" }),
+          machine.active ? /* @__PURE__ */ jsx5("span", { className: "text-og-accent", children: "Routing here" }) : attachable ? /* @__PURE__ */ jsx5(
+            "button",
+            {
+              type: "button",
+              "data-attach": true,
+              disabled: attaching,
+              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-11",
+                "hover:border-og-border-strong hover:text-og-fg disabled:cursor-not-allowed disabled:opacity-50"
+              ),
+              children: attaching ? "Switching\u2026" : "Attach"
+            }
+          ) : /* @__PURE__ */ jsx5("span", { className: "text-og-fg-subtle/70", children: offline ? "Unavailable" : "\u2014" })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/machines/metric-history-chart.tsx
+import { useLayoutEffect, useRef, useState } from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var PAD = { top: 10, right: 12, bottom: 18, left: 40 };
+function niceCeil(v) {
+  if (v <= 0) return 1;
+  const mag = 10 ** Math.floor(Math.log10(v));
+  const n = v / mag;
+  const step = n <= 1 ? 1 : n <= 2 ? 2 : n <= 5 ? 5 : 10;
+  return step * mag;
+}
+function smoothPath(pts) {
+  if (pts.length === 0) return "";
+  if (pts.length === 1) return `M${pts[0].x},${pts[0].y}`;
+  let d = `M${pts[0].x},${pts[0].y}`;
+  for (let i = 0; i < pts.length - 1; i++) {
+    const p0 = pts[i - 1] ?? pts[i];
+    const p1 = pts[i];
+    const p2 = pts[i + 1];
+    const p3 = pts[i + 2] ?? p2;
+    const cp1x = p1.x + (p2.x - p0.x) / 6;
+    const cp1y = p1.y + (p2.y - p0.y) / 6;
+    const cp2x = p2.x - (p3.x - p1.x) / 6;
+    const cp2y = p2.y - (p3.y - p1.y) / 6;
+    d += `C${cp1x},${cp1y} ${cp2x},${cp2y} ${p2.x},${p2.y}`;
+  }
+  return d;
+}
+function fmtClock(t) {
+  const d = new Date(t);
+  return `${d.getHours().toString().padStart(2, "0")}:${d.getMinutes().toString().padStart(2, "0")}`;
+}
+function MetricHistoryChart({
+  points,
+  yMax = "auto",
+  yMin = 0,
+  format,
+  unit = "",
+  color = "var(--og-color-accent)",
+  thresholds,
+  height = 132,
+  rangeLabel = "in this range",
+  className
+}) {
+  const ref = useRef(null);
+  const [w, setW] = useState(560);
+  const [hover, setHover] = useState(null);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      const cw = entries[0]?.contentRect.width;
+      if (cw && cw > 0) setW(cw);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const valued = points.filter(
+    (p) => p.v != null && Number.isFinite(p.v)
+  );
+  const fmt = format ?? ((v) => `${Math.round(v)}${unit}`);
+  const H = height;
+  const plotW = Math.max(1, w - PAD.left - PAD.right);
+  const plotH = Math.max(1, H - PAD.top - PAD.bottom);
+  const dataMax = valued.length ? Math.max(...valued.map((p) => p.v)) : 1;
+  const top = yMax === "auto" ? niceCeil(Math.max(dataMax * 1.15, thresholds?.warn ?? 0, 1)) : yMax;
+  const span = Math.max(1e-6, top - yMin);
+  const tMin = valued.length ? valued[0].t : 0;
+  const tMax = valued.length ? valued[valued.length - 1].t : 1;
+  const tSpan = Math.max(1, tMax - tMin);
+  const xOf = (t) => PAD.left + (t - tMin) / tSpan * plotW;
+  const yOf = (v) => PAD.top + (1 - (Math.min(top, Math.max(yMin, v)) - yMin) / span) * plotH;
+  const pxPts = valued.map((p) => ({ x: xOf(p.t), y: yOf(p.v), t: p.t, v: p.v }));
+  const sparse = pxPts.length > 0 && pxPts.length <= 4;
+  const line = smoothPath(pxPts);
+  const area = pxPts.length > 1 ? `${line} L${pxPts[pxPts.length - 1].x},${PAD.top + plotH} L${pxPts[0].x},${PAD.top + plotH} Z` : "";
+  const yTicks = [yMin, yMin + span / 2, top];
+  const gid = `og-mh-${Math.round(top)}-${Math.round(color.length)}`;
+  const hoverPt = hover != null ? pxPts[hover] : null;
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      ref,
+      className: cn("relative w-full select-none", className),
+      style: { height: H },
+      "data-metric-chart": true,
+      children: [
+        valued.length === 0 ? /* @__PURE__ */ jsx6("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxs6("span", { className: "text-og-xs text-og-fg-subtle", children: [
+          "No samples ",
+          rangeLabel
+        ] }) }) : /* @__PURE__ */ jsxs6(
+          "svg",
+          {
+            width: w,
+            height: H,
+            className: "overflow-visible",
+            role: "img",
+            onMouseLeave: () => setHover(null),
+            onMouseMove: (e) => {
+              const rect = e.currentTarget.getBoundingClientRect();
+              const mx = e.clientX - rect.left;
+              let best = 0;
+              let bestD = Infinity;
+              for (let i = 0; i < pxPts.length; i++) {
+                const d = Math.abs(pxPts[i].x - mx);
+                if (d < bestD) {
+                  bestD = d;
+                  best = i;
+                }
+              }
+              setHover(best);
+            },
+            children: [
+              /* @__PURE__ */ jsx6("defs", { children: /* @__PURE__ */ jsxs6("linearGradient", { id: gid, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                /* @__PURE__ */ jsx6("stop", { offset: "0%", stopColor: color, stopOpacity: "0.26" }),
+                /* @__PURE__ */ jsx6("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
+              ] }) }),
+              yTicks.map((v, i) => {
+                const y = yOf(v);
+                return /* @__PURE__ */ jsxs6("g", { children: [
+                  /* @__PURE__ */ jsx6(
+                    "line",
+                    {
+                      x1: PAD.left,
+                      x2: w - PAD.right,
+                      y1: y,
+                      y2: y,
+                      stroke: "var(--og-color-border)",
+                      strokeOpacity: i === 0 ? 0.9 : 0.4,
+                      strokeWidth: 1
+                    }
+                  ),
+                  /* @__PURE__ */ jsx6(
+                    "text",
+                    {
+                      x: PAD.left - 8,
+                      y: y + 3,
+                      textAnchor: "end",
+                      className: "font-og-mono",
+                      fontSize: 10,
+                      fill: "var(--og-color-fg-subtle)",
+                      children: fmt(v)
+                    }
+                  )
+                ] }, `yt-${v}`);
+              }),
+              ["warn", "crit"].map((k) => {
+                const tv = thresholds?.[k];
+                if (tv == null || tv > top) return null;
+                const y = yOf(tv);
+                const stroke = k === "crit" ? "var(--og-color-status-failed)" : "var(--og-color-status-waiting)";
+                return /* @__PURE__ */ jsx6(
+                  "line",
+                  {
+                    x1: PAD.left,
+                    x2: w - PAD.right,
+                    y1: y,
+                    y2: y,
+                    stroke,
+                    strokeOpacity: 0.5,
+                    strokeWidth: 1,
+                    strokeDasharray: "3 4"
+                  },
+                  k
+                );
+              }),
+              valued.length > 1 && [tMin, tMax].map((t, i) => /* @__PURE__ */ jsx6(
+                "text",
+                {
+                  x: i === 0 ? PAD.left : w - PAD.right,
+                  y: H - 4,
+                  textAnchor: i === 0 ? "start" : "end",
+                  className: "font-og-mono",
+                  fontSize: 10,
+                  fill: "var(--og-color-fg-subtle)",
+                  children: fmtClock(t)
+                },
+                i === 0 ? "x-start" : "x-end"
+              )),
+              area && /* @__PURE__ */ jsx6("path", { d: area, fill: `url(#${gid})` }),
+              /* @__PURE__ */ jsx6(
+                "path",
+                {
+                  d: line,
+                  fill: "none",
+                  stroke: color,
+                  strokeWidth: 1.75,
+                  strokeLinejoin: "round",
+                  strokeLinecap: "round",
+                  pathLength: 1,
+                  className: "og-mh-draw"
+                }
+              ),
+              sparse && pxPts.map((p) => /* @__PURE__ */ jsx6("circle", { cx: p.x, cy: p.y, r: 2.5, fill: color }, `m-${p.t}`)),
+              hoverPt && /* @__PURE__ */ jsxs6("g", { pointerEvents: "none", children: [
+                /* @__PURE__ */ jsx6(
+                  "line",
+                  {
+                    x1: hoverPt.x,
+                    x2: hoverPt.x,
+                    y1: PAD.top,
+                    y2: PAD.top + plotH,
+                    stroke: "var(--og-color-border-strong)",
+                    strokeWidth: 1
+                  }
+                ),
+                /* @__PURE__ */ jsx6(
+                  "circle",
+                  {
+                    cx: hoverPt.x,
+                    cy: hoverPt.y,
+                    r: 3.5,
+                    fill: color,
+                    stroke: "var(--og-color-bg)",
+                    strokeWidth: 1.5
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        hoverPt && /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            className: "pointer-events-none absolute z-10 flex flex-col rounded-og-sm border border-og-border-strong bg-og-surface-3/95 px-2 py-1 shadow-og-md backdrop-blur-sm",
+            style: {
+              left: Math.min(Math.max(hoverPt.x - 30, 0), w - 78),
+              top: Math.max(hoverPt.y - 42, 0)
+            },
+            children: [
+              /* @__PURE__ */ jsx6("span", { className: "font-og-mono text-og-sm font-medium tabular-nums text-og-fg", children: fmt(hoverPt.v) }),
+              /* @__PURE__ */ jsx6("span", { className: "font-og-mono text-[10px] tabular-nums text-og-fg-subtle", children: fmtClock(hoverPt.t) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/machines/machine-detail.tsx
+import { ArrowLeftIcon, CpuIcon as CpuIcon2, LaptopIcon as LaptopIcon2, RadioIcon, ServerIcon as ServerIcon2 } from "lucide-react";
+
+// src/components/machines/series.ts
+var METRIC_WINDOWS = ["15m", "1h", "6h", "24h"];
+var WINDOW_LABEL = {
+  "15m": "in the last 15 min",
+  "1h": "in the last hour",
+  "6h": "in the last 6 hours",
+  "24h": "in the last 24 hours"
+};
+function ptsFrom(samples, pick) {
+  return samples.map((s) => ({ t: new Date(s.sampledAt).getTime(), v: pick(s) }));
+}
+var memPct = (s) => s.memTotalBytes > 0 ? s.memUsedBytes / s.memTotalBytes * 100 : null;
+var diskPct = (s) => s.diskTotalBytes > 0 ? s.diskUsedBytes / s.diskTotalBytes * 100 : null;
+var fmtBytes = (b) => {
+  if (b < 1024) return `${b} B`;
+  const u = ["KB", "MB", "GB", "TB"];
+  let v = b / 1024;
+  for (const unit of u) {
+    if (v < 1024 || unit === "TB") return `${v.toFixed(v < 10 ? 1 : 0)} ${unit}`;
+    v /= 1024;
+  }
+  return `${b} B`;
+};
+var METRICS = [
+  {
+    key: "cpu",
+    title: "CPU",
+    unit: "%",
+    yMax: 100,
+    color: "var(--og-color-accent)",
+    thresholds: { warn: 90, crit: 98 },
+    pick: (s) => s.cpuPct,
+    current: (s) => `${Math.round(s.cpuPct)}%`,
+    sub: (s) => `${s.runQueue} in run queue`
+  },
+  {
+    key: "mem",
+    title: "Memory",
+    unit: "%",
+    yMax: 100,
+    color: "var(--og-color-status-idle)",
+    thresholds: { warn: 85, crit: 95 },
+    pick: memPct,
+    current: (s) => `${Math.round(memPct(s) ?? 0)}%`,
+    sub: (s) => `${fmtBytes(s.memUsedBytes)} / ${fmtBytes(s.memTotalBytes)}`
+  },
+  {
+    key: "disk",
+    title: "Disk",
+    unit: "%",
+    yMax: 100,
+    color: "var(--og-color-status-waiting)",
+    thresholds: { warn: 90, crit: 96 },
+    pick: diskPct,
+    current: (s) => `${Math.round(diskPct(s) ?? 0)}%`,
+    sub: (s) => `${fmtBytes(s.diskUsedBytes)} / ${fmtBytes(s.diskTotalBytes)}`
+  },
+  {
+    key: "load",
+    title: "Load average",
+    unit: "",
+    yMax: "auto",
+    color: "var(--og-color-accent-strong)",
+    pick: (s) => s.load1,
+    current: (s) => s.load1.toFixed(2),
+    sub: (s) => `5m ${s.load5.toFixed(2)} \xB7 15m ${s.load15.toFixed(2)}`
+  },
+  {
+    key: "gpu",
+    title: "GPU",
+    unit: "%",
+    yMax: 100,
+    color: "var(--og-color-status-running)",
+    thresholds: { warn: 90, crit: 98 },
+    pick: (s) => s.gpuUtilPct,
+    current: (s) => s.gpuUtilPct == null ? "\u2014" : `${Math.round(s.gpuUtilPct)}%`,
+    sub: (s) => s.gpuMemBytes == null ? null : `${fmtBytes(s.gpuMemBytes)} used`
+  }
+];
+function pointsFor(def, samples) {
+  return ptsFrom(samples, def.pick);
+}
+
+// src/components/machines/machine-detail.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function KindIcon2({ kind, session }) {
+  if (session) return /* @__PURE__ */ jsx7(ServerIcon2, { className: "size-4 text-og-fg-subtle", "aria-hidden": true });
+  if (kind === "modal") return /* @__PURE__ */ jsx7(CpuIcon2, { className: "size-4 text-og-fg-subtle", "aria-hidden": true });
+  return /* @__PURE__ */ jsx7(LaptopIcon2, { className: "size-4 text-og-fg-subtle", "aria-hidden": true });
+}
+function MachineDetail({
+  machine,
+  series,
+  window: window2,
+  onWindowChange,
+  loadingSeries,
+  onBack,
+  now = Date.now(),
+  className
+}) {
+  const health = deriveHealth(machine.state, machine.metrics, now);
+  const tone = HEALTH_TOKEN[health.level];
+  const latest = machine.metrics;
+  const sampledAgo = latest ? formatRelativeTime(latest.sampledAt, new Date(now)) : null;
+  const visible = METRICS.filter((m) => !(m.key === "gpu" && latest?.gpuUtilPct == null));
+  const tileCols = visible.length >= 5 ? "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5" : "grid-cols-2 sm:grid-cols-4";
+  return /* @__PURE__ */ jsxs7("div", { className: cn("og-root mx-auto flex w-full max-w-5xl flex-col gap-5", className), children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+        onBack && /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            onClick: onBack,
+            className: "flex size-7 shrink-0 items-center justify-center rounded-og-sm border border-og-border bg-og-surface-1 text-og-fg-muted transition-colors hover:bg-og-surface-2 hover:text-og-fg",
+            "aria-label": "Back to machines",
+            children: /* @__PURE__ */ jsx7(ArrowLeftIcon, { className: "size-3.5", "aria-hidden": true })
+          }
+        ),
+        /* @__PURE__ */ jsx7(KindIcon2, { kind: machine.kind, session: machine.isSessionGroup }),
+        /* @__PURE__ */ jsx7("h1", { className: "truncate text-og-md font-semibold text-og-fg", children: machine.name }),
+        /* @__PURE__ */ jsxs7("span", { className: "hidden shrink-0 rounded-og-sm border border-og-border bg-og-surface-1 px-1.5 py-0.5 font-og-mono text-og-xs text-og-fg-subtle sm:inline", children: [
+          machine.os,
+          " \xB7 ",
+          machine.arch
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx7("div", { className: "flex shrink-0 items-center gap-0.5 rounded-og-md border border-og-border bg-og-surface-1 p-0.5", children: METRIC_WINDOWS.map((w) => /* @__PURE__ */ jsx7(
+        "button",
+        {
+          type: "button",
+          onClick: () => onWindowChange(w),
+          "data-active": w === window2,
+          className: cn(
+            "rounded-og-sm px-2 py-1 font-og-mono text-og-xs transition-colors",
+            w === window2 ? "bg-og-surface-3 text-og-fg shadow-og-sm" : "text-og-fg-subtle hover:text-og-fg-muted"
+          ),
+          children: w
+        },
+        w
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: cn(
+          "relative flex flex-col gap-4 overflow-hidden rounded-og-lg border p-5 shadow-og-sm",
+          tone.soft
+        ),
+        children: [
+          /* @__PURE__ */ jsx7("span", { "aria-hidden": true, className: cn("absolute inset-y-0 left-0 w-1", tone.dot) }),
+          /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap items-center justify-between gap-3 pl-1", children: [
+            /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsxs7("span", { className: "relative flex size-3", children: [
+                healthPulses(health.level) && /* @__PURE__ */ jsx7(
+                  "span",
+                  {
+                    className: cn(
+                      "absolute inline-flex size-full animate-og-pulse rounded-full opacity-60",
+                      tone.dot
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx7("span", { className: cn("relative inline-flex size-3 rounded-full", tone.dot) })
+              ] }),
+              /* @__PURE__ */ jsxs7("div", { className: "flex flex-col", children: [
+                /* @__PURE__ */ jsx7("span", { className: cn("text-og-md font-semibold", tone.text), children: health.label }),
+                /* @__PURE__ */ jsx7("span", { className: "text-og-sm text-og-fg-muted", children: health.reason })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs7("div", { className: "flex items-start gap-5 pr-1", children: [
+              sampledAgo && /* @__PURE__ */ jsxs7("div", { className: "flex flex-col items-end gap-0.5", children: [
+                /* @__PURE__ */ jsx7("span", { className: "text-[10px] font-medium uppercase tracking-wide text-og-fg-subtle", children: "Sampled" }),
+                /* @__PURE__ */ jsxs7("span", { className: "flex items-center gap-1 font-og-mono text-og-sm tabular-nums text-og-fg", children: [
+                  /* @__PURE__ */ jsx7(
+                    RadioIcon,
+                    {
+                      className: cn("size-3", health.stale ? "text-og-fg-subtle" : tone.text),
+                      "aria-hidden": true
+                    }
+                  ),
+                  sampledAgo === "now" ? "live" : `${sampledAgo} ago`
+                ] })
+              ] }),
+              machine.lastSeenAt && /* @__PURE__ */ jsxs7("div", { className: "hidden flex-col items-end gap-0.5 sm:flex", children: [
+                /* @__PURE__ */ jsx7("span", { className: "text-[10px] font-medium uppercase tracking-wide text-og-fg-subtle", children: "Last seen" }),
+                /* @__PURE__ */ jsx7("span", { className: "font-og-mono text-og-sm tabular-nums text-og-fg-muted", children: formatRelativeTime(machine.lastSeenAt, new Date(now)) })
+              ] })
+            ] })
+          ] }),
+          latest && /* @__PURE__ */ jsx7(
+            "div",
+            {
+              className: cn(
+                "grid gap-px overflow-hidden rounded-og-md border border-og-border bg-og-border",
+                tileCols
+              ),
+              children: visible.map((m) => {
+                const pts = pointsFor(m, series);
+                return /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1.5 bg-og-surface-1 p-3", children: [
+                  /* @__PURE__ */ jsx7("span", { className: "text-[10px] font-medium uppercase tracking-wide text-og-fg-subtle", children: m.title }),
+                  /* @__PURE__ */ jsx7("span", { className: "font-og-mono text-og-md font-medium tabular-nums text-og-fg", children: m.current(latest) }),
+                  /* @__PURE__ */ jsx7(MetricSparkline, { points: pts, color: m.color, yMax: m.yMax, height: 22 }),
+                  m.sub && /* @__PURE__ */ jsx7("span", { className: "truncate font-og-mono text-[10px] text-og-fg-subtle", children: m.sub(latest) })
+                ] }, m.key);
+              })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx7("div", { className: "grid grid-cols-1 gap-3 lg:grid-cols-2", children: visible.map((m) => {
+      const pts = pointsFor(m, series);
+      return /* @__PURE__ */ jsxs7(
+        "div",
+        {
+          className: "flex flex-col gap-3 rounded-og-lg border border-og-border bg-og-surface-1 p-4 shadow-og-sm",
+          children: [
+            /* @__PURE__ */ jsxs7("div", { className: "flex items-baseline justify-between", children: [
+              /* @__PURE__ */ jsx7("span", { className: "text-og-sm font-medium text-og-fg", children: m.title }),
+              latest && /* @__PURE__ */ jsx7("span", { className: "font-og-mono text-og-sm tabular-nums text-og-fg-muted", children: m.current(latest) })
+            ] }),
+            /* @__PURE__ */ jsx7(
+              MetricHistoryChart,
+              {
+                points: pts,
+                yMax: m.yMax,
+                unit: m.unit,
+                color: m.color,
+                thresholds: m.thresholds,
+                rangeLabel: WINDOW_LABEL[window2],
+                height: 128,
+                className: cn(loadingSeries && "opacity-50 transition-opacity")
+              }
+            )
+          ]
+        },
+        m.key
+      );
+    }) })
+  ] });
+}
+
+// src/components/machines-dashboard.tsx
+import { LaptopIcon as LaptopIcon3, PlusIcon, RefreshCwIcon } from "lucide-react";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function EmptyState({ onEnroll }) {
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      "data-machines-empty": true,
+      className: "flex flex-col items-center justify-center gap-3 rounded-og-lg border border-dashed border-og-border bg-og-surface-1 px-6 py-12 text-center",
+      children: [
+        /* @__PURE__ */ jsx8("span", { className: "flex size-10 items-center justify-center rounded-full bg-og-surface-2 text-og-fg-subtle", children: /* @__PURE__ */ jsx8(LaptopIcon3, { className: "size-5", "aria-hidden": true }) }),
+        /* @__PURE__ */ jsxs8("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx8("p", { className: "text-og-base font-medium text-og-fg", children: "No machines yet" }),
+          /* @__PURE__ */ jsx8("p", { className: "max-w-xs text-og-sm text-og-fg-muted", children: "Enroll your own computer to run the agent on it \u2014 your files, your terminal, your desktop." })
+        ] }),
+        onEnroll ? /* @__PURE__ */ jsxs8(
+          "button",
+          {
+            type: "button",
+            "data-enroll-cta": true,
+            onClick: onEnroll,
+            className: "inline-flex items-center gap-1.5 rounded-og-sm bg-og-accent px-3 py-1.5 text-og-sm font-medium text-og-accent-fg transition-colors hover:bg-og-accent-strong pointer-coarse:min-h-11",
+            children: [
+              /* @__PURE__ */ jsx8(PlusIcon, { className: "size-3.5", "aria-hidden": true }),
+              "Enroll a machine"
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function Header({
+  count,
+  onEnroll,
+  onRefresh,
+  loading
+}) {
+  return /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between gap-3", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-baseline gap-2", children: [
+      /* @__PURE__ */ jsx8("h2", { className: "text-og-base font-semibold text-og-fg", children: "Machines" }),
+      /* @__PURE__ */ jsx8("span", { className: "font-og-mono text-og-xs text-og-fg-subtle", children: count })
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-1.5", children: [
+      onRefresh ? /* @__PURE__ */ jsx8(
+        "button",
+        {
+          type: "button",
+          "data-refresh": true,
+          onClick: onRefresh,
+          title: "Refresh",
+          className: "rounded-og-sm p-1.5 text-og-fg-subtle transition-colors hover:bg-og-surface-2 hover:text-og-fg",
+          children: /* @__PURE__ */ jsx8(RefreshCwIcon, { className: cn("size-3.5", loading && "animate-og-spin"), "aria-hidden": true })
+        }
+      ) : null,
+      onEnroll ? /* @__PURE__ */ jsxs8(
+        "button",
+        {
+          type: "button",
+          "data-enroll-cta": true,
+          onClick: onEnroll,
+          className: "inline-flex items-center gap-1.5 rounded-og-sm border border-og-border px-2.5 py-1 text-og-sm font-medium text-og-fg-muted transition-colors hover:border-og-border-strong hover:text-og-fg pointer-coarse:min-h-11",
+          children: [
+            /* @__PURE__ */ jsx8(PlusIcon, { className: "size-3.5", "aria-hidden": true }),
+            "Enroll machine"
+          ]
+        }
+      ) : null
+    ] })
+  ] });
+}
+function MachinesDashboard({
+  machines,
+  activeSandboxId,
+  loading,
+  error,
+  onAttach,
+  attachingSandboxId,
+  seriesByMachine,
+  onOpenDetail,
+  now,
+  onEnroll,
+  onRefresh,
+  className
+}) {
+  const isEmpty = !loading && !error && machines.length === 0;
+  return /* @__PURE__ */ jsxs8("section", { "data-machines-dashboard": true, className: cn("og-root flex flex-col gap-3", className), children: [
+    /* @__PURE__ */ jsx8(Header, { count: machines.length, onEnroll, onRefresh, loading }),
+    error ? /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        "data-machines-error": true,
+        className: "flex flex-wrap items-center justify-between gap-2 rounded-og-md border border-og-status-failed/30 bg-og-status-failed/10 px-3 py-2 text-og-sm text-og-status-failed",
+        children: [
+          /* @__PURE__ */ jsxs8("span", { children: [
+            "Could not load machines: ",
+            error.message
+          ] }),
+          onRefresh ? /* @__PURE__ */ jsxs8(
+            "button",
+            {
+              type: "button",
+              "data-machines-retry": true,
+              onClick: onRefresh,
+              disabled: loading,
+              className: "inline-flex items-center gap-1.5 rounded-og-sm border border-og-status-failed/30 px-2 py-1 text-og-xs font-medium transition-colors hover:border-og-status-failed/50 disabled:cursor-not-allowed disabled:opacity-60 pointer-coarse:min-h-11",
+              children: [
+                /* @__PURE__ */ jsx8(RefreshCwIcon, { className: cn("size-3.5", loading && "animate-og-spin"), "aria-hidden": true }),
+                loading ? "Retrying\u2026" : "Retry"
+              ]
+            }
+          ) : null
+        ]
+      }
+    ) : null,
+    loading && machines.length === 0 ? /* @__PURE__ */ jsx8("div", { "data-machines-loading": true, className: "grid gap-3 sm:grid-cols-2", children: [0, 1].map((i) => /* @__PURE__ */ jsx8(
+      "div",
+      {
+        className: "h-36 animate-og-pulse rounded-og-lg border border-og-border bg-og-surface-1"
+      },
+      i
+    )) }) : isEmpty ? /* @__PURE__ */ jsx8(EmptyState, { onEnroll }) : /* @__PURE__ */ jsx8("div", { className: "grid gap-3 sm:grid-cols-2 xl:grid-cols-3", "data-machines-grid": true, children: machines.map((machine) => /* @__PURE__ */ jsx8(
+      MachineCard,
+      {
+        machine: {
+          ...machine,
+          active: machine.active || machine.sandboxId === activeSandboxId
+        },
+        onAttach,
+        attaching: attachingSandboxId === machine.sandboxId,
+        series: seriesByMachine?.[machine.sandboxId],
+        onOpenDetail,
+        now
+      },
+      machine.sandboxId
+    )) })
+  ] });
+}
+
+// src/components/machine-dock-bar.tsx
+import { LaptopIcon as LaptopIcon4, CpuIcon as CpuIcon3, UsersIcon as UsersIcon2 } from "lucide-react";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+function MachineDockBar({ name, kind, state, className }) {
+  const Icon = kind === "selfhosted" ? LaptopIcon4 : CpuIcon3;
+  const stateBadge = MACHINE_STATE_BADGE_META[state];
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      "data-machine-dock-bar": true,
+      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
+      ),
+      children: [
+        /* @__PURE__ */ jsxs9("div", { className: "flex min-w-0 items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx9(Icon, { className: "size-3.5 shrink-0 text-og-fg-subtle", "aria-hidden": true }),
+          /* @__PURE__ */ jsx9("span", { className: "truncate text-[11px] font-medium text-og-fg", children: name }),
+          stateBadge ? /* @__PURE__ */ jsx9(
+            "span",
+            {
+              "data-state-badge": state,
+              className: cn(
+                "shrink-0 rounded-full border px-1.5 py-px text-[10px] font-medium",
+                stateBadge.badgeClassName
+              ),
+              children: stateBadge.label
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx9(
+          ConnectionStatusPill,
+          {
+            status: connectionStatusForState(state),
+            size: "sm",
+            className: "shrink-0"
+          }
+        )
+      ]
+    }
+  );
+}
+function SharedMachineDisclosure({
+  sharedSessionCount,
+  density = "compact",
+  className
+}) {
+  const others = Math.max(0, sharedSessionCount - 1);
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      "data-shared-disclosure": true,
+      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
+      ),
+      children: [
+        /* @__PURE__ */ jsx9(UsersIcon2, { className: "size-3.5 shrink-0 text-og-accent", "aria-hidden": true }),
+        /* @__PURE__ */ jsxs9("span", { children: [
+          "Shared \u2014 ",
+          others === 1 ? "another session is" : `${others} other sessions are`,
+          " on this machine. They see the same terminal, files, and desktop."
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/enrollment-device-flow.tsx
+import { CopyIcon, ExternalLinkIcon, LaptopIcon as LaptopIcon5, TerminalIcon } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+var PHASE_TO_STATE = {
+  pending: "enrolling",
+  authorized: "online",
+  denied: "offline",
+  expired: "offline",
+  disabled: "offline"
+};
+function PhaseLabel({ phase }) {
+  const text = {
+    pending: "Waiting for approval",
+    authorized: "Connected",
+    denied: "Denied",
+    expired: "Code expired",
+    disabled: "Enrollment disabled"
+  };
+  return /* @__PURE__ */ jsx10("span", { children: text[phase] });
+}
+function EnrollmentDeviceFlow({
+  userCode,
+  verificationUri,
+  verificationUriComplete,
+  installCommand,
+  phase = "pending",
+  expiresInSeconds,
+  onCopyCode,
+  onCopyInstall,
+  onOpenVerification,
+  className
+}) {
+  const href = verificationUriComplete ?? verificationUri;
+  const codeIsPlaceholder = !/[A-Za-z0-9]/.test(userCode);
+  const awaitingCode = phase === "pending" && codeIsPlaceholder;
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      "data-enrollment-device-flow": true,
+      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
+      ),
+      children: [
+        /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx10("span", { className: "flex size-7 items-center justify-center rounded-full bg-og-surface-2 text-og-fg-muted", children: /* @__PURE__ */ jsx10(LaptopIcon5, { className: "size-4", "aria-hidden": true }) }),
+            /* @__PURE__ */ jsx10("h2", { className: "text-sm font-semibold text-og-fg", children: "Connect a machine" })
+          ] }),
+          /* @__PURE__ */ jsx10(
+            ConnectionStatusPill,
+            {
+              status: PHASE_TO_STATE[phase] === "online" ? "online" : PHASE_TO_STATE[phase] === "offline" ? "offline" : "reconnecting",
+              label: /* @__PURE__ */ jsx10(PhaseLabel, { phase }),
+              size: "sm"
+            }
+          )
+        ] }),
+        installCommand ? /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx10("span", { className: "text-[11px] font-medium uppercase tracking-wide text-og-fg-subtle", children: "1 \xB7 Run on the machine" }),
+          /* @__PURE__ */ jsxs10("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", children: [
+            /* @__PURE__ */ jsxs10("code", { className: "flex min-w-0 items-center gap-2 overflow-x-auto font-og-mono text-[12px] text-og-fg", children: [
+              /* @__PURE__ */ jsx10(TerminalIcon, { className: "size-3.5 shrink-0 text-og-fg-subtle", "aria-hidden": true }),
+              installCommand
+            ] }),
+            /* @__PURE__ */ jsx10(
+              "button",
+              {
+                type: "button",
+                "data-copy-install": true,
+                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",
+                children: /* @__PURE__ */ jsx10(CopyIcon, { className: "size-4", "aria-hidden": true })
+              }
+            )
+          ] })
+        ] }) : null,
+        /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx10("span", { className: "text-[11px] font-medium uppercase tracking-wide text-og-fg-subtle", children: installCommand ? "2 \xB7 Approve the machine" : "Approve the machine" }),
+          /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between gap-3 rounded-og-md border border-og-border bg-og-bg px-3 py-2.5", children: [
+            awaitingCode ? /* @__PURE__ */ jsx10("span", { "data-user-code": true, className: "font-og-mono text-[13px] text-og-fg-subtle", children: "Run the command above \u2014 your code appears here" }) : /* @__PURE__ */ jsx10(
+              "span",
+              {
+                "data-user-code": true,
+                className: "select-all font-og-mono text-2xl font-semibold tracking-[0.25em] text-og-fg",
+                children: userCode
+              }
+            ),
+            /* @__PURE__ */ jsx10(
+              "button",
+              {
+                type: "button",
+                "data-copy-code": true,
+                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",
+                children: /* @__PURE__ */ jsx10(CopyIcon, { className: "size-4", "aria-hidden": true })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs10(
+          "a",
+          {
+            href,
+            "data-open-verification": true,
+            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",
+            children: [
+              "Open approval page",
+              /* @__PURE__ */ jsx10(ExternalLinkIcon, { className: "size-3.5", "aria-hidden": true })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx10("p", { className: "text-center text-[11px] text-og-fg-subtle", children: awaitingCode ? /* @__PURE__ */ jsxs10(Fragment2, { children: [
+          "The one-liner prints a short code. Open",
+          " ",
+          /* @__PURE__ */ jsx10("span", { className: "font-og-mono text-og-fg-muted", children: verificationUri }),
+          " and confirm the code shown there matches."
+        ] }) : /* @__PURE__ */ jsxs10(Fragment2, { children: [
+          "Confirm code ",
+          /* @__PURE__ */ jsx10("span", { className: "font-og-mono text-og-fg-muted", children: userCode }),
+          " \u2014 the one printed by the one-liner \u2014 at",
+          " ",
+          /* @__PURE__ */ jsx10("span", { className: "font-og-mono text-og-fg-muted", children: verificationUri }),
+          ".",
+          typeof expiresInSeconds === "number" ? /* @__PURE__ */ jsxs10(Fragment2, { children: [
+            " Expires in ",
+            Math.max(0, Math.round(expiresInSeconds / 60)),
+            " min."
+          ] }) : null
+        ] }) })
+      ]
+    }
+  );
+}
+
+// src/components/enrollment-consent.tsx
+import { useState as useState2 } from "react";
+import {
+  CircleAlertIcon,
+  LaptopIcon as LaptopIcon6,
+  MonitorIcon as MonitorIcon2,
+  ScreenShareIcon,
+  ShieldAlertIcon,
+  TerminalIcon as TerminalIcon2,
+  UsersIcon as UsersIcon3
+} from "lucide-react";
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+function Capability({ icon, title, body }) {
+  return /* @__PURE__ */ jsxs11("li", { className: "flex items-start gap-2.5", children: [
+    /* @__PURE__ */ jsx11("span", { className: "mt-0.5 shrink-0 text-og-status-failed", children: icon }),
+    /* @__PURE__ */ jsxs11("span", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx11("span", { className: "block text-og-base font-medium text-og-fg", children: title }),
+      /* @__PURE__ */ jsx11("span", { className: "block text-og-sm text-og-fg-muted", children: body })
+    ] })
+  ] });
+}
+function EnrollmentConsent({
+  userCode,
+  machine,
+  phase = "review",
+  onApprove,
+  onDeny,
+  errorMessage,
+  className
+}) {
+  const [allowScreenControl, setAllowScreenControl] = useState2(machine.requestsScreenControl);
+  const busy = phase === "approving";
+  if (phase === "approved") {
+    return /* @__PURE__ */ jsx11(
+      ConsentResult,
+      {
+        className,
+        tone: "ok",
+        title: "Machine connected",
+        body: `${machine.machineName} is now enrolled in this workspace. You can close this page \u2014 it will appear in your Machines dashboard.`
+      }
+    );
+  }
+  if (phase === "denied") {
+    return /* @__PURE__ */ jsx11(
+      ConsentResult,
+      {
+        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 /* @__PURE__ */ jsx11(
+      ConsentResult,
+      {
+        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 /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      "data-enrollment-consent": true,
+      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
+      ),
+      children: [
+        /* @__PURE__ */ jsxs11("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx11("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-og-status-failed/15 text-og-status-failed", children: /* @__PURE__ */ jsx11(ShieldAlertIcon, { className: "size-5", "aria-hidden": true }) }),
+          /* @__PURE__ */ jsxs11("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx11("h1", { className: "text-og-md font-semibold text-og-fg", children: "Give the agent your whole machine?" }),
+            /* @__PURE__ */ jsxs11("p", { className: "mt-1 text-og-base text-og-fg-muted", children: [
+              "Approving lets the OpenGeni agent run on",
+              " ",
+              /* @__PURE__ */ jsx11("span", { className: "font-medium text-og-fg", children: machine.machineName }),
+              " with full access. This is your real computer \u2014 not a sandbox."
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs11("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-og-sm", children: [
+          /* @__PURE__ */ jsx11(LaptopIcon6, { className: "size-4 text-og-fg-subtle", "aria-hidden": true }),
+          /* @__PURE__ */ jsx11("span", { className: "font-medium text-og-fg", children: machine.machineName }),
+          /* @__PURE__ */ jsxs11("span", { className: "font-og-mono text-og-fg-subtle", children: [
+            machine.os,
+            "/",
+            machine.arch
+          ] }),
+          /* @__PURE__ */ jsx11("span", { "aria-hidden": true, className: "text-og-fg-subtle", children: "\xB7" }),
+          /* @__PURE__ */ jsxs11("span", { className: "text-og-fg-subtle", children: [
+            "code ",
+            /* @__PURE__ */ jsx11("span", { className: "font-og-mono font-medium text-og-fg", children: userCode })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs11("ul", { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ jsx11(
+            Capability,
+            {
+              icon: /* @__PURE__ */ jsx11(TerminalIcon2, { className: "size-4", "aria-hidden": true }),
+              title: "Read, write & run anything",
+              body: "The agent can read and modify any file, run any command, and use your git credentials \u2014 as if it were you at the keyboard."
+            }
+          ),
+          machine.canOfferDisplay ? /* @__PURE__ */ jsx11(
+            Capability,
+            {
+              icon: /* @__PURE__ */ jsx11(MonitorIcon2, { className: "size-4", "aria-hidden": true }),
+              title: "See your screen",
+              body: "The agent can capture this machine's display to watch what it is doing."
+            }
+          ) : null,
+          /* @__PURE__ */ jsx11(
+            Capability,
+            {
+              icon: /* @__PURE__ */ jsx11(UsersIcon3, { className: "size-4", "aria-hidden": true }),
+              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."
+            }
+          )
+        ] }),
+        machine.canOfferDisplay ? /* @__PURE__ */ jsxs11(
+          "label",
+          {
+            "data-screen-control-toggle": true,
+            className: "flex cursor-pointer items-start gap-3 rounded-og-md border border-og-border bg-og-bg px-3 py-2.5",
+            children: [
+              /* @__PURE__ */ jsx11(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: allowScreenControl,
+                  disabled: busy,
+                  onChange: (e) => setAllowScreenControl(e.target.checked),
+                  className: "mt-0.5 size-4 accent-og-accent"
+                }
+              ),
+              /* @__PURE__ */ jsxs11("span", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsxs11("span", { className: "flex items-center gap-1.5 text-og-base font-medium text-og-fg", children: [
+                  /* @__PURE__ */ jsx11(ScreenShareIcon, { className: "size-3.5 text-og-fg-muted", "aria-hidden": true }),
+                  "Also let the agent control my mouse & keyboard"
+                ] }),
+                /* @__PURE__ */ jsx11("span", { className: "mt-0.5 block text-og-sm text-og-fg-muted", children: "Optional. Enables computer-use \u2014 the agent can move the pointer, type, and click on this machine's desktop. Leave off to let it only watch." })
+              ] })
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs11("p", { className: "flex items-start gap-2 rounded-og-md border border-og-border bg-og-bg px-3 py-2 text-og-sm text-og-fg-muted", children: [
+          /* @__PURE__ */ jsx11(CircleAlertIcon, { className: "mt-px size-3.5 shrink-0 text-og-fg-subtle", "aria-hidden": true }),
+          "This machine has no display, so screen control isn't available \u2014 files, terminal, and git only."
+        ] }),
+        /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx11(
+            "button",
+            {
+              type: "button",
+              "data-deny": true,
+              disabled: busy,
+              onClick: () => onDeny?.(),
+              className: "flex-1 rounded-og-sm border border-og-border px-3 py-2 text-og-sm font-medium text-og-fg-muted transition-colors hover:border-og-border-strong hover:text-og-fg disabled:opacity-50 pointer-coarse:min-h-11",
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsx11(
+            "button",
+            {
+              type: "button",
+              "data-approve": true,
+              disabled: busy,
+              onClick: () => onApprove?.(allowScreenControl),
+              className: "flex-1 rounded-og-sm bg-og-status-failed px-3 py-2 text-og-sm font-semibold text-og-accent-fg transition-colors hover:opacity-90 disabled:opacity-50 pointer-coarse:min-h-11",
+              children: busy ? "Connecting\u2026" : "Grant full access"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function ConsentResult({
+  tone,
+  title,
+  body,
+  className
+}) {
+  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 /* @__PURE__ */ jsxs11(
+    "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
+      ),
+      children: [
+        /* @__PURE__ */ jsx11(
+          "span",
+          {
+            className: cn(
+              "flex size-10 items-center justify-center rounded-full bg-og-surface-2",
+              iconClass
+            ),
+            children: /* @__PURE__ */ jsx11(LaptopIcon6, { className: "size-5", "aria-hidden": true })
+          }
+        ),
+        /* @__PURE__ */ jsx11("h1", { className: "text-og-md font-semibold text-og-fg", children: title }),
+        /* @__PURE__ */ jsx11("p", { className: "max-w-sm text-og-base text-og-fg-muted", children: body })
+      ]
+    }
+  );
+}
+
+// src/hooks/use-machines.ts
+import { useCallback as useCallback2, useRef as useRef3, useState as useState4 } from "react";
+
+// src/provider.tsx
+import {
+  OpenGeniApiContractMismatchError,
+  OPENGENI_API_CONTRACT_REVISION
+} from "@opengeni/sdk";
+import { useCallback, useEffect, useMemo, useRef as useRef2, useState as useState3 } from "react";
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+var CONTRACT_RELOAD_STORAGE_PREFIX = "opengeni.reloadForApiContract:";
+function OpenGeniProvider({
+  client,
+  workspaceId,
+  onWorkspaceControlEvent,
+  children
+}) {
+  const [workspaceControlEvent, setWorkspaceControlEvent] = useState3(
+    null
+  );
+  const [workspaceControlConnectionState, setWorkspaceControlConnectionState] = useState3("idle");
+  const [contractMismatch, setContractMismatch] = useState3(
+    null
+  );
+  const callbackRef = useRef2(onWorkspaceControlEvent);
+  const reconcilersRef = useRef2(/* @__PURE__ */ new Map());
+  callbackRef.current = onWorkspaceControlEvent;
+  const verifyApiContract = useCallback(async () => {
+    try {
+      const config = await client.getClientConfig();
+      if (config.apiContractRevision !== OPENGENI_API_CONTRACT_REVISION) {
+        throw new OpenGeniApiContractMismatchError(
+          OPENGENI_API_CONTRACT_REVISION,
+          String(config.apiContractRevision || "(missing)")
+        );
+      }
+    } catch (error) {
+      if (error instanceof OpenGeniApiContractMismatchError) {
+        setContractMismatch(error);
+        reloadForContractMismatchOnce(error);
+      }
+      throw error;
+    }
+  }, [client]);
+  const registerSessionReconciler = useMemo(
+    () => (sessionId, key, reconcile) => {
+      const sessionReconcilers = reconcilersRef.current.get(sessionId) ?? /* @__PURE__ */ new Map();
+      sessionReconcilers.set(key, reconcile);
+      reconcilersRef.current.set(sessionId, sessionReconcilers);
+      return () => {
+        const current = reconcilersRef.current.get(sessionId);
+        current?.delete(key);
+        if (current?.size === 0) reconcilersRef.current.delete(sessionId);
+      };
+    },
+    []
+  );
+  const reconcileSession = useMemo(
+    () => async (sessionId) => {
+      await verifyApiContract();
+      const callbacks = [...reconcilersRef.current.get(sessionId)?.values() ?? []];
+      await Promise.all(callbacks.map((reconcile) => reconcile()));
+    },
+    [verifyApiContract]
+  );
+  useEffect(() => {
+    const controller = new AbortController();
+    setWorkspaceControlEvent(null);
+    setWorkspaceControlConnectionState("connecting");
+    void (async () => {
+      try {
+        await verifyApiContract();
+        const workspace = await client.getWorkspace(workspaceId);
+        const stream = client.streamWorkspaceControlEvents(workspaceId, {
+          after: workspace.inferenceControl.revision,
+          signal: controller.signal,
+          onStateChange: setWorkspaceControlConnectionState
+        });
+        for await (const event of stream) {
+          if (controller.signal.aborted) return;
+          setWorkspaceControlEvent(
+            (current) => !current || event.sequence > current.sequence ? event : current
+          );
+          callbackRef.current?.(event);
+        }
+      } catch (error) {
+        if (error instanceof OpenGeniApiContractMismatchError) {
+          setContractMismatch(error);
+          reloadForContractMismatchOnce(error);
+        }
+        if (!controller.signal.aborted) setWorkspaceControlConnectionState("error");
+      }
+    })();
+    return () => controller.abort();
+  }, [client, verifyApiContract, workspaceId]);
+  const value = useMemo(
+    () => ({
+      client,
+      workspaceId,
+      workspaceControlEvent,
+      workspaceControlConnectionState,
+      registerSessionReconciler,
+      reconcileSession
+    }),
+    [
+      client,
+      workspaceId,
+      workspaceControlEvent,
+      workspaceControlConnectionState,
+      registerSessionReconciler,
+      reconcileSession
+    ]
+  );
+  return /* @__PURE__ */ jsxs12(OpenGeniContext.Provider, { value, children: [
+    children,
+    contractMismatch ? /* @__PURE__ */ jsx12(ApiContractMismatchScreen, { mismatch: contractMismatch }) : null
+  ] });
+}
+function ApiContractMismatchScreen({ mismatch }) {
+  return /* @__PURE__ */ jsx12(
+    "div",
+    {
+      className: "og-root fixed inset-0 z-[2147483647] grid place-items-center bg-og-bg/95 p-6 backdrop-blur-sm",
+      role: "alert",
+      "aria-live": "assertive",
+      "data-opengeni-api-contract-mismatch": true,
+      children: /* @__PURE__ */ jsxs12("div", { className: "w-full max-w-md rounded-xl border border-og-border bg-og-surface p-6 shadow-2xl", children: [
+        /* @__PURE__ */ jsx12("p", { className: "text-sm font-semibold text-og-fg", children: "OpenGeni updated" }),
+        /* @__PURE__ */ jsx12("p", { className: "mt-2 text-sm leading-6 text-og-muted", children: "This tab cannot safely continue with the new server version. Reload it before sending or controlling work." }),
+        /* @__PURE__ */ jsxs12("p", { className: "mt-3 font-mono text-xs text-og-subtle", children: [
+          "Client ",
+          mismatch.expected,
+          " \xB7 API ",
+          mismatch.actual
+        ] }),
+        /* @__PURE__ */ jsx12(
+          "button",
+          {
+            type: "button",
+            className: "mt-5 inline-flex h-9 items-center rounded-md bg-og-fg px-3 text-sm font-medium text-og-bg",
+            onClick: () => window.location.reload(),
+            children: "Reload now"
+          }
+        )
+      ] })
+    }
+  );
+}
+function reloadForContractMismatchOnce(mismatch) {
+  if (typeof window === "undefined" || typeof sessionStorage === "undefined") return;
+  const key = `${CONTRACT_RELOAD_STORAGE_PREFIX}${mismatch.actual}`;
+  if (sessionStorage.getItem(key) === OPENGENI_API_CONTRACT_REVISION) return;
+  sessionStorage.setItem(key, OPENGENI_API_CONTRACT_REVISION);
+  window.setTimeout(() => window.location.reload(), 150);
+}
+
+// src/hooks/use-machines.ts
+var EMPTY = { activeSandboxId: null, activeEpoch: 0, machines: [] };
+function useMachines(options = {}) {
+  const { client, workspaceId } = useOpenGeni(options);
+  const machinesClient = options.machinesClient ?? client;
+  const sessionId = options.sessionId;
+  const identityKey = `${workspaceId}\0${sessionId ?? ""}`;
+  const identityRef = useRef3(identityKey);
+  identityRef.current = identityKey;
+  const load = useCallback2(
+    async (signal) => {
+      return await machinesClient.listMachines(workspaceId, {
+        ...sessionId ? { sessionId } : {},
+        ...signal ? { signal } : {}
+      });
+    },
+    [machinesClient, workspaceId, sessionId]
+  );
+  const {
+    data: loadedData,
+    loading,
+    error,
+    refresh
+  } = usePolledValue(load, {
+    pollIntervalMs: options.pollIntervalMs,
+    enabled: options.enabled
+  });
+  const { run, mutating, mutationError, clearMutationError } = useMutationRunner(identityKey);
+  const [attachState, setAttachState] = useState4(() => ({ identity: identityKey, sandboxId: null }));
+  const attachingSandboxId = attachState.identity === identityKey ? attachState.sandboxId : null;
+  const data = loadedData ?? EMPTY;
+  const canAttach = sessionId !== void 0 && (typeof machinesClient.attachMachine === "function" || typeof machinesClient.swapActiveSandbox === "function");
+  const attach = useCallback2(
+    async (sandboxId) => {
+      if (sessionId === void 0) return false;
+      const runSwap = machinesClient.attachMachine ? () => machinesClient.attachMachine(workspaceId, sessionId, sandboxId) : machinesClient.swapActiveSandbox ? () => machinesClient.swapActiveSandbox(workspaceId, sessionId, { target: sandboxId }) : null;
+      if (!runSwap) return false;
+      const ownedIdentity = identityKey;
+      setAttachState({ identity: ownedIdentity, sandboxId });
+      const result = await run(async () => {
+        await runSwap();
+        return true;
+      });
+      if (identityRef.current === ownedIdentity) {
+        setAttachState({ identity: ownedIdentity, sandboxId: null });
+        if (result) await refresh();
+      }
+      return result === true;
+    },
+    [machinesClient, workspaceId, sessionId, identityKey, run, refresh]
+  );
+  const fetchSeries = useCallback2(
+    async (enrollmentId, window2 = "1h") => {
+      if (!machinesClient.machineMetricsSeries) return [];
+      return await machinesClient.machineMetricsSeries(workspaceId, enrollmentId, { window: window2 });
+    },
+    [machinesClient, workspaceId]
+  );
+  return {
+    machines: data.machines,
+    activeSandboxId: data.activeSandboxId,
+    activeEpoch: data.activeEpoch,
+    loading,
+    error,
+    refresh,
+    attach,
+    canAttach,
+    fetchSeries,
+    attaching: mutating,
+    attachingSandboxId,
+    mutationError,
+    clearMutationError
+  };
+}
+
+export {
+  OpenGeniProvider,
+  useMachines,
+  connectionStatusForState,
+  CONNECTION_STATUS_META,
+  MACHINE_STATE_BADGE_META,
+  ConnectionStatusPill,
+  ConnectionDot,
+  MachineStatusPill,
+  MachineDockBar,
+  SharedMachineDisclosure,
+  MachineMetrics,
+  deriveHealth,
+  HEALTH_TOKEN,
+  healthPulses,
+  MachineHealthPill,
+  MetricSparkline,
+  MachineCard,
+  MetricHistoryChart,
+  METRIC_WINDOWS,
+  WINDOW_LABEL,
+  METRICS,
+  pointsFor,
+  MachineDetail,
+  MachinesDashboard,
+  EnrollmentDeviceFlow,
+  EnrollmentConsent
+};
+//# sourceMappingURL=chunk-6BXBGJ3B.js.map