agentfootprint-lens 0.13.0 → 0.13.1

package/dist/index.cjs

@@ -1217,12 +1217,31 @@ var RunTreeFlow = ({
     }
   } : void 0;
   const containerRef = (0, import_react6.useRef)(null);
+  const graphFingerprint = (0, import_react6.useMemo)(() => {
+    let h = 0;
+    for (const n of nodes) {
+      const s = `${n.id}|${n.position.x}|${n.position.y}`;
+      for (let i = 0; i < s.length; i++) h = (h << 5) - h + s.charCodeAt(i) | 0;
+    }
+    return `${nodes.length}:${edges.length}:${h}`;
+  }, [nodes, edges]);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       ref: containerRef,
       "data-fp-lens": "run-tree-flow",
-      style: { width: "100%", height: "100%", minHeight: 320, background: "var(--lens-bg, transparent)" },
+      style: {
+        width: "100%",
+        height: "100%",
+        // minHeight keeps the flowchart usable when the parent is
+        // shorter than the natural layout. minWidth was missing and
+        // let parents squeeze us to ~280px, which made React Flow
+        // auto-zoom to ~30% and render nodes invisibly small.
+        // 480px keeps nodes legible in side-panel layouts.
+        minHeight: 320,
+        minWidth: 480,
+        background: "var(--lens-bg, transparent)"
+      },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: LENS_DEFAULT_CSS }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
@@ -1246,9 +1265,9 @@ var RunTreeFlow = ({
             preventScrolling: false,
             proOptions: { hideAttribution: true },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FitViewOnResize, { depKey: nodes.length, containerRef }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FitViewOnResize, { depKey: graphFingerprint, containerRef }),
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react7.Background, { gap: 20, size: 1, color: "var(--lens-background-dots, #e5e7eb)" }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react7.Controls, { showInteractive: false })
+              nodes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react7.Controls, { showInteractive: false })
             ]
           }
         )
@@ -1261,11 +1280,13 @@ function FitViewOnResize({
   containerRef
 }) {
   const { fitView } = (0, import_react7.useReactFlow)();
+  const nodesInitialized = (0, import_react7.useNodesInitialized)();
   (0, import_react6.useEffect)(() => {
+    if (!nodesInitialized) return;
     const handler = () => {
       requestAnimationFrame(() => fitView({ padding: 0.3, duration: 200 }));
     };
-    const timer = setTimeout(handler, 50);
+    handler();
     const el = containerRef.current;
     let observer;
     if (el && typeof ResizeObserver !== "undefined") {
@@ -1274,11 +1295,10 @@ function FitViewOnResize({
     }
     window.addEventListener("resize", handler);
     return () => {
-      clearTimeout(timer);
       observer?.disconnect();
       window.removeEventListener("resize", handler);
     };
-  }, [fitView, depKey, containerRef]);
+  }, [fitView, depKey, containerRef, nodesInitialized]);
   return null;
 }
 function buildFlow(view, graph, selectedId) {
@@ -1309,7 +1329,12 @@ function buildFlow(view, graph, selectedId) {
         selected: agent.groupId === selectedId,
         ...agent.primitiveKind ? { primitiveKind: agent.primitiveKind } : {}
       },
-      style: { width: AGENT_GROUP_WIDTH, height: AGENT_GROUP_HEIGHT },
+      // xyflow v12: parent sizing comes from top-level `width`/`height`.
+      // Setting `style.width/height` AS WELL appears to confuse RF —
+      // children get clipped to a phantom zero-size box. Single source
+      // of truth: top-level only.
+      width: AGENT_GROUP_WIDTH,
+      height: AGENT_GROUP_HEIGHT,
       selectable: true,
       draggable: false
     });
