@lotics/ui 5.6.1 → 5.8.0

package/AGENTS.md

@@ -22,9 +22,11 @@ typeahead, async search, virtualization, and a11y the primitive already ships.
 
 Pick by capability, not by name. (→ the source file for the API.)
 
-- **Actions** — `Button` (labelled; `color` = emphasis/risk, `shape` pill|rounded),
-  `IconButton` (icon-only, needs `accessibilityLabel`/`tooltip`), `LinkButton` (quiet ghost
-  action — Clear / Select all), `PillButton` (dismissible facet chip). A button is never a raw
+- **Actions** — `Button` (labelled; `title` is MANDATORY; `color` = emphasis/risk),
+  `IconButton` (icon-ONLY — the circular affordance; an icon-only Button is a type error, so reach
+  here. `size` `lg` 40px / `md` 28px / `sm` 24px, the SAME `color` palette as Button, plus `loading`;
+  needs `accessibilityLabel`/`tooltip`), `LinkButton` (quiet ghost
+  action — Clear / Select all), `Chip` (dismissible facet chip). A button is never a raw
   `Pressable`. For a link OUT (a URL / record / document) use `Link` — underline+blue, the
   destination signal; the opposite of `LinkButton` (a quiet in-app action, never underlined).
 - **Pick from a list** — `Picker` (known options, native typeahead, single/multi/custom-render,
@@ -66,8 +68,8 @@ Pick by capability, not by name. (→ the source file for the API.)
 - **Rows & registers** — `PressableRow` (THE register row), `ListItem`, `MenuButton`,
   `MenuListItem`, `DetailRow` (label+value for drawers/peeks), `ActionMenu` (⋯), `FloatingActionBar`
   (bulk-select bar).
-- **Filters & view controls** — `SearchInput`, `ChipGroup`, `FilterPill` (+ `RangeSlider`,
-  `Counter`), `PillButton`.
+- **Filters & view controls** — `SearchInput`, `ChipGroup`, `FilterChip` (+ `RangeSlider`,
+  `Counter`), `Chip`.
 - **Overlays** — `Dialog`, `Drawer` (+ `DrawerFooter`), `Popover`, `Tooltip`, `CommandMenu`,
   `Alert` (the blocking confirm).
 - **Status / feedback** — `Badge` / `StatusBadge`, `Callout` (inline status), `EmptyState`,
@@ -270,15 +272,20 @@ Compose the surfaces as a loop, and reach for the right one by job:
   attaching HOLDS the file for review; the human presses Send. The canvas (`tpl_dieline`) uses it this
   way; while running the host swaps `Composer` for `AgentProgress` (same pill geometry, so it reads as
   a morph).
-- **Show the work** — `AgentRun`: a live feed of the agent's work — its streamed narration (with a
-  blinking caret) + tool calls as a vertical `Stepper` of neutral dots (the latest pulsing while live,
-  a white-check dot once done). No title, no avatar — just the work. A terminal "Done" step (the
-  `complete` node) appears ONLY once the run finishes. A step can carry `peek` content to glance into
-  via a popover. Tool labels resolve from the raw tool name via a built-in default map + an optional
-  `labelForTool` override (localize THERE — the kit stays English). `doneLabel` localizes the terminal.
-  Transparent work, NEVER a bare spinner — the
-  intelligence is legible. On a canvas/composer app reach for `AgentProgress` — `AgentRun`
-  collapsed into a floating pill (avatar + current step) that EXPANDS on press; the composer
+- **Show the work** — `AgentRun`: a live feed of the agent's work as a TIMELINE. The prop is an
+  ORDERED `items` array — `{type:"text"}` prose (rendered as `Markdown`, a trailing ▍ while live) interleaved with `{type:"step"}` tool/step calls, in
+  the order they happened (a real run is text → a burst of calls → more text → more calls, NOT all
+  text on top of a flat step list). Consecutive `step` items fold into ONE activity group: while the
+  agent is mid-tools the tail group is a SINGLE pulsing row whose label swaps in place as each call
+  fires (no growing stack of dots); once prose resumes the group settles into a persistent "{final
+  action} · {n} steps" HEADER (a `complete` terminal dot — distinct from the filled `done` step dots)
+  that STAYS PUT and rolls the calls out BELOW it on press (a `step` can carry `peek` content;
+  `detail` is OPTIONAL — real tool I/O, never invented prose). The run ALWAYS ends on the agent's
+  text (no global terminal node). A `step` with
+  `kind:"tool"` carries the RAW tool name, resolved via a built-in map + an optional `labelForTool`
+  override (localize THERE — the kit stays English); `stepsLabel` localizes the "{n} steps" suffix.
+  Transparent work, NEVER a bare spinner. On a canvas/composer app reach for `AgentProgress` —
+  `AgentRun` collapsed into a floating pill (avatar + current step) that EXPANDS on press; the composer
   morphs into it while running, and reveals again when done.
 - **Review before apply — ONE card + the batch engine, the BODY is compositional.** Every "the agent
   proposes → the human accepts / edits / dismisses → nothing auto-applies" surface wears the same
