@lotics/ui 29.2.0 → 30.0.0

package/AGENTS.md

@@ -16,7 +16,7 @@ CURRENT major only — upgrading an app across majors is `MIGRATION.md`.
 |---|---|
 | [docs/catalog.md](./docs/catalog.md) | **The complete inventory** — Reach-by-role (each data role → the ONE canonical component) + every `@lotics/ui/<module>` entry point (incl. `@lotics/ui/vite`'s `loticsOptimizeDeps` + `loticsResolve()` — the pre-bundle list and the whole `resolve` block a custom-code app's `vite.config.ts` imports rather than hand-carries, dev-link included). Read before building any screen; reuse first. |
 | [docs/data_entry.md](./docs/data_entry.md) | Which editing pattern for which job — inline edit, fieldset forms, browser-autofill suppression (search controls only), find-or-create (`Combobox`), line items, handoffs, phased records, billing, tags, dispositions, attachments (the `FilesEditor` COMPOUND — root owns selection/gallery/confirm, you compose the bar, a HOST verb reads `useFilesEditorSelection` — plus the three-way file INTAKE: CTA + `FileDropTarget` + `usePasteFiles`), stage gates, the commit-on-blur vs action-press ordering law (the kit gates the press — `pending_commits`). |
-| [docs/ai_patterns.md](./docs/ai_patterns.md) | AI acts, the human stays in charge — composer, live run feed (`AgentRun`), the one law's split — it turns on WHO supplied the values (machine → a gate: a diff when something is being replaced, a full editable preview when records are being created from a document; human-typed → save-direct + the `ResultHeader` receipt), findings, provenance, confidence; the UI half of the SDK's [ai doc](../app-sdk/docs/ai.md)., the whole run in a dialog (`AgentRunScope`/`AgentRunPane`/`AgentRunActions` — a parked question REPLACES the feed, actions in the footer); **review surfaces compose from atoms** — `DiffValue` (a changed value, droppable in any cell/row/total), `DiffMark` (what happened to the row — ONE circular disc, every surface), `useChangeSet` (accept/reject/undo bookkeeping, no layout) — see [MIGRATION.md](./MIGRATION.md) for the `ChangeReview` family they replace |
+| [docs/ai_patterns.md](./docs/ai_patterns.md) | AI acts, the human stays in charge — composer, live run feed (`AgentRun`), the one law's split — it turns on WHO supplied the values (machine → a gate: a diff when something is being replaced, a full editable preview when records are being created from a document; human-typed → save-direct + the `ResultHeader` receipt), findings, provenance, confidence; the UI half of the SDK's [ai doc](../app-sdk/docs/ai.md)., the whole run in a dialog (`AgentRunScope`/`AgentRunPane`/`AgentRunActions` — a parked question REPLACES the feed, actions in the footer, **Stop** while streaming), **stopping** (`cancel` stops the run, `abort` only stops listening — so closing a dialog must `cancel` or it keeps billing); **review surfaces compose from atoms** — `DiffValue` (a changed value, droppable in any cell/row/total), `DiffMark` (what happened to the row — ONE circular disc, every surface), `useChangeSet` (accept/reject/undo bookkeeping, no layout) — see [MIGRATION.md](./MIGRATION.md) for the `ChangeReview` family they replace |
 | [docs/composition.md](./docs/composition.md) | The design-language contract — canvas + content column, heading altitude (incl. eyebrow vs group lead — a label is one or the other), banded cards, register vs inset rows, master-detail `Drawer` on a LIST screen vs a child collection's row EXPANDING inside a record, view controls, RECORD EXTENT (one page, sections scrolled to and never routed to), color discipline, typography, whitespace, and how to TEST an overlay component (a `Popover`-backed surface never mounts under jsdom). |
 | [docs/templates.md](./docs/templates.md) | The map of `examples/tpl_*.tsx` — what shape each template solves and which to start from (copy + adapt, never import) — plus the record-surface composition rules (pipeline order, static shape, decision budget). |
 
