agentfootprint-lens 0.3.0 → 0.4.0

package/dist/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,16 +17,30 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
   AgentLens: () => AgentLens,
+  AskCard: () => AskCard,
   IterationStrip: () => IterationStrip,
   LiveTimelineBuilder: () => LiveTimelineBuilder,
   MessagesPanel: () => MessagesPanel,
+  RunSummary: () => RunSummary,
+  SkillsPanel: () => SkillsPanel,
+  StageFlow: () => StageFlow,
+  TimeTravel: () => TimeTravel,
   ToolCallInspector: () => ToolCallInspector,
+  deriveStages: () => deriveStages,
   fromAgentSnapshot: () => fromAgentSnapshot,
   resolveLensTheme: () => resolve,
   useLensTheme: () => useLensTheme,
@@ -33,7 +49,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/AgentLens.tsx
-var import_react2 = require("react");
+var import_react6 = require("react");
 
 // src/adapters/fromAgentSnapshot.ts
 function fromAgentSnapshot(runtime) {
@@ -241,7 +257,7 @@ function finalizeTurn(t) {
 }
 
 // src/panels/MessagesPanel.tsx
-var import_react = require("react");
+var import_react = __toESM(require("react"), 1);
 
 // src/theme/useLensTheme.ts
 var import_footprint_explainable_ui = require("footprint-explainable-ui");
@@ -278,27 +294,105 @@ function MessagesPanel({
   timeline,
   onToolCallClick,
   systemPrompt,
-  selectedIterKey
+  selectedIterKey,
+  stages,
+  focusIndex,
+  onFocusChange,
+  isLive
 }) {
   const t = useLensTheme();
   const scrollRef = (0, import_react.useRef)(null);
+  const iterRanges = useIterationStageRanges(stages);
+  (0, import_react.useEffect)(() => {
+    if (!scrollRef.current) {
+      console.log("[Lens scroll] selectedIter effect skipped: no scrollRef");
+      return;
+    }
+    if (selectedIterKey) {
+      const target = scrollRef.current.querySelector(
+        `[data-iter-key="${CSS.escape(selectedIterKey)}"]`
+      );
+      console.log("[Lens scroll] selectedIterKey path", {
+        selectedIterKey,
+        foundTarget: !!target
+      });
+      if (target) {
+        target.scrollIntoView({ block: "start", behavior: "smooth" });
+        target.setAttribute("data-iter-selected", "true");
+        const h = window.setTimeout(() => target.removeAttribute("data-iter-selected"), 1200);
+        return () => window.clearTimeout(h);
+      }
+    }
+  }, [selectedIterKey]);
   (0, import_react.useEffect)(() => {
-    if (!selectedIterKey || !scrollRef.current) return;
+    const ctx = {
+      focusIndex,
+      isLive,
+      stagesLen: stages?.length ?? 0,
+      iterRangesSize: iterRanges.size,
+      hasScrollRef: !!scrollRef.current
+    };
+    if (!scrollRef.current || focusIndex === void 0 || !stages?.length) {
+      console.log("[Lens scroll] focus effect SKIPPED", ctx);
+      return;
+    }
+    if (isLive) {
+      const el = scrollRef.current;
+      const beforeTop2 = el.scrollTop;
+      const sh = el.scrollHeight;
+      const ch = el.clientHeight;
+      const canScroll = sh > ch;
+      const alreadyAtBottom = Math.abs(sh - ch - beforeTop2) < 2;
+      el.scrollTo({ top: sh, behavior: "auto" });
+      const afterTop = el.scrollTop;
+      const moved = afterTop !== beforeTop2;
+      console.log(
+        `[Lens scroll] LIVE tail \u2192 ${moved ? "moved" : canScroll ? "NO-OP (scrollTo returned same top)" : alreadyAtBottom ? "already at bottom" : "CONTAINER NOT SCROLLABLE (scrollHeight<=clientHeight)"} \xB7 sh=${sh} ch=${ch} before=${beforeTop2} after=${afterTop}`,
+        { ...ctx, scrollHeight: sh, clientHeight: ch, beforeScrollTop: beforeTop2, afterScrollTop: afterTop }
+      );
+      return;
+    }
+    const key = keyForStage(iterRanges, focusIndex);
+    if (!key) {
+      console.log("[Lens scroll] focus effect: no iterKey for focusIndex", ctx);
+      return;
+    }
     const target = scrollRef.current.querySelector(
-      `[data-iter-key="${CSS.escape(selectedIterKey)}"]`
+      `[data-iter-key="${CSS.escape(key)}"]`
     );
-    if (!target) return;
+    if (!target) {
+      console.log("[Lens scroll] focus effect: DOM node missing for key", {
+        ...ctx,
+        key
+      });
+      return;
+    }
+    const container = scrollRef.current;
+    const rect = target.getBoundingClientRect();
+    const cRect = container.getBoundingClientRect();
+    const relTop = rect.top - cRect.top;
+    const beforeTop = container.scrollTop;
     target.scrollIntoView({ block: "start", behavior: "smooth" });
-    target.setAttribute("data-iter-selected", "true");
-    const h = window.setTimeout(() => target.removeAttribute("data-iter-selected"), 1200);
-    return () => window.clearTimeout(h);
-  }, [selectedIterKey]);
+    console.log(
+      `[Lens scroll] SCRUB key=${key} \xB7 relTop=${Math.round(relTop)} sh=${container.scrollHeight} ch=${container.clientHeight} before=${beforeTop}`,
+      { ...ctx, key }
+    );
+  }, [focusIndex, isLive, iterRanges, stages?.length]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       ref: scrollRef,
       "data-fp-lens": "messages-panel",
       style: {
+        // Absolute + inset:0 inside a `position: relative` wrapper
+        // forces the panel to be EXACTLY the size of its wrapper cell,
+        // regardless of flex/grid height resolution quirks upstream.
+        // Without this, percentage heights and 1fr rows can fail to
+        // resolve and the panel grows to its content → no scroll.
+        // The grid-area wrapper in AgentLens sets `position: relative`
+        // to make this the containing block.
+        position: "absolute",
+        inset: 0,
         display: "flex",
         flexDirection: "column",
         gap: 16,
@@ -318,7 +412,11 @@ function MessagesPanel({
           {
             turn,
             allMessages: timeline.messages,
-            onToolCallClick
+            onToolCallClick,
+            iterRanges,
+            focusIndex,
+            stages,
+            onFocusChange
           },
           turn.index
         ))
@@ -386,23 +484,44 @@ function SystemBubble({ text }) {
 function TurnBlock({
   turn,
   allMessages,
-  onToolCallClick
+  onToolCallClick,
+  iterRanges,
+  focusIndex,
+  stages,
+  onFocusChange
 }) {
   const t = useLensTheme();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TurnHeader, { turn }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserBubble, { text: turn.userPrompt }),
-    turn.iterations.map((iter, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      IterationBlock,
-      {
-        iter,
-        iterPositionInTurn: i + 1,
-        turnIndex: turn.index,
-        allMessages,
-        onToolCallClick
-      },
-      iter.index
-    )),
+    turn.iterations.map((iter, i) => {
+      const key = `${turn.index}.${iter.index}`;
+      const range = iterRanges?.get(key);
+      let state = "future";
+      if (range && focusIndex !== void 0) {
+        if (focusIndex < range.firstStageIndex) state = "future";
+        else if (focusIndex > range.lastStageIndex) state = "past";
+        else state = "active";
+      } else if (!range && focusIndex === void 0) {
+        state = "active";
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        IterationBlock,
+        {
+          iter,
+          iterPositionInTurn: i + 1,
+          turnIndex: turn.index,
+          allMessages,
+          onToolCallClick,
+          state,
+          stages,
+          range,
+          focusIndex,
+          ...range && onFocusChange ? { onClick: () => onFocusChange(range.lastStageIndex) } : {}
+        },
+        iter.index
+      );
+    }),
     turn.finalContent && turn.iterations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: 11, color: t.textSubtle, textAlign: "center" }, children: [
       "Answer compiled \xB7 ",
       turn.iterations.length,
@@ -467,30 +586,105 @@ function iterationHeadline(iter) {
     return "Neo is ready to answer";
   }
   if (iter.toolCalls.length === 1) {
-    const tc = iter.toolCalls[0];
-    if (tc.name === "list_skills") return "Neo is looking up available skills";
-    if (tc.name === "read_skill") {
-      const id = tc.arguments?.id ?? "?";
-      return `Neo activated the \u201C${id}\u201D skill`;
-    }
-    return `Neo called ${tc.name} to get data`;
+    return singleToolHeadline(iter.toolCalls[0]);
   }
   const names = iter.toolCalls.map((tc) => tc.name);
-  if (names.length <= 3) return `Neo called ${names.join(", ")} in parallel`;
-  return `Neo gathered data from ${names.length} sources in parallel`;
+  if (names.length <= 3) {
+    return `Neo called ${names.length} tools in parallel (${names.join(", ")})`;
+  }
+  return `Neo gathered data from ${names.length} tools in parallel`;
+}
+function singleToolHeadline(tc) {
+  if (tc.name === "list_skills") return "Neo is looking up available skills";
+  if (tc.name === "read_skill") {
+    const id = tc.arguments?.id ?? "?";
+    return `Neo activated the "${id}" skill`;
+  }
+  if (tc.name === "ask_human" || tc.name === "ask_user") {
+    return "Neo asked the user for clarification";
+  }
+  return `Neo called tool (${tc.name})`;
 }
 function IterationBlock({
   iter,
   iterPositionInTurn,
   turnIndex,
   allMessages,
-  onToolCallClick
+  onToolCallClick,
+  state = "active",
+  stages,
+  range,
+  focusIndex,
+  onClick
 }) {
   const t = useLensTheme();
   const [showContext, setShowContext] = (0, import_react.useState)(false);
   const key = `${turnIndex}.${iter.index}`;
   const headline = iterationHeadline(iter);
   const contextMessages = allMessages.slice(0, iter.messagesSentCount);
+  let revealIdx = Number.POSITIVE_INFINITY;
+  if (range && focusIndex !== void 0) {
+    if (state === "future") revealIdx = -1;
+    else if (state === "past") revealIdx = range.lastStageIndex;
+    else revealIdx = focusIndex;
+  }
+  const roundHasStarted = revealIdx >= (range?.firstStageIndex ?? 0);
+  const revealedMutations = (() => {
+    if (!stages || !range) return void 0;
+    const agg = {
+      systemPrompt: false,
+      tools: false,
+      systemPromptDeltaChars: 0,
+      toolsAdded: 0,
+      toolsRemoved: 0,
+      systemPromptAdded: "",
+      toolsAddedList: []
+    };
+    const stop = Math.min(revealIdx, range.lastStageIndex);
+    for (let i = range.firstStageIndex; i <= stop; i++) {
+      const m = stages[i]?.mutations;
+      if (!m) continue;
+      if (m.systemPrompt) agg.systemPrompt = true;
+      if (m.tools) agg.tools = true;
+      if (m.systemPromptDeltaChars) agg.systemPromptDeltaChars += m.systemPromptDeltaChars;
+      if (m.toolsAdded) agg.toolsAdded += m.toolsAdded;
+      if (m.toolsRemoved) agg.toolsRemoved += m.toolsRemoved;
+      if (m.systemPromptAdded) {
+        agg.systemPromptAdded = agg.systemPromptAdded ? `${agg.systemPromptAdded}
+
+${m.systemPromptAdded}` : m.systemPromptAdded;
+      }
+      if (m.activatedSkillId && !agg.activatedSkillId) {
+        agg.activatedSkillId = m.activatedSkillId;
+      }
+      if (m.toolsAddedList?.length) {
+        for (const name of m.toolsAddedList) {
+          if (!agg.toolsAddedList.includes(name)) agg.toolsAddedList.push(name);
+        }
+      }
+    }
+    return agg;
+  })();
+  const mutations = revealedMutations;
+  const toolStageIdx = /* @__PURE__ */ new Map();
+  if (stages) {
+    for (const tc of iter.toolCalls) {
+      let outIdx = -1;
+      let retIdx = -1;
+      for (let i = 0; i < stages.length; i++) {
+        const s = stages[i];
+        if (s.turnIndex !== turnIndex || s.iterIndex !== iter.index) continue;
+        if (s.toolName !== tc.name) continue;
+        if (s.from === "agent" && s.to === "tool" && outIdx < 0) outIdx = i;
+        else if (s.from === "tool" && s.to === "agent" && retIdx < 0) retIdx = i;
+      }
+      toolStageIdx.set(tc.id, { outIdx, retIdx });
+    }
+  }
+  const opacity = state === "future" ? 0.4 : state === "past" ? 0.85 : 1;
+  const isActiveRound = state === "active";
+  const background = isActiveRound ? `color-mix(in srgb, ${t.accent} 10%, ${t.bg})` : "transparent";
+  const boxShadow = isActiveRound ? `0 0 0 1px ${t.accent}, 0 0 24px color-mix(in srgb, ${t.accent} 22%, transparent)` : "none";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
@@ -498,17 +692,36 @@ function IterationBlock({
       "data-turn-index": turnIndex,
       "data-iter-index": iter.index,
       style: {
+        position: "relative",
         display: "flex",
         flexDirection: "column",
         gap: 6,
-        padding: 8,
-        margin: -8,
-        borderRadius: t.radius,
-        outline: "2px solid transparent",
-        outlineOffset: 2,
-        transition: "outline-color 180ms ease, background 180ms ease"
+        padding: 12,
+        margin: isActiveRound ? "2px -12px" : "-8px",
+        borderRadius: 8,
+        background,
+        borderLeft: isActiveRound ? `3px solid ${t.accent}` : "3px solid transparent",
+        boxShadow,
+        opacity,
+        transition: "background 220ms ease, box-shadow 220ms ease, opacity 220ms ease, border-left-color 220ms ease, margin 220ms ease"
       },
       children: [
+        isActiveRound && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              left: -3,
+              top: 8,
+              bottom: 8,
+              width: 3,
+              background: t.accent,
+              boxShadow: `0 0 8px ${t.accent}`,
+              pointerEvents: "none"
+            }
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "div",
           {
@@ -520,12 +733,36 @@ function IterationBlock({
               color: t.textMuted
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { color: t.accent, fontWeight: 600 }, children: [
-                "Step ",
-                iterPositionInTurn,
-                ":"
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: t.text }, children: headline }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "button",
+                {
+                  onClick,
+                  disabled: !onClick,
+                  title: onClick ? "Jump the slider to this round" : void 0,
+                  style: {
+                    background: "transparent",
+                    border: "none",
+                    padding: 0,
+                    margin: 0,
+                    display: "flex",
+                    alignItems: "baseline",
+                    gap: 8,
+                    cursor: onClick ? "pointer" : "default",
+                    color: "inherit",
+                    font: "inherit",
+                    width: "auto",
+                    textAlign: "left"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { color: t.accent, fontWeight: 600 }, children: [
+                      "Round ",
+                      iterPositionInTurn,
+                      ":"
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: t.text }, children: headline })
+                  ]
+                }
+              ),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { flex: 1 } }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                 "span",
@@ -566,21 +803,57 @@ function IterationBlock({
             ]
           }
         ),
-        iter.assistantContent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        roundHasStarted && (iter.model || iter.stopReason || (iter.matchedInstructions?.length ?? 0) > 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "div",
           {
             style: {
-              background: t.bgElev,
-              border: `1px solid ${t.border}`,
-              borderRadius: `2px ${t.radius} ${t.radius} ${t.radius}`,
-              padding: "10px 14px",
-              maxWidth: 820,
-              whiteSpace: "pre-wrap"
+              display: "flex",
+              flexWrap: "wrap",
+              gap: 6,
+              fontSize: 10,
+              color: t.textSubtle,
+              fontFamily: t.fontMono,
+              paddingLeft: 12
             },
-            children: iter.assistantContent
+            children: [
+              iter.model && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MetaPill, { t, title: "Model the LLM call was routed to", children: iter.model }),
+              iter.stopReason && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MetaPill, { t, title: "Why the LLM stopped producing tokens", children: [
+                "stop: ",
+                iter.stopReason
+              ] }),
+              iter.matchedInstructions?.map((id) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                MetaPill,
+                {
+                  t,
+                  title: "Instruction injected into this round",
+                  accent: true,
+                  children: [
+                    "\u25B8 ",
+                    id
+                  ]
+                },
+                id
+              ))
+            ]
           }
         ),
