agentfootprint-lens 0.1.0

package/dist/index.js

@@ -0,0 +1,901 @@
+// src/AgentLens.tsx
+import { useMemo, useState as useState2 } from "react";
+
+// src/adapters/fromAgentSnapshot.ts
+function fromAgentSnapshot(runtime) {
+  const shared = runtime?.sharedState ?? {};
+  const rawMessages = shared.messages ?? [];
+  const messages = rawMessages.map(normalizeMessage);
+  const commitLog = Array.isArray(runtime?.commitLog) ? runtime.commitLog : [];
+  const llmCalls = extractLLMCalls(commitLog);
+  const toolExecs = extractToolExecutions(commitLog);
+  const instructionEvals = extractInstructionEvals(commitLog);
+  const toolResolves = extractToolResolves(commitLog);
+  const turns = assembleTurns(messages, llmCalls, toolExecs, instructionEvals, toolResolves);
+  const allTools = turns.flatMap((t) => t.iterations.flatMap((i) => i.toolCalls));
+  return {
+    turns,
+    messages,
+    tools: allTools,
+    finalDecision: shared.decision ?? {},
+    rawSnapshot: runtime
+  };
+}
+function normalizeMessage(m) {
+  const role = (() => {
+    if (m.role === "system" || m.role === "user" || m.role === "assistant" || m.role === "tool")
+      return m.role;
+    return "user";
+  })();
+  const content = typeof m.content === "string" ? m.content : JSON.stringify(m.content);
+  return {
+    role,
+    content,
+    ...m.toolCalls?.length ? { toolCalls: m.toolCalls } : {},
+    ...m.toolCallId ? { toolCallId: m.toolCallId } : {}
+  };
+}
+function extractLLMCalls(commitLog) {
+  const out = [];
+  let iter = 0;
+  for (const entry of commitLog) {
+    const id = entry.stageId ?? "";
+    if (id !== "call-llm" && id !== "streaming-call-llm") continue;
+    iter++;
+    const u = entry.updates ?? {};
+    const rawResponse = u["adapterRawResponse"] ?? u["llmResponse"];
+    const usage = rawResponse?.usage;
+    out.push({
+      iterationIndex: iter,
+      model: rawResponse?.model,
+      inputTokens: usage?.inputTokens,
+      outputTokens: usage?.outputTokens,
+      durationMs: u["callDurationMs"] ?? void 0,
+      stopReason: rawResponse?.stopReason,
+      assistantContent: rawResponse?.content ?? "",
+      toolCallsRequested: rawResponse?.toolCalls ?? []
+    });
+  }
+  return out;
+}
+function extractToolExecutions(commitLog) {
+  const out = [];
+  let iter = 0;
+  for (const entry of commitLog) {
+    const id = entry.stageId ?? "";
+    if (id !== "execute-tool-calls") continue;
+    iter++;
+    const u = entry.updates ?? {};
+    const rawCalls = u["toolCalls"];
+    const stubs = (rawCalls ?? []).map((c) => ({
+      id: c.id,
+      name: c.name,
+      arguments: c.arguments ?? {},
+      result: "",
+      // filled in during assembly
+      iterationIndex: iter,
+      turnIndex: 0,
+      // reassigned during assembly
+      decisionUpdate: u["updatedDecision"]
+    }));
+    out.push({ iterationIndex: iter, toolCalls: stubs });
+  }
+  return out;
+}
+function extractInstructionEvals(commitLog) {
+  const out = [];
+  let iter = 0;
+  for (const entry of commitLog) {
+    const id = entry.stageId ?? "";
+    if (id !== "evaluate-instructions") continue;
+    iter++;
+    const u = entry.updates ?? {};
+    const matchedRaw = u["matchedInstructions"];
+    const matched = parseMatched(matchedRaw);
+    const promptInj = Array.isArray(u["promptInjections"]) ? u["promptInjections"].length : 0;
+    const toolInj = Array.isArray(u["toolInjections"]) ? u["toolInjections"].length : 0;
+    out.push({
+      iterationIndex: iter,
+      ...matched.length > 0 && { matchedInstructions: matched },
+      promptInjectionCount: promptInj,
+      toolInjectionCount: toolInj
+    });
+  }
+  return out;
+}
+function parseMatched(v) {
+  if (!v) return [];
+  if (Array.isArray(v)) return v.filter((x) => typeof x === "string");
+  if (typeof v === "string") {
+    const m = v.match(/:\s*(.+)/);
+    if (!m) return [];
+    return m[1].split(",").map((s) => s.trim().replace(/\.{3}$/, "")).filter(Boolean);
+  }
+  return [];
+}
+function extractToolResolves(commitLog) {
+  const out = [];
+  let iter = 0;
+  for (const entry of commitLog) {
+    const id = entry.stageId ?? "";
+    if (id !== "resolve-tools") continue;
+    iter++;
+    const u = entry.updates ?? {};
+    const descs = u["toolDescriptions"];
+    out.push({
+      iterationIndex: iter,
+      visibleTools: (descs ?? []).map((d) => d.name)
+    });
+  }
+  return out;
+}
+function assembleTurns(messages, llmCalls, toolExecs, instructionEvals, toolResolves) {
+  const turns = [];
+  let currentTurn = null;
+  let llmIdx = 0;
+  const toolExecByIter = new Map(toolExecs.map((t) => [t.iterationIndex, t]));
+  const instrByIter = new Map(instructionEvals.map((i) => [i.iterationIndex, i]));
+  const visibleByIter = new Map(toolResolves.map((t) => [t.iterationIndex, t]));
+  for (const msg of messages) {
+    if (msg.role === "user") {
+      if (currentTurn) turns.push(finalizeTurn(currentTurn));
+      currentTurn = {
+        index: turns.length,
+        userPrompt: msg.content,
+        iterations: [],
+        finalContent: ""
+      };
+      continue;
+    }
+    if (!currentTurn) continue;
+    if (msg.role === "assistant") {
+      const call = llmCalls[llmIdx];
+      llmIdx++;
+      const iterIndex = call?.iterationIndex ?? currentTurn.iterations.length + 1;
+      const exec = toolExecByIter.get(iterIndex);
+      const instr = instrByIter.get(iterIndex);
+      const visible = visibleByIter.get(iterIndex);
+      const toolCalls = (exec?.toolCalls ?? []).map((tc) => ({
+        ...tc,
+        turnIndex: currentTurn.index
+      }));
+      const iteration = {
+        index: iterIndex,
+        ...call?.model && { model: call.model },
+        ...call?.inputTokens !== void 0 && { inputTokens: call.inputTokens },
+        ...call?.outputTokens !== void 0 && { outputTokens: call.outputTokens },
+        ...call?.durationMs !== void 0 && { durationMs: call.durationMs },
+        ...call?.stopReason && { stopReason: call.stopReason },
+        assistantContent: call?.assistantContent ?? msg.content,
+        toolCalls,
+        decisionAtStart: {},
+        // TODO(phase-2): derive from pre-iter commit
+        ...instr?.matchedInstructions && { matchedInstructions: instr.matchedInstructions },
+        visibleTools: visible?.visibleTools ?? []
+      };
+      currentTurn.iterations.push(iteration);
+      if (!toolCalls.length) currentTurn.finalContent = iteration.assistantContent;
+      continue;
+    }
+    if (msg.role === "tool" && msg.toolCallId) {
+      const iter = currentTurn.iterations[currentTurn.iterations.length - 1];
+      if (!iter) continue;
+      const idx = iter.toolCalls.findIndex((tc) => tc.id === msg.toolCallId);
+      if (idx < 0) continue;
+      const updated = { ...iter.toolCalls[idx], result: msg.content };
+      iter.toolCalls[idx] = updated;
+    }
+  }
+  if (currentTurn) turns.push(finalizeTurn(currentTurn));
+  return turns;
+}
+function finalizeTurn(t) {
+  const totalInputTokens = t.iterations.reduce((s, i) => s + (i.inputTokens ?? 0), 0);
+  const totalOutputTokens = t.iterations.reduce((s, i) => s + (i.outputTokens ?? 0), 0);
+  const totalDurationMs = t.iterations.reduce((s, i) => s + (i.durationMs ?? 0), 0);
+  return {
+    index: t.index,
+    userPrompt: t.userPrompt,
+    iterations: t.iterations,
+    finalContent: t.finalContent,
+    totalInputTokens,
+    totalOutputTokens,
+    totalDurationMs
+  };
+}
+
+// src/panels/MessagesPanel.tsx
+import { useState } from "react";
+
+// src/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/panels/MessagesPanel.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function MessagesPanel({
+  timeline,
+  onToolCallClick,
+  systemPrompt
+}) {
+  const t = useLensTheme();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-fp-lens": "messages-panel",
+      style: {
+        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, onToolCallClick }, 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: "SYSTEM" }),
+              " ",
+              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,
+  onToolCallClick
+}) {
+  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) => /* @__PURE__ */ jsx(IterationBlock, { iter, onToolCallClick }, iter.index)),
+    turn.finalContent && turn.iterations.length > 0 && /* @__PURE__ */ jsxs("div", { style: { fontSize: 11, color: t.textSubtle, textAlign: "center" }, children: [
+      "turn ",
+      turn.index + 1,
+      " final \xB7 ",
+      turn.iterations.length,
+      " iter \xB7 ",
+      turn.totalInputTokens,
+      "\u2192",
+      turn.totalOutputTokens,
+      " tok \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: [
+          "Turn ",
+          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 IterationBlock({
+  iter,
+  onToolCallClick
+}) {
+  const t = useLensTheme();
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+    /* @__PURE__ */ jsx(IterationBadge, { iter }),
+    iter.assistantContent && /* @__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"
+        },
+        children: iter.assistantContent
+      }
+    ),
+    iter.toolCalls.length > 0 && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 6, paddingLeft: 12 }, children: iter.toolCalls.map((tc) => /* @__PURE__ */ jsx(ToolCallCard, { invocation: tc, onClick: onToolCallClick }, tc.id)) })
+  ] });
+}
+function IterationBadge({ iter }) {
+  const t = useLensTheme();
+  const bits = [`iter ${iter.index}`];
+  if (iter.model) bits.push(iter.model);
+  if (iter.inputTokens !== void 0)
+    bits.push(`${iter.inputTokens}\u2192${iter.outputTokens ?? "?"} tok`);
+  if (iter.durationMs !== void 0) bits.push(`${(iter.durationMs / 1e3).toFixed(2)}s`);
+  if (iter.stopReason) bits.push(iter.stopReason);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        alignSelf: "flex-start",
+        fontSize: 10,
+        color: t.textSubtle,
+        textTransform: "uppercase",
+        letterSpacing: "0.08em",
+        fontWeight: 600,
+        fontFamily: t.fontMono
+      },
+      children: bits.join(" \xB7 ")
+    }
+  );
+}
+function ToolCallCard({
+  invocation,
+  onClick
+}) {
+  const t = useLensTheme();
+  const [open, setOpen] = useState(false);
+  const preview = shortArgs(invocation.arguments);
+  const errored = invocation.error === true;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        border: `1px solid ${errored ? t.error : t.border}`,
+        borderLeft: `3px solid ${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,
+              fontFamily: t.fontMono
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { color: errored ? t.error : t.accent, fontWeight: 600 }, children: invocation.name }),
+              /* @__PURE__ */ jsxs("span", { style: { color: t.textMuted }, children: [
+                "(",
+                preview,
+                ")"
+              ] }),
+              /* @__PURE__ */ jsx("span", { style: { flex: 1 } }),
+              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,
+                    fontFamily: t.fontSans,
+                    fontWeight: 600,
+                    textTransform: "uppercase"
+                  },
+                  children: "decisionUpdate"
+                }
+              ),
+              /* @__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: "args" }),
+          /* @__PURE__ */ jsx(JsonBlock, { value: invocation.arguments }),
+          invocation.result && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Label, { t, style: { marginTop: 10 }, children: "result" }),
+            /* @__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
+              }
+            )
+          ] }),
+          invocation.decisionUpdate && Object.keys(invocation.decisionUpdate).length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Label, { t, style: { marginTop: 10 }, children: "decisionUpdate" }),
+            /* @__PURE__ */ jsx(JsonBlock, { value: invocation.decisionUpdate })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+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(", ");
+}
+
+// src/panels/IterationStrip.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function IterationStrip({ timeline, selectedKey, onSelect }) {
+  const t = useLensTheme();
+  const chips = timeline.turns.flatMap(
+    (turn) => turn.iterations.map((iter) => ({
+      key: `${turn.index}.${iter.index}`,
+      turn: turn.index + 1,
+      iter: iter.index,
+      label: chipLabel(iter),
+      tools: iter.toolCalls.length,
+      durationMs: iter.durationMs ?? 0,
+      stopReason: iter.stopReason
+    }))
+  );
+  return /* @__PURE__ */ jsxs2(
+    "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__ */ jsx2("span", { style: { color: t.textSubtle, fontSize: 11 }, children: "No iterations yet." }),
+        chips.map((c) => {
+          const active = c.key === selectedKey;
+          const isFinal = c.stopReason === "stop" || c.stopReason === "end_turn";
+          return /* @__PURE__ */ jsxs2(
+            "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 8px",
+                fontSize: 11,
+                fontFamily: "ui-monospace, monospace",
+                cursor: "pointer",
+                whiteSpace: "nowrap",
+                flexShrink: 0
+              },
+              title: `turn ${c.turn} \xB7 iter ${c.iter} \xB7 ${c.tools} tool call${c.tools === 1 ? "" : "s"}${c.stopReason ? ` \xB7 ${c.stopReason}` : ""}`,
+              children: [
+                "t",
+                c.turn,
+                ".i",
+                c.iter,
+                " \xB7 ",
+                c.label,
+                " ",
+                isFinal ? "\u2713" : ""
+              ]
+            },
+            c.key
+          );
+        })
+      ]
+    }
+  );
+}
+function chipLabel(iter) {
+  const d = iter.durationMs ?? 0;
+  const secs = d >= 1e3 ? `${(d / 1e3).toFixed(1)}s` : `${Math.round(d)}ms`;
+  const toolBit = iter.toolCalls.length > 0 ? `${iter.toolCalls.length}t` : "final";
+  return `${secs} \xB7 ${toolBit}`;
+}
+
+// src/panels/ToolCallInspector.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function ToolCallInspector({
+  timeline,
+  selectedId,
+  onSelect
+}) {
+  const t = useLensTheme();
+  return /* @__PURE__ */ jsxs3(
+    "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__ */ jsxs3(
+          "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: [
+              "Tool calls \xB7 ",
+              timeline.tools.length
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs3("div", { style: { overflow: "auto", flex: 1 }, children: [
+          timeline.tools.length === 0 && /* @__PURE__ */ jsx3("div", { style: { padding: 14, color: t.textSubtle, fontSize: 12 }, children: "No tool calls yet." }),
+          timeline.tools.map((tc) => {
+            const active = tc.id === selectedId;
+            const errored = tc.error === true;
+            return /* @__PURE__ */ jsxs3(
+              "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__ */ jsxs3(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        gap: 8,
+                        alignItems: "baseline",
+                        fontSize: 12,
+                        fontFamily: t.fontMono
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx3("span", { style: { color: errored ? t.error : t.accent, fontWeight: 600 }, children: tc.name }),
+                        /* @__PURE__ */ jsxs3(
+                          "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__ */ jsx3(
+                    "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/AgentLens.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function AgentLens({
+  runtimeSnapshot,
+  timeline: providedTimeline,
+  systemPrompt,
+  onToolCallClick
+}) {
+  const t = useLensTheme();
+  const timeline = useMemo(() => {
+    if (providedTimeline) return providedTimeline;
+    if (!runtimeSnapshot) return null;
+    return fromAgentSnapshot(runtimeSnapshot);
+  }, [providedTimeline, runtimeSnapshot]);
+  const [selectedToolId, setSelectedToolId] = useState2(null);
+  const [selectedIterKey, setSelectedIterKey] = useState2(null);
+  function handleToolClick(inv) {
+    setSelectedToolId(inv.id);
+    setSelectedIterKey(`${inv.turnIndex}.${inv.iterationIndex}`);
+    onToolCallClick?.(inv);
+  }
+  if (!timeline) {
+    return /* @__PURE__ */ jsxs4(
+      "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__ */ jsx4("code", { children: "runtimeSnapshot" }),
+          " after the agent runs."
+        ]
+      }
+    );
+  }
+  const derivedSystemPrompt = systemPrompt ?? (typeof timeline.rawSnapshot?.sharedState?.systemPrompt === "string" ? timeline.rawSnapshot.sharedState.systemPrompt : void 0);
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      "data-fp-lens": "shell",
+      style: {
+        display: "grid",
+        gridTemplateColumns: "1fr 320px",
+        gridTemplateRows: "auto 1fr",
+        gridTemplateAreas: '"strip strip" "messages inspector"',
+        height: "100%",
+        minHeight: 0,
+        background: t.bg,
+        color: t.text,
+        fontFamily: t.fontSans
+      },
+      children: [
+        /* @__PURE__ */ jsx4("div", { style: { gridArea: "strip" }, children: /* @__PURE__ */ jsx4(
+          IterationStrip,
+          {
+            timeline,
+            selectedKey: selectedIterKey,
+            onSelect: setSelectedIterKey
+          }
+        ) }),
+        /* @__PURE__ */ jsx4("div", { style: { gridArea: "messages", minHeight: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx4(
+          MessagesPanel,
+          {
+            timeline,
+            onToolCallClick: handleToolClick,
+            ...derivedSystemPrompt && { systemPrompt: derivedSystemPrompt }
+          }
+        ) }),
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            style: {
+              gridArea: "inspector",
+              minHeight: 0,
+              overflow: "hidden",
+              borderLeft: `1px solid ${t.border}`
+            },
+            children: /* @__PURE__ */ jsx4(
+              ToolCallInspector,
+              {
+                timeline,
+                selectedId: selectedToolId,
+                onSelect: handleToolClick
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  AgentLens,
+  IterationStrip,
+  MessagesPanel,
+  ToolCallInspector,
+  fromAgentSnapshot,
+  resolve as resolveLensTheme,
+  useLensTheme
+};
+//# sourceMappingURL=index.js.map