@@ -89,6 +89,28 @@ CURRENT major only — upgrading an app across majors is `MIGRATION.md`.
   back — which is what makes scanning twenty records unaffordable. `TableRow`'s `detail` +
   `expanded` reveal the detail beneath the row; keep the drawer for a heavy form.
   → [catalog.md](./docs/catalog.md).
+- **ONE LEFT EDGE — a row that paints a wash BLEEDS it, and never insets its content.**
+  `marginHorizontal: -ROW_WASH_BLEED` absorbed by an equal `paddingHorizontal` is net zero, so
+  a row's content sits on its container's own edge — level with the headings, labels and prose
+  beside it — while the hover/selection wash still breathes by growing into the parent's
+  padding. `PressableRow` (all variants), `Table`, `ChoiceList`, `ListItem` and `FileRow`
+  already do this, so a screen composed from the kit aligns with **no per-site padding at all**.
+  The moment one component insets instead, every neighbour has to be hand-padded by the same
+  amount to catch up, and that compensation spreads to each new surface built beside it — which
+  is how a `SummaryLine`, a `Clarify` question and a bare table's footer each acquired a
+  padding they should never have needed. **An indent is legible only when something VISIBLE
+  occupies it** — a checkbox, an ordinal, a diff mark. An empty indent is a defect.
+  - **The one exception is a self-contained OVERLAY.** A menu or a selector's popover
+    (`MenuListItem`, `OptionList`) has nothing outside itself to align with, so its rows keep
+    plain padding. Bleeding there would push rows past the popover's own edge.
+  - **A slot holding another component's part takes THAT component's constant**, never a
+    hand-picked number that happens to look close: `AgentRun`'s dot column was 18 while the
+    `Marker` it holds is `NODE` (24), so a 24px dot centred in an 18px column put the whole run
+    rail 3px left of every other band in the dialog. Import the owner's constant.
+  - Inside a `Dialog`, every band reads `dialogGutter(small)` — header, scroll area, footer and
+    any pane a caller drops in. A hand-copied `small ? 16 : 24` is a fifth copy of a number
+    that has to agree with four others.
+  → [composition.md](./docs/composition.md).
 - **Documents get a LIST; images get a GRID.** The discriminator is what identifies the file to
   the person looking for it. A PDF, a Word doc and a spreadsheet are identified by their NAME —
   their thumbnails are a grey page with grey lines on it, identical to every other grey page —

package/MIGRATION.md

@@ -4,6 +4,29 @@ Breaking changes, newest first — normally per major, plus the rare minor that
 anyway (recorded under its exact version). The current contract lives in `AGENTS.md` + `docs/`;
 this file exists only to move an app from one release to the next.
 
+## 30.0.0 — a washed row bleeds; content sits on the container's edge
+
+No API changed. Every register, table and choice list **moves its content 20px
+left** onto its container's own edge, because `PressableRow` (all three
+variants), `ChoiceList` and `Table` now bleed their hover/selection wash outward
+instead of insetting content to make room for it. `ROW_WASH_BLEED` (8) in
+`control_surface` names the rule.
+
+**What you may have to remove.** If a surface of yours was hand-padded to line
+up with a register or a table, that compensation is now a double-correction and
+will sit 20px out. The shapes to look for:
+
+| Compensator | What to do |
+|---|---|
+| A `SummaryLine`, caption or toolbar wrapped in `paddingHorizontal: 20` to match the rows below it | Drop the padding |
+| `CardFooter` used as a **bare table's** footer (no `Card` around it) | Use a `Divider` + a plain row; `CardFooter` carries a *card's* 20px interior gutter |
+| A heading or question hand-padded 8 to match a `ChoiceList`/`Clarify` block | Drop the padding |
+| Anything reading `ROW_GUTTER` for its own spacing | It is 0 now — it means "the table's content gutter", and the wash no longer lives in it |
+
+Tables also fit slightly MORE: the fit math stops reserving 40px of horizontal
+padding, so a column that used to drop at a given width may now survive. Nothing
+that was visible becomes hidden — the change only ever un-drops.
+
 ## 29.0.0 — review surfaces compose from atoms
 
 `ChangeReview` and its family are DELETED, replaced by three layout-free pieces. The