-        iter.toolCalls.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 6, paddingLeft: 12 }, children: iter.toolCalls.map((tc) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolCallCard, { invocation: tc, onClick: onToolCallClick }, tc.id)) }),
+        roundHasStarted && iter.assistantContent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReasoningBubble, { text: iter.assistantContent }),
+        roundHasStarted && iter.toolCalls.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 6, paddingLeft: 12 }, children: iter.toolCalls.map((tc) => {
+          const idx = toolStageIdx.get(tc.id);
+          const cardRevealed = !idx || idx.outIdx < 0 || revealIdx >= idx.outIdx;
+          if (!cardRevealed) return null;
+          const resultRevealed = !idx || idx.retIdx < 0 || revealIdx >= idx.retIdx;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            ToolCallCard,
+            {
+              invocation: tc,
+              onClick: onToolCallClick,
+              resultRevealed
+            },
+            tc.id
+          );
+        }) }),
+        mutations && (mutations.systemPrompt || mutations.tools) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MutationStrip, { mutations, iter }),
         showContext && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           ContextDrawer,
           {
@@ -593,6 +866,448 @@ function IterationBlock({
     }
   );
 }
+function ReasoningBubble({ text }) {
+  const t = useLensTheme();
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const PREVIEW_LEN = 140;
+  const flat = text.replace(/\s+/g, " ").trim();
+  const needsToggle = flat.length > PREVIEW_LEN;
+  const preview = needsToggle ? flat.slice(0, PREVIEW_LEN - 1) + "\u2026" : flat;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: {
+        background: t.bgElev,
+        border: `1px solid ${t.border}`,
+        borderRadius: `2px ${t.radius} ${t.radius} ${t.radius}`,
+        padding: "10px 14px",
+        maxWidth: 820,
+        whiteSpace: "pre-wrap",
+        fontSize: 13,
+        lineHeight: 1.55
+      },
+      children: needsToggle && !open ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: preview }),
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            onClick: () => setOpen(true),
+            style: {
+              background: "transparent",
+              border: "none",
+              padding: 0,
+              color: t.accent,
+              cursor: "pointer",
+              fontSize: 12,
+              fontWeight: 600,
+              width: "auto"
+            },
+            children: "\u25B8 Show full reasoning"
+          }
+        )
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        text,
+        needsToggle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginTop: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            onClick: () => setOpen(false),
+            style: {
+              background: "transparent",
+              border: "none",
+              padding: 0,
+              color: t.textMuted,
+              cursor: "pointer",
+              fontSize: 12,
+              fontWeight: 500,
+              width: "auto"
+            },
+            children: "\u25BE Collapse"
+          }
+        ) })
+      ] })
+    }
+  );
+}
+function MetaPill({
+  t,
+  children,
+  title,
+  accent
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      title,
+      style: {
+        padding: "1px 6px",
+        borderRadius: 3,
+        background: accent ? `color-mix(in srgb, ${t.warning} 18%, transparent)` : t.bgElev,
+        color: accent ? t.warning : t.textSubtle,
+        fontWeight: accent ? 600 : 500,
+        letterSpacing: "0.02em",
+        whiteSpace: "nowrap"
+      },
+      children
+    }
+  );
+}
+function MutationStrip({
+  mutations,
+  iter
+}) {
+  const t = useLensTheme();
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const fallbackReadSkill = mutations.systemPromptAdded ? void 0 : iter.toolCalls.find((tc) => tc.name === "read_skill");
+  const skillId = mutations.activatedSkillId || (fallbackReadSkill?.arguments?.id ?? "");
+  const skillBody = mutations.systemPromptAdded || fallbackReadSkill?.result || "";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 6,
+        paddingLeft: 12,
+        fontSize: 11,
+        color: t.textMuted,
+        fontFamily: t.fontSans
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            onClick: () => setOpen((v) => !v),
+            style: {
+              display: "flex",
+              flexWrap: "wrap",
+              alignItems: "center",
+              gap: 6,
+              background: "transparent",
+              border: "none",
+              padding: 0,
+              margin: 0,
+              cursor: "pointer",
+              color: "inherit",
+              font: "inherit",
+              width: "auto",
+              textAlign: "left"
+            },
+            title: "Click to see the actual diff",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 10, color: t.textSubtle }, children: open ? "\u25BE" : "\u25B8" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  style: {
+                    fontWeight: 700,
+                    color: t.accent,
+                    textTransform: "uppercase",
+                    letterSpacing: "0.06em",
+                    fontSize: 10
+                  },
+                  children: "\u270E Changed"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "in Neo's input:" }),
+              mutations.systemPrompt && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "span",
+                {
+                  style: {
+                    padding: "1px 7px",
+                    borderRadius: 3,
+                    background: `color-mix(in srgb, ${t.accent} 18%, transparent)`,
+                    color: t.accent,
+                    fontWeight: 600,
+                    letterSpacing: "0.02em"
+                  },
+                  children: [
+                    "System Prompt",
+                    mutations.systemPromptDeltaChars > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { fontWeight: 400, marginLeft: 4 }, children: [
+                      "+",
+                      mutations.systemPromptDeltaChars.toLocaleString(),
+                      " chars"
+                    ] })
+                  ]
+                }
+              ),
+              mutations.tools && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "span",
+                {
+                  style: {
+                    padding: "1px 7px",
+                    borderRadius: 3,
+                    background: `color-mix(in srgb, ${t.accent} 18%, transparent)`,
+                    color: t.accent,
+                    fontWeight: 600,
+                    letterSpacing: "0.02em"
+                  },
+                  children: [
+                    "Tools",
+                    (mutations.toolsAdded > 0 || mutations.toolsRemoved > 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { fontWeight: 400, marginLeft: 4 }, children: [
+                      mutations.toolsAdded > 0 ? `+${mutations.toolsAdded}` : "",
+                      mutations.toolsRemoved > 0 ? ` -${mutations.toolsRemoved}` : ""
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          MutationDiffModal,
+          {
+            mutations,
+            skillId,
+            skillBody,
+            visibleTools: iter.visibleTools,
+            onClose: () => setOpen(false)
+          }
+        )
+      ]
+    }
+  );
+}
+function MutationDiffModal({
+  mutations,
+  skillId,
+  skillBody,
+  visibleTools,
+  onClose
+}) {
+  const t = useLensTheme();
+  (0, import_react.useEffect)(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+  const toolsToShow = mutations.toolsAddedList.length > 0 ? mutations.toolsAddedList : visibleTools;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      onClick: onClose,
+      role: "dialog",
+      "aria-modal": "true",
+      style: {
+        position: "fixed",
+        inset: 0,
+        background: "rgba(0, 0, 0, 0.55)",
+        backdropFilter: "blur(4px)",
+        WebkitBackdropFilter: "blur(4px)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1e3,
+        padding: 24
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          onClick: (e) => e.stopPropagation(),
+          style: {
+            background: t.bg,
+            color: t.text,
+            border: `1px solid ${t.border}`,
+            borderRadius: 12,
+            boxShadow: "0 24px 64px rgba(0, 0, 0, 0.45)",
+            width: "min(880px, 100%)",
+            maxHeight: "min(80dvh, 800px)",
+            display: "flex",
+            flexDirection: "column",
+            fontFamily: t.fontSans
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  padding: "14px 18px",
+                  borderBottom: `1px solid ${t.border}`
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        style: {
+                          fontSize: 10,
+                          color: t.textSubtle,
+                          textTransform: "uppercase",
+                          letterSpacing: "0.08em",
+                          fontWeight: 600
+                        },
+                        children: "\u270E Changed in Neo's input"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: 15, fontWeight: 600, marginTop: 2 }, children: [
+                      "Round diff",
+                      skillId && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                        " \xB7 ",
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "code",
+                          {
+                            style: {
+                              fontFamily: t.fontMono,
+                              color: t.accent,
+                              fontWeight: 600
+                            },
+                            children: skillId
+                          }
+                        )
+                      ] })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { flex: 1 } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "button",
+                    {
+                      onClick: onClose,
+                      title: "Close (Esc)",
+                      style: {
+                        background: "transparent",
+                        border: `1px solid ${t.border}`,
+                        color: t.textMuted,
+                        padding: "4px 10px",
+                        borderRadius: 6,
+                        cursor: "pointer",
+                        fontSize: 12,
+                        width: "auto"
+                      },
+                      children: "Esc"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "div",
+              {
+                style: {
+                  padding: 18,
+                  overflow: "auto",
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 16
+                },
+                children: [
+                  mutations.systemPrompt && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      "div",
+                      {
+                        style: {
+                          fontSize: 11,
+                          color: t.textSubtle,
+                          textTransform: "uppercase",
+                          letterSpacing: "0.08em",
+                          fontWeight: 600,
+                          marginBottom: 8
+                        },
+                        children: [
+                          "System Prompt",
+                          mutations.systemPromptDeltaChars > 0 && ` \xB7 +${mutations.systemPromptDeltaChars.toLocaleString()} chars`
+                        ]
+                      }
+                    ),
+                    skillBody ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "pre",
+                      {
+                        style: {
+                          margin: 0,
+                          padding: "12px 14px",
+                          background: t.bgElev,
+                          border: `1px solid ${t.border}`,
+                          borderLeft: `3px solid ${t.accent}`,
+                          borderRadius: 6,
+                          fontSize: 12,
+                          lineHeight: 1.55,
+                          fontFamily: t.fontMono,
+                          color: t.text,
+                          whiteSpace: "pre-wrap"
+                        },
+                        children: skillBody
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      "div",
+                      {
+                        style: {
+                          padding: "10px 12px",
+                          border: `1px dashed ${t.border}`,
+                          borderRadius: 6,
+                          color: t.textSubtle,
+                          fontStyle: "italic",
+                          fontSize: 12
+                        },
+                        children: [
+                          "System Prompt grew by ",
+                          mutations.systemPromptDeltaChars.toLocaleString(),
+                          " ",
+                          "chars but the source text isn't flowing through the adapter for this round."
+                        ]
+                      }
+                    )
+                  ] }),
+                  mutations.tools && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      "div",
+                      {
+                        style: {
+                          fontSize: 11,
+                          color: t.textSubtle,
+                          textTransform: "uppercase",
+                          letterSpacing: "0.08em",
+                          fontWeight: 600,
+                          marginBottom: 8
+                        },
+                        children: [
+                          "Tools",
+                          mutations.toolsAdded > 0 && ` \xB7 +${mutations.toolsAdded} added`,
+                          mutations.toolsRemoved > 0 && ` \xB7 -${mutations.toolsRemoved} removed`
+                        ]
+                      }
+                    ),
+                    toolsToShow.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: toolsToShow.map((name) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "span",
+                      {
+                        style: {
+                          padding: "3px 9px",
+                          borderRadius: 4,
+                          background: t.bgElev,
+                          border: `1px solid ${t.border}`,
+                          color: t.text,
+                          fontFamily: t.fontMono,
+                          fontSize: 11
+                        },
+                        children: name
+                      },
+                      name
+                    )) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        style: {
+                          padding: "10px 12px",
+                          border: `1px dashed ${t.border}`,
+                          borderRadius: 6,
+                          color: t.textSubtle,
+                          fontStyle: "italic",
+                          fontSize: 12
+                        },
+                        children: "The tool list that came online in this round isn't flowing through the adapter yet \u2014 counts are available, names aren't."
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
 function ContextDrawer({
   messagesSentCount,
   contextMessages,
@@ -679,19 +1394,21 @@ function summarizeMessage(m) {
 }
 function ToolCallCard({
   invocation,
-  onClick
+  onClick,
+  resultRevealed = true
 }) {
   const t = useLensTheme();
   const [open, setOpen] = (0, import_react.useState)(false);
   const preview = shortArgs(invocation.arguments);
   const errored = invocation.error === true;
   const friendlyVerb = toolVerb(invocation);
+  const borderStyle = resultRevealed ? "solid" : "dashed";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       style: {
-        border: `1px solid ${errored ? t.error : t.border}`,
-        borderLeft: `3px solid ${errored ? t.error : t.accent}`,
+        border: `1px ${borderStyle} ${errored ? t.error : t.border}`,
+        borderLeft: `3px ${borderStyle} ${errored ? t.error : t.accent}`,
         borderRadius: 6,
         background: t.bg,
         overflow: "hidden"
@@ -721,6 +1438,23 @@ function ToolCallCard({
                 ")"
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { flex: 1 } }),
+              !resultRevealed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  style: {
+                    fontSize: 10,
+                    padding: "1px 6px",
+                    borderRadius: 3,
+                    background: `color-mix(in srgb, ${t.accent} 18%, transparent)`,
+                    color: t.accent,
+                    fontWeight: 600,
+                    textTransform: "uppercase",
+                    letterSpacing: "0.04em"
+                  },
+                  title: "Args sent; waiting for the tool to return",
+                  children: "in flight"
+                }
+              ),
               invocation.decisionUpdate && Object.keys(invocation.decisionUpdate).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "span",
                 {
@@ -744,7 +1478,7 @@ function ToolCallCard({
         open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: "8px 12px", borderTop: `1px solid ${t.border}` }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { t, children: "What Neo asked for" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(JsonBlock, { value: invocation.arguments }),
-          invocation.result && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          resultRevealed && invocation.result && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { t, style: { marginTop: 10 }, children: "What the tool returned" }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "pre",
@@ -765,7 +1499,22 @@ function ToolCallCard({
               }
             )
           ] }),
-          invocation.decisionUpdate && Object.keys(invocation.decisionUpdate).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          !resultRevealed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              style: {
+                marginTop: 10,
+                padding: "10px 12px",
+                border: `1px dashed ${t.border}`,
+                borderRadius: 4,
+                fontSize: 12,
+                color: t.textSubtle,
+                fontStyle: "italic"
+              },
+              children: "Neo has sent the args; advance the slider to see the result this tool returned."
+            }
+          ),
+          resultRevealed && invocation.decisionUpdate && Object.keys(invocation.decisionUpdate).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { t, style: { marginTop: 10 }, children: "What changed in Neo's state" }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(JsonBlock, { value: invocation.decisionUpdate })
           ] })
