agentfootprint-lens 0.3.0 → 0.5.0

package/dist/chunk-2JKRPWPZ.js

@@ -0,0 +1,3793 @@
+import {
+  LiveTimelineBuilder,
+  deriveStages,
+  fromAgentSnapshot
+} from "./chunk-7KGWX7RU.js";
+
+// src/react/Lens.tsx
+import { useState as useState6 } from "react";
+import { ExplainableShell, FootprintTheme } from "footprint-explainable-ui";
+
+// src/react/AgentLens.tsx
+import { useCallback, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState4 } from "react";
+
+// src/react/panels/MessagesPanel.tsx
+import React, { useEffect, useRef, useState } from "react";
+
+// src/react/theme/useLensTheme.ts
+import { useFootprintTheme, coolDark } from "footprint-explainable-ui";
+function useLensTheme() {
+  const ctx = useFootprintTheme();
+  return resolve(ctx);
+}
+function resolve(tokens) {
+  const t = tokens ?? {};
+  const c = t.colors ?? coolDark.colors ?? {};
+  const fallback = coolDark.colors ?? {};
+  return {
+    bg: c.bgPrimary ?? fallback.bgPrimary ?? "#0f172a",
+    bgElev: c.bgSecondary ?? fallback.bgSecondary ?? "#1e293b",
+    bgHover: c.bgTertiary ?? fallback.bgTertiary ?? "#334155",
+    border: c.border ?? fallback.border ?? "#334155",
+    borderStrong: c.bgTertiary ?? fallback.bgTertiary ?? "#334155",
+    text: c.textPrimary ?? fallback.textPrimary ?? "#f8fafc",
+    textMuted: c.textSecondary ?? fallback.textSecondary ?? "#94a3b8",
+    textSubtle: c.textMuted ?? fallback.textMuted ?? "#64748b",
+    accent: c.primary ?? fallback.primary ?? "#6366f1",
+    success: c.success ?? fallback.success ?? "#22c55e",
+    warning: c.warning ?? fallback.warning ?? "#f59e0b",
+    error: c.error ?? fallback.error ?? "#ef4444",
+    fontSans: t.fontFamily?.sans ?? coolDark.fontFamily?.sans ?? "system-ui, sans-serif",
+    fontMono: t.fontFamily?.mono ?? coolDark.fontFamily?.mono ?? "ui-monospace, monospace",
+    radius: t.radius ?? coolDark.radius ?? "8px"
+  };
+}
+
+// src/react/panels/MessagesPanel.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function MessagesPanel({
+  timeline,
+  onToolCallClick,
+  systemPrompt,
+  selectedIterKey,
+  stages,
+  focusIndex,
+  onFocusChange,
+  isLive
+}) {
+  const t = useLensTheme();
+  const scrollRef = useRef(null);
+  const iterRanges = useIterationStageRanges(stages);
+  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]);
+  useEffect(() => {
+    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(key)}"]`
+    );
+    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" });
+    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__ */ 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,
+        padding: "16px 24px",
+        background: t.bg,
+        color: t.text,
+        fontFamily: t.fontSans,
+        fontSize: 14,
+        lineHeight: 1.55,
+        minHeight: 0,
+        overflow: "auto"
+      },
+      children: [
+        systemPrompt && /* @__PURE__ */ jsx(SystemBubble, { text: systemPrompt }),
+        timeline.turns.map((turn) => /* @__PURE__ */ jsx(
+          TurnBlock,
+          {
+            turn,
+            allMessages: timeline.messages,
+            onToolCallClick,
+            iterRanges,
+            focusIndex,
+            stages,
+            onFocusChange
+          },
+          turn.index
+        ))
+      ]
+    }
+  );
+}
+function SystemBubble({ text }) {
+  const t = useLensTheme();
+  const [open, setOpen] = useState(false);
+  const preview = text.slice(0, 140).replace(/\s+/g, " ") + (text.length > 140 ? "\u2026" : "");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        alignSelf: "center",
+        width: "100%",
+        maxWidth: 880,
+        border: `1px dashed ${t.border}`,
+        borderRadius: t.radius,
+        padding: "8px 12px",
+        background: t.bgElev,
+        fontSize: 12,
+        color: t.textMuted
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setOpen((v) => !v),
+            style: {
+              background: "transparent",
+              border: "none",
+              color: t.textMuted,
+              cursor: "pointer",
+              padding: 0,
+              font: "inherit"
+            },
+            children: [
+              /* @__PURE__ */ jsx("strong", { children: "How Neo is configured" }),
+              " ",
+              open ? "\u25BE" : "\u25B8",
+              " ",
+              open ? "" : preview
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsx(
+          "pre",
+          {
+            style: {
+              marginTop: 8,
+              whiteSpace: "pre-wrap",
+              fontFamily: t.fontMono,
+              fontSize: 11,
+              color: t.text
+            },
+            children: text
+          }
+        )
+      ]
+    }
+  );
+}
+function TurnBlock({
+  turn,
+  allMessages,
+  onToolCallClick,
+  iterRanges,
+  focusIndex,
+  stages,
+  onFocusChange
+}) {
+  const t = useLensTheme();
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+    /* @__PURE__ */ jsx(TurnHeader, { turn }),
+    /* @__PURE__ */ jsx(UserBubble, { text: turn.userPrompt }),
+    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__ */ 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__ */ jsxs("div", { style: { fontSize: 11, color: t.textSubtle, textAlign: "center" }, children: [
+      "Answer compiled \xB7 ",
+      turn.iterations.length,
+      " step",
+      turn.iterations.length === 1 ? "" : "s",
+      " \xB7 ",
+      turn.totalInputTokens,
+      "\u2192",
+      turn.totalOutputTokens,
+      " tokens \xB7 ",
+      (turn.totalDurationMs / 1e3).toFixed(1),
+      "s"
+    ] })
+  ] });
+}
+function TurnHeader({ turn }) {
+  const t = useLensTheme();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        color: t.textSubtle,
+        fontSize: 11,
+        textTransform: "uppercase",
+        letterSpacing: "0.08em",
+        fontWeight: 600
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, height: 1, background: t.border } }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          "Your question ",
+          turn.index + 1
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, height: 1, background: t.border } })
+      ]
+    }
+  );
+}
+function UserBubble({ text }) {
+  const t = useLensTheme();
+  return /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        background: `color-mix(in srgb, ${t.accent} 18%, ${t.bgElev})`,
+        border: `1px solid ${t.border}`,
+        color: t.text,
+        maxWidth: 720,
+        padding: "10px 14px",
+        borderRadius: `${t.radius} ${t.radius} 2px ${t.radius}`,
+        whiteSpace: "pre-wrap"
+      },
+      children: text
+    }
+  ) });
+}
+function iterationHeadline(iter) {
+  if (iter.toolCalls.length === 0) {
+    return "Neo is ready to answer";
+  }
+  if (iter.toolCalls.length === 1) {
+    return singleToolHeadline(iter.toolCalls[0]);
+  }
+  const names = iter.toolCalls.map((tc) => tc.name);
+  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,
+  state = "active",
+  stages,
+  range,
+  focusIndex,
+  onClick
+}) {
+  const t = useLensTheme();
+  const [showContext, setShowContext] = 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__ */ jsxs(
+    "div",
+    {
+      "data-iter-key": key,
+      "data-turn-index": turnIndex,
+      "data-iter-index": iter.index,
+      style: {
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        gap: 6,
+        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__ */ 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__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "baseline",
+              gap: 8,
+              fontSize: 13,
+              color: t.textMuted
+            },
+            children: [
+              /* @__PURE__ */ 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__ */ jsxs("span", { style: { color: t.accent, fontWeight: 600 }, children: [
+                      "Round ",
+                      iterPositionInTurn,
+                      ":"
+                    ] }),
+                    /* @__PURE__ */ jsx("span", { style: { color: t.text }, children: headline })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { style: { flex: 1 } }),
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  style: {
+                    fontSize: 10,
+                    color: t.textSubtle,
+                    fontFamily: t.fontMono
+                  },
+                  children: [
+                    iter.inputTokens !== void 0 && `${iter.inputTokens}\u2192${iter.outputTokens ?? "?"} tok \xB7 `,
+                    iter.durationMs !== void 0 && `${(iter.durationMs / 1e3).toFixed(2)}s`
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => setShowContext((v) => !v),
+                  title: "See exactly what Neo saw when deciding this step",
+                  style: {
+                    fontSize: 11,
+                    color: t.textMuted,
+                    background: "transparent",
+                    border: `1px solid ${t.border}`,
+                    borderRadius: 4,
+                    padding: "2px 8px",
+                    cursor: "pointer",
+                    fontWeight: 400,
+                    width: "auto"
+                  },
+                  children: [
+                    showContext ? "Hide" : "Show",
+                    " what Neo saw"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        roundHasStarted && (iter.model || iter.stopReason || (iter.matchedInstructions?.length ?? 0) > 0) && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexWrap: "wrap",
+              gap: 6,
+              fontSize: 10,
+              color: t.textSubtle,
+              fontFamily: t.fontMono,
+              paddingLeft: 12
+            },
+            children: [
+              iter.model && /* @__PURE__ */ jsx(MetaPill, { t, title: "Model the LLM call was routed to", children: iter.model }),
+              iter.stopReason && /* @__PURE__ */ jsxs(MetaPill, { t, title: "Why the LLM stopped producing tokens", children: [
+                "stop: ",
+                iter.stopReason
+              ] }),
+              iter.matchedInstructions?.map((id) => /* @__PURE__ */ jsxs(
+                MetaPill,
+                {
+                  t,
+                  title: "Instruction injected into this round",
+                  accent: true,
+                  children: [
+                    "\u25B8 ",
+                    id
+                  ]
+                },
+                id
+              ))
+            ]
+          }
+        ),
+        roundHasStarted && iter.assistantContent && /* @__PURE__ */ jsx(ReasoningBubble, { text: iter.assistantContent }),
+        roundHasStarted && iter.toolCalls.length > 0 && /* @__PURE__ */ 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__ */ jsx(
+            ToolCallCard,
+            {
+              invocation: tc,
+              onClick: onToolCallClick,
+              resultRevealed
+            },
+            tc.id
+          );
+        }) }),
+        mutations && (mutations.systemPrompt || mutations.tools) && /* @__PURE__ */ jsx(MutationStrip, { mutations, iter }),
+        showContext && /* @__PURE__ */ jsx(
+          ContextDrawer,
+          {
+            messagesSentCount: iter.messagesSentCount,
+            contextMessages,
+            iter
+          }
+        )
+      ]
+    }
+  );
+}
+function ReasoningBubble({ text }) {
+  const t = useLensTheme();
+  const [open, setOpen] = 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__ */ 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__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { children: preview }),
+        " ",
+        /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+        text,
+        needsToggle && /* @__PURE__ */ jsx("div", { style: { marginTop: 6 }, children: /* @__PURE__ */ 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__ */ 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] = 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__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 6,
+        paddingLeft: 12,
+        fontSize: 11,
+        color: t.textMuted,
+        fontFamily: t.fontSans
+      },
+      children: [
+        /* @__PURE__ */ 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__ */ jsx("span", { style: { fontSize: 10, color: t.textSubtle }, children: open ? "\u25BE" : "\u25B8" }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontWeight: 700,
+                    color: t.accent,
+                    textTransform: "uppercase",
+                    letterSpacing: "0.06em",
+                    fontSize: 10
+                  },
+                  children: "\u270E Changed"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: "in Neo's input:" }),
+              mutations.systemPrompt && /* @__PURE__ */ 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__ */ jsxs("span", { style: { fontWeight: 400, marginLeft: 4 }, children: [
+                      "+",
+                      mutations.systemPromptDeltaChars.toLocaleString(),
+                      " chars"
+                    ] })
+                  ]
+                }
+              ),
+              mutations.tools && /* @__PURE__ */ 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__ */ jsxs("span", { style: { fontWeight: 400, marginLeft: 4 }, children: [
+                      mutations.toolsAdded > 0 ? `+${mutations.toolsAdded}` : "",
+                      mutations.toolsRemoved > 0 ? ` -${mutations.toolsRemoved}` : ""
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsx(
+          MutationDiffModal,
+          {
+            mutations,
+            skillId,
+            skillBody,
+            visibleTools: iter.visibleTools,
+            onClose: () => setOpen(false)
+          }
+        )
+      ]
+    }
+  );
+}
+function MutationDiffModal({
+  mutations,
+  skillId,
+  skillBody,
+  visibleTools,
+  onClose
+}) {
+  const t = useLensTheme();
+  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__ */ 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__ */ 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__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  padding: "14px 18px",
+                  borderBottom: `1px solid ${t.border}`
+                },
+                children: [
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          fontSize: 10,
+                          color: t.textSubtle,
+                          textTransform: "uppercase",
+                          letterSpacing: "0.08em",
+                          fontWeight: 600
+                        },
+                        children: "\u270E Changed in Neo's input"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { style: { fontSize: 15, fontWeight: 600, marginTop: 2 }, children: [
+                      "Round diff",
+                      skillId && /* @__PURE__ */ jsxs(Fragment, { children: [
+                        " \xB7 ",
+                        /* @__PURE__ */ jsx(
+                          "code",
+                          {
+                            style: {
+                              fontFamily: t.fontMono,
+                              color: t.accent,
+                              fontWeight: 600
+                            },
+                            children: skillId
+                          }
+                        )
+                      ] })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { style: { flex: 1 } }),
+                  /* @__PURE__ */ 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__ */ jsxs(
+              "div",
+              {
+                style: {
+                  padding: 18,
+                  overflow: "auto",
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 16
+                },
+                children: [
+                  mutations.systemPrompt && /* @__PURE__ */ jsxs("section", { children: [
+                    /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("section", { children: [
+                    /* @__PURE__ */ 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__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: toolsToShow.map((name) => /* @__PURE__ */ 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__ */ 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,
+  iter
+}) {
+  const t = useLensTheme();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        border: `1px dashed ${t.border}`,
+        borderRadius: t.radius,
+        padding: "10px 12px",
+        background: t.bg,
+        fontSize: 12,
+        color: t.textMuted
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontSize: 10,
+              color: t.textSubtle,
+              textTransform: "uppercase",
+              letterSpacing: "0.08em",
+              fontWeight: 600,
+              marginBottom: 8
+            },
+            children: "What Neo saw before this step"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { color: t.text, marginBottom: 8 }, children: [
+          /* @__PURE__ */ jsx("strong", { children: messagesSentCount }),
+          " message",
+          messagesSentCount === 1 ? "" : "s",
+          " in context",
+          iter.model ? ` \xB7 sent to ${iter.model}` : "",
+          iter.inputTokens !== void 0 && ` \xB7 ${iter.inputTokens} input tokens`
+        ] }),
+        contextMessages.length === 0 ? /* @__PURE__ */ jsx("div", { style: { color: t.textSubtle, fontStyle: "italic" }, children: "Just the system configuration \u2014 this is the first call of the conversation." }) : /* @__PURE__ */ jsx("ol", { style: { margin: 0, paddingLeft: 18, display: "flex", flexDirection: "column", gap: 6 }, children: contextMessages.map((m, i) => /* @__PURE__ */ jsxs("li", { style: { fontSize: 12 }, children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                display: "inline-block",
+                padding: "1px 6px",
+                borderRadius: 3,
+                background: m.role === "user" ? `color-mix(in srgb, ${t.accent} 20%, transparent)` : m.role === "assistant" ? t.bgElev : m.role === "tool" ? `color-mix(in srgb, ${t.success} 18%, transparent)` : t.bgElev,
+                color: m.role === "user" ? t.accent : m.role === "tool" ? t.success : t.text,
+                fontFamily: t.fontMono,
+                fontSize: 10,
+                fontWeight: 600,
+                textTransform: "uppercase",
+                marginRight: 6
+              },
+              children: m.role
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { style: { color: t.textMuted }, children: summarizeMessage(m) })
+        ] }, i)) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              marginTop: 10,
+              fontSize: 11,
+              color: t.textSubtle,
+              fontStyle: "italic"
+            },
+            children: "Plus the system configuration (see top of conversation) and the tools Neo had access to."
+          }
+        )
+      ]
+    }
+  );
+}
+function summarizeMessage(m) {
+  if (m.role === "tool") {
+    return `tool result (${m.content.length.toLocaleString()} chars)`;
+  }
+  const t = m.content.replace(/\s+/g, " ").trim();
+  return t.length > 120 ? t.slice(0, 120) + "\u2026" : t;
+}
+function ToolCallCard({
+  invocation,
+  onClick,
+  resultRevealed = true
+}) {
+  const t = useLensTheme();
+  const [open, setOpen] = useState(false);
+  const preview = shortArgs(invocation.arguments);
+  const errored = invocation.error === true;
+  const friendlyVerb = toolVerb(invocation);
+  const borderStyle = resultRevealed ? "solid" : "dashed";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        border: `1px ${borderStyle} ${errored ? t.error : t.border}`,
+        borderLeft: `3px ${borderStyle} ${errored ? t.error : t.accent}`,
+        borderRadius: 6,
+        background: t.bg,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onClick: () => {
+              setOpen((v) => !v);
+              onClick?.(invocation);
+            },
+            style: {
+              padding: "8px 12px",
+              cursor: "pointer",
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+              fontSize: 12
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { color: t.textMuted, fontFamily: t.fontSans }, children: friendlyVerb }),
+              /* @__PURE__ */ jsx("span", { style: { color: errored ? t.error : t.accent, fontWeight: 600, fontFamily: t.fontMono }, children: invocation.name }),
+              preview && /* @__PURE__ */ jsxs("span", { style: { color: t.textMuted, fontFamily: t.fontMono }, children: [
+                "(",
+                preview,
+                ")"
+              ] }),
+              /* @__PURE__ */ jsx("span", { style: { flex: 1 } }),
+              !resultRevealed && /* @__PURE__ */ 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__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: 10,
+                    padding: "1px 6px",
+                    borderRadius: 3,
+                    background: `color-mix(in srgb, ${t.warning} 20%, transparent)`,
+                    color: t.warning,
+                    fontWeight: 600,
+                    textTransform: "uppercase"
+                  },
+                  title: "This tool changed what skill is active",
+                  children: "skill change"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { style: { color: t.textSubtle }, children: open ? "\u25BE" : "\u25B8" })
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsxs("div", { style: { padding: "8px 12px", borderTop: `1px solid ${t.border}` }, children: [
+          /* @__PURE__ */ jsx(Label, { t, children: "What Neo asked for" }),
+          /* @__PURE__ */ jsx(JsonBlock, { value: invocation.arguments }),
+          resultRevealed && invocation.result && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Label, { t, style: { marginTop: 10 }, children: "What the tool returned" }),
+            /* @__PURE__ */ jsx(
+              "pre",
+              {
+                style: {
+                  margin: 0,
+                  padding: "8px 10px",
+                  background: t.bgElev,
+                  borderRadius: 4,
+                  fontSize: 11,
+                  fontFamily: t.fontMono,
+                  color: errored ? t.error : t.text,
+                  maxHeight: 280,
+                  overflow: "auto",
+                  whiteSpace: "pre-wrap"
+                },
+                children: invocation.result
+              }
+            )
+          ] }),
+          !resultRevealed && /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Label, { t, style: { marginTop: 10 }, children: "What changed in Neo's state" }),
+            /* @__PURE__ */ jsx(JsonBlock, { value: invocation.decisionUpdate })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function toolVerb(inv) {
+  if (inv.name === "list_skills") return "Asked for";
+  if (inv.name === "read_skill") return "Activated";
+  if (inv.name === "ask_human" || inv.name === "ask_user") return "Asked user for";
+  return "Called tool";
+}
+function Label({
+  t,
+  children,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        fontSize: 10,
+        color: t.textSubtle,
+        textTransform: "uppercase",
+        letterSpacing: "0.08em",
+        fontWeight: 600,
+        marginBottom: 4,
+        ...style
+      },
+      children
+    }
+  );
+}
+function JsonBlock({ value }) {
+  const t = useLensTheme();
+  return /* @__PURE__ */ jsx(
+    "pre",
+    {
+      style: {
+        margin: 0,
+        padding: "8px 10px",
+        background: t.bgElev,
+        borderRadius: 4,
+        fontSize: 11,
+        fontFamily: t.fontMono,
+        color: t.text,
+        maxHeight: 200,
+        overflow: "auto"
+      },
+      children: JSON.stringify(value, null, 2)
+    }
+  );
+}
+function shortArgs(args) {
+  const keys = Object.keys(args);
+  if (keys.length === 0) return "";
+  if (keys.length === 1) {
+    const v = args[keys[0]];
+    if (typeof v === "string" && v.length < 40) return `${keys[0]}: "${v}"`;
+  }
+  return keys.join(", ");
+}
+function useIterationStageRanges(stages) {
+  return React.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/react/panels/SkillsPanel.tsx
+import { useState as useState2 } from "react";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function SkillsPanel({ skills, onClose, activeSkillId }) {
+  const t = useLensTheme();
+  const [selectedId, setSelectedId] = useState2(
+    activeSkillId ?? skills[0]?.id ?? null
+  );
+  const [mode, setMode] = useState2("formatted");
+  const selected = skills.find((s) => s.id === selectedId) ?? null;
+  return /* @__PURE__ */ jsx2(
+    "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__ */ jsxs2(
+        "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__ */ jsxs2(
+              "div",
+              {
+                style: {
+                  gridArea: "header",
+                  padding: "10px 14px",
+                  borderBottom: `1px solid ${t.border}`,
+                  background: t.bgElev,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 10
+                },
+                children: [
+                  /* @__PURE__ */ jsx2("strong", { style: { color: t.text, fontSize: 13 }, children: "Skills registered with Neo" }),
+                  /* @__PURE__ */ jsxs2("span", { style: { color: t.textMuted, fontSize: 12 }, children: [
+                    skills.length,
+                    " total"
+                  ] }),
+                  /* @__PURE__ */ jsx2("span", { style: { flex: 1 } }),
+                  /* @__PURE__ */ jsx2(
+                    "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__ */ jsxs2(
+              "div",
+              {
+                style: {
+                  gridArea: "list",
+                  borderRight: `1px solid ${t.border}`,
+                  overflow: "auto",
+                  background: t.bg
+                },
+                children: [
+                  skills.length === 0 && /* @__PURE__ */ jsx2("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__ */ jsxs2(
+                      "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__ */ jsxs2(
+                            "div",
+                            {
+                              style: {
+                                display: "flex",
+                                alignItems: "baseline",
+                                gap: 6,
+                                fontSize: 13
+                              },
+                              children: [
+                                /* @__PURE__ */ jsx2("span", { style: { fontWeight: 600 }, children: s.title ?? s.id }),
+                                isAgentActive && /* @__PURE__ */ jsx2(
+                                  "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__ */ jsxs2(
+                            "div",
+                            {
+                              style: {
+                                fontSize: 10,
+                                color: t.textSubtle,
+                                fontFamily: t.fontMono,
+                                marginTop: 1
+                              },
+                              children: [
+                                s.id,
+                                s.version && ` \xB7 v${s.version}`
+                              ]
+                            }
+                          ),
+                          s.description && /* @__PURE__ */ jsx2(
+                            "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__ */ jsx2(
+              "div",
+              {
+                style: {
+                  gridArea: "detail",
+                  overflow: "auto",
+                  padding: "14px 18px",
+                  fontSize: 13,
+                  lineHeight: 1.6
+                },
+                children: !selected ? /* @__PURE__ */ jsx2("div", { style: { color: t.textSubtle }, children: "Select a skill to see details." }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+                  /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 10 }, children: [
+                    /* @__PURE__ */ jsx2("h2", { style: { margin: 0, fontSize: 18, color: t.text }, children: selected.title ?? selected.id }),
+                    /* @__PURE__ */ jsxs2("span", { style: { color: t.textSubtle, fontFamily: t.fontMono, fontSize: 11 }, children: [
+                      selected.id,
+                      selected.version && ` \xB7 v${selected.version}`
+                    ] }),
+                    /* @__PURE__ */ jsx2("span", { style: { flex: 1 } }),
+                    /* @__PURE__ */ jsxs2(
+                      "div",
+                      {
+                        role: "tablist",
+                        style: {
+                          display: "flex",
+                          gap: 1,
+                          border: `1px solid ${t.border}`,
+                          borderRadius: 4,
+                          overflow: "hidden"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx2(
+                            "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__ */ jsx2(
+                            "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__ */ jsx2(SkillFormatted, { skill: selected }) : /* @__PURE__ */ jsx2(SkillJson, { skill: selected })
+                ] })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function SkillFormatted({ skill }) {
+  const t = useLensTheme();
+  return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+    skill.description && /* @__PURE__ */ jsxs2("section", { children: [
+      /* @__PURE__ */ jsx2(Label2, { t, children: "Description" }),
+      /* @__PURE__ */ jsx2("div", { style: { color: t.text }, children: skill.description })
+    ] }),
+    skill.scope && skill.scope.length > 0 && /* @__PURE__ */ jsxs2("section", { children: [
+      /* @__PURE__ */ jsx2(Label2, { t, children: "Scope" }),
+      /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: skill.scope.map((s) => /* @__PURE__ */ jsx2(
+        "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__ */ jsxs2("section", { children: [
+      /* @__PURE__ */ jsxs2(Label2, { t, children: [
+        "Tools this skill exposes \xB7 ",
+        skill.tools.length
+      ] }),
+      /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: skill.tools.map((id) => /* @__PURE__ */ jsx2(
+        "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__ */ jsx2("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__ */ jsxs2("section", { children: [
+      /* @__PURE__ */ jsx2(Label2, { t, children: "Body (sent to LLM on read_skill)" }),
+      /* @__PURE__ */ jsx2(
+        "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__ */ jsx2(
+    "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__ */ jsx2(
+    "div",
+    {
+      style: {
+        fontSize: 10,
+        color: t.textSubtle,
+        textTransform: "uppercase",
+        letterSpacing: "0.08em",
+        fontWeight: 600,
+        marginBottom: 4
+      },
+      children
+    }
+  );
+}
+
+// src/react/panels/StageFlow.tsx
+import { useMemo } from "react";
+import {
+  ReactFlow,
+  Background,
+  BackgroundVariant,
+  Handle,
+  Position,
+  BaseEdge,
+  getSmoothStepPath
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "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 = useMemo(() => stages.slice(0, focus + 1), [stages, focus]);
+  const activeStage = visible[visible.length - 1];
+  const touched = 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 = useMemo(() => {
+    const s = /* @__PURE__ */ new Set();
+    if (activeStage) {
+      s.add(activeStage.to);
+      if (activeStage.alsoLights) s.add(activeStage.alsoLights);
+    }
+    return s;
+  }, [activeStage]);
+  const edges = 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 = 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 = useMemo(() => ({ lens: LensNode }), []);
+  const edgeTypes = useMemo(() => ({ labelled: LensEdge(onEdgeClick) }), [onEdgeClick]);
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      "data-fp-lens": "stage-flow",
+      style: {
+        height,
+        background: t.bg,
+        borderBottom: `1px solid ${t.border}`
+      },
+      children: [
+        /* @__PURE__ */ jsx3(EdgeMarkerDefs, {}),
+        /* @__PURE__ */ jsx3(
+          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__ */ jsx3(
+              Background,
+              {
+                variant: 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__ */ jsx3(
+    "svg",
+    {
+      "aria-hidden": "true",
+      style: { position: "absolute", width: 0, height: 0, pointerEvents: "none" },
+      children: /* @__PURE__ */ jsx3("defs", { children: [
+        { id: "lens-arrow-active", fill: active },
+        { id: "lens-arrow-loop", fill: loop },
+        { id: "lens-arrow-dim", fill: dim }
+      ].map((m) => /* @__PURE__ */ jsx3(
+        "marker",
+        {
+          id: m.id,
+          viewBox: "0 0 10 10",
+          refX: "9",
+          refY: "5",
+          markerWidth: "6",
+          markerHeight: "6",
+          orient: "auto-start-reverse",
+          children: /* @__PURE__ */ jsx3("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__ */ jsxs3("div", { style: { position: "relative", display: "inline-block" }, children: [
+    isActive && /* @__PURE__ */ jsx3(
+      "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__ */ jsxs3(
+      "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__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 6 }, children: [
+            /* @__PURE__ */ jsx3(NodeIcon, { id: d.id, color: textColor }),
+            /* @__PURE__ */ jsx3("span", { style: { fontSize: 13, fontWeight: 600 }, children: label })
+          ] }),
+          /* @__PURE__ */ jsx3(
+            "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__ */ jsxs3(
+            "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__ */ jsxs3(Fragment3, { children: [
+            d.activeSkillId && /* @__PURE__ */ jsxs3(
+              "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__ */ jsx3(
+              AgentPorts,
+              {
+                active: d.active,
+                mutations: d.activeMutations,
+                filledCard: isActive
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx3(Handle, { type: "source", position: Position.Top, id: "t-out", style: handleStyle(-14, 0) }),
+          /* @__PURE__ */ jsx3(Handle, { type: "target", position: Position.Top, id: "t-in", style: handleStyle(14, 0) }),
+          /* @__PURE__ */ jsx3(Handle, { type: "source", position: Position.Bottom, id: "b-out", style: handleStyle(14, 0) }),
+          /* @__PURE__ */ jsx3(Handle, { type: "target", position: Position.Bottom, id: "b-in", style: handleStyle(-14, 0) }),
+          /* @__PURE__ */ jsx3(Handle, { type: "source", position: Position.Left, id: "l-out", style: handleStyle(0, 10) }),
+          /* @__PURE__ */ jsx3(Handle, { type: "target", position: Position.Left, id: "l-in", style: handleStyle(0, -10) }),
+          /* @__PURE__ */ jsx3(Handle, { type: "source", position: Position.Right, id: "r-out", style: handleStyle(0, -10) }),
+          /* @__PURE__ */ jsx3(Handle, { type: "target", position: 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__ */ jsxs3("svg", { ...props, children: [
+      /* @__PURE__ */ jsx3("circle", { cx: "8", cy: "5", r: "2.5", stroke: color, strokeWidth: "1.5" }),
+      /* @__PURE__ */ jsx3("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__ */ jsxs3("svg", { ...props, children: [
+      /* @__PURE__ */ jsx3("circle", { cx: "8", cy: "8", r: "6", stroke: color, strokeWidth: "1.5" }),
+      /* @__PURE__ */ jsx3("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__ */ jsx3("circle", { cx: "8", cy: "9.5", r: "1", fill: color }),
+      /* @__PURE__ */ jsx3("line", { x1: "8", y1: "2", x2: "8", y2: "3.5", stroke: color, strokeWidth: "1", strokeLinecap: "round" }),
+      /* @__PURE__ */ jsx3("line", { x1: "12.5", y1: "4", x2: "11.2", y2: "5", stroke: color, strokeWidth: "1", strokeLinecap: "round" }),
+      /* @__PURE__ */ jsx3("line", { x1: "3.5", y1: "4", x2: "4.8", y2: "5", stroke: color, strokeWidth: "1", strokeLinecap: "round" })
+    ] });
+  }
+  if (id === "tool") {
+    return /* @__PURE__ */ jsxs3("svg", { ...props, children: [
+      /* @__PURE__ */ jsx3("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__ */ jsx3(
+          "line",
+          {
+            x1,
+            y1,
+            x2,
+            y2,
+            stroke: color,
+            strokeWidth: "1.5",
+            strokeLinecap: "round"
+          },
+          angle
+        );
+      })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs3("svg", { ...props, children: [
+    /* @__PURE__ */ jsx3("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__ */ jsx3("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__ */ jsx3(
+    "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__ */ jsxs3(
+        "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__ */ jsx3("span", { style: { fontSize: 8 }, children: "\u25B8" }),
+            /* @__PURE__ */ jsx3("span", { style: { flex: 1 }, children: p.label }),
+            p.badge && /* @__PURE__ */ jsx3(
+              "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] = 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__ */ jsxs3(Fragment3, { children: [
+      /* @__PURE__ */ jsx3(
+        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__ */ jsx3(
+        "path",
+        {
+          d: edgePath,
+          fill: "none",
+          stroke: "transparent",
+          strokeWidth: 12,
+          style: { cursor: "pointer" },
+          onClick: () => onEdgeClick(d.stage)
+        }
+      )
+    ] });
+  };
+}
+
+// src/react/panels/TimeTravel.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "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__ */ jsxs4(
+    "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__ */ jsx4(
+          "button",
+          {
+            onClick: () => step(-1),
+            disabled: focusIndex <= 0 || stages.length === 0,
+            style: btnStyle(t, false),
+            title: "Previous step (\u2190)",
+            children: "\u25C0"
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            onClick: () => step(1),
+            disabled: focusIndex >= max || stages.length === 0,
+            style: btnStyle(t, false),
+            title: "Next step (\u2192)",
+            children: "\u25B6"
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "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__ */ jsx4(
+          "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__ */ jsx4(
+          "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/react/panels/AskCard.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "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__ */ jsxs5(
+    "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__ */ jsxs5("section", { children: [
+          /* @__PURE__ */ jsx5(Label3, { t, children: "Your question" }),
+          /* @__PURE__ */ jsx5(
+            "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__ */ jsxs5("section", { children: [
+          /* @__PURE__ */ jsxs5(Label3, { t, children: [
+            "Step ",
+            focusIndex + 1,
+            " / ",
+            stages.length
+          ] }),
+          !(currentTool && currentStage.from === "tool") && /* @__PURE__ */ jsx5("div", { style: { marginTop: 4, fontSize: 13, color: t.text, lineHeight: 1.5 }, children: currentStage.label }),
+          /* @__PURE__ */ jsxs5(
+            "div",
+            {
+              style: {
+                marginTop: 8,
+                display: "flex",
+                gap: 6,
+                flexWrap: "wrap",
+                fontSize: 10,
+                color: t.textSubtle
+              },
+              children: [
+                /* @__PURE__ */ jsx5(Pill, { t, children: primitivePill(currentStage) }),
+                /* @__PURE__ */ jsxs5(Pill, { t, children: [
+                  friendlyNode(currentStage.from),
+                  " \u2192 ",
+                  friendlyNode(currentStage.to)
+                ] }),
+                currentStage.toolName && /* @__PURE__ */ jsx5(Pill, { t, children: currentStage.toolName })
+              ]
+            }
+          )
+        ] }),
+        currentStage?.from === "agent" && currentIter?.assistantContent && /* @__PURE__ */ jsxs5("section", { children: [
+          /* @__PURE__ */ jsx5(Label3, { t, children: "Agent reasoning" }),
+          /* @__PURE__ */ jsx5(
+            "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__ */ jsxs5("section", { children: [
+          /* @__PURE__ */ jsx5(Label3, { t, children: currentStage?.to === "tool" ? "Arguments" : "Tool returned" }),
+          /* @__PURE__ */ jsx5(
+            "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__ */ jsxs5("section", { children: [
+          /* @__PURE__ */ jsx5(Label3, { t, children: "Conversation" }),
+          /* @__PURE__ */ jsxs5("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__ */ jsx5(
+    "div",
+    {
+      style: {
+        fontSize: 10,
+        color: t.textSubtle,
+        textTransform: "uppercase",
+        letterSpacing: "0.08em",
+        fontWeight: 600
+      },
+      children
+    }
+  );
+}
+function Pill({
+  t,
+  children,
+  warn
+}) {
+  return /* @__PURE__ */ jsx5(
+    "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/react/panels/RunSummary.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function RunSummary({ timeline }) {
+  const t = useLensTheme();
+  const [open, setOpen] = useState3(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__ */ jsxs6(
+    "div",
+    {
+      "data-fp-lens": "run-summary",
+      style: {
+        borderTop: `1px solid ${t.border}`,
+        background: t.bgElev,
+        fontFamily: t.fontSans
+      },
+      children: [
+        /* @__PURE__ */ jsxs6(
+          "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__ */ jsx6("span", { style: { fontSize: 10 }, children: open ? "\u25BE" : "\u25B8" }),
+              /* @__PURE__ */ jsx6(
+                "span",
+                {
+                  style: {
+                    fontSize: 10,
+                    color: t.textSubtle,
+                    textTransform: "uppercase",
+                    letterSpacing: "0.08em",
+                    fontWeight: 600
+                  },
+                  children: "Run summary"
+                }
+              ),
+              /* @__PURE__ */ jsx6("span", { style: { flex: 1 } }),
+              /* @__PURE__ */ jsxs6("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__ */ jsxs6(
+          "div",
+          {
+            style: {
+              padding: "6px 14px 14px",
+              display: "grid",
+              gridTemplateColumns: "1fr 1fr",
+              gap: 14,
+              fontSize: 12,
+              color: t.text
+            },
+            children: [
+              /* @__PURE__ */ jsxs6("section", { children: [
+                /* @__PURE__ */ jsxs6(Label4, { t, children: [
+                  "Tools used \xB7 ",
+                  timeline.tools.length
+                ] }),
+                toolList.length === 0 ? /* @__PURE__ */ jsx6("div", { style: { color: t.textSubtle, fontSize: 11, fontStyle: "italic" }, children: "None." }) : /* @__PURE__ */ jsx6("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: toolList.map(([name, stats]) => /* @__PURE__ */ jsxs6(
+                  "li",
+                  {
+                    style: {
+                      display: "flex",
+                      gap: 8,
+                      padding: "3px 0",
+                      fontFamily: t.fontMono,
+                      fontSize: 11
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx6("span", { style: { color: t.accent, flex: 1 }, children: name }),
+                      /* @__PURE__ */ jsxs6("span", { style: { color: t.textMuted }, children: [
+                        "\xD7",
+                        stats.count
+                      ] }),
+                      /* @__PURE__ */ jsx6("span", { style: { color: t.textSubtle, minWidth: 60, textAlign: "right" }, children: stats.totalMs > 0 ? `${Math.round(stats.totalMs)}ms` : "\u2014" })
+                    ]
+                  },
+                  name
+                )) })
+              ] }),
+              /* @__PURE__ */ jsxs6("section", { children: [
+                /* @__PURE__ */ jsxs6(Label4, { t, children: [
+                  "Skills activated \xB7 ",
+                  activatedSkills.size
+                ] }),
+                activatedSkills.size === 0 ? /* @__PURE__ */ jsx6("div", { style: { color: t.textSubtle, fontSize: 11, fontStyle: "italic" }, children: "None." }) : /* @__PURE__ */ jsx6("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: [...activatedSkills].map((id) => /* @__PURE__ */ jsx6(
+                  "li",
+                  {
+                    style: {
+                      padding: "3px 0",
+                      fontFamily: t.fontMono,
+                      fontSize: 11,
+                      color: t.text
+                    },
+                    children: id
+                  },
+                  id
+                )) }),
+                /* @__PURE__ */ jsxs6("div", { style: { marginTop: 10 }, children: [
+                  /* @__PURE__ */ jsx6(Label4, { t, children: "Totals" }),
+                  /* @__PURE__ */ jsxs6(
+                    "div",
+                    {
+                      style: {
+                        display: "grid",
+                        gridTemplateColumns: "auto 1fr",
+                        gap: "3px 10px",
+                        marginTop: 4,
+                        fontSize: 11,
+                        color: t.textMuted
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx6("span", { children: "Tokens" }),
+                        /* @__PURE__ */ jsxs6("span", { style: { color: t.text, fontFamily: t.fontMono }, children: [
+                          totalIn.toLocaleString(),
+                          " \u2192 ",
+                          totalOut.toLocaleString()
+                        ] }),
+                        /* @__PURE__ */ jsx6("span", { children: "Wall time" }),
+                        /* @__PURE__ */ jsxs6("span", { style: { color: t.text, fontFamily: t.fontMono }, children: [
+                          (totalMs / 1e3).toFixed(2),
+                          "s"
+                        ] }),
+                        /* @__PURE__ */ jsx6("span", { children: "LLM calls" }),
+                        /* @__PURE__ */ jsx6("span", { style: { color: t.text, fontFamily: t.fontMono }, children: totalIters }),
+                        /* @__PURE__ */ jsx6("span", { children: "Turns" }),
+                        /* @__PURE__ */ jsx6("span", { style: { color: t.text, fontFamily: t.fontMono }, children: completedTurns.length })
+                      ]
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function Label4({
+  t,
+  children
+}) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      style: {
+        fontSize: 10,
+        color: t.textSubtle,
+        textTransform: "uppercase",
+        letterSpacing: "0.08em",
+        fontWeight: 600,
+        marginBottom: 4
+      },
+      children
+    }
+  );
+}
+
+// src/react/AgentLens.tsx
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function AgentLens({
+  runtimeSnapshot,
+  timeline: providedTimeline,
+  systemPrompt,
+  onToolCallClick,
+  skills,
+  activeSkillId
+}) {
+  const t = useLensTheme();
+  const timeline = useMemo2(() => {
+    if (providedTimeline) return providedTimeline;
+    if (!runtimeSnapshot) return null;
+    return fromAgentSnapshot(runtimeSnapshot);
+  }, [providedTimeline, runtimeSnapshot]);
+  const [selectedIterKey, setSelectedIterKey] = useState4(null);
+  const [skillsOpen, setSkillsOpen] = useState4(false);
+  const derivedActiveSkill = activeSkillId ?? (typeof timeline?.finalDecision?.currentSkill === "string" ? timeline.finalDecision.currentSkill : null);
+  useEffect2(() => {
+    if (!skillsOpen) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setSkillsOpen(false);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [skillsOpen]);
+  const handleToolClick = useCallback(
+    (inv) => {
+      setSelectedIterKey(`${inv.turnIndex}.${inv.iterationIndex}`);
+      onToolCallClick?.(inv);
+    },
+    [onToolCallClick]
+  );
+  if (!timeline) {
+    return /* @__PURE__ */ jsxs7(
+      "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__ */ jsx7("code", { children: "runtimeSnapshot" }),
+          " after the agent runs."
+        ]
+      }
+    );
+  }
+  const derivedSystemPrompt = systemPrompt ?? (typeof timeline.rawSnapshot?.sharedState?.systemPrompt === "string" ? timeline.rawSnapshot.sharedState.systemPrompt : void 0);
+  const stages = useMemo2(() => timeline ? deriveStages(timeline) : [], [timeline]);
+  const [focusIndex, setFocusIndex] = useState4(-1);
+  const liveIndex = stages.length - 1;
+  const resolvedFocus = focusIndex === -1 ? liveIndex : Math.min(focusIndex, liveIndex);
+  const isLive = focusIndex === -1;
+  const liveIndexRef = useRef2(liveIndex);
+  liveIndexRef.current = liveIndex;
+  const handleFocusChange = useCallback((i) => {
+    setFocusIndex(i >= liveIndexRef.current ? -1 : i);
+  }, []);
+  useEffect2(() => {
+    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 = useCallback(
+    (stage) => {
+      if (stage.iterIndex === void 0) return;
+      setSelectedIterKey(`${stage.turnIndex}.${stage.iterIndex}`);
+      handleFocusChange(stage.index);
+    },
+    [handleFocusChange]
+  );
+  return /* @__PURE__ */ jsxs7(
+    "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__ */ jsx7("style", { children: `
+        [data-iter-selected="true"] {
+          outline-color: currentColor !important;
+          background: color-mix(in srgb, currentColor 8%, transparent);
+        }
+      ` }),
+        stages.length > 0 && /* @__PURE__ */ jsxs7(Fragment4, { children: [
+          /* @__PURE__ */ jsxs7(
+            "div",
+            {
+              style: {
+                gridArea: "tt",
+                display: "flex",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsx7("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx7(
+                  TimeTravel,
+                  {
+                    stages,
+                    focusIndex: resolvedFocus,
+                    onFocusChange: handleFocusChange,
+                    isLive
+                  }
+                ) }),
+                skills && skills.length > 0 && /* @__PURE__ */ jsxs7(
+                  "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__ */ jsx7("span", { "aria-hidden": "true", children: "\u{1F4DA}" }),
+                      /* @__PURE__ */ jsxs7("span", { children: [
+                        "Skills \xB7 ",
+                        skills.length
+                      ] }),
+                      derivedActiveSkill && /* @__PURE__ */ jsx7(
+                        "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__ */ jsx7(
+            "div",
+            {
+              style: {
+                gridArea: "graph",
+                minHeight: 0,
+                overflow: "hidden",
+                borderRight: `1px solid ${t.border}`
+              },
+              children: /* @__PURE__ */ jsx7(
+                StageFlow,
+                {
+                  stages,
+                  focusIndex: resolvedFocus,
+                  onEdgeClick: handleEdgeClick,
+                  activeSkillId: derivedActiveSkill
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx7(
+            "div",
+            {
+              style: {
+                gridArea: "ask",
+                minHeight: 0,
+                overflow: "hidden",
+                background: t.bg
+              },
+              children: /* @__PURE__ */ jsx7(
+                AskCard,
+                {
+                  timeline,
+                  stages,
+                  focusIndex: resolvedFocus
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx7(
+          "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__ */ jsx7(
+              MessagesPanel,
+              {
+                timeline,
+                onToolCallClick: handleToolClick,
+                selectedIterKey,
+                stages,
+                focusIndex: resolvedFocus,
+                onFocusChange: handleFocusChange,
+                isLive,
+                ...derivedSystemPrompt && { systemPrompt: derivedSystemPrompt }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx7("div", { style: { gridArea: "summary" }, children: /* @__PURE__ */ jsx7(RunSummary, { timeline }) }),
+        skillsOpen && skills && /* @__PURE__ */ jsx7(
+          SkillsPanel,
+          {
+            skills,
+            activeSkillId: derivedActiveSkill,
+            onClose: () => setSkillsOpen(false)
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/react/components/Tabs/Tabs.tsx
+import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef3, useState as useState5 } from "react";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function Tabs({
+  tabs,
+  selectedTabId,
+  defaultTabId,
+  onChange,
+  renderAll = false,
+  leadingSlot,
+  trailingSlot,
+  className
+}) {
+  const initialId = defaultTabId ?? tabs[0]?.id;
+  const [internalId, setInternalId] = useState5(initialId);
+  const isControlled = selectedTabId !== void 0;
+  const selectedId = isControlled ? selectedTabId : internalId;
+  const pickTab = useCallback2(
+    (id) => {
+      const def = tabs.find((t) => t.id === id);
+      if (!def || def.disabled) return;
+      if (!isControlled) setInternalId(id);
+      onChange?.(id);
+    },
+    [tabs, isControlled, onChange]
+  );
+  const handleKey = useCallback2(
+    (e) => {
+      if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key)) return;
+      e.preventDefault();
+      const enabled = tabs.filter((t) => !t.disabled);
+      if (enabled.length === 0) return;
+      const currentIdx = enabled.findIndex((t) => t.id === selectedId);
+      let nextIdx = currentIdx;
+      if (e.key === "ArrowLeft") {
+        nextIdx = (currentIdx - 1 + enabled.length) % enabled.length;
+      } else if (e.key === "ArrowRight") {
+        nextIdx = (currentIdx + 1) % enabled.length;
+      } else if (e.key === "Home") {
+        nextIdx = 0;
+      } else if (e.key === "End") {
+        nextIdx = enabled.length - 1;
+      }
+      pickTab(enabled[nextIdx].id);
+    },
+    [tabs, selectedId, pickTab]
+  );
+  const selectedDef = tabs.find((t) => t.id === selectedId);
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      "data-fp-lens": "tabs-root",
+      className,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        minHeight: 0
+      },
+      children: [
+        /* @__PURE__ */ jsx8(
+          TabStrip,
+          {
+            tabs,
+            selectedId,
+            onPick: pickTab,
+            onKeyDown: handleKey,
+            leadingSlot,
+            trailingSlot
+          }
+        ),
+        /* @__PURE__ */ jsx8(TabContent, { tabs, selectedId, renderAll }),
+        !selectedDef && renderAll === false && /* @__PURE__ */ jsx8(
+          "div",
+          {
+            "data-fp-lens": "tabs-empty",
+            style: { flex: 1, minHeight: 0 },
+            "aria-live": "polite"
+          }
+        )
+      ]
+    }
+  );
+}
+function TabStrip({
+  tabs,
+  selectedId,
+  onPick,
+  onKeyDown,
+  leadingSlot,
+  trailingSlot
+}) {
+  const t = useLensTheme();
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      role: "tablist",
+      onKeyDown,
+      "data-fp-lens": "tabs-strip",
+      style: {
+        display: "flex",
+        padding: "8px 14px 0",
+        // Strip is rendered a shade DARKER than the content/active-tab
+        // surface. Combined with the active-tab's inherits-from-content
+        // background below, this yields the Claude Design Studio
+        // "tab-into-body" merge: active tab disappears into the panel,
+        // inactive tabs float on a darker outer band. The 14% mix is
+        // subtle on light themes (white → near-white), pronounced
+        // enough on dark themes (slate → near-black) to differentiate.
+        background: `color-mix(in srgb, ${t.bg} 86%, black 14%)`,
+        flexShrink: 0,
+        alignItems: "flex-end",
+        position: "relative",
+        zIndex: 1,
+        fontFamily: t.fontSans
+      },
+      children: [
+        leadingSlot && /* @__PURE__ */ jsx8(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              marginRight: 12,
+              paddingBottom: 10
+            },
+            "data-fp-lens": "tabs-leading",
+            children: leadingSlot
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: 2,
+              alignItems: "flex-end",
+              flex: 1,
+              minWidth: 0
+            },
+            children: tabs.map((def) => /* @__PURE__ */ jsx8(
+              TabButton,
+              {
+                def,
+                selected: def.id === selectedId,
+                onPick
+              },
+              def.id
+            ))
+          }
+        ),
+        trailingSlot && /* @__PURE__ */ jsx8("div", { style: { display: "flex", alignItems: "center" }, children: trailingSlot })
+      ]
+    }
+  );
+}
+function TabButton({
+  def,
+  selected,
+  onPick
+}) {
+  const t = useLensTheme();
+  const buttonRef = useRef3(null);
+  useEffect3(() => {
+    if (selected && document.activeElement?.getAttribute("role") === "tab") {
+      buttonRef.current?.focus();
+    }
+  }, [selected]);
+  return /* @__PURE__ */ jsxs8(
+    "button",
+    {
+      ref: buttonRef,
+      role: "tab",
+      "aria-selected": selected,
+      "aria-disabled": def.disabled,
+      tabIndex: selected ? 0 : -1,
+      disabled: def.disabled,
+      title: def.title,
+      onClick: () => onPick(def.id),
+      "data-fp-lens-tab": def.id,
+      "data-fp-lens-selected": selected,
+      style: {
+        padding: "9px 16px 10px",
+        cursor: def.disabled ? "not-allowed" : "pointer",
+        fontSize: 13,
+        fontFamily: "inherit",
+        width: "auto",
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        color: selected ? t.text : t.textMuted,
+        // Active tab paints the SAME color as the content panel below
+        // (and the same color AgentLens's shell paints inside it), so
+        // tab + content merge into one continuous surface.
+        background: selected ? t.bg : "transparent",
+        border: `1px solid ${selected ? t.border : "transparent"}`,
+        borderBottom: "none",
+        borderRadius: "10px 10px 0 0",
+        marginBottom: -1,
+        fontWeight: selected ? 600 : 500,
+        opacity: def.disabled ? 0.45 : 1,
+        transition: "background 140ms ease, color 140ms ease, border-color 140ms ease"
+      },
+      children: [
+        /* @__PURE__ */ jsx8("span", { children: def.label }),
+        def.trailing
+      ]
+    }
+  );
+}
+function TabContent({
+  tabs,
+  selectedId,
+  renderAll
+}) {
+  const t = useLensTheme();
+  const bg = t.bg;
+  if (renderAll) {
+    return /* @__PURE__ */ jsx8(
+      "div",
+      {
+        style: {
+          flex: 1,
+          minHeight: 0,
+          position: "relative",
+          background: bg
+        },
+        "data-fp-lens": "tabs-content",
+        children: tabs.map((def) => /* @__PURE__ */ jsx8(
+          "div",
+          {
+            role: "tabpanel",
+            "aria-hidden": def.id !== selectedId,
+            style: {
+              position: "absolute",
+              inset: 0,
+              visibility: def.id === selectedId ? "visible" : "hidden",
+              pointerEvents: def.id === selectedId ? "auto" : "none",
+              display: "flex",
+              flexDirection: "column",
+              minHeight: 0
+            },
+            children: def.content
+          },
+          def.id
+        ))
+      }
+    );
+  }
+  const selectedDef = tabs.find((t2) => t2.id === selectedId);
+  if (!selectedDef) return null;
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      role: "tabpanel",
+      "data-fp-lens": "tabs-content",
+      style: {
+        flex: 1,
+        minHeight: 0,
+        display: "flex",
+        flexDirection: "column",
+        background: bg
+      },
+      children: selectedDef.content
+    }
+  );
+}
+
+// src/react/Lens.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function Lens({
+  runtimeSnapshot,
+  timeline,
+  appName,
+  systemPrompt,
+  skills,
+  activeSkillId,
+  onToolCallClick,
+  defaultTabId = "lens",
+  trailingSlot,
+  renderAll = false,
+  traceView,
+  theme
+}) {
+  const t = useLensTheme();
+  const [selectedId, setSelectedId] = useState6(defaultTabId);
+  const agentLensProps = {
+    runtimeSnapshot,
+    ...timeline !== void 0 ? { timeline } : {},
+    ...systemPrompt !== void 0 ? { systemPrompt } : {},
+    ...skills !== void 0 ? { skills } : {},
+    ...activeSkillId !== void 0 ? { activeSkillId } : {},
+    ...onToolCallClick !== void 0 ? { onToolCallClick } : {}
+  };
+  const brand = appName ? /* @__PURE__ */ jsx9(
+    "span",
+    {
+      "data-fp-lens": "brand",
+      style: {
+        fontSize: 13,
+        fontWeight: 600,
+        color: t.text,
+        fontFamily: t.fontSans,
+        letterSpacing: "0.01em",
+        whiteSpace: "nowrap"
+      },
+      title: `Lens \xB7 ${appName}`,
+      children: appName
+    }
+  ) : null;
+  const shell = /* @__PURE__ */ jsx9(
+    Tabs,
+    {
+      tabs: [
+        {
+          id: "lens",
+          label: "Lens",
+          content: /* @__PURE__ */ jsx9(AgentLens, { ...agentLensProps })
+        },
+        {
+          id: "trace",
+          label: "Explainable Trace",
+          // Consumer-supplied override wins; otherwise render a
+          // default `<ExplainableShell>` from the same runtime
+          // snapshot so consumers get something useful out of the
+          // box without wiring anything.
+          content: traceView ?? /* @__PURE__ */ jsx9(ExplainableShell, { runtimeSnapshot: runtimeSnapshot ?? null })
+        }
+      ],
+      selectedTabId: selectedId,
+      onChange: setSelectedId,
+      renderAll,
+      ...brand !== null ? { leadingSlot: brand } : {},
+      ...trailingSlot !== void 0 ? { trailingSlot } : {}
+    }
+  );
+  return theme ? /* @__PURE__ */ jsx9(FootprintTheme, { tokens: theme, children: shell }) : shell;
+}
+
+// src/react/panels/IterationStrip.tsx
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function IterationStrip({ timeline, selectedKey, onSelect }) {
+  const t = useLensTheme();
+  const chips = timeline.turns.flatMap(
+    (turn) => turn.iterations.map((iter, stepIdx) => ({
+      key: `${turn.index}.${iter.index}`,
+      turn: turn.index + 1,
+      step: stepIdx + 1,
+      label: stepHeadline(iter),
+      durationMs: iter.durationMs ?? 0,
+      stopReason: iter.stopReason,
+      toolCount: iter.toolCalls.length
+    }))
+  );
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      "data-fp-lens": "iteration-strip",
+      style: {
+        display: "flex",
+        gap: 4,
+        padding: "8px 12px",
+        overflowX: "auto",
+        borderBottom: `1px solid ${t.border}`,
+        background: t.bgElev
+      },
+      children: [
+        chips.length === 0 && /* @__PURE__ */ jsx10("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__ */ jsxs9(
+            "button",
+            {
+              onClick: () => onSelect?.(c.key),
+              style: {
+                background: active ? t.accent : "transparent",
+                color: active ? "#fff" : t.textMuted,
+                border: `1px solid ${active ? t.accent : t.border}`,
+                borderRadius: 4,
+                padding: "4px 10px",
+                fontSize: 11,
+                fontFamily: t.fontSans,
+                cursor: "pointer",
+                whiteSpace: "nowrap",
+                flexShrink: 0,
+                maxWidth: 280,
+                overflow: "hidden",
+                textOverflow: "ellipsis"
+              },
+              title: `Question ${c.turn} \xB7 Step ${c.step} \xB7 ${secs}${c.stopReason ? ` \xB7 stop: ${c.stopReason}` : ""}`,
+              children: [
+                /* @__PURE__ */ jsxs9("span", { style: { fontWeight: 600 }, children: [
+                  "Step ",
+                  c.step
+                ] }),
+                /* @__PURE__ */ jsxs9("span", { style: { opacity: 0.85 }, children: [
+                  " \xB7 ",
+                  c.label
+                ] }),
+                isFinal && /* @__PURE__ */ jsx10("span", { style: { marginLeft: 6 }, children: "\u2713" })
+              ]
+            },
+            c.key
+          );
+        })
+      ]
+    }
+  );
+}
+function stepHeadline(iter) {
+  if (iter.toolCalls.length === 0) return "Ready to answer";
+  if (iter.toolCalls.length === 1) {
+    const tc = iter.toolCalls[0];
+    if (tc.name === "list_skills") return "Looking up skills";
+    if (tc.name === "read_skill") {
+      const id = tc.arguments?.id;
+      return id ? `Activated ${id}` : "Activating skill";
+    }
+    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.length} tools (${iter.toolCalls.map((tc) => tc.name).join(", ")})`;
+  }
+  return `Called ${iter.toolCalls.length} tools in parallel`;
+}
+
+// src/react/panels/ToolCallInspector.tsx
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function ToolCallInspector({
+  timeline,
+  selectedId,
+  onSelect
+}) {
+  const t = useLensTheme();
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      "data-fp-lens": "tool-call-inspector",
+      style: {
+        background: t.bg,
+        color: t.text,
+        fontFamily: t.fontSans,
+        display: "flex",
+        flexDirection: "column",
+        minHeight: 0,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs10(
+          "div",
+          {
+            style: {
+              padding: "10px 14px",
+              borderBottom: `1px solid ${t.border}`,
+              fontSize: 11,
+              color: t.textSubtle,
+              textTransform: "uppercase",
+              letterSpacing: "0.08em",
+              fontWeight: 600,
+              background: t.bgElev
+            },
+            children: [
+              "Every tool Neo called \xB7 ",
+              timeline.tools.length
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs10("div", { style: { overflow: "auto", flex: 1 }, children: [
+          timeline.tools.length === 0 && /* @__PURE__ */ jsx11("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__ */ jsxs10(
+              "button",
+              {
+                onClick: () => onSelect?.(tc),
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  width: "100%",
+                  textAlign: "left",
+                  padding: "8px 12px",
+                  background: active ? t.bgHover : "transparent",
+                  border: "none",
+                  borderLeft: `3px solid ${active ? t.accent : errored ? t.error : "transparent"}`,
+                  borderBottom: `1px solid ${t.border}`,
+                  color: t.text,
+                  cursor: "pointer",
+                  fontFamily: "inherit"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs10(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        gap: 8,
+                        alignItems: "baseline",
+                        fontSize: 12,
+                        fontFamily: t.fontMono
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx11("span", { style: { color: errored ? t.error : t.accent, fontWeight: 600 }, children: tc.name }),
+                        /* @__PURE__ */ jsxs10(
+                          "span",
+                          {
+                            style: { color: t.textSubtle, fontSize: 10, marginLeft: "auto" },
+                            children: [
+                              "t",
+                              tc.turnIndex + 1,
+                              ".i",
+                              tc.iterationIndex,
+                              tc.durationMs !== void 0 && ` \xB7 ${Math.round(tc.durationMs)}ms`
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx11(
+                    "div",
+                    {
+                      style: {
+                        fontSize: 10,
+                        color: t.textMuted,
+                        marginTop: 2,
+                        fontFamily: t.fontMono,
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap"
+                      },
+                      children: shortArgs2(tc.arguments)
+                    }
+                  )
+                ]
+              },
+              tc.id
+            );
+          })
+        ] })
+      ]
+    }
+  );
+}
+function shortArgs2(args) {
+  const keys = Object.keys(args);
+  if (keys.length === 0) return "\u2014 no args \u2014";
+  return keys.map((k) => {
+    const v = args[k];
+    if (typeof v === "string") return `${k}: "${v.length > 20 ? v.slice(0, 20) + "\u2026" : v}"`;
+    if (typeof v === "number" || typeof v === "boolean") return `${k}: ${v}`;
+    return `${k}: \u2026`;
+  }).join(", ");
+}
+
+// src/react/hooks/useLiveTimeline.ts
+import { useCallback as useCallback3, useMemo as useMemo3, useRef as useRef4, useState as useState7 } from "react";
+function useLiveTimeline() {
+  const builderRef = useRef4(null);
+  if (!builderRef.current) builderRef.current = new LiveTimelineBuilder();
+  const builder = builderRef.current;
+  const [timeline, setTimeline] = useState7(() => builder.getTimeline());
+  const sync = useCallback3(() => {
+    setTimeline(builder.getTimeline());
+  }, [builder]);
+  const ingest = useCallback3(
+    (event) => {
+      builder.ingest(event);
+      sync();
+    },
+    [builder, sync]
+  );
+  const startTurn = useCallback3(
+    (userPrompt) => {
+      builder.startTurn(userPrompt);
+      sync();
+    },
+    [builder, sync]
+  );
+  const setSystemPrompt = useCallback3(
+    (prompt) => {
+      builder.setSystemPrompt(prompt);
+      sync();
+    },
+    [builder, sync]
+  );
+  const setFinalDecision = useCallback3(
+    (decision) => {
+      builder.setFinalDecision(decision);
+      sync();
+    },
+    [builder, sync]
+  );
+  const reset = useCallback3(() => {
+    builder.reset();
+    sync();
+  }, [builder, sync]);
+  return useMemo3(
+    () => ({ timeline, ingest, startTurn, setSystemPrompt, setFinalDecision, reset, builder }),
+    [timeline, ingest, startTurn, setSystemPrompt, setFinalDecision, reset, builder]
+  );
+}
+
+export {
+  useLensTheme,
+  resolve,
+  MessagesPanel,
+  SkillsPanel,
+  StageFlow,
+  TimeTravel,
+  AskCard,
+  RunSummary,
+  AgentLens,
+  Tabs,
+  Lens,
+  IterationStrip,
+  ToolCallInspector,
+  useLiveTimeline
+};
+//# sourceMappingURL=chunk-2JKRPWPZ.js.map