@opengeni/react 3.1.0 → 3.1.2

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

@@ -9,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;
@@ -17,6 +18,10 @@ 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;
+  /** Forwarded to the active form: where secret answers may be saved. */
+  allowedSaveTo?: HumanInputFormProps["allowedSaveTo"];
 };
 
 /**
@@ -28,11 +33,14 @@ export type HumanInputSurfaceProps = {
 export function HumanInputSurface({
   requests,
   onSubmit,
+  loadSkillReview,
   respondingRequestId = null,
   error,
   messages,
   className,
   autoFocus = true,
+  decisionButtons,
+  allowedSaveTo,
 }: HumanInputSurfaceProps) {
   const batchTotalRef = useRef(0);
 
@@ -68,10 +76,13 @@ export function HumanInputSurface({
 
   const formProps: HumanInputFormProps = {
     request: active,
+    loadSkillReview,
     submitting: respondingRequestId !== null,
     error: error ?? null,
     progressLabel,
     autoFocus,
+    decisionButtons,
+    allowedSaveTo,
     ...(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/linkified-text.tsx

@@ -0,0 +1,79 @@
+import { Fragment, type ReactNode } from "react";
+
+// Bare http(s) URLs in plain agent-written text (question prompts, help text).
+const URL_PATTERN = /https?:\/\/[^\s<>"'`]+/g;
+// Sentence punctuation that follows a URL is not part of it.
+const TRAILING_PUNCTUATION = /[.,;:!?]+$/;
+
+export const LINKIFIED_LINK_CLASS = "font-medium og-link [overflow-wrap:anywhere]";
+
+type Segment = { kind: "text"; value: string } | { kind: "link"; value: string };
+
+function trimUrl(raw: string): string {
+  let url = raw.replace(TRAILING_PUNCTUATION, "");
+  // Drop a closing paren that wraps the URL rather than belonging to it.
+  while (url.endsWith(")") && countOf(url, "(") < countOf(url, ")")) {
+    url = url.slice(0, -1).replace(TRAILING_PUNCTUATION, "");
+  }
+  return url;
+}
+
+function countOf(value: string, char: string): number {
+  let count = 0;
+  for (const current of value) if (current === char) count += 1;
+  return count;
+}
+
+function isValidUrl(value: string): boolean {
+  try {
+    return /^https?:$/u.test(new URL(value).protocol);
+  } catch {
+    return false;
+  }
+}
+
+/** Split plain text into text and bare http(s) URL segments. */
+export function linkifySegments(text: string): Segment[] {
+  const segments: Segment[] = [];
+  let cursor = 0;
+  for (const match of text.matchAll(URL_PATTERN)) {
+    const start = match.index ?? 0;
+    const url = trimUrl(match[0]);
+    if (!isValidUrl(url)) continue;
+    if (start > cursor) segments.push({ kind: "text", value: text.slice(cursor, start) });
+    segments.push({ kind: "link", value: url });
+    cursor = start + url.length;
+  }
+  if (cursor < text.length) segments.push({ kind: "text", value: text.slice(cursor) });
+  return segments;
+}
+
+/**
+ * Render plain text with bare http(s) URLs as links that open in a new tab and
+ * wrap anywhere, so a long sign-in or approval URL stays clickable and inside
+ * its card. Non-string nodes pass through unchanged.
+ */
+export function linkifyText(node: ReactNode): ReactNode {
+  if (typeof node !== "string") return node;
+  const segments = linkifySegments(node);
+  if (!segments.some((segment) => segment.kind === "link")) return node;
+  // Segments are contiguous, so each one's text offset is a stable unique key.
+  let offset = 0;
+  return segments.map((segment) => {
+    const key = offset;
+    offset += segment.value.length;
+    return segment.kind === "link" ? (
+      <a
+        key={key}
+        className={LINKIFIED_LINK_CLASS}
+        href={segment.value}
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        {segment.value}
+      </a>
+    ) : (
+      <Fragment key={key}>{segment.value}</Fragment>
+    );
+  });
+}

package/src/components/machine-card.tsx

@@ -2,20 +2,20 @@ import {
   AlertTriangleIcon,
   ArrowRightIcon,
   CpuIcon,
-  CircleCheckIcon,
-  DownloadIcon,
   LaptopIcon,
   MonitorIcon,
   MonitorOffIcon,
-  LoaderCircleIcon,
   ServerIcon,
   UsersIcon,
 } from "lucide-react";
 import { cn } from "../lib/cn";
 import { formatRelativeTime } from "../lib/format";