@@ -378,8 +385,8 @@ controls — while **status/severity/diffs use functional colour** the way the r
 - **Stepper / AgentRun nodes** — progress dots on a spine: `current` a **pulsing accent ring** (white
   centre), `done` a filled accent dot + **white check**, `upcoming` a faint **grey** ring, the terminal
   `complete` a **blackish ring + black check**, `warning` **amber**. Default accent is neutral ink
-  (`color` themes it); `AgentRun` keeps the neutral default + appends the `complete` "Done" node only
-  when the run finishes.
+  (`color` themes it); `AgentRun` keeps the neutral default — an active group's tail pulses (`current`),
+  a settled group is a `done`/`warning` row, and there is no global terminal node (the run ends on text).
 - **ChangeReview diffs** — the old value struck in **red**, the new value in **green**.
 - **Discrepancy** — the agent's pick gets a **blue** highlight; `Mismatch` reads amber, `Resolved`
   emerald.
@@ -478,25 +485,33 @@ was only ever about the review surfaces' sparkles/severity glyphs, not functiona
   step. Facts are `DetailRow`s; the commit bar is a `DrawerFooter`. The open row shows a selected
   highlight (and `marked` — a resting blue tint — for a bulk-ticked row). `Peek` is ONLY for
   secondary references, never the primary row press.
+- **One control radius** — every interactive control (`Button`, the inputs/selects/pickers,
+  `SearchInput`, `MenuButton`, `Tabs`, the `SegmentedControl` track, `ChipGroup`/`FilterChip`/
+  `Chip`) wears `CONTROL_RADIUS` (10, from `control_surface.ts`) — never a literal. Containers
+  are deliberately larger (`Card` 16, the review card 12). An element NESTED inside a padded control
+  (a segmented thumb, a combobox chip, an ✕ on a chip) takes `CONTROL_RADIUS − padding` so its corner
+  stays CONCENTRIC with the parent — set it equal and the inner corner bulges past the outer curve.
+  Round-by-function controls (avatars, status dots, switches, sliders, progress bars, `IconButton`)
+  stay full (999); a small square toggle (`Checkbox`, 24px) keeps a proportional small radius (6 —
+  the same fraction of its box that 10 is of a 40px control), not the band radius. No capsules —
+  `Button` has no pill `shape`.
 - **One view-control vocabulary** (all 40px, `sm` labels, in one wrapping band):
-  · `SearchInput` is THE search box — a white `TextInputField` preset (rounded-8 like every other
-    input, a thin zinc-300 border, the leading search glyph + a clear ✕). It reads as search by its
+  · `SearchInput` is THE search box — a white `TextInputField` preset (the shared `CONTROL_RADIUS`
+    like every other input, a thin zinc-300 border, the leading search glyph + a clear ✕). It reads as search by its
     ICON + white fill, not a distinct shape, so a toolbar of controls stays one consistent band.
     Never a bare `TextInputField` + search icon.
   · `ChipGroup` is THE one-of-N lens (≤ ~10 options the user flips between; include "All"; counts in
     the label). Filters ONE list to a SUBSET — including by process stage / lifecycle state.
-  · `FilterPill` is THE secondary-dimension filter — a compact pill that opens a composed popover
+  · `FilterChip` is THE secondary-dimension filter — a compact chip that opens a composed popover
     editor (`PickerMenu multi` / `RangeSlider` / `Counter` / date range). Single-select closes on
     pick via the `{({close}) => …}` render prop.
   · `ColumnFilter` is the TYPED column filter — give it a `FilterableColumn` (`text` / `number` /
     `select`) + a controlled `ColumnFilterValue` and it renders the right editor (contains / range /
-    multi-select) inside a `FilterPill`, with `columnFilterToConditions` mapping the value to query
-    predicates. Reach for it — ONE compact pill per dimension — when a register filters on SEVERAL
+    multi-select) inside a `FilterChip`, with `columnFilterToConditions` mapping the value to query
+    predicates. Reach for it — ONE compact chip per dimension — when a register filters on SEVERAL
     columns (origin, destination, carrier, type…). Never hand-roll a row of bespoke chips/filters,
     and never use a permanently-expanded `ChipGroup` for a secondary dimension.
-  · `Combobox pill` is the SEARCHABLE filter in the band — `<Combobox pill>` wears the same white
-    toolbar-pill surface as `SearchInput`/`FilterPill` (don't put a bare form-look Combobox in a
-    toolbar — its transparent input reads grey on the zinc-50 canvas beside the white pills). Reach
+  · `Combobox` is the SEARCHABLE picker — reach
     for it over `ColumnFilter` when the value is ONE of a large/growing set you type to narrow (a
     port, a customer) rather than a short fixed list. Pass `recentOptions` (the same option list) so
     a click opens the full list, then typing filters. The **From → To route picker** is two of them
