@lotics/ui 45.10.0 → 46.0.0

package/docs/testing.md

@@ -3,8 +3,7 @@
 Three kit anatomies where the accessibility tree says one thing and an automated
 driver has to do another. Each is **by design** — the shape that makes the
 component correct for a keyboard and a screen reader is the shape that defeats a
-naive `click()` — so each will read as a bug the first time, and the wrong
-reaction (`force: true`, or "the component is broken") costs a debugging session.
+naive `click()` — so each will read as a bug the first time.
 
 Everything here is true wherever the kit renders. The iframe that a Lotics app
 runs inside adds one more rule on top — `lotics docs building_an_app` § 8.
@@ -25,9 +24,7 @@ So the a11y tree shows `button "Open ACME-1042"`, and clicking it fails:
 subtree intercepts pointer events
 ```
 
-That is the design working, not a defect — the visible row is above the door
-precisely so a pointer lands on the row rather than the door. Drive it the way a
-mouse user does:
+That is the design working, not a defect. Drive it the way a mouse user does:
 
 - **click the row container** — the `generic [cursor=pointer]` wrapping the door;
   the click bubbles to `PressableRow`
@@ -66,5 +63,4 @@ and the window are the right ones. From the dragged element,
 
 Then check **both** halves: re-snapshot for the optimistic move, and re-read the
 record to confirm the mutation actually persisted. An optimistic move that never
-reached the server looks identical on screen, which is the whole reason to check
-the second one.
+reached the server looks identical on screen.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "45.10.0",
+  "version": "46.0.0",
   "type": "module",
   "exports": {
     "./vite": {

package/src/agent_progress.tsx

@@ -26,8 +26,6 @@ export interface AgentProgressProps {
   renderToolOutput?: AgentRunProps["renderToolOutput"];
   /** Retry action under the expanded feed's terminal error row. */
   onRetry?: () => void;
-  /** Localized "{n} steps" suffix, forwarded to the expanded feed. */
-  stepsLabel?: (n: number) => string;
   defaultExpanded?: boolean;
 }
 
@@ -40,7 +38,7 @@ export interface AgentProgressProps {
  * label, so the surface stays calm until you ask to see the steps.
  */
 export function AgentProgress(props: AgentProgressProps) {
-  const { parts, state = "streaming", error, label, labelForCall, renderToolOutput, onRetry, stepsLabel, defaultExpanded } = props;
+  const { parts, state = "streaming", error, label, labelForCall, renderToolOutput, onRetry, defaultExpanded } = props;
   const [expanded, setExpanded] = useState(defaultExpanded ?? false);
 
   const running = lastRunningStep(toSegments(parts));
@@ -62,7 +60,10 @@ export function AgentProgress(props: AgentProgressProps) {
           {/* FollowScroll keeps the newest step in view as the run streams —
               a plain ScrollView would let new content grow below the fold. */}
           <FollowScroll style={{ maxHeight: 260 }} contentContainerStyle={{ padding: 16 }}>
-            <AgentRun parts={parts} state={state} error={error} labelForCall={labelForCall} renderToolOutput={renderToolOutput} onRetry={onRetry} stepsLabel={stepsLabel} />
+            {/* collapseProcess=false: the pill IS the fold. Letting the settled
+                run fold again inside it would put the steps two presses deep —
+                and this panel is only ever open because someone asked for them. */}
+            <AgentRun parts={parts} state={state} error={error} labelForCall={labelForCall} renderToolOutput={renderToolOutput} onRetry={onRetry} collapseProcess={false} />
           </FollowScroll>
         </View>
       ) : null}

package/src/agent_run.tsx

@@ -8,6 +8,7 @@ import { Callout, CalloutActions, CalloutText } from "./callout";
 import { Markdown } from "./markdown";
 import { JsonPanel, stringifyData } from "./json_panel";
 import { PressableHighlight } from "./pressable_highlight";
+import { FollowScroll } from "./follow_scroll";
 import { Marker, type StepStatus } from "./stepper";
 import { NODE } from "./stepper_layout";
 import { AnimationFadeIn } from "./animation_fade_in";
@@ -17,7 +18,7 @@ import { useLoticsLocale, type LoticsLocale } from "./locale";
 // The render model comes STRAIGHT from ai-sdk `UIMessage.parts` — no bespoke
 // transcript type. `agent_transform` is the one place that folds parts into the
 // timeline; this file is the renderer.
-import { toSegments, anyRunning, type AgentUIPart, type AgentStep, type AgentStepStatus } from "./agent_transform";
+import { toSegments, splitTimeline, anyRunning, lastRunningStep, type AgentUIPart, type AgentSegment, type AgentStep, type AgentStepStatus } from "./agent_transform";
 
 /** A resolved tool call as a `labelForCall` sees it: the RAW tool name, the
  *  input it was invoked with, and its settle state. Richer than a name-only map,
@@ -64,9 +65,21 @@ export interface AgentRunProps {
   /** When the run ended on a terminal `error`, render a retry action under that
    *  danger row. Omit it and the error row renders exactly as before. */
   onRetry?: () => void;
-  /** Localized "{n} steps" suffix on a collapsed activity group (the kit is
-   *  locale-neutral). Default `"{n} steps"`. */
-  stepsLabel?: (n: number) => string;
+  /** Fold a SETTLED run's work into ONE summary row, leaving the answer as the
+   *  only thing at rest (`splitTimeline`). Default `true`. Set `false` where the
+   *  run is ALREADY inside a collapsed shell — `AgentProgress`'s pill — since a
+   *  fold behind a fold costs two presses to read one run. */
+  collapseProcess?: boolean;
+  /** Name the whole run on that summary row. Gets every tool step in order;
+   *  return `undefined` to fall back to the built-in label (the LAST step's).
+   *
+   *  The default names the last action and nothing more, deliberately: only the
+   *  host knows which of its tools WROTE, and a kit-side guess would be a list
+   *  of tool names that is silently incomplete the moment a write tool is added
+   *  — reporting a run that changed data as if it had only read. A host that
+   *  does know should say so here ("Updated 3 records"), since that is the one
+   *  fact worth reading without expanding. */
+  summarizeRun?: (steps: readonly AgentStep[]) => string | undefined;
   accessibilityLabel?: string;
 }
 
@@ -141,12 +154,18 @@ const INK = colors.zinc[700];
  * tools it calls, in the order they happened. While the agent is mid-tools the
  * tail group is a SINGLE pulsing row whose label swaps in place as each call
  * fires (not a growing stack of dots); once prose resumes the group settles into
- * one row — "{final action} ({n} steps)" — that EXPANDS on press to the steps in
- * between. Text segments render as prose. The run always ends on the agent's text.
- * Pair with `Composer` + a review surface (`DiffValue` / `useChangeSet`).
+ * one row — "{final action}" — that EXPANDS on press to the steps in between.
+ * Text segments render as prose.
+ *
+ * That no-stacking law holds for the WHOLE run, not just one burst: the work
+ * stays at ONE row from the first call to the last, its label swapping in place
+ * to whatever is happening now, and the answer is the only thing that renders
+ * below it (`collapseProcess`, on by default). Press the row at any time —
+ * mid-run included — to roll the timeline out under it. Pair with `Composer` +
+ * a review surface (`DiffValue` / `useChangeSet`).
  */
 export function AgentRun(props: AgentRunProps) {
-  const { parts, labelForCall, renderToolOutput, onRetry, stepsLabel, accessibilityLabel } = props;
+  const { parts, labelForCall, renderToolOutput, onRetry, summarizeRun, accessibilityLabel } = props;
   const locale = useLoticsLocale();
   const segments = toSegments(parts);
   const state = props.state ?? (anyRunning(segments) ? "streaming" : "done");
@@ -155,6 +174,70 @@ export function AgentRun(props: AgentRunProps) {
 
   const [expanded, setExpanded] = useState<Record<string, boolean>>({});
   const toggle = (id: string) => setExpanded((e) => ({ ...e, [id]: !e[id] }));
+  const [workOpen, setWorkOpen] = useState(false);
+
+  const { process, result, steps } = splitTimeline(segments);
+  const awaiting = steps.some((s) => s.status === "awaiting");
+  // Does this run manage its own process zone? A surface that ALREADY frames the
+  // run — `AgentProgress`'s pill, a demo about one step's output — opts out and
+  // gets the raw timeline.
+  const managed = (props.collapseProcess ?? true) && !awaiting;
+
+  // The work is COLLAPSED for the whole run, not just at the end — one row whose
+  // label follows what is happening now. Nothing rolls out unless the reader asks.
+  //
+  // WHILE STREAMING that covers EVERY segment, prose included. The agent's
+  // between-call text is narration by instruction — a plan it was told to state
+  // up front, asides capped at two sentences — and none of it is load-bearing in
+  // flight: the one message that needs an answer is a bulk-mutation confirmation,
+  // and the agent WAITS there, so the run stops and that text becomes the
+  // trailing text this renders below. Showing the rest bought a sentence that
+  // appeared, was read halfway, and vanished when the next call superseded it.
+  // The threshold is `process.length > 0` — a reply with no work at all is all
+  // answer, and hiding THAT behind a row until settle would be the real loss.
+  //
+  // SETTLED, the collapse covers the work and the answer stands below it.
+  // Expanding differs between the two, and only there: LIVE the timeline is
+  // capped and self-pinning (opening a run mid-flight must not hand the page a
+  // feed that grows for another minute), SETTLED it opens in full.
+  //
+  // The settled clauses are cases where collapsing would hide something needed:
+  //  · no answer — the run stopped ON a tool call, so the fold would leave an
+  //    empty message. An unfinished run should look unfinished.
+  //  · one process row — already one row. Folding buys no rows and costs a
+  //    second press to reach a step's I/O.
+  //  · no tool steps — thinking plus a stray sentence, and `Thinking` is already
+  //    a collapsed row. A summary row here could only name a step that never ran.
+  const folded = managed && (streaming ? process.length > 0 : process.length > 1 && steps.length > 0 && result.length > 0);
+
+  // What the row SAYS right now: the tool in flight, or — when the model is
+  // writing rather than calling — "Thinking…". Naming the last finished action
+  // while the agent composes prose reports a moment that has passed.
+  const thinking = streaming && !lastRunningStep(segments);
+
+  const renderSegment = (seg: AgentSegment, tail: boolean) => {
+    if (seg.kind === "text") {
+      return (
+        <View key={seg.id} style={styles.narration}>
+          <Markdown>{seg.text}</Markdown>
+        </View>
+      );
+    }
+    if (seg.kind === "reasoning") {
+      return <ReasoningDisclosure key={seg.id} text={seg.text} streaming={streaming && tail} expanded={!!expanded[seg.id]} onToggle={() => toggle(seg.id)} />;
+    }
+    return (
+      <ToolGroup
+        key={seg.id}
+        steps={seg.steps}
+        active={streaming && tail}
+        expanded={!!expanded[seg.id]}
+        onToggle={() => toggle(seg.id)}
+        labelForCall={labelForCall}
+        renderToolOutput={renderToolOutput}
+      />
+    );
+  };
 
   return (
     <View accessibilityLabel={accessibilityLabel} style={{ gap: 10 }}>
@@ -165,30 +248,32 @@ export function AgentRun(props: AgentRunProps) {
           CTA press (uploads included) and never hand-roll a text/skeleton
           placeholder in front of the feed. */}
       {streaming && segments.length === 0 ? <StartingRow label={locale.agentRun.starting} /> : null}
-      {segments.map((seg, i) => {
-        if (seg.kind === "text") {
-          return (
-            <View key={seg.id} style={styles.narration}>
-              <Markdown>{seg.text}</Markdown>
-            </View>
-          );
-        }
-        if (seg.kind === "reasoning") {
-          return <ReasoningDisclosure key={seg.id} text={seg.text} streaming={streaming && i === lastIndex} expanded={!!expanded[seg.id]} onToggle={() => toggle(seg.id)} />;
-        }
-        return (
-          <ToolGroup
-            key={seg.id}
-            steps={seg.steps}
-            active={streaming && i === lastIndex}
-            expanded={!!expanded[seg.id]}
-            onToggle={() => toggle(seg.id)}
+      {folded ? (
+        <>
+          <WorkSummary
+            steps={steps}
+            live={streaming}
+            thinking={thinking}
+            expanded={workOpen}
+            onToggle={() => setWorkOpen((o) => !o)}
             labelForCall={labelForCall}
-            renderToolOutput={renderToolOutput}
-            stepsLabel={stepsLabel ?? locale.agentRun.steps}
-          />
-        );
-      })}
+            summarizeRun={summarizeRun}
+          >
+            {/* Streaming, the collapse holds EVERY segment — the trailing prose
+                has nowhere else to be, and that is the point. Settled, it holds
+                the work and the answer stands below. Opened mid-run the tail
+                group still pulses in there. */}
+            {(streaming ? segments : process).map((seg, i, all) => renderSegment(seg, streaming && i === all.length - 1))}
+          </WorkSummary>
+          {/* The answer, once there IS one. It appears at settle rather than
+              streaming, and that is the trade: our final responses are ≤3
+              sentences by instruction, so what is given up is a second of typing
+              — against never yanking a half-read sentence out from under anyone. */}
+          {streaming ? null : result.map((seg) => renderSegment(seg, false))}
+        </>
+      ) : (
+        segments.map((seg, i) => renderSegment(seg, i === lastIndex))
+      )}
       {/* A run-level BREAKING error terminates the feed. It lives outside `parts`
           (the stream failed), so the caller passes it explicitly.
           A CONTAINED surface, not another step row: the run didn't advance, it
@@ -382,17 +467,14 @@ function ReasoningDisclosure(props: { text: string; streaming?: boolean; expande
   );
 }
 
-function SummaryLabel({ label, count, stepsLabel }: { label: string; count: number; stepsLabel: (n: number) => string }) {
+// The row says WHAT is happening and nothing else. A step count was a number the
+// reader could do nothing with: on a live row the label already changes on every
+// call, so the tally added no motion it did not have; on a settled one it sized
+// work nobody had asked to size. The chevron carries "there is more inside".
+function SummaryLabel({ label }: { label: string }) {
   return (
-    // PARENTHESES, not a middot. The count is supplementary to the action, and
-    // parentheses say so in a mark that survives text extraction and screen
-    // readers; a middot asserts a relationship without naming it, and the ink
-    // contrast here was already doing the separating anyway.
     <Text size="sm" weight="medium" numberOfLines={1}>
       {label}
-      <Text size="sm" color="muted">
-        {" (" + stepsLabel(count) + ")"}
-      </Text>
     </Text>
   );
 }
@@ -401,6 +483,90 @@ function chevron(dir: "down" | "up") {
   return <Icon name={dir === "down" ? "chevron-down" : "chevron-up"} size={16} color={colors.zinc[400]} />;
 }
 
+/**
+ * The run's WORK, held at ONE row — the whole timeline up to the answer, behind
+ * a single "{current or last action}" header that expands the work out BELOW it,
+ * in order, exactly as it renders unfolded.
+ *
+ * ONE row for the whole lifecycle, not just at the end. Live, the label swaps in
+ * place under a pulsing dot; settled, it becomes the done summary. That is the
+ * point: a feed that grows a finished row per call makes the reader watch the
+ * work scroll past, and then leaves the wreckage sitting above the answer forever.
+ *
+ * It is the run-level analogue of `ToolGroup`'s header, and it exists because
+ * that grouping alone was never enough — a group breaks on every prose part AND
+ * every reasoning part, so an interleaved-thinking run rebuilds the stack one
+ * group at a time and settles as a pile of collapsed rows plus whatever plan it
+ * narrated on the way, all at the answer's weight and all stale. At rest a
+ * reader wants the answer; the work is what they open when they doubt it.
+ */
+function WorkSummary(props: {
+  steps: AgentStep[];
+  live: boolean;
+  /** The model is WRITING rather than calling — no tool is in flight. */
+  thinking: boolean;
+  expanded: boolean;
+  onToggle: () => void;
+  labelForCall?: (call: AgentToolCall) => string | undefined;
+  summarizeRun?: AgentRunProps["summarizeRun"];
+  children: ReactNode;
+}) {
+  const { steps, live, thinking, expanded, onToggle, labelForCall, summarizeRun, children } = props;
+  const locale = useLoticsLocale();
+  const final = steps[steps.length - 1];
+  // "Thinking…" WINS over a host summary while the model writes: `summarizeRun`
+  // names what the run DID, and mid-compose that is a moment already past.
+  const label = thinking
+    ? locale.agentRun.thinkingStreaming
+    : (summarizeRun?.(steps) ?? stepLabel(final, labelForCall, locale.agentRun.tools));
+  // A failure ANYWHERE in the work marks the closed row, so a run that limped to
+  // its answer never reads as clean work — the amber is the reason to open it.
+  // While the run is still STREAMING the marker is the pulsing `current` dot —
+  // keyed off the run, not off whether a call happens to be in flight this
+  // instant, or the dot would settle and re-pulse every time the agent stopped to
+  // write a sentence. An error that already happened waits its turn too: a run in
+  // flight is not a run that failed, and amber mid-flight would say it stopped.
+  const errored = steps.some((s) => s.status === "error");
+  return (
+    <View style={styles.group}>
+      <ActivityRow
+        markerStatus={live ? "current" : errored ? "warning" : "complete"}
+        live={live}
+        onPress={onToggle}
+        accessibilityLabel={label}
+        trailing={chevron(expanded ? "up" : "down")}
+      >
+        {/* Keyed by what the row is SAYING, so a new call (or the switch to
+            "Thinking…") rises + fades into the SAME row — the label swaps, the
+            row does not move. Exactly what a settled `ToolGroup` does mid-burst,
+            held for the whole run. */}
+        <AnimationFadeIn key={live ? label : "settled"} translateY={4}>
+          <SummaryLabel label={label} />
+        </AnimationFadeIn>
+      </ActivityRow>
+      {/* The run's own 10px rhythm, not the group's 2px: what rolls out here is
+          whole segments — prose, thinking, tool groups — not sibling step rows.
+          Opened while the run is still LIVE it is also CAPPED and self-pinning:
+          a reader who opens a run mid-flight asked to see the work, not to hand
+          the page a feed that grows for another minute. `FollowScroll` follows at
+          LAYOUT level (an inverted single-cell list), so each new call paints
+          already pinned — no scroll-after-paint flash. Settled, it opens in full:
+          nothing is arriving, so there is nothing to cap. */}
+      {expanded ? (
+        live ? (
+          <View testID="agent-run-work-capped" style={styles.work}>
+            <FollowScroll style={styles.liveFrame}>
+              <View style={{ gap: 10 }}>{children}</View>
+            </FollowScroll>
+          </View>
+        ) : (
+          <View testID="agent-run-work" style={styles.work}>{children}</View>
+        )
+      ) : null}
+    </View>
+  );
+}
+
 function ToolGroup(props: {
   steps: AgentStep[];
   active: boolean;
@@ -408,9 +574,8 @@ function ToolGroup(props: {
   onToggle: () => void;
   labelForCall?: (call: AgentToolCall) => string | undefined;
   renderToolOutput?: AgentRunProps["renderToolOutput"];
-  stepsLabel: (n: number) => string;
 }) {
-  const { steps, active, expanded, onToggle, labelForCall, renderToolOutput, stepsLabel } = props;
+  const { steps, active, expanded, onToggle, labelForCall, renderToolOutput } = props;
   const locale = useLoticsLocale();
   const resolve = (s: AgentStep) => stepLabel(s, labelForCall, locale.agentRun.tools);
 
@@ -454,7 +619,7 @@ function ToolGroup(props: {
     );
   }
 
-  // SETTLED, expandable — a persistent "{final action} ({n} steps)" HEADER that
+  // SETTLED, expandable — a persistent "{final action}" HEADER that
   // STAYS PUT and rolls the steps out BELOW it (in order) on press, so the row you
   // pressed never moves. The header wears the `complete` terminal dot — an outlined
   // ring + check, a differentiator from the filled `done` step dots; every row
@@ -464,10 +629,10 @@ function ToolGroup(props: {
       <ActivityRow
         markerStatus={errored || awaiting ? "warning" : "complete"}
         onPress={onToggle}
-        accessibilityLabel={`${resolve(final)} — ${stepsLabel(steps.length)}`}
+        accessibilityLabel={resolve(final)}
         trailing={chevron(expanded ? "up" : "down")}
       >
-        <SummaryLabel label={resolve(final)} count={steps.length} stepsLabel={stepsLabel} />
+        <SummaryLabel label={resolve(final)} />
       </ActivityRow>
       {expanded
         ? steps.map((s) => (
@@ -486,6 +651,15 @@ const styles = StyleSheet.create({
   // lines in every padded container).
   narration: {},
   group: { gap: 2 },
+  // The folded work, opened: segment spacing (the run's own gap), and a small
+  // lead-in under the header so the rolled-out work reads as its content.
+  work: { gap: 10, paddingTop: 6 },
+  // The cap on work OPENED mid-run. ~5 rows: enough to read what is happening,
+  // short enough that opening a p90 94s run does not push the composer off the
+  // screen for the rest of it. No border and no background — the run sits flush
+  // in the consumer's gutter by law, and a frame that appeared only while
+  // streaming would be the loudest thing on the surface.
+  liveFrame: { maxHeight: 220 },
   row: {
     flexDirection: "row",
     alignItems: "center",

package/src/agent_run_pane.tsx

@@ -178,12 +178,17 @@ export function AgentRunPane<TLanding>(props: AgentRunPaneProps<TLanding>) {
           `agentRun` locale slice — and ai_patterns states the law outright:
           never hand-roll a placeholder in front of the feed. A slot here would
           invite exactly that, and every app would localize it again. */}
+      {/* collapseProcess=false: this pane took the framing job — the FollowScroll
+          above IS the bound, sized by the dialog. Leaving the default on would
+          nest the run's own 220px window inside it, and the dialog's scroller
+          would then never overflow while the inner one held every step. */}
       <AgentRun
         parts={run.parts}
         state={run.status === "error" ? "error" : run.status === "streaming" ? "streaming" : "done"}
         error={run.error ?? undefined}
         labelForCall={labelForCall}
         renderToolOutput={renderToolOutput}
+        collapseProcess={false}
       />
     </FollowScroll>
   );

package/src/agent_transform.ts

@@ -112,3 +112,37 @@ export function lastRunningStep(segments: readonly AgentSegment[]): AgentStep |
   }
   return undefined;
 }
+
+/**
+ * A settled run reads as two zones: the WORK it did, and the ANSWER it ended on.
+ *
+ * The split is POSITIONAL. Nothing inside a part says whether its prose is a
+ * plan, a between-call aside, or the report — a model emits all three as `text`,
+ * and deciding between them would be guessing at language. Position is the one
+ * thing that IS knowable: what comes after the last tool call is what the agent
+ * said once the work was over; everything before it is the work.
+ */
+export interface AgentTimeline {
+  /** The work, in order — prose narrated on the way, thinking, tool groups. */
+  process: AgentSegment[];
+  /** The trailing text segments: what the run ended on. EMPTY when the run
+   *  stopped on a tool call (aborted, out of steps, parked) — which is exactly
+   *  when the work must NOT be folded away, because nothing would be left. */
+  result: AgentSegment[];
+  /** Every tool step in `process`, flattened in order — what a run-level
+   *  summary counts and names. */
+  steps: AgentStep[];
+}
+
+/** Split a folded timeline into its work and its answer. Pure: the returned
+ *  arrays are fresh, and nothing in `segments` is mutated. */
+export function splitTimeline(segments: readonly AgentSegment[]): AgentTimeline {
+  let cut = segments.length;
+  while (cut > 0 && segments[cut - 1].kind === "text") cut -= 1;
+  const process = segments.slice(0, cut);
+  const steps: AgentStep[] = [];
+  for (const seg of process) {
+    if (seg.kind === "group") steps.push(...seg.steps);
+  }
+  return { process, result: segments.slice(cut), steps };
+}

package/src/locale.tsx

@@ -250,10 +250,9 @@ export interface LoticsLocale {
   textInputField: { clear: string };
   /** `AgentRun`: the reasoning disclosure's label (settled / streaming), the
    *  auto-built tool peek's Input / Error / Output panel titles, the `awaiting`
-   *  annotation on a call parked on a human decision, and the terminal error's
-   *  `retry` action, the per-tool labels (`tools`) and the "{n} steps" suffix
-   *  (`steps`). `labelForCall` / `stepsLabel` remain as per-call-site
-   *  OVERRIDES, not as the only way to get a translation. */
+   *  annotation on a call parked on a human decision, the terminal error's
+   *  `retry` action, and the per-tool labels (`tools`). `labelForCall` remains a
+   *  per-call-site OVERRIDE, not the only way to get a translation. */
   /** `AgentRun` / `AgentProgress` chrome, plus `tools` — the display label per
    *  PLATFORM tool name. The tool set is bounded and kit-known, so localizing it
    *  here means every app inherits it; leaving it to each call site's
@@ -271,7 +270,6 @@ export interface LoticsLocale {
     retry: string;
     stop: string;
     tools: Record<string, string>;
-    steps: (n: number) => string;
   };
   /** `ApprovalPrompt`: the default prompt line (overridable per instance) and
    *  the Approve / Deny button labels — the surface that ANSWERS `AgentRun`'s
@@ -489,7 +487,6 @@ export const en: LoticsLocale = {
       generate_excel_from_template: "Generating spreadsheet",
       generate_docx_from_template: "Generating document",
     },
-    steps: (n) => `${n} steps`,
   },
   approvalPrompt: { message: "The assistant wants to perform an action that needs your approval.", approve: "Approve", deny: "Deny" },
   messageActions: { copy: "Copy", copied: "Copied", regenerate: "Regenerate", edit: "Edit", previousVersion: "Previous version", nextVersion: "Next version" },
@@ -697,7 +694,6 @@ export const vi: LoticsLocale = {
       generate_excel_from_template: "Đang tạo bảng tính",
       generate_docx_from_template: "Đang tạo văn bản",
     },
-    steps: (n) => `${n} bước`,
   },
   approvalPrompt: { message: "Trợ lý muốn thực hiện thao tác cần bạn duyệt.", approve: "Cho phép", deny: "Từ chối" },
   messageActions: { copy: "Sao chép", copied: "Đã sao chép", regenerate: "Tạo lại", edit: "Chỉnh sửa", previousVersion: "Phiên bản trước", nextVersion: "Phiên bản sau" },

package/src/pressable_row.tsx

@@ -14,10 +14,11 @@ export interface PressableRowProps {
   marked?: boolean;
   /**
    * - "register" (THE record-list default): a rounded row whose hover/open/`marked`
-   *   wash spans the FULL row width (incl. nested controls); content stays on the
-   *   20px column gutter so a `Table` header and its cells still align. The `Table`
-   *   separates rows with a `Divider` (the wash is the hover/selection state, the
-   *   hairline the resting separation) — every app inherits this register look.
+   *   wash spans the FULL row width (incl. nested controls); the wash BLEEDS outward
+   *   and the content stays on the container's own edge, so a `Table` header and its
+   *   cells still align. The `Table` draws NOTHING between rows — it spaces them by
+   *   4px and the wash is the only mark a row makes — every app inherits this
+   *   register look.
    * - "bleed" (legacy): px-20, square wash to the edges, `Divider`-separated.
    *   The pre-rounded register row — kept for an edge-to-edge data grid that
    *   genuinely wants hard rules, not the floating default.
@@ -143,7 +144,8 @@ const styles = StyleSheet.create({
     paddingHorizontal: ROW_WASH_BLEED,
     marginHorizontal: -ROW_WASH_BLEED,
   },
-  // Square, full-bleed — lines up with the Dividers between register rows. Legacy.
+  // Square, full-bleed — the pre-rounded register row, for a grid that draws its own
+  // rules between rows. The register variant draws none. Legacy.
   bleed: {
     paddingHorizontal: ROW_WASH_BLEED,
     marginHorizontal: -ROW_WASH_BLEED,

package/src/table.tsx

@@ -181,9 +181,9 @@ export interface TableProps {
  * THE columnar register — define `columns` once and the header band + every row's
  * cell widths come from it, so they can't drift (no hand-rolled `W` map, no
  * `<View style={{width}}>` per cell). Renders a full-bleed eyebrow header (a
- * sortable column becomes a `SortHeader`) and its `TableRow` children,
- * `Divider`-separated. Compose `TableRow` / `TableCell` for the body. For a
- * non-columnar list (entity piles, card stacks) use `PressableRow` directly.
+ * sortable column becomes a `SortHeader`) and its `TableRow` children, spaced by
+ * 4px with no rule between them. Compose `TableRow` / `TableCell` for the body.
+ * For a non-columnar list (entity piles, card stacks) use `PressableRow` directly.
  *
  * The register is container-responsive with no prop: when the measured width
  * can't fit every column it drops droppable columns by `priority`, and below
@@ -312,10 +312,10 @@ export interface TableGroupProps {
  * column: that is a sort, and it costs a band of chrome per value while telling
  * them what the cell beside it says.
  *
- * The band separates itself with AIR rather than a rule, because it is the
- * biggest boundary inside the register and the row hairlines are the smallest —
- * drawing both as lines makes them compete. The heading also takes no rule
- * beneath it, which would orphan the title from the rows it opens.
+ * The band separates itself with AIR rather than a rule, because the register
+ * already separates its own rows with air and keeps ONE line — the band capping
+ * the columns — so a second would compete with it. The heading takes no rule
+ * beneath it either, which would orphan the title from the rows it opens.
  *
  * A group's rows keep their own `ordinal` numbering if they carry one: restart
  * inside each band, where the reader's question is "which of these" rather than
@@ -609,8 +609,8 @@ const styles = StyleSheet.create({
     paddingTop: 16,
     paddingBottom: 16,
   },
-  // A hairline under the column header anchors the columns; the rows below it are
-  // Divider-separated.
+  // A hairline under the column header anchors the columns; the rows below it carry
+  // none — see the file header for why that boundary is the register's only rule.
   headerBandFilled: {
     // The literal neutral, not `accent_wash`: this band is a lid on the columns,
     // never a "you are here", and reading it through the brand token made a
@@ -644,11 +644,12 @@ const styles = StyleSheet.create({
   body: {
     gap: 4,
   },
-  // Air, not a rule. A band boundary is the LARGEST break inside a register and
-  // the row hairlines are the smallest; drawing both as lines makes the two
-  // compete and the grouping stops reading. The first band's heading sits under
-  // the column band's own hairline, so it takes less top space than the ones
-  // that follow — handled by the heading's own padding rather than by the caller.
+  // Air, not a rule. A band boundary is the LARGEST break inside a register, and the
+  // register does not rule the smallest one either — rows are spaced, not ruled — so
+  // a line here would be a second rule competing with the column band's, and the
+  // grouping stops reading. The first band's heading sits under the column band's own
+  // hairline, so it takes less top space than the ones that follow — handled by the
+  // heading's own padding rather than by the caller.
   groupHeading: {
     flexDirection: "row",
     alignItems: "center",