@opengeni/react 3.1.0 → 3.1.3-canary.38890816741001

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

@@ -7,18 +7,30 @@
 // `og-*` token system — no new visual language, just the missing depth.
 // ----------------------------------------------------------------------------
 import {
-  AlertTriangleIcon,
   ArrowLeftIcon,
+  BuildingIcon,
+  ChevronRightIcon,
   CpuIcon,
   LaptopIcon,
+  PlugIcon,
   RadioIcon,
   ServerIcon,
+  TriangleAlertIcon,
   Trash2Icon,
+  UserIcon,
+  UsersIcon,
 } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { formatRelativeTime } from "../../lib/format";
 import type { MachineView, MetricSample } from "../../types/machines";
+import { AgentStatusIcon } from "./agent-status-icon";
 import { deriveHealth, HEALTH_TOKEN, healthPulses } from "./health";
+import {
+  describeAgentConnection,
+  describeAgentRuntime,
+  runnerConflict,
+  STATUS_TONE_TEXT,
+} from "./machine-status";
 import { MetricHistoryChart } from "./metric-history-chart";
 import { MetricSparkline } from "./metric-sparkline";
 import { METRICS, METRIC_WINDOWS, pointsFor, WINDOW_LABEL, type MetricWindow } from "./series";
@@ -39,14 +51,185 @@ export type MachineDetailProps = {
     | ((machine: MachineView, request: UpdateMachineOperationPolicyRequest) => Promise<unknown>)
     | undefined;
   updatingOperationPolicy?: boolean | undefined;
+  /** Open "Who can use it?" for a connected machine. Omit when the viewer
+   * can't change it; the row then shows the current audience read-only. */
+  onChangeAudience?: ((machine: MachineView) => void) | undefined;
+  /** Start, retry or resend the signed agent update. Omit when the viewer can't. */
+  onUpdateAgent?: ((machine: MachineView) => void) | undefined;
+  updatingAgent?: boolean | undefined;
   now?: number | undefined;
   className?: string | undefined;
 };
 
