agentfootprint-lens 0.62.0 → 0.63.1

package/README.md

@@ -78,7 +78,7 @@ changes.
 |---|---|
 | `agentfootprint-lens/why` | Replay a recording as the agent's own milestones. `<WhyLens recording={...} />` takes the recording straight (`recordRun()`'s `{ snapshot, events, structure }`, or the `persistRecording` envelope), validates it at mount, and mounts the shipped `<Lens>` shell on the milestone axis — plus the axis helpers (`scrubAxisFor`, `stepForCommitIdx`, `stepForRuntimeStageId`, `resolveNavigation`) for hosts holding one cursor across views. |
 | `agentfootprint-lens/skillgraph` | Debug how a run routed through its skills. `<SkillGraphDebugger recorder={...} />` plus its headless selectors (`selectSkillRoute`, `selectSkillBeats`, `selectSkillTopology`, `selectSkillFrameContext`, `stepForRuntimeStageId`, `resolveNavigation`). |
-| `agentfootprint-lens/context` | What the model HAD at a stop — the served document of that epoch on top (the Served tab itself: pieces, messages, tools, verdicts, delta since the previous call) — and what it was BUILT from beneath: the record key by key, who wrote each, what moved; a long value opens in place (0.54.0). `<ContextView runner={...} />` walks the milestone axis on its own; hand it `cursor` and it follows the ONE cursor (0.53.1). Under the record, the **Findings** band (0.61.0): on an armed run (`.findings()`, agentfootprint 9.101) the model's own ledger at the stop, folded for reading — facts, conflicts as first seen (each witness with its current standing, no verdict), open, ruled out, noise, undeclared — every string off the record, absent on an unarmed run. Beside it, the **Reasoning** lens (0.62.0): `<ReasoningLens runner={...} shared={shared} />` — the same ledger read BY CALL, one card per tool call at the cursor (basis before, result, current standing after, the model's words quoted) and an answer card; absent on an unarmed run. |
+| `agentfootprint-lens/context` | What the model HAD at a stop — the served document of that epoch on top (the Served tab itself: pieces, messages, tools, verdicts, delta since the previous call) — and what it was BUILT from beneath: the record key by key, who wrote each, what moved; a long value opens in place (0.54.0). `<ContextView runner={...} />` walks the milestone axis on its own; hand it `cursor` and it follows the ONE cursor (0.53.1). Under the record, the **Findings** band (0.61.0): on an armed run (`.findings()`, agentfootprint 9.101) the model's own ledger at the stop, folded for reading — facts, conflicts as first seen (each witness with its current standing, no verdict), open, ruled out, noise, undeclared — every string off the record, absent on an unarmed run. Beside it, the **Reasoning** lens (0.62.0): `<ReasoningLens runner={...} shared={shared} />` — the same ledger read BY CALL, one card per tool call at the cursor (basis before, result, current standing after, the model's words quoted) and an answer card; absent on an unarmed run. Its `exchange` view (0.63.0) lays the same beats out as the transcript between model and tools — the call with its `_findings` JSON, the result, the ticket served instead, the findings piece, the answer — only what crossed the wire. |
 
 The axis model in three sentences: one run leaves one causal trace, and each
 lens replays one AXIS of it — the Why reading scrubs the milestones, the Flow

package/dist/{chunk-P4XTLLMA.js → chunk-LXQNLCPV.js}

@@ -601,8 +601,8 @@ var list2 = { margin: "4px 0 0", paddingLeft: 18 };
 var btn = { fontSize: 12, padding: "2px 8px" };
 
 // src/react/components/ReasoningLens.tsx