package/docs/ai_patterns.md

@@ -133,6 +133,30 @@ transition — never leave a live button waiting on a network round-trip:
   `useWorkflow` calls are NOT deduped (rapid distinct calls are legitimate), so a workflow CTA
   must disable itself (`loading`) while pending or a double-click writes twice.
 
+## Stopping — the exit is part of the trigger
+
+The press being irreversible is a property of the BUTTON, not of the run. Every streaming surface
+owes the operator a way out, because the reason to leave is usually visible in the first few
+steps: it read the wrong document, it is grouping the wrong way, the brief was wrong. Without an
+exit they pay for a result they already know they will discard.
+
+- **`cancel`, never `abort`.** `useAgentRun` exposes both and they are not synonyms. `abort` stops
+  LISTENING — the run keeps executing server-side and lands in the session history. `cancel` stops
+  the run itself. A user-facing Stop wires to `cancel`; `abort` is for unmount.
+- **Closing a dialog must CANCEL.** This is the one that leaks silently. The hook aborts on
+  unmount by design — right for a page you navigate away from and will come back to, wrong for a
+  dialog just dismissed, where the result is abandoned and every remaining token is spent on
+  nobody. Unmount is not cancellation; the close handler calls `cancel` itself.
+- **Stop lands where the run STARTED**, not on a dead transcript — the intake, with the files, the
+  brief and the answers still there, because the operator stopped in order to change one of them.
+  It is the same destination the parked wizard's Cancel uses; only the verb differs, and it
+  differs truthfully — you STOP something running, you CANCEL something waiting.
+- **The control is PINNED, in the footer.** A feed that follows its newest part scrolls a control
+  placed inside it away from the reader — exactly while the run is doing the thing they want to
+  stop. `AgentRunActions` renders Stop for you; a surface composing its own footers states it
+  directly ([`tpl_item_list`](../examples/tpl_item_list.tsx) and
+  [`tpl_record`](../examples/tpl_record.tsx) respectively).
+
 ## Show the work — `AgentRun`
 
 `AgentRun` (`@lotics/ui/agent_run`) is a live feed of the agent's work as a TIMELINE. The prop is
@@ -424,8 +448,8 @@ Reach for it whenever an agent run happens inside a dialog — which is nearly a
 const run = useAgentRun("intake");            // @lotics/app-sdk
 <AgentRunScope>                                {/* wraps the Dialog, like ClarifyWizardScope */}
   <Dialog …>
