agentfootprint-lens 0.2.1 → 0.3.0

package/dist/index.cjs

@@ -193,8 +193,10 @@ function assembleTurns(messages, llmCalls, toolExecs, instructionEvals, toolReso
         ...tc,
         turnIndex: currentTurn.index
       }));
+      const msgsBefore = messages.indexOf(msg);
       const iteration = {
         index: iterIndex,
+        messagesSentCount: msgsBefore >= 0 ? msgsBefore : 0,
         ...call?.model && { model: call.model },
         ...call?.inputTokens !== void 0 && { inputTokens: call.inputTokens },
         ...call?.outputTokens !== void 0 && { outputTokens: call.outputTokens },
@@ -311,7 +313,15 @@ function MessagesPanel({
       },
       children: [
         systemPrompt && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SystemBubble, { text: systemPrompt }),
-        timeline.turns.map((turn) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TurnBlock, { turn, onToolCallClick }, turn.index))
+        timeline.turns.map((turn) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          TurnBlock,
+          {
+            turn,
+            allMessages: timeline.messages,
+            onToolCallClick
+          },
+          turn.index
+        ))
       ]
     }
   );
@@ -348,7 +358,7 @@ function SystemBubble({ text }) {
               font: "inherit"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "SYSTEM" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "How Neo is configured" }),
               " ",
               open ? "\u25BE" : "\u25B8",
               " ",
@@ -375,31 +385,34 @@ function SystemBubble({ text }) {
 }
 function TurnBlock({
   turn,
+  allMessages,
   onToolCallClick
 }) {
   const t = useLensTheme();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TurnHeader, { turn }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserBubble, { text: turn.userPrompt }),
-    turn.iterations.map((iter) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    turn.iterations.map((iter, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       IterationBlock,
       {
         iter,
+        iterPositionInTurn: i + 1,
         turnIndex: turn.index,
+        allMessages,
         onToolCallClick
       },
       iter.index
     )),
     turn.finalContent && turn.iterations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: 11, color: t.textSubtle, textAlign: "center" }, children: [
-      "turn ",
-      turn.index + 1,
-      " final \xB7 ",
+      "Answer compiled \xB7 ",
       turn.iterations.length,
-      " iter \xB7 ",
+      " step",
+      turn.iterations.length === 1 ? "" : "s",
+      " \xB7 ",
       turn.totalInputTokens,
       "\u2192",
       turn.totalOutputTokens,
-      " tok \xB7 ",
+      " tokens \xB7 ",
       (turn.totalDurationMs / 1e3).toFixed(1),
       "s"
     ] })
@@ -423,7 +436,7 @@ function TurnHeader({ turn }) {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flex: 1, height: 1, background: t.border } }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-          "Turn ",
+          "Your question ",
           turn.index + 1
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flex: 1, height: 1, background: t.border } })
@@ -449,13 +462,35 @@ function UserBubble({ text }) {
     }
   ) });
 }
+function iterationHeadline(iter) {
+  if (iter.toolCalls.length === 0) {
+    return "Neo is ready to answer";
+  }
+  if (iter.toolCalls.length === 1) {
+    const tc = iter.toolCalls[0];
+    if (tc.name === "list_skills") return "Neo is looking up available skills";
+    if (tc.name === "read_skill") {
+      const id = tc.arguments?.id ?? "?";
+      return `Neo activated the \u201C${id}\u201D skill`;
+    }
+    return `Neo called ${tc.name} to get data`;
+  }
+  const names = iter.toolCalls.map((tc) => tc.name);
+  if (names.length <= 3) return `Neo called ${names.join(", ")} in parallel`;
+  return `Neo gathered data from ${names.length} sources in parallel`;
+}
 function IterationBlock({
   iter,
+  iterPositionInTurn,
   turnIndex,
+  allMessages,
   onToolCallClick
 }) {
   const t = useLensTheme();
+  const [showContext, setShowContext] = (0, import_react.useState)(false);
   const key = `${turnIndex}.${iter.index}`;
+  const headline = iterationHeadline(iter);
+  const contextMessages = allMessages.slice(0, iter.messagesSentCount);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
@@ -466,9 +501,6 @@ function IterationBlock({
         display: "flex",
         flexDirection: "column",
         gap: 6,
-        // When the parent adds data-iter-selected (via IterationStrip
-        // click), pulse a soft ring using the accent color. Subtle so
-        // the chat itself stays readable.
         padding: 8,
         margin: -8,
         borderRadius: t.radius,
@@ -477,7 +509,63 @@ function IterationBlock({
         transition: "outline-color 180ms ease, background 180ms ease"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IterationBadge, { iter }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "baseline",
+              gap: 8,
+              fontSize: 13,
+              color: t.textMuted
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { color: t.accent, fontWeight: 600 }, children: [
+                "Step ",
+                iterPositionInTurn,
+                ":"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: t.text }, children: headline }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { flex: 1 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
         iter.assistantContent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
@@ -492,35 +580,103 @@ function IterationBlock({
             children: iter.assistantContent
           }
         ),
-        iter.toolCalls.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 6, paddingLeft: 12 }, children: iter.toolCalls.map((tc) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolCallCard, { invocation: tc, onClick: onToolCallClick }, tc.id)) })
+        iter.toolCalls.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 6, paddingLeft: 12 }, children: iter.toolCalls.map((tc) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolCallCard, { invocation: tc, onClick: onToolCallClick }, tc.id)) }),
+        showContext && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          ContextDrawer,
+          {
+            messagesSentCount: iter.messagesSentCount,
+            contextMessages,
+            iter
+          }
+        )
       ]
     }
   );
 }