-import { useMemo as useMemo3 } from "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useMemo as useMemo3, useState as useState2 } from "react";
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var LABELS3 = Object.freeze({
   lens: "Reasoning",
   calls: "calls",
@@ -637,7 +637,19 @@ var LABELS3 = Object.freeze({
   nextSteps: "nextSteps",
   noise: "noise",
   serve: "serve",
-  answerAsk: "answer ask"
+  answerAsk: "answer ask",
+  /** The exchange view (0.63.0). */
+  view: "view",
+  cards: "cards",
+  exchange: "exchange",
+  model: "model",
+  tool: "tool",
+  call: "call",
+  served: "served",
+  args: "args",
+  findings: "_findings",
+  fromLedger: "from ledger",
+  lines: "lines"
 });
 var isRecord2 = (v) => typeof v === "object" && v !== null;
 function basisOf(row2) {
@@ -689,9 +701,9 @@ function resultsById(history, toolResults) {
 function collapsedById(asSent) {
   const out = /* @__PURE__ */ new Map();
   for (const m of asSent ?? []) {
-    if (!isRecord2(m) || m.role !== "tool") continue;
+    if (!isRecord2(m) || m.role !== "tool" || typeof m.content !== "string") continue;
     const t = collapsedTicketOf(m.content);
-    if (t !== void 0) out.set(t.toolCallId, t.standing);
+    if (t !== void 0) out.set(t.toolCallId, { standing: t.standing, content: m.content });
   }
   return out;
 }
@@ -721,7 +733,7 @@ function foldReasoning(input) {
         toolCallId: id,
         before,
         ...results.has(id) ? { result: resultShapeOf(results.get(id)) } : {},
-        ...onWire !== void 0 ? { collapsed: onWire } : {},
+        ...onWire !== void 0 ? { collapsed: onWire.standing } : {},
         ...after !== void 0 ? { after } : {},
         conflicts: Object.freeze(witnessed.get(id) ?? [])
       })
@@ -744,6 +756,105 @@ function foldReasoning(input) {
     findings
   });
 }
+function emittedById(history) {
+  const out = /* @__PURE__ */ new Map();
+  for (const m of history ?? []) {
+    if (!isRecord2(m) || m.role !== "assistant" || !Array.isArray(m.toolCalls)) continue;
+    for (const c of m.toolCalls) {
+      if (!isRecord2(c) || typeof c.id !== "string" || out.has(c.id)) continue;
+      out.set(c.id, {
+        id: c.id,
+        ...typeof c.name === "string" ? { name: c.name } : {},
+        ...isRecord2(c.args) ? { args: c.args } : {}
+      });
+    }
+  }
+  return out;
+}
+function ledgerFindings(before) {
+  return {
+    basis: before.basis,
+    ...before.expect !== void 0 ? { expect: before.expect } : {},
+    ...before.proposition !== void 0 ? { proposition: before.proposition } : {},
+    ...before.predicts !== void 0 ? { predicts: before.predicts } : {}
+  };
+}
+function callBeatOf(card, emitted) {
+  const id = card.toolCallId;
+  const e = emitted.get(id);
+  const toolName = e?.name ?? card.before.toolName;
+  if (e === void 0) {
+    return Object.freeze({
+      kind: "call",
+      side: "model",
+      toolCallId: id,
+      ...toolName !== void 0 ? { toolName } : {},
+      findings: ledgerFindings(card.before),
+      fromLedger: true
+    });
+  }
+  const { _findings, ...rest } = e.args ?? {};
+  return Object.freeze({
+    kind: "call",
+    side: "model",
+    toolCallId: id,
+    ...toolName !== void 0 ? { toolName } : {},
+    ..._findings !== void 0 ? { findings: _findings } : {},
+    ...e.args !== void 0 ? { args: Object.freeze(rest) } : {},
+    fromLedger: false
+  });
+}
+function resultBeatOf(card, content, collapsed, toolName) {
+  const placed = placedTicketOf(content);
+  return Object.freeze({
+    kind: "result",
+    side: "tool",
+    toolCallId: card.toolCallId,
+    ...toolName !== void 0 ? { toolName } : {},
+    content,
+    ...placed !== void 0 ? { placed } : {},
+    ...collapsed !== void 0 ? { collapsed } : {},
+    ...card.after !== void 0 ? { after: card.after } : {}
+  });
+}
+function findingsPieceOf(pieces) {
+  for (const p of pieces ?? []) {
+    if (!isRecord2(p) || p.source !== "findings" || typeof p.text !== "string") continue;
+    return Object.freeze({ kind: "served", side: "model", source: p.source, text: p.text });
+  }
+  return void 0;
+}
+var nonEmpty = (v) => typeof v === "string" && v.length > 0;
+function answerOf(input) {
+  const history = input.history ?? [];
+  const last = history[history.length - 1];
+  if (isRecord2(last) && last.role === "assistant" && nonEmpty(last.content) && (!Array.isArray(last.toolCalls) || last.toolCalls.length === 0)) {
+    return Object.freeze({ kind: "answer", side: "model", text: last.content, from: "history" });
+  }
+  if (nonEmpty(input.finalContent)) return Object.freeze({ kind: "answer", side: "model", text: input.finalContent, from: "finalContent" });
+  const calls = input.llmLatestToolCalls;
+  if (nonEmpty(input.llmLatestContent) && (!Array.isArray(calls) || calls.length === 0)) {
+    return Object.freeze({ kind: "answer", side: "model", text: input.llmLatestContent, from: "llmLatestContent" });
+  }
+  return void 0;
+}
+function foldExchange(input) {
+  const reasoning = foldReasoning(input);
+  const emitted = emittedById(input.history);
+  const results = resultsById(input.history, input.toolResults);
+  const collapsed = collapsedById(input.asSent);
+  const beats = [];
+  for (const card of reasoning.cards) {
+    const call = callBeatOf(card, emitted);
+    beats.push(call);
+    if (results.has(card.toolCallId)) beats.push(resultBeatOf(card, results.get(card.toolCallId), collapsed.get(card.toolCallId), call.toolName));
+  }
+  const served = findingsPieceOf(input.pieces);
+  if (served !== void 0) beats.push(served);
+  const answer = answerOf(input);
+  if (answer !== void 0) beats.push(answer);
+  return Object.freeze({ beats: Object.freeze(beats), reasoning });
+}
 function positionsOf2(snapshot) {
   return tagAxisPositions(snapshot, MILESTONE_AXIS, []) ?? [];
 }
@@ -757,6 +868,7 @@ function arrayValue(context, path) {
 }
 function ReasoningLens(props) {
   const { runner, events, shared, recorder } = props;
+  const [view, setView] = useState2(props.defaultView ?? "cards");
   const fresh = snapshotOfRunner(runner);
   const logKey = snapshotLogKey(fresh);
   const snapshot = useMemo3(() => fresh, [runner, logKey]);
@@ -772,32 +884,82 @@ function ReasoningLens(props) {
     [snapshot, cursor.at.runtimeStageId, cursor.at.commitIdx, events]
   );
   const rows = arrayValue(context, "findingsLedger");
-  const fold = useMemo3(() => {
+  const exchange = useMemo3(() => {
     if (rows === void 0) return void 0;
     const toolResults = arrayValue(context, "toolResults");
     const history = arrayValue(context, "history");
     const wire = context.served?.row.view.messages.asSent;
-    return foldReasoning({
+    const pieces = context.served?.row.view.system.pieces;
+    return foldExchange({
       rows,
       ...toolResults !== void 0 ? { toolResults } : {},
       ...history !== void 0 ? { history } : {},
       ...Array.isArray(wire) ? { asSent: wire } : {},
+      ...Array.isArray(pieces) ? { pieces } : {},
       findingsServe: keyValue(context, "findingsServe"),
-      findingsAnswerAsk: keyValue(context, "findingsAnswerAsk")
+      findingsAnswerAsk: keyValue(context, "findingsAnswerAsk"),
+      finalContent: keyValue(context, "finalContent"),
+      llmLatestContent: keyValue(context, "llmLatestContent"),
+      llmLatestToolCalls: keyValue(context, "llmLatestToolCalls")
     });
   }, [context, rows]);
-  if (fold === void 0) return null;
-  return /* @__PURE__ */ jsxs3("div", { style: panel2, "data-testid": "reasoning-lens", "data-step": cursor.at.step, "data-commit": cursor.at.commitIdx, "data-calls": fold.cards.length, children: [
-    /* @__PURE__ */ jsxs3("div", { style: header2, children: [
-      /* @__PURE__ */ jsx3("span", { style: title2, children: LABELS3.lens }),
-      /* @__PURE__ */ jsxs3("span", { style: dim3, children: [
-        fold.cards.length,
-        " ",
-        LABELS3.calls
-      ] })
-    ] }),
-    fold.cards.map((card) => /* @__PURE__ */ jsx3(Card, { card }, card.toolCallId)),
-    fold.answer !== void 0 && /* @__PURE__ */ jsx3(Answer, { answer: fold.answer })
+  const mover = props.cursor === void 0 && shared !== void 0 && cursor.total > 0 && cursor.at.step >= 0;
+  if (exchange === void 0) return null;
+  const fold = exchange.reasoning;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      style: panel2,
+      "data-testid": "reasoning-lens",
+      "data-step": cursor.at.step,
+      "data-commit": cursor.at.commitIdx,
+      "data-calls": fold.cards.length,
+      "data-view": view,
+      children: [
+        /* @__PURE__ */ jsxs3("div", { style: header2, children: [
+          /* @__PURE__ */ jsx3("span", { style: title2, children: LABELS3.lens }),
+          /* @__PURE__ */ jsxs3("span", { style: dim3, children: [
+            fold.cards.length,
+            " ",
+            LABELS3.calls
+          ] }),
+          /* @__PURE__ */ jsx3(ViewToggle, { view, onView: setView })
+        ] }),
+        mover && /* @__PURE__ */ jsx3("div", { "data-testid": "reasoning-transport", children: /* @__PURE__ */ jsx3(
+          TimeTravel,
+          {
+            total: cursor.total,
+            focusSeq: Math.max(0, cursor.at.step),
+            onFocusChange: (n) => cursor.moveTo(n),
+            isLive: false,
+            compact: true
+          }
+        ) }),
+        view === "cards" && /* @__PURE__ */ jsxs3("div", { style: column, "data-testid": "reasoning-cards", children: [
+          fold.cards.map((card) => /* @__PURE__ */ jsx3(Card, { card }, card.toolCallId)),
+          fold.answer !== void 0 && /* @__PURE__ */ jsx3(Answer, { answer: fold.answer })
+        ] }),
+        view === "exchange" && /* @__PURE__ */ jsx3(Exchange, { beats: exchange.beats })
+      ]
+    }
+  );
+}
+function ViewToggle({ view, onView }) {
+  const button = (value, label) => /* @__PURE__ */ jsx3(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      "aria-selected": view === value,
+      "data-testid": `reasoning-view-${value}`,
+      style: toggleButton(view === value),
+      onClick: () => onView(value),
+      children: label
+    }
+  );
+  return /* @__PURE__ */ jsxs3("span", { role: "tablist", "aria-label": LABELS3.view, style: toggleRow, "data-testid": "reasoning-view-toggle", children: [
+    button("cards", LABELS3.cards),
+    button("exchange", LABELS3.exchange)
   ] });
 }
 var SHORT_ID = 12;
@@ -998,6 +1160,127 @@ function Answer({ answer }) {
     ] }, label)) })
   ] });
 }