@@ -1317,7 +1342,6 @@ function buildFlow(view, graph, selectedId) {
     nodes.push({
       id: `${agent.groupId}-ctx`,
       parentId: agent.groupId,
-      extent: "parent",
       position: CONTEXT_BIN_IN_GROUP,
       type: "contextBin",
       data: { chips: chipsForAgent },
@@ -1328,7 +1352,6 @@ function buildFlow(view, graph, selectedId) {
     nodes.push({
       id: agent.llmId,
       parentId: agent.groupId,
-      extent: "parent",
       position: LLM_IN_GROUP,
       type: "llm",
       data: { updatedSlot },
@@ -1871,32 +1894,66 @@ var ReActStepBody = ({ node }) => {
   if (node.llmModel) rows.push(["model", node.llmModel]);
   if (node.slotUpdated) rows.push(["what landed in", node.slotUpdated]);
   if (duration !== void 0 && duration > 0) rows.push(["duration", `${Math.round(duration)}ms`]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: sectionStyle, children: [
-    rows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "grid", gap: 4, fontSize: 12, padding: 8 }, children: rows.map(([label, value]) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Field, { label, children: value }, label)) }),
-    (() => {
-      const engineered = (node.injections ?? []).filter(
-        (inj) => !BASELINE_SOURCES2.has(inj.source)
-      );
-      if (engineered.length === 0) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { padding: "0 8px 8px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: sectionLabelStyle, children: "Context engineering" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { style: { margin: "4px 0 0", paddingLeft: 14, fontSize: 11, color: T.textSecondary }, children: engineered.map((inj, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("li", { style: { padding: "2px 0" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("code", { style: { fontSize: 11 }, children: [
-            "[",
-            inj.slot,
-            "] ",
-            inj.source,
-            inj.sourceId ? `:${inj.sourceId}` : ""
-          ] }),
-          inj.contentSummary && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { opacity: 0.7, marginLeft: 6 }, children: [
-            "\xB7 ",
-            inj.contentSummary
-          ] })
-        ] }, i)) })
-      ] });
-    })()
+  const ioSections = ioSectionsFor(node);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: sectionStyle, children: [
+      rows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "grid", gap: 4, fontSize: 12, padding: 8 }, children: rows.map(([label, value]) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Field, { label, children: value }, label)) }),
+      (() => {
+        const engineered = (node.injections ?? []).filter(
+          (inj) => !BASELINE_SOURCES2.has(inj.source)
+        );
+        if (engineered.length === 0) return null;
+        return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { padding: "0 8px 8px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: sectionLabelStyle, children: "Context engineering" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { style: { margin: "4px 0 0", paddingLeft: 14, fontSize: 11, color: T.textSecondary }, children: engineered.map((inj, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("li", { style: { padding: "2px 0" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("code", { style: { fontSize: 11 }, children: [
+              "[",
+              inj.slot,
+              "] ",
+              inj.source,
+              inj.sourceId ? `:${inj.sourceId}` : ""
+            ] }),
+            inj.contentSummary && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { opacity: 0.7, marginLeft: 6 }, children: [
+              "\xB7 ",
+              inj.contentSummary
+            ] })
+          ] }, i)) })
+        ] });
+      })()
+    ] }),
+    ioSections.map((s) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PayloadSection, { label: s.label, payload: s.payload, emptyHint: "(none)" }, s.label))
   ] });
 };
