agentfootprint-lens 0.10.0 → 0.11.0

package/dist/{chunk-Q2J47PIG.js → chunk-JMPGAQXS.js}

@@ -1,7 +1,7 @@
 import {
   deriveStages,
   fromAgentSnapshot
-} from "./chunk-R4XZ5FX5.js";
+} from "./chunk-NVS4VYQV.js";
 
 // src/react/Lens.tsx
 import { useEffect as useEffect5, useReducer, useState as useState7 } from "react";
@@ -1797,6 +1797,11 @@ var NODE_POSITIONS = {
 };
 var CONTEXT_NODE_POSITION = { x: 325, y: 120 };
 var TOOLS_NODE_POSITION = { x: -150, y: 120 };
+var SUBAGENT_BOX_WIDTH = 280;
+var SUBAGENT_BOX_HEIGHT = 90;
+var SUBAGENT_GAP = 30;
+var SUBAGENT_X = 100;
+var SUBAGENT_Y_START = 120;
 var NODE_SIZES = {
   user: { width: 150, height: 70 },
   agent: { width: 200, height: 190 },
@@ -1902,6 +1907,33 @@ function StageFlow({
     return s;
   }, [activeStage]);
   const edges = useMemo(() => {
+    const subs = timeline?.subAgents ?? [];
+    if (subs.length > 0) {
+      const out = [];
+      out.push({
+        id: `user\u2192subagent-${subs[0].id}`,
+        source: "user",
+        target: `subagent-${subs[0].id}`,
+        type: "labelled",
+        sourceHandle: "b-out",
+        targetHandle: "t-in",
+        data: { primitive: "message", active: false, isLoop: false, stage: void 0 }
+      });
+      for (let i = 0; i < subs.length - 1; i++) {
+        const a = subs[i];
+        const b = subs[i + 1];
+        out.push({
+          id: `subagent-${a.id}\u2192subagent-${b.id}`,
+          source: `subagent-${a.id}`,
+          target: `subagent-${b.id}`,
+          type: "labelled",
+          sourceHandle: "b-out",
+          targetHandle: "t-in",
+          data: { primitive: "message", active: false, isLoop: false, stage: void 0 }
+        });
+      }
+      return out;
+    }
     const byKey = /* @__PURE__ */ new Map();
     visible.forEach((s) => {
       byKey.set(`${s.from}\u2192${s.to}`, { from: s.from, to: s.to, lastStage: s });
@@ -1927,7 +1959,7 @@ function StageFlow({
         }
       };
     });
-  }, [visible, activeStage]);
+  }, [visible, activeStage, timeline]);
   const toolsRoster = useMemo(() => {
     if (!timeline || !activeStage || activeStage.iterIndex === void 0) return null;
     const turn = timeline.turns[activeStage.turnIndex];
@@ -1978,7 +2010,50 @@ function StageFlow({
     return [...bySource.values()];
   }, [activeInjectionsBySlot]);
   const isAgentRun = touched.has("tool") || contextSummary.length > 0 || toolsRoster !== null;
+  const subAgents = timeline?.subAgents ?? [];
+  const isMultiAgent = subAgents.length > 0;
   const nodes = useMemo(() => {
+    if (isMultiAgent) {
+      const userNode = {
+        id: "user",
+        type: "lens",
+        position: NODE_POSITIONS.user,
+        data: {
+          id: "user",
+          active: false,
+          touched: true
+        },
+        draggable: false
+      };
+      const subAgentNodes = subAgents.map((sa, i) => {
+        const turnCount = sa.turns.length;
+        const iterCount = sa.turns.reduce((acc, t2) => acc + t2.iterations.length, 0);
+        const toolCount = sa.tools.length;
+        return {
+          id: `subagent-${sa.id}`,
+          type: "subagent",
+          position: {
+            x: SUBAGENT_X,
+            y: SUBAGENT_Y_START + i * (SUBAGENT_BOX_HEIGHT + SUBAGENT_GAP)
+          },
+          data: {
+            id: sa.id,
+            name: sa.name,
+            turnCount,
+            iterCount,
+            toolCount,
+            // Active when the LAST turn of the LAST sub-agent matches
+            // the focused stage's owner — primitive heuristic until
+            // deriveStages tags stages with sub-agent. For MVP, the
+            // sub-agent at the end of the chain is the "currently
+            // running" one.
+            active: i === subAgents.length - 1
+          },
+          draggable: false
+        };
+      });
+      return [userNode, ...subAgentNodes];
+    }
     const containerBox = computeAgentContainerBox({
       showTool: touched.has("tool"),
       showContext: contextSummary.length > 0,
@@ -2050,6 +2125,8 @@ function StageFlow({
     return containerNode ? [containerNode, ...base] : base;
   }, [
     isAgentRun,
+    isMultiAgent,
+    subAgents,
     activeNodes,
     touched,
     activeStage,
@@ -2065,7 +2142,8 @@ function StageFlow({
       lens: LensNode,
       context: ContextNode,
       "tools-list": ToolsListNode,
-      "agent-container": AgentContainerNode
+      "agent-container": AgentContainerNode,
+      subagent: SubAgentNode
     }),
     []
   );
@@ -2395,6 +2473,98 @@ function AgentContainerNode({ data }) {
     }
   );
 }
+function SubAgentNode({ data }) {
+  const t = useLensTheme();
+  const d = data;
+  const accent = d.active ? t.accent : t.border;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      style: {
+        width: SUBAGENT_BOX_WIDTH,
+        height: SUBAGENT_BOX_HEIGHT,
+        position: "relative",
+        padding: "12px 14px",
+        borderRadius: 12,
+        background: d.active ? `color-mix(in srgb, ${t.accent} 12%, ${t.bgElev})` : t.bgElev,
+        border: `1.5px dashed ${accent}`,
+        color: t.text,
+        fontFamily: t.fontSans,
+        boxShadow: d.active ? `0 0 16px color-mix(in srgb, ${t.accent} 30%, transparent)` : `0 1px 3px rgba(0,0,0,0.12)`,
+        transition: "background 220ms ease, border-color 220ms ease, box-shadow 220ms ease"
+      },
+      children: [
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: -10,
+              left: 14,
+              padding: "1px 10px",
+              background: t.bg,
+              color: t.textMuted,
+              fontSize: 9,
+              fontWeight: 600,
+              textTransform: "uppercase",
+              letterSpacing: "0.08em",
+              whiteSpace: "nowrap"
+            },
+            children: [
+              "Agent \xB7 ",
+              /* @__PURE__ */ jsx3("span", { style: { color: t.text, fontFamily: t.fontMono }, children: d.name })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+              marginTop: 4
+            },
+            children: [
+              /* @__PURE__ */ jsx3(NodeIcon, { id: "agent", color: d.active ? t.accent : t.text }),
+              /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column" }, children: [
+                /* @__PURE__ */ jsx3("span", { style: { fontSize: 14, fontWeight: 600, color: t.text }, children: "LLM" }),
+                /* @__PURE__ */ jsx3("span", { style: { fontSize: 10, color: t.textSubtle }, children: "The API call" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: 12,
+              marginTop: 8,
+              fontSize: 10,
+              color: t.textMuted,
+              fontFamily: t.fontMono
+            },
+            children: [
+              /* @__PURE__ */ jsxs3("span", { children: [
+                /* @__PURE__ */ jsx3("strong", { style: { color: t.text }, children: d.iterCount }),
+                " iter",
+                d.iterCount === 1 ? "" : "s"
+              ] }),
+              /* @__PURE__ */ jsxs3("span", { children: [
+                /* @__PURE__ */ jsx3("strong", { style: { color: t.text }, children: d.toolCount }),
+                " tool",
+                d.toolCount === 1 ? "" : "s"
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3(Handle, { type: "target", position: Position.Top, id: "t-in", style: HANDLE_STYLE }),
+        /* @__PURE__ */ jsx3(Handle, { type: "source", position: Position.Bottom, id: "b-out", style: HANDLE_STYLE })
+      ]
+    }
+  );
+}
 function ContextNode({ data }) {
   const t = useLensTheme();
   const d = data;
@@ -4328,18 +4498,34 @@ function Lens({
   const autoLens = useLiveTimeline();
   const [, bumpSnapshot] = useReducer((x) => x + 1, 0);
   useEffect5(() => {
-    if (!runnerProp?.observe) return;
+    if (!runnerProp) return;
     autoLens.reset();
+    const onTurnComplete = () => bumpSnapshot();
+    if (runnerProp.attachRecorder) {
+      const detachRecorder = runnerProp.attachRecorder(autoLens.recorder);
+      const stopObserve = runnerProp.observe?.((event) => {
+        const type = event && typeof event === "object" ? event.type : void 0;
+        if (type === "turn_end" || type === "agentfootprint.agent.turn_complete") {
+          onTurnComplete();
+        }
+        bumpSnapshot();
+      });
+      return () => {
+        detachRecorder();
+        stopObserve?.();
+      };
+    }
+    if (!runnerProp.observe) return;
     const stop = runnerProp.observe((event) => {
       autoLens.ingest(event);
       const type = event && typeof event === "object" ? event.type : void 0;
       if (type === "turn_end" || type === "agentfootprint.agent.turn_complete") {
-        bumpSnapshot();
+        onTurnComplete();
       }
     });
     return stop;
   }, [runnerProp]);
-  const usingRunner = !!runnerProp?.observe;
+  const usingRunner = !!runnerProp?.observe || !!runnerProp?.attachRecorder;
   const resolvedTimeline = usingRunner ? autoLens.timeline : timeline;
   const resolvedSnapshot = usingRunner ? runnerProp?.getSnapshot?.() ?? null : runtimeSnapshot ?? null;
   const resolvedNarrative = usingRunner ? runnerProp?.getNarrativeEntries?.() : narrativeEntries;
@@ -5171,4 +5357,4 @@ export {
   ToolCallInspector,
   useLens
 };
-//# sourceMappingURL=chunk-Q2J47PIG.js.map
+//# sourceMappingURL=chunk-JMPGAQXS.js.map