@lotics/ui 4.3.0 → 4.5.0

package/examples/tpl_match.tsx

@@ -0,0 +1,123 @@
+import { useState } from "react";
+import { ScrollView, View } from "react-native";
+import { Text } from "@lotics/ui/text";
+import { colors } from "@lotics/ui/colors";
+import { Button } from "@lotics/ui/button";
+import { KPIStrip } from "@lotics/ui/kpi_strip";
+import { SegmentedControl } from "@lotics/ui/segmented_control";
+import { EmptyState } from "@lotics/ui/empty_state";
+import { MatchRow } from "@lotics/ui/match_row";
+import type { ConfidenceLevel } from "@lotics/ui/confidence";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Match & reconcile — the agent proposes PAIRINGS and shows its
+// reasoning; the human confirms, reassigns, or rejects. Each row is two-sided
+// (a known item ↔ the agent's proposed counterpart) with a confidence on the
+// bridge. High-confidence pairs batch-accept; the rest are worked one by one.
+// Same shape for bank-line ↔ invoice, invoice ↔ PO, dedup A ↔ B, entity
+// resolution. The deterministic cousin (tpl_reconcile) has no agent reasoning.
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface M {
+  id: string;
+  amount: number;
+  source: { title: string; detail: string };
+  match?: { title: string; detail: string };
+  /** An alternate candidate the agent considered — drives Reassign. */
+  alt?: { title: string; detail: string };
+  rationale: string;
+  confidence: ConfidenceLevel;
+  status: "open" | "accepted" | "dismissed";
+}
+
+const SEED: M[] = [
+  { id: "m1", amount: 86_200_000, source: { title: "INCOMING TT — ATLAS COMPONENTS", detail: "09 Jun · 86,200,000 ₫" }, match: { title: "INV-2026-0312", detail: "Atlas Components · 86,200,000 ₫" }, rationale: "Exact amount and the invoice number appears in the transfer memo.", confidence: "high", status: "open" },
+  { id: "m2", amount: 41_300_000, source: { title: "CRESTLINE TT PAYMENT", detail: "09 Jun · 41,300,000 ₫" }, match: { title: "INV-2026-0318", detail: "Crestline Furniture · 41,300,000 ₫" }, rationale: "Amount matches to the đồng and the payer name maps to the customer on file.", confidence: "high", status: "open" },
+  { id: "m3", amount: 22_500_000, source: { title: "VITTORIA ACC — REF 0321", detail: "10 Jun · 22,500,000 ₫" }, match: { title: "INV-2026-0321", detail: "Vittoria Accessories · 22,500,000 ₫" }, rationale: "Reference 0321 cited; amount exact.", confidence: "high", status: "open" },
+  { id: "m4", amount: 18_700_000, source: { title: "BRIGHTCELL JUNE", detail: "10 Jun · 18,700,000 ₫" }, match: { title: "INV-2026-0324", detail: "Brightcell Batteries · 18,700,000 ₫" }, alt: { title: "INV-2026-0319", detail: "Brightcell Batteries · 18,700,000 ₫" }, rationale: "Amount + customer match, but two open invoices share this total — confirm the period.", confidence: "medium", status: "open" },
+  { id: "m5", amount: 12_600_000, source: { title: "MERIDIAN PART PAYMENT", detail: "12 Jun · 12,600,000 ₫" }, match: { title: "INV-2026-0326", detail: "Meridian Construction · 25,200,000 ₫" }, rationale: "Half the invoice total from the same payer — likely a partial payment.", confidence: "medium", status: "open" },
+  { id: "m6", amount: 25_200_000, source: { title: "INCOMING TT REF 88412", detail: "11 Jun · 25,200,000 ₫" }, alt: { title: "INV-2026-0326", detail: "Meridian Construction · 25,200,000 ₫" }, rationale: "No name or reference on the line; the amount matches one open invoice but the agent isn't confident.", confidence: "low", status: "open" },
+  { id: "m7", amount: 264_000, source: { title: "BANK CHARGES JUNE", detail: "11 Jun · 264,000 ₫" }, rationale: "No invoice fits; the description reads as a bank fee, not a receipt.", confidence: "low", status: "open" },
+  { id: "m8", amount: 64_800_000, source: { title: "ATLAS COMPONENTS — INV-0301", detail: "08 Jun · 64,800,000 ₫" }, match: { title: "INV-2026-0301", detail: "Atlas Components · 64,800,000 ₫" }, rationale: "Exact reference and amount.", confidence: "high", status: "accepted" },
+];
+
+export function TplMatch() {
+  const [rows, setRows] = useState<M[]>(SEED);
+  const [tab, setTab] = useState<"open" | "resolved">("open");
+
+  const set = (id: string, status: M["status"]) => setRows((prev) => prev.map((r) => (r.id === id ? { ...r, status } : r)));
+  const reassign = (id: string) =>
+    setRows((prev) =>
+      prev.map((r) =>
+        r.id === id && r.alt ? { ...r, match: r.alt, alt: r.match, confidence: "medium", rationale: "Reassigned to the alternate candidate the agent considered." } : r,
+      ),
+    );
+  const acceptAllHigh = () => setRows((prev) => prev.map((r) => (r.status === "open" && r.confidence === "high" && r.match ? { ...r, status: "accepted" } : r)));
+
+  const open = rows.filter((r) => r.status === "open");
+  const resolved = rows.filter((r) => r.status !== "open");
+  const visible = tab === "open" ? open : resolved;
+  const accepted = rows.filter((r) => r.status === "accepted");
+  const matchedValue = accepted.reduce((s, r) => s + r.amount, 0);
+  const unmatched = open.filter((r) => !r.match).length;
+  const highOpen = open.filter((r) => r.confidence === "high" && r.match).length;
+
+  return (
+    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+      <View style={{ width: "100%", maxWidth: 880, alignSelf: "center", gap: 16 }}>
+        <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 16 }}>
+          <View style={{ flex: 1, gap: 2 }}>
+            <Text size="xl" weight="semibold">Payment matching</Text>
+            <Text size="sm" color="muted">The agent pairs incoming payments to open invoices — you confirm, reassign, or reject</Text>
+          </View>
+          {tab === "open" && highOpen > 0 ? (
+            <Button title={`Accept ${highOpen} high-confidence`} color="secondary" shape="rounded" onPress={acceptAllHigh} />
+          ) : null}
+        </View>
+
+        <KPIStrip
+          items={[
+            { label: "Proposed", value: open.length, format: "number", caption: "awaiting a decision" },
+            { label: "Accepted", value: accepted.length, format: "number" },
+            { label: "Unmatched", value: unmatched, format: "number", tone: unmatched > 0 ? "warning" : "default", info: "Lines the agent couldn't pair confidently — they need a human to find the counterpart or take an escape hatch." },
+            { label: "Matched value", value: matchedValue, format: "currency", compact: true, info: "Money tied to an invoice through an accepted pairing." },
+          ]}
+        />
+
+        <SegmentedControl
+          accessibilityLabel="Queue"
+          options={[
+            { label: `Proposed · ${open.length}`, value: "open" },
+            { label: `Resolved · ${resolved.length}`, value: "resolved" },
+          ]}
+          value={tab}
+          onValueChange={setTab}
+        />
+
+        {visible.length === 0 ? (
+          <EmptyState
+            icon="circle-check"
+            message={tab === "open" ? "Queue cleared" : "Nothing resolved yet"}
+            hint={tab === "open" ? "Every proposal has been accepted or rejected" : undefined}
+          />
+        ) : (
+          <View style={{ gap: 10 }}>
+            {visible.map((r) => (
+              <MatchRow
+                key={r.id}
+                source={r.source}
+                match={r.match}
+                rationale={r.rationale}
+                confidence={r.confidence}
+                status={r.status}
+                onAccept={r.match ? () => set(r.id, "accepted") : undefined}
+                onReassign={r.alt ? () => reassign(r.id) : undefined}
+                onDismiss={() => set(r.id, "dismissed")}
+              />
+            ))}
+          </View>
+        )}
+      </View>
+    </ScrollView>
+  );
+}

