@aphrody/m3-ai 3.3.2 → 3.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aphrody/m3-ai",
-  "version": "3.3.2",
+  "version": "3.3.5",
   "description": "Material Design 3 agent-interaction components (tool calls, markdown, chat composer, workers, tasks): the SpaceUI (@spacedrive/ai) set rebuilt on @aphrody/m3-primitives.",
   "keywords": [
     "material-3",
@@ -13,16 +13,19 @@
   "author": "aphrody-code",
   "files": [
     "dist",
-    "LICENSE.spaceui"
+    "LICENSE.spaceui",
+    "src"
   ],
   "type": "module",
   "sideEffects": false,
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "bun": "./src/index.ts",
+      "import": "./src/index.ts",
+      "types": "./src/index.ts",
       "default": "./dist/index.js"
     }
   },
@@ -30,30 +33,24 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tsup && tsc -p tsconfig.build.json",
+    "build": "bun ../../scripts/build.ts build --only $npm_package_name",
     "typecheck": "tsc --noEmit",
-    "typecheck:fast": "tsgo --noEmit",
+    "typecheck:fast": "tsc --noEmit",
     "test": "bun test"
   },
   "dependencies": {
-    "@aphrody/m3-motion": "3.3.2",
-    "@aphrody/m3-primitives": "3.3.2",
+    "@aphrody/ag-ui": "1.0.1",
+    "@aphrody/m3-motion": "3.3.5",
+    "@aphrody/m3-primitives": "3.3.5",
+    "@aphrody/mcp-ui": "7.1.1-aphrody.1",
     "clsx": "^2.1.1",
-    "motion": "^12.43.0",
+    "motion": "^13.4.4",
     "react-markdown": "^10.1.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
-    "@aphrody/m3-config": "3.3.0",
-    "@happy-dom/global-registrator": "^20.14.5",
-    "@types/react": "^19.3.0",
-    "@types/react-dom": "^19.3.0",
-    "bun-types": "^1.4.2",
-    "react": "^19.3.0",
-    "react-dom": "^19.3.0",
-    "tsup": "^8.5.1",
-    "typescript": "^7.0.2"
+    "@aphrody/m3-config": "3.3.5"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

package/src/A2APeerInspector.tsx

@@ -0,0 +1,370 @@
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * @aphrody/m3-ai - A2APeerInspector
+ *
+ * Material Design 3 Agent-to-Agent (A2A 1.0) Fleet Inspector:
+ * - Visualizes connected peer agents (codex, claude, agycli, nie, ocr, rag, ...).
+ * - Displays AgentCard interface, capabilities, and active tasks.
+ * - Live inspection of .coord mailbox envelopes (ask, fact, ack, ping, error).
+ * - File lock & resource claims view (.coord/claims).
+ */
+
+import React, { useState } from "react";
+import { clsx } from "clsx";
+import type { CoordEnvelope, EnvelopeKind } from "./AgUiEventStream";
+
+export interface AgentPeer {
+  id: string;
+  name: string;
+  role: string;
+  status: "idle" | "busy" | "offline";
+  version?: string;
+  skills?: string[];
+  activeClaim?: string;
+}
+
+export interface SendEnvelopePayload {
+  from: string;
+  to?: string;
+  kind: EnvelopeKind | string;
+  topic: string;
+  body: string;
+  re?: string;
+  channel_hint?: string[];
+  v?: number;
+  [key: string]: unknown;
+}
+
+export interface A2APeerInspectorProps {
+  peers?: AgentPeer[];
+  envelopes?: CoordEnvelope[];
+  selectedPeerId?: string;
+  onSelectPeer?: (peerId: string) => void;
+  onSendEnvelope?: (envelope: SendEnvelopePayload) => void;
+  className?: string;
+}
+
+const EMPTY_ENVELOPES: CoordEnvelope[] = [];
+
+const DEFAULT_PEERS: AgentPeer[] = [
+  {
+    id: "agy",
+    name: "Antigravity Core",
+    role: "Integrator & UI / Rust Lead",
+    status: "busy",
+    version: "2.0.0",
+    skills: ["m3-ui", "rust-serial", "bun-native", "a2a-coord"],
+    activeClaim: ".coord/claims/native-integration.json",
+  },
+  {
+    id: "codex",
+    name: "Codex Peer",
+    role: "Backend & Systems Worker",
+    status: "busy",
+    version: "1.4.0",
+    skills: ["native-wiring", "wsl-probe", "kernel-ffi"],
+  },
+  {
+    id: "claude",
+    name: "Claude Peer",
+    role: "Architecture & Verification",
+    status: "idle",
+    version: "3.7.0",
+    skills: ["design-tokens", "docs-audit", "review"],
+  },
+];
+
+const KIND_COLORS: Record<EnvelopeKind, { bg: string; text: string; border: string }> = {
+  ask: {
+    bg: "bg-[var(--md-sys-color-primary-container,#eaddff)]",
+    text: "text-[var(--md-sys-color-on-primary-container,#21005d)]",
+    border: "border-[var(--md-sys-color-primary,#6750a4)]",
+  },
+  fact: {
+    bg: "bg-[var(--md-sys-color-tertiary-container,#ffd8e4)]",
+    text: "text-[var(--md-sys-color-on-tertiary-container,#31111d)]",
+    border: "border-[var(--md-sys-color-tertiary,#7d5260)]",
+  },
+  ack: {
+    bg: "bg-[var(--md-sys-color-secondary-container,#e8def8)]",
+    text: "text-[var(--md-sys-color-on-secondary-container,#1d192b)]",
+    border: "border-[var(--md-sys-color-secondary,#625b71)]",
+  },
+  ping: {
+    bg: "bg-[var(--md-sys-color-surface-container-high,#ece6f0)]",
+    text: "text-[var(--md-sys-color-on-surface-variant,#49454f)]",
+    border: "border-[var(--md-sys-color-outline-variant,#cac4d0)]",
+  },
+  error: {
+    bg: "bg-[var(--md-sys-color-error-container,#f9dedc)]",
+    text: "text-[var(--md-sys-color-on-error-container,#410e0b)]",
+    border: "border-[var(--md-sys-color-error,#b3261e)]",
+  },
+};
+
+export const A2APeerInspector: React.FC<A2APeerInspectorProps> = ({
+  peers = DEFAULT_PEERS,
+  envelopes = EMPTY_ENVELOPES,
+  selectedPeerId: controlledPeerId,
+  onSelectPeer,
+  onSendEnvelope,
+  className,
+}) => {
+  const [internalSelectedPeerId, setInternalSelectedPeerId] = useState<string>(
+    peers[0]?.id || "agy",
+  );
+  const selectedPeerId = controlledPeerId ?? internalSelectedPeerId;
+
+  // Form state for composing envelope
+  const [composeTopic, setComposeTopic] = useState("");
+  const [composeBody, setComposeBody] = useState("");
+  const [composeKind, setComposeKind] = useState<EnvelopeKind>("ask");
+
+  const currentPeer = peers.find((p) => p.id === selectedPeerId) || peers[0];
+
+  const handleSelect = (peerId: string) => {
+    setInternalSelectedPeerId(peerId);
+    onSelectPeer?.(peerId);
+  };
+
+  const handleSend = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!composeTopic.trim() || !composeBody.trim()) return;
+
+    onSendEnvelope?.({
+      from: "agy",
+      to: selectedPeerId,
+      kind: composeKind,
+      topic: composeTopic.trim(),
+      body: composeBody.trim(),
+    });
+
+    setComposeTopic("");
+    setComposeBody("");
+  };
+
+  const filteredEnvelopes = envelopes.filter(
+    (env) => env.from === selectedPeerId || env.to === selectedPeerId || env.to === "fleet",
+  );
+
+  return (
+    <div
+      className={clsx(
+        "flex flex-col gap-4 rounded-3xl p-5 border",
+        "bg-[var(--md-sys-color-surface-container-lowest,#ffffff)]",
+        "border-[var(--md-sys-color-outline-variant,#cac4d0)]",
+        "text-[var(--md-sys-color-on-surface,#1d1b20)]",
+        className,
+      )}
+    >
+      {/* Header & Peer Chips */}
+      <div className="flex flex-col gap-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <span className="material-symbols-outlined text-xl text-[var(--md-sys-color-primary,#6750a4)]">
+              hub
+            </span>
+            <h2 className="text-base font-semibold tracking-tight">A2A Fleet Coordinator</h2>
+            <span className="rounded-full bg-[var(--md-sys-color-surface-container-high,#ece6f0)] px-2 py-0.5 text-xs font-mono text-[var(--md-sys-color-on-surface-variant,#49454f)]">
+              v1.0 (JSONL + RPC)
+            </span>
+          </div>
+          <span className="text-xs text-[var(--md-sys-color-outline,#79747e)]">
+            {peers.length} active peers
+          </span>
+        </div>
+
+        {/* Peer selection chips */}
+        <div className="flex items-center gap-2 overflow-x-auto pb-1">
+          {peers.map((peer) => {
+            const isSelected = peer.id === selectedPeerId;
+            return (
+              <button
+                key={peer.id}
+                type="button"
+                onClick={() => handleSelect(peer.id)}
+                className={clsx(
+                  "flex items-center gap-2 rounded-full px-3.5 py-1.5 text-xs font-medium transition-colors shrink-0",
+                  isSelected
+                    ? "bg-[var(--md-sys-color-secondary-container,#e8def8)] text-[var(--md-sys-color-on-secondary-container,#1d192b)] shadow-sm"
+                    : "bg-[var(--md-sys-color-surface-container,#f3edf7)] text-[var(--md-sys-color-on-surface-variant,#49454f)] hover:bg-[var(--md-sys-color-surface-container-high,#ece6f0)]",
+                )}
+              >
+                <span
+                  className={clsx(
+                    "h-2 w-2 rounded-full",
+                    peer.status === "busy"
+                      ? "bg-amber-500 animate-pulse"
+                      : peer.status === "idle"
+                        ? "bg-emerald-500"
+                        : "bg-slate-400",
+                  )}
+                />
+                <span>{peer.name}</span>
+                <span className="text-[10px] opacity-60">@{peer.id}</span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Selected Peer Details Card */}
+      {currentPeer && (
+        <div className="flex flex-col gap-2 rounded-2xl bg-[var(--md-sys-color-surface-container-low,#f7f2fa)] p-4 border border-[var(--md-sys-color-outline-variant,#cac4d0)]/50">
+          <div className="flex items-start justify-between">
+            <div>
+              <div className="flex items-center gap-2">
+                <span className="font-semibold text-sm">{currentPeer.name}</span>
+                <span className="text-xs text-[var(--md-sys-color-on-surface-variant,#49454f)]">
+                  ({currentPeer.role})
+                </span>
+              </div>
+              <div className="text-xs text-[var(--md-sys-color-outline,#79747e)] mt-0.5">
+                Peer ID: <code className="font-mono text-xs">{currentPeer.id}</code> · Version:{" "}
+                {currentPeer.version || "1.0.0"}
+              </div>
+            </div>
+            {currentPeer.activeClaim && (
+              <div className="flex items-center gap-1.5 rounded-lg bg-amber-500/10 px-2 py-1 text-xs text-amber-700 dark:text-amber-400 border border-amber-500/20">
+                <span className="material-symbols-outlined text-sm">lock</span>
+                <span className="font-mono text-[11px]">{currentPeer.activeClaim}</span>
+              </div>
+            )}
+          </div>
+
+          {currentPeer.skills && currentPeer.skills.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 mt-1">
+              {currentPeer.skills.map((skill) => (
+                <span
+                  key={skill}
+                  className="rounded-md bg-[var(--md-sys-color-surface-container-highest,#e6e0e9)] px-2 py-0.5 text-[11px] font-mono text-[var(--md-sys-color-on-surface-variant,#49454f)]"
+                >
+                  #{skill}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Envelope Stream Section */}
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center justify-between">
+          <h3 className="text-xs font-semibold uppercase tracking-wider text-[var(--md-sys-color-on-surface-variant,#49454f)]">
+            Coordination Envelopes ({filteredEnvelopes.length})
+          </h3>
+          <span className="text-[11px] text-[var(--md-sys-color-outline,#79747e)]">
+            .coord/inbox & .coord/outbox
+          </span>
+        </div>
+
+        {filteredEnvelopes.length === 0 ? (
+          <div className="flex flex-col items-center justify-center p-6 rounded-2xl bg-[var(--md-sys-color-surface-container-lowest,#ffffff)] border border-dashed border-[var(--md-sys-color-outline-variant,#cac4d0)] text-xs text-[var(--md-sys-color-outline,#79747e)]">
+            <span className="material-symbols-outlined text-2xl mb-1 opacity-50">
+              mark_email_read
+            </span>
+            No pending envelopes for @{selectedPeerId}. Fleet mailbox is synchronized.
+          </div>
+        ) : (
+          <div className="flex flex-col gap-2 max-h-60 overflow-y-auto pr-1">
+            {filteredEnvelopes.map((env) => {
+              const kind = (env.kind in KIND_COLORS ? env.kind : "ping") as EnvelopeKind;
+              const style = KIND_COLORS[kind];
+
+              return (
+                <div
+                  key={env.id}
+                  className={clsx(
+                    "flex flex-col gap-1.5 rounded-xl p-3 border text-xs transition-shadow",
+                    "bg-[var(--md-sys-color-surface-container-low,#f7f2fa)]",
+                    style.border,
+                  )}
+                >
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <span
+                        className={clsx(
+                          "rounded-md px-1.5 py-0.5 text-[10px] font-bold uppercase",
+                          style.bg,
+                          style.text,
+                        )}
+                      >
+                        {env.kind}
+                      </span>
+                      <span className="font-semibold">{env.topic}</span>
+                    </div>
+                    <span className="text-[10px] font-mono text-[var(--md-sys-color-outline,#79747e)]">
+                      {env.from} → {env.to || "all"}
+                    </span>
+                  </div>
+
+                  <p className="line-clamp-2 text-xs text-[var(--md-sys-color-on-surface-variant,#49454f)] font-mono whitespace-pre-wrap">
+                    {env.body}
+                  </p>
+
+                  <div className="flex items-center justify-between pt-1 border-t border-[var(--md-sys-color-outline-variant,#cac4d0)]/30 text-[10px] text-[var(--md-sys-color-outline,#79747e)] font-mono">
+                    <span>id: {env.id}</span>
+                    {env.re && <span>re: {env.re}</span>}
+                    <span>{new Date(env.ts).toLocaleTimeString()}</span>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Compose Form */}
+      <form
+        onSubmit={handleSend}
+        className="flex flex-col gap-2.5 pt-2 border-t border-[var(--md-sys-color-outline-variant,#cac4d0)]/50"
+      >
+        <div className="flex items-center gap-2">
+          <select
+            value={composeKind}
+            onChange={(e) => setComposeKind(e.target.value as EnvelopeKind)}
+            className="rounded-xl border border-[var(--md-sys-color-outline-variant,#cac4d0)] bg-[var(--md-sys-color-surface-container-low,#f7f2fa)] px-2.5 py-1.5 text-xs font-medium text-[var(--md-sys-color-on-surface,#1d1b20)] focus:outline-none focus:ring-1 focus:ring-[var(--md-sys-color-primary,#6750a4)]"
+          >
+            <option value="ask">ASK</option>
+            <option value="fact">FACT</option>
+            <option value="ack">ACK</option>
+            <option value="ping">PING</option>
+            <option value="error">ERROR</option>
+          </select>
+
+          <input
+            type="text"
+            placeholder="Topic (e.g. work, claim-check, verification)..."
+            value={composeTopic}
+            onChange={(e) => setComposeTopic(e.target.value)}
+            className="flex-1 rounded-xl border border-[var(--md-sys-color-outline-variant,#cac4d0)] bg-[var(--md-sys-color-surface-container-low,#f7f2fa)] px-3 py-1.5 text-xs text-[var(--md-sys-color-on-surface,#1d1b20)] placeholder-[var(--md-sys-color-outline,#79747e)] focus:outline-none focus:ring-1 focus:ring-[var(--md-sys-color-primary,#6750a4)]"
+          />
+        </div>
+
+        <div className="flex items-center gap-2">
+          <input
+            type="text"
+            placeholder={`Message body to @${selectedPeerId}...`}
+            value={composeBody}
+            onChange={(e) => setComposeBody(e.target.value)}
+            className="flex-1 rounded-xl border border-[var(--md-sys-color-outline-variant,#cac4d0)] bg-[var(--md-sys-color-surface-container-low,#f7f2fa)] px-3 py-1.5 text-xs text-[var(--md-sys-color-on-surface,#1d1b20)] placeholder-[var(--md-sys-color-outline,#79747e)] focus:outline-none focus:ring-1 focus:ring-[var(--md-sys-color-primary,#6750a4)]"
+          />
+
+          <button
+            type="submit"
+            disabled={!composeTopic.trim() || !composeBody.trim()}
+            className={clsx(
+              "flex items-center gap-1.5 rounded-xl px-4 py-1.5 text-xs font-semibold transition-all",
+              composeTopic.trim() && composeBody.trim()
+                ? "bg-[var(--md-sys-color-primary,#6750a4)] text-[var(--md-sys-color-on-primary,#ffffff)] hover:opacity-90 shadow-sm"
+                : "bg-[var(--md-sys-color-surface-container-high,#ece6f0)] text-[var(--md-sys-color-outline,#79747e)] cursor-not-allowed",
+            )}
+          >
+            <span>Dispatch</span>
+            <span className="material-symbols-outlined text-sm">send</span>
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};

package/src/A2ATaskTimeline.tsx

@@ -0,0 +1,218 @@
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * @aphrody/m3-ai - A2ATaskTimeline
+ *
+ * Material Design 3 Agent-to-Agent Delegation Timeline:
+ * - Chronological trace of task handoffs between agents (e.g., user -> agycli -> codex -> claude -> rag).
+ * - Displays delegation phase, envelope kind, file claims, and execution status.
+ */
+
+import React, { useId, useState } from "react";
+import { clsx } from "clsx";
+import type { CoordEnvelope } from "./AgUiEventStream";
+
+export interface TimelineStep {
+  id: string;
+  from: string;
+  to: string;
+  title: string;
+  description?: string;
+  status: "pending" | "running" | "completed" | "error";
+  timestamp: string;
+  envelope?: Partial<CoordEnvelope>;
+  claim?: string;
+}
+
+export interface A2ATaskTimelineProps {
+  steps?: TimelineStep[];
+  currentStepId?: string;
+  onSelectStep?: (step: TimelineStep) => void;
+  className?: string;
+}
+
+const DEFAULT_TIMELINE_STEPS: TimelineStep[] = [
+  {
+    id: "step-agy-lead",
+    from: "user",
+    to: "agy",
+    title: "Lead Coordination & Monorepo Integration",
+    status: "completed",
+    timestamp: "Live",
+    description: "Coordination active via .coord mailbox and OS resource claims.",
+  },
+  {
+    id: "step-workers",
+    from: "agy",
+    to: "codex",
+    title: "Subagent / Peer Parallel Tasks",
+    status: "running",
+    timestamp: "Ongoing",
+    description: "Workers executing disjoint task families under cooperatively acquired locks.",
+  },
+];
+
+export const A2ATaskTimeline: React.FC<A2ATaskTimelineProps> = ({
+  steps = DEFAULT_TIMELINE_STEPS,
+  currentStepId,
+  onSelectStep,
+  className,
+}) => {
+  const [expandedStepId, setExpandedStepId] = useState<string | null>(null);
+  const timelineId = useId();
+
+  const toggleExpand = (id: string) => {
+    setExpandedStepId((current) => (current === id ? null : id));
+  };
+
+  return (
+    <div
+      className={clsx(
+        "flex flex-col gap-3 rounded-3xl p-5 border",
+        "bg-[var(--md-sys-color-surface-container-lowest,#ffffff)]",
+        "border-[var(--md-sys-color-outline-variant,#cac4d0)]",
+        "text-[var(--md-sys-color-on-surface,#1d1b20)]",
+        className,
+      )}
+    >
+      <div className="flex items-center justify-between border-b border-[var(--md-sys-color-outline-variant,#cac4d0)]/40 pb-3">
+        <div className="flex items-center gap-2">
+          <span className="material-symbols-outlined text-lg text-[var(--md-sys-color-primary,#6750a4)]">
+            timeline
+          </span>
+          <h3 className="text-sm font-semibold tracking-tight">A2A Task Delegation Timeline</h3>
+        </div>
+        <span className="text-xs text-[var(--md-sys-color-outline,#79747e)]">
+          {steps.length} delegation steps
+        </span>
+      </div>
+
+      <div className="relative flex flex-col gap-4 pl-4 pt-1">
+        {/* Continuous connector line */}
+        <div className="absolute left-[27px] top-4 bottom-4 w-0.5 bg-[var(--md-sys-color-outline-variant,#cac4d0)]/60" />
+
+        {steps.map((step) => {
+          const isCurrent = step.id === currentStepId;
+          const isExpanded = step.id === expandedStepId;
+          const detailsId = `${timelineId}-${encodeURIComponent(step.id)}`;
+          const date = new Date(step.timestamp);
+          const time = Number.isNaN(date.getTime()) ? step.timestamp : date.toLocaleTimeString();
+
+          const statusIcon =
+            step.status === "completed"
+              ? "check_circle"
+              : step.status === "running"
+                ? "sync"
+                : step.status === "error"
+                  ? "error"
+                  : "radio_button_unchecked";
+
+          const statusColor =
+            step.status === "completed"
+              ? "text-emerald-500"
+              : step.status === "running"
+                ? "text-[var(--md-sys-color-primary,#6750a4)] animate-spin motion-reduce:animate-none"
+                : step.status === "error"
+                  ? "text-rose-500"
+                  : "text-slate-400";
+
+          return (
+            <div
+              key={step.id}
+              className={clsx(
+                "relative flex items-start gap-3 transition-all",
+                isCurrent && "font-medium",
+              )}
+            >
+              {/* Step indicator node */}
+              <div
+                className={clsx(
+                  "relative z-10 flex h-7 w-7 items-center justify-center rounded-full border-2 bg-[var(--md-sys-color-surface-container-lowest,#ffffff)]",
+                  step.status === "completed"
+                    ? "border-emerald-500"
+                    : step.status === "running"
+                      ? "border-[var(--md-sys-color-primary,#6750a4)] ring-4 ring-[var(--md-sys-color-primary,#6750a4)]/20"
+                      : step.status === "error"
+                        ? "border-rose-500"
+                        : "border-[var(--md-sys-color-outline-variant,#cac4d0)]",
+                )}
+              >
+                <span className={clsx("material-symbols-outlined text-sm", statusColor)}>
+                  {statusIcon}
+                </span>
+              </div>
+
+              {/* Step details card */}
+              <div
+                className={clsx(
+                  "flex-1 cursor-pointer rounded-2xl border p-3 text-xs transition-all",
+                  "bg-[var(--md-sys-color-surface-container-low,#f7f2fa)] hover:bg-[var(--md-sys-color-surface-container,#f3edf7)]",
+                  isCurrent
+                    ? "border-[var(--md-sys-color-primary,#6750a4)] shadow-sm"
+                    : "border-[var(--md-sys-color-outline-variant,#cac4d0)]/60",
+                )}
+              >
+                <button
+                  type="button"
+                  aria-expanded={step.envelope ? isExpanded : undefined}
+                  aria-controls={step.envelope ? detailsId : undefined}
+                  onClick={() => {
+                    toggleExpand(step.id);
+                    onSelectStep?.(step);
+                  }}
+                  className="block w-full rounded-medium text-left outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                >
+                  <span className="flex items-center justify-between gap-2">
+                    <span className="flex items-center gap-1.5">
+                      <span className="font-semibold text-xs text-[var(--md-sys-color-on-surface,#1d1b20)]">
+                        {step.title}
+                      </span>
+                      <span className="rounded-md bg-[var(--md-sys-color-surface-container-highest,#e6e0e9)] px-1.5 py-0.2 text-[10px] font-mono text-[var(--md-sys-color-on-surface-variant,#49454f)]">
+                        @{step.from} → @{step.to}
+                      </span>
+                    </span>
+                    <span className="text-[10px] font-mono text-[var(--md-sys-color-outline,#79747e)]">
+                      {time}
+                    </span>
+                  </span>
+
+                  {step.description && (
+                    <span className="mt-1 block text-xs text-[var(--md-sys-color-on-surface-variant,#49454f)]">
+                      {step.description}
+                    </span>
+                  )}
+
+                  {step.claim && (
+                    <span className="mt-2 flex items-center gap-1.5 text-[11px] font-mono text-amber-700 dark:text-amber-400">
+                      <span className="material-symbols-outlined text-xs">lock</span>
+                      <span>claim: {step.claim}</span>
+                    </span>
+                  )}
+                </button>
+
+                {/* Expanded envelope payload view */}
+                {step.envelope && (
+                  <div
+                    id={detailsId}
+                    hidden={!isExpanded}
+                    className="mt-2.5 pt-2 border-t border-[var(--md-sys-color-outline-variant,#cac4d0)]/40 font-mono text-[11px] text-[var(--md-sys-color-on-surface-variant,#49454f)]"
+                  >
+                    <div className="flex items-center gap-2 mb-1">
+                      <span className="font-semibold">Kind: {step.envelope.kind}</span>
+                      <span>·</span>
+                      <span>Topic: {step.envelope.topic}</span>
+                    </div>
+                    {step.envelope.body && (
+                      <pre className="rounded-lg bg-[var(--md-sys-color-surface-container-highest,#e6e0e9)]/50 p-2 overflow-x-auto whitespace-pre-wrap">
+                        {step.envelope.body}
+                      </pre>
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};