@lotics/ui 4.1.0 → 4.3.0

package/examples/tpl_draft.tsx

@@ -0,0 +1,165 @@
+import { useEffect, useState } from "react";
+import { ScrollView, View } from "react-native";
+import { colors, solid, tint } from "@lotics/ui/colors";
+import { Text } from "@lotics/ui/text";
+import { Button } from "@lotics/ui/button";
+import { Icon } from "@lotics/ui/icon";
+import { Card, CardBody, CardFooter, CardHeader, CardHeaderTitle } from "@lotics/ui/card";
+import { SegmentedControl } from "@lotics/ui/segmented_control";
+import { TextInputField } from "@lotics/ui/text_input_field";
+import { DotsIndicator } from "@lotics/ui/dots_indicator";
+import { CompletionState } from "@lotics/ui/completion_state";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · AI draft generation — a FOURTH AI workflow shape: the agent writes
+// a first DRAFT from context, and the human refines it. The feedback differs
+// from the others — the OUTPUT itself streams (the reply text fills in live),
+// then becomes an editable surface the person edits before sending. Tone +
+// length steer the generation; Regenerate re-drafts. AI drafts, the human owns
+// the final words. All mock — the recipe, not a model.
+// ─────────────────────────────────────────────────────────────────────────────
+
+type Tone = "friendly" | "formal";
+type Length = "short" | "detailed";
+
+const INBOUND =
+  "Hi — we're launching a new product line and need about 5,000 corrugated mailers " +
+  "(FEFCO 0427) per month. Could you share pricing and a lead time?";
+
+const OPENING: Record<Tone, string> = {
+  friendly: "Hi Maya,\n\nThanks for reaching out — exciting to hear about the new line!",
+  formal: "Dear Ms. Tran,\n\nThank you for your enquiry regarding corrugated mailers.",
+};
+const OFFER: Record<Length, string> = {
+  short:
+    "For 5,000 FEFCO 0427 mailers a month we can offer 8,200₫/unit at that volume, with a 7–10 day lead time after artwork sign-off.",
+  detailed:
+    "For 5,000 FEFCO 0427 mailers a month, our volume price is 8,200₫/unit (B-flute, 1-colour print). Lead time is 7–10 working days after artwork sign-off, and the first run includes the cutting die at no charge. We can hold this pricing for 30 days, and step it down again past 10,000 units a month.",
+};
+const CLOSE: Record<Tone, string> = {
+  friendly: "Happy to send samples whenever you're ready — just say the word.\n\nBest,\nLan",
+  formal: "We would be glad to provide samples upon request.\n\nKind regards,\nLan Nguyen\nSunrise Packaging",
+};
+const draftFor = (tone: Tone, length: Length) =>
+  `${OPENING[tone]}\n\n${OFFER[length]}\n\n${CLOSE[tone]}`;
+
+export function TplDraft() {
+  const [phase, setPhase] = useState<"idle" | "drafting" | "ready" | "sent">("idle");
+  const [tone, setTone] = useState<Tone>("friendly");
+  const [length, setLength] = useState<Length>("short");
+  const [draft, setDraft] = useState("");
+  const [target, setTarget] = useState("");
+  const [revealed, setRevealed] = useState(0);
+
+  // Stream the draft text in, word by word, then hand it to the editor.
+  useEffect(() => {
+    if (phase !== "drafting") return;
+    const words = target.split(" ");
+    if (revealed >= words.length) {
+      setDraft(target);
+      setPhase("ready");
+      return;
+    }
+    const t = setTimeout(() => setRevealed((r) => r + 2), revealed === 0 ? 200 : 45);
+    return () => clearTimeout(t);
+  }, [phase, revealed, target]);
+
+  const startDraft = () => {
+    setTarget(draftFor(tone, length));
+    setRevealed(0);
+    setDraft("");
+    setPhase("drafting");
+  };
+
+  const streamed = phase === "drafting" ? target.split(" ").slice(0, revealed).join(" ") : "";
+
+  return (
+    <ScrollView style={{ backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28, paddingBottom: 80 }}>
+      <View style={{ maxWidth: 720, width: "100%", alignSelf: "center", gap: 16 }}>
+        <View style={{ gap: 2 }}>
+          <Text size="xl" weight="semibold">Reply to inquiry</Text>
+          <Text size="sm" color="muted">The agent drafts a reply from the message; you set the tone, then edit before sending.</Text>
+        </View>
+
+        <Card style={{ padding: 0 }}>
+          <CardHeader><CardHeaderTitle>Inbound</CardHeaderTitle></CardHeader>
+          <CardBody>
+            <View style={{ flexDirection: "row", gap: 10 }}>
+              <View style={{ width: 28, height: 28, borderRadius: 14, backgroundColor: colors.zinc[200], alignItems: "center", justifyContent: "center" }}>
+                <Text size="xs" weight="semibold" color="muted">MT</Text>
+              </View>
+              <Text size="sm" style={{ flex: 1 }}>{INBOUND}</Text>
+            </View>
+          </CardBody>
+        </Card>
+
+        {phase === "sent" ? (
+          <Card>
+            <CompletionState title="Reply sent" summary="Your edited draft was sent to Maya Tran.">
+              <Button title="Draft another" color="secondary" shape="rounded" onPress={() => { setPhase("idle"); setDraft(""); }} />
+            </CompletionState>
+          </Card>
+        ) : (
+          <Card style={{ padding: 0 }}>
+            <CardHeader>
+              <CardHeaderTitle info="Tone and length steer the draft; you edit the result before it goes out.">Your reply</CardHeaderTitle>
+            </CardHeader>
+            <CardBody>
+              <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 16 }}>
+                <View style={{ gap: 6 }}>
+                  <Text size="xs" color="muted" transform="uppercase">Tone</Text>
+                  <SegmentedControl
+                    accessibilityLabel="Tone"
+                    options={[{ label: "Friendly", value: "friendly" }, { label: "Formal", value: "formal" }]}
+                    value={tone}
+                    onValueChange={setTone}
+                    disabled={phase === "drafting"}
+                  />
+                </View>
+                <View style={{ gap: 6 }}>
+                  <Text size="xs" color="muted" transform="uppercase">Length</Text>
+                  <SegmentedControl
+                    accessibilityLabel="Length"
+                    options={[{ label: "Short", value: "short" }, { label: "Detailed", value: "detailed" }]}
+                    value={length}
+                    onValueChange={setLength}
+                    disabled={phase === "drafting"}
+                  />
+                </View>
+              </View>
+
+              {phase === "idle" ? (
+                <View style={{ alignItems: "flex-start", paddingTop: 4 }}>
+                  <Button title="Draft a reply" color="primary" shape="rounded" icon="sparkles" onPress={startDraft} />
+                </View>
+              ) : null}
+
+              {phase === "drafting" ? (
+                <View style={{ borderWidth: 1, borderColor: tint("violet", 0.35), borderRadius: 10, padding: 14, gap: 10, backgroundColor: tint("violet", 0.03) }}>
+                  <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+                    <Icon name="sparkles" size={13} color={solid("violet")} />
+                    <Text size="xs" color="muted" style={{ flex: 1 }}>Drafting…</Text>
+                    <DotsIndicator size={5} color={solid("violet")} />
+                  </View>
+                  <Text size="sm">{streamed}</Text>
+                </View>
+              ) : null}
+
+              {phase === "ready" ? (
+                <TextInputField value={draft} onChangeText={setDraft} multiline numberOfLines={12} autoGrow />
+              ) : null}
+            </CardBody>
+
+            {phase === "ready" ? (
+              <CardFooter>
+                <View style={{ flex: 1 }} />
+                <Button title="Regenerate" color="secondary" shape="rounded" icon="rotate-ccw" onPress={startDraft} />
+                <Button title="Send reply" color="primary" shape="rounded" onPress={() => setPhase("sent")} />
+              </CardFooter>
+            ) : null}
+          </Card>
+        )}
+      </View>
+    </ScrollView>
+  );
+}