+import { machineScopeLabel } from "../sandbox-label-model";
 import type { MachineView, MetricSample } from "../types/machines";
 import { MachineHealthPill } from "./machine-health-pill";
 import { MachineMetrics } from "./machine-metrics";
+import { AgentStatusIcon } from "./machines/agent-status-icon";
+import { describeAgentRuntime, runnerConflict, STATUS_TONE_TEXT } from "./machines/machine-status";
 import { MetricSparkline } from "./machines/metric-sparkline";
 
 export type MachineCardProps = {
@@ -36,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 />;
 }
 
 /**
@@ -69,42 +71,10 @@ export function MachineCard({
   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}` : ""}`;
-      }
-    }
-  })();
+  const agent = runtime ? describeAgentRuntime(runtime, clockNow) : null;
+  const updateAction =
+    agent?.action && machine.enrollmentId && onUpdateAgent && !offline ? agent.action : null;
+  const conflict = runnerConflict(machine.connectionAuthority, clockNow);
 
   return (
     <div
@@ -154,13 +124,9 @@ 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 data-machine-scope={machine.scope}>{machineScopeLabel(machine.scope)}</span>
               <span aria-hidden>·</span>
-              <span className="capitalize">
-                {machine.isSessionGroup ? "session sandbox" : machine.kind}
-              </span>
+              <span className="capitalize">{machine.kind}</span>
               <span aria-hidden>·</span>
               <span className="font-og-mono">
                 {machine.os}/{machine.arch}
@@ -196,48 +162,45 @@ export function MachineCard({
         </p>
       ) : null}
 
-      {machine.connectionAuthority.duplicateRunnerDeniedCount > 0 ? (
+      {conflict?.active ? (
         <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"
+          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"
         >
-          <AlertTriangleIcon className="size-3.5 shrink-0" aria-hidden />
-          Competing agent process blocked. Open diagnostics for details.
+          <AlertTriangleIcon
+            className="mt-px size-3.5 shrink-0 text-og-status-waiting"
+            aria-hidden
+          />
+          <span>
+            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>
         </p>
       ) : null}
 
-      {runtime ? (
+      {agent ? (
         <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>
+              <AgentStatusIcon tone={agent.tone} />
+              <span className="truncate">{agent.title}</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
+              data-agent-status={agent.tone}
+              className={cn("mt-0.5", STATUS_TONE_TEXT[agent.tone])}
+            >
+              {agent.status}
             </p>
+            {agent.note ? <p className="mt-1 text-og-fg-muted">{agent.note}</p> : null}
           </div>
-          {canUpdate ? (
+          {updateAction ? (
             <button
               type="button"
               data-update-agent
+              data-update-action={updateAction.kind}
               disabled={updatingAgent}
               onClick={(event) => {
                 event.stopPropagation();
@@ -245,13 +208,7 @@ export function MachineCard({
               }}
               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"}
+              {updatingAgent ? "Starting…" : updateAction.label}
             </button>
           ) : null}
         </div>

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

@@ -1,11 +1,15 @@
+import { isSessionId } from "../timeline/agent-identity";
+import { namedAgentTitle, type AgentTitleParts } from "../timeline/platform-activity-presentation";
 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",
@@ -17,9 +21,16 @@ export const MACHINE_INPUT_META: Record<MachineInputMember["kind"], string> = {
 /**
  * Collapsed landmark label for a coalesced machine-input batch.
  * Same-kind batches get a natural plural; mixed kinds stay short.
+ * When every agent update's sender has a known title, the label names them
+ * ("Update from Release audit", "3 updates from Audit and Flake · Wait ended").
  */