+const AUDIENCE: Record<
+  MachineView["scope"],
+  { label: string; description: string; Icon: typeof UserIcon }
+> = {
+  user: { label: "Only me", description: "Only its owner can run chats on it.", Icon: UserIcon },
+  workspace: {
+    label: "This workspace",
+    description: "Everyone in this workspace can run chats on it.",
+    Icon: UsersIcon,
+  },
+  organization: {
+    label: "Whole organization",
+    description: "Every workspace in the organization can use it.",
+    Icon: BuildingIcon,
+  },
+};
+
+/** Who can use a connected machine. A navigational row when it can change. */
+function MachineAudienceRow({
+  machine,
+  onChange,
+}: {
+  machine: MachineView;
+  onChange?: ((machine: MachineView) => void) | undefined;
+}) {
+  const audience = AUDIENCE[machine.scope];
+  const changeable = onChange !== undefined && machine.scope !== "organization";
+  const content = (
+    <>
+      <audience.Icon className="size-4 shrink-0 text-og-fg-subtle" aria-hidden />
+      <span className="flex min-w-0 flex-1 flex-col gap-0.5 text-left">
+        <span className="text-og-sm font-medium text-og-fg">Who can use it?</span>
+        <span className="text-og-xs text-og-fg-muted">{audience.description}</span>
+      </span>
+      <span className="shrink-0 text-og-sm text-og-fg-muted">{audience.label}</span>
+      {changeable ? (
+        <ChevronRightIcon className="size-4 shrink-0 text-og-fg-subtle" aria-hidden />
+      ) : 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 ? (
+    <button
+      type="button"
+      data-machine-audience={machine.scope}
+      onClick={() => onChange(machine)}
+      aria-label={`Who can use ${machine.name}: ${audience.label}. Change`}
+      className={cn(
+        frame,
+        "transition-colors hover:bg-og-surface-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent/50",
+      )}
+    >
+      {content}
+    </button>
+  ) : (
+    <div data-machine-audience={machine.scope} className={frame}>
+      {content}
+    </div>
+  );
+}
+
 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 />;
+}
+
+/**
+ * The connected agent: its build and update on one row, its connection on the
+ * next. Past events read as quiet history; only a live problem gets a color.
+ */
+function MachineAgentPanel({
+  machine,
+  now,
+  onUpdateAgent,
+  updatingAgent,
+}: {
+  machine: MachineView;
+  now: number;
+  onUpdateAgent?: ((machine: MachineView) => void) | undefined;
+  updatingAgent?: boolean | undefined;
+}) {
+  const authority = machine.connectionAuthority;
+  const runtime = machine.runtime;
+  if (!runtime && authority.state === "not_applicable") return null;
+  const agent = runtime ? describeAgentRuntime(runtime, now) : null;
+  const action =
+    agent?.action && machine.enrollmentId && onUpdateAgent && machine.state !== "offline"
+      ? agent.action
+      : null;
+  const connection =
+    authority.state === "not_applicable" ? null : describeAgentConnection(authority);
+  const conflict = runnerConflict(authority, now);
+  const conflictAgo = conflict?.lastAt ? formatRelativeTime(conflict.lastAt, new Date(now)) : null;
+
+  return (
+    <section
+      data-machine-agent
+      aria-label="Agent"
+      className="flex flex-col divide-y divide-og-border rounded-og-lg border border-og-border bg-og-surface-1 shadow-og-sm"
+    >
+      {agent ? (
+        <div data-agent-runtime className="flex min-h-14 items-center gap-3 px-4 py-3">
+          <AgentStatusIcon tone={agent.tone} className="size-4" />
+          <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+            <span className="text-og-sm font-medium text-og-fg">{agent.title}</span>
+            <span
+              data-agent-status={agent.tone}
+              className={cn("text-og-xs", STATUS_TONE_TEXT[agent.tone])}
+            >
+              {agent.status}
+            </span>
+            {agent.note ? <span className="text-og-xs text-og-fg-muted">{agent.note}</span> : null}
+          </div>
+          {action ? (
+            <button
+              type="button"
+              data-update-agent
+              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"
+            >
+              {updatingAgent ? "Starting…" : action.label}
+            </button>
+          ) : null}
+        </div>
+      ) : null}
+      {connection ? (
+        <div
+          data-connection-authority={authority.state}
+          className="flex min-h-14 items-start gap-3 px-4 py-3"
+        >
+          <PlugIcon className="mt-0.5 size-4 shrink-0 text-og-fg-subtle" aria-hidden />
+          <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+            <span className="text-og-sm font-medium text-og-fg">{connection.label}</span>
+            {connection.detail ? (
+              <span className="text-og-xs text-og-fg-muted">{connection.detail}</span>
+            ) : null}
+            {conflict?.active ? (
+              <span
+                data-runner-conflict="active"
+                className="mt-1 flex items-start gap-1.5 text-og-xs text-og-fg-muted"
+              >
+                <TriangleAlertIcon
+                  className="mt-px size-3.5 shrink-0 text-og-status-waiting"
+                  aria-hidden
+                />
+                A second copy of the agent is running on this machine. It's kept out, so work isn't
+                affected. Stop the extra copy.
+              </span>
+            ) : conflict ? (
+              <span data-runner-conflict="past" className="text-og-xs text-og-fg-subtle">
+                Kept out {conflict.count} extra {conflict.count === 1 ? "copy" : "copies"} of the
+                agent
+                {conflictAgo
+                  ? `, most recently ${conflictAgo === "now" ? "just now" : `${conflictAgo} ago`}`
+                  : ""}
+              </span>
+            ) : null}
+          </div>
+        </div>
+      ) : null}
+    </section>
+  );
 }
 
 export function MachineDetail({
@@ -59,6 +242,9 @@ export function MachineDetail({
   onRemove,
   onUpdateOperationPolicy,
   updatingOperationPolicy,
+  onChangeAudience,
+  onUpdateAgent,
+  updatingAgent,
   now = Date.now(),
   className,
 }: MachineDetailProps) {
@@ -66,10 +252,6 @@ 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));
@@ -219,32 +401,19 @@ 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>
 
+      <MachineAgentPanel
+        machine={machine}
+        now={now}
+        onUpdateAgent={onUpdateAgent}
+        updatingAgent={updatingAgent}
+      />
+
+      {machine.enrollmentId && !machine.isSessionGroup ? (
+        <MachineAudienceRow machine={machine} onChange={onChangeAudience} />
+      ) : null}
+
       {onUpdateOperationPolicy && machine.enrollmentId && machine.operationPolicy ? (
         <MachineOperationPolicyEditor
           policy={machine.operationPolicy}

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

@@ -167,7 +167,7 @@ export function MachineOperationPolicyEditor({
           <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"
+            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

package/src/components/machines/machine-status.ts

@@ -0,0 +1,241 @@
+// ----------------------------------------------------------------------------
+// Machine status copy — what the agent and its connection are doing, in words.
+//
+// Pure functions from a machine's runtime and connection authority to plain
+// status text, a tone and the one action that can help. Cards and the detail
+// page share them so every surface tells the same story, and so a past event
+// is never shown as a current alarm.
+// ----------------------------------------------------------------------------
+import type { MachineView } from "../../types/machines";
+
+type Runtime = NonNullable<MachineView["runtime"]>;
+type Authority = MachineView["connectionAuthority"];
+
+/** `waiting` is neutral progress or a postponement; `attention` asks for a look. */
+export type StatusTone = "ok" | "progress" | "waiting" | "attention" | "failed" | "muted";
+
+export type AgentUpdateAction = "update" | "retry" | "resend";
+
+export type AgentRuntimeStatus = {
+  /** "Agent v0.1.54" */
+  title: string;
+  /** One short line: "Up to date", "Updates to v0.1.55 when current work finishes", … */
+  status: string;
+  tone: StatusTone;
+  /** Extra explanation under the status (blocked reason, failure cause). */
+  note: string | null;
+  /** The one action that can help right now, before permission/online checks. */
+  action: { kind: AgentUpdateAction; label: string } | null;
+};
+
+/** An update request the agent has not confirmed after this long can be resent. */
+export const UPDATE_CONFIRMATION_GRACE_MS = 30_000;
+
+/** A busy machine postpones an update instead of interrupting work. The agent
+ * reports this as a retryable `update_busy_*` result; it is not a failure. */
+export function isPostponedUpdate(errorCode: string | null | undefined): boolean {
+  return typeof errorCode === "string" && errorCode.startsWith("update_busy");
+}
+
+const FAILURE_REASON: Record<string, string> = {
+  update_state_unavailable: "the agent couldn't check whether the machine was idle",
+  agent_offline: "the machine was offline",
+  update_dispatch_rejected: "the agent refused the request",
+  invalid_agent_response: "the agent sent an unexpected reply",
+};
+
+function failureReason(code: string | null): string | null {
+  if (!code) return null;
+  return FAILURE_REASON[code] ?? code.replaceAll("_", " ");
+}
+
+const ACTIVE_STATUSES = new Set([
+  "requested",
+  "accepted",
+  "waiting_for_idle",
+  "downloading",
+  "verifying",
+  "applying",
+  "restarting",
+]);
+
+/**
+ * Describe the connected agent's build and update in plain words. A failed
+ * update whose target is already installed is moot and ignored; a postponed
+ * update reads as postponed, not failed.
+ */
+export function describeAgentRuntime(runtime: Runtime, now: number): AgentRuntimeStatus {
+  const installed = runtime.installedVersion;
+  const title = installed ? `Agent v${installed}` : "Agent version unknown";
+  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" as const, 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: `The agent hasn't confirmed the update to ${target}`,
+              tone: "attention",
+              note: null,
+              action: { kind: "resend", label: "Send again" },
+            }
+          : { ...base, status: `Sending the update to ${target}…` };
+      }
+      case "accepted":
+        return { ...base, status: `Updating to ${target}…` };
+      case "waiting_for_idle":
+        return {
+          ...base,
+          tone: "waiting",
+          status: `Updates to ${target} when current work finishes`,
+        };
+      case "downloading":
+        return { ...base, status: `Downloading ${target}…` };
+      case "verifying":
+        return { ...base, status: `Verifying ${target}…` };
+      case "applying":
+        return { ...base, status: `Installing ${target}…` };
+      default:
+        return { ...base, status: "Restarting the agent…" };
+    }
+  }
+
+  if (update?.status === "failed" && !alreadyInstalled) {
+    if (isPostponedUpdate(update.errorCode)) {
+      // Automatic updates leave an older agent alone while updating it would
+      // close its open browsers; updating by hand still closes them.
+      const browsersWouldClose = update.errorCode === "update_busy_browsers";
+      return {
+        title,
+        status: browsersWouldClose
+          ? `Update to ${target} postponed: open browsers would close`
+          : `Update to ${target} postponed while the machine was busy`,
+        tone: "waiting",
+        note:
+          blocked ??
+          (browsersWouldClose
+            ? "The installed agent closes its browsers when it restarts. Updating now closes them."
+            : null),
+        action: blocked ? null : { kind: "update", label: "Update now" },
+      };
+    }
+    const reason = failureReason(update.errorCode);
+    const retry =
+      update.retryable && !blocked ? { kind: "retry" as const, label: "Try again" } : null;
+    if (update.rolledBack) {
+      return {
+        title,
+        status: `Couldn't update to ${target}, so the current version was kept`,
+        tone: "attention",
+        note: blocked ?? (reason ? `Reason: ${reason}.` : null),
+        action: retry,
+      };
+    }
+    return {
+      title,
+      status: `Update to ${target} failed`,
+      tone: "failed",
+      note: blocked ?? (reason ? `Reason: ${reason}.` : null),
+      action: retry,
+    };
+  }
+
+  const desired = runtime.desiredVersion;
+  switch (runtime.versionState) {
+    case "current":
+      return {
+        title,
+        status: runtime.updateChannel === "beta" ? "Up to date · beta" : "Up to date",
+        tone: "ok",
+        note: null,
+        action: null,
+      };
+    case "ahead":
+      return {
+        title,
+        status: desired ? `Newer than the released v${desired}` : "Newer than the release",
+        tone: "muted",
+        note: null,
+        action: null,
+      };
+    case "unknown":
+      return {
+        title,
+        status: desired ? `Latest is v${desired}` : "No release configured",
+        tone: "muted",
+        note: blocked,
+        action: null,
+      };
+    default:
+      // `outdated`, or a server state the failure handling above already settled.
+      if (!desired || desired === installed) {
+        return { title, status: "Up to date", tone: "ok", note: null, action: null };
+      }
+      return {
+        title,
+        status: `v${desired} available`,
+        tone: "waiting",
+        note: blocked,
+        action: blocked ? null : { kind: "update", label: "Update" },
+      };
+  }
+}
+
+/** A competing agent process retries at least every ten seconds while it runs,
+ * so a refusal older than this belongs to history, not to the present. */
+export const RUNNER_CONFLICT_ACTIVE_MS = 2 * 60_000;
+
+export type RunnerConflict = {
+  /** A second agent process on the machine is being kept out right now. */
+  active: boolean;
+  count: number;
+  lastAt: string | null;
+};
+
+export function runnerConflict(authority: Authority, now: number): RunnerConflict | null {
+  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,
+  };
+}
+
+/** Plain words for the live connection: "Connected", "Reconnected 3 times". */
+export function describeAgentConnection(authority: Authority): {
+  label: string;
+  detail: string | null;
+} {
+  const label =
+    authority.state === "active"
+      ? "Agent connected"
+      : authority.state === "expired"
+        ? "Agent connection lapsed"
+        : "Agent not connected yet";
+  const n = authority.supersededCount;
+  return {
+    label,
+    detail: n > 0 ? `Reconnected ${n} ${n === 1 ? "time" : "times"} since setup` : null,
+  };
+}
+
+export const STATUS_TONE_TEXT: Record<StatusTone, string> = {
+  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",
+};

package/src/components/machines-dashboard.tsx

@@ -49,7 +49,7 @@ function EmptyState({ onEnroll }: { onEnroll?: (() => void) | undefined }) {
           type="button"
           data-enroll-cta
           onClick={onEnroll}
-          className="inline-flex items-center gap-1.5 rounded-og-sm bg-og-accent px-3 py-1.5 text-og-sm font-medium text-og-accent-fg transition-colors hover:bg-og-accent-strong pointer-coarse:min-h-11"
+          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"
         >
           <PlusIcon className="size-3.5" aria-hidden />
           Connect a machine
@@ -62,13 +62,9 @@ function EmptyState({ onEnroll }: { onEnroll?: (() => void) | undefined }) {
 function Header({
   count,
   onEnroll,
-  onRefresh,
-  loading,
 }: {
   count: number;
   onEnroll?: (() => void) | undefined;
-  onRefresh?: (() => void) | undefined;
-  loading?: boolean | undefined;
 }): ReactNode {
   return (
     <div className="flex items-center justify-between gap-3">
@@ -77,17 +73,6 @@ function Header({
         <span className="font-og-mono text-og-xs text-og-fg-subtle">{count}</span>
       </div>
       <div className="flex items-center gap-1.5">
-        {onRefresh ? (
-          <button
-            type="button"
-            data-refresh
-            onClick={onRefresh}
-            title="Refresh"
-            className="rounded-og-sm p-1.5 text-og-fg-subtle transition-colors hover:bg-og-surface-2 hover:text-og-fg"
-          >
-            <RefreshCwIcon className={cn("size-3.5", loading && "animate-og-spin")} aria-hidden />
-          </button>
-        ) : null}
         {onEnroll ? (
           <button
             type="button"
@@ -131,7 +116,7 @@ export function MachinesDashboard({
 
   return (
     <section data-machines-dashboard className={cn("og-root flex flex-col gap-3", className)}>
-      <Header count={machines.length} onEnroll={onEnroll} onRefresh={onRefresh} loading={loading} />
+      <Header count={machines.length} onEnroll={onEnroll} />
 
       {error ? (
         <div