package/examples/tpl_extract.tsx

@@ -0,0 +1,186 @@
+import { useEffect, useState } from "react";
+import { ScrollView, View } from "react-native";
+import { colors } from "@lotics/ui/colors";
+import { Text } from "@lotics/ui/text";
+import { Button } from "@lotics/ui/button";
+import { LinkButton } from "@lotics/ui/link_button";
+import { Card, CardBody, CardFooter, CardHeader, CardHeaderTitle, CardHeaderMeta } from "@lotics/ui/card";
+import { FileDropzone } from "@lotics/ui/file_dropzone";
+import { AgentRun, type AgentRunStep } from "@lotics/ui/agent_run";
+import { AssistedField } from "@lotics/ui/assisted_field";
+import { InlineTextInput } from "@lotics/ui/inline_text_input";
+import { Sources } from "@lotics/ui/sources";
+import { CompletionState } from "@lotics/ui/completion_state";
+import { type ConfidenceLevel } from "@lotics/ui/confidence";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · AI extract & confirm — a DIFFERENT AI workflow from the design
+// assistant: a one-shot data-capture pass, no iteration. Drop a document → the
+// agent extracts structured fields (AgentRun) → every field lands as a tinted
+// ESTIMATE the human confirms or overrides (AssistedField) → submit once all
+// stand. The provenance is visible the whole way: nothing is committed until a
+// person stood behind each value. All mock.
+// ─────────────────────────────────────────────────────────────────────────────
+
+type ScriptStep = Omit<AgentRunStep, "status">;
+type Phase = "intake" | "extracting" | "review" | "done";
+
+const EXTRACT: ScriptStep[] = [
+  { id: "x1", label: "Reading the document", detail: "A 2-page supplier invoice (PDF)." },
+  { id: "x2", label: "extract_fields", kind: "tool" },
+  { id: "x3", label: "Matching the vendor", detail: "Acme Packaging Co. — found in your contacts." },
+  { id: "x4", label: "Reading the totals", detail: "Subtotal, VAT 8%, grand total." },
+];
+
+interface Field {
+  key: string;
+  label: string;
+  value: string;
+  unit?: string;
+  conf: ConfidenceLevel;
+}
+const FIELDS: Field[] = [
+  { key: "vendor", label: "Vendor", value: "Acme Packaging Co.", conf: "high" },
+  { key: "invoice", label: "Invoice no.", value: "INV-2026-0412", conf: "high" },
+  { key: "date", label: "Invoice date", value: "2026-06-10", conf: "medium" },
+  { key: "taxid", label: "Tax ID (MST)", value: "0312345678", conf: "medium" },
+  { key: "total", label: "Total", value: "48,200,000", unit: "₫", conf: "high" },
+];
+
+const initialValues = () => Object.fromEntries(FIELDS.map((f) => [f.key, f.value]));
+
+export function TplExtract() {
+  const [phase, setPhase] = useState<Phase>("intake");
+  const [confirmed, setConfirmed] = useState<Record<string, boolean>>({});
+  // The agent's values are estimates the human can override. `editing` is the
+  // field whose AssistedField has swapped to an inline input (the `onEdit`
+  // contract); `values` holds the live value, overridden on save.
+  const [values, setValues] = useState<Record<string, string>>(initialValues);
+  const [editing, setEditing] = useState<string | null>(null);
+
+  const [revealed, setRevealed] = useState(0);
+  const [streaming, setStreaming] = useState(false);
+  useEffect(() => {
+    if (!streaming) return;
+    if (revealed >= EXTRACT.length) {
+      const t = setTimeout(() => {
+        setStreaming(false);
+        setPhase("review");
+      }, 650);
+      return () => clearTimeout(t);
+    }
+    const t = setTimeout(() => setRevealed((r) => r + 1), revealed === 0 ? 60 : 820);
+    return () => clearTimeout(t);
+  }, [streaming, revealed]);
+
+  const steps: AgentRunStep[] = EXTRACT.slice(0, revealed).map((s, i) => ({
+    ...s,
+    status: streaming && revealed < EXTRACT.length && i === revealed - 1 ? "running" : "done",
+  }));
+
+  const start = () => {
+    setRevealed(0);
+    setStreaming(true);
+    setPhase("extracting");
+  };
+  const reset = () => {
+    setStreaming(false);
+    setRevealed(0);
+    setConfirmed({});
+    setValues(initialValues());
+    setEditing(null);
+    setPhase("intake");
+  };
+
+  const allConfirmed = FIELDS.every((f) => confirmed[f.key]);
+
+  return (
+    <ScrollView style={{ backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28, paddingBottom: 120 }}>
+      <View style={{ maxWidth: 720, width: "100%", alignSelf: "center", gap: 16 }}>
+        <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 16 }}>
+          <View style={{ flex: 1, gap: 2 }}>
+            <Text size="xl" weight="semibold">Capture invoice</Text>
+            <Text size="sm" color="muted">Drop a document; the agent extracts the fields, you confirm each before saving.</Text>
+          </View>
+          {phase !== "intake" ? <Button title="Start over" color="muted" shape="rounded" icon="rotate-ccw" onPress={reset} /> : null}
+        </View>
+
+        {phase === "intake" ? (
+          <Card style={{ padding: 0 }}>
+            <CardHeader><CardHeaderTitle info="Extraction is an estimate — every field is confirmable before anything is stored.">Source document</CardHeaderTitle></CardHeader>
+            <CardBody>
+              <FileDropzone onFiles={start} accept="application/pdf,image/*" height={200} label="Drop an invoice" hint="or click to choose · PDF, JPG, PNG" dropLabel="Drop to extract" />
+            </CardBody>
+          </Card>
+        ) : null}
+
+        {phase === "extracting" ? (
+          <Card>
+            <AgentRun title="Extracting fields" steps={steps} state={streaming ? "streaming" : "done"} />
+          </Card>
+        ) : null}
+
+        {phase === "review" ? (
+          <Card style={{ padding: 0 }}>
+            <CardHeader>
+              <CardHeaderTitle info="Each value is an AI estimate until you confirm it. Override any that read wrong.">Extracted fields</CardHeaderTitle>
+              <CardHeaderMeta>{`${Object.values(confirmed).filter(Boolean).length}/${FIELDS.length}`}</CardHeaderMeta>
+            </CardHeader>
+            <CardBody>
+              {FIELDS.map((f) =>
+                editing === f.key ? (
+                  <View key={f.key} style={{ flexDirection: "row", alignItems: "center", gap: 16, paddingVertical: 8 }}>
+                    <Text size="sm" color="muted" style={{ width: 132 }}>{f.label}</Text>
+                    <View style={{ flex: 1 }}>
+                      <InlineTextInput
+                        value={values[f.key]}
+                        accessibilityLabel={`Edit ${f.label}`}
+                        onSave={(next) => {
+                          // Override the AI estimate; a value the human typed is
+                          // confirmed by definition.
+                          setValues((v) => ({ ...v, [f.key]: next }));
+                          setConfirmed((c) => ({ ...c, [f.key]: true }));
+                          setEditing(null);
+                        }}
+                      />
+                    </View>
+                  </View>
+                ) : (
+                  <AssistedField
+                    key={f.key}
+                    label={f.label}
+                    value={values[f.key]}
+                    unit={f.unit}
+                    estimated={!confirmed[f.key]}
+                    confidence={f.conf}
+                    onConfirm={() => setConfirmed((c) => ({ ...c, [f.key]: true }))}
+                    onEdit={() => setEditing(f.key)}
+                  />
+                ),
+              )}
+              <Sources
+                label="Extracted from"
+                onOpen={() => {}}
+                sources={[{ id: "doc", label: "invoice-0412.pdf", kind: "document", detail: "2 pages" }]}
+              />
+            </CardBody>
+            <CardFooter>
+              <View style={{ flex: 1 }}>
+                {!allConfirmed ? <LinkButton title="Confirm all" onPress={() => setConfirmed(Object.fromEntries(FIELDS.map((f) => [f.key, true])))} /> : null}
+              </View>
+              <Button title="Save invoice" color="primary" shape="rounded" disabled={!allConfirmed} onPress={() => setPhase("done")} />
+            </CardFooter>
+          </Card>
+        ) : null}
+
+        {phase === "done" ? (
+          <Card>
+            <CompletionState title="Invoice saved" summary="All five fields confirmed and written to the ledger.">
+              <Button title="Capture another" color="secondary" shape="rounded" onPress={reset} />
+            </CompletionState>
+          </Card>
+        ) : null}
+      </View>
+    </ScrollView>
+  );
+}

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@lotics/ui",
-  "version": "4.1.0",
+  "version": "4.3.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
     "./colors": "./src/colors.ts",
