@opengeni/react 0.4.0 → 0.6.0

package/src/components/machine-metrics.tsx

@@ -0,0 +1,184 @@
+import { cn } from "../lib/cn";
+import { formatBytes } from "../lib/format";
+import type { MetricSample } from "../types/machines";
+
+export type MachineMetricsProps = {
+  /** The latest metric sample, or null when the machine hasn't reported yet. */
+  metrics: MetricSample | null;
+  /** Compact (dashboard row) vs full (the dock detail). */
+  density?: "compact" | "full" | undefined;
+  className?: string | undefined;
+};
+
+/** Clamp a 0..100-ish percent into the bar range. */
+function pct(value: number): number {
+  if (!Number.isFinite(value)) return 0;
+  return Math.max(0, Math.min(100, value));
+}
+
+/** A label/value pair with a token-tinted utilisation bar. */
+function Meter({
+  label,
+  value,
+  fillPct,
+  tone,
+}: {
+  label: string;
+  value: string;
+  fillPct: number;
+  tone: "ok" | "warn" | "hot";
+}) {
+  const fillClass =
+    tone === "hot" ? "bg-og-status-failed" : tone === "warn" ? "bg-og-status-waiting" : "bg-og-status-running";
+  return (
+    <div className="flex min-w-0 flex-col gap-1" data-metric={label.toLowerCase()}>
+      <div className="flex items-baseline justify-between gap-2">
+        <span className="text-[10px] font-medium uppercase tracking-wide text-og-fg-subtle">{label}</span>
+        <span className="font-og-mono text-[11px] tabular-nums text-og-fg-muted">{value}</span>
+      </div>
+      <div className="h-1 w-full overflow-hidden rounded-full bg-og-surface-2">
+        <div
+          className={cn("h-full rounded-full transition-[width] duration-500", fillClass)}
+          style={{ width: `${pct(fillPct)}%` }}
+        />
+      </div>
+    </div>
+  );
+}
+
+/** Map a percent to a calm/warn/hot tone (no color invented — token classes). */
+function toneFor(p: number): "ok" | "warn" | "hot" {
+  if (p >= 90) return "hot";
+  if (p >= 70) return "warn";
+  return "ok";
+}
+
+/** The token text color for a tone (matches the `Meter` fill ramp). */
+function toneTextClass(tone: "ok" | "warn" | "hot"): string {
+  return tone === "hot" ? "text-og-status-failed" : tone === "warn" ? "text-og-status-waiting" : "text-og-status-running";
+}
+
+/**
+ * Load average as three labeled mini-stats (1m / 5m / 15m) — an honest triple of
+ * numbers, NOT a fake gauge. The whole triple is tinted by `load1`'s tone (load
+ * isn't a 0..100 ratio, so we tone it but never draw a bar). Run queue rides
+ * alongside as a quiet chip when there's pending work.
+ */
+function StatTriple({
+  load1,
+  load5,
+  load15,
+  runQueue,
+}: {
+  load1: number;
+  load5: number;
+  load15: number;
+  runQueue: number;
+}) {
+  // Load isn't a percent — tone by load1 against a nominal single-core ceiling
+  // (≥0.9/core ≈ saturated). Used only to tint the labels/values, never a bar.
+  const tone = toneFor(load1 * 100);
+  const stats: Array<{ label: string; value: number }> = [
+    { label: "1m", value: load1 },
+    { label: "5m", value: load5 },
+    { label: "15m", value: load15 },
+  ];
+  return (
+    <div className="flex items-center justify-between gap-3" data-metric="load">
+      <div className="flex min-w-0 flex-col gap-1">
+        <span className="text-[10px] font-medium uppercase tracking-wide text-og-fg-subtle">Load</span>
+        <div className="flex items-baseline gap-3">
+          {stats.map((s) => (
+            <div key={s.label} className="flex items-baseline gap-1">
+              <span className={cn("text-[10px] font-medium uppercase tracking-wide", toneTextClass(tone))}>
+                {s.label}
+              </span>
+              <span className={cn("font-og-mono text-[12px] tabular-nums", toneTextClass(tone))}>
+                {s.value.toFixed(2)}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+      {runQueue > 0 ? (
+        <div
+          className="flex shrink-0 items-baseline gap-1.5 rounded-og-sm bg-og-surface-2 px-2 py-1 text-[11px] text-og-fg-subtle"
+          data-metric="runqueue"
+        >
+          <span className="font-medium uppercase tracking-wide">Queue</span>
+          <span className="font-og-mono tabular-nums text-og-fg-muted">{runQueue}</span>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * Per-machine resource meters: CPU%, load average, memory, disk, and GPU when
+ * present. Renders the M2 `machine_metrics_latest` sample. When `metrics` is
+ * null the panel shows a quiet "no samples yet" placeholder (offline / just
+ * enrolled). GPU rows only render when `gpuUtilPct` is non-null.
+ */
+export function MachineMetrics({ metrics, density = "compact", className }: MachineMetricsProps) {
+  if (!metrics) {
+    return (
+      <div className={cn("text-[11px] text-og-fg-subtle", className)} data-metrics-empty>
+        No metrics yet
+      </div>
+    );
+  }
+
+  const memPct = metrics.memTotalBytes > 0 ? (metrics.memUsedBytes / metrics.memTotalBytes) * 100 : 0;
+  const diskPct = metrics.diskTotalBytes > 0 ? (metrics.diskUsedBytes / metrics.diskTotalBytes) * 100 : 0;
+  const hasGpu = metrics.gpuUtilPct !== null;
+  const gpuMemLabel = metrics.gpuMemBytes !== null ? formatBytes(metrics.gpuMemBytes) : null;
+  // Memory & disk are honest used/total ratios → full-width meters; stack them in
+  // the dock detail, two-up in the dashboard row.
+  const ratioGridClass = density === "full" ? "grid-cols-1" : "grid-cols-1 sm:grid-cols-2";
+
+  return (
+    <div className={cn("flex flex-col gap-3", className)} data-machine-metrics>
+      {/* Resources — used/total ratios with real 0..100% bars. */}
+      <div className={cn("grid gap-x-4 gap-y-2.5", ratioGridClass)}>
+        <Meter
+          label="Memory"
+          value={`${formatBytes(metrics.memUsedBytes)} / ${formatBytes(metrics.memTotalBytes)}`}
+          fillPct={memPct}
+          tone={toneFor(memPct)}
+        />
+        <Meter
+          label="Disk"
+          value={`${formatBytes(metrics.diskUsedBytes)} / ${formatBytes(metrics.diskTotalBytes)}`}
+          fillPct={diskPct}
+          tone={toneFor(diskPct)}
+        />
+      </div>
+
+      {/* Utilization — CPU% (and GPU% when present) as honest percent gauges. */}
+      <div className="grid grid-cols-2 gap-x-4 gap-y-2.5">
+        <Meter
+          label="CPU"
+          value={`${metrics.cpuPct.toFixed(0)}%`}
+          fillPct={metrics.cpuPct}
+          tone={toneFor(metrics.cpuPct)}
+        />
+        {hasGpu ? (
+          <Meter
+            label="GPU"
+            value={gpuMemLabel ? `${metrics.gpuUtilPct!.toFixed(0)}% · ${gpuMemLabel}` : `${metrics.gpuUtilPct!.toFixed(0)}%`}
+            fillPct={metrics.gpuUtilPct!}
+            tone={toneFor(metrics.gpuUtilPct!)}
+          />
+        ) : null}
+      </div>
+
+      {/* Activity — load average as labeled mini-stats (no fake bar) + run queue. */}
+      <StatTriple
+        load1={metrics.load1}
+        load5={metrics.load5}
+        load15={metrics.load15}
+        runQueue={metrics.runQueue}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,157 @@
+import { cn } from "../lib/cn";
+import {
+  type ConnectionStatus,
+  connectionStatusForState,
+  type MachineState,
+} from "../types/machines";
+
+export type ConnectionStatusMeta = {
+  label: string;
+  dotClassName: string;
+  badgeClassName: string;
+  /** Live/transient states breathe; settled states hold still. */
+  pulse: boolean;
+};
+
+/** Token-backed meta for the three connection-status pill values. */
+export const CONNECTION_STATUS_META: Record<ConnectionStatus, ConnectionStatusMeta> = {
+  online: {
+    label: "Online",
+    dotClassName: "bg-og-status-running",
+    badgeClassName: "text-og-status-running border-og-status-running/30 bg-og-status-running/10",
+    pulse: false,
+  },
+  reconnecting: {
+    label: "Reconnecting",
+    dotClassName: "bg-og-status-waiting",
+    badgeClassName: "text-og-status-waiting border-og-status-waiting/35 bg-og-status-waiting/10",
+    pulse: true,
+  },
+  offline: {
+    label: "Offline",
+    dotClassName: "bg-og-status-failed",
+    badgeClassName: "text-og-fg-subtle border-og-border bg-og-status-failed/10",
+    pulse: false,
+  },
+};
+
+export type MachineStateBadgeMeta = {
+  label: string;
+  badgeClassName: string;
+};
+
+/**
+ * The non-connection state badges that ride ALONGSIDE the connection pill —
+ * `consent_required` / `display_unavailable` / `enrolling` describe a capability
+ * limitation, not reachability, so they render as their own tinted chip.
+ */
+export const MACHINE_STATE_BADGE_META: Partial<Record<MachineState, MachineStateBadgeMeta>> = {
+  consent_required: {
+    label: "Consent required",
+    badgeClassName: "text-og-status-waiting border-og-status-waiting/35 bg-og-status-waiting/10",
+  },
+  display_unavailable: {
+    label: "No display",
+    badgeClassName: "text-og-fg-muted border-og-border bg-og-surface-2",
+  },
+  enrolling: {
+    label: "Enrolling",
+    badgeClassName: "text-og-accent border-og-accent/30 bg-og-accent-soft",
+  },
+};
+
+export type ConnectionStatusPillProps = {
+  status: ConnectionStatus;
+  /** Override the label ("Online" -> "Connected", ...). */
+  label?: string | undefined;
+  size?: "sm" | "md" | undefined;
+  className?: string | undefined;
+};
+
+/**
+ * The connection-status pill (online / reconnecting / offline) surfaced across
+ * the Machines dashboard, the dock header, and the session timeline. Reconnecting
+ * breathes (the resiliency-as-headline blip), online/offline hold still.
+ */
+export function ConnectionStatusPill({ status, label, size = "md", className }: ConnectionStatusPillProps) {
+  const meta = CONNECTION_STATUS_META[status];
+  return (
+    <span
+      data-connection-status={status}
+      className={cn(
+        "og-root inline-flex shrink-0 items-center rounded-full border font-medium",
+        size === "sm" ? "gap-1 px-1.5 py-px text-[10px]" : "gap-1.5 px-2 py-0.5 text-xs",
+        meta.badgeClassName,
+        className,
+      )}
+    >
+      <ConnectionDot status={status} className={size === "sm" ? "size-1" : "size-1.5"} />
+      {label ?? meta.label}
+    </span>
+  );
+}
+
+export type ConnectionDotProps = {
+  status: ConnectionStatus;
+  className?: string | undefined;
+};
+
+/** Just the dot — for dense rows, the dock header, and timeline notices. */
+export function ConnectionDot({ status, className }: ConnectionDotProps) {
+  const meta = CONNECTION_STATUS_META[status];
+  return (
+    <span className={cn("relative inline-flex size-1.5 shrink-0 rounded-full", meta.dotClassName, className)}>
+      {meta.pulse ? <span className={cn("absolute inset-0 animate-og-pulse rounded-full", meta.dotClassName)} /> : null}
+    </span>
+  );
+}
+
+export type MachineStatusPillProps = {
+  /** The machine's full state — drives the connection pill + any state badge. */
+  state: MachineState;
+  /** How many live sessions share this lease (renders a "Shared" chip when >1). */
+  sharedSessionCount?: number | undefined;
+  size?: "sm" | "md" | undefined;
+  className?: string | undefined;
+};
+
+/**
+ * The composite machine status surface: the connection pill PLUS any
+ * consent/display/enrolling badge PLUS a shared-in-use chip. One component the
+ * dashboard row, the dock header, and the timeline all reuse so the status
+ * language is identical everywhere.
+ */
+export function MachineStatusPill({ state, sharedSessionCount, size = "md", className }: MachineStatusPillProps) {
+  const stateBadge = MACHINE_STATE_BADGE_META[state];
+  const shared = (sharedSessionCount ?? 0) > 1;
+  return (
+    <span className={cn("og-root inline-flex flex-wrap items-center gap-1", className)} data-machine-state={state}>
+      <ConnectionStatusPill status={connectionStatusForState(state)} size={size} />
+      {stateBadge ? (
+        <span
+          data-state-badge={state}
+          className={cn(
+            "inline-flex shrink-0 items-center rounded-full border font-medium",
+            size === "sm" ? "px-1.5 py-px text-[10px]" : "px-2 py-0.5 text-xs",
+            stateBadge.badgeClassName,
+          )}
+        >
+          {stateBadge.label}
+        </span>
+      ) : null}
+      {shared ? (
+        <span
+          data-shared-chip
+          className={cn(
+            "inline-flex shrink-0 items-center gap-1 rounded-full border font-medium",
+            "text-og-accent border-og-accent/30 bg-og-accent-soft",
+            size === "sm" ? "px-1.5 py-px text-[10px]" : "px-2 py-0.5 text-xs",
+          )}
+          title={`${sharedSessionCount} sessions are on this machine`}
+        >
+          Shared · {sharedSessionCount}
+        </span>
+      ) : null}
+    </span>
+  );
+}

package/src/components/machines-dashboard.tsx

@@ -0,0 +1,151 @@
+import { type ReactNode } from "react";
+import { LaptopIcon, PlusIcon, RefreshCwIcon } from "lucide-react";
+import { cn } from "../lib/cn";
+import type { MachineView } from "../types/machines";
+import { MachineCard } from "./machine-card";
+
+export type MachinesDashboardProps = {
+  machines: MachineView[];
+  /** The session's active sandbox id (drives the per-card "Active" marker). */
+  activeSandboxId?: string | null | undefined;
+  loading?: boolean | undefined;
+  error?: Error | null | undefined;
+  /** Attach/swap the session's active sandbox to a machine. */
+  onAttach?: ((machine: MachineView) => void) | undefined;
+  /** The sandbox id currently being attached/swapped to (disables that card). */
+  attachingSandboxId?: string | null | undefined;
+  /** Open the enrollment flow (the "Enroll a machine" CTA). */
+  onEnroll?: (() => void) | undefined;
+  onRefresh?: (() => void) | undefined;
+  className?: string | undefined;
+};
+
+function EmptyState({ onEnroll }: { onEnroll?: (() => void) | undefined }) {
+  return (
+    <div
+      data-machines-empty
+      className="flex flex-col items-center justify-center gap-3 rounded-og-lg border border-dashed border-og-border bg-og-surface-1 px-6 py-12 text-center"
+    >
+      <span className="flex size-10 items-center justify-center rounded-full bg-og-surface-2 text-og-fg-subtle">
+        <LaptopIcon className="size-5" aria-hidden />
+      </span>
+      <div className="space-y-1">
+        <p className="text-sm font-medium text-og-fg">No machines yet</p>
+        <p className="max-w-xs text-[12px] text-og-fg-muted">
+          Enroll your own computer to run the agent on it — your files, your terminal, your desktop.
+        </p>
+      </div>
+      {onEnroll ? (
+        <button
+          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-xs font-medium text-og-accent-fg transition-colors hover:bg-og-accent-strong"
+        >
+          <PlusIcon className="size-3.5" aria-hidden />
+          Enroll a machine
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+function Header({
+  count,
+  onEnroll,
+  onRefresh,
+}: {
+  count: number;
+  onEnroll?: (() => void) | undefined;
+  onRefresh?: (() => void) | undefined;
+}): ReactNode {
+  return (
+    <div className="flex items-center justify-between gap-3">
+      <div className="flex items-baseline gap-2">
+        <h2 className="text-sm font-semibold text-og-fg">Machines</h2>
+        <span className="font-og-mono text-[11px] 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="size-3.5" aria-hidden />
+          </button>
+        ) : null}
+        {onEnroll ? (
+          <button
+            type="button"
+            data-enroll-cta
+            onClick={onEnroll}
+            className="inline-flex items-center gap-1.5 rounded-og-sm border border-og-border px-2.5 py-1 text-xs font-medium text-og-fg-muted transition-colors hover:border-og-border-strong hover:text-og-fg"
+          >
+            <PlusIcon className="size-3.5" aria-hidden />
+            Enroll
+          </button>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * The workspace Machines dashboard: the fleet of selfhosted enrollments + the
+ * session's Modal sandbox, each with its connection-status pill, state badges,
+ * latest metrics, and an attach/swap affordance. Renders the empty state (no
+ * machines → enroll CTA), a load error, and the populated grid. The component
+ * is purely presentational — feed it `MachinesResponse` data via `useMachines`.
+ */
+export function MachinesDashboard({
+  machines,
+  activeSandboxId,
+  loading,
+  error,
+  onAttach,
+  attachingSandboxId,
+  onEnroll,
+  onRefresh,
+  className,
+}: MachinesDashboardProps) {
+  const isEmpty = !loading && !error && machines.length === 0;
+
+  return (
+    <section data-machines-dashboard className={cn("og-root flex flex-col gap-3", className)}>
+      <Header count={machines.length} onEnroll={onEnroll} onRefresh={onRefresh} />
+
+      {error ? (
+        <p
+          data-machines-error
+          className="rounded-og-md border border-og-status-failed/30 bg-og-status-failed/10 px-3 py-2 text-[12px] text-og-status-failed"
+        >
+          Could not load machines: {error.message}
+        </p>
+      ) : null}
+
+      {loading && machines.length === 0 ? (
+        <div data-machines-loading className="grid gap-3 sm:grid-cols-2">
+          {[0, 1].map((i) => (
+            <div key={i} className="h-36 animate-og-pulse rounded-og-lg border border-og-border bg-og-surface-1" />
+          ))}
+        </div>
+      ) : isEmpty ? (
+        <EmptyState onEnroll={onEnroll} />
+      ) : (
+        <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3" data-machines-grid>
+          {machines.map((machine) => (
+            <MachineCard
+              key={machine.sandboxId}
+              machine={{ ...machine, active: machine.active || machine.sandboxId === activeSandboxId }}
+              onAttach={onAttach}
+              attaching={attachingSandboxId === machine.sandboxId}
+            />
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}

package/src/components/message-timeline.tsx

@@ -21,12 +21,15 @@ import {
   defaultToolRegistry,
   groupTimeline,
   LightboxProvider,
+  type ActivityItem,
   type AgentMessageItem,
   type GoalItem,
   type NoticeItem,
+  type TimelineGroup,
   type TimelineItem,
   type ToolRegistry,
   type UserMessageItem,
+  TurnSummary,
 } from "../timeline";
 import { SESSION_STATUS_META, StatusDot } from "./session-status";
 
@@ -103,13 +106,15 @@ export function MessageTimeline({
           {groups.length === 0 && !working
             ? (emptyState ?? <p className="py-10 text-center text-sm text-og-fg-subtle">No activity yet.</p>)
             : null}
-          {groups.map((group) =>
-            group.kind === "activity" ? (
-              <ActivityRail key={group.id} items={group.items} onOpenSession={onOpenSession} toolRegistry={toolRegistry} />
-            ) : (
-              <TimelineRow key={group.item.id} item={group.item} renderMessageText={renderMessageText} />
-            ),
-          )}
+          {groups.map((group) => (
+            <TimelineGroupView
+              key={timelineGroupKey(group)}
+              group={group}
+              renderMessageText={renderMessageText}
+              onOpenSession={onOpenSession}
+              toolRegistry={toolRegistry}
+            />
+          ))}
           {working ? (
             <div className="animate-og-enter flex items-center gap-2 text-sm">
               <span className="og-shimmer-text font-medium">Working…</span>
@@ -149,6 +154,100 @@ export function MessageTimeline({
   );
 }
 
+function TimelineGroupView({
+  group,
+  renderMessageText,
+  onOpenSession,
+  toolRegistry,
+  insideTurn = false,
+}: {
+  group: TimelineGroup;
+  renderMessageText?: ((text: string, item: AgentMessageItem | UserMessageItem) => ReactNode) | undefined;
+  onOpenSession?: ((sessionId: string) => void) | undefined;
+  toolRegistry: ToolRegistry;
+  /** Rendering inside an expanded turn group: the outer chip already owns the
+      failure surface, so nested chips stay tinted but quiet (no repeated
+      failure text, no auto-open) — one loud error, N calm sub-expands. */
+  insideTurn?: boolean;
+}) {
+  switch (group.kind) {
+    case "activity":
+      return group.outcome ? (
+        <TurnSummary
+          items={group.items}
+          outcome={group.outcome}
+          failureText={insideTurn ? undefined : group.failureText}
+          defaultOpen={!insideTurn && group.outcome === "failed" ? true : undefined}
+        >
+          <ActivityRail items={group.items} onOpenSession={onOpenSession} toolRegistry={toolRegistry} />
+        </TurnSummary>
+      ) : (
+        <ActivityRail items={group.items} onOpenSession={onOpenSession} toolRegistry={toolRegistry} />
+      );
+    case "turn": {
+      const activityItems = flattenActivityItems(group.groups);
+      return (
+        <TurnSummary
+          items={activityItems}
+          outcome={group.outcome}
+          failureText={group.failureText}
+          durationMs={durationBetween(group.startedAt, group.endedAt)}
+          defaultOpen={group.outcome === "failed" ? true : undefined}
+        >
+          {/* The body wears the timeline's rail language (matching ActivityRail)
+              so nested chips read as contained by the turn, not as siblings. */}
+          <div className="flex flex-col gap-4 border-l-2 border-og-border pl-3 sm:pl-4">
+            {group.groups.map((child) => (
+              <TimelineGroupView
+                key={timelineGroupKey(child)}
+                group={child}
+                renderMessageText={renderMessageText}
+                onOpenSession={onOpenSession}
+                toolRegistry={toolRegistry}
+                insideTurn
+              />
+            ))}
+          </div>
+        </TurnSummary>
+      );
+    }
+    case "item":
+      return <TimelineRow item={group.item} renderMessageText={renderMessageText} />;
+  }
+}
+
+function timelineGroupKey(group: TimelineGroup): string {
+  switch (group.kind) {
+    case "item":
+      return group.item.id;
+    case "activity":
+      return group.id;
+    case "turn":
+      return group.id;
+  }
+}
+
+function flattenActivityItems(groups: TimelineGroup[]): ActivityItem[] {
+  const items: ActivityItem[] = [];
+  for (const group of groups) {
+    if (group.kind === "activity") {
+      items.push(...group.items);
+    } else if (group.kind === "turn") {
+      items.push(...flattenActivityItems(group.groups));
+    }
+  }
+  return items;
+}
+
+function durationBetween(startedAt: string, endedAt: string): number | undefined {
+  const started = Date.parse(startedAt);
+  const ended = Date.parse(endedAt);
+  if (!Number.isFinite(started) || !Number.isFinite(ended) || ended < started) {
+    return undefined;
+  }
+  return ended - started;
+}
+
 /* --- single rows ------------------------------------------------------------ */
 
 /**
@@ -303,4 +402,3 @@ function NoticeRow({ item }: { item: NoticeItem }) {
     </div>
   );
 }
-