@lotics/ui 7.12.2 → 7.13.0

package/AGENTS.md

@@ -415,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:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "7.12.2",
+  "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 },
 });