+    "./option_badge": "./src/option_badge.tsx",
+    "./member_chip": "./src/member_chip.tsx",
+    "./member_select": "./src/member_select.tsx",
+    "./inline_member_select": "./src/inline_member_select.tsx",
     "./mime": "./src/mime.ts",
     "./download": "./src/download.ts",
     "./file_picker": "./src/file_picker.ts",
@@ -54,6 +58,15 @@
     "./picker_menu": "./src/picker_menu.tsx",
     "./text": "./src/text.tsx",
     "./activity_indicator": "./src/activity_indicator.tsx",
+    "./agent_run": "./src/agent_run.tsx",
+    "./agent_progress": "./src/agent_progress.tsx",
+    "./prompt_field": "./src/prompt_field.tsx",
+    "./confidence": "./src/confidence.tsx",
+    "./suggestion": "./src/suggestion.tsx",
+    "./assisted_field": "./src/assisted_field.tsx",
+    "./change_review": "./src/change_review.tsx",
+    "./clarify": "./src/clarify.tsx",
+    "./sources": "./src/sources.tsx",
     "./icon": "./src/icon.tsx",
     "./dynamic_icon": {
       "react-native": "./src/dynamic_icon.tsx",

package/src/agent_progress.tsx

@@ -0,0 +1,71 @@
+import { useState } from "react";
+import { ScrollView, StyleSheet, View } from "react-native";
+import { colors, solid } from "./colors";
+import { Text } from "./text";
+import { Icon } from "./icon";
+import { WaveAvatar } from "./wave_avatar";
+import { PressableHighlight } from "./pressable_highlight";
+import { AgentRun, type AgentRunStep } from "./agent_run";
+
+export interface AgentProgressProps {
+  steps: AgentRunStep[];
+  state?: "streaming" | "done" | "error";
+  /** The collapsed-pill label. Defaults to the running step's label (or
+   *  "Working…" / "Done"). */
+  label?: string;
+  defaultExpanded?: boolean;
+}
+
+/**
+ * The compact, FLOATING agent-progress indicator — a pill (animated `WaveAvatar`
+ * + the current step's label) that EXPANDS on press to the full `AgentRun`
+ * stream. It's the "working" state of a composer on a canvas app: the composer
+ * morphs into this while the agent runs, and reveals again when it's done.
+ * Press to peek at the streamed steps without leaving the canvas.
+ */
+export function AgentProgress(props: AgentProgressProps) {
+  const { steps, state = "streaming", label, defaultExpanded } = props;
+  const [expanded, setExpanded] = useState(defaultExpanded ?? false);
+
+  const running = steps.filter((s) => s.status === "running").at(-1);
+  const compact = label ?? running?.label ?? (state === "done" ? "Done" : state === "error" ? "Stopped" : "Working…");
+
+  return (
+    <View style={{ gap: 8 }}>
+      {expanded ? (
+        <View style={styles.panel}>
+          <ScrollView style={{ maxHeight: 260 }} contentContainerStyle={{ padding: 14 }}>
+            <AgentRun steps={steps} state={state} />
+          </ScrollView>
+        </View>
+      ) : null}
+
+      <PressableHighlight
+        onPress={() => setExpanded((e) => !e)}
+        style={styles.pill}
+        accessibilityLabel={expanded ? "Hide the agent's steps" : "Show the agent's steps"}
+      >
+        <WaveAvatar animated size={24} color={solid("violet")} />
+        <Text size="sm" weight="medium" style={{ flex: 1 }} numberOfLines={1}>
+          {compact}
+        </Text>
+        <Icon name={expanded ? "chevron-down" : "chevron-up"} size={16} color={colors.zinc[400]} />
+      </PressableHighlight>
+    </View>
+  );
+}
+
+// The floating surface — white, soft elevation, a hairline edge — so it reads
+// as lifted off the canvas (matches the composer it morphs from).
+const FLOAT = {
+  backgroundColor: colors.white,
+  borderWidth: 1,
+  borderColor: colors.border,
+  borderRadius: 16,
+  boxShadow: "0 6px 24px rgba(24,24,27,0.10)",
+} as const;
+
+const styles = StyleSheet.create({
+  panel: { ...FLOAT, overflow: "hidden" },
+  pill: { ...FLOAT, flexDirection: "row", alignItems: "center", gap: 10, paddingHorizontal: 14, paddingVertical: 10 },
+});

package/src/agent_run.tsx

@@ -0,0 +1,194 @@
+import { useEffect, useRef } from "react";
+import { Animated, Easing, StyleSheet, View } from "react-native";
+import { colors, solid, tint } from "./colors";
+import { Text } from "./text";
+import { Icon } from "./icon";
+import { DotsIndicator } from "./dots_indicator";
+
+export type AgentStepStatus = "running" | "done" | "error";
+
+export interface AgentRunStep {
+  id: string;
+  /** The action line — what the agent is doing ("Reading the image",
+   *  "Identifying the box style"). */
+  label: string;
+  /** Streamed reasoning or result text under the label (muted). Grows as the
+   *  model streams; the host appends to it. */
+  detail?: string;
+  status: AgentStepStatus;
+  /** A `tool` step renders its label in a monospace chip — it called a tool
+   *  rather than reasoned. */
+  kind?: "step" | "tool";
+}
+
+export interface AgentRunProps {
+  steps: AgentRunStep[];
+  /** Whole-run state. `streaming` keeps the feed alive — the running node
+   *  pulses and the header shows a working indicator; `done`/`error` settle it.
+   *  Defaults to `streaming` while any step is running, else `done`. */
+  state?: "streaming" | "done" | "error";
+  /** Header label — the task the agent is performing ("Designing the dieline").
+   *  Omit for a bare step feed with no header band. */
+  title?: string;
+  accessibilityLabel?: string;
+}
+
+/**
+ * A live feed of an AI agent's work — the steps it takes (reasoning, tool
+ * calls, results) revealed as they happen, on a connecting spine. This is the
+ * transparent-work surface: NOT a spinner. The running node pulses violet (the
+ * AI accent) while the model streams; finished steps settle to an emerald
+ * check, failures to a red alert. Pair with `PromptField` (the command that
+ * starts a run) and `Suggestion` (the result to review). Unlike `StepList` (a
+ * known, guided run of fixed steps) the steps here arrive unknown-ahead, as the
+ * agent decides them.
+ */
+export function AgentRun(props: AgentRunProps) {
+  const { steps, title, accessibilityLabel } = props;
+  const anyRunning = steps.some((s) => s.status === "running");
+  const state = props.state ?? (anyRunning ? "streaming" : "done");
+  const streaming = state === "streaming";
+
+  return (
+    <View accessibilityLabel={accessibilityLabel} style={{ gap: title ? 12 : 0 }}>
+      {title ? (
+        <View style={styles.header}>
+          <View style={styles.glyph}>
+            <Icon name="sparkles" size={13} color={solid("violet")} />
+          </View>
+          <Text size="sm" weight="semibold" style={{ flex: 1 }} numberOfLines={1}>
+            {title}
+          </Text>
+          {streaming ? (
+            <DotsIndicator size={5} color={solid("violet")} />
+          ) : (
+            <Text size="xs" color={state === "error" ? "danger" : "muted"}>
+              {state === "error" ? "Stopped" : "Done"}
+            </Text>
+          )}
+        </View>
+      ) : null}
+
+      <View>
+        {steps.map((s, i) => {
+          const last = i === steps.length - 1;
+          return (
+            <View key={s.id} style={styles.item}>
+              <View style={styles.spineCol}>
+                <StepNode status={s.status} />
+                {!last ? <View style={styles.spine} /> : null}
+              </View>
+              <View style={[styles.contentCol, !last ? styles.contentGap : null]}>
+                {s.kind === "tool" ? (
+                  <View style={styles.toolChip}>
+                    <Icon name="square-check" size={11} color={colors.zinc[500]} />
+                    <Text size="xs" color="muted" numberOfLines={1}>
+                      {s.label}
+                    </Text>
+                  </View>
+                ) : (
+                  <Text
+                    size="sm"
+                    weight={s.status === "running" ? "medium" : "regular"}
+                    color={s.status === "done" ? "muted" : "default"}
+                  >
+                    {s.label}
+                  </Text>
+                )}
+                {s.detail ? (
+                  <Text size="xs" color="muted" style={{ marginTop: 2 }}>
+                    {s.detail}
+                  </Text>
+                ) : null}
+              </View>
+            </View>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+const NODE = 18;
+
+/** One uniform node; status drives the fill. The running node pulses (a violet
+ *  halo) — the live signal that distinguishes a feed from a static list. */
+function StepNode({ status }: { status: AgentStepStatus }) {
+  if (status === "done") {
+    return (
+      <View style={[styles.disc, { backgroundColor: solid("emerald") }]}>
+        <Icon name="check" size={11} color={colors.background} />
+      </View>
+    );
+  }
+  if (status === "error") {
+    return (
+      <View style={[styles.disc, { backgroundColor: solid("red") }]}>
+        <Icon name="x" size={11} color={colors.background} />
+      </View>
+    );
+  }
+  return <PulseNode />;
+}
+
+function PulseNode() {
+  const pulse = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.timing(pulse, {
+        toValue: 1,
+        duration: 1400,
+        easing: Easing.out(Easing.ease),
+        useNativeDriver: true,
+      }),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [pulse]);
+  return (
+    <View style={styles.disc}>
+      <Animated.View
+        style={[
+          styles.halo,
+          {
+            opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.45, 0] }),
+            transform: [{ scale: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.7, 2.1] }) }],
+          },
+        ]}
+      />
+      <View style={[styles.disc, { backgroundColor: solid("violet"), position: "absolute" }]}>
+        <View style={styles.runningDot} />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  header: { flexDirection: "row", alignItems: "center", gap: 8 },
+  glyph: {
+    width: 22,
+    height: 22,
+    borderRadius: 6,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: tint("violet", 0.12),
+  },
+  item: { flexDirection: "row", gap: 12 },
+  spineCol: { width: NODE, alignItems: "center", paddingTop: 1 },
+  disc: { width: NODE, height: NODE, borderRadius: NODE / 2, alignItems: "center", justifyContent: "center" },
+  halo: { position: "absolute", width: NODE, height: NODE, borderRadius: NODE / 2, backgroundColor: solid("violet") },
+  runningDot: { width: 6, height: 6, borderRadius: 999, backgroundColor: colors.background },
+  spine: { width: 1.5, flex: 1, minHeight: 12, borderRadius: 1, backgroundColor: colors.zinc[200], marginTop: 3 },
+  contentCol: { flex: 1, paddingTop: 0 },
+  contentGap: { paddingBottom: 14 },
+  toolChip: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    gap: 6,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 6,
+    backgroundColor: colors.zinc[100],
+  },
+});