@opengeni/react 1.0.1 → 2.2.0-canary.0

package/src/components/machine-card.tsx

@@ -1,9 +1,13 @@
 import {
+  AlertTriangleIcon,
   ArrowRightIcon,
   CpuIcon,
+  CircleCheckIcon,
+  DownloadIcon,
   LaptopIcon,
   MonitorIcon,
   MonitorOffIcon,
+  LoaderCircleIcon,
   ServerIcon,
   UsersIcon,
 } from "lucide-react";
@@ -20,6 +24,9 @@ export type MachineCardProps = {
   onAttach?: ((machine: MachineView) => void) | undefined;
   /** Whether an attach/swap is currently in flight (disables the affordance). */
   attaching?: boolean | undefined;
+  /** Start/retry the exact signed Connected Machine agent update. */
+  onUpdateAgent?: ((machine: MachineView) => void) | undefined;
+  updatingAgent?: boolean | undefined;
   /** Short recent history (e.g. 15m) — drives the card's CPU trend + preview. */
   series?: MetricSample[] | undefined;
   /** Open the full per-machine telemetry detail. Makes the whole card actionable. */
@@ -45,6 +52,8 @@ export function MachineCard({
   machine,
   onAttach,
   attaching,
+  onUpdateAgent,
+  updatingAgent,
   series,
   onOpenDetail,
   now,
@@ -59,6 +68,43 @@ export function MachineCard({
     : null;
   const cpuPts = (series ?? []).map((s) => ({ t: new Date(s.sampledAt).getTime(), v: s.cpuPct }));
   const openable = Boolean(onOpenDetail);
+  const runtime = machine.runtime;
+  const updateRunning = runtime?.versionState === "updating";
+  const dispatchConfirmationStalled =
+    runtime?.update?.status === "requested" &&
+    clockNow - new Date(runtime.update.updatedAt).getTime() >= 30_000;
+  const canUpdate =
+    Boolean(machine.enrollmentId && onUpdateAgent) &&
+    !offline &&
+    (runtime?.versionState === "outdated" ||
+      runtime?.versionState === "update_failed" ||
+      dispatchConfirmationStalled);
+  const updateLabel = (() => {
+    const update = runtime?.update;
+    if (!update) return null;
+    switch (update.status) {
+      case "requested":
+        return dispatchConfirmationStalled ? "Agent confirmation delayed" : "Confirming with agent";
+      case "accepted":
+        return "Update accepted";
+      case "waiting_for_idle":
+        return "Waiting for current work";
+      case "downloading":
+      case "verifying":
+      case "applying":
+        return `${update.status}…`;
+      case "restarting":
+        return "Restarting agent";
+      case "succeeded":
+        return `Updated · v${update.targetVersion}`;
+      case "failed": {
+        const detail = update.errorCode?.replaceAll("_", " ");
+        return update.rolledBack
+          ? `Update rolled back safely${detail ? ` · ${detail}` : ""}`
+          : `Update failed${detail ? ` · ${detail}` : ""}`;
+      }
+    }
+  })();
 
   return (
     <div
@@ -108,6 +154,10 @@ export function MachineCard({
               ) : null}
             </div>
             <div className="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-og-xs text-og-fg-subtle">
+              <span data-machine-scope={machine.scope} className="capitalize">
+                {machine.scope === "user" ? "personal" : machine.scope}
+              </span>
+              <span aria-hidden>·</span>
               <span className="capitalize">
                 {machine.isSessionGroup ? "session sandbox" : machine.kind}
               </span>
@@ -146,6 +196,67 @@ export function MachineCard({
         </p>
       ) : null}
 
+      {machine.connectionAuthority.duplicateRunnerDeniedCount > 0 ? (
+        <p
+          data-runner-conflict
+          className="flex items-center gap-1.5 rounded-og-md border border-og-status-failed/30 bg-og-status-failed/5 px-2.5 py-1.5 text-og-xs text-og-status-failed"
+        >
+          <AlertTriangleIcon className="size-3.5 shrink-0" aria-hidden />
+          Competing agent process blocked. Open diagnostics for details.
+        </p>
+      ) : null}
+
+      {runtime ? (
+        <div
+          data-agent-runtime
+          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"
+        >
+          <div className="min-w-0">
+            <div className="flex items-center gap-1.5 text-og-fg-muted">
+              {runtime.versionState === "current" ? (
+                <CircleCheckIcon className="size-3.5 text-og-status-idle" aria-hidden />
+              ) : updateRunning ? (
+                <LoaderCircleIcon className="size-3.5 animate-og-spin text-og-accent" aria-hidden />
+              ) : (
+                <DownloadIcon className="size-3.5" aria-hidden />
+              )}
+              <span className="truncate">
+                Agent{" "}
+                {runtime.installedVersion ? `v${runtime.installedVersion}` : "version unknown"}
+              </span>
+            </div>
+            <p className="mt-0.5 truncate text-og-fg-subtle">
+              {updateLabel ??
+                (runtime.versionState === "current"
+                  ? `Current · ${runtime.updateChannel ?? "channel unknown"}`
+                  : runtime.desiredVersion
+                    ? `Promoted v${runtime.desiredVersion}`
+                    : "No promoted version configured")}
+            </p>
+          </div>
+          {canUpdate ? (
+            <button
+              type="button"
+              data-update-agent
+              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"
+            >
+              {updatingAgent
+                ? "Starting…"
+                : dispatchConfirmationStalled
+                  ? "Retry delivery"
+                  : runtime.versionState === "update_failed"
+                    ? "Retry"
+                    : "Update"}
+            </button>
+          ) : null}
+        </div>
+      ) : null}
+
       <MachineMetrics metrics={machine.metrics} />
 
       {/* CPU trend — previews the history and invites opening the detail. */}

package/src/components/machine-input-display.ts

@@ -7,6 +7,11 @@ export const MACHINE_INPUT_META: Record<MachineInputMember["kind"], string> = {
   agent_steer_instruction: "Agent direction",
   child_terminal_result: "Agent finished",
   media_generation_result: "Video update",
+  child_requires_action: "Agent needs input",
+  child_requires_action_resolved: "Agent unblocked",
+  child_paused: "Agent paused",
+  child_waiting_capacity: "Agent waiting for capacity",
+  child_progress: "Agent progress",
 };
 
 /**
@@ -35,6 +40,16 @@ export function machineInputBatchLabel(members: readonly MachineInputMember[]):
         return n === 1 ? "Agent direction" : `${n} agent directions`;
       case "media_generation_result":
         return n === 1 ? "Video ready" : `${n} video updates`;
+      case "child_requires_action":
+        return n === 1 ? "Agent needs input" : `${n} agents need input`;
+      case "child_requires_action_resolved":
+        return n === 1 ? "Agent unblocked" : `${n} agents unblocked`;
+      case "child_paused":
+        return n === 1 ? "Agent paused" : `${n} agents paused`;
+      case "child_waiting_capacity":
+        return n === 1 ? "Agent waiting for capacity" : `${n} agents waiting for capacity`;
+      case "child_progress":
+        return n === 1 ? "Agent progress" : `${n} agent progress notes`;
     }
   }
   const parts = [...counts.entries()].map(([kind, count]) => {

package/src/components/machines/machine-detail.tsx

@@ -7,6 +7,7 @@
 // `og-*` token system — no new visual language, just the missing depth.
 // ----------------------------------------------------------------------------
 import {
+  AlertTriangleIcon,
   ArrowLeftIcon,
   CpuIcon,
   LaptopIcon,
@@ -21,6 +22,8 @@ import { deriveHealth, HEALTH_TOKEN, healthPulses } from "./health";
 import { MetricHistoryChart } from "./metric-history-chart";
 import { MetricSparkline } from "./metric-sparkline";
 import { METRICS, METRIC_WINDOWS, pointsFor, WINDOW_LABEL, type MetricWindow } from "./series";
+import { MachineOperationPolicyEditor } from "./machine-operation-policy";
+import type { UpdateMachineOperationPolicyRequest } from "@opengeni/sdk";
 
 export type MachineDetailProps = {
   machine: MachineView;
@@ -32,6 +35,10 @@ export type MachineDetailProps = {
   onBack?: (() => void) | undefined;
   /** Open the workspace-admin removal confirmation for a self-hosted machine. */
   onRemove?: ((machine: MachineView) => void) | undefined;
+  onUpdateOperationPolicy?:
+    | ((machine: MachineView, request: UpdateMachineOperationPolicyRequest) => Promise<unknown>)
+    | undefined;
+  updatingOperationPolicy?: boolean | undefined;
   now?: number | undefined;
   className?: string | undefined;
 };
@@ -50,6 +57,8 @@ export function MachineDetail({
   loadingSeries,
   onBack,
   onRemove,
+  onUpdateOperationPolicy,
+  updatingOperationPolicy,
   now = Date.now(),
   className,
 }: MachineDetailProps) {
@@ -57,6 +66,10 @@ export function MachineDetail({
   const tone = HEALTH_TOKEN[health.level];
   const latest = machine.metrics;
   const sampledAgo = latest ? formatRelativeTime(latest.sampledAt, new Date(now)) : null;
+  const authority = machine.connectionAuthority;
+  const duplicateDeniedAgo = authority.duplicateRunnerDeniedAt
+    ? formatRelativeTime(authority.duplicateRunnerDeniedAt, new Date(now))
+    : null;
 
   // Only render metrics that have a value (GPU is dropped on headless boxes).
   const visible = METRICS.filter((m) => !(m.key === "gpu" && latest?.gpuUtilPct == null));
@@ -206,8 +219,42 @@ export function MachineDetail({
             })}
           </div>
         )}
+
+        {authority.state !== "not_applicable" ? (
+          <div
+            data-connection-authority={authority.state}
+            className="flex flex-wrap items-center justify-between gap-2 rounded-og-md border border-og-border bg-og-surface-1/75 px-3 py-2 text-og-xs"
+          >
+            <span className="text-og-fg-muted">
+              Runner {authority.state.replace("_", " ")} · generation {authority.generation}
+              {authority.supersededCount > 0
+                ? ` · ${authority.supersededCount} earlier ${authority.supersededCount === 1 ? "runner" : "runners"} fenced`
+                : ""}
+            </span>
+            {authority.duplicateRunnerDeniedCount > 0 ? (
+              <span className="inline-flex items-center gap-1.5 text-og-status-failed">
+                <AlertTriangleIcon className="size-3.5" aria-hidden />
+                Blocked {authority.duplicateRunnerDeniedCount} competing runner
+                {authority.duplicateRunnerDeniedCount === 1 ? "" : "s"}
+                {duplicateDeniedAgo
+                  ? ` · ${duplicateDeniedAgo === "now" ? "now" : `${duplicateDeniedAgo} ago`}`
+                  : ""}
+              </span>
+            ) : null}
+          </div>
+        ) : null}
       </div>
 
+      {onUpdateOperationPolicy && machine.enrollmentId && machine.operationPolicy ? (
+        <MachineOperationPolicyEditor
+          policy={machine.operationPolicy}
+          memorySupported={machine.runtime?.capabilities.operationResourcePolicy === true}
+          cpuSupported={machine.runtime?.capabilities.operationCpuQuota === true}
+          saving={updatingOperationPolicy}
+          onSave={(request) => onUpdateOperationPolicy(machine, request)}
+        />
+      ) : null}
+
       {/* ── history charts ──────────────────────────────────────────────── */}
       <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
         {visible.map((m) => {

package/src/components/machines/machine-operation-policy.tsx

@@ -0,0 +1,179 @@
+import { AlertTriangleIcon, Loader2Icon } from "lucide-react";
+import { useEffect, useState, type FormEvent } from "react";
+import type { MachineOperationPolicy, UpdateMachineOperationPolicyRequest } from "@opengeni/sdk";
+
+export type MachineOperationPolicyEditorProps = {
+  policy: MachineOperationPolicy;
+  memorySupported: boolean;
+  cpuSupported: boolean;
+  saving?: boolean | undefined;
+  onSave: (request: UpdateMachineOperationPolicyRequest) => Promise<unknown> | unknown;
+};
+
+function fieldValue(value: number | null): string {
+  return value === null ? "" : String(value);
+}
+
+function parseByteCount(label: string, value: string): number | null {
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  if (!/^\d+$/.test(trimmed)) {
+    throw new Error(`${label} must be a whole number of bytes or blank`);
+  }
+  const parsed = Number(trimmed);
+  if (!Number.isSafeInteger(parsed) || parsed <= 0) {
+    throw new Error(`${label} must be a positive safe-integer byte count or blank`);
+  }
+  return parsed;
+}
+
+function parseCpuMillicores(value: string): number | null {
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  if (!/^\d+$/.test(trimmed)) {
+    throw new Error("CPU maximum must be a whole number of millicores or blank");
+  }
+  const parsed = Number(trimmed);
+  if (!Number.isSafeInteger(parsed) || parsed <= 0 || parsed > 0xffff_ffff) {
+    throw new Error("CPU maximum must be between 1 and 4294967295 millicores or blank");
+  }
+  return parsed;
+}
+
+/** Exact editor for the optional per-enrollment command resource policy. Blank
+ * values remain genuinely unrestricted; CPU is a period-independent ratio. */
+export function MachineOperationPolicyEditor({
+  policy,
+  memorySupported,
+  cpuSupported,
+  saving = false,
+  onSave,
+}: MachineOperationPolicyEditorProps) {
+  const [memoryMaxBytes, setMemoryMaxBytes] = useState(fieldValue(policy.memoryMaxBytes));
+  const [memoryHighBytes, setMemoryHighBytes] = useState(fieldValue(policy.memoryHighBytes));
+  const [cpuMaxMillicores, setCpuMaxMillicores] = useState(fieldValue(policy.cpuMaxMillicores));
+  const [validationError, setValidationError] = useState<string | null>(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: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    try {
+      const max = parseByteCount("Hard ceiling", memoryMaxBytes);
+      const high = parseByteCount("Reclaim threshold", memoryHighBytes);
+      if (max !== null && high !== null && high > max) {
+        throw new Error("Reclaim threshold cannot exceed the hard ceiling");
+      }
+      const cpuMax = parseCpuMillicores(cpuMaxMillicores);
+      setValidationError(null);
+      await onSave({
+        memoryMaxBytes: max,
+        memoryHighBytes: high,
+        cpuMaxMillicores: cpuMax,
+        expectedRevision: policy.revision,
+      });
+    } catch (error) {
+      setValidationError(error instanceof Error ? error.message : String(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 (
+    <section
+      data-machine-operation-policy
+      className="rounded-og-lg border border-og-border bg-og-surface-1 p-4 shadow-og-sm"
+    >
+      <div className="flex flex-col gap-1">
+        <h2 className="text-og-sm font-semibold text-og-fg">Per-command resource policy</h2>
+        <p className="text-og-xs leading-relaxed text-og-fg-muted">
+          Optional limits applied separately to each newly admitted exec and Git command. Running
+          commands keep their admitted policy. Blank means unrestricted. The runner or host may
+          apply a stricter explicit policy; browser, computer-use, and terminal capabilities remain
+          unchanged.
+        </p>
+      </div>
+
+      {configured && (unsupportedMemory || unsupportedCpu) ? (
+        <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">
+          <AlertTriangleIcon className="mt-0.5 size-3.5 shrink-0" aria-hidden />
+          <span>
+            {unsupportedCpu
+              ? "This runner cannot enforce the configured CPU limit."
+              : "This runner cannot enforce the configured memory limit."}{" "}
+            Command execution fails closed until the current runner, OS, and service configuration
+            can enforce it, or the unsupported limit is cleared. You can still save limits now for
+            later enforcement.
+          </span>
+        </div>
+      ) : null}
+
+      <form className="mt-4 grid gap-3 sm:grid-cols-2" onSubmit={submit}>
+        <label className="flex flex-col gap-1.5 text-og-xs text-og-fg-muted">
+          Hard ceiling (bytes)
+          <input
+            inputMode="numeric"
+            pattern="[0-9]*"
+            value={memoryMaxBytes}
+            onChange={(event) => setMemoryMaxBytes(event.target.value)}
+            placeholder="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"
+          />
+        </label>
+        <label className="flex flex-col gap-1.5 text-og-xs text-og-fg-muted">
+          Reclaim threshold (bytes)
+          <input
+            inputMode="numeric"
+            pattern="[0-9]*"
+            value={memoryHighBytes}
+            onChange={(event) => setMemoryHighBytes(event.target.value)}
+            placeholder="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"
+          />
+        </label>
+        <label className="flex flex-col gap-1.5 text-og-xs text-og-fg-muted">
+          CPU maximum (millicores)
+          <input
+            inputMode="numeric"
+            pattern="[0-9]*"
+            value={cpuMaxMillicores}
+            onChange={(event) => setCpuMaxMillicores(event.target.value)}
+            placeholder="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"
+          />
+          <span>1000 millicores = one CPU core. Blank is unlimited.</span>
+        </label>
+        <div className="flex min-h-9 items-center justify-between gap-3 sm:col-span-2">
+          <span
+            role={validationError ? "alert" : undefined}
+            className="text-og-xs text-og-status-failed"
+          >
+            {validationError}
+          </span>
+          <button
+            type="submit"
+            disabled={saving}
+            className="inline-flex min-h-9 items-center gap-1.5 rounded-og-sm bg-og-accent px-3 py-1.5 text-og-xs font-medium text-og-accent-fg transition-colors hover:bg-og-accent-strong disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            {saving ? <Loader2Icon className="size-3.5 animate-spin" aria-hidden /> : null}
+            Save policy
+          </button>
+        </div>
+      </form>
+    </section>
+  );
+}

package/src/components/machines-dashboard.tsx

@@ -14,6 +14,8 @@ export type MachinesDashboardProps = {
   onAttach?: ((machine: MachineView) => void) | undefined;
   /** The sandbox id currently being attached/swapped to (disables that card). */
   attachingSandboxId?: string | null | undefined;
+  onUpdateAgent?: ((machine: MachineView) => void) | undefined;
+  updatingEnrollmentId?: string | null | undefined;
   /** Short recent history per machine (keyed by sandboxId) — drives card sparklines. */
   seriesByMachine?: Record<string, MetricSample[]> | undefined;
   /** Open the per-machine telemetry detail (makes each card actionable). */
@@ -116,6 +118,8 @@ export function MachinesDashboard({
   error,
   onAttach,
   attachingSandboxId,
+  onUpdateAgent,
+  updatingEnrollmentId,
   seriesByMachine,
   onOpenDetail,
   now,
@@ -172,6 +176,8 @@ export function MachinesDashboard({
               }}
               onAttach={onAttach}
               attaching={attachingSandboxId === machine.sandboxId}
+              onUpdateAgent={onUpdateAgent}
+              updatingAgent={updatingEnrollmentId === machine.enrollmentId}
               series={seriesByMachine?.[machine.sandboxId]}
               onOpenDetail={onOpenDetail}
               now={now}