@opengeni/react 6.5.2-canary.41607687019001 → 6.7.0

package/dist/chunk-6DK6Z4UN.js

@@ -0,0 +1,2599 @@
+"use client";
+import {
+  machineScopeLabel
+} from "./chunk-ZY2Z2IU3.js";
+import {
+  formatBytes,
+  formatRelativeTime
+} from "./chunk-5MOJZORA.js";
+import {
+  cn
+} from "./chunk-TXS65BB2.js";
+import {
+  useOpenGeniText
+} from "./chunk-7T2ZE3VT.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 = (t) => ({
+  online: {
+    label: t("machineStatusPill.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: t("machineStatusPill.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: t("machineStatusPill.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 = (t) => ({
+  consent_required: {
+    label: t("machineStatusPill.consentRequired"),
+    badgeClassName: "text-og-status-waiting border-og-status-waiting/35 bg-og-status-waiting/10"
+  },
+  display_unavailable: {
+    label: t("machineStatusPill.noDisplay"),
+    badgeClassName: "text-og-fg-muted border-og-border bg-og-surface-2"
+  },
+  enrolling: {
+    label: t("machineStatusPill.enrolling"),
+    badgeClassName: "text-og-accent border-og-accent/30 bg-og-accent-soft"
+  }
+});
+function ConnectionStatusPill({
+  status,
+  label,
+  size = "md",
+  className
+}) {
+  const t = useOpenGeniText();
+  const meta = CONNECTION_STATUS_META(t)[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 t = useOpenGeniText();
+  const meta = CONNECTION_STATUS_META(t)[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 t = useOpenGeniText();
+  const stateBadge = MACHINE_STATE_BADGE_META(t)[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__ */ jsx(
+          "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: t("machineStatusPill.sessionsOnThisMachine", { count: sharedSessionCount ?? 0 }),
+            children: t("machineStatusPill.sharedCount", { count: sharedSessionCount ?? 0 })
+          }
+        ) : 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 t = useOpenGeniText();
+  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: t("machineMetrics.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: t("machineMetrics.queue") }),
+          /* @__PURE__ */ jsx2("span", { className: "font-og-mono tabular-nums text-og-fg-muted", children: runQueue })
+        ]
+      }
+    ) : null
+  ] });
+}
+function MachineMetrics({ metrics, density = "compact", className }) {
+  const t = useOpenGeniText();
+  if (!metrics) {
+    return /* @__PURE__ */ jsx2("div", { className: cn("text-[11px] text-og-fg-subtle", className), "data-metrics-empty": true, children: t("machineMetrics.noMetricsYet") });
+  }
+  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: t("machineMetrics.memory"),
+          value: `${formatBytes(metrics.memUsedBytes)} / ${formatBytes(metrics.memTotalBytes)}`,
+          fillPct: memPct2,
+          tone: toneFor(memPct2)
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        Meter,
+        {
+          label: t("machineMetrics.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: t("machineMetrics.cpu"),
+          value: `${metrics.cpuPct.toFixed(0)}%`,
+          fillPct: metrics.cpuPct,
+          tone: toneFor(metrics.cpuPct)
+        }
+      ),
+      hasGpu ? /* @__PURE__ */ jsx2(
+        Meter,
+        {
+          label: t("machineMetrics.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 {
+  AlertTriangleIcon,
+  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(msg, state, metrics, now = Date.now()) {
+  if (state === "offline") {
+    return {
+      level: "offline",
+      label: msg("machines.health.offline"),
+      reason: msg("machines.health.notReachable"),
+      stale: true
+    };
+  }
+  if (state === "enrolling") {
+    return {
+      level: "unknown",
+      label: msg("machines.health.enrolling"),
+      reason: msg("machines.health.completingEnrollment"),
+      stale: false
+    };
+  }
+  const stale = metrics ? now - new Date(metrics.sampledAt).getTime() > STALE_AFTER_MS : true;
+  if (state === "reconnecting") {
+    return {
+      level: "degraded",
+      label: msg("machines.health.reconnecting"),
+      reason: msg("machines.health.reEstablishingLink"),
+      stale
+    };
+  }
+  if (!metrics) {
+    return {
+      level: "unknown",
+      label: msg("machines.health.online"),
+      reason: msg("machines.health.awaitingFirstSample"),
+      stale
+    };
+  }
+  if (stale) {
+    return {
+      level: "degraded",
+      label: msg("machines.health.telemetryStale"),
+      reason: msg("machines.health.noRecentSample"),
+      stale: true
+    };
+  }
+  const memPct2 = pct2(metrics.memUsedBytes, metrics.memTotalBytes);
+  const diskPct2 = pct2(metrics.diskUsedBytes, metrics.diskTotalBytes);
+  const cpu = metrics.cpuPct;
+  const pressures = [
+    resolve(msg("machines.health.disk"), diskPct2, PRESSURE.disk),
+    resolve(msg("machines.health.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: msg("machines.health.critical"),
+      reason: worst.reason,
+      stale
+    };
+  if (worst.sev === 1)
+    return {
+      level: "degraded",
+      label: msg("machines.health.underLoad"),
+      reason: worst.reason,
+      stale
+    };
+  return {
+    level: "healthy",
+    label: msg("machines.health.healthy"),
+    reason: msg("machines.health.allSystemsNominal"),
+    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 t = useOpenGeniText();
+  const health = deriveHealth(t, state, metrics, now ?? Date.now());
+  const tone = HEALTH_TOKEN[health.level];
+  const badge = MACHINE_STATE_BADGE_META(t)[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/agent-status-icon.tsx
+import {
+  CircleAlertIcon,
+  CircleCheckIcon,
+  ClockIcon,
+  DownloadIcon,
+  LoaderCircleIcon,
+  TriangleAlertIcon
+} from "lucide-react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function AgentStatusIcon({ tone, className }) {
+  const size = cn("size-3.5 shrink-0", className);
+  switch (tone) {
+    case "ok":
+      return /* @__PURE__ */ jsx4(CircleCheckIcon, { className: cn(size, "text-og-status-idle"), "aria-hidden": true });
+    case "progress":
+      return /* @__PURE__ */ jsx4(LoaderCircleIcon, { className: cn(size, "animate-og-spin text-og-accent"), "aria-hidden": true });
+    case "waiting":
+      return /* @__PURE__ */ jsx4(ClockIcon, { className: cn(size, "text-og-fg-subtle"), "aria-hidden": true });
+    case "attention":
+      return /* @__PURE__ */ jsx4(TriangleAlertIcon, { className: cn(size, "text-og-status-waiting"), "aria-hidden": true });
+    case "failed":
+      return /* @__PURE__ */ jsx4(CircleAlertIcon, { className: cn(size, "text-og-status-failed"), "aria-hidden": true });
+    default:
+      return /* @__PURE__ */ jsx4(DownloadIcon, { className: cn(size, "text-og-fg-subtle"), "aria-hidden": true });
+  }
+}
+
+// src/components/machines/machine-status.ts
+var UPDATE_CONFIRMATION_GRACE_MS = 3e4;
+var UPDATE_HOLD_ATTENTION_MS = 10 * 6e4;
+function elapsedDuration(t, ms) {
+  const minutes = Math.max(1, Math.floor(ms / 6e4));
+  return minutes < 60 ? t("lib.format.minutes", { count: minutes }) : minutes < 1440 ? t("lib.format.hours", { count: Math.floor(minutes / 60) }) : t("lib.format.days", { count: Math.floor(minutes / 1440) });
+}
+function updateWaitingReason(t, update, now) {
+  const labels = {
+    browser_action: t("machines.machineStatus.blockerBrowserAction"),
+    browser_session: t("machines.machineStatus.blockerBrowserSession"),
+    browser_creation: t("machines.machineStatus.blockerBrowserCreation"),
+    browser_closing: t("machines.machineStatus.blockerBrowserClosing"),
+    browser_recovery: t("machines.machineStatus.blockerBrowserRecovery"),
+    browser_authentication: t("machines.machineStatus.blockerBrowserAuth"),
+    browser_state_transfer: t("machines.machineStatus.blockerBrowserTransfer"),
+    computer_action: t("machines.machineStatus.blockerComputerAction"),
+    computer_virtual_seat: t("machines.machineStatus.blockerVirtualDesktop"),
+    computer_session: t("machines.machineStatus.blockerComputerSession"),
+    computer_creation: t("machines.machineStatus.blockerComputerCreation"),
+    computer_closing: t("machines.machineStatus.blockerComputerClosing"),
+    computer_seat_transfer: t("machines.machineStatus.blockerSeatTransfer"),
+    controller_request: t("machines.machineStatus.blockerControllerRequest"),
+    controller_lifecycle: t("machines.machineStatus.blockerControllerLifecycle"),
+    controller_stream: t("machines.machineStatus.blockerStream"),
+    controller_producer: t("machines.machineStatus.blockerProducer"),
+    controller_previous_update: t("machines.machineStatus.blockerPreviousUpdate"),
+    other_work: t("machines.machineStatus.blockerOtherWork"),
+    upload: t("machines.machineStatus.blockerUpload"),
+    native_request: t("machines.machineStatus.blockerNativeRequest"),
+    native_operation: t("machines.machineStatus.blockerNativeOperation"),
+    native_light_running: t("machines.machineStatus.blockerNativeRequest"),
+    native_light_queued: t("machines.machineStatus.blockerQueuedRequest"),
+    native_heavy_running: t("machines.machineStatus.blockerNativeOperation"),
+    native_heavy_queued: t("machines.machineStatus.blockerQueuedOperation")
+  };
+  const raw = update.blockers ?? [];
+  const native = raw.filter(
+    (blocker) => blocker.kind.startsWith("native_") && !blocker.kind.includes("cleanup")
+  );
+  const blockers = raw.filter((blocker) => !native.includes(blocker));
+  if (native.length)
+    blockers.push({
+      kind: "native_work",
+      count: Math.max(...native.map((blocker) => blocker.count))
+    });
+  labels.native_work = t("machines.machineStatus.blockerNativeCounters");
+  if (blockers.length) {
+    const details = blockers.map((blocker) => {
+      const label = labels[blocker.kind] ?? (blocker.kind.includes("cleanup") ? t("machines.machineStatus.blockerCleanup") : t("machines.machineStatus.blockerUnknown"));
+      return t("machines.machineStatus.blockerCount", { label, count: blocker.count });
+    }).join("; ");
+    return t("machines.machineStatus.reportedBlockers", {
+      details,
+      duration: elapsedDuration(t, now - Date.parse(update.updatedAt))
+    });
+  }
+  switch (update.errorCode) {
+    case "update_busy_interactions":
+    case "update_busy_browsers":
+      return t("machines.machineStatus.waitingForInteractions");
+    case "update_busy_uploads":
+      return t("machines.machineStatus.waitingForUploads");
+    case "update_busy_updating":
+      return t("machines.machineStatus.waitingForAnotherUpdate");
+    default:
+      return t("machines.machineStatus.waitingForUnspecifiedWork");
+  }
+}
+function isPostponedUpdate(errorCode) {
+  return typeof errorCode === "string" && errorCode.startsWith("update_busy");
+}
+var FAILURE_REASON = (t) => ({
+  update_cleanup_unconfirmed: t("machines.machineStatus.previousWorkCleanupUnconfirmed"),
+  update_state_unavailable: t("machines.machineStatus.theAgentCouldnTCheck"),
+  agent_offline: t("machines.machineStatus.theMachineWasOffline"),
+  update_dispatch_rejected: t("machines.machineStatus.theAgentRefusedTheRequest"),
+  invalid_agent_response: t("machines.machineStatus.theAgentSentAnUnexpected")
+});
+function failureReason(t, code) {
+  if (!code) return null;
+  return FAILURE_REASON(t)[code] ?? code.replaceAll("_", " ");
+}
+var ACTIVE_STATUSES = /* @__PURE__ */ new Set([
+  "requested",
+  "accepted",
+  "waiting_for_idle",
+  "downloading",
+  "verifying",
+  "applying",
+  "restarting"
+]);
+function describeAgentRuntime(t, runtime, now, online = true) {
+  const installed = runtime.installedVersion;
+  const title = installed ? t("machines.machineStatus.agentVInstalled", { installed }) : t("machines.machineStatus.agentVersionUnknown");
+  const blocked = runtime.updateBlockedReason?.trim() || null;
+  const update = runtime.update;
+  const target = update ? `v${update.targetVersion}` : null;
+  const alreadyInstalled = update !== null && (update.targetVersion === installed || runtime.versionState === "current" || runtime.versionState === "ahead");
+  if (update && ACTIVE_STATUSES.has(update.status) && !alreadyInstalled) {
+    const base = { title, tone: "progress", note: null, action: null };
+    switch (update.status) {
+      case "requested": {
+        const stalled = now - new Date(update.updatedAt).getTime() >= UPDATE_CONFIRMATION_GRACE_MS;
+        return stalled ? {
+          title,
+          status: t("machines.machineStatus.theAgentHasnTConfirmed", { target }),
+          tone: "attention",
+          note: null,
+          action: { kind: "resend", label: t("machines.machineStatus.sendAgain") }
+        } : { ...base, status: t("machines.machineStatus.sendingTheUpdateToTarget", { target }) };
+      }
+      case "accepted":
+        return { ...base, status: t("machines.machineStatus.updatingToTarget", { target }) };
+      case "waiting_for_idle": {
+        const heldMs = Math.max(0, now - Date.parse(update.requestedAt));
+        const duration = elapsedDuration(t, heldMs);
+        return {
+          ...base,
+          tone: !online ? "muted" : heldMs >= UPDATE_HOLD_ATTENTION_MS ? "attention" : "waiting",
+          status: !online ? t("machines.machineStatus.offlineUpdateReport") : heldMs >= UPDATE_HOLD_ATTENTION_MS ? t("machines.machineStatus.updateHeldDuration", { target, duration }) : t("machines.machineStatus.updatesToTargetWhenCurrent", { target }),
+          note: blocked ?? updateWaitingReason(t, update, now)
+        };
+      }
+      case "downloading":
+        return { ...base, status: `Downloading ${target}\u2026` };
+      case "verifying":
+        return { ...base, status: `Verifying ${target}\u2026` };
+      case "applying":
+        return { ...base, status: `Installing ${target}\u2026` };
+      default:
+        return { ...base, status: t("machines.machineStatus.restartingTheAgent") };
+    }
+  }
+  if (update?.status === "failed" && !alreadyInstalled) {
+    if (isPostponedUpdate(update.errorCode)) {
+      const browsersWouldClose = update.errorCode === "update_busy_browsers";
+      return {
+        title,
+        status: browsersWouldClose ? t("machines.machineStatus.updateToTargetPostponedOpen", { target }) : t("machines.machineStatus.updateToTargetPostponedWhile", { target }),
+        tone: "waiting",
+        note: blocked ?? (browsersWouldClose ? t("machines.machineStatus.theInstalledAgentClosesIts") : updateWaitingReason(t, update, now)),
+        action: blocked ? null : { kind: "update", label: t("machines.machineStatus.updateNow") }
+      };
+    }
+    const reason = failureReason(t, update.errorCode);
+    const retry = update.retryable && !blocked ? { kind: "retry", label: t("machines.machineStatus.tryAgain") } : null;
+    if (update.rolledBack) {
+      return {
+        title,
+        status: t("machines.machineStatus.couldnTUpdateToTarget", { target }),
+        tone: "attention",
+        note: blocked ?? (reason ? t("machines.machineStatus.reasonReason", { reason }) : null),
+        action: retry
+      };
+    }
+    return {
+      title,
+      status: t("machines.machineStatus.updateToTargetFailed", { target }),
+      tone: "failed",
+      note: blocked ?? (reason ? t("machines.machineStatus.reasonReason", { reason }) : null),
+      action: retry
+    };
+  }
+  const desired = runtime.desiredVersion;
+  switch (runtime.versionState) {
+    case "current":
+      return {
+        title,
+        status: runtime.updateChannel === "beta" ? t("machines.machineStatus.upToDateBeta") : t("machines.machineStatus.upToDate"),
+        tone: "ok",
+        note: null,
+        action: null
+      };
+    case "ahead":
+      return {
+        title,
+        status: desired ? t("machines.machineStatus.newerThanTheReleasedV", { desired }) : t("machines.machineStatus.newerThanTheRelease"),
+        tone: "muted",
+        note: null,
+        action: null
+      };
+    case "unknown":
+      return {
+        title,
+        status: desired ? t("machines.machineStatus.latestIsVDesired", { desired }) : t("machines.machineStatus.noReleaseConfigured"),
+        tone: "muted",
+        note: blocked,
+        action: null
+      };
+    default:
+      if (!desired || desired === installed) {
+        return {
+          title,
+          status: t("machines.machineStatus.upToDate"),
+          tone: "ok",
+          note: null,
+          action: null
+        };
+      }
+      return {
+        title,
+        status: `v${desired} available`,
+        tone: "waiting",
+        note: blocked,
+        action: blocked ? null : { kind: "update", label: t("machines.machineStatus.update") }
+      };
+  }
+}
+var RUNNER_CONFLICT_ACTIVE_MS = 2 * 6e4;
+function runnerConflict(authority, now) {
+  if (authority.duplicateRunnerDeniedCount <= 0) return null;
+  const lastAt = authority.duplicateRunnerDeniedAt;
+  const last = lastAt ? new Date(lastAt).getTime() : Number.NaN;
+  return {
+    active: Number.isFinite(last) && now - last < RUNNER_CONFLICT_ACTIVE_MS,
+    count: authority.duplicateRunnerDeniedCount,
+    lastAt
+  };
+}
+function describeAgentConnection(t, authority) {
+  if (authority.state !== "active" && authority.authenticationError === "credentials_expired") {
+    return {
+      label: t("machines.machineStatus.credentialsExpired"),
+      detail: t("machines.machineStatus.credentialsRecovery")
+    };
+  }
+  const label = authority.state === "active" ? t("machines.machineStatus.agentConnected") : authority.state === "expired" ? t("machines.machineStatus.agentConnectionLapsed") : t("machines.machineStatus.agentNotConnectedYet");
+  const n = authority.supersededCount;
+  return {
+    label,
+    detail: authority.state === "expired" || authority.state === "unclaimed" ? t("machines.machineStatus.offlineRecovery") : n > 0 ? t("machines.machineStatus.reconnectedTimesSinceSetup", { count: n }) : null
+  };
+}
+var STATUS_TONE_TEXT = {
+  ok: "text-og-status-idle",
+  progress: "text-og-accent",
+  waiting: "text-og-fg-muted",
+  attention: "text-og-status-waiting",
+  failed: "text-og-status-failed",
+  muted: "text-og-fg-subtle"
+};
+
+// src/components/machines/metric-sparkline.tsx
+import { jsx as jsx5, 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__ */ jsx5("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__ */ jsx5("defs", { children: /* @__PURE__ */ jsxs4("linearGradient", { id: gid, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsx5("stop", { offset: "0%", stopColor: color, stopOpacity: "0.22" }),
+          /* @__PURE__ */ jsx5("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
+        ] }) }),
+        /* @__PURE__ */ jsx5("path", { d: `${d} L${last.x},${vh} L${xy[0].x},${vh} Z`, fill: `url(#${gid})` }),
+        /* @__PURE__ */ jsx5(
+          "path",
+          {
+            d,
+            fill: "none",
+            stroke: color,
+            strokeWidth: 1.25,
+            strokeLinejoin: "round",
+            strokeLinecap: "round",
+            vectorEffect: "non-scaling-stroke"
+          }
+        ),
+        /* @__PURE__ */ jsx5("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 jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function KindIcon({ machine }) {
+  if (machine.kind === "local" || machine.kind === "selfhosted")
+    return /* @__PURE__ */ jsx6(LaptopIcon, { className: "size-4 text-og-fg-subtle", "aria-hidden": true });
+  if (machine.kind === "docker" || machine.isSessionGroup)
+    return /* @__PURE__ */ jsx6(ServerIcon, { className: "size-4 text-og-fg-subtle", "aria-hidden": true });
+  if (machine.kind === "modal") return /* @__PURE__ */ jsx6(CpuIcon, { className: "size-4 text-og-fg-subtle", "aria-hidden": true });
+  return /* @__PURE__ */ jsx6(ServerIcon, { className: "size-4 text-og-fg-subtle", "aria-hidden": true });
+}
+function MachineCard({
+  machine,
+  onAttach,
+  attaching,
+  onUpdateAgent,
+  updatingAgent,
+  series,
+  onOpenDetail,
+  now,
+  className
+}) {
+  const msg = useOpenGeniText();
+  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(msg, 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);
+  const runtime = machine.runtime;
+  const agent = runtime ? describeAgentRuntime(
+    msg,
+    runtime,
+    clockNow,
+    connectionStatusForState(machine.state) === "online"
+  ) : null;
+  const updateAction = agent?.action && machine.enrollmentId && onUpdateAgent && !offline ? agent.action : null;
+  const conflict = runnerConflict(machine.connectionAuthority, clockNow);
+  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-hidden",
+        machine.active && "border-og-accent/40",
+        className
+      ),
+      children: [
+        machine.active ? /* @__PURE__ */ jsx6("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__ */ jsx6("span", { className: "mt-0.5 shrink-0", children: /* @__PURE__ */ jsx6(KindIcon, { machine }) }),
+            /* @__PURE__ */ jsxs5("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx6("span", { className: "truncate text-og-base font-medium text-og-fg", children: machine.name }),
+                machine.active ? /* @__PURE__ */ jsx6(
+                  "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: msg("machineCard.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__ */ jsx6("span", { "data-machine-scope": machine.scope, children: machineScopeLabel(msg, machine.scope) }),
+                /* @__PURE__ */ jsx6("span", { "aria-hidden": true, children: "\xB7" }),
+                /* @__PURE__ */ jsx6("span", { className: "capitalize", children: machine.kind }),
+                /* @__PURE__ */ jsx6("span", { "aria-hidden": true, children: "\xB7" }),
+                /* @__PURE__ */ jsxs5("span", { className: "font-og-mono", children: [
+                  machine.os,
+                  "/",
+                  machine.arch
+                ] }),
+                /* @__PURE__ */ jsx6("span", { "aria-hidden": true, children: "\xB7" }),
+                /* @__PURE__ */ jsxs5("span", { className: "inline-flex items-center gap-1", children: [
+                  machine.hasDisplay ? /* @__PURE__ */ jsx6(MonitorIcon, { className: "size-3", "aria-hidden": true }) : /* @__PURE__ */ jsx6(MonitorOffIcon, { className: "size-3", "aria-hidden": true }),
+                  machine.hasDisplay ? msg("machineCard.display") : msg("machineCard.headless")
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx6(
+            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__ */ jsx6(UsersIcon, { className: "size-3.5 shrink-0 text-og-accent", "aria-hidden": true }),
+              msg("machineCard.sharedSharedsessioncountSessionsAreOn", {
+                sharedSessionCount: machine.sharedSessionCount
+              })
+            ]
+          }
+        ) : null,
+        conflict?.active ? /* @__PURE__ */ jsxs5(
+          "p",
+          {
+            "data-runner-conflict": true,
+            className: "flex items-start gap-1.5 rounded-og-md border border-og-status-waiting/30 bg-og-status-waiting/5 px-2.5 py-1.5 text-og-xs text-og-fg-muted",
+            children: [
+              /* @__PURE__ */ jsx6(
+                AlertTriangleIcon,
+                {
+                  className: "mt-px size-3.5 shrink-0 text-og-status-waiting",
+                  "aria-hidden": true
+                }
+              ),
+              /* @__PURE__ */ jsx6("span", { children: msg("machineCard.aSecondCopyOfThe") })
+            ]
+          }
+        ) : null,
+        agent ? /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            "data-agent-runtime": true,
+            className: "flex items-center justify-between gap-3 rounded-og-md border border-og-border/70 bg-og-surface-2/35 px-2.5 py-2 text-og-xs",
+            children: [
+              /* @__PURE__ */ jsxs5("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1.5 text-og-fg-muted", children: [
+                  /* @__PURE__ */ jsx6(AgentStatusIcon, { tone: agent.tone }),
+                  /* @__PURE__ */ jsx6("span", { className: "truncate", children: agent.title })
+                ] }),
+                /* @__PURE__ */ jsx6(
+                  "p",
+                  {
+                    "data-agent-status": agent.tone,
+                    className: cn("mt-0.5", STATUS_TONE_TEXT[agent.tone]),
+                    children: agent.status
+                  }
+                ),
+                agent.note ? /* @__PURE__ */ jsx6("p", { className: "mt-1 text-og-fg-muted", children: agent.note }) : null
+              ] }),
+              updateAction ? /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  type: "button",
+                  "data-update-agent": true,
+                  "data-update-action": updateAction.kind,
+                  disabled: updatingAgent,
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    onUpdateAgent?.(machine);
+                  },
+                  className: "shrink-0 rounded-og-sm border border-og-border px-2 py-1 font-medium text-og-fg-muted transition-colors hover:border-og-border-strong hover:text-og-fg disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:min-h-11",
+                  children: updatingAgent ? msg("machineCard.starting") : updateAction.label
+                }
+              ) : null
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsx6(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__ */ jsx6("span", { children: msg("machineCard.cpuLast15m") }),
+            openable ? /* @__PURE__ */ jsxs5("span", { className: "flex items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100", children: [
+              msg("machineCard.telemetry"),
+              " ",
+              /* @__PURE__ */ jsx6(ArrowRightIcon, { className: "size-2.5", "aria-hidden": true })
+            ] }) : null
+          ] }),
+          /* @__PURE__ */ jsx6(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__ */ jsx6("span", { className: "inline-flex items-center gap-1.5", children: sampledAgo ? /* @__PURE__ */ jsxs5(Fragment, { children: [
+            /* @__PURE__ */ jsx6(
+              "span",
+              {
+                className: cn(
+                  "size-1.5 rounded-full",
+                  sampledAgo === "now" ? "bg-og-status-idle" : "bg-og-fg-subtle"
+                ),
+                "aria-hidden": true
+              }
+            ),
+            sampledAgo === "now" ? msg("machineCard.live") : msg("machineCard.updatedSampledagoAgo", { sampledAgo })
+          ] }) : machine.lastSeenAt ? /* @__PURE__ */ jsxs5(Fragment, { children: [
+            msg("machineCard.lastSeen"),
+            " ",
+            formatRelativeTime(msg, machine.lastSeenAt, new Date(clockNow))
+          ] }) : msg("machineCard.neverConnected") }),
+          machine.active ? /* @__PURE__ */ jsx6("span", { className: "text-og-accent", children: msg("machineCard.routingHere") }) : attachable ? /* @__PURE__ */ jsx6(
+            "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 ? msg("machineCard.switching") : msg("machineCard.attach")
+            }
+          ) : /* @__PURE__ */ jsx6("span", { className: "text-og-fg-subtle/70", children: offline ? msg("machineCard.unavailable") : "\u2014" })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/machines/metric-history-chart.tsx
+import { useLayoutEffect, useRef, useState } from "react";
+import { jsx as jsx7, 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: rangeLabelProp,
+  className
+}) {
+  const msg = useOpenGeniText();
+  const rangeLabel = rangeLabelProp === void 0 ? msg("machines.metricHistoryChart.inThisRange") : rangeLabelProp;
+  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__ */ jsx7("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx7("span", { className: "text-og-xs text-og-fg-subtle", children: msg("machines.metricHistoryChart.noSamplesRangelabel", { 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__ */ jsx7("defs", { children: /* @__PURE__ */ jsxs6("linearGradient", { id: gid, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                /* @__PURE__ */ jsx7("stop", { offset: "0%", stopColor: color, stopOpacity: "0.26" }),
+                /* @__PURE__ */ jsx7("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
+              ] }) }),
+              yTicks.map((v, i) => {
+                const y = yOf(v);
+                return /* @__PURE__ */ jsxs6("g", { children: [
+                  /* @__PURE__ */ jsx7(
+                    "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__ */ jsx7(
+                    "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__ */ jsx7(
+                  "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__ */ jsx7(
+                "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__ */ jsx7("path", { d: area, fill: `url(#${gid})` }),
+              /* @__PURE__ */ jsx7(
+                "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__ */ jsx7("circle", { cx: p.x, cy: p.y, r: 2.5, fill: color }, `m-${p.t}`)),
+              hoverPt && /* @__PURE__ */ jsxs6("g", { pointerEvents: "none", children: [
+                /* @__PURE__ */ jsx7(
+                  "line",
+                  {
+                    x1: hoverPt.x,
+                    x2: hoverPt.x,
+                    y1: PAD.top,
+                    y2: PAD.top + plotH,
+                    stroke: "var(--og-color-border-strong)",
+                    strokeWidth: 1
+                  }
+                ),
+                /* @__PURE__ */ jsx7(
+                  "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__ */ jsx7("span", { className: "font-og-mono text-og-sm font-medium tabular-nums text-og-fg", children: fmt(hoverPt.v) }),
+              /* @__PURE__ */ jsx7("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,
+  BuildingIcon,
+  ChevronRightIcon,
+  CpuIcon as CpuIcon2,
+  LayersIcon,
+  LaptopIcon as LaptopIcon2,
+  PlugIcon,
+  RadioIcon,
+  ServerIcon as ServerIcon2,
+  TriangleAlertIcon as TriangleAlertIcon2,
+  Trash2Icon,
+  UserIcon,
+  UsersIcon as UsersIcon2
+} from "lucide-react";
+
+// src/components/machines/series.ts
+var METRIC_WINDOWS = ["15m", "1h", "6h", "24h"];
+var WINDOW_LABEL = (msg) => ({
+  "15m": msg("machines.series.inTheLast15Min"),
+  "1h": msg("machines.series.inTheLastHour"),
+  "6h": msg("machines.series.inTheLast6Hours"),
+  "24h": msg("machines.series.inTheLast24Hours")
+});
+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 = (msg) => [
+  {
+    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) => msg("machines.series.runqueueInRunQueue", { runQueue: s.runQueue })
+  },
+  {
+    key: "mem",
+    title: msg("machines.series.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: msg("machines.series.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: msg("machines.series.loadAverage"),
+    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-operation-policy.tsx
+import { AlertTriangleIcon as AlertTriangleIcon2, Loader2Icon } from "lucide-react";
+import { useEffect, useState as useState2 } from "react";
+import { errorMessage } from "@opengeni/contracts/values";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function fieldValue(value) {
+  return value === null ? "" : String(value);
+}
+function parseByteCount(t, label, value) {
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  if (!/^\d+$/.test(trimmed)) {
+    throw new Error(t("machines.machineOperationPolicy.bytesNotWholeNumber", { label }));
+  }
+  const parsed = Number(trimmed);
+  if (!Number.isSafeInteger(parsed) || parsed <= 0) {
+    throw new Error(t("machines.machineOperationPolicy.bytesNotPositive", { label }));
+  }
+  return parsed;
+}
+function parseCpuMillicores(t, value) {
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  if (!/^\d+$/.test(trimmed)) {
+    throw new Error(t("machines.machineOperationPolicy.cpuNotWholeNumber"));
+  }
+  const parsed = Number(trimmed);
+  if (!Number.isSafeInteger(parsed) || parsed <= 0 || parsed > 4294967295) {
+    throw new Error(t("machines.machineOperationPolicy.cpuOutOfRange"));
+  }
+  return parsed;
+}
+function MachineOperationPolicyEditor({
+  policy,
+  memorySupported,
+  cpuSupported,
+  saving = false,
+  onSave
+}) {
+  const t = useOpenGeniText();
+  const [memoryMaxBytes, setMemoryMaxBytes] = useState2(fieldValue(policy.memoryMaxBytes));
+  const [memoryHighBytes, setMemoryHighBytes] = useState2(fieldValue(policy.memoryHighBytes));
+  const [cpuMaxMillicores, setCpuMaxMillicores] = useState2(fieldValue(policy.cpuMaxMillicores));
+  const [validationError, setValidationError] = useState2(null);
+  useEffect(() => {
+    setMemoryMaxBytes(fieldValue(policy.memoryMaxBytes));
+    setMemoryHighBytes(fieldValue(policy.memoryHighBytes));
+    setCpuMaxMillicores(fieldValue(policy.cpuMaxMillicores));
+    setValidationError(null);
+  }, [policy.memoryMaxBytes, policy.memoryHighBytes, policy.cpuMaxMillicores, policy.revision]);
+  const submit = async (event) => {
+    event.preventDefault();
+    try {
+      const max = parseByteCount(
+        t,
+        t("machines.machineOperationPolicy.hardCeiling"),
+        memoryMaxBytes
+      );
+      const high = parseByteCount(
+        t,
+        t("machines.machineOperationPolicy.reclaimThreshold"),
+        memoryHighBytes
+      );
+      if (max !== null && high !== null && high > max) {
+        throw new Error(t("machines.machineOperationPolicy.reclaimAboveCeiling"));
+      }
+      const cpuMax = parseCpuMillicores(t, cpuMaxMillicores);
+      setValidationError(null);
+      await onSave({
+        memoryMaxBytes: max,
+        memoryHighBytes: high,
+        cpuMaxMillicores: cpuMax,
+        expectedRevision: policy.revision
+      });
+    } catch (error) {
+      setValidationError(errorMessage(error));
+    }
+  };
+  const configured = policy.memoryMaxBytes !== null || policy.memoryHighBytes !== null || policy.cpuMaxMillicores !== null;
+  const memoryConfigured = policy.memoryMaxBytes !== null || policy.memoryHighBytes !== null;
+  const unsupportedMemory = memoryConfigured && !memorySupported;
+  const unsupportedCpu = policy.cpuMaxMillicores !== null && (!memorySupported || !cpuSupported);
+  return /* @__PURE__ */ jsxs7(
+    "section",
+    {
+      "data-machine-operation-policy": true,
+      className: "rounded-og-lg border border-og-border bg-og-surface-1 p-4 shadow-og-sm",
+      children: [
+        /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx8("h2", { className: "text-og-sm font-semibold text-og-fg", children: t("machines.machineOperationPolicy.perCommandResourcePolicy") }),
+          /* @__PURE__ */ jsx8("p", { className: "text-og-xs leading-relaxed text-og-fg-muted", children: t("machines.machineOperationPolicy.optionalLimitsAppliedSeparatelyTo") })
+        ] }),
+        configured && (unsupportedMemory || unsupportedCpu) ? /* @__PURE__ */ jsxs7("div", { className: "mt-3 flex gap-2 rounded-og-md border border-og-status-failed/40 bg-og-status-failed/5 p-3 text-og-xs text-og-status-failed", children: [
+          /* @__PURE__ */ jsx8(AlertTriangleIcon2, { className: "mt-0.5 size-3.5 shrink-0", "aria-hidden": true }),
+          /* @__PURE__ */ jsxs7("span", { children: [
+            unsupportedCpu ? t("machines.machineOperationPolicy.thisRunnerCannotEnforceThe") : t("machines.machineOperationPolicy.thisRunnerCannotEnforceThe2"),
+            " ",
+            t("machines.machineOperationPolicy.commandExecutionFailsClosedUntil")
+          ] })
+        ] }) : null,
+        /* @__PURE__ */ jsxs7("form", { className: "mt-4 grid gap-3 sm:grid-cols-2", onSubmit: submit, children: [
+          /* @__PURE__ */ jsxs7("label", { className: "flex flex-col gap-1.5 text-og-xs text-og-fg-muted", children: [
+            t("machines.machineOperationPolicy.hardCeilingBytes"),
+            /* @__PURE__ */ jsx8(
+              "input",
+              {
+                inputMode: "numeric",
+                pattern: "[0-9]*",
+                value: memoryMaxBytes,
+                onChange: (event) => setMemoryMaxBytes(event.target.value),
+                placeholder: t("machines.machineOperationPolicy.unlimited"),
+                disabled: saving,
+                className: "min-h-9 rounded-og-sm border border-og-border bg-og-bg px-2.5 font-og-mono text-og-sm text-og-fg outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent/50 disabled:opacity-60"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs7("label", { className: "flex flex-col gap-1.5 text-og-xs text-og-fg-muted", children: [
+            t("machines.machineOperationPolicy.reclaimThresholdBytes"),
+            /* @__PURE__ */ jsx8(
+              "input",
+              {
+                inputMode: "numeric",
+                pattern: "[0-9]*",
+                value: memoryHighBytes,
+                onChange: (event) => setMemoryHighBytes(event.target.value),
+                placeholder: t("machines.machineOperationPolicy.unlimited"),
+                disabled: saving,
+                className: "min-h-9 rounded-og-sm border border-og-border bg-og-bg px-2.5 font-og-mono text-og-sm text-og-fg outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent/50 disabled:opacity-60"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs7("label", { className: "flex flex-col gap-1.5 text-og-xs text-og-fg-muted", children: [
+            t("machines.machineOperationPolicy.cpuMaximumMillicores"),
+            /* @__PURE__ */ jsx8(
+              "input",
+              {
+                inputMode: "numeric",
+                pattern: "[0-9]*",
+                value: cpuMaxMillicores,
+                onChange: (event) => setCpuMaxMillicores(event.target.value),
+                placeholder: t("machines.machineOperationPolicy.unlimited"),
+                disabled: saving,
+                className: "min-h-9 rounded-og-sm border border-og-border bg-og-bg px-2.5 font-og-mono text-og-sm text-og-fg outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent/50 disabled:opacity-60"
+              }
+            ),
+            /* @__PURE__ */ jsx8("span", { children: t("machines.machineOperationPolicy.n1000MillicoresOneCpuCore") })
+          ] }),
+          /* @__PURE__ */ jsxs7("div", { className: "flex min-h-9 items-center justify-between gap-3 sm:col-span-2", children: [
+            /* @__PURE__ */ jsx8(
+              "span",
+              {
+                role: validationError ? "alert" : void 0,
+                className: "text-og-xs text-og-status-failed",
+                children: validationError
+              }
+            ),
+            /* @__PURE__ */ jsxs7(
+              "button",
+              {
+                type: "submit",
+                disabled: saving,
+                className: "inline-flex min-h-9 items-center gap-1.5 rounded-og-sm border border-og-primary-border bg-og-primary text-og-primary-fg px-3 py-1.5 text-og-xs font-medium transition-colors hover:bg-og-primary-hover disabled:cursor-not-allowed disabled:opacity-60",
+                children: [
+                  saving ? /* @__PURE__ */ jsx8(Loader2Icon, { className: "size-3.5 animate-spin", "aria-hidden": true }) : null,
+                  t("machines.machineOperationPolicy.savePolicy")
+                ]
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/machines/machine-detail.tsx
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var AUDIENCE = (t) => ({
+  user: {
+    label: t("machines.machineDetail.onlyMe"),
+    description: t("machines.machineDetail.onlyItsOwnerCanRun"),
+    Icon: UserIcon
+  },
+  workspace: {
+    label: t("machines.machineDetail.thisWorkspace"),
+    description: t("machines.machineDetail.everyoneInThisWorkspaceCan"),
+    Icon: UsersIcon2
+  },
+  organization: {
+    label: t("machines.machineDetail.wholeOrganization"),
+    description: t("machines.machineDetail.membersCanUseItWhere"),
+    Icon: BuildingIcon
+  }
+});
+function MachineAudienceRow({
+  machine,
+  onChange
+}) {
+  const t = useOpenGeniText();
+  const audience = AUDIENCE(t)[machine.scope];
+  const changeable = onChange !== void 0 && machine.scope !== "organization";
+  const content = /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsx9(audience.Icon, { className: "size-4 shrink-0 text-og-fg-subtle", "aria-hidden": true }),
+    /* @__PURE__ */ jsxs8("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5 text-left", children: [
+      /* @__PURE__ */ jsx9("span", { className: "text-og-sm font-medium text-og-fg", children: t("machines.machineDetail.whoCanUseIt") }),
+      /* @__PURE__ */ jsx9("span", { className: "text-og-xs text-og-fg-muted", children: audience.description })
+    ] }),
+    /* @__PURE__ */ jsx9("span", { className: "shrink-0 text-og-sm text-og-fg-muted", children: audience.label }),
+    changeable ? /* @__PURE__ */ jsx9(ChevronRightIcon, { className: "size-4 shrink-0 text-og-fg-subtle", "aria-hidden": true }) : null
+  ] });
+  const frame = "flex w-full min-h-14 items-center gap-3 rounded-og-lg border border-og-border bg-og-surface-1 px-4 py-3 shadow-og-sm";
+  return changeable ? /* @__PURE__ */ jsx9(
+    "button",
+    {
+      type: "button",
+      "data-machine-audience": machine.scope,
+      onClick: () => onChange(machine),
+      "aria-label": t("machines.machineDetail.whoCanUseNameLabel", {
+        name: machine.name,
+        label: audience.label
+      }),
+      className: cn(
+        frame,
+        "transition-colors hover:bg-og-surface-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent/50"
+      ),
+      children: content
+    }
+  ) : /* @__PURE__ */ jsx9("div", { "data-machine-audience": machine.scope, className: frame, children: content });
+}
+function MachineReachRow({
+  machine,
+  summary,
+  onChange
+}) {
+  const t = useOpenGeniText();
+  const content = /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsx9(LayersIcon, { className: "size-4 shrink-0 text-og-fg-subtle", "aria-hidden": true }),
+    /* @__PURE__ */ jsxs8("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5 text-left", children: [
+      /* @__PURE__ */ jsx9("span", { className: "text-og-sm font-medium text-og-fg", children: t("machines.machineDetail.availableIn") }),
+      /* @__PURE__ */ jsx9("span", { className: "text-og-xs text-og-fg-muted", children: t("machines.machineDetail.organizationOwnersChooseWhere") })
+    ] }),
+    /* @__PURE__ */ jsx9("span", { className: "shrink-0 text-og-sm text-og-fg-muted", children: summary }),
+    onChange ? /* @__PURE__ */ jsx9(ChevronRightIcon, { className: "size-4 shrink-0 text-og-fg-subtle", "aria-hidden": true }) : null
+  ] });
+  const frame = "flex w-full min-h-14 items-center gap-3 rounded-og-lg border border-og-border bg-og-surface-1 px-4 py-3 shadow-og-sm";
+  return onChange ? /* @__PURE__ */ jsx9(
+    "button",
+    {
+      type: "button",
+      "data-machine-reach": true,
+      onClick: () => onChange(machine),
+      "aria-label": t("machines.machineDetail.availableInNameLabel", {
+        name: machine.name,
+        summary
+      }),
+      className: cn(
+        frame,
+        "transition-colors hover:bg-og-surface-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent/50"
+      ),
+      children: content
+    }
+  ) : /* @__PURE__ */ jsx9("div", { "data-machine-reach": true, className: frame, children: content });
+}
+function KindIcon2({ kind, session }) {
+  if (kind === "local" || kind === "selfhosted")
+    return /* @__PURE__ */ jsx9(LaptopIcon2, { className: "size-4 text-og-fg-subtle", "aria-hidden": true });
+  if (kind === "docker" || session)
+    return /* @__PURE__ */ jsx9(ServerIcon2, { className: "size-4 text-og-fg-subtle", "aria-hidden": true });
+  if (kind === "modal") return /* @__PURE__ */ jsx9(CpuIcon2, { className: "size-4 text-og-fg-subtle", "aria-hidden": true });
+  return /* @__PURE__ */ jsx9(ServerIcon2, { className: "size-4 text-og-fg-subtle", "aria-hidden": true });
+}
+function MachineAgentPanel({
+  machine,
+  now,
+  onUpdateAgent,
+  updatingAgent
+}) {
+  const t = useOpenGeniText();
+  const authority = machine.connectionAuthority;
+  const runtime = machine.runtime;
+  if (!runtime && authority.state === "not_applicable") return null;
+  const agent = runtime ? describeAgentRuntime(t, runtime, now, connectionStatusForState(machine.state) === "online") : null;
+  const action = agent?.action && machine.enrollmentId && onUpdateAgent && machine.state !== "offline" ? agent.action : null;
+  const connection = authority.state === "not_applicable" ? null : describeAgentConnection(t, authority);
+  const conflict = runnerConflict(authority, now);
+  const conflictAgo = conflict?.lastAt ? formatRelativeTime(t, conflict.lastAt, new Date(now)) : null;
+  return /* @__PURE__ */ jsxs8(
+    "section",
+    {
+      "data-machine-agent": true,
+      "aria-label": t("machines.machineDetail.agent"),
+      className: "flex flex-col divide-y divide-og-border rounded-og-lg border border-og-border bg-og-surface-1 shadow-og-sm",
+      children: [
+        agent ? /* @__PURE__ */ jsxs8("div", { "data-agent-runtime": true, className: "flex min-h-14 items-center gap-3 px-4 py-3", children: [
+          /* @__PURE__ */ jsx9(AgentStatusIcon, { tone: agent.tone, className: "size-4" }),
+          /* @__PURE__ */ jsxs8("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+            /* @__PURE__ */ jsx9("span", { className: "text-og-sm font-medium text-og-fg", children: agent.title }),
+            /* @__PURE__ */ jsx9(
+              "span",
+              {
+                "data-agent-status": agent.tone,
+                className: cn("text-og-xs", STATUS_TONE_TEXT[agent.tone]),
+                children: agent.status
+              }
+            ),
+            agent.note ? /* @__PURE__ */ jsx9("span", { className: "text-og-xs text-og-fg-muted", children: agent.note }) : null
+          ] }),
+          action ? /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "button",
+              "data-update-agent": true,
+              "data-update-action": action.kind,
+              disabled: updatingAgent,
+              onClick: () => onUpdateAgent?.(machine),
+              className: "inline-flex min-h-9 shrink-0 items-center rounded-og-sm border border-og-border px-3 py-1 text-og-xs font-medium text-og-fg-muted transition-colors hover:border-og-border-strong hover:text-og-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent/50 disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:min-h-11",
+              children: updatingAgent ? t("machines.machineDetail.starting") : action.label
+            }
+          ) : null
+        ] }) : null,
+        connection ? /* @__PURE__ */ jsxs8(
+          "div",
+          {
+            "data-connection-authority": authority.state,
+            className: "flex min-h-14 items-start gap-3 px-4 py-3",
+            children: [
+              /* @__PURE__ */ jsx9(PlugIcon, { className: "mt-0.5 size-4 shrink-0 text-og-fg-subtle", "aria-hidden": true }),
+              /* @__PURE__ */ jsxs8("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+                /* @__PURE__ */ jsx9("span", { className: "text-og-sm font-medium text-og-fg", children: connection.label }),
+                connection.detail ? /* @__PURE__ */ jsx9("span", { className: "text-og-xs text-og-fg-muted", children: connection.detail }) : null,
+                conflict?.active ? /* @__PURE__ */ jsxs8(
+                  "span",
+                  {
+                    "data-runner-conflict": "active",
+                    className: "mt-1 flex items-start gap-1.5 text-og-xs text-og-fg-muted",
+                    children: [
+                      /* @__PURE__ */ jsx9(
+                        TriangleAlertIcon2,
+                        {
+                          className: "mt-px size-3.5 shrink-0 text-og-status-waiting",
+                          "aria-hidden": true
+                        }
+                      ),
+                      t("machines.machineDetail.aSecondCopyOfThe")
+                    ]
+                  }
+                ) : conflict ? /* @__PURE__ */ jsxs8("span", { "data-runner-conflict": "past", className: "text-og-xs text-og-fg-subtle", children: [
+                  t("machines.machineDetail.keptOutExtraCopiesOf", { count: conflict.count }),
+                  conflictAgo ? t("machines.machineDetail.mostRecentlyValue", {
+                    value: conflictAgo === "now" ? t("machines.machineDetail.justNow") : `${conflictAgo} ago`
+                  }) : ""
+                ] }) : null
+              ] })
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function MachineDetail({
+  machine,
+  series,
+  window,
+  onWindowChange,
+  loadingSeries,
+  onBack,
+  onRemove,
+  onUpdateOperationPolicy,
+  updatingOperationPolicy,
+  onChangeAudience,
+  reachSummary,
+  onChangeReach,
+  whereItWorks,
+  onUpdateAgent,
+  updatingAgent,
+  now = Date.now(),
+  className
+}) {
+  const t = useOpenGeniText();
+  const health = deriveHealth(t, machine.state, machine.metrics, now);
+  const tone = HEALTH_TOKEN[health.level];
+  const latest = machine.metrics;
+  const sampledAgo = latest ? formatRelativeTime(t, latest.sampledAt, new Date(now)) : null;
+  const visible = METRICS(t).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__ */ jsxs8("div", { className: cn("og-root mx-auto flex w-full max-w-5xl flex-col gap-5", className), children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+        onBack && /* @__PURE__ */ jsx9(
+          "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": t("machines.machineDetail.backToMachines"),
+            children: /* @__PURE__ */ jsx9(ArrowLeftIcon, { className: "size-3.5", "aria-hidden": true })
+          }
+        ),
+        /* @__PURE__ */ jsx9(KindIcon2, { kind: machine.kind, session: machine.isSessionGroup }),
+        /* @__PURE__ */ jsx9("h1", { className: "truncate text-og-md font-semibold text-og-fg", children: machine.name }),
+        /* @__PURE__ */ jsxs8("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__ */ jsxs8("div", { className: "flex shrink-0 items-center gap-2", children: [
+        onRemove && machine.enrollmentId && !machine.isSessionGroup ? /* @__PURE__ */ jsxs8(
+          "button",
+          {
+            type: "button",
+            "data-remove-machine": true,
+            "aria-label": t("machines.machineDetail.removeMachineName", { name: machine.name }),
+            onClick: () => onRemove(machine),
+            className: "inline-flex min-h-9 items-center gap-1.5 rounded-og-sm border border-og-status-failed/40 px-2.5 py-1 font-medium text-og-xs text-og-status-failed transition-colors hover:bg-og-status-failed/10 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-status-failed/50 pointer-coarse:min-h-11",
+            children: [
+              /* @__PURE__ */ jsx9(Trash2Icon, { className: "size-3.5", "aria-hidden": true }),
+              /* @__PURE__ */ jsx9("span", { className: "hidden sm:inline", children: t("machines.machineDetail.removeMachine") })
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsx9("div", { className: "flex 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__ */ jsx9(
+          "button",
+          {
+            type: "button",
+            onClick: () => onWindowChange(w),
+            "data-active": w === window,
+            className: cn(
+              "rounded-og-sm px-2 py-1 font-og-mono text-og-xs transition-colors",
+              w === window ? "bg-og-surface-3 text-og-fg shadow-og-sm" : "text-og-fg-subtle hover:text-og-fg-muted"
+            ),
+            children: w
+          },
+          w
+        )) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        className: cn(
+          "relative flex flex-col gap-4 overflow-hidden rounded-og-lg border p-5 shadow-og-sm",
+          tone.soft
+        ),
+        children: [
+          /* @__PURE__ */ jsx9("span", { "aria-hidden": true, className: cn("absolute inset-y-0 left-0 w-1", tone.dot) }),
+          /* @__PURE__ */ jsxs8("div", { className: "flex flex-wrap items-center justify-between gap-3 pl-1", children: [
+            /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsxs8("span", { className: "relative flex size-3", children: [
+                healthPulses(health.level) && /* @__PURE__ */ jsx9(
+                  "span",
+                  {
+                    className: cn(
+                      "absolute inline-flex size-full animate-og-pulse rounded-full opacity-60",
+                      tone.dot
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx9("span", { className: cn("relative inline-flex size-3 rounded-full", tone.dot) })
+              ] }),
+              /* @__PURE__ */ jsxs8("div", { className: "flex flex-col", children: [
+                /* @__PURE__ */ jsx9("span", { className: cn("text-og-md font-semibold", tone.text), children: health.label }),
+                /* @__PURE__ */ jsx9("span", { className: "text-og-sm text-og-fg-muted", children: health.reason })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs8("div", { className: "flex items-start gap-5 pr-1", children: [
+              sampledAgo && /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-end gap-0.5", children: [
+                /* @__PURE__ */ jsx9("span", { className: "text-[10px] font-medium uppercase tracking-wide text-og-fg-subtle", children: t("machines.machineDetail.sampled") }),
+                /* @__PURE__ */ jsxs8("span", { className: "flex items-center gap-1 font-og-mono text-og-sm tabular-nums text-og-fg", children: [
+                  /* @__PURE__ */ jsx9(
+                    RadioIcon,
+                    {
+                      className: cn("size-3", health.stale ? "text-og-fg-subtle" : tone.text),
+                      "aria-hidden": true
+                    }
+                  ),
+                  sampledAgo === "now" ? t("machines.machineDetail.live") : t("machines.machineDetail.sampledagoAgo", { sampledAgo })
+                ] })
+              ] }),
+              machine.lastSeenAt && /* @__PURE__ */ jsxs8("div", { className: "hidden flex-col items-end gap-0.5 sm:flex", children: [
+                /* @__PURE__ */ jsx9("span", { className: "text-[10px] font-medium uppercase tracking-wide text-og-fg-subtle", children: t("machines.machineDetail.lastSeen") }),
+                /* @__PURE__ */ jsx9("span", { className: "font-og-mono text-og-sm tabular-nums text-og-fg-muted", children: formatRelativeTime(t, machine.lastSeenAt, new Date(now)) })
+              ] })
+            ] })
+          ] }),
+          latest && /* @__PURE__ */ jsx9(
+            "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__ */ jsxs8("div", { className: "flex flex-col gap-1.5 bg-og-surface-1 p-3", children: [
+                  /* @__PURE__ */ jsx9("span", { className: "text-[10px] font-medium uppercase tracking-wide text-og-fg-subtle", children: m.title }),
+                  /* @__PURE__ */ jsx9("span", { className: "font-og-mono text-og-md font-medium tabular-nums text-og-fg", children: m.current(latest) }),
+                  /* @__PURE__ */ jsx9(MetricSparkline, { points: pts, color: m.color, yMax: m.yMax, height: 22 }),
+                  m.sub && /* @__PURE__ */ jsx9("span", { className: "truncate font-og-mono text-[10px] text-og-fg-subtle", children: m.sub(latest) })
+                ] }, m.key);
+              })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx9(
+      MachineAgentPanel,
+      {
+        machine,
+        now,
+        onUpdateAgent,
+        updatingAgent
+      }
+    ),
+    machine.enrollmentId && !machine.isSessionGroup ? /* @__PURE__ */ jsx9(MachineAudienceRow, { machine, onChange: onChangeAudience }) : null,
+    machine.scope === "organization" && machine.enrollmentId && reachSummary ? /* @__PURE__ */ jsx9(MachineReachRow, { machine, summary: reachSummary, onChange: onChangeReach }) : null,
+    whereItWorks,
+    onUpdateOperationPolicy && machine.enrollmentId && machine.operationPolicy ? /* @__PURE__ */ jsx9(
+      MachineOperationPolicyEditor,
+      {
+        policy: machine.operationPolicy,
+        memorySupported: machine.runtime?.capabilities.operationResourcePolicy === true,
+        cpuSupported: machine.runtime?.capabilities.operationCpuQuota === true,
+        saving: updatingOperationPolicy,
+        onSave: (request) => onUpdateOperationPolicy(machine, request)
+      }
+    ) : null,
+    /* @__PURE__ */ jsx9("div", { className: "grid grid-cols-1 gap-3 lg:grid-cols-2", children: visible.map((m) => {
+      const pts = pointsFor(m, series);
+      return /* @__PURE__ */ jsxs8(
+        "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__ */ jsxs8("div", { className: "flex items-baseline justify-between", children: [
+              /* @__PURE__ */ jsx9("span", { className: "text-og-sm font-medium text-og-fg", children: m.title }),
+              latest && /* @__PURE__ */ jsx9("span", { className: "font-og-mono text-og-sm tabular-nums text-og-fg-muted", children: m.current(latest) })
+            ] }),
+            /* @__PURE__ */ jsx9(
+              MetricHistoryChart,
+              {
+                points: pts,
+                yMax: m.yMax,
+                unit: m.unit,
+                color: m.color,
+                thresholds: m.thresholds,
+                rangeLabel: WINDOW_LABEL(t)[window],
+                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 jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function EmptyState({ onEnroll }) {
+  const t = useOpenGeniText();
+  return /* @__PURE__ */ jsxs9(
+    "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__ */ jsx10("span", { className: "flex size-10 items-center justify-center rounded-full bg-og-surface-2 text-og-fg-subtle", children: /* @__PURE__ */ jsx10(LaptopIcon3, { className: "size-5", "aria-hidden": true }) }),
+        /* @__PURE__ */ jsxs9("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx10("p", { className: "text-og-base font-medium text-og-fg", children: t("machinesDashboard.noMachinesYet") }),
+          /* @__PURE__ */ jsx10("p", { className: "max-w-xs text-og-sm text-og-fg-muted", children: t("machinesDashboard.connectYourOwnComputerTo") })
+        ] }),
+        onEnroll ? /* @__PURE__ */ jsxs9(
+          "button",
+          {
+            type: "button",
+            "data-enroll-cta": true,
+            onClick: onEnroll,
+            className: "inline-flex items-center gap-1.5 rounded-og-sm border border-og-primary-border bg-og-primary text-og-primary-fg px-3 py-1.5 text-og-sm font-medium transition-colors hover:bg-og-primary-hover pointer-coarse:min-h-11",
+            children: [
+              /* @__PURE__ */ jsx10(PlusIcon, { className: "size-3.5", "aria-hidden": true }),
+              t("machinesDashboard.connectAMachine")
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function Header({
+  count,
+  onEnroll
+}) {
+  const t = useOpenGeniText();
+  return /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between gap-3", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "flex items-baseline gap-2", children: [
+      /* @__PURE__ */ jsx10("h2", { className: "text-og-base font-semibold text-og-fg", children: t("machinesDashboard.machines") }),
+      /* @__PURE__ */ jsx10("span", { className: "font-og-mono text-og-xs text-og-fg-subtle", children: count })
+    ] }),
+    /* @__PURE__ */ jsx10("div", { className: "flex items-center gap-1.5", children: onEnroll ? /* @__PURE__ */ jsxs9(
+      "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__ */ jsx10(PlusIcon, { className: "size-3.5", "aria-hidden": true }),
+          t("machinesDashboard.connectAMachine")
+        ]
+      }
+    ) : null })
+  ] });
+}
+function MachinesDashboard({
+  machines,
+  activeSandboxId,
+  loading,
+  error,
+  onAttach,
+  attachingSandboxId,
+  onUpdateAgent,
+  canUpdateMachine,
+  updatingEnrollmentId,
+  seriesByMachine,
+  onOpenDetail,
+  now,
+  onEnroll,
+  onRefresh,
+  className
+}) {
+  const t = useOpenGeniText();
+  const isEmpty = !loading && !error && machines.length === 0;
+  return /* @__PURE__ */ jsxs9("section", { "data-machines-dashboard": true, className: cn("og-root flex flex-col gap-3", className), children: [
+    /* @__PURE__ */ jsx10(Header, { count: machines.length, onEnroll }),
+    error ? /* @__PURE__ */ jsxs9(
+      "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__ */ jsx10("span", { children: t("machinesDashboard.couldNotLoadMachinesMessage", { message: error.message }) }),
+          onRefresh ? /* @__PURE__ */ jsxs9(
+            "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__ */ jsx10(RefreshCwIcon, { className: cn("size-3.5", loading && "animate-og-spin"), "aria-hidden": true }),
+                loading ? t("machinesDashboard.retrying") : t("machinesDashboard.retry")
+              ]
+            }
+          ) : null
+        ]
+      }
+    ) : null,
+    loading && machines.length === 0 ? /* @__PURE__ */ jsx10("div", { "data-machines-loading": true, className: "grid gap-3 sm:grid-cols-2", children: [0, 1].map((i) => /* @__PURE__ */ jsx10(
+      "div",
+      {
+        className: "h-36 animate-og-pulse rounded-og-lg border border-og-border bg-og-surface-1"
+      },
+      i
+    )) }) : isEmpty ? /* @__PURE__ */ jsx10(EmptyState, { onEnroll }) : /* @__PURE__ */ jsx10("div", { className: "grid gap-3 sm:grid-cols-2 xl:grid-cols-3", "data-machines-grid": true, children: machines.map((machine) => /* @__PURE__ */ jsx10(
+      MachineCard,
+      {
+        machine: {
+          ...machine,
+          active: machine.active || machine.sandboxId === activeSandboxId
+        },
+        onAttach,
+        attaching: attachingSandboxId === machine.sandboxId,
+        onUpdateAgent: canUpdateMachine && !canUpdateMachine(machine) ? void 0 : onUpdateAgent,
+        updatingAgent: updatingEnrollmentId === machine.enrollmentId,
+        series: seriesByMachine?.[machine.sandboxId],
+        onOpenDetail,
+        now
+      },
+      machine.sandboxId
+    )) })
+  ] });
+}
+
+// src/components/machine-dock-bar.tsx
+import { LaptopIcon as LaptopIcon4, CpuIcon as CpuIcon3, UsersIcon as UsersIcon3 } from "lucide-react";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function MachineDockBar({ name, kind, state, className }) {
+  const t = useOpenGeniText();
+  const Icon = kind === "selfhosted" || kind === "local" ? LaptopIcon4 : CpuIcon3;
+  const stateBadge = MACHINE_STATE_BADGE_META(t)[state];
+  return /* @__PURE__ */ jsxs10(
+    "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__ */ jsxs10("div", { className: "flex min-w-0 items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx11(Icon, { className: "size-3.5 shrink-0 text-og-fg-subtle", "aria-hidden": true }),
+          /* @__PURE__ */ jsx11("span", { className: "truncate text-[11px] font-medium text-og-fg", children: name }),
+          stateBadge ? /* @__PURE__ */ jsx11(
+            "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__ */ jsx11(
+          ConnectionStatusPill,
+          {
+            status: connectionStatusForState(state),
+            size: "sm",
+            className: "shrink-0"
+          }
+        )
+      ]
+    }
+  );
+}
+function SharedMachineDisclosure({
+  sharedSessionCount,
+  density = "compact",
+  className
+}) {
+  const t = useOpenGeniText();
+  const others = Math.max(0, sharedSessionCount - 1);
+  return /* @__PURE__ */ jsxs10(
+    "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__ */ jsx11(UsersIcon3, { className: "size-3.5 shrink-0 text-og-accent", "aria-hidden": true }),
+        /* @__PURE__ */ jsxs10("span", { children: [
+          t("machineDockBar.shared"),
+          " ",
+          others === 1 ? t("machineDockBar.anotherSessionIs") : t("machineDockBar.othersOtherSessionsAre", { others }),
+          " ",
+          t("machineDockBar.onThisMachineTheySee")
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/enrollment-device-flow.tsx
+import { CopyIcon, ExternalLinkIcon, LaptopIcon as LaptopIcon5, TerminalIcon } from "lucide-react";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+var PHASE_TO_STATE = {
+  pending: "enrolling",
+  authorized: "online",
+  denied: "offline",
+  expired: "offline",
+  disabled: "offline"
+};
+function PhaseLabel({ phase }) {
+  const t = useOpenGeniText();
+  const text = {
+    pending: t("enrollmentDeviceFlow.waitingForApproval"),
+    authorized: t("enrollmentDeviceFlow.connected"),
+    denied: t("enrollmentDeviceFlow.denied"),
+    expired: t("enrollmentDeviceFlow.codeExpired"),
+    disabled: t("enrollmentDeviceFlow.enrollmentDisabled")
+  };
+  return /* @__PURE__ */ jsx12("span", { children: text[phase] });
+}
+function EnrollmentDeviceFlow({
+  userCode,
+  verificationUri,
+  verificationUriComplete,
+  installCommand,
+  phase = "pending",
+  expiresInSeconds,
+  onCopyCode,
+  onCopyInstall,
+  onOpenVerification,
+  className
+}) {
+  const t = useOpenGeniText();
+  const href = verificationUriComplete ?? verificationUri;
+  const codeIsPlaceholder = !/[A-Za-z0-9]/.test(userCode);
+  const awaitingCode = phase === "pending" && codeIsPlaceholder;
+  return /* @__PURE__ */ jsxs11(
+    "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__ */ jsxs11("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx12("span", { className: "flex size-7 items-center justify-center rounded-full bg-og-surface-2 text-og-fg-muted", children: /* @__PURE__ */ jsx12(LaptopIcon5, { className: "size-4", "aria-hidden": true }) }),
+            /* @__PURE__ */ jsx12("h2", { className: "text-og-menu font-semibold text-og-fg", children: t("enrollmentDeviceFlow.connectAMachine") })
+          ] }),
+          /* @__PURE__ */ jsx12(
+            ConnectionStatusPill,
+            {
+              status: PHASE_TO_STATE[phase] === "online" ? "online" : PHASE_TO_STATE[phase] === "offline" ? "offline" : "reconnecting",
+              label: /* @__PURE__ */ jsx12(PhaseLabel, { phase }),
+              size: "sm"
+            }
+          )
+        ] }),
+        installCommand ? /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx12("span", { className: "text-[11px] font-medium uppercase tracking-wide text-og-fg-subtle", children: t("enrollmentDeviceFlow.n1RunOnTheMachine") }),
+          /* @__PURE__ */ jsxs11("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__ */ jsxs11("code", { className: "flex min-w-0 items-center gap-2 overflow-x-auto font-og-mono text-[12px] text-og-fg", children: [
+              /* @__PURE__ */ jsx12(TerminalIcon, { className: "size-3.5 shrink-0 text-og-fg-subtle", "aria-hidden": true }),
+              installCommand
+            ] }),
+            /* @__PURE__ */ jsx12(
+              "button",
+              {
+                type: "button",
+                "data-copy-install": true,
+                onClick: onCopyInstall,
+                title: t("enrollmentDeviceFlow.copyCommand"),
+                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__ */ jsx12(CopyIcon, { className: "size-4", "aria-hidden": true })
+              }
+            )
+          ] })
+        ] }) : null,
+        /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx12("span", { className: "text-[11px] font-medium uppercase tracking-wide text-og-fg-subtle", children: installCommand ? t("enrollmentDeviceFlow.n2ApproveTheMachine") : t("enrollmentDeviceFlow.approveTheMachine") }),
+          /* @__PURE__ */ jsxs11("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__ */ jsx12("span", { "data-user-code": true, className: "font-og-mono text-[13px] text-og-fg-subtle", children: t("enrollmentDeviceFlow.runTheCommandAboveYour") }) : /* @__PURE__ */ jsx12(
+              "span",
+              {
+                "data-user-code": true,
+                className: "select-all font-og-mono text-2xl font-semibold tracking-[0.25em] text-og-fg",
+                children: userCode
+              }
+            ),
+            /* @__PURE__ */ jsx12(
+              "button",
+              {
+                type: "button",
+                "data-copy-code": true,
+                onClick: onCopyCode,
+                disabled: awaitingCode,
+                title: t("enrollmentDeviceFlow.copyCode"),
+                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__ */ jsx12(CopyIcon, { className: "size-4", "aria-hidden": true })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs11(
+          "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 border border-og-primary-border bg-og-primary text-og-primary-fg px-3 py-2 text-og-menu font-medium transition-colors hover:bg-og-primary-hover",
+            children: [
+              t("enrollmentDeviceFlow.openApprovalPage"),
+              /* @__PURE__ */ jsx12(ExternalLinkIcon, { className: "size-3.5", "aria-hidden": true })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx12("p", { className: "text-center text-[11px] text-og-fg-subtle", children: awaitingCode ? /* @__PURE__ */ jsxs11(Fragment3, { children: [
+          t("enrollmentDeviceFlow.theOneLinerPrintsA"),
+          " ",
+          /* @__PURE__ */ jsx12("span", { className: "font-og-mono text-og-fg-muted", children: verificationUri }),
+          " ",
+          t("enrollmentDeviceFlow.andConfirmTheCodeShown")
+        ] }) : /* @__PURE__ */ jsxs11(Fragment3, { children: [
+          t("enrollmentDeviceFlow.confirmCode"),
+          " ",
+          /* @__PURE__ */ jsx12("span", { className: "font-og-mono text-og-fg-muted", children: userCode }),
+          " ",
+          t("enrollmentDeviceFlow.theOnePrintedByThe"),
+          " ",
+          /* @__PURE__ */ jsx12("span", { className: "font-og-mono text-og-fg-muted", children: verificationUri }),
+          ".",
+          typeof expiresInSeconds === "number" ? /* @__PURE__ */ jsxs11(Fragment3, { children: [
+            " ",
+            t("enrollmentDeviceFlow.expiresIn"),
+            " ",
+            Math.max(0, Math.round(expiresInSeconds / 60)),
+            " ",
+            t("enrollmentDeviceFlow.min")
+          ] }) : null
+        ] }) })
+      ]
+    }
+  );
+}
+
+// src/components/enrollment-consent.tsx
+import { useState as useState3 } from "react";
+import {
+  CircleAlertIcon as CircleAlertIcon2,
+  LaptopIcon as LaptopIcon6,
+  MonitorIcon as MonitorIcon2,
+  ScreenShareIcon,
+  ShieldAlertIcon,
+  TerminalIcon as TerminalIcon2,
+  UsersIcon as UsersIcon4
+} from "lucide-react";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+function Capability({ icon, title, body }) {
+  return /* @__PURE__ */ jsxs12("li", { className: "flex items-start gap-2.5", children: [
+    /* @__PURE__ */ jsx13("span", { className: "mt-0.5 shrink-0 text-og-status-failed", children: icon }),
+    /* @__PURE__ */ jsxs12("span", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx13("span", { className: "block text-og-base font-medium text-og-fg", children: title }),
+      /* @__PURE__ */ jsx13("span", { className: "block text-og-sm text-og-fg-muted", children: body })
+    ] })
+  ] });
+}
+function EnrollmentConsent({
+  userCode,
+  machine,
+  phase = "review",
+  allowWorkspaceScope = true,
+  allowOrganizationScope = false,
+  onApprove,
+  onDeny,
+  errorMessage: errorMessage2,
+  className
+}) {
+  const t = useOpenGeniText();
+  const [allowScreenControl, setAllowScreenControl] = useState3(machine.requestsScreenControl);
+  const [scope, setScope] = useState3("user");
+  const busy = phase === "approving";
+  const scopeCopy = {
+    user: {
+      label: t("enrollmentConsent.personal"),
+      body: t("enrollmentConsent.onlyYouCanUseThis")
+    },
+    workspace: {
+      label: t("enrollmentConsent.workspace"),
+      body: t("enrollmentConsent.everyoneWithAccessToThis")
+    },
+    organization: {
+      label: t("enrollmentConsent.organization"),
+      body: t("enrollmentConsent.membersOfThisOrganizationCan")
+    }
+  };
+  if (phase === "approved") {
+    return /* @__PURE__ */ jsx13(
+      ConsentResult,
+      {
+        className,
+        tone: "ok",
+        title: t("enrollmentConsent.machineConnected"),
+        body: t("enrollmentConsent.machinenameIsNowConnectedWith", {
+          machineName: machine.machineName,
+          lowerCase: scopeCopy[scope].label.toLowerCase()
+        })
+      }
+    );
+  }
+  if (phase === "denied") {
+    return /* @__PURE__ */ jsx13(
+      ConsentResult,
+      {
+        className,
+        tone: "muted",
+        title: t("enrollmentConsent.enrollmentDenied"),
+        body: t("enrollmentConsent.youDeclinedToConnectMachinename", {
+          machineName: machine.machineName
+        })
+      }
+    );
+  }
+  if (phase === "error") {
+    return /* @__PURE__ */ jsx13(
+      ConsentResult,
+      {
+        className,
+        tone: "danger",
+        title: t("enrollmentConsent.couldNotCompleteEnrollment"),
+        body: errorMessage2 ?? t("enrollmentConsent.theCodeMayHaveExpired")
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs12(
+    "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__ */ jsxs12("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx13("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-og-status-failed/15 text-og-status-failed", children: /* @__PURE__ */ jsx13(ShieldAlertIcon, { className: "size-5", "aria-hidden": true }) }),
+          /* @__PURE__ */ jsxs12("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx13("h1", { className: "text-og-md font-semibold text-og-fg", children: t("enrollmentConsent.giveTheAgentYourWhole") }),
+            /* @__PURE__ */ jsxs12("p", { className: "mt-1 text-og-base text-og-fg-muted", children: [
+              t("enrollmentConsent.approvingLetsTheOpengeniAgent"),
+              " ",
+              /* @__PURE__ */ jsx13("span", { className: "font-medium text-og-fg", children: machine.machineName }),
+              " ",
+              t("enrollmentConsent.withFullAccessThisIs")
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs12("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__ */ jsx13(LaptopIcon6, { className: "size-4 text-og-fg-subtle", "aria-hidden": true }),
+          /* @__PURE__ */ jsx13("span", { className: "font-medium text-og-fg", children: machine.machineName }),
+          /* @__PURE__ */ jsxs12("span", { className: "font-og-mono text-og-fg-subtle", children: [
+            machine.os,
+            "/",
+            machine.arch
+          ] }),
+          /* @__PURE__ */ jsx13("span", { "aria-hidden": true, className: "text-og-fg-subtle", children: "\xB7" }),
+          /* @__PURE__ */ jsxs12("span", { className: "text-og-fg-subtle", children: [
+            t("enrollmentConsent.code"),
+            " ",
+            /* @__PURE__ */ jsx13("span", { className: "font-og-mono font-medium text-og-fg", children: userCode })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs12("ul", { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ jsx13(
+            Capability,
+            {
+              icon: /* @__PURE__ */ jsx13(TerminalIcon2, { className: "size-4", "aria-hidden": true }),
+              title: t("enrollmentConsent.readWriteRunAnything"),
+              body: t("enrollmentConsent.theAgentCanReadAnd")
+            }
+          ),
+          machine.canOfferDisplay ? /* @__PURE__ */ jsx13(
+            Capability,
+            {
+              icon: /* @__PURE__ */ jsx13(MonitorIcon2, { className: "size-4", "aria-hidden": true }),
+              title: t("enrollmentConsent.seeYourScreen"),
+              body: t("enrollmentConsent.theAgentCanCaptureThis")
+            }
+          ) : null,
+          /* @__PURE__ */ jsx13(
+            Capability,
+            {
+              icon: /* @__PURE__ */ jsx13(UsersIcon4, { className: "size-4", "aria-hidden": true }),
+              title: t("enrollmentConsent.labelAccessWhileConnected", {
+                label: scopeCopy[scope].label
+              }),
+              body: t("enrollmentConsent.bodyDisconnectTheAgentTo", { body: scopeCopy[scope].body })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs12("fieldset", { className: "flex flex-col gap-2", disabled: busy, children: [
+          /* @__PURE__ */ jsx13("legend", { className: "mb-1 text-og-sm font-medium text-og-fg", children: t("enrollmentConsent.whoCanUseThisMachine") }),
+          ["user", "workspace", "organization"].map((candidate) => {
+            const disabled = candidate === "organization" && !allowOrganizationScope || candidate === "workspace" && !allowWorkspaceScope;
+            return /* @__PURE__ */ jsxs12(
+              "label",
+              {
+                "data-enrollment-scope": candidate,
+                "data-disabled": disabled ? "true" : "false",
+                className: cn(
+                  "flex items-start gap-2.5 rounded-og-md border border-og-border bg-og-bg px-3 py-2.5",
+                  disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx13(
+                    "input",
+                    {
+                      type: "radio",
+                      name: "enrollment-scope",
+                      value: candidate,
+                      checked: scope === candidate,
+                      disabled: disabled || busy,
+                      onChange: () => setScope(candidate),
+                      className: "mt-0.5 size-4 accent-og-accent"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs12("span", { className: "min-w-0", children: [
+                    /* @__PURE__ */ jsxs12("span", { className: "block text-og-base font-medium text-og-fg", children: [
+                      scopeCopy[candidate].label,
+                      disabled ? candidate === "organization" ? " \xB7 organization admin required" : " \xB7 workspace admin required" : ""
+                    ] }),
+                    /* @__PURE__ */ jsx13("span", { className: "block text-og-sm text-og-fg-muted", children: scopeCopy[candidate].body })
+                  ] })
+                ]
+              },
+              candidate
+            );
+          })
+        ] }),
+        machine.canOfferDisplay ? /* @__PURE__ */ jsxs12(
+          "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__ */ jsx13(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: allowScreenControl,
+                  disabled: busy,
+                  onChange: (e) => setAllowScreenControl(e.target.checked),
+                  className: "mt-0.5 size-4 accent-og-accent"
+                }
+              ),
+              /* @__PURE__ */ jsxs12("span", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsxs12("span", { className: "flex items-center gap-1.5 text-og-base font-medium text-og-fg", children: [
+                  /* @__PURE__ */ jsx13(ScreenShareIcon, { className: "size-3.5 text-og-fg-muted", "aria-hidden": true }),
+                  t("enrollmentConsent.alsoLetTheAgentControl")
+                ] }),
+                /* @__PURE__ */ jsx13("span", { className: "mt-0.5 block text-og-sm text-og-fg-muted", children: t("enrollmentConsent.optionalEnablesComputerUseThe") })
+              ] })
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs12("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__ */ jsx13(CircleAlertIcon2, { className: "mt-px size-3.5 shrink-0 text-og-fg-subtle", "aria-hidden": true }),
+          t("enrollmentConsent.thisMachineHasNoDisplay")
+        ] }),
+        /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx13(
+            "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: t("enrollmentConsent.cancel")
+            }
+          ),
+          /* @__PURE__ */ jsx13(
+            "button",
+            {
+              type: "button",
+              "data-approve": true,
+              disabled: busy,
+              onClick: () => onApprove?.(allowScreenControl, scope),
+              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 ? t("enrollmentConsent.connecting") : t("enrollmentConsent.grantFullAccess")
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+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__ */ jsxs12(
+    "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__ */ jsx13(
+          "span",
+          {
+            className: cn(
+              "flex size-10 items-center justify-center rounded-full bg-og-surface-2",
+              iconClass
+            ),
+            children: /* @__PURE__ */ jsx13(LaptopIcon6, { className: "size-5", "aria-hidden": true })
+          }
+        ),
+        /* @__PURE__ */ jsx13("h1", { className: "text-og-md font-semibold text-og-fg", children: title }),
+        /* @__PURE__ */ jsx13("p", { className: "max-w-sm text-og-base text-og-fg-muted", children: body })
+      ]
+    }
+  );
+}
+
+export {
+  connectionStatusForState,
+  CONNECTION_STATUS_META,
+  MACHINE_STATE_BADGE_META,
+  ConnectionStatusPill,
+  ConnectionDot,
+  MachineStatusPill,
+  MachineMetrics,
+  deriveHealth,
+  HEALTH_TOKEN,
+  healthPulses,
+  MachineHealthPill,
+  MetricSparkline,
+  MachineCard,
+  MetricHistoryChart,
+  METRIC_WINDOWS,
+  WINDOW_LABEL,
+  METRICS,
+  pointsFor,
+  MachineOperationPolicyEditor,
+  MachineDetail,
+  MachinesDashboard,
+  MachineDockBar,
+  SharedMachineDisclosure,
+  EnrollmentDeviceFlow,
+  EnrollmentConsent
+};
+//# sourceMappingURL=chunk-6DK6Z4UN.js.map