-function IterationBadge({ iter }) {
+function ContextDrawer({
+  messagesSentCount,
+  contextMessages,
+  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__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       style: {
-        alignSelf: "flex-start",
-        fontSize: 10,
-        color: t.textSubtle,
-        textTransform: "uppercase",
-        letterSpacing: "0.08em",
-        fontWeight: 600,
-        fontFamily: t.fontMono
+        border: `1px dashed ${t.border}`,
+        borderRadius: t.radius,
+        padding: "10px 12px",
+        background: t.bg,
+        fontSize: 12,
+        color: t.textMuted
       },
-      children: bits.join(" \xB7 ")
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { style: { color: t.text, marginBottom: 8 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: t.textSubtle, fontStyle: "italic" }, children: "Just the system configuration \u2014 this is the first call of the conversation." }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { style: { margin: 0, paddingLeft: 18, display: "flex", flexDirection: "column", gap: 6 }, children: contextMessages.map((m, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { style: { fontSize: 12 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: t.textMuted }, children: summarizeMessage(m) })
+        ] }, i)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.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
@@ -529,6 +685,7 @@ function ToolCallCard({
   const [open, setOpen] = (0, import_react.useState)(false);
   const preview = shortArgs(invocation.arguments);
   const errored = invocation.error === true;
+  const friendlyVerb = toolVerb(invocation);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
@@ -553,12 +710,12 @@ function ToolCallCard({
               display: "flex",
               alignItems: "center",
               gap: 10,
-              fontSize: 12,
-              fontFamily: t.fontMono
+              fontSize: 12
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: errored ? t.error : t.accent, fontWeight: 600 }, children: invocation.name }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { color: t.textMuted }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: t.textMuted, fontFamily: t.fontSans }, children: friendlyVerb }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: errored ? t.error : t.accent, fontWeight: 600, fontFamily: t.fontMono }, children: invocation.name }),
+              preview && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { color: t.textMuted, fontFamily: t.fontMono }, children: [
                 "(",
                 preview,
                 ")"
@@ -573,11 +730,11 @@ function ToolCallCard({
                     borderRadius: 3,
                     background: `color-mix(in srgb, ${t.warning} 20%, transparent)`,
                     color: t.warning,
-                    fontFamily: t.fontSans,
                     fontWeight: 600,
                     textTransform: "uppercase"
                   },
-                  children: "decisionUpdate"
+                  title: "This tool changed what skill is active",
+                  children: "skill change"
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: t.textSubtle }, children: open ? "\u25BE" : "\u25B8" })
@@ -585,10 +742,10 @@ function ToolCallCard({
           }
         ),
         open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: "8px 12px", borderTop: `1px solid ${t.border}` }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { t, children: "args" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { t, children: "What Neo asked for" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(JsonBlock, { value: invocation.arguments }),
           invocation.result && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { t, style: { marginTop: 10 }, children: "result" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { t, style: { marginTop: 10 }, children: "What the tool returned" }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "pre",
               {
@@ -609,7 +766,7 @@ function ToolCallCard({
             )
           ] }),
           invocation.decisionUpdate && Object.keys(invocation.decisionUpdate).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { t, style: { marginTop: 10 }, children: "decisionUpdate" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { t, style: { marginTop: 10 }, children: "What changed in Neo's state" }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(JsonBlock, { value: invocation.decisionUpdate })
           ] })
         ] })
@@ -617,6 +774,11 @@ function ToolCallCard({
     }
   );
 }