package/examples/tpl_triage.tsx

@@ -0,0 +1,112 @@
+import { useState } from "react";
+import { ScrollView, View } from "react-native";
+import { Text } from "@lotics/ui/text";
+import { colors } from "@lotics/ui/colors";
+import { Button } from "@lotics/ui/button";
+import { KPIStrip } from "@lotics/ui/kpi_strip";
+import { SegmentedControl } from "@lotics/ui/segmented_control";
+import { EmptyState } from "@lotics/ui/empty_state";
+import { TriageRow } from "@lotics/ui/triage_row";
+import type { ConfidenceLevel } from "@lotics/ui/confidence";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Triage — an inbox the agent has CLASSIFIED and routed. Each item
+// carries the agent's category and a suggested action with a confidence; the
+// human accepts the call, overrides it, or dismisses the item. High-confidence
+// items batch-accept so attention goes to the ambiguous ones. Leads, support
+// tickets, inbound documents, emails. The agent does the sorting; the human
+// keeps the decision.
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface T {
+  id: string;
+  title: string;
+  preview: string;
+  meta: string;
+  category: { label: string };
+  suggestedAction: string;
+  confidence: ConfidenceLevel;
+  status: "open" | "accepted" | "dismissed";
+}
+
+const SEED: T[] = [
+  { id: "t1", title: "RFQ — 2×40HC Cát Lái → Hamburg, reefer", preview: "Hi, we need a quote for two reefer containers of frozen shrimp departing next week…", meta: "08:12", category: { label: "Sales" }, suggestedAction: "Assign to Nguyen", confidence: "high", status: "open" },
+  { id: "t2", title: "Where is my shipment HBL-4471?", preview: "Customer asking for an ETA update on the Hamburg booking, getting anxious about demurrage…", meta: "08:39", category: { label: "Support" }, suggestedAction: "Send ETA, open ticket", confidence: "high", status: "open" },
+  { id: "t3", title: "Invoice INV-2026-0318 — payment confirmation", preview: "Attached the TT receipt for 41,300,000 ₫, please confirm and release the documents…", meta: "09:02", category: { label: "Billing" }, suggestedAction: "Apply the payment", confidence: "high", status: "open" },
+  { id: "t4", title: "Re: partnership opportunity (sponsored)", preview: "Boost your logistics with our revolutionary platform, limited-time offer just for you…", meta: "09:15", category: { label: "Spam" }, suggestedAction: "Move to spam", confidence: "high", status: "open" },
+  { id: "t5", title: "Complaint — damaged cartons on delivery", preview: "Three cartons arrived crushed, we need a claim opened and a replacement schedule…", meta: "09:41", category: { label: "Support" }, suggestedAction: "Open a damage claim", confidence: "medium", status: "open" },
+  { id: "t6", title: "Quote request — air freight, urgent samples", preview: "Need 12 kg of samples to Rotterdam by Friday, what's the fastest option and cost…", meta: "10:03", category: { label: "Sales" }, suggestedAction: "Assign to the air desk", confidence: "medium", status: "open" },
+  { id: "t7", title: "Updated bank details for remittance", preview: "Please update our account for future payments to the following beneficiary…", meta: "10:20", category: { label: "Billing" }, suggestedAction: "Hold — verify sender first", confidence: "low", status: "open" },
+  { id: "t8", title: "Newsletter: port congestion outlook Q3", preview: "Our latest market report on Asia–Europe capacity and rate trends is now available…", meta: "Yesterday", category: { label: "Spam" }, suggestedAction: "Move to spam", confidence: "medium", status: "accepted" },
+];
+
+export function TplTriage() {
+  const [rows, setRows] = useState<T[]>(SEED);
+  const [tab, setTab] = useState<"open" | "resolved">("open");
+
+  const set = (id: string, status: T["status"]) => setRows((prev) => prev.map((r) => (r.id === id ? { ...r, status } : r)));
+  const acceptAllHigh = () => setRows((prev) => prev.map((r) => (r.status === "open" && r.confidence === "high" ? { ...r, status: "accepted" } : r)));
+
+  const open = rows.filter((r) => r.status === "open");
+  const resolved = rows.filter((r) => r.status !== "open");
+  const visible = tab === "open" ? open : resolved;
+  const highOpen = open.filter((r) => r.confidence === "high").length;
+  const review = open.filter((r) => r.confidence !== "high").length;
+
+  return (
+    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+      <View style={{ width: "100%", maxWidth: 820, alignSelf: "center", gap: 16 }}>
+        <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 16 }}>
+          <View style={{ flex: 1, gap: 2 }}>
+            <Text size="xl" weight="semibold">Inbox triage</Text>
+            <Text size="sm" color="muted">The agent classifies and routes each item — accept the call, override, or dismiss</Text>
+          </View>
+          {tab === "open" && highOpen > 0 ? (
+            <Button title={`Accept ${highOpen} high-confidence`} color="secondary" shape="rounded" onPress={acceptAllHigh} />
+          ) : null}
+        </View>
+
+        <KPIStrip
+          items={[
+            { label: "New", value: open.length, format: "number", caption: "awaiting triage" },
+            { label: "Ready to auto-route", value: highOpen, format: "number", info: "High-confidence items the agent is sure about — safe to accept in bulk." },
+            { label: "Needs review", value: review, format: "number", tone: review > 0 ? "warning" : "default", info: "Medium / low confidence — the agent flagged these for a human to confirm the routing." },
+            { label: "Handled", value: rows.filter((r) => r.status === "accepted").length, format: "number" },
+          ]}
+        />
+
+        <SegmentedControl
+          accessibilityLabel="Queue"
+          options={[
+            { label: `New · ${open.length}`, value: "open" },
+            { label: `Handled · ${resolved.length}`, value: "resolved" },
+          ]}
+          value={tab}
+          onValueChange={setTab}
+        />
+
+        {visible.length === 0 ? (
+          <EmptyState icon="circle-check" message={tab === "open" ? "Inbox zero" : "Nothing handled yet"} hint={tab === "open" ? "Every item has been routed or dismissed" : undefined} />
+        ) : (
+          <View style={{ gap: 10 }}>
+            {visible.map((r) => (
+              <TriageRow
+                key={r.id}
+                title={r.title}
+                preview={r.preview}
+                meta={r.meta}
+                category={r.category}
+                suggestedAction={r.suggestedAction}
+                confidence={r.confidence}
+                status={r.status}
+                onAccept={() => set(r.id, "accepted")}
+                onOverride={() => {}}
+                onDismiss={() => set(r.id, "dismissed")}
+              />
+            ))}
+          </View>
+        )}
+      </View>
+    </ScrollView>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "4.3.0",
+  "version": "4.5.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -63,10 +63,17 @@
     "./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",