+function Exchange({ beats }) {
+  return /* @__PURE__ */ jsx3("div", { style: exchangeStyle, "data-testid": "reasoning-exchange", "data-beats": beats.length, children: beats.map((beat, i) => /* @__PURE__ */ jsx3(Beat, { beat }, i)) });
+}
+function Beat({ beat }) {
+  const side = beat.side === "model" ? modelBeat : toolBeat;
+  const id = beat.kind === "call" || beat.kind === "result" ? beat.toolCallId : void 0;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      style: { ...cardStyle, ...side },
+      "data-testid": "reasoning-beat",
+      "data-side": beat.side,
+      "data-kind": beat.kind,
+      ...id !== void 0 ? { "data-tool-call-id": id } : {},
+      children: [
+        beat.kind === "call" && /* @__PURE__ */ jsx3(CallBody, { beat }),
+        beat.kind === "result" && /* @__PURE__ */ jsx3(ResultBody, { beat }),
+        beat.kind === "served" && /* @__PURE__ */ jsx3(ServedBody, { beat }),
+        beat.kind === "answer" && /* @__PURE__ */ jsx3(AnswerBody, { beat })
+      ]
+    }
+  );
+}
+function CallBody({ beat }) {
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsxs3("div", { style: row, children: [
+      /* @__PURE__ */ jsx3("span", { style: dim3, children: LABELS3.model }),
+      /* @__PURE__ */ jsx3("span", { style: strong, children: LABELS3.call }),
+      beat.toolName !== void 0 && /* @__PURE__ */ jsx3("code", { style: strong, children: beat.toolName }),
+      /* @__PURE__ */ jsx3("code", { style: mono3, children: beat.toolCallId }),
+      beat.fromLedger && /* @__PURE__ */ jsx3(Chip, { testId: "reasoning-from-ledger", color: T.warning, children: LABELS3.fromLedger })
+    ] }),
+    beat.findings !== void 0 && /* @__PURE__ */ jsxs3("div", { "data-testid": "reasoning-beat-findings", children: [
+      /* @__PURE__ */ jsx3("span", { style: dim3, children: LABELS3.findings }),
+      /* @__PURE__ */ jsx3(Clipped, { text: pretty(beat.findings) })
+    ] }),
+    beat.args !== void 0 && /* @__PURE__ */ jsxs3("div", { "data-testid": "reasoning-beat-args", children: [
+      /* @__PURE__ */ jsx3("span", { style: dim3, children: LABELS3.args }),
+      /* @__PURE__ */ jsx3(Clipped, { text: pretty(beat.args) })
+    ] })
+  ] });
+}
+function ResultBody({ beat }) {
+  const standing = beat.after?.standing;
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsxs3("div", { style: row, children: [
+      /* @__PURE__ */ jsx3("span", { style: dim3, children: LABELS3.tool }),
+      /* @__PURE__ */ jsx3("span", { style: strong, children: LABELS3.result }),
+      beat.toolName !== void 0 && /* @__PURE__ */ jsx3("code", { style: strong, children: beat.toolName }),
+      /* @__PURE__ */ jsx3("code", { style: mono3, children: beat.toolCallId }),
+      beat.collapsed !== void 0 && /* @__PURE__ */ jsxs3(Chip, { testId: "reasoning-collapsed", color: T.textMuted, title: beat.collapsed.standing, children: [
+        LABELS3.collapsed,
+        " ",
+        beat.collapsed.standing
+      ] })
+    ] }),
+    beat.placed !== void 0 ? /* @__PURE__ */ jsx3(ResultLine, { result: { placed: beat.placed } }) : /* @__PURE__ */ jsx3(Clipped, { text: prettyContent(beat.content), testId: "reasoning-beat-content" }),
+    beat.collapsed !== void 0 && /* @__PURE__ */ jsxs3("div", { "data-testid": "reasoning-beat-ticket", children: [
+      /* @__PURE__ */ jsx3("span", { style: dim3, children: LABELS3.ticket }),
+      /* @__PURE__ */ jsx3(Clipped, { text: prettyContent(beat.collapsed.content) })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { style: row, "data-testid": "reasoning-after", children: [
+      /* @__PURE__ */ jsx3("span", { style: dim3, children: LABELS3.standing }),
+      /* @__PURE__ */ jsx3(Chip, { testId: "reasoning-standing", color: standing !== void 0 ? standingColor(standing) : T.textMuted, children: standing ?? LABELS3.undeclared }),
+      beat.after?.declaredOn !== void 0 && /* @__PURE__ */ jsxs3("span", { style: dim3, "data-testid": "reasoning-declared-on", children: [
+        LABELS3.declaredOn,
+        " ",
+        /* @__PURE__ */ jsx3("code", { style: mono3, children: beat.after.declaredOn === "answer" ? beat.after.declaredOn : beat.after.declaredOn.toolCallId })
+      ] })
+    ] }),
+    beat.after !== void 0 && /* @__PURE__ */ jsx3(QuotedLine, { after: beat.after })
+  ] });
+}
+function ServedBody({ beat }) {
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsxs3("div", { style: row, children: [
+      /* @__PURE__ */ jsx3("span", { style: dim3, children: LABELS3.model }),
+      /* @__PURE__ */ jsx3("span", { style: strong, children: LABELS3.served }),
+      /* @__PURE__ */ jsx3("code", { style: mono3, children: beat.source })
+    ] }),
+    /* @__PURE__ */ jsx3(Clipped, { text: beat.text, testId: "reasoning-beat-content" })
+  ] });
+}
+function AnswerBody({ beat }) {
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsxs3("div", { style: row, children: [
+      /* @__PURE__ */ jsx3("span", { style: dim3, children: LABELS3.model }),
+      /* @__PURE__ */ jsx3("span", { style: strong, children: LABELS3.answer }),
+      /* @__PURE__ */ jsx3("code", { style: mono3, "data-testid": "reasoning-answer-from", children: beat.from })
+    ] }),
+    /* @__PURE__ */ jsx3(Clipped, { text: beat.text, testId: "reasoning-beat-content" })
+  ] });
+}
+var CLIP_LINES = 12;
+function Clipped({ text, testId }) {
+  const lines = text.split("\n");
+  const head = lines.slice(0, CLIP_LINES).join("\n");
+  const tail = lines.slice(CLIP_LINES);
+  return /* @__PURE__ */ jsxs3("div", { "data-testid": testId ?? "reasoning-clipped", "data-lines": lines.length, children: [
+    /* @__PURE__ */ jsx3("pre", { style: pre2, "data-testid": "reasoning-pre", children: head }),
+    tail.length > 0 && /* @__PURE__ */ jsxs3("details", { style: detailsStyle, "data-testid": "reasoning-more", children: [
+      /* @__PURE__ */ jsxs3("summary", { style: summaryStyle, children: [
+        tail.length,
+        " ",
+        LABELS3.lines
+      ] }),
+      /* @__PURE__ */ jsx3("pre", { style: pre2, "data-testid": "reasoning-pre", children: tail.join("\n") })
+    ] })
+  ] });
+}
+function pretty(value) {
+  return JSON.stringify(value, null, 2) ?? String(value);
+}
+function prettyContent(content) {
+  if (typeof content !== "string") return pretty(content);
+  try {
+    return pretty(JSON.parse(content));
+  } catch {
+    return content;
+  }
+}
 function standingColor(standing) {
   if (standing === "fact") return T.success;
   if (standing === "ruled-out") return T.error;
@@ -1045,6 +1328,24 @@ var chip = {
   whiteSpace: "nowrap"
 };
 var detailsStyle = { fontSize: 12 };
+var column = { display: "flex", flexDirection: "column", gap: 8 };
+var exchangeStyle = column;
+var modelBeat = { alignSelf: "flex-start", width: "max(50%,min(100%,320px))", borderColor: T.primary };
+var toolBeat = { alignSelf: "flex-end", width: "max(50%,min(100%,320px))", borderColor: T.border };
+var pre2 = { ...mono3, margin: "2px 0 0", whiteSpace: "pre-wrap", maxWidth: "100%" };
+var toggleRow = { display: "inline-flex", gap: 4, marginLeft: "auto" };
+function toggleButton(on) {
+  return {
+    fontSize: 10.5,
+    padding: "1px 6px",
+    borderRadius: 6,
+    border: "1px solid",
+    borderColor: on ? T.primary : T.border,
+    background: on ? T.bgTertiary : T.bgElevated,
+    color: on ? T.textPrimary : T.textSecondary,
+    cursor: "pointer"
+  };
+}
 var summaryStyle = { cursor: "pointer", color: T.textMuted };
 var detailsBody = { display: "flex", flexDirection: "column", gap: 2, paddingTop: 4 };
 var list3 = { margin: "2px 0 0", paddingLeft: 18 };
@@ -1055,6 +1356,7 @@ export {
   ContextView,
   LABELS3 as LABELS2,
   foldReasoning,
+  foldExchange,
   ReasoningLens
 };
-//# sourceMappingURL=chunk-P4XTLLMA.js.map
+//# sourceMappingURL=chunk-LXQNLCPV.js.map