+function toolVerb(inv) {
+  if (inv.name === "list_skills") return "Asked for";
+  if (inv.name === "read_skill") return "Activated";
+  return "Called";
+}
 function Label({
   t,
   children,
@@ -673,14 +835,14 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 function IterationStrip({ timeline, selectedKey, onSelect }) {
   const t = useLensTheme();
   const chips = timeline.turns.flatMap(
-    (turn) => turn.iterations.map((iter) => ({
+    (turn) => turn.iterations.map((iter, stepIdx) => ({
       key: `${turn.index}.${iter.index}`,
       turn: turn.index + 1,
-      iter: iter.index,
-      label: chipLabel(iter),
-      tools: iter.toolCalls.length,
+      step: stepIdx + 1,
+      label: stepHeadline(iter),
       durationMs: iter.durationMs ?? 0,
-      stopReason: iter.stopReason
+      stopReason: iter.stopReason,
+      toolCount: iter.toolCalls.length
     }))
   );
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
@@ -699,7 +861,8 @@ function IterationStrip({ timeline, selectedKey, onSelect }) {
         chips.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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";
+          const isFinal = c.toolCount === 0;
+          const secs = c.durationMs >= 1e3 ? `${(c.durationMs / 1e3).toFixed(1)}s` : `${Math.round(c.durationMs)}ms`;
           return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
             "button",
             {
@@ -709,23 +872,27 @@ function IterationStrip({ timeline, selectedKey, onSelect }) {
                 color: active ? "#fff" : t.textMuted,
                 border: `1px solid ${active ? t.accent : t.border}`,
                 borderRadius: 4,
-                padding: "4px 8px",
+                padding: "4px 10px",
                 fontSize: 11,
-                fontFamily: "ui-monospace, monospace",
+                fontFamily: t.fontSans,
                 cursor: "pointer",
                 whiteSpace: "nowrap",
-                flexShrink: 0
+                flexShrink: 0,
+                maxWidth: 280,
+                overflow: "hidden",
+                textOverflow: "ellipsis"
               },
-              title: `turn ${c.turn} \xB7 iter ${c.iter} \xB7 ${c.tools} tool call${c.tools === 1 ? "" : "s"}${c.stopReason ? ` \xB7 ${c.stopReason}` : ""}`,
+              title: `Question ${c.turn} \xB7 Step ${c.step} \xB7 ${secs}${c.stopReason ? ` \xB7 stop: ${c.stopReason}` : ""}`,
               children: [
-                "t",
-                c.turn,
-                ".i",
-                c.iter,
-                " \xB7 ",
-                c.label,
-                " ",
-                isFinal ? "\u2713" : ""
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { fontWeight: 600 }, children: [
+                  "Step ",
+                  c.step
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { opacity: 0.85 }, children: [
+                  " \xB7 ",
+                  c.label
+                ] }),
+                isFinal && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { marginLeft: 6 }, children: "\u2713" })
               ]
             },
             c.key
@@ -735,11 +902,21 @@ function IterationStrip({ timeline, selectedKey, onSelect }) {
     }
   );
 }
-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}`;
+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";
+    }
+    return `Called ${tc.name}`;
+  }
+  if (iter.toolCalls.length <= 3) {
+    return `Called ${iter.toolCalls.map((tc) => tc.name).join(", ")}`;
+  }
+  return `Called ${iter.toolCalls.length} tools in parallel`;
 }
 
 // src/panels/ToolCallInspector.tsx
@@ -778,13 +955,13 @@ function ToolCallInspector({
               background: t.bgElev
             },
             children: [
-              "Tool calls \xB7 ",
+              "Every tool Neo called \xB7 ",
               timeline.tools.length
             ]
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { overflow: "auto", flex: 1 }, children: [
-          timeline.tools.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { padding: 14, color: t.textSubtle, fontSize: 12 }, children: "No tool calls yet." }),
+          timeline.tools.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { padding: 14, color: t.textSubtle, fontSize: 12 }, children: "Neo hasn't called any tools yet." }),
           timeline.tools.map((tc) => {
             const active = tc.id === selectedId;
             const errored = tc.error === true;
@@ -1054,7 +1231,10 @@ var LiveTimelineBuilder = class {
       toolCalls: [],
       decisionAtStart: {},
       visibleTools: [],
-      startMs: Date.now()
+      startMs: Date.now(),
+      // Freeze the message count here so "What Neo saw" can reproduce
+      // the context window at this exact iteration later.
+      messagesSentCount: this.messages.length
     };
     this.currentTurn.iterations.push(this.currentIter);
   }