-export function machineInputBatchLabel(members: readonly MachineInputMember[]): string {
+export function machineInputBatchLabel(
+  members: readonly MachineInputMember[],
+  titleFor?: ((sessionId: string) => string | null) | undefined,
+): string {
   if (members.length === 0) return "Updates";
+  const named = titleFor ? namedAgentBatchLabel(members, titleFor) : null;
+  if (named) return named;
   const counts = new Map<MachineInputMember["kind"], number>();
   for (const member of members) {
     counts.set(member.kind, (counts.get(member.kind) ?? 0) + 1);
@@ -28,8 +39,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":
@@ -61,6 +76,41 @@ export function machineInputBatchLabel(members: readonly MachineInputMember[]):
   return `${members.length} updates · ${preview}${suffix}`;
 }
 
+function namedAgentBatchLabel(
+  members: readonly MachineInputMember[],
+  titleFor: (sessionId: string) => string | null,
+): string | null {
+  const agents = members.filter(isAgentMember);
+  if (agents.length === 0) return null;
+  const names: string[] = [];
+  for (const member of agents) {
+    const sessionId = agentMemberSessionId(member);
+    const name = sessionId ? titleFor(sessionId) : null;
+    if (!name) return null;
+    if (!names.includes(name)) names.push(name);
+  }
+  const others = members.filter((member) => !isAgentMember(member));
+  const agentPart =
+    agents.length === 1
+      ? agentMemberTitle(agents[0]!, names[0]!).text
+      : `${agents.length} updates from ${
+          names.length === 1
+            ? names[0]
+            : names.length === 2
+              ? `${names[0]} and ${names[1]}`
+              : `${names.length} agents`
+        }`;
+  if (others.length === 0) return agentPart;
+  const counts = new Map<MachineInputMember["kind"], number>();
+  for (const member of others) counts.set(member.kind, (counts.get(member.kind) ?? 0) + 1);
+  const rest = [...counts.entries()]
+    .map(([kind, count]) =>
+      count === 1 ? MACHINE_INPUT_META[kind] : `${count}× ${MACHINE_INPUT_META[kind]}`,
+    )
+    .join(", ");
+  return `${agentPart} · ${rest}`;
+}
+
 /** Strip protocol prefixes and worker/session UUIDs from display summaries. */
 export function cleanMachineInputSummary(summary: string): string {
   return summary
@@ -99,3 +149,147 @@ export function machineInputSummaryIsUseful(
   }
   return true;
 }
+
+/* --- agent members ----------------------------------------------------------- */
+
+const AGENT_MEMBER_KINDS: ReadonlySet<MachineInputMember["kind"]> = new Set([
+  "agent_message",
+  "agent_steer_instruction",
+  "child_terminal_result",
+  "child_requires_action",
+  "child_requires_action_resolved",
+  "child_paused",
+  "child_waiting_capacity",
+  "child_progress",
+]);
+
+/** Members sent by (or about) another agent session. */
+export function isAgentMember(member: Pick<MachineInputMember, "kind">): boolean {
+  return AGENT_MEMBER_KINDS.has(member.kind);
+}
+
+/** The agent session a member came from; only typed UUID sources route. */
+export function agentMemberSessionId(
+  member: Pick<MachineInputMember, "kind" | "sourceId">,
+): string | null {
+  return isAgentMember(member) && isSessionId(member.sourceId) ? member.sourceId : null;
+}
+
+/**
+ * The row title for an agent member. A child result only means the agent went
+ * idle, so it reads "Result from …", never "finished".
+ */
+export function agentMemberTitle(
+  member: Pick<MachineInputMember, "kind" | "classification">,
+  name: string | null,
+): AgentTitleParts {
+  const fallback = MACHINE_INPUT_META[member.kind];
+  switch (member.kind) {
+    case "agent_message":
+      return namedAgentTitle(name, "Update from ", "", fallback);
+    case "agent_steer_instruction":
+      return namedAgentTitle(name, "Direction from ", "", fallback);
+    case "child_terminal_result":
+      return member.classification === "failure"
+        ? namedAgentTitle(name, "", " failed", "Agent failed")
+        : namedAgentTitle(name, "Result from ", "", fallback);
+    case "child_requires_action":
+      return namedAgentTitle(name, "", " needs input", fallback);
+    case "child_requires_action_resolved":
+      return namedAgentTitle(name, "", " unblocked", fallback);
+    case "child_paused":
+      return namedAgentTitle(name, "", " paused", fallback);
+    case "child_waiting_capacity":
+      return namedAgentTitle(name, "", " is waiting for capacity", fallback);
+    case "child_progress":
+      return namedAgentTitle(name, "Progress from ", "", fallback);
+    default:
+      return namedAgentTitle(null, "", "", fallback);
+  }
+}
+
+function capitalize(text: string): string {
+  return text ? text[0]!.toUpperCase() + text.slice(1) : text;
+}
+
+/**
+ * Drop the protocol tag and "Worker session id: …" routing note from a
+ * server-written child notice, keeping every other character (and line break)
+ * of the agent's own words.
+ */
+function cleanLines(text: string): string {
+  return text
+    .split("\n")
+    .map((line) =>
+      line
+        .replace(/^\[[A-Z][A-Z _-]*(?:\s+\d+\/\d+)?\]\s*/, "")
+        .replace(/\s*\bWorker session id:\s*[0-9a-f]{8}-[0-9a-f-]{27,}\b\.?/gi, "")
+        .trim(),
+    )
+    .filter((line) => line.length > 0)
+    .join("\n");
+}
+
+/**
+ * Human text for an agent member: the agent's own words where the summary
+ * carries them, without the model-facing "Worker <id> …" framing. `preview`
+ * is the most useful single passage; `body` is everything worth reading.
+ */
+export function agentMemberText(member: Pick<MachineInputMember, "kind" | "summary">): {
+  preview: string;
+  body: string;
+} {
+  const raw = member.summary.trim();
+  const same = (text: string) => ({ preview: text.replace(/\s+/g, " "), body: text });
+  switch (member.kind) {
+    case "child_progress":
+      return same(cleanLines(raw.replace(/^Worker \S+ progress:\s*/, "")));
+    case "child_requires_action":
+      return same(
+        cleanLines(
+          raw
+            .replace(/^Worker \S+ is blocked and needs input(?: \(turn [^)]*\))?\.\s*/, "")
+            .replace(/^It asked:\s*/, "")
+            .replace(/([?!])\.$/, "$1"),
+        ),
+      );
+    case "child_requires_action_resolved":
+      return same(capitalize(cleanLines(raw.replace(/^Worker \S+:\s*/, ""))));
+    case "child_paused": {
+      const match = /^Worker \S+ was paused by (.+?)\.(?:\s*Reason:\s*([\s\S]*))?$/.exec(raw);
+      if (!match) return same(cleanLines(raw));
+      return same(match[2]?.trim() ? cleanLines(match[2]) : `Paused by ${match[1]}`);
+    }
+    case "child_waiting_capacity":
+      return same(capitalize(cleanLines(raw.replace(/^Worker \S+ is\s+/, ""))));
+    case "child_terminal_result": {
+      const lines = raw.split("\n").map((line) => line.trim());
+      const rest = lines.filter(
+        (line) => line.length > 0 && !/^A worker session you spawned has\b/i.test(line),
+      );
+      const field = (prefix: string) =>
+        rest
+          .find((line) => line.startsWith(prefix))
+          ?.slice(prefix.length)
+          .trim() || null;
+      const goal = field("Worker goal:");
+      const evidence = field("Completion evidence:");
+      const rationale = field("Pause rationale:");
+      const body = cleanLines(
+        rest
+          .map((line) =>
+            line
+              .replace(/^Worker goal:\s*/, "Goal: ")
+              .replace(/^Completion evidence:\s*/, "Evidence: ")
+              .replace(/^Pause rationale:\s*/, "Paused because: "),
+          )
+          .join("\n"),
+      );
+      const preview = cleanLines(evidence ?? rationale ?? goal ?? body);
+      return { preview: preview.replace(/\s+/g, " "), body };
+    }
+    default:
+      // Agent messages and directions are the sender's own words, verbatim.
+      return same(raw);
+  }
+}

package/src/components/machines/agent-status-icon.tsx

@@ -0,0 +1,31 @@
+import {
+  CircleAlertIcon,
+  CircleCheckIcon,
+  ClockIcon,
+  DownloadIcon,
+  LoaderCircleIcon,
+  TriangleAlertIcon,
+} from "lucide-react";
+import { cn } from "../../lib/cn";
+import type { StatusTone } from "./machine-status";
+
+/** The leading glyph for an agent status line; color follows the shared tone. */
+export function AgentStatusIcon({ tone, className }: { tone: StatusTone; className?: string }) {
+  const size = cn("size-3.5 shrink-0", className);
+  switch (tone) {
+    case "ok":
+      return <CircleCheckIcon className={cn(size, "text-og-status-idle")} aria-hidden />;
+    case "progress":
+      return (
+        <LoaderCircleIcon className={cn(size, "animate-og-spin text-og-accent")} aria-hidden />
+      );
+    case "waiting":
+      return <ClockIcon className={cn(size, "text-og-fg-subtle")} aria-hidden />;
+    case "attention":
+      return <TriangleAlertIcon className={cn(size, "text-og-status-waiting")} aria-hidden />;
+    case "failed":
+      return <CircleAlertIcon className={cn(size, "text-og-status-failed")} aria-hidden />;
+    default:
+      return <DownloadIcon className={cn(size, "text-og-fg-subtle")} aria-hidden />;
+  }
+}