+function ioSectionsFor(node) {
+  const out = [];
+  switch (node.kind) {
+    case "llm->tool": {
+      if (node.assistantText) {
+        out.push({ label: "LLM's reasoning", payload: node.assistantText });
+      }
+      if (node.toolArgs !== void 0) {
+        out.push({ label: "Tool input (args)", payload: node.toolArgs });
+      }
+      break;
+    }
+    case "tool->llm": {
+      if (node.toolResult !== void 0) {
+        out.push({ label: "Tool result sent to LLM", payload: node.toolResult });
+      }
+      break;
+    }
+    case "llm->user": {
+      if (node.assistantText) {
+        out.push({ label: "Final answer", payload: node.assistantText });
+      }
+      break;
+    }
+    case "user->llm":
+    default:
+      break;
+  }
+  return out;
+}
 var BASELINE_SOURCES2 = /* @__PURE__ */ new Set([
   "user",
   // current-turn user message
@@ -1914,15 +1971,20 @@ var Field = ({ label, children }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx
   /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: T.textPrimary }, children })
 ] });
 function prettyPrint(value) {
-  try {
-    const str = JSON.stringify(value, null, 2);
-    if (str.length > 4e3) {
-      return str.slice(0, 4e3) + "\n\n... (truncated; " + (str.length - 4e3) + " chars)";
+  let str;
+  if (typeof value === "string") {
+    str = value;
+  } else {
+    try {
+      str = JSON.stringify(value, null, 2);
+    } catch {
+      return "(unable to serialize)";
     }
-    return str;
-  } catch {
-    return "(unable to serialize)";
   }
+  if (str.length > 4e3) {
+    return str.slice(0, 4e3) + "\n\n... (truncated; " + (str.length - 4e3) + " chars)";
+  }
+  return str;
 }
 var panelStyle = {
   display: "flex",
@@ -2202,6 +2264,42 @@ var EngineerView = ({ stepGraph, summary, log, humanizer, total, focusStep, onFo
   const focusedNode = stepGraph?.nodes[focusStep];
   const focusedRuntimeStageId = focusedNode?.runtimeStageId;
   const currentStepLabel = focusedNode?.label;
+  const stepToEventSeq = (0, import_react11.useMemo)(() => {
+    if (!stepGraph || log.length === 0) return [];
+    const firstSeq = log[0].seq;
+    const seqs = [];
+    let lastResolvedSeq = firstSeq;
+    const anchorSide = (kind) => kind === "llm->user" ? "last" : "first";
+    for (const node of stepGraph.nodes) {
+      const id = node.runtimeStageId;
+      let resolved = -1;
+      if (id !== void 0) {
+        const side = anchorSide(node.kind);
+        if (side === "first") {
+          for (const e of log) {
+            const stageId = e.event.meta?.runtimeStageId;
+            if (stageId === id) {
+              resolved = e.seq;
+              break;
+            }
+          }
+        } else {
+          for (let i = log.length - 1; i >= 0; i--) {
+            const stageId = log[i].event.meta?.runtimeStageId;
+            if (stageId === id) {
+              resolved = log[i].seq;
+              break;
+            }
+          }
+        }
+      }
+      if (resolved === -1) resolved = lastResolvedSeq;
+      seqs.push(resolved);
+      lastResolvedSeq = resolved;
+    }
+    return seqs;
+  }, [stepGraph, log]);
+  const focusedSeq = stepToEventSeq[focusStep] ?? -1;
   const handleNodeSelect = (nodeId) => {
     if (!stepGraph) return;
     const idx = stepGraph.nodes.findIndex((n) => n.id === nodeId);
@@ -2249,7 +2347,7 @@ var EngineerView = ({ stepGraph, summary, log, humanizer, total, focusStep, onFo
               overflow: "hidden"
             },
             children: [
-              leftExpanded ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+              agentNodes.length >= 2 && (leftExpanded ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                   "div",
                   {
@@ -2291,7 +2389,7 @@ var EngineerView = ({ stepGraph, summary, log, humanizer, total, focusStep, onFo
                   side: "left",
                   onClick: () => setLeftExpanded(true)
                 }
-              ),
+              )),
               /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                 "div",
                 {
@@ -2351,20 +2449,21 @@ var EngineerView = ({ stepGraph, summary, log, humanizer, total, focusStep, onFo
                 "div",
                 {
                   style: {
-                    width: 320,
-                    flexShrink: 0,
+                    // Flex-shrink 1 with min/max so the panel yields width to
+                    // the central flowchart when the container is narrow. The
+                    // hard 320px-fixed width was squeezing the flowchart to
+                    // ~280px in compact layouts (e.g., embedded in a 30%
+                    // sidebar), causing React Flow to auto-zoom to ~30% and
+                    // render nodes invisibly small.
+                    flex: "0 1 320px",
+                    minWidth: 220,
+                    maxWidth: 360,
                     display: "flex",
                     flexDirection: "column",
                     overflow: "hidden",
                     borderLeft: `1px solid ${T.border}`
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                    NodeDetailPanel,
-                    {
-                      ...focusedNode ? { node: focusedNode } : {},
-                      onClose: () => onFocusChange(0)
-                    }
-                  )
+                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NodeDetailPanel, { ...focusedNode ? { node: focusedNode } : {} })
                 }
               )
             ]
@@ -2397,7 +2496,8 @@ var EngineerView = ({ stepGraph, summary, log, humanizer, total, focusStep, onFo
                 log,
                 humanizer,
                 liveStreamLine,
-                ...focusedRuntimeStageId ? { focusRuntimeStageId: focusedRuntimeStageId } : {}
+                isLastStep: stepGraph != null && focusStep === stepGraph.nodes.length - 1,
+                focusedSeq
               }
             )
           }
@@ -2406,16 +2506,16 @@ var EngineerView = ({ stepGraph, summary, log, humanizer, total, focusStep, onFo
     }
   );
 };
-var Commentary = ({ log, humanizer, focusRuntimeStageId, liveStreamLine }) => {
+var Commentary = ({ log, humanizer, focusedSeq, liveStreamLine, isLastStep }) => {
   const containerRef = (0, import_react11.useRef)(null);
   const firstFocusRef = (0, import_react11.useRef)(null);
   (0, import_react11.useEffect)(() => {
-    if (!focusRuntimeStageId || !firstFocusRef.current) return;
+    if (focusedSeq === void 0 || focusedSeq < 0 || !firstFocusRef.current) return;
     firstFocusRef.current.scrollIntoView({
       block: "center",
       behavior: "smooth"
     });
-  }, [focusRuntimeStageId]);
+  }, [focusedSeq]);
   let firstFocusAssigned = false;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "div",
@@ -2434,24 +2534,14 @@ var Commentary = ({ log, humanizer, focusRuntimeStageId, liveStreamLine }) => {
         if (log.length === 0) {
           return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { color: T.textSecondary, fontStyle: "italic" }, children: "No moments yet \u2014 run a sample to see commentary." });
         }
-        const idOf = (e) => (
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          e.event.meta?.runtimeStageId
-        );
-        let lastFocusIdx = -1;
-        if (focusRuntimeStageId !== void 0) {
-          for (let i = 0; i < log.length; i++) {
-            if (idOf(log[i]) === focusRuntimeStageId) lastFocusIdx = i;
-          }
-        }
-        const cutoff = lastFocusIdx === -1 ? log.length - 1 : lastFocusIdx;
+        const cutoff = isLastStep || focusedSeq === void 0 || focusedSeq < 0 ? log.length - 1 : Math.max(0, log.findIndex((e) => e.seq === focusedSeq));
         const visible = log.slice(0, cutoff + 1);
         return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
           visible.map((entry, i) => {
             const line = humanizer(entry.event);
             if (line === null) return null;
-            const focused = focusRuntimeStageId !== void 0 && idOf(entry) === focusRuntimeStageId;
-            const isLastFocused = focused && i === lastFocusIdx;
+            const focused = focusedSeq !== void 0 && entry.seq === focusedSeq;
+            const isLastFocused = focused && i === cutoff;
             return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
               "div",
               {