@opengeni/react 0.13.0 → 0.20.0

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

@@ -0,0 +1,417 @@
+import type {
+  HumanInputAnswer,
+  HumanInputQuestion,
+  SessionHumanInputRequest,
+  SubmitHumanInputResponseRequest,
+} from "@opengeni/sdk";
+import { useEffect, useId, useRef, useState, type FormEvent, type ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+export type HumanInputAnswerDraft = {
+  values: string[];
+  other: string;
+  otherSelected: boolean;
+};
+
+export type HumanInputFormMessages = {
+  title: string;
+  description: string;
+  submit: string;
+  skip: string;
+  submitting: string;
+  other: string;
+  deadlineLabel: string;
+  formatDeadline: (value: string) => string;
+  required: string;
+  minLength: (count: number) => string;
+  maxLength: (count: number) => string;
+  otherRequired: string;
+  minSelections: (count: number) => string;
+  maxSelections: (count: number) => string;
+};
+
+export const defaultHumanInputFormMessages: HumanInputFormMessages = {
+  title: "Your input is needed",
+  description: "The agent is paused until you answer these questions.",
+  submit: "Continue",
+  skip: "Skip",
+  submitting: "Submitting…",
+  other: "Other",
+  deadlineLabel: "Respond before",
+  formatDeadline,
+  required: "This question is required.",
+  minLength: (count) => `Enter at least ${count} characters.`,
+  maxLength: (count) => `Enter no more than ${count} characters.`,
+  otherRequired: "Enter a value for Other.",
+  minSelections: (count) => `Choose at least ${count} option${count === 1 ? "" : "s"}.`,
+  maxSelections: (count) => `Choose no more than ${count} option${count === 1 ? "" : "s"}.`,
+};
+
+export type HumanInputFormProps = {
+  request: Pick<SessionHumanInputRequest, "id" | "questions" | "allowSkip" | "expiresAt">;
+  onSubmit: (response: SubmitHumanInputResponseRequest) => void | Promise<void>;
+  submitting?: boolean | undefined;
+  error?: string | null | undefined;
+  title?: ReactNode;
+  description?: ReactNode;
+  submitLabel?: string | undefined;
+  skipLabel?: string | undefined;
+  messages?: Partial<HumanInputFormMessages> | undefined;
+  autoFocus?: boolean | undefined;
+  className?: string | undefined;
+};
+
+/**
+ * Styled but host-neutral renderer for one structured request. Hosts can use
+ * the headless `useHumanInputRequests` hook instead, or replace the title and
+ * description while retaining accessible field semantics and validation.
+ */
+export function HumanInputForm({
+  request,
+  onSubmit,
+  submitting = false,
+  error,
+  title,
+  description,
+  submitLabel,
+  skipLabel,
+  messages: messageOverrides,
+  autoFocus = true,
+  className,
+}: HumanInputFormProps) {
+  const messages = { ...defaultHumanInputFormMessages, ...messageOverrides };
+  const resolvedTitle = title === undefined ? messages.title : title;
+  const resolvedDescription = description === undefined ? messages.description : description;
+  const resolvedSubmitLabel = submitLabel ?? messages.submit;
+  const resolvedSkipLabel = skipLabel ?? messages.skip;
+  const formId = useId();
+  const [drafts, setDrafts] = useState<Record<string, HumanInputAnswerDraft>>(() =>
+    initialDrafts(request.questions),
+  );
+  const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
+  const [submissionError, setSubmissionError] = useState<string | null>(null);
+  const [submittingInternally, setSubmittingInternally] = useState(false);
+  const submissionInFlight = useRef(false);
+  const submissionGeneration = useRef(0);
+  const busy = submitting || submittingInternally;
+
+  useEffect(() => {
+    submissionGeneration.current += 1;
+    submissionInFlight.current = false;
+    setDrafts(initialDrafts(request.questions));
+    setValidationErrors({});
+    setSubmissionError(null);
+    setSubmittingInternally(false);
+  }, [request.id, request.questions]);
+
+  const update = (
+    questionId: string,
+    apply: (draft: HumanInputAnswerDraft) => HumanInputAnswerDraft,
+  ): void => {
+    setDrafts((current) => ({
+      ...current,
+      [questionId]: apply(current[questionId] ?? emptyDraft()),
+    }));
+    setValidationErrors((current) => {
+      if (!(questionId in current)) return current;
+      const next = { ...current };
+      delete next[questionId];
+      return next;
+    });
+  };
+
+  const submitResponse = async (response: SubmitHumanInputResponseRequest): Promise<void> => {
+    if (busy || submissionInFlight.current) return;
+    const generation = submissionGeneration.current;
+    submissionInFlight.current = true;
+    setSubmissionError(null);
+    setSubmittingInternally(true);
+    try {
+      await onSubmit(response);
+    } catch (cause) {
+      if (generation === submissionGeneration.current) {
+        setSubmissionError(cause instanceof Error ? cause.message : String(cause));
+      }
+    } finally {
+      if (generation === submissionGeneration.current) {
+        submissionInFlight.current = false;
+        setSubmittingInternally(false);
+      }
+    }
+  };
+
+  const submit = async (event: FormEvent<HTMLFormElement>): Promise<void> => {
+    event.preventDefault();
+    const result = answersFromDrafts(request.questions, drafts, messages);
+    if (Object.keys(result.errors).length > 0) {
+      setValidationErrors(result.errors);
+      return;
+    }
+    await submitResponse({ outcome: "answered", answers: result.answers });
+  };
+
+  return (
+    <form
+      data-human-input-request={request.id}
+      onSubmit={(event) => void submit(event)}
+      className={cn(
+        "og-root flex w-full flex-col gap-5 rounded-og-lg border border-og-border bg-og-surface-1 p-5 shadow-og-sm",
+        className,
+      )}
+    >
+      <header>
+        <h2 className="text-og-md font-semibold text-og-fg">{resolvedTitle}</h2>
+        {resolvedDescription ? (
+          <div className="mt-1 text-og-sm text-og-fg-muted">{resolvedDescription}</div>
+        ) : null}
+        {request.expiresAt ? (
+          <p className="mt-1 text-og-xs text-og-fg-subtle">
+            {messages.deadlineLabel}{" "}
+            <time dateTime={request.expiresAt}>{messages.formatDeadline(request.expiresAt)}</time>
+          </p>
+        ) : null}
+      </header>
+
+      <fieldset disabled={busy} className="contents">
+        {request.questions.map((question, index) => {
+          const draft = drafts[question.id] ?? emptyDraft();
+          const fieldId = `${formId}-${index}`;
+          const errorId = `${fieldId}-error`;
+          const helpId = `${fieldId}-help`;
+          const describedBy =
+            [question.helpText ? helpId : null, validationErrors[question.id] ? errorId : null]
+              .filter(Boolean)
+              .join(" ") || undefined;
+          return (
+            <div key={question.id} className="flex flex-col gap-2">
+              <label
+                htmlFor={question.kind === "text" ? fieldId : undefined}
+                className="text-og-base font-medium text-og-fg"
+              >
+                {question.label ?? question.prompt}
+                {question.required ? (
+                  <span aria-hidden className="ml-1 text-og-status-failed">
+                    *
+                  </span>
+                ) : null}
+              </label>
+              {question.label ? (
+                <p className="text-og-sm text-og-fg-muted">{question.prompt}</p>
+              ) : null}
+              {question.helpText ? (
+                <p id={helpId} className="text-og-xs text-og-fg-subtle">
+                  {question.helpText}
+                </p>
+              ) : null}
+              {question.kind === "text" ? (
+                <textarea
+                  id={fieldId}
+                  value={draft.values[0] ?? ""}
+                  onChange={(event) =>
+                    update(question.id, (current) => ({
+                      ...current,
+                      values: event.target.value ? [event.target.value] : [],
+                    }))
+                  }
+                  aria-invalid={Boolean(validationErrors[question.id])}
+                  aria-describedby={describedBy}
+                  autoFocus={autoFocus && index === 0}
+                  rows={3}
+                  className="min-h-20 w-full resize-y rounded-og-md border border-og-border bg-og-surface-2 px-3 py-2 text-og-base text-og-fg outline-none placeholder:text-og-fg-subtle focus:border-og-accent"
+                />
+              ) : (
+                <div
+                  role={question.kind === "single_select" ? "radiogroup" : "group"}
+                  aria-describedby={describedBy}
+                  className="flex flex-col gap-2"
+                >
+                  {question.options.map((option, optionIndex) => {
+                    const checked = draft.values.includes(option.id);
+                    return (
+                      <label
+                        key={option.id}
+                        className="flex cursor-pointer items-start gap-2 rounded-og-md border border-og-border px-3 py-2 hover:bg-og-surface-2"
+                      >
+                        <input
+                          type={question.kind === "single_select" ? "radio" : "checkbox"}
+                          name={question.kind === "single_select" ? fieldId : undefined}
+                          autoFocus={autoFocus && index === 0 && optionIndex === 0}
+                          checked={checked}
+                          onChange={(event) =>
+                            update(question.id, (current) => ({
+                              ...current,
+                              values:
+                                question.kind === "single_select"
+                                  ? event.target.checked
+                                    ? [option.id]
+                                    : []
+                                  : event.target.checked
+                                    ? [...current.values, option.id]
+                                    : current.values.filter((value) => value !== option.id),
+                              ...(question.kind === "single_select" && event.target.checked
+                                ? { otherSelected: false }
+                                : {}),
+                            }))
+                          }
+                          className="mt-0.5 accent-og-accent"
+                        />
+                        <span className="min-w-0">
+                          <span className="block text-og-sm font-medium text-og-fg">
+                            {option.label}
+                          </span>
+                          {option.description ? (
+                            <span className="block text-og-xs text-og-fg-muted">
+                              {option.description}
+                            </span>
+                          ) : null}
+                        </span>
+                      </label>
+                    );
+                  })}
+                  {question.allowOther ? (
+                    <label className="flex items-start gap-2 rounded-og-md border border-og-border px-3 py-2">
+                      <input
+                        type={question.kind === "single_select" ? "radio" : "checkbox"}
+                        name={question.kind === "single_select" ? fieldId : undefined}
+                        checked={draft.otherSelected}
+                        autoFocus={autoFocus && index === 0 && question.options.length === 0}
+                        onChange={(event) =>
+                          update(question.id, (current) => ({
+                            ...current,
+                            otherSelected: event.target.checked,
+                            ...(question.kind === "single_select" && event.target.checked
+                              ? { values: [] }
+                              : {}),
+                          }))
+                        }
+                        className="mt-2 accent-og-accent"
+                      />
+                      <span className="min-w-0 flex-1">
+                        <span className="block text-og-sm font-medium text-og-fg">
+                          {messages.other}
+                        </span>
+                        <input
+                          type="text"
+                          value={draft.other}
+                          disabled={!draft.otherSelected || busy}
+                          onChange={(event) =>
+                            update(question.id, (current) => ({
+                              ...current,
+                              other: event.target.value,
+                            }))
+                          }
+                          className="mt-1 w-full rounded-og-sm border border-og-border bg-og-surface-2 px-2 py-1.5 text-og-sm text-og-fg outline-none focus:border-og-accent disabled:opacity-50"
+                        />
+                      </span>
+                    </label>
+                  ) : null}
+                </div>
+              )}
+              {validationErrors[question.id] ? (
+                <p id={errorId} role="alert" className="text-og-xs text-og-status-failed">
+                  {validationErrors[question.id]}
+                </p>
+              ) : null}
+            </div>
+          );
+        })}
+      </fieldset>
+
+      {(error ?? submissionError) ? (
+        <p role="alert" className="text-og-sm text-og-status-failed">
+          {error ?? submissionError}
+        </p>
+      ) : null}
+      <footer className="flex items-center justify-end gap-2">
+        {request.allowSkip ? (
+          <button
+            type="button"
+            disabled={busy}
+            onClick={() => void submitResponse({ outcome: "skipped" })}
+            className="rounded-og-md border border-og-border px-3 py-2 text-og-sm font-medium text-og-fg-muted hover:bg-og-surface-2 disabled:opacity-50"
+          >
+            {resolvedSkipLabel}
+          </button>
+        ) : null}
+        <button
+          type="submit"
+          disabled={busy}
+          className="rounded-og-md bg-og-accent px-3 py-2 text-og-sm font-medium text-og-accent-fg hover:bg-og-accent-strong disabled:opacity-50"
+        >
+          {busy ? messages.submitting : resolvedSubmitLabel}
+        </button>
+      </footer>
+    </form>
+  );
+}
+
+export function answersFromDrafts(
+  questions: HumanInputQuestion[],
+  drafts: Record<string, HumanInputAnswerDraft>,
+  messageOverrides: Partial<HumanInputFormMessages> = {},
+): { answers: HumanInputAnswer[]; errors: Record<string, string> } {
+  const messages = { ...defaultHumanInputFormMessages, ...messageOverrides };
+  const answers: HumanInputAnswer[] = [];
+  const errors: Record<string, string> = {};
+  for (const question of questions) {
+    const draft = drafts[question.id] ?? emptyDraft();
+    const values = question.kind === "text" ? draft.values.filter(Boolean) : draft.values;
+    const other = draft.otherSelected ? draft.other.trim() : "";
+    const supplied = values.length + (other ? 1 : 0);
+    if (question.required && supplied === 0) {
+      errors[question.id] = messages.required;
+      continue;
+    }
+    if (question.kind === "text") {
+      const value = values[0] ?? "";
+      if (
+        value &&
+        question.validation?.minLength != null &&
+        value.length < question.validation.minLength
+      ) {
+        errors[question.id] = messages.minLength(question.validation.minLength);
+        continue;
+      }
+      if (question.validation?.maxLength != null && value.length > question.validation.maxLength) {
+        errors[question.id] = messages.maxLength(question.validation.maxLength);
+        continue;
+      }
+    } else {
+      if (draft.otherSelected && !other) {
+        errors[question.id] = messages.otherRequired;
+        continue;
+      }
+      const min = question.validation?.minSelections;
+      const max = question.kind === "single_select" ? 1 : question.validation?.maxSelections;
+      if (min != null && supplied < min) {
+        errors[question.id] = messages.minSelections(min);
+        continue;
+      }
+      if (max != null && supplied > max) {
+        errors[question.id] = messages.maxSelections(max);
+        continue;
+      }
+    }
+    if (supplied > 0) {
+      answers.push({
+        questionId: question.id,
+        values,
+        ...(other ? { other } : {}),
+      });
+    }
+  }
+  return { answers, errors };
+}
+
+function initialDrafts(questions: HumanInputQuestion[]): Record<string, HumanInputAnswerDraft> {
+  return Object.fromEntries(questions.map((question) => [question.id, emptyDraft()]));
+}
+
+function emptyDraft(): HumanInputAnswerDraft {
+  return { values: [], other: "", otherSelected: false };
+}
+
+function formatDeadline(value: string): string {
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? value : date.toLocaleString();
+}

package/src/components/machine-card.tsx

@@ -1,4 +1,5 @@
 import {
+  ArrowRightIcon,
   CpuIcon,
   LaptopIcon,
   MonitorIcon,
@@ -8,9 +9,10 @@ import {
 } from "lucide-react";
 import { cn } from "../lib/cn";
 import { formatRelativeTime } from "../lib/format";
-import type { MachineView } from "../types/machines";
+import type { MachineView, MetricSample } from "../types/machines";
+import { MachineHealthPill } from "./machine-health-pill";
 import { MachineMetrics } from "./machine-metrics";
-import { MachineStatusPill } from "./machine-status-pill";
+import { MetricSparkline } from "./machines/metric-sparkline";
 
 export type MachineCardProps = {
   machine: MachineView;
@@ -18,6 +20,11 @@ export type MachineCardProps = {
   onAttach?: ((machine: MachineView) => void) | undefined;
   /** Whether an attach/swap is currently in flight (disables the affordance). */
   attaching?: 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. */
+  onOpenDetail?: ((machine: MachineView) => void) | undefined;
+  now?: number | undefined;
   className?: string | undefined;
 };
 
@@ -29,23 +36,52 @@ function KindIcon({ machine }: { machine: MachineView }) {
 }
 
 /**
- * One machine in the Machines dashboard: name + kind + OS/arch, the composite
- * connection/state/shared status, latest resource meters, last-seen recency, and
- * an attach/swap affordance. The session's currently-active sandbox carries an
- * accent edge + an "Active" marker (never an attach button — it's already active).
+ * One machine in the Machines dashboard: name + kind + OS/arch, the fused HEALTH
+ * verdict, latest resource meters, a CPU trend that previews the history, live
+ * freshness, and attach/swap. The whole card opens the telemetry detail when
+ * `onOpenDetail` is wired. The session's active sandbox carries an accent edge.
  */
-export function MachineCard({ machine, onAttach, attaching, className }: MachineCardProps) {
+export function MachineCard({
+  machine,
+  onAttach,
+  attaching,
+  series,
+  onOpenDetail,
+  now,
+  className,
+}: MachineCardProps) {
   const offline = machine.state === "offline";
   const attachable = !machine.active && !offline && Boolean(onAttach);
   const shared = machine.sharedSessionCount > 1;
+  const clockNow = now ?? Date.now();
+  const sampledAgo = machine.metrics
+    ? formatRelativeTime(machine.metrics.sampledAt, new Date(clockNow))
+    : null;
+  const cpuPts = (series ?? []).map((s) => ({ t: new Date(s.sampledAt).getTime(), v: s.cpuPct }));
+  const openable = Boolean(onOpenDetail);
 
   return (
     <div
       data-machine-card={machine.sandboxId}
       data-active={machine.active ? "true" : "false"}
+      role={openable ? "button" : undefined}
+      tabIndex={openable ? 0 : undefined}
+      onClick={openable ? () => onOpenDetail?.(machine) : undefined}
+      onKeyDown={
+        openable
+          ? (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onOpenDetail?.(machine);
+              }
+            }
+          : undefined
+      }
       className={cn(
-        "og-root relative flex flex-col gap-3 overflow-hidden rounded-og-lg border border-og-border",
-        "bg-og-surface-1 p-4 shadow-og-sm",
+        "og-root group relative flex flex-col gap-3 overflow-hidden rounded-og-lg border border-og-border",
+        "bg-og-surface-1 p-4 shadow-og-sm transition-colors",
+        openable &&
+          "cursor-pointer hover:border-og-border-strong focus-visible:border-og-accent/60 focus-visible:outline-none",
         machine.active && "border-og-accent/40",
         className,
       )}
@@ -91,9 +127,10 @@ export function MachineCard({ machine, onAttach, attaching, className }: Machine
             </div>
           </div>
         </div>
-        <MachineStatusPill
+        <MachineHealthPill
           state={machine.state}
-          sharedSessionCount={machine.sharedSessionCount}
+          metrics={machine.metrics}
+          now={clockNow}
           size="sm"
           className="shrink-0"
         />
@@ -111,10 +148,36 @@ export function MachineCard({ machine, onAttach, attaching, className }: Machine
 
       <MachineMetrics metrics={machine.metrics} />
 
+      {/* CPU trend — previews the history and invites opening the detail. */}
+      {cpuPts.length > 1 ? (
+        <div className="flex flex-col gap-1 rounded-og-md bg-og-surface-2/40 p-2.5">
+          <div className="flex items-center justify-between text-[10px] font-medium uppercase tracking-wide text-og-fg-subtle">
+            <span>CPU · last 15m</span>
+            {openable ? (
+              <span className="flex items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
+                Telemetry <ArrowRightIcon className="size-2.5" aria-hidden />
+              </span>
+            ) : null}
+          </div>
+          <MetricSparkline points={cpuPts} color="var(--og-color-accent)" yMax={100} height={26} />
+        </div>
+      ) : null}
+
       <div className="mt-1 flex items-center justify-between gap-3 text-og-xs text-og-fg-subtle">
-        <span>
-          {machine.lastSeenAt ? (
-            <>Last seen {formatRelativeTime(machine.lastSeenAt)}</>
+        <span className="inline-flex items-center gap-1.5">
+          {sampledAgo ? (
+            <>
+              <span
+                className={cn(
+                  "size-1.5 rounded-full",
+                  sampledAgo === "now" ? "bg-og-status-idle" : "bg-og-fg-subtle",
+                )}
+                aria-hidden
+              />
+              {sampledAgo === "now" ? "Live" : `Updated ${sampledAgo} ago`}
+            </>
+          ) : machine.lastSeenAt ? (
+            <>Last seen {formatRelativeTime(machine.lastSeenAt, new Date(clockNow))}</>
           ) : (
             "Never connected"
           )}
@@ -126,9 +189,12 @@ export function MachineCard({ machine, onAttach, attaching, className }: Machine
             type="button"
             data-attach
             disabled={attaching}
-            onClick={() => onAttach?.(machine)}
+            onClick={(e) => {
+              e.stopPropagation();
+              onAttach?.(machine);
+            }}
             className={cn(
-              "rounded-og-sm border border-og-border px-2.5 py-1 text-og-xs font-medium text-og-fg-muted transition-colors pointer-coarse:min-h-10",
+              "rounded-og-sm border border-og-border px-2.5 py-1 text-og-xs font-medium text-og-fg-muted transition-colors pointer-coarse:min-h-11",
               "hover:border-og-border-strong hover:text-og-fg disabled:cursor-not-allowed disabled:opacity-50",
             )}
           >

package/src/components/machine-health-pill.tsx

@@ -0,0 +1,68 @@
+// The card's primary status: the fused HEALTH verdict (dot + label), which
+// subsumes plain connection state (offline/reconnecting fall out of it) and adds
+// resource-pressure + staleness. Capability limitations (consent / no display /
+// enrolling) are orthogonal to reachability, so they ride alongside as their own
+// quiet chip — reusing the existing badge meta so the two surfaces never drift.
+import { cn } from "../lib/cn";
+import type { MachineState, MetricSample } from "../types/machines";
+import { deriveHealth, HEALTH_TOKEN, healthPulses } from "./machines/health";
+import { MACHINE_STATE_BADGE_META } from "./machine-status-pill";
+
+export type MachineHealthPillProps = {
+  state: MachineState;
+  metrics: MetricSample | null;
+  now?: number | undefined;
+  size?: "sm" | "md" | undefined;
+  className?: string | undefined;
+};
+
+export function MachineHealthPill({
+  state,
+  metrics,
+  now,
+  size = "sm",
+  className,
+}: MachineHealthPillProps) {
+  const health = deriveHealth(state, metrics, now ?? Date.now());
+  const tone = HEALTH_TOKEN[health.level];
+  const badge = MACHINE_STATE_BADGE_META[state];
+  const pad = size === "md" ? "px-2.5 py-1 text-og-sm" : "px-2 py-0.5 text-og-xs";
+
+  return (
+    <div className={cn("flex shrink-0 items-center gap-1.5", className)}>
+      {badge ? (
+        <span
+          className={cn(
+            "rounded-full border px-2 py-0.5 text-og-xs font-medium",
+            badge.badgeClassName,
+          )}
+        >
+          {badge.label}
+        </span>
+      ) : null}
+      <span
+        className={cn(
+          "inline-flex items-center gap-1.5 rounded-full border font-medium",
+          pad,
+          tone.soft,
+          tone.text,
+        )}
+        data-health={health.level}
+        title={health.reason}
+      >
+        <span className="relative flex size-2">
+          {healthPulses(health.level) && (
+            <span
+              className={cn(
+                "absolute inline-flex size-full animate-og-pulse rounded-full opacity-60",
+                tone.dot,
+              )}
+            />
+          )}
+          <span className={cn("relative inline-flex size-2 rounded-full", tone.dot)} />
+        </span>
+        {health.label}
+      </span>
+    </div>
+  );
+}