+    "./choice_list": "./src/choice_list.tsx",
     "./sources": "./src/sources.tsx",
+    "./record_review": "./src/record_review.tsx",
+    "./spec_list": "./src/spec_list.tsx",
+    "./match_row": "./src/match_row.tsx",
+    "./finding": "./src/finding.tsx",
+    "./discrepancy": "./src/discrepancy.tsx",
+    "./triage_row": "./src/triage_row.tsx",
+    "./scored_option": "./src/scored_option.tsx",
     "./icon": "./src/icon.tsx",
     "./dynamic_icon": {
       "react-native": "./src/dynamic_icon.tsx",
@@ -169,7 +176,10 @@
     "./screen_router": "./src/screen_router.tsx",
     "./route_matching": "./src/route_matching.ts",
     "./menu_title": "./src/menu_title.tsx",
-    "./avatar": "./src/avatar.tsx",
+    "./avatar": {
+      "react-native": "./src/avatar.tsx",
+      "default": "./src/avatar.web.tsx"
+    },
     "./wave_avatar": {
       "react-native": "./src/wave_avatar.tsx",
       "default": "./src/wave_avatar.web.tsx"

package/src/agent_progress.tsx

@@ -1,8 +1,7 @@
 import { useState } from "react";
 import { ScrollView, StyleSheet, View } from "react-native";
-import { colors, solid } from "./colors";
+import { colors } 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";
@@ -17,11 +16,12 @@ export interface AgentProgressProps {
 }
 
 /**
- * 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.
+ * The compact, FLOATING agent-progress indicator — a pill (an 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 (`PromptField`) MORPHS into this while the agent runs, and reveals
+ * again when it's done. The whole pill is pressable; collapsed it shows only the
+ * label, so the surface stays calm until you ask to see the steps.
  */
 export function AgentProgress(props: AgentProgressProps) {
   const { steps, state = "streaming", label, defaultExpanded } = props;
@@ -29,12 +29,13 @@ export function AgentProgress(props: AgentProgressProps) {
 
   const running = steps.filter((s) => s.status === "running").at(-1);
   const compact = label ?? running?.label ?? (state === "done" ? "Done" : state === "error" ? "Stopped" : "Working…");
+  const streaming = state === "streaming";
 
   return (
     <View style={{ gap: 8 }}>
       {expanded ? (
         <View style={styles.panel}>
-          <ScrollView style={{ maxHeight: 260 }} contentContainerStyle={{ padding: 14 }}>
+          <ScrollView style={{ maxHeight: 260 }} contentContainerStyle={{ padding: 16 }}>
             <AgentRun steps={steps} state={state} />
           </ScrollView>
         </View>
@@ -45,27 +46,38 @@ export function AgentProgress(props: AgentProgressProps) {
         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}>
+        <WaveAvatar animated={streaming} size={32} color={colors.zinc[900]} />
+        <Text size="sm" weight="medium" numberOfLines={1} style={{ flex: 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 },
+  // Same pill geometry as PromptField (minHeight 52, radius 999, 1.5 border,
+  // ph 6/left-padded for the avatar) so the composer→progress swap reads as a
+  // morph, not a replacement.
+  pill: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    minHeight: 52,
+    backgroundColor: colors.white,
+    borderWidth: 1.5,
+    borderColor: colors.border,
+    borderRadius: 999,
+    paddingLeft: 10,
+    paddingRight: 20,
+    boxShadow: "0 4px 14px rgba(24,24,27,0.08)",
+  },
+  panel: {
+    backgroundColor: colors.white,
+    borderWidth: 1,
+    borderColor: colors.border,
+    borderRadius: 16,
+    overflow: "hidden",
+    boxShadow: "0 6px 24px rgba(24,24,27,0.10)",
+  },
 });

package/src/agent_run.tsx

@@ -1,9 +1,9 @@
-import { useEffect, useRef } from "react";
-import { Animated, Easing, StyleSheet, View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { colors, solid, tint } from "./colors";
 import { Text } from "./text";
-import { Icon } from "./icon";
-import { DotsIndicator } from "./dots_indicator";
+import { Icon, type IconName } from "./icon";
+import { ActivityIndicator } from "./activity_indicator";
+import { AnimationFadeIn } from "./animation_fade_in";
 
 export type AgentStepStatus = "running" | "done" | "error";
 
@@ -23,8 +23,8 @@ export interface AgentRunStep {
 
 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.
+  /** Whole-run state. `streaming` keeps the feed alive — the running node spins
+   *  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").
@@ -35,13 +35,13 @@ export interface AgentRunProps {
 
 /**
  * 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.
+ * calls, results) revealed as they happen, on a connecting spine. The
+ * transparent-work surface, NOT a spinner. Shares the `Timeline` node anatomy: a
+ * tinted disc behind a full-colour icon, fading in as each step arrives. A
+ * running step spins (blue); a finished step settles to an emerald check; a
+ * failure 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.
  */
 export function AgentRun(props: AgentRunProps) {
   const { steps, title, accessibilityLabel } = props;
@@ -53,19 +53,10 @@ export function AgentRun(props: AgentRunProps) {
     <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>
-          )}
+          <HeaderStatus state={state} streaming={streaming} />
         </View>
       ) : null}
 
@@ -75,13 +66,14 @@ export function AgentRun(props: AgentRunProps) {
           return (
             <View key={s.id} style={styles.item}>
               <View style={styles.spineCol}>
-                <StepNode status={s.status} />
+                <AnimationFadeIn key={`${s.id}-${s.status}`}>
+                  <StepNode status={s.status} />
+                </AnimationFadeIn>
                 {!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>
@@ -90,7 +82,7 @@ export function AgentRun(props: AgentRunProps) {
                   <Text
                     size="sm"
                     weight={s.status === "running" ? "medium" : "regular"}
-                    color={s.status === "done" ? "muted" : "default"}
+                    color={s.status === "done" ? "muted" : s.status === "error" ? "danger" : "default"}
                   >
                     {s.label}
                   </Text>
@@ -109,83 +101,71 @@ export function AgentRun(props: AgentRunProps) {
   );
 }
 
-const NODE = 18;
+const NODE_STATUS: Record<"done" | "error", { color: string; icon: IconName }> = {
+  done: { color: solid("emerald"), icon: "check" },
+  error: { color: solid("red"), icon: "circle-alert" },
+};
 
-/** 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") {
+  if (status === "running") {
     return (
-      <View style={[styles.disc, { backgroundColor: solid("emerald") }]}>
-        <Icon name="check" size={11} color={colors.background} />
+      <View style={[styles.node, { backgroundColor: tint("blue", 0.12) }]}>
+        <ActivityIndicator size={12} color={solid("blue")} />
       </View>
     );
   }
-  if (status === "error") {
+  const s = NODE_STATUS[status];
+  return (
+    <View style={[styles.node, { backgroundColor: tint(status === "done" ? "emerald" : "red", 0.12) }]}>
+      <Icon name={s.icon} size={13} color={s.color} />
+    </View>
+  );
+}
+
+function HeaderStatus({ state, streaming }: { state: "streaming" | "done" | "error"; streaming: boolean }) {
+  if (streaming) {
     return (
-      <View style={[styles.disc, { backgroundColor: solid("red") }]}>
-        <Icon name="x" size={11} color={colors.background} />
+      <View style={styles.headerStatus}>
+        <ActivityIndicator size={12} color={solid("blue")} />
+        <Text size="xs" weight="medium" style={{ color: solid("blue") }}>
+          Working
+        </Text>
       </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,
-      }),
+  if (state === "error") {
+    return (
+      <View style={styles.headerStatus}>
+        <Icon name="circle-alert" size={13} color={solid("red")} />
+        <Text size="xs" weight="medium" color="danger">
+          Stopped
+        </Text>
+      </View>
     );
-    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 style={styles.headerStatus}>
+      <Icon name="circle-check" size={13} color={solid("emerald")} />
+      <Text size="xs" weight="medium" style={{ color: solid("emerald") }}>
+        Done
+      </Text>
     </View>
   );
 }
 
+const NODE = 22;
+
 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),
-  },
+  header: { flexDirection: "row", alignItems: "center", gap: 8, minHeight: 20 },
+  headerStatus: { flexDirection: "row", alignItems: "center", gap: 5 },
   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 },
+  contentCol: { flex: 1, paddingTop: 2 },
   contentGap: { paddingBottom: 14 },
+  node: { width: NODE, height: NODE, borderRadius: NODE / 2, alignItems: "center", justifyContent: "center" },
   toolChip: {
-    flexDirection: "row",
-    alignItems: "center",
     alignSelf: "flex-start",
-    gap: 6,
     paddingHorizontal: 8,
     paddingVertical: 3,
     borderRadius: 6,