agentfootprint-lens 0.17.0 → 0.18.0

package/dist/index.cjs

@@ -395,6 +395,8 @@ __export(src_exports, {
   LensRecorder: () => LensRecorder,
   LensSnapshotRecorder: () => LensSnapshotRecorder,
   RunTreeView: () => RunTreeView,
+  SKILL_GRAPH_START_ID: () => SKILL_GRAPH_START_ID,
+  SkillGraphFlow: () => SkillGraphFlow,
   SummaryCard: () => SummaryCard,
   TimeTravel: () => TimeTravel,
   buildLLMText: () => buildLLMText,
@@ -405,6 +407,7 @@ __export(src_exports, {
   humanizeWith: () => humanizeWith,
   isContextEngineering: () => isContextEngineering,
   layoutLensGraph: () => layoutLensGraph,
+  layoutSkillGraph: () => layoutSkillGraph,
   lensGroupTranslator: () => lensGroupTranslator,
   lensRecorder: () => lensRecorder,
   lensSnapshotRecorder: () => lensSnapshotRecorder,
@@ -5811,12 +5814,432 @@ function shortType(type) {
   return type.replace(/^agentfootprint\./, "");
 }
 
-// src/react/hooks/useStepFocus.ts
+// src/react/SkillGraphFlow.tsx
 var import_react13 = require("react");
+var import_react14 = require("@xyflow/react");
+var import_style2 = require("@xyflow/react/dist/style.css");
+
+// src/react/skillGraphFlowLayout.ts
+var import_dagre2 = __toESM(require("dagre"), 1);
+var SKILL_GRAPH_START_ID = "__start__";
+var SIZES = {
+  start: { width: 104, height: 40 },
+  predicate: { width: 188, height: 96 },
+  skill: { width: 192, height: 56 }
+};
+function sizeFor(kind) {
+  return SIZES[kind];
+}
+function layoutSkillGraph(graph, opts = {}) {
+  const showStart = opts.showStart ?? true;
+  const g = new import_dagre2.default.graphlib.Graph({ multigraph: true });
+  g.setGraph({
+    rankdir: "TB",
+    ranksep: opts.rankSep ?? 64,
+    nodesep: opts.nodeSep ?? 40,
+    marginx: 8,
+    marginy: 8
+  });
+  g.setDefaultEdgeLabel(() => ({}));
+  const usesStart = showStart && graph.edges.some((e) => e.from === null);
+  if (usesStart) g.setNode(SKILL_GRAPH_START_ID, { ...SIZES.start });
+  for (const n of graph.nodes) g.setNode(n.id, { ...SIZES[n.kind] });
+  const flowEdges = [];
+  let i = 0;
+  for (const e of graph.edges) {
+    if (e.from === null && !usesStart) continue;
+    const source = e.from === null ? SKILL_GRAPH_START_ID : e.from;
+    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" });
+  }
+  import_dagre2.default.layout(g);
+  const toFlow = (id, kind, label) => {
+    const p = g.node(id);
+    return {
+      id,
+      kind,
+      label,
+      x: p.x - p.width / 2,
+      // dagre centers; xyflow positions by top-left
+      y: p.y - p.height / 2,
+      width: p.width,
+      height: p.height
+    };
+  };
+  const nodes = [];
+  if (usesStart) nodes.push(toFlow(SKILL_GRAPH_START_ID, "start", "\u25B6 start"));
+  for (const n of graph.nodes) nodes.push(toFlow(n.id, n.kind, n.label ?? n.id));
+  return { nodes, edges: flowEdges };
+}
+
+// src/react/SkillGraphFlow.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var HANDLE_STYLE = {
+  opacity: 0,
+  width: 1,
+  height: 1,
+  border: "none",
+  background: "transparent",
+  pointerEvents: "none"
+};
+var StartNode = ({ data }) => {
+  const d = data;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "div",
+    {
+      style: {
+        ...sizeFor("start"),
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: 999,
+        background: T.bgTertiary,
+        color: T.textSecondary,
+        border: `1px solid ${T.border}`,
+        fontFamily: T.fontSans,
+        fontSize: 12,
+        fontWeight: 600,
+        boxSizing: "border-box"
+      },
+      children: [
+        d.label,
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react14.Handle, { type: "source", position: import_react14.Position.Bottom, style: HANDLE_STYLE, isConnectable: false })
+      ]
+    }
+  );
+};
+var SkillBoxNode = ({ data }) => {
+  const d = data;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "div",
+    {
+      style: {
+        ...sizeFor("skill"),
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        padding: "0 12px",
+        borderRadius: 10,
+        background: T.bgSecondary,
+        color: T.textPrimary,
+        border: `${d.isSelected ? 2 : 1}px solid ${d.isSelected ? T.srcSkill : T.border}`,
+        boxShadow: d.isSelected ? `0 0 0 3px ${T.srcSkill}33` : "none",
+        fontFamily: T.fontSans,
+        fontSize: 13,
+        fontWeight: 600,
+        boxSizing: "border-box",
+        cursor: "pointer"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react14.Handle, { type: "target", position: import_react14.Position.Top, style: HANDLE_STYLE, isConnectable: false }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "span",
+          {
+            "aria-hidden": true,
+            style: {
+              flex: "0 0 auto",
+              width: 8,
+              height: 8,
+              borderRadius: 2,
+              background: T.srcSkill
+            }
+          }
+        ),
+        /* @__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 })
+      ]
+    }
+  );
+};
+var PredicateNode = ({ data }) => {
+  const d = data;
+  const { width, height } = sizeFor("predicate");
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { width, height, position: "relative", cursor: "pointer" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react14.Handle, { type: "target", position: import_react14.Position.Top, style: HANDLE_STYLE, isConnectable: false }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          background: T.bgSecondary,
+          border: `${d.isSelected ? 2 : 1}px solid ${d.isSelected ? T.edgeDecision : T.border}`,
+          boxShadow: d.isSelected ? `0 0 0 3px ${T.edgeDecision}33` : "none",
+          clipPath: "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)"
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "0 32px",
+          textAlign: "center",
+          color: T.textPrimary,
+          fontFamily: T.fontSans,
+          fontSize: 12,
+          fontWeight: 600,
+          lineHeight: 1.2,
+          boxSizing: "border-box"
+        },
+        children: d.label
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react14.Handle, { type: "source", position: import_react14.Position.Bottom, style: HANDLE_STYLE, isConnectable: false })
+  ] });
+};
+var NODE_TYPES = {
+  sgStart: StartNode,
+  sgPredicate: PredicateNode,
+  sgSkill: SkillBoxNode
+};
+function DetailPanel({
+  node,
+  detail,
+  width
+}) {
+  const panel = {
+    width,
+    flex: `0 0 ${width}px`,
+    borderLeft: `1px solid ${T.border}`,
+    background: T.bgPrimary,
+    color: T.textPrimary,
+    fontFamily: T.fontSans,
+    padding: 16,
+    overflow: "auto",
+    boxSizing: "border-box"
+  };
+  if (!node) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("aside", { style: panel, "data-testid": "skill-graph-detail", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { style: { color: T.textMuted, fontSize: 13, margin: 0 }, children: "Click a node to inspect it. Diamonds are decision predicates; boxes are skills that load just-in-time when their path is chosen." }) });
+  }
+  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",
+      {
+        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 ",
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: "yes" }),
+      " / ",
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: "no" }),
+      " 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 }),
+    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,
+        ": "
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { color: T.textSecondary }, children: row.value })
+    ] }, row.label)),
+    detail?.tools && detail.tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { marginTop: 12 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { fontSize: 11, color: T.textMuted, marginBottom: 6 }, children: [
+        "UNLOCKS ",
+        detail.tools.length,
+        " TOOL",
+        detail.tools.length === 1 ? "" : "S"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: detail.tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "span",
+        {
+          style: {
+            fontFamily: T.fontMono,
+            fontSize: 11,
+            padding: "2px 6px",
+            borderRadius: 6,
+            background: T.bgTertiary,
+            color: T.textSecondary
+          },
+          children: tool
+        },
+        tool
+      )) })
+    ] }),
+    detail?.body && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "pre",
+      {
+        style: {
+          marginTop: 12,
+          padding: 10,
+          borderRadius: 8,
+          background: T.bgSecondary,
+          color: T.textSecondary,
+          fontFamily: T.fontMono,
+          fontSize: 11.5,
+          lineHeight: 1.45,
+          whiteSpace: "pre-wrap",
+          wordBreak: "break-word",
+          overflow: "auto"
+        },
+        children: detail.body
+      }
+    )
+  ] });
+}
+var SkillGraphFlow = ({
+  graph,
+  detailFor,
+  selectedId: selectedIdProp,
+  defaultSelectedId = null,
+  onSelectNode,
+  showStart = true,
+  hideDetailPanel = false,
+  defaultPanelWidth = 320,
+  height = "100%",
+  className,
+  style
+}) => {
+  const isControlled = selectedIdProp !== void 0;
+  const [internalSelected, setInternalSelected] = (0, import_react13.useState)(defaultSelectedId);
+  const selectedId = isControlled ? selectedIdProp : internalSelected;
+  const select = (0, import_react13.useCallback)(
+    (id) => {
+      if (!isControlled) setInternalSelected(id);
+      onSelectNode?.(id);
+    },
+    [isControlled, onSelectNode]
+  );
+  const containerRef = (0, import_react13.useRef)(null);
+  const [panelWidth, setPanelWidth] = (0, import_react13.useState)(defaultPanelWidth);
+  const [dragging, setDragging] = (0, import_react13.useState)(false);
+  const startResize = (0, import_react13.useCallback)((e) => {
+    e.preventDefault();
+    setDragging(true);
+    const onMove = (ev) => {
+      const rect = containerRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const next = rect.right - ev.clientX;
+      const max = Math.max(240, rect.width - 240);
+      setPanelWidth(Math.min(max, Math.max(220, next)));
+    };
+    const onUp = () => {
+      setDragging(false);
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  }, []);
+  const { rfNodes, rfEdges } = (0, import_react13.useMemo)(() => {
+    const laid = layoutSkillGraph(graph, { showStart });
+    const rfNodes2 = laid.nodes.map((n) => ({
+      id: n.id,
+      type: n.kind === "start" ? "sgStart" : n.kind === "predicate" ? "sgPredicate" : "sgSkill",
+      position: { x: n.x, y: n.y },
+      width: n.width,
+      height: n.height,
+      draggable: false,
+      selectable: n.kind !== "start",
+      data: { label: n.label, isSelected: n.id === selectedId }
+    }));
+    const rfEdges2 = laid.edges.map((e) => ({
+      id: e.id,
+      source: e.source,
+      target: e.target,
+      label: e.label,
+      style: {
+        stroke: T.edgeDefault,
+        strokeWidth: 1.5,
+        strokeDasharray: e.dashed ? "5 4" : void 0
+      },
+      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 }
+    }));
+    return { rfNodes: rfNodes2, rfEdges: rfEdges2 };
+  }, [graph, showStart, selectedId]);
+  const selectedNode = (0, import_react13.useMemo)(
+    () => selectedId ? graph.nodes.find((n) => n.id === selectedId) ?? null : null,
+    [graph.nodes, selectedId]
+  );
+  const detail = selectedNode && detailFor ? detailFor(selectedNode) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        display: "flex",
+        height,
+        width: "100%",
+        background: T.bgPrimary,
+        // While dragging, suppress text selection + let the divider own the cursor.
+        userSelect: dragging ? "none" : void 0,
+        cursor: dragging ? "col-resize" : void 0,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react14.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          import_react14.ReactFlow,
+          {
+            nodes: rfNodes,
+            edges: rfEdges,
+            nodeTypes: NODE_TYPES,
+            onNodeClick: (_, node) => select(node.id),
+            onPaneClick: () => select(null),
+            nodesDraggable: false,
+            nodesConnectable: false,
+            elementsSelectable: true,
+            fitView: true,
+            fitViewOptions: { padding: 0.2 },
+            minZoom: 0.1,
+            maxZoom: 1.5,
+            proOptions: { hideAttribution: true },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react14.Background, { color: T.border, gap: 20 }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react14.Controls, { showInteractive: false })
+            ]
+          }
+        ) }) }),
+        !hideDetailPanel && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "div",
+            {
+              role: "separator",
+              "aria-orientation": "vertical",
+              "data-testid": "skill-graph-resizer",
+              onMouseDown: startResize,
+              title: "Drag to resize",
+              style: {
+                flex: "0 0 6px",
+                cursor: "col-resize",
+                background: dragging ? T.srcSkill : T.border,
+                transition: dragging ? void 0 : "background 120ms"
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DetailPanel, { node: selectedNode, detail, width: panelWidth })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/react/hooks/useStepFocus.ts
+var import_react15 = require("react");
 function useStepFocus(max) {
-  const [focus, setFocus] = (0, import_react13.useState)(Math.max(0, max));
-  const prevMax = (0, import_react13.useRef)(max);
-  (0, import_react13.useEffect)(() => {
+  const [focus, setFocus] = (0, import_react15.useState)(Math.max(0, max));
+  const prevMax = (0, import_react15.useRef)(max);
+  (0, import_react15.useEffect)(() => {
     const wasLiveBefore = focus >= prevMax.current;
     if (wasLiveBefore) setFocus(max);
     prevMax.current = max;
@@ -5829,32 +6252,32 @@ function useStepFocus(max) {
 }
 
 // src/react/hooks/useStepView.ts
-var import_react14 = require("react");
+var import_react16 = require("react");
 function useStepView(graph, log, focusIndex, drillPath) {
-  return (0, import_react14.useMemo)(
+  return (0, import_react16.useMemo)(
     () => selectStepView({ graph, log, focusIndex, drillPath }),
     [graph, log, focusIndex, drillPath]
   );
 }
 
 // src/react/hooks/useCommentarySlider.ts
-var import_react15 = require("react");
-var import_react16 = require("react");
+var import_react17 = require("react");
+var import_react18 = require("react");
 function useCommentarySlider(recorder, initialMode = "commentary") {
-  const version = (0, import_react16.useSyncExternalStore)(
+  const version = (0, import_react18.useSyncExternalStore)(
     (listener) => recorder.subscribe(listener),
     () => recorder.getVersion(),
     () => recorder.getVersion()
   );
-  const [commitIdx, setCommitIdxRaw] = (0, import_react15.useState)(0);
-  const [mode, setMode] = (0, import_react15.useState)(initialMode);
-  const [drill, setDrill] = (0, import_react15.useState)(void 0);
-  const ranges = (0, import_react15.useMemo)(
+  const [commitIdx, setCommitIdxRaw] = (0, import_react17.useState)(0);
+  const [mode, setMode] = (0, import_react17.useState)(initialMode);
+  const [drill, setDrill] = (0, import_react17.useState)(void 0);
+  const ranges = (0, import_react17.useMemo)(
     () => selectCommentaryRanges(recorder.boundary),
     // version captured at render time — re-derives on every notify.
     [recorder, version]
   );
-  const totalCommits = (0, import_react15.useMemo)(() => {
+  const totalCommits = (0, import_react17.useMemo)(() => {
     const live = recorder.getCommitCount();
     if (live > 0) return live;
     if (ranges.length === 0) return 0;
@@ -5865,11 +6288,11 @@ function useCommentarySlider(recorder, initialMode = "commentary") {
     }
     return max + 1;
   }, [recorder, ranges, version]);
-  const snapPoints = (0, import_react15.useMemo)(() => {
+  const snapPoints = (0, import_react17.useMemo)(() => {
     if (mode === "commit") return [];
     return ranges.map((r) => r.startIdx);
   }, [mode, ranges]);
-  const setCommitIdx = (0, import_react15.useCallback)(
+  const setCommitIdx = (0, import_react17.useCallback)(
     (idx) => {
       if (!Number.isFinite(idx)) return;
       const max = Math.max(0, totalCommits - 1);
@@ -5880,7 +6303,7 @@ function useCommentarySlider(recorder, initialMode = "commentary") {
     },
     [totalCommits, drill]
   );
-  const drillInto = (0, import_react15.useCallback)(
+  const drillInto = (0, import_react17.useCallback)(
     (range) => {
       if (!Number.isFinite(range.startIdx) || range.startIdx < 0) return;
       if (range.endIdx !== void 0 && !Number.isFinite(range.endIdx)) return;
@@ -5900,16 +6323,16 @@ function useCommentarySlider(recorder, initialMode = "commentary") {
     },
     [totalCommits]
   );
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!drill) return;
     const inRange = commitIdx >= drill.startIdx && (drill.endIdx === void 0 || commitIdx <= drill.endIdx);
     if (!inRange) setDrill(void 0);
   }, [commitIdx, drill]);
-  const active = (0, import_react15.useMemo)(
+  const active = (0, import_react17.useMemo)(
     () => selectCommentaryAt(recorder.boundary, commitIdx),
     [recorder, commitIdx, version]
   );
-  const drillRange = (0, import_react15.useMemo)(() => {
+  const drillRange = (0, import_react17.useMemo)(() => {
     if (!drill) return void 0;
     return ranges.find(
       (r) => r.label.runtimeStageId === drill.runtimeStageId
@@ -5930,9 +6353,9 @@ function useCommentarySlider(recorder, initialMode = "commentary") {
 }
 
 // src/react/hooks/useLensRenderGraph.ts
-var import_react17 = require("react");
+var import_react19 = require("react");
 function useLensRenderGraph(runner, options = {}) {
-  return (0, import_react17.useMemo)(() => {
+  return (0, import_react19.useMemo)(() => {
     const output = runner.getUIGroupWith(lensGroupTranslator);
     if (output === void 0) {
       throw new Error(
@@ -5971,6 +6394,8 @@ function assertLensGroupOutput(value) {
   LensRecorder,
   LensSnapshotRecorder,
   RunTreeView,
+  SKILL_GRAPH_START_ID,
+  SkillGraphFlow,
   SummaryCard,
   TimeTravel,
   buildLLMText,
@@ -5981,6 +6406,7 @@ function assertLensGroupOutput(value) {
   humanizeWith,
   isContextEngineering,
   layoutLensGraph,
+  layoutSkillGraph,
   lensGroupTranslator,
   lensRecorder,
   lensSnapshotRecorder,