agentfootprint-lens 0.18.0 → 0.19.0

package/dist/index.cjs

@@ -416,6 +416,7 @@ __export(src_exports, {
   makeRootNodeId: () => makeRootNodeId,
   mergeOutputs: () => mergeOutputs,
   pinUnderParent: () => pinUnderParent,
+  routingPathTo: () => routingPathTo,
   selectAgentInstances: () => selectAgentInstances,
   selectCommentaryAt: () => selectCommentaryAt,
   selectCommentaryRanges: () => selectCommentaryRanges,
@@ -5815,7 +5816,7 @@ function shortType(type) {
 }
 
 // src/react/SkillGraphFlow.tsx
-var import_react13 = require("react");
+var import_react13 = __toESM(require("react"), 1);
 var import_react14 = require("@xyflow/react");
 var import_style2 = require("@xyflow/react/dist/style.css");
 
@@ -5852,7 +5853,13 @@ function layoutSkillGraph(graph, opts = {}) {
     if (!g.hasNode(source) || !g.hasNode(e.to)) continue;
     const id = `sge${i++}:${source}->${e.to}`;
     g.setEdge(source, e.to, {}, id);
-    flowEdges.push({ id, source, target: e.to, label: e.label, dashed: e.kind === "model" });
+    flowEdges.push({
+      id,
+      source,
+      target: e.to,
+      label: e.label,
+      dashed: e.kind === "model"
+    });
   }
   import_dagre2.default.layout(g);
   const toFlow = (id, kind, label) => {
@@ -5873,6 +5880,26 @@ function layoutSkillGraph(graph, opts = {}) {
   for (const n of graph.nodes) nodes.push(toFlow(n.id, n.kind, n.label ?? n.id));
   return { nodes, edges: flowEdges };
 }
+function routingPathTo(graph, nodeId) {
+  const labelById = new Map(graph.nodes.map((n) => [n.id, n.label ?? n.id]));
+  const incoming = /* @__PURE__ */ new Map();
+  for (const e of graph.edges) incoming.set(e.to, { from: e.from, branch: e.label });
+  const steps = [];
+  const seen = /* @__PURE__ */ new Set([nodeId]);
+  let cur = nodeId;
+  while (cur) {
+    const edge = incoming.get(cur);
+    if (!edge || edge.from === null) break;
+    if (seen.has(edge.from)) break;
+    seen.add(edge.from);
+    steps.push({
+      predicate: labelById.get(edge.from) ?? edge.from,
+      branch: edge.branch ?? ""
+    });
+    cur = edge.from;
+  }
+  return steps.reverse();
+}
 
 // src/react/SkillGraphFlow.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
@@ -5947,7 +5974,17 @@ var SkillBoxNode = ({ data }) => {
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: d.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "span",
+          {
+            style: {
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            },
+            children: d.label
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react14.Handle, { type: "source", position: import_react14.Position.Bottom, style: HANDLE_STYLE, isConnectable: false })
       ]
     }
@@ -6000,9 +6037,34 @@ var NODE_TYPES = {
   sgPredicate: PredicateNode,
   sgSkill: SkillBoxNode
 };
+function RoutingPath({ steps }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { marginTop: 12 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { fontSize: 11, color: T.textMuted, marginBottom: 6 }, children: "REACHED WHEN" }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexWrap: "wrap",
+          alignItems: "center",
+          gap: 6
+        },
+        children: steps.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react13.default.Fragment, { children: [
+          i > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { color: T.textMuted }, children: "\u2192" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { style: { fontSize: 12, color: T.textSecondary }, children: [
+            s.predicate,
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { style: { color: s.branch === "yes" ? T.srcSkill : T.textMuted }, children: s.branch })
+          ] })
+        ] }, `${s.predicate}-${i}`))
+      }
+    )
+  ] });
+}
 function DetailPanel({
   node,
   detail,
+  routingPath,
   width
 }) {
   const panel = {
@@ -6022,19 +6084,30 @@ function DetailPanel({
   const isPredicate = node.kind === "predicate";
   const accent = isPredicate ? T.edgeDecision : T.srcSkill;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("aside", { style: panel, "data-testid": "skill-graph-detail", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      "span",
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "div",
       {
         style: {
-          fontSize: 11,
-          fontWeight: 700,
-          textTransform: "uppercase",
-          letterSpacing: 0.5,
-          color: accent
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          marginBottom: 4
         },
-        children: isPredicate ? "\u25C7 Decision" : "\u25A2 Skill"
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "span",
+          {
+            style: {
+              fontSize: 11,
+              fontWeight: 700,
+              textTransform: "uppercase",
+              letterSpacing: 0.5,
+              color: accent
+            },
+            children: isPredicate ? "\u25C7 Decision" : "\u25A2 Skill"
+          }
+        )
       }
-    ) }),
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { style: { margin: "0 0 12px", fontSize: 16 }, children: detail?.title ?? node.label ?? node.id }),
     isPredicate && !detail && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { style: { color: T.textSecondary, fontSize: 13, margin: 0 }, children: [
       "Routes to its ",
@@ -6044,6 +6117,7 @@ function DetailPanel({
       " subtree based on this predicate, evaluated every iteration."
     ] }),
     detail?.description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { style: { color: T.textSecondary, fontSize: 13, margin: "0 0 12px" }, children: detail.description }),
+    routingPath.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RoutingPath, { steps: routingPath }),
     detail?.meta?.map((row) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { fontSize: 12, marginBottom: 6 }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { style: { color: T.textMuted }, children: [
         row.label,
@@ -6149,7 +6223,10 @@ var SkillGraphFlow = ({
       height: n.height,
       draggable: false,
       selectable: n.kind !== "start",
-      data: { label: n.label, isSelected: n.id === selectedId }
+      data: {
+        label: n.label,
+        isSelected: n.id === selectedId
+      }
     }));
     const rfEdges2 = laid.edges.map((e) => ({
       id: e.id,
@@ -6163,7 +6240,12 @@ var SkillGraphFlow = ({
       },
       labelStyle: { fill: T.textMuted, fontFamily: T.fontSans, fontSize: 11 },
       labelBgStyle: { fill: T.bgPrimary, fillOpacity: 0.85 },
-      markerEnd: { type: import_react14.MarkerType.ArrowClosed, color: T.edgeDefault, width: 16, height: 16 }
+      markerEnd: {
+        type: import_react14.MarkerType.ArrowClosed,
+        color: T.edgeDefault,
+        width: 16,
+        height: 16
+      }
     }));
     return { rfNodes: rfNodes2, rfEdges: rfEdges2 };
   }, [graph, showStart, selectedId]);
@@ -6172,6 +6254,10 @@ var SkillGraphFlow = ({
     [graph.nodes, selectedId]
   );
   const detail = selectedNode && detailFor ? detailFor(selectedNode) : void 0;
+  const routingPath = (0, import_react13.useMemo)(
+    () => selectedNode ? routingPathTo(graph, selectedNode.id) : [],
+    [graph, selectedNode]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
@@ -6227,7 +6313,15 @@ var SkillGraphFlow = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DetailPanel, { node: selectedNode, detail, width: panelWidth })
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            DetailPanel,
+            {
+              node: selectedNode,
+              detail,
+              routingPath,
+              width: panelWidth
+            }
+          )
         ] })
       ]
     }
@@ -6415,6 +6509,7 @@ function assertLensGroupOutput(value) {
   makeRootNodeId,
   mergeOutputs,
   pinUnderParent,
+  routingPathTo,
   selectAgentInstances,
   selectCommentaryAt,
   selectCommentaryRanges,