@@ -581,12 +596,14 @@ recipe for a screen JOB; copy and adapt). Pick by the job:
 
 ## Full component inventory (import as `@lotics/ui/<module>`)
 
-text · card (Card · CardHeader · CardHeaderTitle · CardHeaderMeta · CardBody · CardFooter) ·
+text ·
+markdown (Markdown — the single canonical markdown renderer for chat, apps, and `AgentRun`; rich on web via react-markdown/remark-gfm with copyable tables, plain-text on native; takes a markdown `children` string; import `@lotics/ui/markdown.css` once for styling) ·
+card (Card · CardHeader · CardHeaderTitle · CardHeaderMeta · CardBody · CardFooter) ·
 section_heading (SectionHeading · SectionHeadingTitle — compound, owns no margin) · badge ·
 option_badge (OptionBadge — a select value as its configured colored badge) ·
 member_chip (MemberChip — avatar + name; the universal person render) ·
 member_select (MemberSelect — a Picker of MemberChip options; the member picker) ·
-status_badge · button · icon_button · link · link_button · pill_button · tabs · segmented_control ·
+status_badge · button · icon_button · link · link_button · chip · tabs · segmented_control ·
 picker · combobox · tag_input (TagInput — chip box + Add-popover; for tags, not Combobox multi) ·
 text_input_field · number_input · search_input · form_field · checkbox · checkbox_input · switch ·
 radio_picker · counter · range_slider · date_picker · date_range_filter_field · time_picker ·
@@ -594,7 +611,7 @@ inline_text_input · inline_number_input · inline_select · inline_member_selec
 inline_time_picker (the Inline* family — per-field editors on `inline_edit`'s `useInlineEdit` +
 `InlineEditView`; `InlineSelect`/`InlineMemberSelect` take `renderValue` for a chip/badge at rest) ·
 list · list_item · menu_button · menu_list_item · detail_row · pressable_row · action_menu ·
-floating_action_bar · filter_pill · column_filter (ColumnFilter — the typed per-column filter pill +
+floating_action_bar · filter_chip · column_filter (ColumnFilter — the typed per-column filter pill +
 columnFilterToConditions; for a register filtering on several columns) · chip_group · search_input ·
 sort_header · table · pagination · accordion · stepper (Stepper + Step — done/current/upcoming/warning/complete progress on a track (horizontal) or spine (vertical); compound `<Step status>children` OR data `steps[]`+`current`; the guided-run / agent-feed primitive — subsumes the old StepList) ·
 step_progress · timeline (heterogeneous event LOG — per-row icon + expandable details, models the past; NOT progress) · drawer (+ DrawerFooter) · dialog · popover · tooltip ·

package/examples/tpl_approvals.tsx

@@ -13,7 +13,7 @@ import { Divider } from "@lotics/ui/divider";
 import { Drawer, DrawerFooter } from "@lotics/ui/drawer";
 import { EmptyState } from "@lotics/ui/empty_state";
 import { Counter } from "@lotics/ui/counter";
-import { FilterPill, selectSummary } from "@lotics/ui/filter_pill";
+import { FilterChip, selectSummary } from "@lotics/ui/filter_chip";
 import { FloatingActionBar } from "@lotics/ui/floating_action_bar";
 import { FormField } from "@lotics/ui/form_field";
 import { KPIStrip } from "@lotics/ui/kpi_strip";
@@ -240,7 +240,7 @@ export function TplApprovals() {
           />
 
           {/* layered filter band — the hot dimension (type) inline as chips,
-              secondary dimensions collapsed into FilterPills so the band stays
+              secondary dimensions collapsed into FilterChips so the band stays
               scannable as more facets are added */}
           <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8, alignItems: "center" }}>
             <ChipGroup
