@opengeni/react 1.0.1 → 1.0.2-canary.37202341988001

package/src/components/human-input-surface.tsx

@@ -1,5 +1,6 @@
 import type { SessionHumanInputRequest, SubmitHumanInputResponseRequest } from "@opengeni/sdk";
 import { useEffect, useMemo, useRef } from "react";
+import { isActionableHumanInputRequest } from "../human-input";
 import { cn } from "../lib/cn";
 import {
   HumanInputForm,
@@ -8,6 +9,7 @@ import {
 } from "./human-input-form";
 
 export type HumanInputSurfaceProps = {
+  loadSkillReview?: HumanInputFormProps["loadSkillReview"];
   requests: SessionHumanInputRequest[];
   onSubmit: (requestId: string, response: SubmitHumanInputResponseRequest) => void | Promise<void>;
   respondingRequestId?: string | null | undefined;
@@ -16,32 +18,39 @@ export type HumanInputSurfaceProps = {
   className?: string | undefined;
   /** Forwarded to the active form. Defaults true. */
   autoFocus?: boolean | undefined;
+  /** Forwarded to the active form: yes/no decisions as two buttons. */
+  decisionButtons?: boolean | undefined;
 };
 
 /**
  * One decision shell for pending structured human-input requests. Parallel
- * freezes are shown one at a time (oldest first) as “N of M”; Continue/Skip
+ * freezes are shown one at a time (oldest first) as “N of M”; Send answers/Skip
  * settles the active request and the next remaining set advances automatically
  * when the authoritative pending list updates.
  */
 export function HumanInputSurface({
   requests,
   onSubmit,
+  loadSkillReview,
   respondingRequestId = null,
   error,
   messages,
   className,
   autoFocus = true,
+  decisionButtons,
 }: HumanInputSurfaceProps) {
   const batchTotalRef = useRef(0);
 
   const ordered = useMemo(() => {
-    return [...requests].sort((a, b) => {
-      const aAt = a.createdAt ? Date.parse(a.createdAt) : 0;
-      const bAt = b.createdAt ? Date.parse(b.createdAt) : 0;
-      if (aAt !== bAt) return aAt - bAt;
-      return a.id.localeCompare(b.id);
-    });
+    const now = Date.now();
+    return requests
+      .filter((request) => isActionableHumanInputRequest(request, now))
+      .sort((a, b) => {
+        const aAt = a.createdAt ? Date.parse(a.createdAt) : 0;
+        const bAt = b.createdAt ? Date.parse(b.createdAt) : 0;
+        if (aAt !== bAt) return aAt - bAt;
+        return a.id.localeCompare(b.id);
+      });
   }, [requests]);
 
   useEffect(() => {
@@ -64,10 +73,12 @@ export function HumanInputSurface({
 
   const formProps: HumanInputFormProps = {
     request: active,
+    loadSkillReview,
     submitting: respondingRequestId !== null,
     error: error ?? null,
     progressLabel,
     autoFocus,
+    decisionButtons,
     ...(messages ? { messages } : {}),
     onSubmit: (response) => onSubmit(active.id, response),
   };

package/src/components/interaction-intervention-banner.tsx

@@ -50,7 +50,7 @@ export function InteractionInterventionBanner({
           type="button"
           onClick={() => onOpen(intervention)}
           disabled={mutating}
-          className="h-7 shrink-0 rounded-og-sm border border-og-border bg-og-surface-1 px-2.5 text-og-control font-medium text-og-fg transition hover:bg-og-surface-2 disabled:opacity-50"
+          className="h-7 shrink-0 rounded-og-sm border border-og-primary-border bg-og-primary px-2.5 text-og-control font-medium text-og-primary-fg transition hover:bg-og-primary-hover disabled:opacity-50"
         >
           Open
         </button>
@@ -59,7 +59,7 @@ export function InteractionInterventionBanner({
           type="button"
           onClick={() => onResolve(intervention, "completed")}
           disabled={mutating}
-          className="inline-flex h-7 shrink-0 items-center gap-1 rounded-og-sm bg-og-accent px-2.5 text-og-control font-medium text-og-accent-fg transition hover:brightness-105 disabled:opacity-50"
+          className="inline-flex h-7 shrink-0 items-center gap-1 rounded-og-sm border border-og-primary-border bg-og-primary text-og-primary-fg px-2.5 text-og-control font-medium transition hover:bg-og-primary-hover disabled:opacity-50"
         >
           {mutating ? (
             <LoaderCircleIcon className="size-3 animate-spin" />

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. */
@@ -29,10 +36,12 @@ export type MachineCardProps = {
 };
 
 function KindIcon({ machine }: { machine: MachineView }) {
-  if (machine.isSessionGroup)
+  if (machine.kind === "local" || machine.kind === "selfhosted")
+    return <LaptopIcon className="size-4 text-og-fg-subtle" aria-hidden />;
+  if (machine.kind === "docker" || machine.isSessionGroup)
     return <ServerIcon className="size-4 text-og-fg-subtle" aria-hidden />;
   if (machine.kind === "modal") return <CpuIcon className="size-4 text-og-fg-subtle" aria-hidden />;
-  return <LaptopIcon className="size-4 text-og-fg-subtle" aria-hidden />;
+  return <ServerIcon className="size-4 text-og-fg-subtle" aria-hidden />;
 }
 
 /**
@@ -45,6 +54,8 @@ export function MachineCard({
   machine,
   onAttach,
   attaching,
+  onUpdateAgent,
+  updatingAgent,
   series,
   onOpenDetail,
   now,
@@ -59,6 +70,44 @@ 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?.updateBlockedReason &&
+    (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,10 +157,12 @@ 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 className="capitalize">
-                {machine.isSessionGroup ? "session sandbox" : machine.kind}
+              <span data-machine-scope={machine.scope} className="capitalize">
+                {machine.scope === "user" ? "personal" : machine.scope}
               </span>
               <span aria-hidden>·</span>
+              <span className="capitalize">{machine.kind}</span>
+              <span aria-hidden>·</span>
               <span className="font-og-mono">
                 {machine.os}/{machine.arch}
               </span>
@@ -146,6 +197,70 @@ 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>
+            {runtime.updateBlockedReason ? (
+              <p className="mt-1 text-og-fg-muted">{runtime.updateBlockedReason}</p>
+            ) : null}
+          </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-dock-bar.tsx

@@ -23,7 +23,7 @@ export type MachineDockBarProps = {
  * chrome (the dock-parity contract: selfhosted == Modal for the surfaces).
  */
 export function MachineDockBar({ name, kind, state, className }: MachineDockBarProps) {
-  const Icon = kind === "selfhosted" ? LaptopIcon : CpuIcon;
+  const Icon = kind === "selfhosted" || kind === "local" ? LaptopIcon : CpuIcon;
   const stateBadge = MACHINE_STATE_BADGE_META[state];
   return (
     <div

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

@@ -3,10 +3,17 @@ import type { MachineInputMember } from "../timeline/types";
 export const MACHINE_INPUT_META: Record<MachineInputMember["kind"], string> = {
   scheduled_occurrence: "Scheduled update",
   goal_continuation: "Goal continued",
+  background_command_result: "Command result received",
+  session_wait_timeout: "Wait ended",
   agent_message: "Agent update",
   agent_steer_instruction: "Agent direction",
-  child_terminal_result: "Agent finished",
+  child_terminal_result: "Agent result received",
   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",
 };
 
 /**
@@ -23,8 +30,12 @@ export function machineInputBatchLabel(members: readonly MachineInputMember[]):
     const kind = members[0]!.kind;
     const n = members.length;
     switch (kind) {
+      case "background_command_result":
+        return n === 1 ? "Command result received" : `${n} command results received`;
+      case "session_wait_timeout":
+        return n === 1 ? "Wait ended" : `${n} waits ended`;
       case "child_terminal_result":
-        return n === 1 ? "Agent finished" : `${n} agents finished`;
+        return n === 1 ? "Agent result received" : `${n} agent results received`;
       case "goal_continuation":
         return n === 1 ? "Goal continued" : `${n} goal continuations`;
       case "scheduled_occurrence":
@@ -35,6 +46,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,14 +35,21 @@ 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;
 };
 
 function KindIcon({ kind, session }: { kind: string; session: boolean }) {
-  if (session) return <ServerIcon className="size-4 text-og-fg-subtle" aria-hidden />;
+  if (kind === "local" || kind === "selfhosted")
+    return <LaptopIcon className="size-4 text-og-fg-subtle" aria-hidden />;
+  if (kind === "docker" || session)
+    return <ServerIcon className="size-4 text-og-fg-subtle" aria-hidden />;
   if (kind === "modal") return <CpuIcon className="size-4 text-og-fg-subtle" aria-hidden />;
-  return <LaptopIcon className="size-4 text-og-fg-subtle" aria-hidden />;
+  return <ServerIcon className="size-4 text-og-fg-subtle" aria-hidden />;
 }
 
 export function MachineDetail({
@@ -50,6 +60,8 @@ export function MachineDetail({
   loadingSeries,
   onBack,
   onRemove,
+  onUpdateOperationPolicy,
+  updatingOperationPolicy,
   now = Date.now(),
   className,
 }: MachineDetailProps) {
@@ -57,6 +69,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 +222,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 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"
+          >
+            {saving ? <Loader2Icon className="size-3.5 animate-spin" aria-hidden /> : null}
+            Save policy
+          </button>
+        </div>
+      </form>
+    </section>
+  );
+}