@@ -777,7 +1526,8 @@ function ToolCallCard({
 function toolVerb(inv) {
   if (inv.name === "list_skills") return "Asked for";
   if (inv.name === "read_skill") return "Activated";
-  return "Called";
+  if (inv.name === "ask_human" || inv.name === "ask_user") return "Asked user for";
+  return "Called tool";
 }
 function Label({
   t,
@@ -829,10 +1579,1985 @@ function shortArgs(args) {
   }
   return keys.join(", ");
 }
+function useIterationStageRanges(stages) {
+  return import_react.default.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    if (!stages?.length) return map;
+    const turnIters = /* @__PURE__ */ new Map();
+    for (const s of stages) {
+      if (s.iterIndex === void 0) continue;
+      const list = turnIters.get(s.turnIndex) ?? [];
+      if (!list.includes(s.iterIndex)) list.push(s.iterIndex);
+      turnIters.set(s.turnIndex, list);
+    }
+    stages.forEach((s, idx) => {
+      let iter = s.iterIndex;
+      if (iter === void 0) {
+        const iters = turnIters.get(s.turnIndex);
+        if (!iters?.length) return;
+        iter = s.from === "user" ? iters[0] : iters[iters.length - 1];
+      }
+      const key = `${s.turnIndex}.${iter}`;
+      const prev = map.get(key);
+      if (!prev) {
+        map.set(key, { firstStageIndex: idx, lastStageIndex: idx });
+      } else {
+        map.set(key, {
+          firstStageIndex: Math.min(prev.firstStageIndex, idx),
+          lastStageIndex: Math.max(prev.lastStageIndex, idx)
+        });
+      }
+    });
+    return map;
+  }, [stages]);
+}
+function keyForStage(ranges, focusIndex) {
+  for (const [key, r] of ranges) {
+    if (focusIndex >= r.firstStageIndex && focusIndex <= r.lastStageIndex) return key;
+  }
+  return null;
+}
 
-// src/panels/IterationStrip.tsx
+// src/panels/SkillsPanel.tsx
+var import_react2 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function IterationStrip({ timeline, selectedKey, onSelect }) {
+function SkillsPanel({ skills, onClose, activeSkillId }) {
+  const t = useLensTheme();
+  const [selectedId, setSelectedId] = (0, import_react2.useState)(
+    activeSkillId ?? skills[0]?.id ?? null
+  );
+  const [mode, setMode] = (0, import_react2.useState)("formatted");
+  const selected = skills.find((s) => s.id === selectedId) ?? null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      onClick: onClose,
+      style: {
+        position: "absolute",
+        inset: 0,
+        background: "rgba(0, 0, 0, 0.5)",
+        zIndex: 100,
+        display: "flex",
+        alignItems: "stretch",
+        justifyContent: "stretch"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "div",
+        {
+          onClick: (e) => e.stopPropagation(),
+          style: {
+            display: "grid",
+            gridTemplateColumns: "minmax(220px, 280px) 1fr",
+            gridTemplateRows: "auto 1fr",
+            gridTemplateAreas: '"header header" "list detail"',
+            width: "100%",
+            height: "100%",
+            background: t.bg,
+            color: t.text,
+            fontFamily: t.fontSans,
+            border: `1px solid ${t.border}`
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              "div",
+              {
+                style: {
+                  gridArea: "header",
+                  padding: "10px 14px",
+                  borderBottom: `1px solid ${t.border}`,
+                  background: t.bgElev,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 10
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { style: { color: t.text, fontSize: 13 }, children: "Skills registered with Neo" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { color: t.textMuted, fontSize: 12 }, children: [
+                    skills.length,
+                    " total"
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { flex: 1 } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "button",
+                    {
+                      onClick: onClose,
+                      style: {
+                        background: "transparent",
+                        border: `1px solid ${t.border}`,
+                        color: t.textMuted,
+                        borderRadius: 4,
+                        padding: "2px 10px",
+                        cursor: "pointer",
+                        fontSize: 14,
+                        width: "auto",
+                        fontWeight: 400
+                      },
+                      title: "Close (Esc)",
+                      children: "\u2715"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              "div",
+              {
+                style: {
+                  gridArea: "list",
+                  borderRight: `1px solid ${t.border}`,
+                  overflow: "auto",
+                  background: t.bg
+                },
+                children: [
+                  skills.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { padding: 14, color: t.textSubtle, fontSize: 12 }, children: "No skills registered." }),
+                  skills.map((s) => {
+                    const isActive = s.id === selectedId;
+                    const isAgentActive = s.id === activeSkillId;
+                    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                      "button",
+                      {
+                        onClick: () => setSelectedId(s.id),
+                        style: {
+                          display: "block",
+                          width: "100%",
+                          textAlign: "left",
+                          padding: "10px 14px",
+                          background: isActive ? t.bgHover : "transparent",
+                          border: "none",
+                          borderLeft: `3px solid ${isActive ? t.accent : isAgentActive ? t.success : "transparent"}`,
+                          borderBottom: `1px solid ${t.border}`,
+                          color: t.text,
+                          cursor: "pointer",
+                          fontFamily: "inherit"
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                            "div",
+                            {
+                              style: {
+                                display: "flex",
+                                alignItems: "baseline",
+                                gap: 6,
+                                fontSize: 13
+                              },
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontWeight: 600 }, children: s.title ?? s.id }),
+                                isAgentActive && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                  "span",
+                                  {
+                                    style: {
+                                      fontSize: 9,
+                                      padding: "1px 5px",
+                                      borderRadius: 3,
+                                      background: `color-mix(in srgb, ${t.success} 25%, transparent)`,
+                                      color: t.success,
+                                      fontWeight: 600,
+                                      textTransform: "uppercase"
+                                    },
+                                    children: "active"
+                                  }
+                                )
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                            "div",
+                            {
+                              style: {
+                                fontSize: 10,
+                                color: t.textSubtle,
+                                fontFamily: t.fontMono,
+                                marginTop: 1
+                              },
+                              children: [
+                                s.id,
+                                s.version && ` \xB7 v${s.version}`
+                              ]
+                            }
+                          ),
+                          s.description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                            "div",
+                            {
+                              style: {
+                                fontSize: 11,
+                                color: t.textMuted,
+                                marginTop: 4,
+                                lineHeight: 1.4,
+                                display: "-webkit-box",
+                                WebkitLineClamp: 3,
+                                WebkitBoxOrient: "vertical",
+                                overflow: "hidden"
+                              },
+                              children: s.description
+                            }
+                          )
+                        ]
+                      },
+                      s.id
+                    );
+                  })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "div",
+              {
+                style: {
+                  gridArea: "detail",
+                  overflow: "auto",
+                  padding: "14px 18px",
+                  fontSize: 13,
+                  lineHeight: 1.6
+                },
+                children: !selected ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { color: t.textSubtle }, children: "Select a skill to see details." }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 10 }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { style: { margin: 0, fontSize: 18, color: t.text }, children: selected.title ?? selected.id }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { color: t.textSubtle, fontFamily: t.fontMono, fontSize: 11 }, children: [
+                      selected.id,
+                      selected.version && ` \xB7 v${selected.version}`
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { flex: 1 } }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                      "div",
+                      {
+                        role: "tablist",
+                        style: {
+                          display: "flex",
+                          gap: 1,
+                          border: `1px solid ${t.border}`,
+                          borderRadius: 4,
+                          overflow: "hidden"
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                            "button",
+                            {
+                              onClick: () => setMode("formatted"),
+                              style: {
+                                padding: "3px 10px",
+                                fontSize: 11,
+                                background: mode === "formatted" ? t.accent : "transparent",
+                                color: mode === "formatted" ? "#fff" : t.textMuted,
+                                border: "none",
+                                cursor: "pointer",
+                                width: "auto",
+                                fontWeight: 400
+                              },
+                              children: "Formatted"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                            "button",
+                            {
+                              onClick: () => setMode("json"),
+                              style: {
+                                padding: "3px 10px",
+                                fontSize: 11,
+                                background: mode === "json" ? t.accent : "transparent",
+                                color: mode === "json" ? "#fff" : t.textMuted,
+                                border: "none",
+                                cursor: "pointer",
+                                width: "auto",
+                                fontWeight: 400
+                              },
+                              children: "Raw JSON"
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ] }),
+                  mode === "formatted" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SkillFormatted, { skill: selected }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SkillJson, { skill: selected })
+                ] })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function SkillFormatted({ skill }) {
+  const t = useLensTheme();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+    skill.description && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Label2, { t, children: "Description" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { color: t.text }, children: skill.description })
+    ] }),
+    skill.scope && skill.scope.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Label2, { t, children: "Scope" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: skill.scope.map((s) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "span",
+        {
+          style: {
+            padding: "2px 8px",
+            background: t.bgElev,
+            border: `1px solid ${t.border}`,
+            borderRadius: 3,
+            fontSize: 11,
+            fontFamily: t.fontMono,
+            color: t.textMuted
+          },
+          children: s
+        },
+        s
+      )) })
+    ] }),
+    skill.tools && skill.tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Label2, { t, children: [
+        "Tools this skill exposes \xB7 ",
+        skill.tools.length
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: skill.tools.map((id) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "span",
+        {
+          style: {
+            padding: "2px 8px",
+            background: `color-mix(in srgb, ${t.accent} 15%, transparent)`,
+            border: `1px solid ${t.border}`,
+            borderRadius: 3,
+            fontSize: 11,
+            fontFamily: t.fontMono,
+            color: t.accent
+          },
+          children: id
+        },
+        id
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 11, color: t.textSubtle, marginTop: 4, fontStyle: "italic" }, children: "Only these tools reach the LLM while this skill is active (autoActivate)." })
+    ] }),
+    skill.body && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Label2, { t, children: "Body (sent to LLM on read_skill)" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "pre",
+        {
+          style: {
+            margin: 0,
+            padding: "10px 12px",
+            background: t.bgElev,
+            border: `1px solid ${t.border}`,
+            borderRadius: 4,
+            fontSize: 12,
+            lineHeight: 1.55,
+            fontFamily: t.fontMono,
+            whiteSpace: "pre-wrap",
+            color: t.text,
+            maxHeight: 480,
+            overflow: "auto"
+          },
+          children: skill.body
+        }
+      )
+    ] })
+  ] });
+}
+function SkillJson({ skill }) {
+  const t = useLensTheme();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "pre",
+    {
+      style: {
+        margin: 0,
+        padding: "10px 12px",
+        background: t.bgElev,
+        border: `1px solid ${t.border}`,
+        borderRadius: 4,
+        fontSize: 12,
+        lineHeight: 1.55,
+        fontFamily: t.fontMono,
+        whiteSpace: "pre-wrap",
+        color: t.text,
+        maxHeight: "calc(100vh - 200px)",
+        overflow: "auto"
+      },
+      children: safeJsonStringify(skill)
+    }
+  );
+}
+function safeJsonStringify(value) {
+  const seen = /* @__PURE__ */ new WeakSet();
+  try {
+    return JSON.stringify(
+      value,
+      (_k, v) => {
+        if (typeof v === "object" && v !== null) {
+          if (seen.has(v)) return "[Circular]";
+          seen.add(v);
+        }
+        if (typeof v === "function") return `[function ${v.name || "anonymous"}]`;
+        return v;
+      },
+      2
+    );
+  } catch (err) {
+    return `[stringify error: ${err instanceof Error ? err.message : String(err)}]`;
+  }
+}
+function Label2({
+  t,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      style: {
+        fontSize: 10,
+        color: t.textSubtle,
+        textTransform: "uppercase",
+        letterSpacing: "0.08em",
+        fontWeight: 600,
+        marginBottom: 4
+      },
+      children
+    }
+  );
+}
+
+// src/panels/StageFlow.tsx
+var import_react3 = require("react");
+var import_react4 = require("@xyflow/react");
+var import_style = require("@xyflow/react/dist/style.css");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var NODE_POSITIONS = {
+  user: { x: 100, y: 20 },
+  agent: { x: 100, y: 160 },
+  tool: { x: 100, y: 380 },
+  skill: { x: 320, y: 380 }
+};
+function pickHandles(from, to) {
+  if (from === "user" && to === "agent") return { sourceHandle: "b-out", targetHandle: "t-in" };
+  if (from === "agent" && to === "user") return { sourceHandle: "t-out", targetHandle: "b-in" };
+  if (from === "agent" && to === "tool") return { sourceHandle: "b-out", targetHandle: "t-in" };
+  if (from === "tool" && to === "agent") return { sourceHandle: "t-out", targetHandle: "b-in" };
+  if (from === "agent" && to === "skill") return { sourceHandle: "r-out", targetHandle: "l-in" };
+  if (from === "skill" && to === "agent") return { sourceHandle: "l-out", targetHandle: "r-in" };
+  return { sourceHandle: "r-out", targetHandle: "l-in" };
+}
+var NODE_LABELS = {
+  user: "User",
+  agent: "Agent",
+  tool: "Tool",
+  skill: "Skill"
+};
+var NODE_SUBLABELS = {
+  user: "You",
+  agent: "The LLM",
+  tool: "Data source / action",
+  // "Adds context + tools" is what the user actually observes when a
+  // skill activates — the skill body lands in System Prompt and its
+  // tool list surfaces in Tools. That's the whole effect; no need for
+  // jargon like "bracket over a primitive."
+  skill: "Adds context + tools"
+};
+function StageFlow({
+  stages,
+  focusIndex,
+  onEdgeClick,
+  height = 460,
+  activeSkillId
+}) {
+  const t = useLensTheme();
+  const focus = focusIndex !== void 0 && focusIndex >= 0 ? focusIndex : stages.length - 1;
+  const visible = (0, import_react3.useMemo)(() => stages.slice(0, focus + 1), [stages, focus]);
+  const activeStage = visible[visible.length - 1];
+  const touched = (0, import_react3.useMemo)(() => {
+    const set = /* @__PURE__ */ new Set();
+    for (const s of visible) {
+      set.add(s.from);
+      set.add(s.to);
+      if (s.alsoLights) set.add(s.alsoLights);
+    }
+    return set;
+  }, [visible]);
+  const activeNodes = (0, import_react3.useMemo)(() => {
+    const s = /* @__PURE__ */ new Set();
+    if (activeStage) {
+      s.add(activeStage.to);
+      if (activeStage.alsoLights) s.add(activeStage.alsoLights);
+    }
+    return s;
+  }, [activeStage]);
+  const edges = (0, import_react3.useMemo)(() => {
+    const byKey = /* @__PURE__ */ new Map();
+    visible.forEach((s) => {
+      byKey.set(`${s.from}\u2192${s.to}`, { from: s.from, to: s.to, lastStage: s });
+    });
+    return [...byKey.values()].map(({ from, to, lastStage }) => {
+      const isActive = activeStage !== void 0 && from === activeStage.from && to === activeStage.to;
+      const { sourceHandle, targetHandle } = pickHandles(from, to);
+      const isLoop = to === "agent" && (from === "tool" || from === "skill");
+      return {
+        id: `${from}\u2192${to}`,
+        source: from,
+        target: to,
+        sourceHandle,
+        targetHandle,
+        type: "labelled",
+        // Only loop edges get the marching-ants animation.
+        animated: isLoop,
+        data: {
+          primitive: lastStage.primitive,
+          active: isActive,
+          isLoop,
+          stage: lastStage
+        }
+      };
+    });
+  }, [visible, activeStage]);
+  const nodes = (0, import_react3.useMemo)(() => {
+    return Object.keys(NODE_POSITIONS).filter((id) => {
+      if (id === "skill") return touched.has("skill");
+      return true;
+    }).map((id) => ({
+      id,
+      type: "lens",
+      position: NODE_POSITIONS[id],
+      data: {
+        id,
+        active: activeNodes.has(id),
+        touched: touched.has(id),
+        // Which of the Agent's three ports actually MUTATED this step.
+        // Multiple can be true at once (read_skill touches all three).
+        ...id === "agent" && activeStage ? { activeMutations: activeStage.mutations } : {},
+        // Skill annotation on the Agent node — tells the user which
+        // skill is governing the current System Prompt + Tools. Pure
+        // context signal; doesn't affect layout.
+        ...id === "agent" && activeSkillId ? { activeSkillId } : {},
+        // Tool node shows the SPECIFIC tool name that's currently
+        // being called — debugging without this is guesswork ("we
+        // called a tool — but which one?"). Only surfaces when the
+        // active stage actually references a tool name.
+        ...id === "tool" && activeStage?.toolName && (activeStage.from === "tool" || activeStage.to === "tool") ? {
+          activeLabel: activeStage.toolName,
+          ...activeStage.parallelCount ? { parallelCount: activeStage.parallelCount } : {}
+        } : {}
+      },
+      draggable: false
+    }));
+  }, [activeNodes, touched, activeStage, activeSkillId]);
+  const nodeTypes = (0, import_react3.useMemo)(() => ({ lens: LensNode }), []);
+  const edgeTypes = (0, import_react3.useMemo)(() => ({ labelled: LensEdge(onEdgeClick) }), [onEdgeClick]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      "data-fp-lens": "stage-flow",
+      style: {
+        height,
+        background: t.bg,
+        borderBottom: `1px solid ${t.border}`
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EdgeMarkerDefs, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_react4.ReactFlow,
+          {
+            nodes,
+            edges,
+            nodeTypes,
+            edgeTypes,
+            fitView: true,
+            fitViewOptions: { padding: 0.15 },
+            proOptions: { hideAttribution: true },
+            nodesDraggable: false,
+            nodesConnectable: false,
+            elementsSelectable: false,
+            panOnDrag: false,
+            zoomOnScroll: false,
+            zoomOnPinch: false,
+            zoomOnDoubleClick: false,
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              import_react4.Background,
+              {
+                variant: import_react4.BackgroundVariant.Dots,
+                gap: 18,
+                size: 1,
+                color: t.border
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function EdgeMarkerDefs() {
+  const t = useLensTheme();
+  const active = t.accent;
+  const loop = `color-mix(in srgb, ${t.accent} 55%, ${t.border})`;
+  const dim = t.border;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      style: { position: "absolute", width: 0, height: 0, pointerEvents: "none" },
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("defs", { children: [
+        { id: "lens-arrow-active", fill: active },
+        { id: "lens-arrow-loop", fill: loop },
+        { id: "lens-arrow-dim", fill: dim }
+      ].map((m) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "marker",
+        {
+          id: m.id,
+          viewBox: "0 0 10 10",
+          refX: "9",
+          refY: "5",
+          markerWidth: "6",
+          markerHeight: "6",
+          orient: "auto-start-reverse",
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: m.fill })
+        },
+        m.id
+      )) })
+    }
+  );
+}
+var NODE_KEYFRAMES_ID = "fp-lens-node-keyframes";
+var NODE_KEYFRAMES_CSS = `
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes fp-lens-pulse {
+    0%, 100% { opacity: 0.4; transform: scale(1); }
+    50% { opacity: 0.12; transform: scale(1.08); }
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  @keyframes fp-lens-pulse { 0%, 100% { opacity: 0.3; } }
+}
+`;
+function injectNodeKeyframes() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(NODE_KEYFRAMES_ID)) return;
+  const el = document.createElement("style");
+  el.id = NODE_KEYFRAMES_ID;
+  el.textContent = NODE_KEYFRAMES_CSS;
+  document.head.appendChild(el);
+}
+function LensNode({ data }) {
+  const t = useLensTheme();
+  const d = data;
+  injectNodeKeyframes();
+  const isActive = d.active;
+  const isDone = !d.active && d.touched;
+  const bg = isActive ? t.accent : isDone ? t.bgElev : t.bg;
+  const border = isActive ? t.accent : isDone ? t.border : t.border;
+  const textColor = isActive ? "#ffffff" : isDone ? t.text : t.textSubtle;
+  const shadow = isActive ? `0 0 18px color-mix(in srgb, ${t.accent} 42%, transparent)` : isDone ? `0 2px 8px rgba(0,0,0,0.18)` : `0 1px 3px rgba(0,0,0,0.08)`;
+  const label = NODE_LABELS[d.id];
+  const sub = isActive && d.activeLabel ? d.activeLabel : NODE_SUBLABELS[d.id];
+  const isAgent = d.id === "agent";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { position: "relative", display: "inline-block" }, children: [
+    isActive && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: -6,
+          borderRadius: 14,
+          border: `2px solid ${t.accent}`,
+          opacity: 0.35,
+          pointerEvents: "none",
+          animation: "fp-lens-pulse 1.6s ease-out infinite"
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        style: {
+          width: isAgent ? 200 : 150,
+          padding: "12px 16px",
+          borderRadius: 10,
+          background: bg,
+          border: `2px solid ${border}`,
+          color: textColor,
+          fontFamily: t.fontSans,
+          textAlign: "center",
+          boxShadow: shadow,
+          transition: "background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, color 220ms ease"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 6 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(NodeIcon, { id: d.id, color: textColor }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: 13, fontWeight: 600 }, children: label })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
+            {
+              style: {
+                fontSize: isActive && d.activeLabel ? 11 : 10,
+                color: isActive ? "rgba(255,255,255,0.95)" : t.textSubtle,
+                marginTop: 2,
+                fontWeight: isActive && d.activeLabel ? 600 : 400,
+                fontFamily: isActive && d.activeLabel ? t.fontMono : t.fontSans,
+                maxWidth: isAgent ? 180 : 130,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                margin: "2px auto 0"
+              },
+              title: sub,
+              children: sub
+            }
+          ),
+          d.id === "tool" && isActive && (d.parallelCount ?? 0) > 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "div",
+            {
+              title: `This tool is one of ${d.parallelCount} called in parallel this round`,
+              style: {
+                marginTop: 4,
+                alignSelf: "center",
+                display: "inline-block",
+                padding: "1px 7px",
+                borderRadius: 999,
+                background: "rgba(255,255,255,0.25)",
+                color: "#ffffff",
+                fontSize: 9,
+                fontWeight: 700,
+                letterSpacing: "0.08em",
+                textTransform: "uppercase"
+              },
+              children: [
+                "\u26A1 Parallel \xB7 ",
+                d.parallelCount
+              ]
+            }
+          ),
+          isAgent && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+            d.activeSkillId && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              "div",
+              {
+                title: `System Prompt + Tools are currently governed by the ${d.activeSkillId} skill`,
+                style: {
+                  marginTop: 8,
+                  padding: "3px 9px",
+                  borderRadius: 999,
+                  background: isActive ? "rgba(255,255,255,0.18)" : t.bgElev,
+                  border: `1px solid ${isActive ? "rgba(255,255,255,0.35)" : t.border}`,
+                  color: isActive ? "#ffffff" : t.accent,
+                  fontSize: 10,
+                  fontFamily: t.fontMono,
+                  fontWeight: 600,
+                  whiteSpace: "nowrap",
+                  maxWidth: 180,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  display: "inline-block"
+                },
+                children: [
+                  "\u{1F4DA} ",
+                  d.activeSkillId
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              AgentPorts,
+              {
+                active: d.active,
+                mutations: d.activeMutations,
+                filledCard: isActive
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react4.Handle, { type: "source", position: import_react4.Position.Top, id: "t-out", style: handleStyle(-14, 0) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react4.Handle, { type: "target", position: import_react4.Position.Top, id: "t-in", style: handleStyle(14, 0) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react4.Handle, { type: "source", position: import_react4.Position.Bottom, id: "b-out", style: handleStyle(14, 0) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react4.Handle, { type: "target", position: import_react4.Position.Bottom, id: "b-in", style: handleStyle(-14, 0) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react4.Handle, { type: "source", position: import_react4.Position.Left, id: "l-out", style: handleStyle(0, 10) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react4.Handle, { type: "target", position: import_react4.Position.Left, id: "l-in", style: handleStyle(0, -10) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react4.Handle, { type: "source", position: import_react4.Position.Right, id: "r-out", style: handleStyle(0, -10) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react4.Handle, { type: "target", position: import_react4.Position.Right, id: "r-in", style: handleStyle(0, 10) })
+        ]
+      }
+    )
+  ] });
+}
+function NodeIcon({ id, color }) {
+  const size = 16;
+  const props = {
+    width: size,
+    height: size,
+    viewBox: `0 0 ${size} ${size}`,
+    fill: "none",
+    style: { flexShrink: 0 }
+  };
+  if (id === "user") {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "8", cy: "5", r: "2.5", stroke: color, strokeWidth: "1.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M3.5 14C3.5 11 5.5 9 8 9S12.5 11 12.5 14", stroke: color, strokeWidth: "1.5", strokeLinecap: "round" })
+    ] });
+  }
+  if (id === "agent") {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "8", cy: "8", r: "6", stroke: color, strokeWidth: "1.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M5.5 8C5.5 6.5 6.5 5 8 5S10.5 6.5 10.5 8", stroke: color, strokeWidth: "1.2", strokeLinecap: "round" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "8", cy: "9.5", r: "1", fill: color }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "8", y1: "2", x2: "8", y2: "3.5", stroke: color, strokeWidth: "1", strokeLinecap: "round" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12.5", y1: "4", x2: "11.2", y2: "5", stroke: color, strokeWidth: "1", strokeLinecap: "round" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "3.5", y1: "4", x2: "4.8", y2: "5", stroke: color, strokeWidth: "1", strokeLinecap: "round" })
+    ] });
+  }
+  if (id === "tool") {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "8", cy: "8", r: "3", stroke: color, strokeWidth: "1.5" }),
+      [0, 45, 90, 135, 180, 225, 270, 315].map((angle) => {
+        const rad = angle * Math.PI / 180;
+        const x1 = 8 + Math.cos(rad) * 4.5;
+        const y1 = 8 + Math.sin(rad) * 4.5;
+        const x2 = 8 + Math.cos(rad) * 6;
+        const y2 = 8 + Math.sin(rad) * 6;
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "line",
+          {
+            x1,
+            y1,
+            x2,
+            y2,
+            stroke: color,
+            strokeWidth: "1.5",
+            strokeLinecap: "round"
+          },
+          angle
+        );
+      })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M3 4h7a2 2 0 0 1 2 2v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z", stroke: color, strokeWidth: "1.4", strokeLinejoin: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M5.5 7h4M5.5 9.5h4", stroke: color, strokeWidth: "1.2", strokeLinecap: "round" })
+  ] });
+}
+function handleStyle(dx, dy) {
+  return {
+    ...HANDLE_STYLE,
+    transform: `translate(${dx}px, ${dy}px)`
+  };
+}
+function AgentPorts({
+  active,
+  mutations,
+  filledCard
+}) {
+  const t = useLensTheme();
+  const litSP = active && mutations?.systemPrompt === true;
+  const litMsg = active && mutations?.messages === true;
+  const litTools = active && mutations?.tools === true;
+  const spBadge = mutations?.systemPromptDeltaChars !== void 0 ? `+${mutations.systemPromptDeltaChars.toLocaleString()} chars` : null;
+  const toolsBadge = (() => {
+    const added = mutations?.toolsAdded ?? 0;
+    const removed = mutations?.toolsRemoved ?? 0;
+    if (added === 0 && removed === 0) return null;
+    const bits = [];
+    if (added > 0) bits.push(`+${added}`);
+    if (removed > 0) bits.push(`-${removed}`);
+    return bits.join(" / ");
+  })();
+  const ports = [
+    {
+      key: "system-prompt",
+      label: "System Prompt",
+      hint: "Instructions Neo runs on",
+      lit: litSP,
+      badge: litSP ? spBadge : null
+    },
+    {
+      key: "message",
+      label: "Messages",
+      hint: "Conversation so far",
+      lit: litMsg,
+      badge: null
+    },
+    {
+      key: "tool",
+      label: "Tools",
+      hint: "What Neo can call",
+      lit: litTools,
+      badge: litTools ? toolsBadge : null
+    }
+  ];
+  const boxBg = filledCard ? "rgba(255,255,255,0.12)" : t.bg;
+  const boxBorder = filledCard ? "rgba(255,255,255,0.25)" : t.border;
+  const portIdle = filledCard ? "rgba(255,255,255,0.7)" : t.textMuted;
+  const portLitBg = filledCard ? "rgba(255,255,255,0.25)" : `color-mix(in srgb, ${t.accent} 30%, transparent)`;
+  const portLitColor = filledCard ? "#ffffff" : t.accent;
+  const portLitBorder = filledCard ? "#ffffff" : t.accent;
+  const portIdleBorder = filledCard ? "rgba(255,255,255,0.3)" : t.border;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 3,
+        marginTop: 8,
+        padding: 4,
+        background: boxBg,
+        border: `1px solid ${boxBorder}`,
+        borderRadius: 6
+      },
+      children: ports.map((p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "div",
+        {
+          title: p.hint,
+          style: {
+            padding: "2px 8px",
+            borderRadius: 3,
+            background: p.lit ? portLitBg : "transparent",
+            color: p.lit ? portLitColor : portIdle,
+            fontSize: 10,
+            fontWeight: p.lit ? 600 : 500,
+            letterSpacing: "0.02em",
+            textAlign: "left",
+            fontFamily: t.fontSans,
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            borderLeft: `2px solid ${p.lit ? portLitBorder : portIdleBorder}`
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: 8 }, children: "\u25B8" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { flex: 1 }, children: p.label }),
+            p.badge && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "span",
+              {
+                style: {
+                  fontSize: 9,
+                  padding: "0 4px",
+                  borderRadius: 3,
+                  background: filledCard ? "rgba(255,255,255,0.22)" : t.bg,
+                  color: p.lit ? portLitColor : portIdle,
+                  fontFamily: t.fontMono,
+                  fontWeight: 600
+                },
+                children: p.badge
+              }
+            )
+          ]
+        },
+        p.key
+      ))
+    }
+  );
+}
+var HANDLE_STYLE = {
+  opacity: 0,
+  pointerEvents: "none",
+  width: 1,
+  height: 1
+};
+function LensEdge(onEdgeClick) {
+  return function LensEdgeInner({
+    id,
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    data
+  }) {
+    const t = useLensTheme();
+    const d = data;
+    const [edgePath] = (0, import_react4.getSmoothStepPath)({
+      sourceX,
+      sourceY,
+      sourcePosition,
+      targetX,
+      targetY,
+      targetPosition,
+      borderRadius: 10
+    });
+    const stroke = d.active ? t.accent : d.isLoop ? `color-mix(in srgb, ${t.accent} 55%, ${t.border})` : t.border;
+    const strokeWidth = d.active ? 2.25 : d.isLoop ? 1.75 : 1.5;
+    const strokeDasharray = d.isLoop ? "5 4" : void 0;
+    const markerId = d.active ? "lens-arrow-active" : d.isLoop ? "lens-arrow-loop" : "lens-arrow-dim";
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_react4.BaseEdge,
+        {
+          id,
+          path: edgePath,
+          style: {
+            stroke,
+            strokeWidth,
+            strokeDasharray,
+            filter: d.active ? `drop-shadow(0 0 6px color-mix(in srgb, ${t.accent} 50%, transparent))` : void 0,
+            cursor: onEdgeClick ? "pointer" : "default"
+          },
+          markerEnd: `url(#${markerId})`
+        }
+      ),
+      onEdgeClick && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "path",
+        {
+          d: edgePath,
+          fill: "none",
+          stroke: "transparent",
+          strokeWidth: 12,
+          style: { cursor: "pointer" },
+          onClick: () => onEdgeClick(d.stage)
+        }
+      )
+    ] });
+  };
+}
+
+// src/panels/TimeTravel.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function TimeTravel({
+  stages,
+  focusIndex,
+  onFocusChange,
+  isLive
+}) {
+  const t = useLensTheme();
+  const max = Math.max(0, stages.length - 1);
+  function step(delta) {
+    const next = Math.min(max, Math.max(0, focusIndex + delta));
+    onFocusChange(next);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      "data-fp-lens": "time-travel",
+      style: {
+        // Frosted-glass oval pill, floating clear of the surrounding
+        // surfaces. `color-mix` gives a translucent tint using the
+        // current theme's elevated bg; `backdrop-filter` blurs
+        // whatever's behind (the graph + ask card show through
+        // softly). Margin creates air around the pill so it reads as
+        // a distinct floating control, not a toolbar bar.
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        padding: "8px 14px",
+        margin: "10px 14px",
+        background: `color-mix(in srgb, ${t.bgElev} 55%, transparent)`,
+        backdropFilter: "blur(14px) saturate(140%)",
+        WebkitBackdropFilter: "blur(14px) saturate(140%)",
+        border: `1px solid color-mix(in srgb, ${t.border} 70%, transparent)`,
+        borderRadius: 999,
+        boxShadow: "0 4px 16px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06)",
+        fontFamily: t.fontSans
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            onClick: () => step(-1),
+            disabled: focusIndex <= 0 || stages.length === 0,
+            style: btnStyle(t, false),
+            title: "Previous step (\u2190)",
+            children: "\u25C0"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            onClick: () => step(1),
+            disabled: focusIndex >= max || stages.length === 0,
+            style: btnStyle(t, false),
+            title: "Next step (\u2192)",
+            children: "\u25B6"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            onClick: () => onFocusChange(max),
+            disabled: stages.length === 0 || isLive === true,
+            style: btnStyle(t, isLive !== true && stages.length > 0),
+            title: "Jump to latest step",
+            children: "\u27F3 Live"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "input",
+          {
+            type: "range",
+            min: 0,
+            max,
+            value: Math.min(focusIndex, max),
+            onChange: (e) => onFocusChange(Number(e.target.value)),
+            disabled: stages.length <= 1,
+            style: { flex: 1, accentColor: t.accent, minWidth: 120 }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            style: {
+              fontSize: 11,
+              color: t.textMuted,
+              fontFamily: t.fontMono,
+              whiteSpace: "nowrap",
+              minWidth: 80,
+              textAlign: "right"
+            },
+            children: stages.length === 0 ? "no steps yet" : `Step ${focusIndex + 1} / ${stages.length}`
+          }
+        )
+      ]
+    }
+  );
+}
+function btnStyle(t, highlighted) {
+  return {
+    background: highlighted ? t.accent : `color-mix(in srgb, ${t.bg} 40%, transparent)`,
+    color: highlighted ? "#fff" : t.textMuted,
+    border: `1px solid color-mix(in srgb, ${t.border} 60%, transparent)`,
+    borderRadius: 999,
+    padding: "3px 12px",
+    fontSize: 12,
+    cursor: "pointer",
+    width: "auto",
+    fontWeight: 500,
+    whiteSpace: "nowrap",
+    transition: "background 140ms ease, border-color 140ms ease, color 140ms ease"
+  };
+}
+
+// src/panels/AskCard.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function AskCard({ timeline, focusIndex, stages }) {
+  const t = useLensTheme();
+  const currentStage = stages[focusIndex];
+  const currentTurn = currentStage !== void 0 ? timeline.turns[currentStage.turnIndex] : timeline.turns[0];
+  const currentIter = currentStage?.iterIndex !== void 0 ? currentTurn?.iterations.find((it) => it.index === currentStage.iterIndex) : void 0;
+  const currentTool = currentStage?.toolName && currentIter ? currentIter.toolCalls.find((tc) => tc.name === currentStage.toolName) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      "data-fp-lens": "ask-card",
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 12,
+        padding: 14,
+        background: t.bg,
+        fontFamily: t.fontSans,
+        color: t.text,
+        overflow: "auto"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Label3, { t, children: "Your question" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "div",
+            {
+              style: {
+                marginTop: 4,
+                padding: "10px 12px",
+                background: `color-mix(in srgb, ${t.accent} 12%, ${t.bgElev})`,
+                border: `1px solid ${t.border}`,
+                borderRadius: 6,
+                fontSize: 13,
+                lineHeight: 1.5
+              },
+              children: currentTurn?.userPrompt ?? "No question yet."
+            }
+          )
+        ] }),
+        currentStage && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Label3, { t, children: [
+            "Step ",
+            focusIndex + 1,
+            " / ",
+            stages.length
+          ] }),
+          !(currentTool && currentStage.from === "tool") && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { marginTop: 4, fontSize: 13, color: t.text, lineHeight: 1.5 }, children: currentStage.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "div",
+            {
+              style: {
+                marginTop: 8,
+                display: "flex",
+                gap: 6,
+                flexWrap: "wrap",
+                fontSize: 10,
+                color: t.textSubtle
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Pill, { t, children: primitivePill(currentStage) }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Pill, { t, children: [
+                  friendlyNode(currentStage.from),
+                  " \u2192 ",
+                  friendlyNode(currentStage.to)
+                ] }),
+                currentStage.toolName && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Pill, { t, children: currentStage.toolName })
+              ]
+            }
+          )
+        ] }),
+        currentStage?.from === "agent" && currentIter?.assistantContent && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Label3, { t, children: "Agent reasoning" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "div",
+            {
+              style: {
+                marginTop: 4,
+                padding: "10px 12px",
+                background: t.bgElev,
+                border: `1px solid ${t.border}`,
+                borderLeft: `3px solid ${t.accent}`,
+                borderRadius: 6,
+                fontSize: 12,
+                lineHeight: 1.55,
+                whiteSpace: "pre-wrap",
+                maxHeight: 220,
+                overflow: "auto"
+              },
+              children: currentIter.assistantContent
+            }
+          )
+        ] }),
+        currentTool && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Label3, { t, children: currentStage?.to === "tool" ? "Arguments" : "Tool returned" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "pre",
+            {
+              style: {
+                marginTop: 4,
+                padding: "8px 10px",
+                background: t.bgElev,
+                border: `1px solid ${t.border}`,
+                borderRadius: 6,
+                fontSize: 11,
+                fontFamily: t.fontMono,
+                color: currentTool.error ? t.error : t.text,
+                whiteSpace: "pre-wrap",
+                maxHeight: 180,
+                overflow: "auto",
+                margin: 0
+              },
+              children: currentStage?.to === "tool" ? JSON.stringify(currentTool.arguments, null, 2) : currentTool.result
+            }
+          )
+        ] }),
+        timeline.turns.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Label3, { t, children: "Conversation" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { marginTop: 4, fontSize: 12, color: t.textMuted, lineHeight: 1.5 }, children: [
+            timeline.turns.length,
+            " question",
+            timeline.turns.length === 1 ? "" : "s",
+            " so far \xB7",
+            " ",
+            timeline.tools.length,
+            " tool call",
+            timeline.tools.length === 1 ? "" : "s",
+            " total"
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function Label3({
+  t,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      style: {
+        fontSize: 10,
+        color: t.textSubtle,
+        textTransform: "uppercase",
+        letterSpacing: "0.08em",
+        fontWeight: 600
+      },
+      children
+    }
+  );
+}
+function Pill({
+  t,
+  children,
+  warn
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "span",
+    {
+      style: {
+        padding: "1px 6px",
+        borderRadius: 3,
+        background: warn ? `color-mix(in srgb, ${t.warning} 20%, transparent)` : t.bgElev,
+        color: warn ? t.warning : t.textMuted,
+        fontWeight: 600,
+        textTransform: "uppercase",
+        letterSpacing: "0.04em"
+      },
+      children
+    }
+  );
+}
+function friendlyNode(id) {
+  if (!id) return id;
+  return id.charAt(0).toUpperCase() + id.slice(1);
+}
+function primitivePill(stage) {
+  if (stage.primitive === "system-prompt") return "System Prompt";
+  if (stage.primitive === "message") return "Message";
+  if (stage.toolKind === "skill") return "Tool (Skill)";
+  if (stage.toolKind === "ask-human") return "Tool (Ask user)";
+  return "Tool";
+}
+
+// src/panels/RunSummary.tsx
+var import_react5 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function RunSummary({ timeline }) {
+  const t = useLensTheme();
+  const [open, setOpen] = (0, import_react5.useState)(false);
+  const completedTurns = timeline.turns.filter((turn) => turn.finalContent !== "");
+  if (completedTurns.length === 0) return null;
+  const toolCounts = /* @__PURE__ */ new Map();
+  for (const tc of timeline.tools) {
+    const prev = toolCounts.get(tc.name) ?? { count: 0, totalMs: 0 };
+    toolCounts.set(tc.name, {
+      count: prev.count + 1,
+      totalMs: prev.totalMs + (tc.durationMs ?? 0)
+    });
+  }
+  const toolList = [...toolCounts.entries()].sort((a, b) => b[1].count - a[1].count);
+  const activatedSkills = /* @__PURE__ */ new Set();
+  for (const tc of timeline.tools) {
+    if (tc.name === "read_skill") {
+      const id = tc.arguments?.id;
+      if (typeof id === "string") activatedSkills.add(id);
+    }
+  }
+  const totalIn = timeline.turns.reduce((s, turn) => s + turn.totalInputTokens, 0);
+  const totalOut = timeline.turns.reduce((s, turn) => s + turn.totalOutputTokens, 0);
+  const totalMs = timeline.turns.reduce((s, turn) => s + turn.totalDurationMs, 0);
+  const totalIters = timeline.turns.reduce((s, turn) => s + turn.iterations.length, 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      "data-fp-lens": "run-summary",
+      style: {
+        borderTop: `1px solid ${t.border}`,
+        background: t.bgElev,
+        fontFamily: t.fontSans
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          "button",
+          {
+            onClick: () => setOpen((v) => !v),
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              width: "100%",
+              padding: "8px 14px",
+              background: "transparent",
+              border: "none",
+              color: t.textMuted,
+              fontFamily: "inherit",
+              fontSize: 12,
+              cursor: "pointer",
+              textAlign: "left",
+              fontWeight: 400
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontSize: 10 }, children: open ? "\u25BE" : "\u25B8" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "span",
+                {
+                  style: {
+                    fontSize: 10,
+                    color: t.textSubtle,
+                    textTransform: "uppercase",
+                    letterSpacing: "0.08em",
+                    fontWeight: 600
+                  },
+                  children: "Run summary"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { flex: 1 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: { fontSize: 11, color: t.textMuted }, children: [
+                timeline.tools.length,
+                " tool call",
+                timeline.tools.length === 1 ? "" : "s",
+                " \xB7",
+                " ",
+                activatedSkills.size,
+                " skill",
+                activatedSkills.size === 1 ? "" : "s",
+                " \xB7",
+                " ",
+                totalIn.toLocaleString(),
+                "\u2192",
+                totalOut.toLocaleString(),
+                " tok \xB7",
+                " ",
+                (totalMs / 1e3).toFixed(1),
+                "s"
+              ] })
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          "div",
+          {
+            style: {
+              padding: "6px 14px 14px",
+              display: "grid",
+              gridTemplateColumns: "1fr 1fr",
+              gap: 14,
+              fontSize: 12,
+              color: t.text
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Label4, { t, children: [
+                  "Tools used \xB7 ",
+                  timeline.tools.length
+                ] }),
+                toolList.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { color: t.textSubtle, fontSize: 11, fontStyle: "italic" }, children: "None." }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: toolList.map(([name, stats]) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                  "li",
+                  {
+                    style: {
+                      display: "flex",
+                      gap: 8,
+                      padding: "3px 0",
+                      fontFamily: t.fontMono,
+                      fontSize: 11
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { color: t.accent, flex: 1 }, children: name }),
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: { color: t.textMuted }, children: [
+                        "\xD7",
+                        stats.count
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { color: t.textSubtle, minWidth: 60, textAlign: "right" }, children: stats.totalMs > 0 ? `${Math.round(stats.totalMs)}ms` : "\u2014" })
+                    ]
+                  },
+                  name
+                )) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Label4, { t, children: [
+                  "Skills activated \xB7 ",
+                  activatedSkills.size
+                ] }),
+                activatedSkills.size === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { color: t.textSubtle, fontSize: 11, fontStyle: "italic" }, children: "None." }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: [...activatedSkills].map((id) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  "li",
+                  {
+                    style: {
+                      padding: "3px 0",
+                      fontFamily: t.fontMono,
+                      fontSize: 11,
+                      color: t.text
+                    },
+                    children: id
+                  },
+                  id
+                )) }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { marginTop: 10 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Label4, { t, children: "Totals" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                    "div",
+                    {
+                      style: {
+                        display: "grid",
+                        gridTemplateColumns: "auto 1fr",
+                        gap: "3px 10px",
+                        marginTop: 4,
+                        fontSize: 11,
+                        color: t.textMuted
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Tokens" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: { color: t.text, fontFamily: t.fontMono }, children: [
+                          totalIn.toLocaleString(),
+                          " \u2192 ",
+                          totalOut.toLocaleString()
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Wall time" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: { color: t.text, fontFamily: t.fontMono }, children: [
+                          (totalMs / 1e3).toFixed(2),
+                          "s"
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "LLM calls" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { color: t.text, fontFamily: t.fontMono }, children: totalIters }),
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Turns" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { color: t.text, fontFamily: t.fontMono }, children: completedTurns.length })
+                      ]
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function Label4({
+  t,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      style: {
+        fontSize: 10,
+        color: t.textSubtle,
+        textTransform: "uppercase",
+        letterSpacing: "0.08em",
+        fontWeight: 600,
+        marginBottom: 4
+      },
+      children
+    }
+  );
+}
+
+// src/adapters/deriveStages.ts
+function deriveStages(timeline) {
+  const stages = [];
+  let idx = 0;
+  const push = (s) => {
+    stages.push({ ...s, index: idx++ });
+  };
+  let pending = null;
+  const consumePending = (base) => {
+    if (!pending) return base;
+    const merged = { ...base, ...pending };
+    pending = null;
+    return merged;
+  };
+  for (const turn of timeline.turns) {
+    push({
+      from: "user",
+      to: "agent",
+      label: truncate(turn.userPrompt, 60),
+      primitive: "message",
+      turnIndex: turn.index,
+      mutations: consumePending({ messages: true })
+    });
+    for (const iter of turn.iterations) {
+      const parallelCount = iter.toolCalls.length > 1 ? iter.toolCalls.length : void 0;
+      for (const tc of iter.toolCalls) {
+        const kind = classifyTool(tc);
+        if (kind === "skill-management") {
+          push({
+            from: "agent",
+            to: "tool",
+            alsoLights: "skill",
+            label: skillManagementLabel(tc),
+            primitive: "tool",
+            turnIndex: turn.index,
+            iterIndex: iter.index,
+            toolName: tc.name,
+            toolKind: "skill",
+            mutations: consumePending({ messages: true })
+          });
+          const isReadSkill = tc.name === "read_skill";
+          push({
+            from: "tool",
+            to: "agent",
+            alsoLights: "skill",
+            label: isReadSkill ? `Skill body delivered (+${tc.result.length} chars) \u2014 will activate next step` : `Skills list (${countSkills(tc.result)} skills)`,
+            primitive: "tool",
+            turnIndex: turn.index,
+            iterIndex: iter.index,
+            toolName: tc.name,
+            toolKind: "skill",
+            mutations: { messages: true }
+          });
+          if (isReadSkill) {
+            const spDelta = tc.result.length;
+            const activatedSkillId = tc.arguments?.id ?? void 0;
+            pending = {
+              systemPrompt: true,
+              tools: true,
+              systemPromptDeltaChars: spDelta,
+              // Stash the ACTUAL content that just entered the System
+              // Prompt + the skill id that activated. These ride along
+              // `pending` and land on the next outgoing LLM edge where
+              // the mutation is attributed, so the UI can render a
+              // real diff instead of a "not captured" placeholder.
+              systemPromptAdded: tc.result,
+              ...activatedSkillId ? { activatedSkillId } : {}
+            };
+          }
+        } else if (kind === "ask-human") {
+          push({
+            from: "agent",
+            to: "user",
+            label: askHumanLabel(tc),
+            primitive: "message",
+            turnIndex: turn.index,
+            iterIndex: iter.index,
+            toolName: tc.name,
+            toolKind: "ask-human",
+            mutations: consumePending({ messages: true })
+          });
+        } else {
+          push({
+            from: "agent",
+            to: "tool",
+            label: `Called ${tc.name}`,
+            primitive: "tool",
+            turnIndex: turn.index,
+            iterIndex: iter.index,
+            toolName: tc.name,
+            ...parallelCount ? { parallelCount } : {},
+            mutations: consumePending({ messages: true })
+          });
+          push({
+            from: "tool",
+            to: "agent",
+            label: truncate(tc.result, 80),
+            primitive: "tool",
+            turnIndex: turn.index,
+            iterIndex: iter.index,
+            toolName: tc.name,
+            ...parallelCount ? { parallelCount } : {},
+            mutations: { messages: true }
+          });
+        }
+      }
+    }
+    if (turn.finalContent) {
+      const lastIter = turn.iterations[turn.iterations.length - 1];
+      push({
+        from: "agent",
+        to: "user",
+        label: truncate(turn.finalContent, 80),
+        primitive: "message",
+        turnIndex: turn.index,
+        ...lastIter ? { iterIndex: lastIter.index } : {},
+        mutations: consumePending({ messages: true })
+      });
+    }
+  }
+  return stages;
+}
+function classifyTool(tc) {
+  if (tc.name === "list_skills" || tc.name === "read_skill") return "skill-management";
+  if (tc.name === "ask_human" || tc.name === "ask_user") return "ask-human";
+  return "regular";
+}
+function skillManagementLabel(tc) {
+  if (tc.name === "list_skills") return "Asked what skills are available";
+  if (tc.name === "read_skill") {
+    const id = tc.arguments?.id ?? "?";
+    return `Activated the "${id}" skill`;
+  }
+  return `Called ${tc.name}`;
+}
+function askHumanLabel(tc) {
+  const q = tc.arguments?.question ?? "";
+  return q ? `Asked user: ${truncate(q, 50)}` : "Asked user for clarification";
+}
+function countSkills(result) {
+  try {
+    const parsed = JSON.parse(result);
+    if (Array.isArray(parsed?.skills)) return parsed.skills.length;
+    if (Array.isArray(parsed)) return parsed.length;
+  } catch {
+  }
+  return 0;
+}
+function truncate(s, max) {
+  const one = s.replace(/\s+/g, " ").trim();
+  return one.length <= max ? one : one.slice(0, max - 1).trim() + "\u2026";
+}
+
+// src/AgentLens.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function AgentLens({
+  runtimeSnapshot,
+  timeline: providedTimeline,
+  systemPrompt,
+  onToolCallClick,
+  skills,
+  activeSkillId
+}) {
+  const t = useLensTheme();
+  const timeline = (0, import_react6.useMemo)(() => {
+    if (providedTimeline) return providedTimeline;
+    if (!runtimeSnapshot) return null;
+    return fromAgentSnapshot(runtimeSnapshot);
+  }, [providedTimeline, runtimeSnapshot]);
+  const [selectedIterKey, setSelectedIterKey] = (0, import_react6.useState)(null);
+  const [skillsOpen, setSkillsOpen] = (0, import_react6.useState)(false);
+  const derivedActiveSkill = activeSkillId ?? (typeof timeline?.finalDecision?.currentSkill === "string" ? timeline.finalDecision.currentSkill : null);
+  (0, import_react6.useEffect)(() => {
+    if (!skillsOpen) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setSkillsOpen(false);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [skillsOpen]);
+  const handleToolClick = (0, import_react6.useCallback)(
+    (inv) => {
+      setSelectedIterKey(`${inv.turnIndex}.${inv.iterationIndex}`);
+      onToolCallClick?.(inv);
+    },
+    [onToolCallClick]
+  );
+  if (!timeline) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      {
+        "data-fp-lens": "empty",
+        style: {
+          padding: 32,
+          color: t.textMuted,
+          fontFamily: t.fontSans,
+          textAlign: "center",
+          background: t.bg
+        },
+        children: [
+          "No agent run to show yet. Pass ",
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { children: "runtimeSnapshot" }),
+          " after the agent runs."
+        ]
+      }
+    );
+  }
+  const derivedSystemPrompt = systemPrompt ?? (typeof timeline.rawSnapshot?.sharedState?.systemPrompt === "string" ? timeline.rawSnapshot.sharedState.systemPrompt : void 0);
+  const stages = (0, import_react6.useMemo)(() => timeline ? deriveStages(timeline) : [], [timeline]);
+  const [focusIndex, setFocusIndex] = (0, import_react6.useState)(-1);
+  const liveIndex = stages.length - 1;
+  const resolvedFocus = focusIndex === -1 ? liveIndex : Math.min(focusIndex, liveIndex);
+  const isLive = focusIndex === -1;
+  const liveIndexRef = (0, import_react6.useRef)(liveIndex);
+  liveIndexRef.current = liveIndex;
+  const handleFocusChange = (0, import_react6.useCallback)((i) => {
+    setFocusIndex(i >= liveIndexRef.current ? -1 : i);
+  }, []);
+  (0, import_react6.useEffect)(() => {
+    if (stages.length === 0) return;
+    const onKey = (e) => {
+      if (skillsOpen) return;
+      if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+      const tgt = e.target;
+      const tag = tgt?.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || tgt?.isContentEditable) return;
+      const delta = e.key === "ArrowLeft" ? -1 : 1;
+      const next = Math.min(
+        liveIndex,
+        Math.max(0, resolvedFocus + delta)
+      );
+      handleFocusChange(next);
+      e.preventDefault();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [resolvedFocus, liveIndex, stages.length, skillsOpen]);
+  const handleEdgeClick = (0, import_react6.useCallback)(
+    (stage) => {
+      if (stage.iterIndex === void 0) return;
+      setSelectedIterKey(`${stage.turnIndex}.${stage.iterIndex}`);
+      handleFocusChange(stage.index);
+    },
+    [handleFocusChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      "data-fp-lens": "shell",
+      style: {
+        display: "grid",
+        // Top: TimeTravel slider (tt) + Skills button trailing on the
+        // right. Middle-left: vertical StageFlow. Middle-right: AskCard
+        // with current question + active step detail. Below: MessagesPanel
+        // full width. Footer: RunSummary (only after first turn completes).
+        gridTemplateColumns: "minmax(320px, 1fr) minmax(220px, 320px)",
+        gridTemplateRows: "auto auto minmax(0, 1fr) auto",
+        gridTemplateAreas: '"tt tt" "graph ask" "messages messages" "summary summary"',
+        // Self-constraining sizing contract — Lens never requires the
+        // host to get their flex chain exactly right.
+        //
+        //   • `maxHeight: 100dvh` is the hard cap. Even if NOTHING
+        //     upstream delivers a bounded height, the shell can never
+        //     exceed the viewport. This is what makes the grid's
+        //     `minmax(0, 1fr)` messages row actually resolve to a
+        //     bounded number of pixels instead of expanding to content.
+        //   • `height: 100%` + `flex: 1 1 0%` let well-constrained
+        //     hosts still shrink Lens below the viewport cap when they
+        //     want a narrower sidebar.
+        //   • `overflow: hidden` clips children that would otherwise
+        //     blow past the grid and make scrollHeight == clientHeight
+        //     on MessagesPanel (the exact bug this block prevents).
+        //   • `minHeight: 0` unblocks grid + flex size resolution.
+        flex: "1 1 0%",
+        minHeight: 0,
+        height: "100%",
+        maxHeight: "100dvh",
+        overflow: "hidden",
+        background: t.bg,
+        color: t.text,
+        fontFamily: t.fontSans
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `
+        [data-iter-selected="true"] {
+          outline-color: currentColor !important;
+          background: color-mix(in srgb, currentColor 8%, transparent);
+        }
+      ` }),
+        stages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            "div",
+            {
+              style: {
+                gridArea: "tt",
+                display: "flex",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  TimeTravel,
+                  {
+                    stages,
+                    focusIndex: resolvedFocus,
+                    onFocusChange: handleFocusChange,
+                    isLive
+                  }
+                ) }),
+                skills && skills.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                  "button",
+                  {
+                    onClick: () => setSkillsOpen(true),
+                    title: "See all skills registered with the agent",
+                    style: {
+                      // Borderless — rides on the same airy feel as the
+                      // floating time-travel pill. A faint translucent fill
+                      // on hover keeps it discoverable.
+                      background: "transparent",
+                      border: "none",
+                      color: t.textMuted,
+                      padding: "0 16px",
+                      margin: "0 14px 0 0",
+                      fontSize: 12,
+                      cursor: "pointer",
+                      whiteSpace: "nowrap",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 6,
+                      fontWeight: 400,
+                      width: "auto"
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": "true", children: "\u{1F4DA}" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
+                        "Skills \xB7 ",
+                        skills.length
+                      ] }),
+                      derivedActiveSkill && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        "span",
+                        {
+                          style: {
+                            fontSize: 9,
+                            padding: "1px 5px",
+                            borderRadius: 3,
+                            background: `color-mix(in srgb, ${t.success} 25%, transparent)`,
+                            color: t.success,
+                            fontWeight: 600,
+                            textTransform: "uppercase"
+                          },
+                          children: derivedActiveSkill
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "div",
+            {
+              style: {
+                gridArea: "graph",
+                minHeight: 0,
+                overflow: "hidden",
+                borderRight: `1px solid ${t.border}`
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                StageFlow,
+                {
+                  stages,
+                  focusIndex: resolvedFocus,
+                  onEdgeClick: handleEdgeClick,
+                  activeSkillId: derivedActiveSkill
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "div",
+            {
+              style: {
+                gridArea: "ask",
+                minHeight: 0,
+                overflow: "hidden",
+                background: t.bg
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                AskCard,
+                {
+                  timeline,
+                  stages,
+                  focusIndex: resolvedFocus
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "div",
+          {
+            style: {
+              gridArea: "messages",
+              minHeight: 0,
+              overflow: "hidden",
+              // `position: relative` is the containing block for the
+              // absolutely-positioned MessagesPanel inside. This is the
+              // mechanism that forces the panel's height to match this
+              // cell exactly, no matter what the upstream flex/grid
+              // chain does.
+              position: "relative"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              MessagesPanel,
+              {
+                timeline,
+                onToolCallClick: handleToolClick,
+                selectedIterKey,
+                stages,
+                focusIndex: resolvedFocus,
+                onFocusChange: handleFocusChange,
+                isLive,
+                ...derivedSystemPrompt && { systemPrompt: derivedSystemPrompt }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { gridArea: "summary" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RunSummary, { timeline }) }),
+        skillsOpen && skills && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          SkillsPanel,
+          {
+            skills,
+            activeSkillId: derivedActiveSkill,
+            onClose: () => setSkillsOpen(false)
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/panels/IterationStrip.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function IterationStrip({ timeline, selectedKey, onSelect }) {
   const t = useLensTheme();
   const chips = timeline.turns.flatMap(
     (turn) => turn.iterations.map((iter, stepIdx) => ({
@@ -845,7 +3570,7 @@ function IterationStrip({ timeline, selectedKey, onSelect }) {
       toolCount: iter.toolCalls.length
     }))
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       "data-fp-lens": "iteration-strip",
@@ -858,12 +3583,12 @@ function IterationStrip({ timeline, selectedKey, onSelect }) {
         background: t.bgElev
       },
       children: [
-        chips.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: t.textSubtle, fontSize: 11 }, children: "No iterations yet." }),
+        chips.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: t.textSubtle, fontSize: 11 }, children: "No iterations yet." }),
         chips.map((c) => {
           const active = c.key === selectedKey;
           const isFinal = c.toolCount === 0;
           const secs = c.durationMs >= 1e3 ? `${(c.durationMs / 1e3).toFixed(1)}s` : `${Math.round(c.durationMs)}ms`;
-          return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
             "button",
             {
               onClick: () => onSelect?.(c.key),
@@ -884,15 +3609,15 @@ function IterationStrip({ timeline, selectedKey, onSelect }) {
               },
               title: `Question ${c.turn} \xB7 Step ${c.step} \xB7 ${secs}${c.stopReason ? ` \xB7 stop: ${c.stopReason}` : ""}`,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { fontWeight: 600 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { fontWeight: 600 }, children: [
                   "Step ",
                   c.step
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { opacity: 0.85 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { opacity: 0.85 }, children: [
                   " \xB7 ",
                   c.label
                 ] }),
-                isFinal && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { marginLeft: 6 }, children: "\u2713" })
+                isFinal && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { marginLeft: 6 }, children: "\u2713" })
               ]
             },
             c.key
@@ -911,23 +3636,26 @@ function stepHeadline(iter) {
       const id = tc.arguments?.id;
       return id ? `Activated ${id}` : "Activating skill";
     }
-    return `Called ${tc.name}`;
+    if (tc.name === "ask_human" || tc.name === "ask_user") {
+      return "Asked user";
+    }
+    return `Called tool (${tc.name})`;
   }
   if (iter.toolCalls.length <= 3) {
-    return `Called ${iter.toolCalls.map((tc) => tc.name).join(", ")}`;
+    return `Called ${iter.toolCalls.length} tools (${iter.toolCalls.map((tc) => tc.name).join(", ")})`;
   }
   return `Called ${iter.toolCalls.length} tools in parallel`;
 }
 
 // src/panels/ToolCallInspector.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function ToolCallInspector({
   timeline,
   selectedId,
   onSelect
 }) {
   const t = useLensTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       "data-fp-lens": "tool-call-inspector",
@@ -941,7 +3669,7 @@ function ToolCallInspector({
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "div",
           {
             style: {
@@ -960,12 +3688,12 @@ function ToolCallInspector({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { overflow: "auto", flex: 1 }, children: [
-          timeline.tools.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { padding: 14, color: t.textSubtle, fontSize: 12 }, children: "Neo hasn't called any tools yet." }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { overflow: "auto", flex: 1 }, children: [
+          timeline.tools.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { padding: 14, color: t.textSubtle, fontSize: 12 }, children: "Neo hasn't called any tools yet." }),
           timeline.tools.map((tc) => {
             const active = tc.id === selectedId;
             const errored = tc.error === true;
-            return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
               "button",
               {
                 onClick: () => onSelect?.(tc),
@@ -985,7 +3713,7 @@ function ToolCallInspector({
                   fontFamily: "inherit"
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                     "div",
                     {
                       style: {
@@ -996,8 +3724,8 @@ function ToolCallInspector({
                         fontFamily: t.fontMono
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: errored ? t.error : t.accent, fontWeight: 600 }, children: tc.name }),
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: errored ? t.error : t.accent, fontWeight: 600 }, children: tc.name }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                           "span",
                           {
                             style: { color: t.textSubtle, fontSize: 10, marginLeft: "auto" },
@@ -1013,7 +3741,7 @@ function ToolCallInspector({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                     "div",
                     {
                       style: {
@@ -1049,111 +3777,6 @@ function shortArgs2(args) {
   }).join(", ");
 }
 
-// src/AgentLens.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function AgentLens({
-  runtimeSnapshot,
-  timeline: providedTimeline,
-  systemPrompt,
-  onToolCallClick
-}) {
-  const t = useLensTheme();
-  const timeline = (0, import_react2.useMemo)(() => {
-    if (providedTimeline) return providedTimeline;
-    if (!runtimeSnapshot) return null;
-    return fromAgentSnapshot(runtimeSnapshot);
-  }, [providedTimeline, runtimeSnapshot]);
-  const [selectedToolId, setSelectedToolId] = (0, import_react2.useState)(null);
-  const [selectedIterKey, setSelectedIterKey] = (0, import_react2.useState)(null);
-  function handleToolClick(inv) {
-    setSelectedToolId(inv.id);
-    setSelectedIterKey(`${inv.turnIndex}.${inv.iterationIndex}`);
-    onToolCallClick?.(inv);
-  }
-  if (!timeline) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-      "div",
-      {
-        "data-fp-lens": "empty",
-        style: {
-          padding: 32,
-          color: t.textMuted,
-          fontFamily: t.fontSans,
-          textAlign: "center",
-          background: t.bg
-        },
-        children: [
-          "No agent run to show yet. Pass ",
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("code", { children: "runtimeSnapshot" }),
-          " after the agent runs."
-        ]
-      }
-    );
-  }
-  const derivedSystemPrompt = systemPrompt ?? (typeof timeline.rawSnapshot?.sharedState?.systemPrompt === "string" ? timeline.rawSnapshot.sharedState.systemPrompt : void 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    "div",
-    {
-      "data-fp-lens": "shell",
-      style: {
-        display: "grid",
-        gridTemplateColumns: "1fr 320px",
-        gridTemplateRows: "auto 1fr",
-        gridTemplateAreas: '"strip strip" "messages inspector"',
-        height: "100%",
-        minHeight: 0,
-        background: t.bg,
-        color: t.text,
-        fontFamily: t.fontSans
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `
-        [data-iter-selected="true"] {
-          outline-color: currentColor !important;
-          background: color-mix(in srgb, currentColor 8%, transparent);
-        }
-      ` }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { gridArea: "strip" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          IterationStrip,
-          {
-            timeline,
-            selectedKey: selectedIterKey,
-            onSelect: setSelectedIterKey
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { gridArea: "messages", minHeight: 0, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          MessagesPanel,
-          {
-            timeline,
-            onToolCallClick: handleToolClick,
-            selectedIterKey,
-            ...derivedSystemPrompt && { systemPrompt: derivedSystemPrompt }
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "div",
-          {
-            style: {
-              gridArea: "inspector",
-              minHeight: 0,
-              overflow: "hidden",
-              borderLeft: `1px solid ${t.border}`
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-              ToolCallInspector,
-              {
-                timeline,
-                selectedId: selectedToolId,
-                onSelect: handleToolClick
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-
 // src/adapters/LiveTimelineBuilder.ts
 var LiveTimelineBuilder = class {
   constructor() {
@@ -1338,48 +3961,48 @@ var LiveTimelineBuilder = class {
 };
 
 // src/adapters/useLiveTimeline.ts
-var import_react3 = require("react");
+var import_react7 = require("react");
 function useLiveTimeline() {
-  const builderRef = (0, import_react3.useRef)(null);
+  const builderRef = (0, import_react7.useRef)(null);
   if (!builderRef.current) builderRef.current = new LiveTimelineBuilder();
   const builder = builderRef.current;
-  const [timeline, setTimeline] = (0, import_react3.useState)(() => builder.getTimeline());
-  const sync = (0, import_react3.useCallback)(() => {
+  const [timeline, setTimeline] = (0, import_react7.useState)(() => builder.getTimeline());
+  const sync = (0, import_react7.useCallback)(() => {
     setTimeline(builder.getTimeline());
   }, [builder]);
-  const ingest = (0, import_react3.useCallback)(
+  const ingest = (0, import_react7.useCallback)(
     (event) => {
       builder.ingest(event);
       sync();
     },
     [builder, sync]
   );
-  const startTurn = (0, import_react3.useCallback)(
+  const startTurn = (0, import_react7.useCallback)(
     (userPrompt) => {
       builder.startTurn(userPrompt);
       sync();
     },
     [builder, sync]
   );
-  const setSystemPrompt = (0, import_react3.useCallback)(
+  const setSystemPrompt = (0, import_react7.useCallback)(
     (prompt) => {
       builder.setSystemPrompt(prompt);
       sync();
     },
     [builder, sync]
   );
-  const setFinalDecision = (0, import_react3.useCallback)(
+  const setFinalDecision = (0, import_react7.useCallback)(
     (decision) => {
       builder.setFinalDecision(decision);
       sync();
     },
     [builder, sync]
   );
-  const reset = (0, import_react3.useCallback)(() => {
+  const reset = (0, import_react7.useCallback)(() => {
     builder.reset();
     sync();
   }, [builder, sync]);
-  return (0, import_react3.useMemo)(
+  return (0, import_react7.useMemo)(
     () => ({ timeline, ingest, startTurn, setSystemPrompt, setFinalDecision, reset, builder }),
     [timeline, ingest, startTurn, setSystemPrompt, setFinalDecision, reset, builder]
   );
@@ -1387,10 +4010,16 @@ function useLiveTimeline() {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AgentLens,
+  AskCard,
   IterationStrip,
   LiveTimelineBuilder,
   MessagesPanel,
+  RunSummary,
+  SkillsPanel,
+  StageFlow,
+  TimeTravel,
   ToolCallInspector,
+  deriveStages,
   fromAgentSnapshot,
   resolveLensTheme,
   useLensTheme,