-    <AgentRunPane run={run} onCancel={…} />                        {/* content */}
-    <DialogFooter><AgentRunActions run={run} /></DialogFooter>     {/* actions */}
+    <AgentRunPane run={run} onCancel={back} />                              {/* content */}
+    <DialogFooter><AgentRunActions run={run} onStop={back} /></DialogFooter> {/* actions */}
   </Dialog>
 </AgentRunScope>
 ```
@@ -438,8 +462,15 @@ Submit, leaving a live `awaiting_input` run readable and unanswerable until it e
 also swaps `FollowScroll` for `DialogScrollArea` on the park, so the question opens at the top
 rather than wherever the feed was scrolled to.
 
+**Mount `AgentRunActions` wherever the run drives the surface — never gated on one phase.** It
+holds the wizard's verbs while a question is up, **Stop** while the run streams, and nothing once
+it settles; the RUN decides, which is the whole point of handing it the run. A host that names a
+single phase out here duplicates that decision and gets it wrong the moment the bar learns a new
+one — which is precisely how two streaming phases ended up with an empty footer and no way to
+stop.
+
 **`run` is a SHAPE, not an import** (`AgentRunLike`: `status`, `parts`, `pendingChoice`,
-`answerChoice`, `error`; `AgentRunQuestion` names what `pendingChoice` carries, so a template or
+`answerChoice`, `cancel`, `error`; `AgentRunQuestion` names what `pendingChoice` carries, so a template or
 test declares one directly — an option is a label + description and the answer's value IS the
 label, which is the `ask_user_choice` wire shape, so nothing maps between two question types). `useAgentRun()` satisfies it structurally — `@lotics/ui` never depends on
 `@lotics/app-sdk` — which also means a template or test can hand it a plain object and exercise the

package/docs/catalog.md

@@ -1328,7 +1328,13 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 
 - **`mime`** — pure MIME predicates: `isImageMimeType` / `isVideoMimeType` /
   `isAudioMimeType` / `isPdfMimeType` / `isExcelMimeType` / `isCsvMimeType` /
-  `isDocxMimeType` / `isPreviewableMimeType`.
+  `isDocxMimeType` / `isPreviewableMimeType`. Plus
+  **`resolveMimeType(declaredType, filename)`** — what to TREAT a file as. An
+  honestly-declared type is returned untouched; an *uninformative* one (`""`,
+  `application/octet-stream` and friends — what an OS clipboard or drag hands
+  over) is resolved from the filename extension instead, falling back to the
+  declaration when the extension is unknown too. It returns the same answer the
+  server stores, so a surface that filters on it agrees with what gets persisted.
 - **`download`** — `downloadFileFromUrl(url, filename, { credentials? })`: fetch+blob+anchor
   download that works inside sandboxed iframes (where `window.open` is silently dropped);
   `credentials` defaults to `same-origin` — pass `"include"` only for auth-gated same-site

package/docs/composition.md

@@ -122,6 +122,31 @@ without scanning. The heading row is the section's control line — it already c
 and the view controls — so the add belongs on it, in the same spot whether the section holds
 nought or forty.
 
+**Where there IS no heading row, the add has nowhere else to be, so it rides the surface's own
+bar** — an attachment popover, a dialog body, any self-contained widget. That is not an exception
+to the law so much as the same reasoning: the rule exists so the verb sits in ONE place a reader
+can return to, and on a surface with no heading the bar IS that place. `FilesEditorUpload` is for
+exactly this case; inside a section the host puts its own `Button` on the heading instead, because
+`FilesEditor` provides the context and the heading is outside it — and a file widget rendering a
+`SectionHeading` would own something the section owns. Worked both ways in `tpl_record` (Files,
+Photos) and `tpl_task_board` (the attachment popover).
+
+**A header CHECKBOX is legible only when it heads a COLUMN.** A table's select-all works because
+it sits at the same x as every row's box beneath it — the column is what turns a 24px tick into
+"all of these". A grid has no such column, so the same control in a section heading heads
+nothing: it is a transparent 24×24 at radius 6 standing between 40px grounded buttons at radius
+10, off their baseline, differing on every axis at once, and shape is read before meaning. **A
+grid's select-all is a BUTTON** ("Select all" / "Deselect all"), which is what
+`FilesEditorSelectAll` ships. Nothing is lost by giving up the tri-state: `indeterminate` says
+"some", and the `FloatingActionBar` beside it already says WHICH some as an exact count — the
+glyph was approximating a number that was on screen.
+
+While a mode is ON, the heading row holds only that mode's controls; the section's own ADD stands
+down until it is off. Otherwise a `primary` add sits in a row that is entirely about the
+selection, competing with the promoted act in the action bar — two accents on one screen. At rest
+the add returns to the right edge where the law puts it, and drag/paste never stopped working, so
+no path actually closes.
+
 - **Weight is the section's**, not a hedge: a section's add is the act that section offers, so
   `primary`. Don't drop to `secondary` because the list is full — an add that changes weight
   with row count is the fault, not the cure.
@@ -306,9 +331,50 @@ Divider-separated.
 
 | `PressableRow` variant | Shape | Use |
 |---|---|---|
-| `register` (default) | rounded (radius 10) full-width hover/open/`marked` wash; content sits on the 20px gutter so a `Table` header + cells align | THE record list |
-| `bleed` (legacy) | 20px square, `Divider`-separated | only an edge-to-edge data grid that genuinely wants hard rules |
-| `inset` | rounded (radius 8), pulled in from the edge | grouped lists in a padded container (Accordion drill-downs) |
+| `register` (default) | rounded (radius 10) full-width hover/open/`marked` wash | THE record list |
+| `bleed` (legacy) | square wash, `Divider`-separated | only an edge-to-edge data grid that genuinely wants hard rules |
+| `inset` | rounded (radius 8) | grouped lists in a padded container (Accordion drill-downs) |
+
+**A washed row BLEEDS its wash; it never insets its content.** All three variants
+carry `marginHorizontal: -ROW_WASH_BLEED` absorbed by an equal `paddingHorizontal`
+— net zero for layout — so a row's content sits on its container's own edge,
+level with the headings, labels and prose around it, while the wash still gets
+breathing room by growing into the parent's padding. The parent must afford
+`ROW_WASH_BLEED` (8px); every kit container clears it (`Drawer` 20, `Dialog` 24,
+the page canvas 28).
+
+**A bar of verbs is TWO groups, not a row of peers.** `FloatingActionBar` separates its own
+STATE (the count and Clear — what is picked, and how to un-pick it) from the ACTS
+(`children`) with the section boundary getting the most air (20) and each group sitting on the
+action gap (8). Spaced uniformly, four controls read as four equal things, and the emphasis
+ladder between them — muted for a dismiss, `danger` for a destructive act, `primary` for the
+promoted one — stops reading as a ladder and starts reading as arbitrary variety. The colours
+are not the defect when this happens; the spacing is. Group first, and the ladder is then read
+WITHIN the acts, where it means something.
+
+The grouping pays a second time at PHONE width, which is why it is structure and not styling. A
+count plus an escape plus three verbs is ~520px of content — wider than a 375 screen — so the
+bar wraps; because `state` and `acts` are each a nowrap row, the ONLY break available is the
+boundary between them. The line splits exactly where the meaning does (what is picked / what to
+do with it) instead of orphaning one verb from the ladder it belongs to. A row of five peers has
+no such seam and breaks wherever it runs out of room.
+
+**Two exceptions, both real.** A self-contained OVERLAY — a menu, a selector's popover
+(`MenuListItem`, `OptionList`) — has nothing outside itself to align with, so its rows keep
+plain padding; bleeding there would push them past the popover's own edge. And a slot that
+holds another component's PART takes that component's constant, never a hand-picked number:
+`AgentRun`'s dot column was 18 while the `Marker` it holds is `NODE` (24), so a 24px dot
+centred in an 18px column put the whole run rail 3px outside the surface's edge — every row
+wrong by the same amount, so it read as internally consistent and nothing flagged it.
+
+The register used to pad 20 WITHOUT the negative margin, and the cost was not
+the 20px — it was that everything nearby had to be hand-padded by the same 20 to
+line up with it. A `Table`'s header band, its static rows and its expanded detail
+all inherited the number; a `SummaryLine` above the register got it at the call
+site; a bare table's footer borrowed `CardFooter` and picked up a *card's*
+interior gutter. **An indent is legible only when something VISIBLE occupies it**
+— a checkbox, an ordinal, a diff mark. An empty one is a defect, and the
+compensation it forces spreads to every new surface that sits beside it.
 
 The `Divider` BETWEEN rows is the resting separation; the wash is the hover state. `selected`
 shows a zinc-100 highlight; `marked` (a bulk-ticked row) a resting blue-50 tint.
@@ -419,7 +485,7 @@ and the "detail" of a list belongs in a `Drawer`/sheet, not a second column):
    band, plus a bottom-pinned `<FloatingActionBar count label onClear>` carrying the bulk
    action(s) while ≥ 1 row is ticked (it renders nothing at count 0); a row that can't take the
    action has no usable checkbox. Bar weight gradient, left → right: the built-in Clear is muted
-   (the quietest act), destructive bulk = `danger-secondary` + icon, secondary bulk = `secondary`
+   (the quietest act), destructive bulk = `danger` + icon, secondary bulk = `secondary`
    + icon, ONE primary CTA last — never repeat the count in a CTA title; the bar's label already
    carries it.
 
@@ -504,7 +570,16 @@ All view controls are 40px tall (`CONTROL_HEIGHT`), `sm` labels, in ONE wrapping
   action `primary`; it sits at a different altitude than the form's one terminal commit.)
 - **Button labels carry no trailing ellipsis** ("Assign", not "Assign…"). **Button color is
   VALENCE/RISK, never category**: the ladder `muted < secondary < primary` is the emphasis axis;
-  `danger` (and its quieter `danger-secondary`) marks destructive — that's the whole axis. A
+  `danger` (and its quieter `danger-secondary`) marks destructive — that's the whole axis.
+  **Which of the two is decided by the COMPANY the button keeps, never by how destructive the
+  act is.** Among other BUTTONS — a bar, a form's action row, a toolbar — use `danger`: it
+  carries a ground (red-100) exactly where `secondary` carries zinc-100, so every act in the row
+  keeps ONE shape and only the ink moves; the ladder is then legible as a ladder. Drop a
+  groundless `danger-secondary` in there and the destructive verb is the one control with no box
+  — a shape difference, which a reader parses before colour and reads as an accident, and the
+  row stops looking designed (this is what "four buttons with different shapes" is, every time).
+  Among TEXT — a row's trailing verb, a `Callout`'s action, a dialog's tertiary — use
+  `danger-secondary`, because there a filled box is the thing that looks pasted on. A
   fill-less `Button` (`danger-secondary`, `muted`, un-colored) shows no box, so its optical edge is
   its INK, inset by its padding: **never align one to a column of TEXT** — it reads as indented
   against every label starting on the true edge. The answer is to move the act, not to invent a

package/docs/data_entry.md

@@ -581,6 +581,19 @@ intake paths, all wired to ONE handler:
    modal dialog with no wrapper). Scope it with `enabled` ("while this record/dialog is open");
    a paste with no acceptable file is left alone, so Ctrl+V in a text field still pastes text.
 
+**What `accept` is matched against, and the one thing a paste cannot do.** A pattern is an
+extension (`.pdf`), a wildcard type (`image/*`) or an exact MIME. A file is matched on
+`resolveMimeType(file.type, file.name)` — its own declared type when that type says something,
+and what its EXTENSION says when it doesn't. That fallback is not a nicety: a file copied in
+Finder/Explorer and pasted arrives with real bytes and a real filename but an uninformative
+type — `""`, or just as often `application/octet-stream`, the same non-answer wearing the shape
+of one. Judging it on that reads silence as "not a PDF", the file is discarded, and since an
+unacceptable paste is deliberately left alone, the user sees nothing happen at all. Matching on
+the resolved type also means the surface agrees with what the server will store. Separately,
+some clipboards carry only a file *reference* (a path/URL, no bytes): there is nothing to
+upload and no API that can go read it, so those pastes cannot work by any means — dragging the
+file is the path that always does.
+
 **Paste routing (focus, then stack).** When two file targets are enabled on the same layer,
 the paste goes to the TOP-MOST one whose `region` contains focus (`document.activeElement`) —
 so two peer file sections each win while the user is working in them, never "last-mounted

package/examples/tpl_item_list.tsx

@@ -7,7 +7,6 @@ import { ActionMenu, type ActionMenuItem } from "@lotics/ui/action_menu";
 import { Alert } from "@lotics/ui/alert";
 import { Badge } from "@lotics/ui/badge";
 import { Button } from "@lotics/ui/button";
-import { CardFooter } from "@lotics/ui/card";
 import { CheckboxInput } from "@lotics/ui/checkbox_input";
 import { DetailRow, DetailTable } from "@lotics/ui/detail_row";
 import { Divider } from "@lotics/ui/divider";
@@ -571,6 +570,11 @@ function EnterDataDialog({ open, onOpenChange, seedDocs, onCreate, onCreateMany
       );
       setPhase("running");
     },
+    // A REAL app passes `useAgentRun().cancel` — which stops the run on the
+    // SERVER, not just locally. Here the run IS the reveal timer below, and that
+    // timer is gated on `phase`, so leaving the streaming phase is what stops
+    // it; there is nothing else for this mock to tear down.
+    cancel: () => {},
   };
   useEffect(() => {
     if (phase !== "analyze" && phase !== "running") return;
@@ -624,7 +628,17 @@ function EnterDataDialog({ open, onOpenChange, seedDocs, onCreate, onCreateMany
     setDienThoai("");
     setPhi(null);
   };
-  const close = () => { onOpenChange(false); reset(); };
+  /**
+   * Closing CANCELS — it does not merely stop watching.
+   *
+   * `useAgentRun` aborts on unmount, and its `abort` is deliberately
+   * local-only: the run keeps executing server-side so it survives navigating
+   * away and lands in the session history. That is right for a page you will
+   * come back to, and wrong for a dialog you just dismissed — the operator has
+   * abandoned the result and every remaining token is spent on nobody. So the
+   * close path calls `cancel` explicitly. Unmount is not cancellation.
+   */
+  const close = () => { run.cancel(); onOpenChange(false); reset(); };
 
   /**
    * THE COMMIT. It writes what is on screen — the edited drafts, minus the
@@ -955,9 +969,22 @@ function EnterDataDialog({ open, onOpenChange, seedDocs, onCreate, onCreateMany
             <Button title="Back" color="secondary" onPress={() => { setKhach(""); setDienThoai(""); setPhi(null); setPhase("intake"); }} />
             <Button title="Create record" color="primary" disabled={khach.trim() === ""} onPress={createManual} />
           </DialogFooter>
-        ) : phase === "clarify" ? (
+        ) : phase === "analyze" || phase === "clarify" || phase === "running" ? (
           <DialogFooter>
-            <AgentRunActions run={run} />
+            {/* EVERY run-driven phase, not just `clarify`. This branch used to
+                name that one phase, because `AgentRunActions` only ever held the
+                wizard and there was nothing to show while the feed streamed —
+                so the two streaming phases had an empty footer and no way to
+                stop. The component's contract is that the HOST mounts it
+                wherever the run drives the surface and the RUN decides what it
+                holds; gating it by phase out here duplicates that decision and
+                gets it wrong the moment the run learns a new one.
+
+                `onStop` is the SAME handler the pane's `onCancel` gets: stopping
+                a streaming run and abandoning a parked question both put the
+                operator back at the intake they started from, with their files
+                and their answers still there to retry from. */}
+            <AgentRunActions run={run} onStop={() => setPhase("intake")} />
           </DialogFooter>
         ) : phase === "preview" ? (
           <DialogFooter>
@@ -1252,7 +1279,13 @@ export function TplItemList() {
               <EmptyState message="No matching records" hint="Try another keyword or switch status" />
             </>
           ) : null}
-          <CardFooter>
+          {/* NOT `CardFooter` — that is a Card PART, and its 20px is the card's
+              interior gutter. There is no card here, so it put the totals 20px
+              right of the register's own rows and of the toolbar above them.
+              A bare table's footer is a divider and a row; borrowing furniture
+              from a container that is not there is what put it out of true. */}
+          <Divider />
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 12, paddingVertical: 12 }}>
             <Text size="sm" color="muted" tabular style={{ flex: 1 }}>
               {`${filtered.length} records, ${formatMoney(tongPhi)} in fees`}
             </Text>
@@ -1264,7 +1297,7 @@ export function TplItemList() {
               total={filtered.length}
               onPageChange={setPage}
             />
-          </CardFooter>
+          </View>
         </View>
       </View>
     </ScrollView>