@lotics/ui 29.2.0 → 30.0.0

package/examples/tpl_record.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useRef, useState, type ReactNode } from "react";
+import { Fragment, useEffect, useRef, useState, type ReactNode, useMemo } from "react";
 import { ScrollView, View } from "react-native";
 import { Text } from "@lotics/ui/text";
 import { colors } from "@lotics/ui/colors";
@@ -45,6 +45,7 @@ import { EmptyState } from "@lotics/ui/empty_state";
 import { FormField } from "@lotics/ui/form_field";
 import { TextInputField } from "@lotics/ui/text_input_field";
 import { FileThumbnail, type DisplayFile } from "@lotics/ui/file_thumbnail";
+import { FileThumbnailGrid } from "@lotics/ui/file_thumbnail_grid";
 import { FileGalleryModal } from "@lotics/ui/file_gallery_modal";
 import { DangerZone } from "@lotics/ui/danger_zone";
 import { FileRow } from "@lotics/ui/file_row";
@@ -423,6 +424,18 @@ const DOCS: Doc[] = [
   // an IMAGE file — the register renders it as a real square thumbnail (the
   // SVG data URI stands in for the stored photo URL a live app serves)
   { id: "f5", name: "delivery-photo.jpg", mimeType: "image/jpeg", kind: "JPG", sizeKB: 1424, added: "30 Jun", addedAt: 630, url: MOCK_PHOTO_URL },
+  // The hand-over set. EIGHT photos, not one: a grid with a single tile does not
+  // exercise a grid — it never wraps, its tiles are never told apart by content,
+  // and a Select mode over one item reads as absurd. A photo set on a real
+  // consignment is a dozen frames of the same yard from different angles, which
+  // is the case the surface has to survive.
+  { id: "p1", name: "hạ-container-01.jpg", mimeType: "image/jpeg", kind: "JPG", sizeKB: 820, added: "30 Jun", addedAt: 630, url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMjAnIGhlaWdodD0nMzIwJz48cmVjdCB3aWR0aD0nMzIwJyBoZWlnaHQ9JzMyMCcgZmlsbD0nI2JmZGJmZScvPjxyZWN0IHk9JzIxMCcgd2lkdGg9JzMyMCcgaGVpZ2h0PScxMTAnIGZpbGw9JyNhOGEyOWUnLz48cmVjdCB4PScyMCcgeT0nMTUwJyB3aWR0aD0nMTI0JyBoZWlnaHQ9JzYwJyBmaWxsPScjZGMyNjI2Jy8+PHJlY3QgeD0nMTUyJyB5PScxNTAnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyMyNTYzZWInLz48cmVjdCB4PSc4NicgeT0nODgnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyNkYzI2MjYnIG9wYWNpdHk9JzAuNycvPjwvc3ZnPg==" },
+  { id: "p2", name: "hạ-container-02.jpg", mimeType: "image/jpeg", kind: "JPG", sizeKB: 957, added: "30 Jun", addedAt: 630, url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMjAnIGhlaWdodD0nMzIwJz48cmVjdCB3aWR0aD0nMzIwJyBoZWlnaHQ9JzMyMCcgZmlsbD0nI2ZlZDdhYScvPjxyZWN0IHk9JzIxMCcgd2lkdGg9JzMyMCcgaGVpZ2h0PScxMTAnIGZpbGw9JyM3ODcxNmMnLz48cmVjdCB4PScyMCcgeT0nMTUwJyB3aWR0aD0nMTI0JyBoZWlnaHQ9JzYwJyBmaWxsPScjMDg5MWIyJy8+PHJlY3QgeD0nMTUyJyB5PScxNTAnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyMxNTVlNzUnLz48cmVjdCB4PSc4NicgeT0nODgnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyMwODkxYjInIG9wYWNpdHk9JzAuNycvPjwvc3ZnPg==" },
+  { id: "p3", name: "seal-truoc-khi-keo.jpg", mimeType: "image/jpeg", kind: "JPG", sizeKB: 1094, added: "30 Jun", addedAt: 630, url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMjAnIGhlaWdodD0nMzIwJz48cmVjdCB3aWR0aD0nMzIwJyBoZWlnaHQ9JzMyMCcgZmlsbD0nI2JiZjdkMCcvPjxyZWN0IHk9JzIxMCcgd2lkdGg9JzMyMCcgaGVpZ2h0PScxMTAnIGZpbGw9JyM1NzUzNGUnLz48cmVjdCB4PScyMCcgeT0nMTUwJyB3aWR0aD0nMTI0JyBoZWlnaHQ9JzYwJyBmaWxsPScjYjQ1MzA5Jy8+PHJlY3QgeD0nMTUyJyB5PScxNTAnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyM3YzJkMTInLz48cmVjdCB4PSc4NicgeT0nODgnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyNiNDUzMDknIG9wYWNpdHk9JzAuNycvPjwvc3ZnPg==" },
+  { id: "p4", name: "cont-rong-mat-truoc.jpg", mimeType: "image/jpeg", kind: "JPG", sizeKB: 1231, added: "01 Jul", addedAt: 701, url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMjAnIGhlaWdodD0nMzIwJz48cmVjdCB3aWR0aD0nMzIwJyBoZWlnaHQ9JzMyMCcgZmlsbD0nI2U5ZDVmZicvPjxyZWN0IHk9JzIxMCcgd2lkdGg9JzMyMCcgaGVpZ2h0PScxMTAnIGZpbGw9JyNhMWExYWEnLz48cmVjdCB4PScyMCcgeT0nMTUwJyB3aWR0aD0nMTI0JyBoZWlnaHQ9JzYwJyBmaWxsPScjYmUxMjNjJy8+PHJlY3QgeD0nMTUyJyB5PScxNTAnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyMxZTI5M2InLz48cmVjdCB4PSc4NicgeT0nODgnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyNiZTEyM2MnIG9wYWNpdHk9JzAuNycvPjwvc3ZnPg==" },
+  { id: "p5", name: "cont-rong-ben-trong.jpg", mimeType: "image/jpeg", kind: "JPG", sizeKB: 1368, added: "01 Jul", addedAt: 701, url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMjAnIGhlaWdodD0nMzIwJz48cmVjdCB3aWR0aD0nMzIwJyBoZWlnaHQ9JzMyMCcgZmlsbD0nI2ZlY2FjYScvPjxyZWN0IHk9JzIxMCcgd2lkdGg9JzMyMCcgaGVpZ2h0PScxMTAnIGZpbGw9JyM0NDQwM2MnLz48cmVjdCB4PScyMCcgeT0nMTUwJyB3aWR0aD0nMTI0JyBoZWlnaHQ9JzYwJyBmaWxsPScjMGY3NjZlJy8+PHJlY3QgeD0nMTUyJyB5PScxNTAnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyMzMzQxNTUnLz48cmVjdCB4PSc4NicgeT0nODgnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyMwZjc2NmUnIG9wYWNpdHk9JzAuNycvPjwvc3ZnPg==" },
+  { id: "p6", name: "bien-so-xe.jpg", mimeType: "image/jpeg", kind: "JPG", sizeKB: 1505, added: "01 Jul", addedAt: 701, url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMjAnIGhlaWdodD0nMzIwJz48cmVjdCB3aWR0aD0nMzIwJyBoZWlnaHQ9JzMyMCcgZmlsbD0nI2ZlZjA4YScvPjxyZWN0IHk9JzIxMCcgd2lkdGg9JzMyMCcgaGVpZ2h0PScxMTAnIGZpbGw9JyM1MjUyNTInLz48cmVjdCB4PScyMCcgeT0nMTUwJyB3aWR0aD0nMTI0JyBoZWlnaHQ9JzYwJyBmaWxsPScjN2UyMmNlJy8+PHJlY3QgeD0nMTUyJyB5PScxNTAnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyMxZTNhOGEnLz48cmVjdCB4PSc4NicgeT0nODgnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyM3ZTIyY2UnIG9wYWNpdHk9JzAuNycvPjwvc3ZnPg==" },
+  { id: "p7", name: "bang-ke-giao-nhan.jpg", mimeType: "image/jpeg", kind: "JPG", sizeKB: 1642, added: "02 Jul", addedAt: 702, url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMjAnIGhlaWdodD0nMzIwJz48cmVjdCB3aWR0aD0nMzIwJyBoZWlnaHQ9JzMyMCcgZmlsbD0nI2E1ZjNmYycvPjxyZWN0IHk9JzIxMCcgd2lkdGg9JzMyMCcgaGVpZ2h0PScxMTAnIGZpbGw9JyM3MzczNzMnLz48cmVjdCB4PScyMCcgeT0nMTUwJyB3aWR0aD0nMTI0JyBoZWlnaHQ9JzYwJyBmaWxsPScjYzI0MTBjJy8+PHJlY3QgeD0nMTUyJyB5PScxNTAnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyMwNjRlM2InLz48cmVjdCB4PSc4NicgeT0nODgnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyNjMjQxMGMnIG9wYWNpdHk9JzAuNycvPjwvc3ZnPg==" },
 ];
 
 const EXTRACT_STEPS: ScriptStep[] = [
@@ -1269,7 +1282,32 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
   // ── the document desk (see the module banner above; the record's files ARE
   //    the desk's register)
   const [files, setFiles] = useState<Doc[]>(DOCS);
+  // The photo subset of the SAME collection — one list, two surfaces. Derived
+  // rather than a second state, or the two sections would drift the moment
+  // anything is added to one of them.
+  const photoDocs = useMemo(() => files.filter((f) => f.mimeType.startsWith("image/")), [files]);
+  /**
+   * SELECT MODE — for the grid only, and only because a grid has nowhere free
+   * to put a checkbox.
+   *
+   * The Files LIST leaves its checkboxes on permanently: a table already has a
+   * leading column, so they cost nothing and selection is always one tap away.
+   * A photo tile has no such column — a permanent checkbox sits ON the content,
+   * and worse it splits a 96px tile into two hit targets (tap the tile to open,
+   * tap the box to select) exactly where fingers are least precise. So the grid
+   * gets a mode instead: the default view is photos, and one visible control
+   * switches it to picking. Hover-to-reveal was the other candidate and it is
+   * not a design — it simply does not exist on touch, and long-press is a
+   * gesture nothing on screen advertises.
+   *
+   * The selection itself is SHARED with the Files table rather than a second
+   * one, because these are the same records seen two ways. Two selections would
+   * mean two `FloatingActionBar`s racing for the same corner.
+   */
+  const [pickingPhotos, setPickingPhotos] = useState(false);
   const sel = useSelection();
+  const photoIds = useMemo(() => photoDocs.map((p) => p.id), [photoDocs]);
+  const allPhotosPicked = sel.allSelected(photoIds);
 
   // Use AI — one entry off the selection, forking into the two document tasks.
   const [aiOpen, setAiOpen] = useState(false);
@@ -1321,6 +1359,25 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
   };
   // The upload path's save: pending picked files land on the record only here.
   const commitUpload = () => setFiles((fs) => [...fs, ...picked.filter((p2) => !fs.some((f) => f.id === p2.id))]);
+  /**
+   * STOP the run and go back to the intake — the files, the brief and the task
+   * choice are all still there, because the operator stopped to change one of
+   * them. A real app cancels the run itself first:
+   *   run.cancel();          // `useAgentRun().cancel` — stops it SERVER-side
+   * Here the run is the reveal timer below, which is gated on `phase`, so
+   * leaving "running" is what stops it.
+   */
+  const stopRun = () => { setPhase("fork"); setRevealed(0); setTask(null); };
+  /**
+   * Closing CANCELS the run — it does not merely stop watching it.
+   *
+   * `useAgentRun` aborts on unmount, and its `abort` is local-only BY DESIGN:
+   * the run keeps executing server-side so it survives navigating away and
+   * lands in the session history. Right for a page you will return to, wrong
+   * for a dialog just dismissed — the result has been abandoned and every
+   * remaining token is spent on nobody. So a real app calls `run.cancel()`
+   * here. Unmount is not cancellation.
+   */
   const closeAi = () => {
     setAiOpen(false); setTask(null); setPhase("fork"); setRevealed(0); setUploadFlow(false); setBrief(""); setTaskChoice(null);
     setCarrierRef(CARRIER_REF_PROPOSED); setVessel(VESSEL_PROPOSED); setConsignee(null); setConsigneePick(null); setCustomConsignee(""); setGrossWeight("1,540"); lines.reset(); setNewItem("Corner protectors, foam"); setNewQty("400"); setEditedQty("1,450"); fields.reset();
@@ -1810,6 +1867,7 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
     // there.
     { key: "comments", label: "Comments", icon: "message-square" },
     { key: "files", label: "Files", icon: "folder-closed" },
+    { key: "photos", label: "Photos", icon: "image" },
     { key: "transport", label: "Transport", icon: "map-pin" },
     { key: "fees", label: "Fees", icon: "receipt" },
     { key: "billing", label: "Billing", icon: "credit-card" },
@@ -1817,9 +1875,15 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
     { key: "receipt", label: "Delivery receipt", icon: "log-in" },
     { key: "danger", label: "Danger zone", icon: "circle-alert" },
   ] as const;
-  // Kept in step with `SECTIONS` above by hand — a key added there and forgotten
-  // here type-errors at every `nav.register` call, which is the cheap failure.
-  const nav = useSectionNav(["progress", "general", "comments", "files", "transport", "fees", "billing", "docset", "receipt", "danger"] as const);
+  // The explicit `<SecKey>` is what keeps this list and `SECTIONS` in step, and
+  // it is not decoration. Inferred, this tuple defines its own key type and is
+  // checked against nothing — so a section registered and scrolled to, but never
+  // added to `SECTIONS`, compiles clean and simply has no rail row. That is the
+  // silent direction, and it is the one that happened: Photos shipped reachable
+  // by scroll and invisible in the outline. Bound to `SecKey`, a key here that
+  // `SECTIONS` does not carry stops being assignable, so the omission is a
+  // compile error instead of a missing row nobody notices.
+  const nav = useSectionNav<SecKey>(["progress", "general", "comments", "files", "photos", "transport", "fees", "billing", "docset", "receipt", "danger"] as const);
   // ONE record, ONE page. A section is a place you SCROLL to, never a
   // destination you swap to: routing a record was tried here and lost, because
   // every fix it needed rebuilt the whole-record view in miniature — a dot to
@@ -2613,6 +2677,111 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
         </Section>
         </View>
 
+        {/* PHOTOS — the same collection, the other SURFACE.
+
+            Files above is a row LIST because a shipping document is identified by
+            its NAME: a PDF thumbnail is a grey page identical to every other grey
+            page, so a grid of them is a wall of one tile. A photo is identified
+            by its CONTENT — `IMG_4471.jpg` tells nobody anything — so the tile IS
+            the identity and a grid puts twelve on screen at once. Same record,
+            same verbs, different surface, decided by what the reader recognises.
+            (AGENTS.md: documents get a LIST, images get a GRID.)
+
+            The ADD rides the heading row, right edge, exactly as it does on Files
+            and Fees — a section's add sits in the same spot whether the section
+            holds nought or forty. Note it is a plain `Button` + `pickFiles`, not
+            `FilesEditorUpload`: that verb reads the `FilesEditor` context, and the
+            heading is OUTSIDE the editor by construction, so a compound's own
+            upload button can never reach the one place the law puts it. */}
+        <View onLayout={nav.register("photos")}>
+        <Section>
+          <SectionHeading>
+            <SectionHeadingTitle description="Condition and hand-over photos. Drag, paste, or click to add.">Photos</SectionHeadingTitle>
+            {/* Secondary LEFT of primary — the same order every action row in the
+                system uses, so the section's add stays on the right edge where
+                the add-placement law puts it and the mode toggle never displaces
+                it. In mode, the toggle becomes the way OUT; the bulk verbs never
+                come here, because a verb that needs a selection has no meaning
+                until there is one. */}
+            {/* GROUPED, so the heading's 10px slot gap separates the TITLE from
+                the pair rather than the two buttons from each other. A pair of
+                buttons is an action group and takes the action gap (8) every
+                other action row in the kit uses — a Dialog footer, a comment
+                composer, the wizard. Wrapping is composition, not the per-site
+                padding this kit spent the day deleting: it states that these two
+                belong together, rather than compensating for someone else's
+                geometry. */}
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+              {/* SELECT ALL, in mode only — the same control the Files table
+                  carries in its header, at the grid's equivalent surface. A grid
+                  has no header row to head its tiles, so the section heading is
+                  where it goes; without it, picking 40 photos is 40 taps while
+                  the list beside it does the job in one. Reads all/some/none
+                  from the SAME `sel` the table uses, so the two sections cannot
+                  disagree about what is picked. */}
+              {/* SELECT ALL is a BUTTON here, not the checkbox the Files table
+                  header carries, and the difference is not a preference. A bare
+                  header checkbox is legible only when it HEADS A COLUMN — the
+                  table's sits at the same x as every row's box beneath it, which
+                  is what makes a 24px tick in a header row read as "all of
+                  these". A grid has no such column, so the same control in a
+                  heading row heads nothing: a 24×24 transparent 6px-radius tick
+                  standing between two 40px grounded 10px-radius buttons, off
+                  their baseline by 8px, differing on every axis at once. Shape
+                  is read before meaning, so it read as a stray.
+                  Nothing is lost by dropping the tri-state: `indeterminate` said
+                  "some", and the action bar already says WHICH some, as an exact
+                  count. A glyph was approximating a number that was on screen. */}
+              {pickingPhotos ? (
+                <Button
+                  title={allPhotosPicked ? "Deselect all" : "Select all"}
+                  color="secondary"
+                  onPress={() => sel.setAll(photoIds, !allPhotosPicked)}
+                />
+              ) : null}
+              <Button
+                title={pickingPhotos ? "Done" : "Select"}
+                color="secondary"
+                onPress={() => {
+                  if (pickingPhotos) sel.setAll(photoIds, false);
+                  setPickingPhotos(!pickingPhotos);
+                }}
+              />
+              {/* The ADD stands down while picking. Not decluttering for its own
+                  sake: in select mode this row is ABOUT the selection, and the
+                  section's own act is a third kind of thing in a two-control
+                  row — which is how the primary ended up competing with the one
+                  in the action bar (`Use AI`), two accents on one screen. At
+                  rest the add is back on the right edge where the placement law
+                  puts it, and while picking, drag/paste still adds, so the path
+                  is never actually closed. */}
+              {pickingPhotos ? null : (
+                <Button
+                  title="Add photos"
+                  color="primary"
+                  onPress={() => {
+                    void pickFiles({ accept: "image/*", multiple: true }).then(intakeFiles);
+                  }}
+                />
+              )}
+            </View>
+          </SectionHeading>
+          <FileThumbnailGrid
+            files={photoDocs.map(toDisplay)}
+            minItemWidth={104}
+            // Checkboxes exist only in mode — `selectedIds` undefined is the
+            // clean preview. ONE meaning per tap: out of mode a tile opens, in
+            // mode it picks.
+            selectedIds={pickingPhotos ? sel.selected : undefined}
+            onFilePress={(f) =>
+              pickingPhotos
+                ? sel.toggle(f.id)
+                : openPreview(photoDocs, photoDocs.findIndex((p: Doc) => p.id === f.id))
+            }
+          />
+        </Section>
+        </View>
+
         {/* TRANSPORT — the DENSE section, and the honest one. Two groups of ~10
             fields, three record references, mixed editor types, a derived
             warning, one "Show more".
@@ -3509,7 +3678,7 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
 
     {/* ── the document desk's overlays */}
     <FloatingActionBar count={sel.count} label={sel.count === 1 ? "file selected" : "files selected"} onClear={sel.clear}>
-      <Button title="Remove" color="danger-secondary" icon="trash" onPress={removeSelected} />
+      <Button title="Remove" color="danger" icon="trash" onPress={removeSelected} />
       <Button title="Download" color="secondary" icon="download" onPress={() => { /* a real app zips or opens each selected file (openExternal) */ }} />
       <Button title="Use AI" color="primary" onPress={openAi} />
     </FloatingActionBar>
@@ -3814,7 +3983,19 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
         ) : null}
       </DialogScrollArea>
       )}
-      {phase === "fork" ? (
+      {phase === "running" ? (
+        /* The one phase that used to have NO footer, which meant a run could not
+           be stopped — the operator who sees from the first step that it is
+           reading the wrong document had to sit through the whole thing and pay
+           for it. Stop belongs HERE rather than under the transcript because the
+           feed follows its newest part: a control inside it scrolls away exactly
+           while the run is doing the thing they want to stop. `AgentRunActions`
+           renders the same button for a pane-based surface (tpl_item_list); this
+           dialog composes its own footers per phase, so it states it directly. */
+        <DialogFooter>
+          <Button title="Stop" color="secondary" onPress={stopRun} />
+        </DialogFooter>
+      ) : phase === "fork" ? (
         <DialogFooter>
           {uploadFlow ? <Button title="Save files only" color="muted" onPress={() => { commitUpload(); closeAi(); }} /> : <Button title="Cancel" color="muted" onPress={closeAi} />}
           <Button

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "29.2.0",
+  "version": "30.0.0",
   "type": "module",
   "exports": {
     "./vite": {
@@ -324,6 +324,7 @@
     "test": "vitest run"
   },
   "devDependencies": {
+    "@lotics/shared": "*",
     "@types/react-dom": "~19.2.2",
     "@vitejs/plugin-react": "^4.3.4",
     "lucide-react": "^0.562.0",

package/src/agent_run.tsx

@@ -9,6 +9,7 @@ import { Markdown } from "./markdown";
 import { JsonPanel, stringifyData } from "./json_panel";
 import { PressableHighlight } from "./pressable_highlight";
 import { Marker, type StepStatus } from "./stepper";
+import { NODE } from "./stepper_layout";
 import { AnimationFadeIn } from "./animation_fade_in";
 import { CONTROL_HEIGHT, CONTROL_RADIUS } from "./control_surface";
 import { useLoticsLocale, type LoticsLocale } from "./locale";
@@ -498,7 +499,13 @@ const styles = StyleSheet.create({
     marginHorizontal: -8,
     paddingHorizontal: 8,
   },
-  dotCol: { width: 18, alignItems: "center" },
+  // NODE, not a local 18. The dot IS a stepper `Marker` (exported from
+  // `stepper` precisely so this feed reuses the same one), and a Marker is
+  // NODE across. An 18px column centring a 24px disc overflows 3px each side,
+  // so the whole dot rail sat 3px LEFT of the surface's own edge — every other
+  // band in a dialog lined up and the run did not. Read the owner's constant
+  // rather than re-deriving a width that has to match it.
+  dotCol: { width: NODE, alignItems: "center" },
   rowBody: { flex: 1 },
   // Reasoning body aligns under the "Thinking" label (past the dot column + gap).
   reasoning: { paddingLeft: 28, paddingBottom: 4 },

package/src/agent_run_pane.tsx

@@ -1,11 +1,12 @@
 import { useCallback, useMemo, type ReactNode } from "react";
 import { View } from "react-native";
 import { AgentRun, type AgentRunProps } from "./agent_run";
+import { Button } from "./button";
+import { useLoticsLocale } from "./locale";
 import type { AgentUIPart } from "./agent_transform";
 import { ClarifyWizard, ClarifyWizardActions, ClarifyWizardScope, type ClarifyWizardAnswer } from "./clarify_wizard";
-import { DialogScrollArea } from "./dialog";
+import { DialogScrollArea, useDialogGutter } from "./dialog";
 import { FollowScroll } from "./follow_scroll";
-import { useContainerSize } from "@lotics/ui/size_boundary";
 
 /**
  * What this pair needs from a run — structurally the shape `useAgentRun()`
@@ -36,6 +37,17 @@ export interface AgentRunLike {
   /** Non-null exactly while parked. */
   pendingChoice: { questions: AgentRunQuestion[] } | null;
   answerChoice: (answers: { value: string; custom: boolean }[]) => Promise<unknown>;
+  /**
+   * STOP the run — server-side, not just locally. `useAgentRun().cancel` is
+   * exactly this; do NOT pass its `abort`, which detaches the listener and
+   * leaves the run executing (and billing) to completion.
+   *
+   * Without this the hook's capability was unreachable through the pane, so
+   * every surface built on it could only wait a run out. A long extraction is
+   * the case that matters: the operator sees from the first steps that it read
+   * the wrong document, and the only exit was to sit through it.
+   */
+  cancel: () => void;
   error: string | null;
 }
 
@@ -64,7 +76,12 @@ export interface AgentRunPaneProps {
  */
 export function AgentRunPane(props: AgentRunPaneProps) {
   const { run, labelForCall, renderToolOutput, onCancel } = props;
-  const { small } = useContainerSize();
+  // The DIALOG's gutter, not this pane's own container measurement. Asking
+  // `useContainerSize()` here answered "small" for a 760px dialog while the
+  // header, scroll area and footer asked the SCREEN and answered "not small" —
+  // two honest answers to one question, and the run's rows landed 8px left of
+  // the dialog's own title. One decision, published by the Dialog, read here.
+  const gutter = useDialogGutter();
   const pending = run.pendingChoice;
 
   // Mapped once per question set, not per render: the wizard keys its per-step
@@ -100,7 +117,10 @@ export function AgentRunPane(props: AgentRunPaneProps) {
   // deliberate — remounting opens the question at the top rather than wherever
   // the feed happened to be scrolled to.
   return (
-    <FollowScroll contentContainerStyle={{ paddingBottom: 24, paddingHorizontal: small ? 16 : 24 }}>
+    // The dialog's OWN gutter, read rather than re-derived: this pane sits as a
+    // band among the dialog's header and footer, and a hand-copied `small ? 16 :
+    // 24` here is a fifth copy of a number that has to agree with four others.
+    <FollowScroll contentContainerStyle={{ paddingBottom: 24, paddingHorizontal: gutter }}>
       {/* No empty-state slot on purpose. `AgentRun` renders its own breathing
           "Starting…" row while streaming with zero parts, localized through the
           `agentRun` locale slice — and ai_patterns states the law outright:
@@ -118,17 +138,42 @@ export function AgentRunPane(props: AgentRunPaneProps) {
 }
 
 /**
- * The run's action bar, for a `DialogFooter`. Renders the wizard's
- * Cancel/Back/Next/Submit while a question is up and NOTHING otherwise, so the
- * host can mount it unconditionally and let the run decide.
+ * The run's action bar, for a `DialogFooter`. The run decides what it holds, so
+ * the host mounts it unconditionally: the wizard's Cancel/Back/Next/Submit
+ * while a question is up, **Stop** while the run is streaming, nothing once it
+ * has settled.
  *
- * Pinned outside the scroller is the point: no length of question can push
- * Submit out of reach.
+ * Pinned outside the scroller is the point, and it is what decides that Stop
+ * lives here rather than under the transcript: the feed FOLLOWS its newest part,
+ * so a control inside it scrolls away from the reader exactly while the run is
+ * doing the thing they want to stop. No length of question can push Submit out
+ * of reach either.
+ *
+ * `onStop` is the host's way back — the screen to return to once the run is
+ * stopped, normally the intake it was started from. It is the same handler the
+ * pane's `onCancel` takes, because abandoning a parked question and stopping a
+ * streaming run land the operator in the same place; only the verb differs, and
+ * it differs truthfully (you STOP something running, you CANCEL something
+ * waiting).
  */
-export function AgentRunActions({ run }: { run: AgentRunLike }) {
+export function AgentRunActions({ run, onStop }: { run: AgentRunLike; onStop?: () => void }) {
+  const loc = useLoticsLocale().agentRun;
   // Reads the SAME run the pane reads, rather than state the pane publishes: two
   // components deriving from one source cannot disagree, and nothing has to set
   // a parent's state during a child's render to keep them in step.
-  if (run.pendingChoice == null) return null;
-  return <ClarifyWizardActions />;
+  if (run.pendingChoice != null) return <ClarifyWizardActions />;
+  // Parked is NOT streaming — a run waiting on an answer burns nothing, so it is
+  // the wizard's Cancel that leaves it, not a Stop. Checked in this order for
+  // that reason.
+  if (run.status !== "streaming") return null;
+  return (
+    <Button
+      title={loc.stop}
+      color="secondary"
+      onPress={() => {
+        run.cancel();
+        onStop?.();
+      }}
+    />
+  );
 }

package/src/choice_list.tsx

@@ -6,7 +6,7 @@ import { Icon } from "./icon";
 import { Divider } from "./divider";
 import { composeHandler, useFocusRing } from "./use_focus_ring";
 import { useHover } from "./use_hover";
-import { CONTROL_RADIUS, FOCUS_RING } from "./control_surface";
+import { CONTROL_RADIUS, FOCUS_RING, ROW_WASH_BLEED } from "./control_surface";
 import { useAutoGrowHeight } from "./use_auto_grow_height";
 import { fontFamilyMedium, getInputTextStyle } from "./text_utils";
 import { useLoticsLocale } from "./locale";
@@ -52,7 +52,10 @@ function ChoiceRow({ option, selected, onSelect }: { option: ChoiceOption; selec
       onPress={onSelect}
       {...focusProps}
       style={({ hovered, pressed }) => [
-        { flexDirection: "row", alignItems: "center", gap: 12, paddingVertical: 14, paddingHorizontal: 8, borderRadius: CONTROL_RADIUS },
+        // Bleeds like every other washed row, so the option TEXT sits on the
+        // container's edge — level with the question above it, which no longer
+        // has to hand-pad itself to match.
+        { flexDirection: "row", alignItems: "center", gap: 12, paddingVertical: 14, paddingHorizontal: ROW_WASH_BLEED, marginHorizontal: -ROW_WASH_BLEED, borderRadius: CONTROL_RADIUS },
         // Selected reads as a persistent tint (zinc-100); an unselected row only
         // washes on hover (zinc-50). The check below reserves its slot always.
         selected ? { backgroundColor: colors.zinc[100] } : hovered || pressed ? { backgroundColor: colors.zinc[50] } : null,
@@ -88,7 +91,7 @@ function CustomAnswerRow({ value, selected, onChangeText, onFocus, placeholder }
     <View
       {...(hoverProps as object)}
       style={[
-        { paddingVertical: 14, paddingHorizontal: 8, borderRadius: CONTROL_RADIUS },
+        { paddingVertical: 14, paddingHorizontal: ROW_WASH_BLEED, marginHorizontal: -ROW_WASH_BLEED, borderRadius: CONTROL_RADIUS },
         // Same states as an option row: a filled custom answer reads as selected
         // (zinc-100); otherwise it washes on hover (zinc-50).
         selected ? { backgroundColor: colors.zinc[100] } : hovered ? { backgroundColor: colors.zinc[50] } : null,

package/src/clarify.tsx

@@ -36,9 +36,13 @@ export interface ClarifyProps {
 export function Clarify(props: ClarifyProps) {
   return (
     <View style={{ gap: 12 }}>
-      {/* paddingHorizontal 8 aligns the eyebrow + question with the option/answer
+      {/* No padding: the `ChoiceList` rows below BLEED their wash now, so their
+          text already sits on this container's edge and the question needs
+          nothing to line up with it. The 8 that used to be here was compensation
+          for a row that pushed its own content in. Old note kept for the why:
+          it "aligned the eyebrow + question with the option/answer
           text, which sits on the `ChoiceList` rows' 8px inset (CONTROL_RADIUS grid). */}
-      <View style={{ gap: 4, paddingHorizontal: 8 }}>
+      <View style={{ gap: 4 }}>
         {props.eyebrow ? (
           <Text size="xs" color="muted" weight="medium">
             {props.eyebrow}

package/src/clarify_wizard.tsx

@@ -123,12 +123,14 @@ export function ClarifyWizard(props: ClarifyWizardProps) {
   return (
     <View style={{ gap: 16 }}>
       {/* The step position is an eyebrow above the question (no progress bar — and
-          none at all for a single question); the footer aligns to the same 8px inset
+          none at all for a single question); the footer shares their left edge
           as the question and answers. Keyed by index so each step's custom-answer
           draft is its own (no bleed across steps). */}
       <Clarify key={index} eyebrow={total > 1 ? `${index + 1} / ${total}` : undefined} question={q.question} options={q.answers} answer={current} onAnswer={setAnswer} allowCustom={q.allowCustom} />
+      {/* No horizontal padding — the choice rows below BLEED their wash now, so
+          the footer already shares their left edge without compensating for it. */}
       {scope == null ? (
-        <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 8, paddingHorizontal: 8 }}>
+        <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
           <Button title={labels.cancel} color="muted" onPress={onCancel} />
           <View style={{ flexDirection: "row", gap: 8 }}>
             {index > 0 ? <Button title={labels.back} color="secondary" onPress={() => setIndex(index - 1)} /> : null}

package/src/control_surface.ts

@@ -23,6 +23,31 @@ export const MIN_CONTROL_WIDTH = 160;
  *  (avatars, dots, switches, sliders, progress, icon buttons) stay full. */
 export const CONTROL_RADIUS = 10;
 
+/**
+ * HOW FAR A ROW'S WASH EXTENDS PAST ITS CONTENT — and the invariant that goes
+ * with it: **a row that paints a hover/selection wash BLEEDS it outward; it
+ * never insets its content to make room for decoration.**
+ *
+ * `marginHorizontal: -ROW_WASH_BLEED` absorbed by an equal `paddingHorizontal`
+ * is net zero for layout, so the row's CONTENT stays on the container's edge —
+ * flush with the headings, labels and prose around it — while the wash gets its
+ * breathing room by growing into the parent's padding.
+ *
+ * The alternative (pad without the negative margin) is what the kit did in
+ * three places, and it fails in a way nobody reports as a bug: the row's content
+ * sits N px right of everything else on the page, so every neighbour that has to
+ * line up with it — a summary line, a question above a choice list, a table's
+ * own header — gets hand-padded by the same N at its call site. The indent then
+ * looks deliberate because it is everywhere, and the compensation spreads to
+ * each new surface. An indent is legible only when something VISIBLE occupies
+ * it (a checkbox, an ordinal, a mark); an empty one is a defect.
+ *
+ * The parent must afford this much horizontal padding. 8 is chosen because it is
+ * the smallest breathing room that reads, and because every container in the kit
+ * already clears it (`Drawer` 20, `Dialog` 24, the page canvas 28).
+ */
+export const ROW_WASH_BLEED = 8;
+
 /** How far {@link FOCUS_RING} extends BEYOND the control's border box. Module-local
  *  on purpose: it is a FLOOR for anyone who clips (a container reserving less than
  *  this on an edge a focusable child sits against shears that child's ring), never a

package/src/dialog.tsx

@@ -50,6 +50,8 @@ export const DialogNavigationProvider = DialogNavigationContext.Provider;
 interface DialogContextValue {
   open: boolean;
   onOpenChange: (open: boolean) => void;
+  /** The horizontal gutter every band inside THIS dialog shares — see {@link useDialogGutter}. */
+  gutter: number;
 }
 
 const DialogContext = createContext<DialogContextValue | null>(null);
@@ -83,6 +85,39 @@ export interface DialogProps {
   initialRoute?: string;
 }
 
+/**
+ * THE DIALOG'S HORIZONTAL GUTTER — every band inside a dialog reads this, so a
+ * header, a scroll area, a footer and any pane a caller drops in all share one
+ * left edge.
+ *
+ * It existed as the literal `small ? 16 : 24` at five sites (four here, one
+ * hand-copied into `AgentRunPane`), which is exactly how a band drifts: the copy
+ * has to be found and changed with the others, and the one that is missed is
+ * invisible until someone measures two bands against each other.
+ */
+function dialogGutterFor(small: boolean): number {
+  return small ? 16 : 24;
+}
+
+/**
+ * THE gutter of the dialog you are inside — read, never re-derived.
+ *
+ * Centralising the VALUE was not enough, and that mistake shipped: `dialogGutter(small)` still
+ * left every band to work out `small` for itself, and `AgentRunPane` asked
+ * `useContainerSize()` (its own measured box, "small" at a 760px dialog) while the header,
+ * scroll area and footer asked `useScreenSize()` (the viewport, not small). Two honest answers
+ * to one question put the run's rows 8px left of the dialog's own title.
+ *
+ * So the Dialog decides ONCE and publishes it. A band inside a dialog gets that number
+ * whatever its own box measures; a surface rendered outside one falls back to the SCREEN — the
+ * same signal a dialog uses — so the two paths can never disagree about what "small" means.
+ */
+export function useDialogGutter(): number {
+  const ctx = useContext(DialogContext);
+  const screenSize = useScreenSize();
+  return ctx?.gutter ?? dialogGutterFor(screenSize.small);
+}
+
 export function Dialog(props: DialogProps) {
   const {
     testID,
@@ -127,12 +162,16 @@ export function Dialog(props: DialogProps) {
     onOpenChange(false);
   }, [onOpenChange]);
 
+  // Decided ONCE, here, and published — so a band never has to work out "small"
+  // for itself and land on a different answer than its siblings.
+  const gutter = dialogGutterFor(screenSize.small);
   const dialogValue = useMemo(
     (): DialogContextValue => ({
       open,
       onOpenChange,
+      gutter,
     }),
-    [open, onOpenChange],
+    [open, onOpenChange, gutter],
   );
 
   const effectiveOffsetTop = screenSize.small ? 0 : offsetTop;
@@ -165,7 +204,7 @@ export function Dialog(props: DialogProps) {
                 >
                   <PortalHost>
                     <View testID={testID} style={[styles.dialogContainer, { borderRadius }]}>
-                      <View style={[styles.closeButtonContainer, { paddingHorizontal: screenSize.small ? 16 : 24 }]}>
+                      <View style={[styles.closeButtonContainer, { paddingHorizontal: gutter }]}>
                         <IconButton icon="x" size="lg" accessibilityLabel={locale.overlay.close} onPress={handleClose} />
                       </View>
                       <SizeBoundary style={styles.container}>{children}</SizeBoundary>
@@ -199,10 +238,10 @@ export interface DialogHeaderProps {
 export function DialogHeader(props: DialogHeaderProps) {
   const { children, style } = props;
   const { goBack, showBackButton } = useDialogNavigation();
-  const screenSize = useScreenSize();
+  const gutter = useDialogGutter();
 
   return (
-    <View style={[styles.header, { paddingHorizontal: screenSize.small ? 16 : 24 }, style]}>
+    <View style={[styles.header, { paddingHorizontal: gutter }, style]}>
       {showBackButton && <BackButton onPress={goBack} />}
       {children}
     </View>
@@ -244,10 +283,10 @@ export interface DialogScrollAreaProps {
 
 export function DialogScrollArea(props: DialogScrollAreaProps) {
   const { children } = props;
-  const screenSize = useScreenSize();
+  const gutter = useDialogGutter();
 
   return (
-    <ScrollView contentContainerStyle={[styles.scrollAreaContent, { paddingHorizontal: screenSize.small ? 16 : 24 }]}>
+    <ScrollView contentContainerStyle={[styles.scrollAreaContent, { paddingHorizontal: gutter }]}>
       {children}
     </ScrollView>
   );
@@ -264,12 +303,12 @@ export interface DialogFooterProps {
 
 export function DialogFooter(props: DialogFooterProps) {
   const { children, align = "end" } = props;
-  const screenSize = useScreenSize();
+  const gutter = useDialogGutter();
 
   const justifyContent =
     align === "end" ? "flex-end" : align === "space-between" ? "space-between" : "flex-start";
 
-  return <View style={[styles.footer, { justifyContent, paddingHorizontal: screenSize.small ? 16 : 24 }]}>{children}</View>;
+  return <View style={[styles.footer, { justifyContent, paddingHorizontal: gutter }]}>{children}</View>;
 }
 
 // ============================================================================