@lotics/ui 7.12.1 → 7.13.0

package/AGENTS.md

@@ -302,7 +302,9 @@ marked + disabled), not a generic text menu. A composition (Badge + Button + Pop
 **Default: `<FilesEditor files onAdd onRemove>`** — it bundles the grid + a toolbar (Upload · Select ·
 Download all) + a batch SELECT mode + the gallery + confirmed-remove; the host only owns `files` and
 wires `onAdd` (picked → its upload) / `onRemove`. The destructive per-tile ✕ shows only in SELECT mode
-(the default view is a clean preview — no stray-tap deletes); the built-in gallery is Download +
+(the default view is a clean preview — no stray-tap deletes); pass `selectTileRemove={false}` to drop
+that ✕ entirely so select mode deletes ONLY via Select → Menu → Delete (the batch gating flow — how the
+cell popover's `cell_files_editor` does it). The built-in gallery is Download +
 inline preview (no "open in new tab" — it's redundant once everything previews inline). In a
 height-bounded container (a popover/drawer) pass `gridMaxHeight` so the grid SCROLLS and the toolbar
 pins below it; omit it in free-flow layouts (a form field) where the grid grows. Reach for the
@@ -413,20 +415,26 @@ Compose the surfaces as a loop, and reach for the right one by job:
   way; while running the host swaps `Composer` for `AgentProgress` (same pill geometry, so it reads as
   a morph).
 - **Show the work** — `AgentRun`: a live feed of the agent's work as a TIMELINE. The prop is an
-  ORDERED `items` array — `{type:"text"}` prose (rendered as `Markdown`, a trailing ▍ while live) interleaved with `{type:"step"}` tool/step calls, in
-  the order they happened (a real run is text → a burst of calls → more text → more calls, NOT all
-  text on top of a flat step list). Consecutive `step` items fold into ONE activity group: while the
-  agent is mid-tools the tail group is a SINGLE pulsing row whose label swaps in place as each call
-  fires (no growing stack of dots); once prose resumes the group settles into a persistent "{final
-  action} · {n} steps" HEADER (a `complete` terminal dot — distinct from the filled `done` step dots)
-  that STAYS PUT and rolls the calls out BELOW it on press (a `step` can carry `peek` content;
-  `detail` is OPTIONAL — real tool I/O, never invented prose). The run ALWAYS ends on the agent's
-  text (no global terminal node). A `step` with
+  ORDERED `items` array — `{type:"text"}` prose (rendered as `Markdown`, a trailing ▍ while live),
+  `{type:"reasoning"}` thinking, and `{type:"step"}` tool/step calls, in the order they happened (a
+  real run is think → text → a burst of calls → more text, NOT all text on top of a flat step list).
+  **Progressive disclosure** — the feed shows the label + state; the detail is revealed on demand:
+  `reasoning` renders COLLAPSED (a muted "Thinking" row, press to reveal the Markdown), and a `step`'s
+  `input`/`output` are hidden in the row but open in a press-to-reveal **peek** (auto-built Input /
+  Output `JsonPanel`s; an `error` status + `errorText` paint the row red and show the reason there).
+  Pass an explicit `peek` node to render that reveal yourself (it overrides the auto panel); `detail`
+  is OPTIONAL — a short human summary (a count), never invented prose or raw I/O (that's `input`/`output`).
+  Consecutive `step` items fold into ONE activity group: while the agent is mid-tools the tail group is
+  a SINGLE pulsing row whose label swaps in place as each call fires (no growing stack of dots); once
+  prose resumes the group settles into a persistent "{final action} · {n} steps" HEADER (a `complete`
+  terminal dot — distinct from the filled `done` step dots) that STAYS PUT and rolls the calls out
+  BELOW it on press. The run ALWAYS ends on the agent's text (no global terminal node). A `step` with
   `kind:"tool"` carries the RAW tool name, resolved via a built-in map + an optional `labelForTool`
   override (localize THERE — the kit stays English); `stepsLabel` localizes the "{n} steps" suffix.
-  Transparent work, NEVER a bare spinner. On a canvas/composer app reach for `AgentProgress` —
-  `AgentRun` collapsed into a floating pill (avatar + current step) that EXPANDS on press; the composer
-  morphs into it while running, and reveals again when done.
+  Fed natively by `@lotics/app-sdk` `useAgentRun().items` (reasoning + per-tool I/O + state come for
+  free — no hand-assembly). Transparent work, NEVER a bare spinner. On a canvas/composer app reach for
+  `AgentProgress` — `AgentRun` collapsed into a floating pill (avatar + current step) that EXPANDS on
+  press; the composer morphs into it while running, and reveals again when done.
 - **Review before apply — ONE card + the batch engine, the BODY is compositional.** Every "the agent
   proposes → the human accepts / edits / dismisses → nothing auto-applies" surface wears the same
   `reviewCardStyle` + an optional `Confidence`. There are two primitives:
@@ -669,7 +677,9 @@ was only ever about the review surfaces' sparkles/severity glyphs, not functiona
     + cells align. The Divider BETWEEN rows is the resting separation. The COLUMNAR register is
     `Table`/`TableRow`/`TableCell` (columns once → header + widths can't drift; ONE hairline under the
     header; the rows below it Divider-separated; a sortable column shows its `SortHeader` sort glyph
-    ALWAYS so it reads as sortable). Make it SELECTABLE with the `Table` `leading` gutter + `selectAll`
+    ALWAYS so it reads as sortable). A `TableRow` with no `onPress` renders a STATIC read-only row (no
+    hover wash / pointer cursor) so `Table` also serves read-only tabular data (a fee breakdown, a spec
+    sheet), not just interactive registers. Make it SELECTABLE with the `Table` `leading` gutter + `selectAll`
     slot — a `CheckboxInput` per `TableRow` (`leading`) + a select-all in the header band, the ticked
     rows `marked`, paired with a `FloatingActionBar`; the selection state is the **`useSelection()`**
     hook (`selected`/`count`/`toggle`/`setAll`/`allSelected`/`indeterminate`/`clear` — gating which
@@ -878,7 +888,7 @@ CalloutText · CalloutActions) · kpi_card · kpi_strip · summary_line (Summary
 bar_chart · line_chart · pie_chart · ring_gauge · progress_bar · stacked_progress_bar · breakdown ·
 funnel (Funnel — conversion funnel: narrowing bars + the step rate as a bold aligned headline row, count below; `orientation` vertical|horizontal, `onSelect`/`selectedKey` press-to-drill; the subset/drop-off sibling of stacked_progress_bar's whole-split) ·
 status_grid (StatusGrid + StatusLegend) · heatmap (density cross-tab — colour-only, no numbers) · matrix (Matrix — the PIVOT cross-tab: band-compound `Matrix` root + `Matrix.Header` (corner + axis labels) + `Matrix.Grid` (`display` number|heat|both — the cells, pressable, the value IN the cell) + `Matrix.Totals` (row + column + grand) + `Matrix.Legend`; the data layer `matrixTotals`/`MatrixAxisItem`/`MatrixCellRef` import from `@lotics/ui/matrix_totals`. Pick over `Heatmap` when the NUMBER and totals matter, not just where it clusters) · legend_item · remainder_meter · allocation_row ·
-scan_field · file_dropzone · files_editor (FilesEditor — THE all-in-one attachment field: FileGrid + a toolbar (Upload primary · Select · Download all) that swaps into a batch SELECT mode (Select all · a Menu of Download/Share/Delete · Done; the per-tile ✕ is select-mode-only, never in the default view) + built-in gallery (Download + inline preview; no "open in new tab") + Alert-confirmed remove; host wires `files` + `onAdd`/`onRemove` (+ optional `uploads`, `onShareSelected`, `readOnly`, `labels`, `galleryLabels`, `gridMaxHeight` — cap the grid height so it scrolls and the toolbar pins, for a popover/drawer); mirrors the frontend cell_files_editor. Use FileGrid/FileRows bare only when you own the chrome) · file_grid (FileGrid — the upload-aware grid: completed files + a live upload queue in one surface; FileUpload/PendingUpload types; the add-files default) · uploading_thumbnail (UploadingThumbnail — the single in-flight upload tile FileGrid renders; reach for it only when hand-rolling a non-grid upload layout) · file_thumbnail · file_thumbnail_grid · file_row · file_rows (FileRows — batteries-included file list: row press → built-in gallery + a ⋯ Download/Open-external/Remove menu; composes FileRow + ActionMenu + FileGalleryModal) · file_preview (FilePreview — the universal inline preview: image/PDF/video/audio + Word via `@lotics/docx` + Excel/CSV via `@lotics/xlsx`; the heavy engines are LAZY (dynamic-imported, ~free until a doc of that type is opened) so custom-code APPS can use it too — they just add `@lotics/docx` + `@lotics/xlsx` to their deps. Renders to canvas/DOM, never a nested iframe — works in the sandboxed app iframe) ·
+scan_field · file_dropzone · files_editor (FilesEditor — THE all-in-one attachment field: FileGrid + a toolbar (Upload primary · Select · Download all) that swaps into a batch SELECT mode (Select all · a Menu of Download/Share/Delete · Done; the per-tile ✕ is select-mode-only, never in the default view; `selectTileRemove={false}` drops even that so delete is menu-only) + built-in gallery (Download + inline preview; no "open in new tab") + Alert-confirmed remove; host wires `files` + `onAdd`/`onRemove` (+ optional `uploads`, `onShareSelected`, `readOnly`, `selectTileRemove`, `labels`, `galleryLabels`, `gridMaxHeight` — cap the grid height so it scrolls and the toolbar pins, for a popover/drawer); mirrors the frontend cell_files_editor. Use FileGrid/FileRows bare only when you own the chrome) · file_grid (FileGrid — the upload-aware grid: completed files + a live upload queue in one surface; FileUpload/PendingUpload types; the add-files default) · uploading_thumbnail (UploadingThumbnail — the single in-flight upload tile FileGrid renders; reach for it only when hand-rolling a non-grid upload layout) · file_thumbnail · file_thumbnail_grid · file_row · file_rows (FileRows — batteries-included file list: row press → built-in gallery + a ⋯ Download/Open-external/Remove menu; composes FileRow + ActionMenu + FileGalleryModal) · file_preview (FilePreview — the universal inline preview: image/PDF/video/audio + Word via `@lotics/docx` + Excel/CSV via `@lotics/xlsx`; the heavy engines are LAZY (dynamic-imported, ~free until a doc of that type is opened) so custom-code APPS can use it too — they just add `@lotics/docx` + `@lotics/xlsx` to their deps. Renders to canvas/DOM, never a nested iframe — works in the sandboxed app iframe) ·
 file_gallery_modal · image_gallery · use_selection (useSelection — always-on multi-select state for a register/list: the `selected` Set + `toggle`/`setAll`/`allSelected`/`indeterminate`/`count`/`clear`; selectability gating stays with the caller. The checkbox-always-visible counterpart to `use_selection_mode`) · use_selection_mode · share_or_download · rotate_image · avatar · skeleton · activity_indicator · loading · divider ·
 spacer · stack · section_card · page_header · page_content · calendar (calendar/index.ts) · gantt ·
 comments_thread · agent_run (live streaming work feed) · agent_progress (its compact floating

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "7.12.1",
+  "version": "7.13.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

package/src/agent_run.tsx

@@ -4,6 +4,7 @@ import { colors } from "./colors";
 import { Text } from "./text";
 import { Icon, type IconName } from "./icon";
 import { Markdown } from "./markdown";
+import { JsonPanel, stringifyData } from "./json_panel";
 import { Peek } from "./peek";
 import { PressableHighlight } from "./pressable_highlight";
 import { Marker, type StepStatus } from "./stepper";
@@ -18,25 +19,35 @@ export interface AgentRunStep {
    *  it to a human label via the default map / `labelForTool`. A `step` carries
    *  an already-human label. */
   label: string;
-  /** A note under the label — should be REAL tool I/O (an arg, a count, a result
-   *  summary), never invented prose. Muted. */
-  detail?: string;
   status: AgentStepStatus;
   kind?: "step" | "tool";
-  /** Optional content shown in a `Peek` popover when the (expanded) step is
-   *  pressed — glance into what the step did (the tool input, a result summary). */
+  /** The tool call's input (arguments) and result. When present (and no explicit
+   *  `peek`), the feed reveals them ON DEMAND — a press-to-open peek with an Input /
+   *  Output panel — instead of cluttering the row; the row itself shows only the
+   *  label + state. */
+  input?: unknown;
+  output?: unknown;
+  /** The tool failure message (shown in the peek when `status` is `"error"`). */
+  errorText?: string;
+  /** A note under the label — a short, human summary (a count, a result summary),
+   *  never invented prose. Muted. For raw tool I/O prefer `input`/`output`. */
+  detail?: string;
+  /** Custom content for the press-to-open peek. Overrides the auto-built Input /
+   *  Output panel — pass this to render the reveal yourself. */
   peek?: ReactNode;
 }
 
 /**
- * The ordered transcript of a run, in the order it happened: prose the agent
- * streams (`text`) interleaved with the tools/steps it runs between prose
- * (`step`). A real run is a timeline — text, a burst of tool calls, more text,
- * more calls — so the feed is an ordered array, NOT a text block over a flat
- * step list. Consecutive `step` items collapse into ONE activity group.
+ * The ordered transcript of a run, in the order it happened: the agent's answer
+ * prose (`text`), its thinking (`reasoning`, shown collapsed / revealed on demand),
+ * and the tools it runs between prose (`step`). A real run is a timeline — text, a
+ * burst of tool calls, more text — so the feed is an ordered array, NOT a text
+ * block over a flat step list. Consecutive `step` items collapse into ONE activity
+ * group; a `step`'s `input`/`output` reveal in a peek on press.
  */
 export type AgentRunItem =
   | { type: "text"; id: string; text: string }
+  | { type: "reasoning"; id: string; text: string }
   | ({ type: "step" } & AgentRunStep);
 
 export interface AgentRunProps {
@@ -101,18 +112,19 @@ function stepLabel(s: AgentRunStep, labelForTool?: (toolName: string) => string
   return s.kind === "tool" ? resolveToolMeta(s.label, labelForTool).label : s.label;
 }
 
-// A run is a timeline of segments: prose, then a group of consecutive tool/step
-// calls, then more prose. Folding the flat item list into segments is what lets
-// the feed interleave instead of forcing all text to the top.
+// A run is a timeline of segments: prose, thinking, then a group of consecutive
+// tool calls, then more prose. Folding the flat item list into segments is what
+// lets the feed interleave instead of forcing all text to the top.
 type Segment =
   | { kind: "text"; id: string; text: string }
+  | { kind: "reasoning"; id: string; text: string }
   | { kind: "group"; id: string; steps: AgentRunStep[] };
 
 function toSegments(items: AgentRunItem[]): Segment[] {
   const segments: Segment[] = [];
   for (const item of items) {
-    if (item.type === "text") {
-      segments.push({ kind: "text", id: item.id, text: item.text });
+    if (item.type === "text" || item.type === "reasoning") {
+      segments.push({ kind: item.type, id: item.id, text: item.text });
       continue;
     }
     const { type: _t, ...step } = item;
@@ -158,6 +170,9 @@ export function AgentRun(props: AgentRunProps) {
             </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}
@@ -218,6 +233,66 @@ function StepBody({ label, detail, status }: { label: string; detail?: string; s
   );
 }
 
+// The press-to-open reveal for a tool step: the caller's `peek` wins; else Input /
+// Output / Error panels auto-built from the carried I/O; else nothing (no reveal).
+// Raw I/O stays OUT of the row — only shown here, on demand.
+function stepPeek(s: AgentRunStep): ReactNode {
+  if (s.peek) return s.peek;
+  const hasInput = s.input !== undefined;
+  const hasOutput = s.output !== undefined;
+  if (!hasInput && !hasOutput && !s.errorText) return null;
+  return (
+    <View style={{ gap: 8 }}>
+      {hasInput ? <JsonPanel title="Input" value={stringifyData(s.input)} /> : null}
+      {s.errorText ? (
+        <JsonPanel title="Error" value={s.errorText} />
+      ) : hasOutput ? (
+        <JsonPanel title="Output" value={stringifyData(s.output)} />
+      ) : null}
+    </View>
+  );
+}
+
+// A step's body, wrapped in a Peek when there's something to reveal (I/O or a
+// caller peek), plain otherwise.
+function StepContent({ s, label }: { s: AgentRunStep; label: string }) {
+  const peek = stepPeek(s);
+  const body = <StepBody label={label} detail={s.detail} status={s.status} />;
+  return peek ? (
+    <Peek accessibilityLabel={label} content={peek}>
+      {body}
+    </Peek>
+  ) : (
+    body
+  );
+}
+
+// Thinking — a muted, COLLAPSED "Thinking" disclosure (revealed on press), so the
+// agent's reasoning never crowds the answer. Pulses while it's still streaming.
+function ReasoningDisclosure(props: { text: string; streaming?: boolean; expanded: boolean; onToggle: () => void }) {
+  const { text, streaming, expanded, onToggle } = props;
+  return (
+    <View style={styles.group}>
+      <PressableHighlight focusRing onPress={onToggle} accessibilityRole="button" accessibilityLabel="Thinking" style={styles.row}>
+        <View style={styles.dotCol}>
+          <Marker status={streaming ? "current" : "done"} color={colors.zinc[400]} live={!!streaming} />
+        </View>
+        <View style={styles.rowBody}>
+          <Text size="sm" color="muted">
+            {streaming ? "Thinking…" : "Thinking"}
+          </Text>
+        </View>
+        {chevron(expanded ? "up" : "down")}
+      </PressableHighlight>
+      {expanded ? (
+        <View style={styles.reasoning}>
+          <Markdown>{text}</Markdown>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
 function SummaryLabel({ label, count, stepsLabel }: { label: string; count: number; stepsLabel: (n: number) => string }) {
   return (
     <Text size="sm" weight="medium" numberOfLines={1}>
@@ -269,13 +344,7 @@ function ToolGroup(props: {
     return (
       <View style={styles.group}>
         <ActivityRow markerStatus={final.status === "error" ? "warning" : "done"}>
-          {final.peek ? (
-            <Peek accessibilityLabel={resolve(final)} content={final.peek}>
-              <StepBody label={resolve(final)} detail={final.detail} status={final.status} />
-            </Peek>
-          ) : (
-            <StepBody label={resolve(final)} detail={final.detail} status={final.status} />
-          )}
+          <StepContent s={final} label={resolve(final)} />
         </ActivityRow>
       </View>
     );
@@ -300,13 +369,7 @@ function ToolGroup(props: {
         ? steps.map((s) => (
             <AnimationFadeIn key={s.id} translateY={4}>
               <ActivityRow markerStatus={s.status === "error" ? "warning" : "done"}>
-                {s.peek ? (
-                  <Peek accessibilityLabel={resolve(s)} content={s.peek}>
-                    <StepBody label={resolve(s)} detail={s.detail} status={s.status} />
-                  </Peek>
-                ) : (
-                  <StepBody label={resolve(s)} detail={s.detail} status={s.status} />
-                )}
+                <StepContent s={s} label={resolve(s)} />
               </ActivityRow>
             </AnimationFadeIn>
           ))
@@ -328,4 +391,6 @@ const styles = StyleSheet.create({
   },
   dotCol: { width: 18, alignItems: "center" },
   rowBody: { flex: 1 },
+  // Reasoning body aligns under the "Thinking" label (past the dot column + gap).
+  reasoning: { paddingLeft: 36, paddingRight: 8, paddingBottom: 4 },
 });

package/src/files_editor.tsx

@@ -64,6 +64,12 @@ export interface FilesEditorProps {
   onDownloadZipSelected?: (files: DisplayFile[]) => void;
   /** Remove a completed file. Omit (or `readOnly`) for a view-only surface. */
   onRemove?: (id: string) => void;
+  /** Show the per-tile ✕ during SELECT mode (default `true`). The default
+   *  (non-select) view NEVER shows a ✕ regardless — this governs select mode
+   *  only. Set `false` when batch Select → Menu → Delete is the sole delete
+   *  path (e.g. a cell popover), so a tile in select mode toggles selection and
+   *  nothing else. */
+  selectTileRemove?: boolean;
   /** Cancel an in-flight upload / retry a failed one (when using `uploads`). */
   onUploadRemove?: (id: string) => void;
   onRetry?: (id: string) => void;
@@ -112,6 +118,7 @@ export function FilesEditor(props: FilesEditorProps) {
     onUpload,
     onDownloadZipSelected,
     onRemove,
+    selectTileRemove = true,
     onUploadRemove,
     onRetry,
     onRetryAll,
@@ -163,9 +170,12 @@ export function FilesEditor(props: FilesEditorProps) {
       selectedIds={selectMode ? selected : undefined}
       onToggleSelect={selectMode ? toggle : undefined}
       onFilePress={selectMode ? undefined : (f) => setGalleryIndex(files.findIndex((x) => x.id === f.id))}
-      // The per-tile ✕ is a SELECT-mode affordance — the default view stays a clean
-      // preview surface so a stray tap can't drop a file.
-      onDisplayRemove={!readOnly && selectMode && onRemove ? (id) => confirmRemove(() => onRemove(id)) : undefined}
+      // The per-tile ✕ is a SELECT-mode affordance (opt-out via `selectTileRemove`)
+      // — the default view stays a clean preview surface so a stray tap can't drop a
+      // file, and a `selectTileRemove={false}` surface deletes only via the menu.
+      onDisplayRemove={
+        !readOnly && selectMode && selectTileRemove && onRemove ? (id) => confirmRemove(() => onRemove(id)) : undefined
+      }
       onUploadRemove={onUploadRemove}
       onRetry={onRetry}
       onRetryAll={onRetryAll}

package/src/table.tsx

@@ -144,11 +144,25 @@ export function TableRow(props: TableRowProps) {
   );
   const { focusVisible, focusProps } = useFocusRing();
 
+  // Read-only row (no `onPress`): a static, non-interactive row — no hover wash,
+  // no pointer cursor, no focusable door — so a `Table` can present read-only
+  // tabular data (a fee breakdown, a spec sheet) without implying the rows open
+  // something. An interactive row (with `onPress`) keeps the full register surface.
+  if (!onPress) {
+    return (
+      <View style={styles.staticRow}>
+        {ctx.leading > 0 ? <View style={{ width: ctx.leading }}>{leading}</View> : null}
+        <View style={[styles.door, { minHeight }]}>{cells}</View>
+        {ctx.trailing > 0 ? <View style={{ width: ctx.trailing, alignItems: "flex-end" }}>{trailing}</View> : null}
+      </View>
+    );
+  }
+
   return (
-    <PressableRow onPress={onPress ?? noop} selected={selected} marked={marked} style={styles.row}>
+    <PressableRow onPress={onPress} selected={selected} marked={marked} style={styles.row}>
       {ctx.leading > 0 ? <View style={{ width: ctx.leading }}>{leading}</View> : null}
       <Pressable
-        accessibilityRole={onPress ? "button" : undefined}
+        accessibilityRole="button"
         accessibilityLabel={accessibilityLabel}
         onPress={onPress}
         {...focusProps}
@@ -173,8 +187,6 @@ export function TableCell(props: TableCellProps) {
   return <View style={_column ? colStyle(_column) : undefined}>{children}</View>;
 }
 
-const noop = () => {};
-
 const styles = StyleSheet.create({
   // A hairline under the column header anchors the columns; the rows below it are
   // Divider-separated.
@@ -194,6 +206,14 @@ const styles = StyleSheet.create({
   row: {
     gap: 14,
   },
+  // Read-only row (a `TableRow` with no `onPress`): the register row's gutter +
+  // layout so cells still align with the header, minus the hover/press surface.
+  staticRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 14,
+    paddingHorizontal: 20,
+  },
   door: {
     flex: 1,
     flexDirection: "row",