agentfootprint-lens 0.6.0 → 0.7.0

package/dist/chunk-AWPI6OVI.js

@@ -0,0 +1,4973 @@
+import {
+  LiveTimelineBuilder,
+  deriveStages,
+  fromAgentSnapshot
+} from "./chunk-3N4WQXQP.js";
+
+// src/react/Lens.tsx
+import { useEffect as useEffect5, useReducer, useState as useState7 } from "react";
+import { ExplainableShell, FootprintTheme } from "footprint-explainable-ui";
+
+// src/react/AgentLens.tsx
+import { useCallback, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3, 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 { useEffect as useEffect2, useMemo, useRef as useRef2 } from "react";
+import {
+  ReactFlow,
+  Background,
+  BackgroundVariant,
+  Handle,
+  Position,
+  useReactFlow,
+  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: 120 },
+  tool: { x: 100, y: 360 },
+  skill: { x: 320, y: 360 }
+};
+var CONTEXT_NODE_POSITION = { x: 325, y: 120 };
+var TOOLS_NODE_POSITION = { x: -150, y: 120 };
+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: "l-out", targetHandle: "l-in" };
+  if (from === "agent" && to === "skill") return { sourceHandle: "r-out", targetHandle: "l-in" };
+  if (from === "skill" && to === "agent") return { sourceHandle: "r-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,
+  timeline
+}) {
+  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 { activeInjectionsBySlot, activeLedger } = useMemo(() => {
+    const bySlot = /* @__PURE__ */ new Map();
+    if (!timeline || !activeStage) return { activeInjectionsBySlot: bySlot, activeLedger: {} };
+    const turn = timeline.turns[activeStage.turnIndex];
+    const iter = activeStage.iterIndex !== void 0 ? turn?.iterations.find((it) => it.index === activeStage.iterIndex) : void 0;
+    const injections = iter && iter.contextInjections.length > 0 ? iter.contextInjections : turn?.contextInjections ?? [];
+    for (const ci of injections) {
+      const bucket = bySlot.get(ci.slot) ?? [];
+      bucket.push(ci);
+      bySlot.set(ci.slot, bucket);
+    }
+    const ledger = iter && iter.contextInjections.length > 0 ? iter.contextLedger : turn?.contextLedger ?? {};
+    return { activeInjectionsBySlot: bySlot, activeLedger: ledger };
+  }, [timeline, activeStage]);
+  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",
+        // Marching-ants only when this loop edge is the active stage.
+        animated: isLoop && isActive,
+        data: {
+          primitive: lastStage.primitive,
+          active: isActive,
+          isLoop,
+          stage: lastStage
+        }
+      };
+    });
+  }, [visible, activeStage]);
+  const toolsRoster = useMemo(() => {
+    if (!timeline || !activeStage || activeStage.iterIndex === void 0) return null;
+    const turn = timeline.turns[activeStage.turnIndex];
+    if (!turn) return null;
+    const iterIdx = turn.iterations.findIndex((it) => it.index === activeStage.iterIndex);
+    if (iterIdx < 0) return null;
+    const iter = turn.iterations[iterIdx];
+    const names = iter.visibleTools;
+    if (!names || names.length === 0) return null;
+    const prevIter = iterIdx > 0 ? turn.iterations[iterIdx - 1] : void 0;
+    const prevCount = prevIter?.visibleTools?.length ?? 0;
+    const delta = names.length - prevCount;
+    const skillInjection = iter.contextInjections.find((ci) => ci.source === "skill");
+    return {
+      names,
+      delta,
+      ...delta > 0 && skillInjection ? { deltaSource: "skill" } : {}
+    };
+  }, [timeline, activeStage]);
+  const contextSummary = useMemo(() => {
+    const bySource = /* @__PURE__ */ new Map();
+    for (const list of activeInjectionsBySlot.values()) {
+      for (const ci of list) {
+        const entry = bySource.get(ci.source) ?? {
+          source: ci.source,
+          slots: /* @__PURE__ */ new Set(),
+          labels: [],
+          count: 0,
+          ledger: {}
+        };
+        entry.slots.add(ci.slot);
+        entry.labels.push(ci.label);
+        entry.count += 1;
+        const d = ci.deltaCount;
+        if (d) {
+          for (const [key, val] of Object.entries(d)) {
+            if (typeof val === "number") {
+              const prev = typeof entry.ledger[key] === "number" ? entry.ledger[key] : 0;
+              entry.ledger[key] = prev + val;
+            } else if (typeof val === "boolean") {
+              entry.ledger[key] = entry.ledger[key] === true || val;
+            }
+          }
+        }
+        bySource.set(ci.source, entry);
+      }
+    }
+    return [...bySource.values()];
+  }, [activeInjectionsBySlot]);
+  const nodes = useMemo(() => {
+    const base = 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 } : {},
+        ...id === "agent" ? { activeInjectionsBySlot, activeLedger } : {},
+        // 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
+    }));
+    if (contextSummary.length > 0) {
+      base.push({
+        id: "context",
+        type: "context",
+        position: CONTEXT_NODE_POSITION,
+        data: { sources: contextSummary },
+        draggable: false
+      });
+    }
+    if (toolsRoster) {
+      base.push({
+        id: "tools-list",
+        type: "tools-list",
+        position: TOOLS_NODE_POSITION,
+        data: toolsRoster,
+        draggable: false
+      });
+    }
+    return base;
+  }, [
+    activeNodes,
+    touched,
+    activeStage,
+    activeSkillId,
+    activeInjectionsBySlot,
+    activeLedger,
+    contextSummary,
+    toolsRoster
+  ]);
+  const nodeTypes = useMemo(
+    () => ({ lens: LensNode, context: ContextNode, "tools-list": ToolsListNode }),
+    []
+  );
+  const edgeTypes = useMemo(() => ({ labelled: LensEdge(onEdgeClick) }), [onEdgeClick]);
+  const fitKey = useMemo(
+    () => nodes.map((n) => n.id).sort().join("|"),
+    [nodes]
+  );
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      "data-fp-lens": "stage-flow",
+      style: {
+        height,
+        background: t.bg,
+        borderBottom: `1px solid ${t.border}`,
+        // ResizeObserver target — FitViewOnResize watches this element
+        // (not the window) so the graph refits when the host panel
+        // changes width via splitter drag, not just window resize.
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ jsx3(EdgeMarkerDefs, {}),
+        /* @__PURE__ */ jsxs3(
+          ReactFlow,
+          {
+            nodes,
+            edges,
+            nodeTypes,
+            edgeTypes,
+            fitView: true,
+            fitViewOptions: { padding: 0.2, maxZoom: 1 },
+            proOptions: { hideAttribution: true },
+            nodesDraggable: false,
+            nodesConnectable: false,
+            elementsSelectable: false,
+            panOnDrag: false,
+            zoomOnScroll: false,
+            zoomOnPinch: false,
+            zoomOnDoubleClick: false,
+            children: [
+              /* @__PURE__ */ jsx3(FitViewOnResize, { fitKey }),
+              /* @__PURE__ */ jsx3(
+                Background,
+                {
+                  variant: BackgroundVariant.Dots,
+                  gap: 18,
+                  size: 1,
+                  color: t.border
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function FitViewOnResize({ fitKey }) {
+  const { fitView } = useReactFlow();
+  const lastKeyRef = useRef2("");
+  useEffect2(() => {
+    if (fitKey !== lastKeyRef.current) {
+      lastKeyRef.current = fitKey;
+      const t = setTimeout(
+        () => requestAnimationFrame(() => fitView({ padding: 0.2, maxZoom: 1 })),
+        50
+      );
+      return () => clearTimeout(t);
+    }
+  }, [fitKey, fitView]);
+  useEffect2(() => {
+    const root = document.querySelector('[data-fp-lens="stage-flow"]');
+    if (!root) return;
+    const refit = () => requestAnimationFrame(() => fitView({ padding: 0.2, maxZoom: 1 }));
+    const ro = new ResizeObserver(refit);
+    ro.observe(root);
+    window.addEventListener("resize", refit);
+    return () => {
+      ro.disconnect();
+      window.removeEventListener("resize", refit);
+    };
+  }, [fitView]);
+  return null;
+}
+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,
+                injectionsBySlot: d.activeInjectionsBySlot,
+                ledger: d.activeLedger
+              }
+            )
+          ] }),
+          /* @__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 ContextNode({ data }) {
+  const t = useLensTheme();
+  const d = data;
+  if (!d.sources || d.sources.length === 0) return null;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      style: {
+        width: 200,
+        padding: "8px 10px",
+        borderRadius: 8,
+        background: "transparent",
+        border: `1.5px dashed ${t.accent}`,
+        color: t.text,
+        fontFamily: t.fontSans
+      },
+      children: [
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            style: {
+              fontSize: 9,
+              color: t.textSubtle,
+              textTransform: "uppercase",
+              letterSpacing: "0.08em",
+              fontWeight: 600,
+              marginBottom: 6
+            },
+            children: "Context engineered"
+          }
+        ),
+        /* @__PURE__ */ jsx3("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: d.sources.map((s) => {
+          const slot = [...s.slots][0];
+          const deltas = describeSourceDeltas(s.ledger, s.labels);
+          return /* @__PURE__ */ jsxs3(
+            "div",
+            {
+              title: s.labels.join(" \xB7 "),
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: 2
+              },
+              children: [
+                /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+                  /* @__PURE__ */ jsxs3(
+                    "span",
+                    {
+                      style: {
+                        fontFamily: t.fontMono,
+                        fontWeight: 700,
+                        letterSpacing: "0.06em",
+                        textTransform: "uppercase",
+                        color: t.accent,
+                        fontSize: 9,
+                        padding: "1px 5px",
+                        border: `1px solid ${t.accent}`,
+                        borderRadius: 3
+                      },
+                      children: [
+                        s.source,
+                        s.count > 1 ? ` \xD7${s.count}` : ""
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3("span", { style: { color: t.textSubtle, fontSize: 9 }, children: "\u2192" }),
+                  /* @__PURE__ */ jsx3("span", { style: { fontSize: 9, color: t.textMuted }, children: slotShort(slot) })
+                ] }),
+                deltas.length > 0 && /* @__PURE__ */ jsx3(
+                  "div",
+                  {
+                    style: {
+                      paddingLeft: 8,
+                      display: "flex",
+                      flexWrap: "wrap",
+                      gap: 4
+                    },
+                    children: deltas.map((dlabel) => /* @__PURE__ */ jsx3(
+                      "span",
+                      {
+                        style: {
+                          fontSize: 9,
+                          padding: "0 4px",
+                          borderRadius: 3,
+                          fontFamily: t.fontMono,
+                          color: t.text,
+                          background: `color-mix(in srgb, ${t.accent} 12%, transparent)`,
+                          border: `1px dashed ${t.accent}`
+                        },
+                        children: dlabel
+                      },
+                      dlabel
+                    ))
+                  }
+                )
+              ]
+            },
+            s.source
+          );
+        }) })
+      ]
+    }
+  );
+}
+function describeSourceDeltas(ledger, labels) {
+  const out = [];
+  const n = (k) => typeof ledger[k] === "number" ? ledger[k] : 0;
+  const chars = n("systemPromptChars");
+  if (chars > 0) {
+    out.push(chars >= 1e3 ? `+${(chars / 1e3).toFixed(1)}k chars` : `+${chars} chars`);
+  }
+  const tools = n("tools");
+  if (tools > 0) out.push(`+${tools} tools`);
+  if (ledger["toolsFromSkill"] === true && tools === 0) out.push("+? tools");
+  const sys = n("system");
+  const tool = n("tool");
+  const user = n("user");
+  if (sys > 0) out.push(`+${sys} sys msg${sys === 1 ? "" : "s"}`);
+  if (tool > 0) out.push(`+${tool} tool msg${tool === 1 ? "" : "s"}`);
+  if (user > 0) out.push(`+${user} user msg${user === 1 ? "" : "s"}`);
+  if (out.length === 0 && labels.length > 0) out.push(labels[0]);
+  return out;
+}
+function ToolsListNode({ data }) {
+  const t = useLensTheme();
+  const d = data;
+  if (!d.names || d.names.length === 0) return null;
+  const MAX_VISIBLE = 6;
+  const visible = d.names.slice(0, MAX_VISIBLE);
+  const overflow = d.names.length - visible.length;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      style: {
+        width: 130,
+        padding: "8px 10px",
+        borderRadius: 8,
+        background: "transparent",
+        border: `1.5px dashed ${t.accent}`,
+        color: t.text,
+        fontFamily: t.fontSans
+      },
+      children: [
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "baseline",
+              justifyContent: "space-between",
+              marginBottom: 6
+            },
+            children: [
+              /* @__PURE__ */ jsxs3(
+                "span",
+                {
+                  style: {
+                    fontSize: 9,
+                    color: t.textSubtle,
+                    textTransform: "uppercase",
+                    letterSpacing: "0.08em",
+                    fontWeight: 600
+                  },
+                  children: [
+                    "Tools \xB7 ",
+                    d.names.length
+                  ]
+                }
+              ),
+              d.delta > 0 && /* @__PURE__ */ jsxs3(
+                "span",
+                {
+                  title: d.deltaSource ? `+${d.delta} added by ${d.deltaSource} this iteration` : `+${d.delta} since previous iteration`,
+                  style: {
+                    fontSize: 9,
+                    padding: "0 4px",
+                    borderRadius: 3,
+                    fontFamily: t.fontMono,
+                    fontWeight: 700,
+                    color: t.accent,
+                    border: `1px dashed ${t.accent}`
+                  },
+                  children: [
+                    "+",
+                    d.delta,
+                    d.deltaSource ? ` \xB7 ${d.deltaSource}` : ""
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 2,
+              fontFamily: t.fontMono,
+              fontSize: 9,
+              color: t.textMuted
+            },
+            children: [
+              visible.map((name) => /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  title: name,
+                  style: {
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  },
+                  children: name
+                },
+                name
+              )),
+              overflow > 0 && /* @__PURE__ */ jsxs3("div", { style: { color: t.textSubtle, fontStyle: "italic" }, children: [
+                "+",
+                overflow,
+                " more"
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function slotShort(slot) {
+  if (slot === "system-prompt") return "sys prompt";
+  if (slot === "tools") return "tools";
+  return "messages";
+}
+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,
+  injectionsBySlot,
+  ledger
+}) {
+  const t = useLensTheme();
+  const litSP = active && mutations?.systemPrompt === true;
+  const litMsg = active && mutations?.messages === true;
+  const litTools = active && mutations?.tools === true;
+  const ports = [
+    {
+      key: "system-prompt",
+      label: "System Prompt",
+      hint: "Instructions Neo runs on",
+      lit: litSP
+    },
+    {
+      key: "message",
+      label: "Messages",
+      hint: "Conversation so far",
+      lit: litMsg
+    },
+    {
+      key: "tool",
+      label: "Tools",
+      hint: "What Neo can call",
+      lit: litTools
+    }
+  ];
+  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) => {
+        const injectionSlotKey = p.key === "message" ? "messages" : p.key === "tool" ? "tools" : "system-prompt";
+        const injections = injectionsBySlot?.get(injectionSlotKey) ?? [];
+        const slotDelta = computeSlotDelta(p.key, ledger);
+        const augmented = injections.length > 0 || slotDelta !== null;
+        const baseBorderColor = p.lit ? portLitBorder : portIdleBorder;
+        const borderStyle = augmented && !p.lit ? "dashed" : "solid";
+        return /* @__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 ${borderStyle} ${baseBorderColor}`,
+              // Whole-row dotted ring when augmented but not currently
+              // lit — makes the "ledger has additions" status visible
+              // on inactive slots without yelling.
+              ...augmented && !p.lit ? {
+                outline: `1px dashed ${filledCard ? "rgba(255,255,255,0.4)" : t.accent}`,
+                outlineOffset: -1
+              } : {}
+            },
+            children: [
+              /* @__PURE__ */ jsx3("span", { style: { fontSize: 8 }, children: "\u25B8" }),
+              /* @__PURE__ */ jsx3("span", { style: { flex: 1 }, children: p.label })
+            ]
+          },
+          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 : t.border;
+    const strokeWidth = d.active ? 2.25 : 1.5;
+    const strokeDasharray = d.isLoop ? "5 4" : void 0;
+    const markerId = d.active ? "lens-arrow-active" : "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)
+        }
+      )
+    ] });
+  };
+}
+function computeSlotDelta(portKey, ledger) {
+  if (!ledger) return null;
+  const num = (k) => typeof ledger[k] === "number" ? ledger[k] : 0;
+  if (portKey === "system-prompt") {
+    const chars = num("systemPromptChars");
+    if (chars <= 0) return null;
+    return chars >= 1e3 ? `+${(chars / 1e3).toFixed(1)}k chars` : `+${chars} chars`;
+  }
+  if (portKey === "message") {
+    const sys = num("system");
+    const tool = num("tool");
+    const user = num("user");
+    const parts = [];
+    if (sys > 0) parts.push(`system +${sys}`);
+    if (tool > 0) parts.push(`tool +${tool}`);
+    if (user > 0) parts.push(`user +${user}`);
+    return parts.length > 0 ? parts.join(" \xB7 ") : null;
+  }
+  if (portKey === "tool") {
+    const tools = num("tools");
+    const fromSkill = ledger["toolsFromSkill"] === true;
+    if (tools > 0) return `+${tools} tools`;
+    if (fromSkill) return "+? tools (skill)";
+    return null;
+  }
+  return null;
+}
+
+// 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 })
+              ]
+            }
+          )
+        ] }),
+        (() => {
+          const iterInjections = currentIter?.contextInjections ?? [];
+          if (iterInjections.length > 0) {
+            return /* @__PURE__ */ jsxs5("section", { children: [
+              /* @__PURE__ */ jsx5(Label3, { t, children: "Context injected" }),
+              /* @__PURE__ */ jsx5(InjectionTags, { injections: iterInjections, t })
+            ] });
+          }
+          const turnInjections = currentTurn?.contextInjections ?? [];
+          if (turnInjections.length === 0) return null;
+          return /* @__PURE__ */ jsxs5("section", { children: [
+            /* @__PURE__ */ jsx5(Label3, { t, children: "Context engineered this turn" }),
+            /* @__PURE__ */ jsx5(InjectionTags, { injections: turnInjections, t, dedupeBySource: true })
+          ] });
+        })(),
+        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 InjectionTags({
+  injections,
+  t,
+  dedupeBySource = false
+}) {
+  const visible = dedupeBySource ? collapseBySource(injections) : injections;
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      style: {
+        marginTop: 6,
+        display: "flex",
+        gap: 6,
+        flexWrap: "wrap"
+      },
+      children: visible.map((ci, idx) => /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          title: `${ci.source} \u2192 ${ci.slot}`,
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 6,
+            padding: "4px 8px",
+            fontSize: 11,
+            fontWeight: 500,
+            background: `color-mix(in srgb, ${t.accent} 8%, ${t.bgElev})`,
+            border: `1px solid ${t.border}`,
+            borderRadius: 6,
+            color: t.text,
+            lineHeight: 1.4
+          },
+          children: [
+            /* @__PURE__ */ jsx5(
+              "span",
+              {
+                style: {
+                  color: t.textMuted,
+                  fontSize: 10,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.04em"
+                },
+                children: ci.source
+              }
+            ),
+            /* @__PURE__ */ jsx5("span", { style: { color: t.textSubtle }, children: "\u2192" }),
+            /* @__PURE__ */ jsx5("span", { style: { color: t.textMuted, fontSize: 10 }, children: slotShort2(ci.slot) }),
+            /* @__PURE__ */ jsx5("span", { style: { color: t.text }, children: ci.label })
+          ]
+        },
+        `${ci.source}-${idx}`
+      ))
+    }
+  );
+}
+function collapseBySource(injections) {
+  const counts = /* @__PURE__ */ new Map();
+  const firstBySource = /* @__PURE__ */ new Map();
+  for (const ci of injections) {
+    const key = `${ci.source}|${ci.slot}`;
+    counts.set(key, (counts.get(key) ?? 0) + 1);
+    if (!firstBySource.has(key)) firstBySource.set(key, ci);
+  }
+  return [...firstBySource.entries()].map(([key, first]) => {
+    const n = counts.get(key) ?? 1;
+    if (n <= 1) return first;
+    return { ...first, label: `${first.label} \xB7 \xD7${n}` };
+  });
+}
+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";
+}
+function slotShort2(slot) {
+  if (slot === "system-prompt") return "sys prompt";
+  if (slot === "tools") return "tools";
+  return "messages";
+}
+
+// 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);
+  useEffect3(() => {
+    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 = useRef3(liveIndex);
+  liveIndexRef.current = liveIndex;
+  const handleFocusChange = useCallback((i) => {
+    setFocusIndex(i >= liveIndexRef.current ? -1 : i);
+  }, []);
+  useEffect3(() => {
+    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]
+  );
+  const shellRef = useRef3(null);
+  const [isNarrow, setIsNarrow] = useState4(false);
+  useEffect3(() => {
+    const el = shellRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(([entry]) => {
+      const w = entry.contentRect.width;
+      setIsNarrow(w < 640);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      ref: shellRef,
+      "data-fp-lens": "shell",
+      "data-fp-lens-narrow": isNarrow ? "true" : "false",
+      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).
+        //
+        // Wide layout: two columns (graph | ask) with shared top/bottom rows.
+        // Narrow layout: single column, ask card stacks below graph — same
+        // responsive pattern `<ExplainableShell>` uses when its container
+        // drops below ~640px. Container-width driven (ResizeObserver), so
+        // this reacts to panel drags / splitters, not the viewport.
+        //
+        // Both columns use `minmax(0, ...)` so grid tracks can shrink below
+        // their preferred size without clipping content.
+        gridTemplateColumns: isNarrow ? "minmax(0, 1fr)" : "minmax(0, 1fr) minmax(0, 320px)",
+        gridTemplateRows: isNarrow ? "auto auto auto minmax(0, 1fr) auto" : "auto auto minmax(0, 1fr) auto",
+        gridTemplateAreas: isNarrow ? '"tt" "graph" "ask" "messages" "summary"' : '"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,
+                  timeline
+                }
+              )
+            }
+          ),
+          /* @__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 useEffect4, useRef as useRef4, useState as useState5 } from "react";
+
+// src/react/layout/FillParent.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function FillParent({
+  children,
+  dataAttr,
+  outerStyle,
+  innerStyle
+}) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      "data-fp-lens": dataAttr,
+      style: {
+        // Outer: flex child + block with definite height via 100%.
+        // `position: relative` establishes the containing block for
+        // the absolutely-positioned inner.
+        position: "relative",
+        flex: "1 1 0%",
+        minHeight: 0,
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        ...outerStyle
+      },
+      children: /* @__PURE__ */ jsx8(
+        "div",
+        {
+          style: {
+            // Inner: pinned to all four edges of outer. Once outer has
+            // a size (any mechanism), inner fills it exactly.
+            position: "absolute",
+            inset: 0,
+            display: "flex",
+            flexDirection: "column",
+            minHeight: 0,
+            ...innerStyle
+          },
+          children
+        }
+      )
+    }
+  );
+}
+
+// src/react/components/Tabs/Tabs.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var DEFAULT_SURFACE = "#0f172a";
+var DEFAULT_TEXT = "#f8fafc";
+var DEFAULT_MUTED_TEXT = "#94a3b8";
+var DEFAULT_BORDER = "#334155";
+var DEFAULT_FONT_FAMILY = "Inter, system-ui, -apple-system, sans-serif";
+function Tabs({
+  tabs,
+  selectedTabId,
+  defaultTabId,
+  onChange,
+  renderAll = false,
+  leadingSlot,
+  trailingSlot,
+  className,
+  surface = DEFAULT_SURFACE,
+  textColor = DEFAULT_TEXT,
+  mutedTextColor = DEFAULT_MUTED_TEXT,
+  borderColor = DEFAULT_BORDER,
+  fontFamily = DEFAULT_FONT_FAMILY
+}) {
+  const palette = {
+    surface,
+    textColor,
+    mutedTextColor,
+    borderColor,
+    fontFamily
+  };
+  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: {
+        // Fill the parent on every layout model we might be dropped
+        // into. `flex: 1` + `minHeight: 0` wins inside flex columns;
+        // `height: 100%` wins inside block parents with a definite
+        // height. Applying both makes <Tabs> self-sufficient so
+        // consumers don't have to wrap it in another sizer div.
+        display: "flex",
+        flexDirection: "column",
+        flex: "1 1 0%",
+        height: "100%",
+        minHeight: 0
+      },
+      children: [
+        /* @__PURE__ */ jsx9(
+          TabStrip,
+          {
+            tabs,
+            selectedId,
+            onPick: pickTab,
+            onKeyDown: handleKey,
+            leadingSlot,
+            trailingSlot,
+            palette
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          TabContent,
+          {
+            tabs,
+            selectedId,
+            renderAll,
+            palette
+          }
+        ),
+        !selectedDef && renderAll === false && /* @__PURE__ */ jsx9(
+          "div",
+          {
+            "data-fp-lens": "tabs-empty",
+            style: { flex: 1, minHeight: 0 },
+            "aria-live": "polite"
+          }
+        )
+      ]
+    }
+  );
+}
+function TabStrip({
+  tabs,
+  selectedId,
+  onPick,
+  onKeyDown,
+  leadingSlot,
+  trailingSlot,
+  palette
+}) {
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      role: "tablist",
+      onKeyDown,
+      "data-fp-lens": "tabs-strip",
+      style: {
+        display: "flex",
+        padding: "8px 14px 0",
+        // Transparent so the strip inherits from the host's outer
+        // color (page/sidebar). Active tab renders an explicit
+        // `palette.surface` fill so it merges with the content
+        // panel; inactive tabs show the host color through.
+        background: "transparent",
+        flexShrink: 0,
+        alignItems: "flex-end",
+        position: "relative",
+        zIndex: 1,
+        fontFamily: palette.fontFamily
+      },
+      children: [
+        leadingSlot && /* @__PURE__ */ jsx9(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              marginRight: 12,
+              paddingBottom: 10
+            },
+            "data-fp-lens": "tabs-leading",
+            children: leadingSlot
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: 2,
+              alignItems: "flex-end",
+              flex: 1,
+              minWidth: 0
+            },
+            children: tabs.map((def) => /* @__PURE__ */ jsx9(
+              TabButton,
+              {
+                def,
+                selected: def.id === selectedId,
+                onPick,
+                palette
+              },
+              def.id
+            ))
+          }
+        ),
+        trailingSlot && /* @__PURE__ */ jsx9("div", { style: { display: "flex", alignItems: "center" }, children: trailingSlot })
+      ]
+    }
+  );
+}
+function TabButton({
+  def,
+  selected,
+  onPick,
+  palette
+}) {
+  const buttonRef = useRef4(null);
+  useEffect4(() => {
+    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 ? palette.textColor : palette.mutedTextColor,
+        // SAME color used on the content panel below. Devtools sanity
+        // check: this string equals <TabContent>'s `background`. The
+        // active tab has no border — its fill IS the surface, so any
+        // outline would break the "tab and body are one continuous
+        // shape" illusion the user asked for.
+        background: selected ? palette.surface : "transparent",
+        border: "none",
+        borderRadius: "10px 10px 0 0",
+        fontWeight: selected ? 600 : 500,
+        opacity: def.disabled ? 0.45 : 1,
+        transition: "background 140ms ease, color 140ms ease, border-color 140ms ease"
+      },
+      children: [
+        /* @__PURE__ */ jsx9("span", { children: def.label }),
+        def.trailing
+      ]
+    }
+  );
+}
+function TabContent({
+  tabs,
+  selectedId,
+  renderAll,
+  palette
+}) {
+  const bg = palette.surface;
+  if (renderAll) {
+    return /* @__PURE__ */ jsx9(
+      FillParent,
+      {
+        dataAttr: "tabs-content",
+        outerStyle: { background: bg },
+        children: tabs.map((def) => /* @__PURE__ */ jsx9(
+          "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((t) => t.id === selectedId);
+  if (!selectedDef) return null;
+  return /* @__PURE__ */ jsx9(
+    FillParent,
+    {
+      dataAttr: "tabs-content",
+      outerStyle: { background: bg },
+      innerStyle: { background: bg },
+      children: /* @__PURE__ */ jsx9(
+        "div",
+        {
+          role: "tabpanel",
+          style: {
+            position: "absolute",
+            inset: 0,
+            display: "flex",
+            flexDirection: "column",
+            minHeight: 0
+          },
+          children: selectedDef.content
+        }
+      )
+    }
+  );
+}
+
+// src/react/layout/SelfSizingRoot.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function SelfSizingRoot({
+  children,
+  className,
+  dataAttr = "self-sizing-root",
+  minHeight = "min(400px, 100dvh)",
+  maxHeight = "100dvh",
+  style
+}) {
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      className,
+      "data-fp-lens": dataAttr,
+      style: {
+        // Layout — all five declarations work together. The parent's
+        // layout model decides which ones "win":
+        //   • inside a flex column parent → `flex: 1` dominates
+        //   • inside a grid cell          → `height: 100%` dominates
+        //   • inside a block with height  → `height: 100%` dominates
+        //   • inside an unsized parent    → `min-height` (floor) wins
+        // The `max-height: 100dvh` caps all of the above so Lens
+        // never exceeds the viewport.
+        display: "flex",
+        flexDirection: "column",
+        flex: "1 1 0%",
+        height: "100%",
+        minHeight,
+        maxHeight,
+        // CSS containment — Lens is a self-contained layout island.
+        // `layout`: inner layout doesn't influence outer layout.
+        // `size`:   inner element sizes doesn't affect outer element
+        //           size (requires an explicit size — provided above).
+        // `paint`:  nothing inside paints outside the box. Clips
+        //           descendant overflow too, so we don't need
+        //           `overflow: hidden` separately, but we keep it
+        //           for older browsers that don't honour paint
+        //           containment.
+        contain: "layout size paint",
+        overflow: "hidden",
+        // Custom caller style merged last, but the layout keys above
+        // are intentionally NOT overridable — if a consumer wants to
+        // change sizing, they use the explicit props. This is how we
+        // guarantee "library-quality" self-containment: the layout
+        // contract is stable no matter what style prop comes in.
+        ...style
+      },
+      children
+    }
+  );
+}
+
+// src/react/hooks/useLiveTimeline.ts
+import { useCallback as useCallback3, useMemo as useMemo3, useRef as useRef5, useState as useState6 } from "react";
+function useLiveTimeline() {
+  const builderRef = useRef5(null);
+  if (!builderRef.current) builderRef.current = new LiveTimelineBuilder();
+  const builder = builderRef.current;
+  const [timeline, setTimeline] = useState6(() => 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]
+  );
+}
+
+// src/react/Lens.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function Lens({
+  runtimeSnapshot,
+  timeline,
+  appName,
+  systemPrompt,
+  skills,
+  activeSkillId,
+  onToolCallClick,
+  defaultTabId = "lens",
+  trailingSlot,
+  renderAll = false,
+  traceView,
+  narrativeEntries,
+  spec,
+  theme,
+  for: runnerProp
+}) {
+  const themedTokens = useLensTheme();
+  const t = theme ? resolve(theme) : themedTokens;
+  const [selectedId, setSelectedId] = useState7(defaultTabId);
+  const autoLens = useLiveTimeline();
+  const [, bumpSnapshot] = useReducer((x) => x + 1, 0);
+  useEffect5(() => {
+    if (!runnerProp?.observe) return;
+    autoLens.reset();
+    const stop = runnerProp.observe((event) => {
+      autoLens.ingest(event);
+      const type = event && typeof event === "object" ? event.type : void 0;
+      if (type === "turn_end" || type === "agentfootprint.agent.turn_complete") {
+        bumpSnapshot();
+      }
+    });
+    return stop;
+  }, [runnerProp]);
+  const usingRunner = !!runnerProp?.observe;
+  const resolvedTimeline = usingRunner ? autoLens.timeline : timeline;
+  const resolvedSnapshot = usingRunner ? runnerProp?.getSnapshot?.() ?? null : runtimeSnapshot ?? null;
+  const resolvedNarrative = usingRunner ? runnerProp?.getNarrativeEntries?.() : narrativeEntries;
+  const resolvedSpec = usingRunner ? runnerProp?.getSpec?.() : spec;
+  const agentLensProps = {
+    runtimeSnapshot: resolvedSnapshot,
+    ...resolvedTimeline !== void 0 ? { timeline: resolvedTimeline } : {},
+    ...systemPrompt !== void 0 ? { systemPrompt } : {},
+    ...skills !== void 0 ? { skills } : {},
+    ...activeSkillId !== void 0 ? { activeSkillId } : {},
+    ...onToolCallClick !== void 0 ? { onToolCallClick } : {}
+  };
+  const brand = appName ? /* @__PURE__ */ jsx11(
+    "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__ */ jsx11(
+    Tabs,
+    {
+      tabs: [
+        {
+          id: "lens",
+          label: "Lens",
+          content: /* @__PURE__ */ jsx11(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__ */ jsx11(
+            ExplainableShell,
+            {
+              runtimeSnapshot: resolvedSnapshot ?? null,
+              ...resolvedNarrative !== void 0 ? { narrativeEntries: [...resolvedNarrative] } : {},
+              ...resolvedSpec !== void 0 ? { spec: resolvedSpec } : {}
+            }
+          )
+        }
+      ],
+      selectedTabId: selectedId,
+      onChange: setSelectedId,
+      renderAll,
+      surface: t.bg,
+      textColor: t.text,
+      mutedTextColor: t.textMuted,
+      borderColor: t.border,
+      fontFamily: t.fontSans,
+      ...brand !== null ? { leadingSlot: brand } : {},
+      ...trailingSlot !== void 0 ? { trailingSlot } : {}
+    }
+  );
+  const sized = /* @__PURE__ */ jsx11(SelfSizingRoot, { dataAttr: "shell", children: shell });
+  return theme ? /* @__PURE__ */ jsx11(FootprintTheme, { tokens: theme, children: sized }) : sized;
+}
+
+// src/react/layout/Stack.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function Stack({
+  children,
+  direction = "column",
+  gap = 8,
+  align = "stretch",
+  justify = "flex-start",
+  wrap = false,
+  fill = false,
+  padding,
+  dataAttr,
+  style,
+  className
+}) {
+  const mainAxisMin = direction === "column" ? "minHeight" : "minWidth";
+  return /* @__PURE__ */ jsx12(
+    "div",
+    {
+      "data-fp-lens": dataAttr,
+      className,
+      style: {
+        display: "flex",
+        flexDirection: direction,
+        gap,
+        alignItems: align,
+        justifyContent: justify,
+        flexWrap: wrap ? "wrap" : "nowrap",
+        ...fill ? { flex: "1 1 0%", [mainAxisMin]: 0 } : {},
+        ...padding !== void 0 ? { padding } : {},
+        ...style
+      },
+      children
+    }
+  );
+}
+
+// src/react/layout/Scroller.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var SCROLLBAR_STYLE_ID = "fp-lens-scroller-hide";
+function ensureHideScrollbarStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(SCROLLBAR_STYLE_ID)) return;
+  const el = document.createElement("style");
+  el.id = SCROLLBAR_STYLE_ID;
+  el.textContent = `
+    [data-fp-lens-hide-scrollbar="true"] {
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+    }
+    [data-fp-lens-hide-scrollbar="true"]::-webkit-scrollbar {
+      display: none;
+    }
+  `;
+  document.head.appendChild(el);
+}
+function Scroller({
+  children,
+  direction = "y",
+  padding = 0,
+  hideScrollbar = false,
+  dataAttr,
+  outerStyle,
+  innerStyle,
+  className
+}) {
+  if (hideScrollbar) ensureHideScrollbarStyles();
+  const overflowKey = direction === "y" ? "overflowY" : "overflowX";
+  const crossOverflowKey = direction === "y" ? "overflowX" : "overflowY";
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      "data-fp-lens": dataAttr,
+      className,
+      style: {
+        position: "relative",
+        flex: "1 1 0%",
+        minHeight: 0,
+        minWidth: 0,
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        ...outerStyle
+      },
+      children: /* @__PURE__ */ jsx13(
+        "div",
+        {
+          "data-fp-lens-hide-scrollbar": hideScrollbar ? "true" : void 0,
+          style: {
+            position: "absolute",
+            inset: 0,
+            [overflowKey]: "auto",
+            [crossOverflowKey]: "hidden",
+            padding,
+            // Contain — internal scroll never triggers a scroll on any
+            // ancestor, and painting stops at the clip box.
+            contain: "content",
+            display: "flex",
+            flexDirection: direction === "y" ? "column" : "row",
+            ...innerStyle
+          },
+          children
+        }
+      )
+    }
+  );
+}
+
+// src/react/layout/Surface.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var DEFAULT_PALETTE = {
+  surface: "#0f172a",
+  borderColor: "#334155",
+  textColor: "#f8fafc",
+  elevatedSurface: "#1e293b",
+  shadow: "0 2px 8px rgba(0, 0, 0, 0.18)"
+};
+function resolveVariantStyles(variant, palette, padding, radius) {
+  if (variant === "none") {
+    return {};
+  }
+  if (variant === "pill") {
+    return {
+      background: palette.surface,
+      color: palette.textColor,
+      border: `1px solid ${palette.borderColor}`,
+      borderRadius: radius ?? 999,
+      padding: padding ?? "2px 10px",
+      fontSize: 11,
+      fontWeight: 600,
+      whiteSpace: "nowrap",
+      display: "inline-flex",
+      alignItems: "center"
+    };
+  }
+  if (variant === "well") {
+    return {
+      background: palette.elevatedSurface ?? palette.surface,
+      color: palette.textColor,
+      border: `1px solid ${palette.borderColor}`,
+      borderRadius: radius ?? 6,
+      padding: padding ?? 12
+    };
+  }
+  return {
+    background: palette.surface,
+    color: palette.textColor,
+    border: `1px solid ${palette.borderColor}`,
+    borderRadius: radius ?? 10,
+    padding: padding ?? 14,
+    boxShadow: palette.shadow
+  };
+}
+function Surface({
+  children,
+  variant = "card",
+  palette: paletteOverride,
+  padding,
+  radius,
+  dataAttr,
+  style,
+  className
+}) {
+  const palette = {
+    ...DEFAULT_PALETTE,
+    ...paletteOverride
+  };
+  const variantStyles = resolveVariantStyles(variant, palette, padding, radius);
+  return /* @__PURE__ */ jsx14(
+    "div",
+    {
+      "data-fp-lens": dataAttr ?? `surface-${variant}`,
+      className,
+      style: { ...variantStyles, ...style },
+      children
+    }
+  );
+}
+
+// src/react/layout/Table.tsx
+import { useEffect as useEffect6, useRef as useRef6, useState as useState8 } from "react";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+var DEFAULT_PALETTE2 = {
+  surface: "#0f172a",
+  elevatedSurface: "#1e293b",
+  borderColor: "#334155",
+  textColor: "#f8fafc",
+  mutedTextColor: "#94a3b8",
+  headerColor: "#f8fafc",
+  headerBg: "#1e293b"
+};
+function Table({
+  columns,
+  rows,
+  rowKey,
+  mode = "auto",
+  collapseAt = 640,
+  emptyState,
+  palette: paletteOverride,
+  dataAttr = "table"
+}) {
+  const palette = { ...DEFAULT_PALETTE2, ...paletteOverride };
+  const containerRef = useRef6(null);
+  const [resolvedMode, setResolvedMode] = useState8(
+    mode === "auto" ? "table" : mode
+  );
+  useEffect6(() => {
+    if (mode !== "auto") {
+      setResolvedMode(mode);
+      return;
+    }
+    const el = containerRef.current;
+    if (!el) return;
+    if (typeof ResizeObserver === "undefined") {
+      setResolvedMode("table");
+      return;
+    }
+    const ro = new ResizeObserver((entries) => {
+      const width = entries[0]?.contentRect?.width ?? 0;
+      setResolvedMode(width >= collapseAt ? "table" : "cards");
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [mode, collapseAt]);
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx15(
+      "div",
+      {
+        ref: containerRef,
+        "data-fp-lens": dataAttr,
+        style: {
+          padding: 24,
+          textAlign: "center",
+          color: palette.mutedTextColor,
+          fontSize: 13
+        },
+        children: emptyState ?? "No rows to display."
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      ref: containerRef,
+      "data-fp-lens": dataAttr,
+      "data-fp-lens-mode": resolvedMode,
+      style: {
+        width: "100%",
+        color: palette.textColor
+      },
+      children: resolvedMode === "table" ? /* @__PURE__ */ jsx15(TableMode, { columns, rows, rowKey, palette }) : /* @__PURE__ */ jsx15(CardsMode, { columns, rows, rowKey, palette })
+    }
+  );
+}
+function TableMode({
+  columns,
+  rows,
+  rowKey,
+  palette
+}) {
+  return /* @__PURE__ */ jsxs9(
+    "table",
+    {
+      "data-fp-lens-mode": "table",
+      style: {
+        width: "100%",
+        borderCollapse: "collapse",
+        fontSize: 13
+      },
+      children: [
+        /* @__PURE__ */ jsx15("thead", { children: /* @__PURE__ */ jsx15("tr", { children: columns.map((col) => /* @__PURE__ */ jsx15(
+          "th",
+          {
+            scope: "col",
+            style: {
+              position: "sticky",
+              top: 0,
+              background: palette.headerBg,
+              color: palette.headerColor,
+              textAlign: col.align ?? "left",
+              padding: "10px 12px",
+              fontWeight: 600,
+              fontSize: 11,
+              textTransform: "uppercase",
+              letterSpacing: "0.08em",
+              borderBottom: `1px solid ${palette.borderColor}`,
+              width: col.width,
+              zIndex: 1
+            },
+            children: col.header
+          },
+          col.id
+        )) }) }),
+        /* @__PURE__ */ jsx15("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsx15(
+          "tr",
+          {
+            style: {
+              borderBottom: `1px solid ${palette.borderColor}`
+            },
+            children: columns.map((col) => /* @__PURE__ */ jsx15(
+              "td",
+              {
+                style: {
+                  padding: "10px 12px",
+                  textAlign: col.align ?? "left",
+                  verticalAlign: "top"
+                },
+                children: col.cell(row, i)
+              },
+              col.id
+            ))
+          },
+          rowKey(row, i)
+        )) })
+      ]
+    }
+  );
+}
+function CardsMode({
+  columns,
+  rows,
+  rowKey,
+  palette
+}) {
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      "data-fp-lens-mode": "cards",
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 8
+      },
+      children: rows.map((row, i) => {
+        const cardId = rowKey(row, i);
+        return /* @__PURE__ */ jsx15(
+          "div",
+          {
+            role: "group",
+            "aria-label": cardId,
+            style: {
+              background: palette.elevatedSurface,
+              border: `1px solid ${palette.borderColor}`,
+              borderRadius: 8,
+              padding: 12,
+              display: "flex",
+              flexDirection: "column",
+              gap: 6
+            },
+            children: columns.map((col) => {
+              const label = col.cardLabel === null ? null : col.cardLabel ?? (typeof col.header === "string" ? col.header : col.id);
+              return /* @__PURE__ */ jsxs9(
+                "div",
+                {
+                  style: {
+                    display: "grid",
+                    gridTemplateColumns: label ? "120px minmax(0, 1fr)" : "minmax(0, 1fr)",
+                    gap: 8,
+                    fontSize: 13
+                  },
+                  children: [
+                    label && /* @__PURE__ */ jsx15(
+                      "span",
+                      {
+                        style: {
+                          color: palette.mutedTextColor,
+                          fontSize: 11,
+                          textTransform: "uppercase",
+                          letterSpacing: "0.06em",
+                          fontWeight: 600
+                        },
+                        children: label
+                      }
+                    ),
+                    /* @__PURE__ */ jsx15("span", { style: { color: palette.textColor }, children: col.cell(row, i) })
+                  ]
+                },
+                col.id
+              );
+            })
+          },
+          cardId
+        );
+      })
+    }
+  );
+}
+
+// src/react/layout/FocusRegion.tsx
+import {
+  useCallback as useCallback4,
+  useEffect as useEffect7,
+  useRef as useRef7,
+  useState as useState9
+} from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var EMPTY_STATE = {
+  focused: false,
+  focusVisible: false,
+  focusedElement: null
+};
+function useFocusTracking(ref) {
+  const [state, setState] = useState9(EMPTY_STATE);
+  const lastInputKeyboardRef = useRef7(false);
+  useEffect7(() => {
+    const node = ref.current;
+    if (!node) return;
+    const onKeyDown = () => {
+      lastInputKeyboardRef.current = true;
+    };
+    const onPointerDown = () => {
+      lastInputKeyboardRef.current = false;
+    };
+    const onFocusIn = (e) => {
+      setState({
+        focused: true,
+        focusVisible: lastInputKeyboardRef.current,
+        focusedElement: e.target ?? null
+      });
+    };
+    const onFocusOut = (e) => {
+      const next = e.relatedTarget;
+      if (next && node.contains(next)) {
+        setState((prev) => ({
+          ...prev,
+          focusedElement: next instanceof Element ? next : null
+        }));
+        return;
+      }
+      setState(EMPTY_STATE);
+    };
+    node.addEventListener("focusin", onFocusIn);
+    node.addEventListener("focusout", onFocusOut);
+    document.addEventListener("keydown", onKeyDown, true);
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => {
+      node.removeEventListener("focusin", onFocusIn);
+      node.removeEventListener("focusout", onFocusOut);
+      document.removeEventListener("keydown", onKeyDown, true);
+      document.removeEventListener("pointerdown", onPointerDown, true);
+    };
+  }, [ref]);
+  return state;
+}
+function FocusRegion({
+  children,
+  onFocusChange,
+  showRing = true,
+  ringColor = "#6366f1",
+  ringWidth = 2,
+  dataAttr,
+  style,
+  className
+}) {
+  const ref = useRef7(null);
+  const state = useFocusTracking(ref);
+  const lastEmittedRef = useRef7(EMPTY_STATE);
+  const emit = useCallback4(
+    (s) => {
+      const prev = lastEmittedRef.current;
+      if (prev.focused === s.focused && prev.focusVisible === s.focusVisible && prev.focusedElement === s.focusedElement) {
+        return;
+      }
+      lastEmittedRef.current = s;
+      onFocusChange?.(s);
+    },
+    [onFocusChange]
+  );
+  useEffect7(() => {
+    emit(state);
+  }, [state, emit]);
+  const ringVisible = showRing && state.focusVisible && state.focused;
+  return /* @__PURE__ */ jsx16(
+    "div",
+    {
+      ref,
+      "data-fp-lens": dataAttr ?? "focus-region",
+      "data-focused": state.focused,
+      "data-focus-visible": state.focusVisible,
+      className,
+      style: {
+        position: "relative",
+        outline: ringVisible ? `${ringWidth}px solid ${ringColor}` : "none",
+        outlineOffset: 2,
+        transition: "outline-color 140ms ease",
+        ...style
+      },
+      children
+    }
+  );
+}
+
+// src/react/panels/IterationStrip.tsx
+import { jsx as jsx17, jsxs as jsxs10 } 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__ */ jsxs10(
+    "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__ */ jsx17("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__ */ jsxs10(
+            "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__ */ jsxs10("span", { style: { fontWeight: 600 }, children: [
+                  "Step ",
+                  c.step
+                ] }),
+                /* @__PURE__ */ jsxs10("span", { style: { opacity: 0.85 }, children: [
+                  " \xB7 ",
+                  c.label
+                ] }),
+                isFinal && /* @__PURE__ */ jsx17("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 jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+function ToolCallInspector({
+  timeline,
+  selectedId,
+  onSelect
+}) {
+  const t = useLensTheme();
+  return /* @__PURE__ */ jsxs11(
+    "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__ */ jsxs11(
+          "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__ */ jsxs11("div", { style: { overflow: "auto", flex: 1 }, children: [
+          timeline.tools.length === 0 && /* @__PURE__ */ jsx18("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__ */ jsxs11(
+              "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__ */ jsxs11(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        gap: 8,
+                        alignItems: "baseline",
+                        fontSize: 12,
+                        fontFamily: t.fontMono
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx18("span", { style: { color: errored ? t.error : t.accent, fontWeight: 600 }, children: tc.name }),
+                        /* @__PURE__ */ jsxs11(
+                          "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__ */ jsx18(
+                    "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/useLens.ts
+import { useRef as useRef8 } from "react";
+function useLens(factory) {
+  const ref = useRef8(null);
+  if (ref.current === null) {
+    ref.current = factory();
+  }
+  return ref.current;
+}
+
+export {
+  useLensTheme,
+  resolve,
+  MessagesPanel,
+  SkillsPanel,
+  StageFlow,
+  TimeTravel,
+  AskCard,
+  RunSummary,
+  AgentLens,
+  FillParent,
+  Tabs,
+  SelfSizingRoot,
+  useLiveTimeline,
+  Lens,
+  Stack,
+  Scroller,
+  Surface,
+  Table,
+  useFocusTracking,
+  FocusRegion,
+  IterationStrip,
+  ToolCallInspector,
+  useLens
+};
+//# sourceMappingURL=chunk-AWPI6OVI.js.map