@@ -254,13 +254,13 @@ export function TplApprovals() {
               value={tab}
               onValueChange={(t) => { setTab(t); setOpenId(null); }}
             />
-            <FilterPill label="Requester" summary={reqSummary} onClear={() => setReqSel([])} clearLabel="Clear requester filter">
+            <FilterChip label="Requester" summary={reqSummary} onClear={() => setReqSel([])} clearLabel="Clear requester filter">
               <PickerMenu multi enableSelectAll options={REQUESTERS} value={reqSel} onValueChange={setReqSel} />
-            </FilterPill>
-            <FilterPill label="Role" summary={roleSummary} onClear={() => setRoleSel([])} clearLabel="Clear role filter">
+            </FilterChip>
+            <FilterChip label="Role" summary={roleSummary} onClear={() => setRoleSel([])} clearLabel="Clear role filter">
               <PickerMenu multi options={ROLES} value={roleSel} onValueChange={setRoleSel} />
-            </FilterPill>
-            <FilterPill label="Amount" summary={amtSummary} onClear={() => setAmt([AMT_MIN, AMT_MAX])} clearLabel="Clear amount filter">
+            </FilterChip>
+            <FilterChip label="Amount" summary={amtSummary} onClear={() => setAmt([AMT_MIN, AMT_MAX])} clearLabel="Clear amount filter">
               <RangeSlider
                 min={AMT_MIN}
                 max={AMT_MAX}
@@ -270,8 +270,8 @@ export function TplApprovals() {
                 format={fmtAmt}
                 accessibilityLabel="Amount"
               />
-            </FilterPill>
-            <FilterPill label="Waiting" summary={daysSummary} onClear={() => setMinDays(0)} clearLabel="Clear waiting filter">
+            </FilterChip>
+            <FilterChip label="Waiting" summary={daysSummary} onClear={() => setMinDays(0)} clearLabel="Clear waiting filter">
               <View style={{ gap: 10 }}>
                 <Text size="sm" color="muted">Waiting at least</Text>
                 <Counter
@@ -283,7 +283,7 @@ export function TplApprovals() {
                   format={(n) => `${n} ${n === 1 ? "day" : "days"}`}
                 />
               </View>
-            </FilterPill>
+            </FilterChip>
           </View>
 
           <Card style={{ padding: 0 }}>

package/examples/tpl_crm_desk.tsx

@@ -20,7 +20,7 @@ import { NumberInput } from "@lotics/ui/number_input";
 import { Peek } from "@lotics/ui/peek";
 import { ChipGroup } from "@lotics/ui/chip_group";
 import { DatePicker } from "@lotics/ui/date_picker";
-import { FilterPill } from "@lotics/ui/filter_pill";
+import { FilterChip } from "@lotics/ui/filter_chip";
 import { Popover, PopoverContent, PopoverTrigger } from "@lotics/ui/popover";
 import { PressableRow } from "@lotics/ui/pressable_row";
 import { SearchInput } from "@lotics/ui/search_input";
@@ -158,7 +158,7 @@ function ChiTieuGate({ chiTieu, onSave }: { chiTieu: number; onSave: (n: number)
     onSave(draft); setApDung("In effect from today · set by you"); setOpen(false);
   };
   return (
-    <FilterPill
+    <FilterChip
       label="Target"
       summary={String(chiTieu)}
       align="end"
@@ -181,7 +181,7 @@ function ChiTieuGate({ chiTieu, onSave }: { chiTieu: number; onSave: (n: number)
         </FormField>
         <Text size="xs" color="muted">{apDung}</Text>
       </View>
-    </FilterPill>
+    </FilterChip>
   );
 }
 

package/examples/tpl_dieline.tsx

@@ -10,7 +10,7 @@ import { InlineTextInput } from "@lotics/ui/inline_text_input";
 import { AgentProgress } from "@lotics/ui/agent_progress";
 import { Composer } from "@lotics/ui/composer";
 import { FileThumbnail, type DisplayFile } from "@lotics/ui/file_thumbnail";
-import { type AgentRunStep } from "@lotics/ui/agent_run";
+import { type AgentRunStep, type AgentRunItem } from "@lotics/ui/agent_run";
 
 // A real app fills the attachment from `useFileUpload` (the uploaded file's URL);
 // this mock uses an inline placeholder so the example needs no network image.
@@ -105,8 +105,9 @@ export function TplDieline() {
     return () => clearTimeout(t);
   }, [run, revealed]);
 
-  const liveSteps: AgentRunStep[] = run
+  const liveItems: AgentRunItem[] = run
     ? run.script.slice(0, revealed).map((s, i) => ({
+        type: "step",
         ...s,
         status: revealed < run.script.length && i === revealed - 1 ? "running" : "done",
       }))
@@ -167,7 +168,7 @@ export function TplDieline() {
       {/* slim top bar */}
       <View style={{ flexDirection: "row", alignItems: "center", gap: 12, paddingHorizontal: 20, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: colors.zinc[200], backgroundColor: colors.background }}>
         <Text size="sm" weight="semibold" style={{ flex: 1 }}>Carton design</Text>
-        {phase !== "empty" ? <Button title="New" color="secondary" shape="rounded" icon="plus" onPress={newSession} /> : null}
+        {phase !== "empty" ? <Button title="New" color="secondary" icon="plus" onPress={newSession} /> : null}
       </View>
 
       {/* canvas region — a pannable + zoomable surface (DRAG to pan, the zoom pill
@@ -208,7 +209,7 @@ export function TplDieline() {
       <View style={{ position: "absolute", left: 0, right: 0, bottom: 24, alignItems: "center", paddingHorizontal: 16, pointerEvents: "none" }}>
         <View style={{ width: "100%", maxWidth: 620, pointerEvents: "auto" }}>
           {phase === "working" ? (
-            <AgentProgress steps={liveSteps} state="streaming" />
+            <AgentProgress items={liveItems} state="streaming" />
           ) : (
             <Composer
               value={prompt}
@@ -217,7 +218,7 @@ export function TplDieline() {
               sendDisabled={prompt.trim().length === 0 && !attachment}
               placeholder={designReady ? "Describe a change — “make it 5 mm taller”" : "Attach a photo, add a note, then send…"}
               actionsButton={
-                <Button icon="paperclip" color="secondary" accessibilityLabel="Attach a photo" onPress={() => setAttachment(MOCK_PHOTO)} />
+                <IconButton icon="paperclip" size="lg" color="secondary" accessibilityLabel="Attach a photo" onPress={() => setAttachment(MOCK_PHOTO)} />
               }
               files={attachment ? <FileThumbnail file={attachment} size={56} onRemove={() => setAttachment(null)} /> : null}
             />
@@ -272,7 +273,7 @@ function ParamsPanel({ dims, onEditParam, onDownload }: { dims: Dims; onEditPara
             ))}
           </View>
 
-          <Button title="Download" color="primary" shape="rounded" icon="file-down" alignSelf="stretch" onPress={onDownload} />
+          <Button title="Download" color="primary" icon="file-down" alignSelf="stretch" onPress={onDownload} />
         </>
       ) : null}
     </View>

package/examples/tpl_directory.tsx

@@ -7,7 +7,7 @@ import { Avatar } from "@lotics/ui/avatar";
 import { Badge } from "@lotics/ui/badge";
 import { Button } from "@lotics/ui/button";
 import { ChipGroup } from "@lotics/ui/chip_group";
-import { FilterPill } from "@lotics/ui/filter_pill";
+import { FilterChip } from "@lotics/ui/filter_chip";
 import { Counter } from "@lotics/ui/counter";
 import { Card } from "@lotics/ui/card";
 import { Divider } from "@lotics/ui/divider";
@@ -204,7 +204,7 @@ export function TplDirectory() {
               value={tab}
               onValueChange={setTab}
             />
-            <FilterPill
+            <FilterChip
               label="Min orders"
               summary={minOrders > 0 ? `≥ ${minOrders}` : undefined}
               onClear={() => setMinOrders(0)}
@@ -222,7 +222,7 @@ export function TplDirectory() {
                   format={(n) => `${n} orders`}
                 />
               </View>
-            </FilterPill>
+            </FilterChip>
           </View>
 
           {/* the register: one card, hairline-separated rows */}

package/examples/tpl_dossier.tsx

@@ -20,7 +20,7 @@ import { Popover, PopoverContent, PopoverFooter, PopoverTrigger } from "@lotics/
 import { Table, TableRow, TableCell, type TableColumn } from "@lotics/ui/table";
 import { SearchInput } from "@lotics/ui/search_input";
 import { ChipGroup } from "@lotics/ui/chip_group";
-import { FilterPill, selectSummary } from "@lotics/ui/filter_pill";
+import { FilterChip, selectSummary } from "@lotics/ui/filter_chip";
 import { PickerMenu } from "@lotics/ui/picker_menu";
 import { cycleSort, sortBy, type SortState } from "@lotics/ui/sort_header";
 import { Combobox } from "@lotics/ui/combobox";
@@ -101,7 +101,7 @@ const TABS: { value: Tab; label: string }[] = [
 
 const PAGE_SIZE = 8;
 
-// Distinct case handlers — the secondary filter dimension (a multi-select FilterPill).
+// Distinct case handlers — the secondary filter dimension (a multi-select FilterChip).
 const ASSIGNEES = [...new Set(HO_SO.map((r) => r.phuTrach))].map((n) => ({ label: n, value: n }));
 
 // Columns defined ONCE — Table renders the header from these and each
@@ -331,7 +331,7 @@ export function TplDossier() {
         />
 
         {/* status chips (the hot dimension, inline) + a secondary Assignee
-            multi-select FilterPill — the same faceted band as Approvals */}
+            multi-select FilterChip — the same faceted band as Approvals */}
         <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8, alignItems: "center" }}>
           <View style={{ flexGrow: 1, flexBasis: 240, minWidth: 200, maxWidth: 360 }}>
             <SearchInput
@@ -350,7 +350,7 @@ export function TplDossier() {
             value={tab}
             onValueChange={chonTab}
           />
-          <FilterPill
+          <FilterChip
             label="Assignee"
             summary={assigneeSummary}
             onClear={() => { setAssignee([]); setPage(0); }}
@@ -363,10 +363,10 @@ export function TplDossier() {
               value={assignee}
               onValueChange={(v) => { setAssignee(v); setPage(0); }}
             />
-          </FilterPill>
+          </FilterChip>
           {/* Single-select sibling — the render-prop `close` shuts the popover on
               pick (the multi above stays open to collect several values). */}
-          <FilterPill
+          <FilterChip
             label="Fee"
             summary={feeStatus === "paid" ? "Paid" : feeStatus === "unpaid" ? "Unpaid" : undefined}
             onClear={() => { setFeeStatus(null); setPage(0); }}
@@ -380,7 +380,7 @@ export function TplDossier() {
                 onRequestClose={close}
               />
             )}
-          </FilterPill>
+          </FilterChip>
         </View>
 
         {/* the register — eyebrow band (Table header) → list rows → totals + paging */}

package/examples/tpl_draft.tsx

@@ -95,7 +95,7 @@ export function TplDraft() {
         {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(""); }} />
+              <Button title="Draft another" color="secondary" onPress={() => { setPhase("idle"); setDraft(""); }} />
             </CompletionState>
           </Card>
         ) : (
@@ -129,7 +129,7 @@ export function TplDraft() {
 
               {phase === "idle" ? (
                 <View style={{ alignItems: "flex-start", paddingTop: 4 }}>
-                  <Button title="Draft a reply" color="primary" shape="rounded" onPress={startDraft} />
+                  <Button title="Draft a reply" color="primary" onPress={startDraft} />
                 </View>
               ) : null}
 
@@ -151,8 +151,8 @@ export function TplDraft() {
             {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")} />
+                <Button title="Regenerate" color="secondary" icon="rotate-ccw" onPress={startDraft} />
+                <Button title="Send reply" color="primary" onPress={() => setPhase("sent")} />
               </CardFooter>
             ) : null}
           </Card>

package/examples/tpl_extract.tsx

@@ -5,7 +5,7 @@ import { Text } from "@lotics/ui/text";
 import { Button } from "@lotics/ui/button";
 import { Card, CardBody, CardHeader, CardHeaderTitle } from "@lotics/ui/card";
 import { FileDropzone } from "@lotics/ui/file_dropzone";
-import { AgentRun, type AgentRunStep } from "@lotics/ui/agent_run";
+import { AgentRun, type AgentRunStep, type AgentRunItem } from "@lotics/ui/agent_run";
 import { ReviewCard } from "@lotics/ui/review_card";
 import { RecordFields, type RecordField } from "@lotics/ui/record_fields";
 import { Sources } from "@lotics/ui/sources";
@@ -81,7 +81,8 @@ export function TplExtract() {
     return () => clearTimeout(t);
   }, [streaming, revealed]);
 
-  const steps: AgentRunStep[] = EXTRACT.slice(0, revealed).map((s, i) => ({
+  const items: AgentRunItem[] = EXTRACT.slice(0, revealed).map((s, i) => ({
+    type: "step",
     ...s,
     status: streaming && revealed < EXTRACT.length && i === revealed - 1 ? "running" : "done",
   }));
@@ -119,7 +120,7 @@ export function TplExtract() {
             <Text size="xl" weight="semibold">Capture packing list</Text>
             <Text size="sm" color="muted">Drop a photo; the agent extracts each line, you review and edit, then save them all to the table.</Text>
           </View>
-          {phase !== "intake" ? <Button title="Start over" color="muted" shape="rounded" onPress={reset} /> : null}
+          {phase !== "intake" ? <Button title="Start over" color="muted" onPress={reset} /> : null}
         </View>
 
         {phase === "intake" ? (
@@ -133,7 +134,7 @@ export function TplExtract() {
 
         {phase === "extracting" ? (
           <Card>
-            <AgentRun steps={steps} state={streaming ? "streaming" : "done"} />
+            <AgentRun items={items} state={streaming ? "streaming" : "done"} />
           </Card>
         ) : null}
 
@@ -167,12 +168,11 @@ export function TplExtract() {
               ))}
             </View>
             <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-              <Button title="Confirm all" color="muted" shape="rounded" onPress={() => setStatuses(Object.fromEntries(RECORDS.map((r) => [r.id, "confirmed" as Status])))} />
+              <Button title="Confirm all" color="muted" onPress={() => setStatuses(Object.fromEntries(RECORDS.map((r) => [r.id, "confirmed" as Status])))} />
               <View style={{ flex: 1 }} />
               <Button
                 title={`Save ${confirmedCount} ${confirmedCount === 1 ? "line" : "lines"}`}
                 color="primary"
-                shape="rounded"
                 disabled={confirmedCount === 0}
                 onPress={() => setPhase("done")}
               />
@@ -183,7 +183,7 @@ export function TplExtract() {
         {phase === "done" ? (
           <Card>
             <CompletionState title={`${confirmedCount} lines saved`} summary="The confirmed lines were written to the shipment table.">
-              <Button title="Capture another" color="secondary" shape="rounded" onPress={reset} />
+              <Button title="Capture another" color="secondary" onPress={reset} />
             </CompletionState>
           </Card>
         ) : null}

package/examples/tpl_inventory.tsx

@@ -5,7 +5,7 @@ import { colors, solid } from "@lotics/ui/colors";
 import { Badge } from "@lotics/ui/badge";
 import { Button } from "@lotics/ui/button";
 import { ChipGroup } from "@lotics/ui/chip_group";
-import { FilterPill } from "@lotics/ui/filter_pill";
+import { FilterChip } from "@lotics/ui/filter_chip";
 import { RangeSlider, rangeSummary } from "@lotics/ui/range_slider";
 import { cycleSort, sortBy, type SortState } from "@lotics/ui/sort_header";
 import { Card } from "@lotics/ui/card";
@@ -259,9 +259,9 @@ export function TplInventory() {
             value={loc}
             onValueChange={setLoc}
           />
-          <FilterPill label="Stock value" summary={amtSummary} onClear={() => setAmt([0, AMT_MAX])} clearLabel="Clear stock value filter">
+          <FilterChip label="Stock value" summary={amtSummary} onClear={() => setAmt([0, AMT_MAX])} clearLabel="Clear stock value filter">
             <RangeSlider min={0} max={AMT_MAX} step={5_000_000} value={amt} onValueChange={setAmt} format={fmtAmt} accessibilityLabel="Stock value" />
-          </FilterPill>
+          </FilterChip>
         </View>
 
         {/* the stock register: eyebrow band → Divider-separated SKU rows */}

package/examples/tpl_lookup.tsx

@@ -6,7 +6,7 @@ import { Divider } from "@lotics/ui/divider";
 import { Callout, CalloutText, CalloutTitle } from "@lotics/ui/callout";
 import { PressableHighlight } from "@lotics/ui/pressable_highlight";
 import { Composer } from "@lotics/ui/composer";
-import { AgentRun, type AgentRunStep } from "@lotics/ui/agent_run";
+import { AgentRun, type AgentRunStep, type AgentRunItem } from "@lotics/ui/agent_run";
 import { SpecList, type SpecRow } from "@lotics/ui/spec_list";
 import { Confidence, type ConfidenceLevel } from "@lotics/ui/confidence";
 import { Badge } from "@lotics/ui/badge";
@@ -184,7 +184,8 @@ export function TplLookup() {
   };
 
   const streaming = phase === "running" && revealed < SCRIPT.length;
-  const steps: AgentRunStep[] = SCRIPT.slice(0, revealed).map((s, i) => ({
+  const items: AgentRunItem[] = SCRIPT.slice(0, revealed).map((s, i) => ({
+    type: "step",
     ...s,
     status: streaming && i === revealed - 1 ? "running" : "done",
   }));
@@ -201,7 +202,7 @@ export function TplLookup() {
 
         <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 16 }}>
           {/* current run */}
-          <AgentRun steps={steps} state={streaming ? "streaming" : "done"} />
+          <AgentRun items={items} state={streaming ? "streaming" : "done"} />
 
           <View style={{ gap: 8 }}>
             <Text size="xs" color="muted" weight="medium">Nearest matches</Text>

package/examples/tpl_match.tsx

@@ -72,7 +72,7 @@ export function TplMatch() {
             <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} />
+            <Button title={`Accept ${highOpen} high-confidence`} color="secondary" onPress={acceptAllHigh} />
           ) : null}
         </View>
 

package/examples/tpl_ratedesk.tsx

@@ -13,7 +13,7 @@ import { FileDropzone } from "@lotics/ui/file_dropzone";
 import { FileThumbnailGrid } from "@lotics/ui/file_thumbnail_grid";
 import { FileGalleryModal } from "@lotics/ui/file_gallery_modal";
 import { type DisplayFile } from "@lotics/ui/file_thumbnail";
-import { AgentRun, type AgentRunStep } from "@lotics/ui/agent_run";
+import { AgentRun, type AgentRunItem } from "@lotics/ui/agent_run";
 import { Table, TableRow, TableCell, type TableColumn } from "@lotics/ui/table";
 import { InlineNumberInput } from "@lotics/ui/inline_number_input";
 import { CompletionState } from "@lotics/ui/completion_state";
@@ -167,8 +167,8 @@ export function TplRatedesk() {
     setPhase("done");
   }, [lines, decisions]);
 
-  const runSteps: AgentRunStep[] = READ_STEPS.slice(0, Math.min(revealed + 1, READ_STEPS.length)).map((s, i) => ({
-    id: `r${i}`, label: s.label, kind: s.kind, status: i < revealed ? "done" : "running",
+  const runItems: AgentRunItem[] = READ_STEPS.slice(0, Math.min(revealed + 1, READ_STEPS.length)).map((s, i) => ({
+    type: "step", id: `r${i}`, label: s.label, kind: s.kind, status: i < revealed ? "done" : "running",
   }));
   const newCount = lines.filter((l) => l.status === "new").length;
 
@@ -181,7 +181,7 @@ export function TplRatedesk() {
           <Text size="xl" weight="semibold">Rate desk</Text>
           <Text size="sm" color="muted">Look up any route, carrier or container. Prices come from carrier sheets — re-ingest to refresh.</Text>
         </View>
-        <Button title="Import prices" color="primary" shape="rounded" onPress={() => setImportOpen(true)} />
+        <Button title="Import prices" color="primary" onPress={() => setImportOpen(true)} />
       </View>
 
       {/* REGISTER — the live rate card, filter to anything */}
@@ -193,11 +193,11 @@ export function TplRatedesk() {
         <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: 8 }}>
           <View style={{ flexDirection: "row", alignItems: "center", gap: 6, flexGrow: 1, flexBasis: 360, minWidth: 280 }}>
             <View style={{ flex: 1, minWidth: 120 }}>
-              <Combobox pill icon="map-pin" options={originOpts} recentOptions={originOpts} recentsLabel="Origin" value={fromV} onValueChange={setFromV} clearable onClear={() => setFromV(null)} placeholder="From" accessibilityLabel="Origin port" />
+              <Combobox icon="map-pin" options={originOpts} recentOptions={originOpts} recentsLabel="Origin" value={fromV} onValueChange={setFromV} clearable onClear={() => setFromV(null)} placeholder="From" accessibilityLabel="Origin port" />
             </View>
             <Icon name="arrow-right" size={14} color={colors.zinc[400]} />
             <View style={{ flex: 1, minWidth: 120 }}>
-              <Combobox pill icon="map-pin" options={destOpts} recentOptions={destOpts} recentsLabel="Destination" value={toV} onValueChange={setToV} clearable onClear={() => setToV(null)} placeholder="To" accessibilityLabel="Destination port" />
+              <Combobox icon="map-pin" options={destOpts} recentOptions={destOpts} recentsLabel="Destination" value={toV} onValueChange={setToV} clearable onClear={() => setToV(null)} placeholder="To" accessibilityLabel="Destination port" />
             </View>
           </View>
           <ColumnFilter column={carrierCol} value={carrierF} onChange={setCarrierF} clearLabel="Clear carrier" />
@@ -238,7 +238,7 @@ export function TplRatedesk() {
           </View>
         ) : null}
 
-        {phase === "reading" ? <AgentRun steps={runSteps} state="streaming" /> : null}
+        {phase === "reading" ? <AgentRun items={runItems} state="streaming" /> : null}
 
         {phase === "review" ? (
           <ChangeReview
@@ -270,8 +270,8 @@ export function TplRatedesk() {
           away inside the list. */}
       {phase === "idle" ? (
         <DialogFooter>
-          {files.length > 0 ? <Button title="Clear" color="muted" shape="rounded" onPress={() => setFiles([])} /> : null}
-          <Button title={files.length ? `Read ${files.length} sheets` : "Read sheets"} color="primary" shape="rounded" disabled={!files.length} onPress={() => { setRevealed(0); setPhase("reading"); }} />
+          {files.length > 0 ? <Button title="Clear" color="muted" onPress={() => setFiles([])} /> : null}
+          <Button title={files.length ? `Read ${files.length} sheets` : "Read sheets"} color="primary" disabled={!files.length} onPress={() => { setRevealed(0); setPhase("reading"); }} />
         </DialogFooter>
       ) : phase === "review" ? (
         <DialogFooter>
@@ -286,8 +286,8 @@ export function TplRatedesk() {
         </DialogFooter>
       ) : phase === "done" ? (
         <DialogFooter>
-          <Button title="Import more" color="secondary" shape="rounded" onPress={reset} />
-          <Button title="Done" color="primary" shape="rounded" onPress={closeImport} />
+          <Button title="Import more" color="secondary" onPress={reset} />
+          <Button title="Done" color="primary" onPress={closeImport} />
         </DialogFooter>
       ) : null}
     </Dialog>

package/examples/tpl_report.tsx

@@ -15,7 +15,7 @@ import { EmptyState } from "@lotics/ui/empty_state";
 import { KPIStrip } from "@lotics/ui/kpi_strip";
 import { Link } from "@lotics/ui/link";
 import { Pagination } from "@lotics/ui/pagination";
-import { PillButton } from "@lotics/ui/pill_button";
+import { Chip } from "@lotics/ui/chip";
 import { SegmentedControl, type SegmentOption } from "@lotics/ui/segmented_control";
 import { formatMoney } from "@lotics/ui/format_money";
 import { formatDate, parseDate } from "@lotics/ui/format_date";
@@ -311,9 +311,9 @@ export function TplReport() {
             {chips.length > 0 ? (
               <View style={{ flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
                 {chips.map((c) => (
-                  <PillButton key={c.key} onDismiss={c.clear} dismissTooltip="Clear filter">
+                  <Chip key={c.key} onDismiss={c.clear} dismissTooltip="Clear filter">
                     <Text size="xs" weight="medium" color="muted">{c.label}</Text>
-                  </PillButton>
+                  </Chip>
                 ))}
               </View>
             ) : null}