@tanstack/ai-devtools-core 0.5.10 → 0.5.11

package/dist/Shell/{2X67PB7B.js → DCUFLPG6.js}

@@ -1,4 +1,4 @@
-import { createComponent, ssr, ssrAttribute, escape, ssrStyleProperty, ssrElement, mergeProps, Portal } from 'solid-js/web';
+import { createComponent, ssr, ssrAttribute, escape, ssrStyleProperty, ssrElement, mergeProps, Portal, ssrStyle } from 'solid-js/web';
 import { createContext, createSignal, onMount, onCleanup, createEffect, createMemo, Show, For, useContext, batch, Index, Switch, Match } from 'solid-js';
 import { ThemeContextProvider, MainPanel, Header, HeaderLogo, useTheme, JsonTree } from '@tanstack/devtools-ui';
 import { emitAIDevtoolsEvent, createAIDevtoolsEventEnvelope, aiEventClient } from '@tanstack/ai-event-client';
@@ -3951,6 +3951,7 @@ var stylesFactory = (theme) => {
         grid-template-columns: repeat(2, minmax(320px, 1fr));
         gap: ${size[3]};
         align-items: start;
+        padding-left: ${size[3]};
         padding-right: ${size[3]};
         @media (max-width: 760px) {
           grid-template-columns: 1fr;
@@ -4344,12 +4345,6 @@ function applyHookEvent(state, eventName, event) {
     markHookViewed(state, state.activeHookId);
   }
 }
-function setActiveHook(state, hookId) {
-  state.activeHookId = hookId;
-  if (hookId) {
-    markHookViewed(state, hookId);
-  }
-}
 function clearHookRegistry(state) {
   state.hooks = {};
   state.runs = {};
@@ -4480,8 +4475,8 @@ function removeHookRecord(state, hookId) {
       delete state.runs[runId];
     }
   }
-  for (const eventId2 of hookEventIds) {
-    delete state.events[eventId2];
+  for (const eventId3 of hookEventIds) {
+    delete state.events[eventId3];
   }
   delete state.hooks[hookId];
   delete state.seenHookActivityCounts[hookId];
@@ -4489,7 +4484,7 @@ function removeHookRecord(state, hookId) {
     state.activeHookId = null;
   }
 }
-function upsertRun(state, event, eventId2) {
+function upsertRun(state, event, eventId3) {
   const existing = state.runs[event.runId];
   if (!existing) {
     state.runs[event.runId] = {
@@ -4503,7 +4498,7 @@ function upsertRun(state, event, eventId2) {
       updatedAt: event.timestamp,
       ...isTerminalRunStatus(event.status) ? { completedAt: event.timestamp } : {},
       ...event.error ? { error: event.error } : {},
-      eventIds: [eventId2]
+      eventIds: [eventId3]
     };
     return;
   }
@@ -4519,8 +4514,8 @@ function upsertRun(state, event, eventId2) {
   if (event.error) {
     existing.error = event.error;
   }
-  if (!existing.eventIds.includes(eventId2)) {
-    existing.eventIds.push(eventId2);
+  if (!existing.eventIds.includes(eventId3)) {
+    existing.eventIds.push(eventId3);
   }
 }
 function attachRunToHook(state, hookId, runId) {
@@ -4528,7 +4523,7 @@ function attachRunToHook(state, hookId, runId) {
   if (!hook || hook.runIds.includes(runId)) return;
   hook.runIds.push(runId);
 }
-function syncRunsFromSnapshot(state, snapshot, eventId2) {
+function syncRunsFromSnapshot(state, snapshot, eventId3) {
   const rawRuns = snapshot.state.runs;
   if (!Array.isArray(rawRuns)) return;
   for (const candidate of rawRuns) {
@@ -4551,7 +4546,7 @@ function syncRunsFromSnapshot(state, snapshot, eventId2) {
         updatedAt,
         ...typeof run.completedAt === "number" ? { completedAt: run.completedAt } : isTerminalRunStatus(status) ? { completedAt: updatedAt } : {},
         ...typeof run.error === "string" ? { error: run.error } : {},
-        eventIds: [eventId2]
+        eventIds: [eventId3]
       };
     } else {
       existing.hookId = snapshot.hookId;
@@ -4563,8 +4558,8 @@ function syncRunsFromSnapshot(state, snapshot, eventId2) {
         existing.completedAt = updatedAt;
       }
       if (typeof run.error === "string") existing.error = run.error;
-      if (!existing.eventIds.includes(eventId2)) {
-        existing.eventIds.push(eventId2);
+      if (!existing.eventIds.includes(eventId3)) {
+        existing.eventIds.push(eventId3);
       }
     }
     attachRunToHook(state, snapshot.hookId, run.id);
@@ -4594,11 +4589,11 @@ function attachActivityRunToHook(state, hookId, runId) {
   if (!hook || hook.activityRunIds.includes(runId)) return;
   hook.activityRunIds.push(runId);
 }
-function attachEventToHook(state, hookId, eventId2) {
+function attachEventToHook(state, hookId, eventId3) {
   if (!hookId) return;
   const hook = state.hooks[hookId];
-  if (!hook || hook.eventIds.includes(eventId2)) return;
-  hook.eventIds.push(eventId2);
+  if (!hook || hook.eventIds.includes(eventId3)) return;
+  hook.eventIds.push(eventId3);
 }
 function inferLifecycleFromSnapshot(state) {
   if (state.status === "error" || state.error) {
@@ -4741,6 +4736,62 @@ function clearMemoryRegistry(state) {
   state.scopes = {};
 }
 
+// src/store/compaction-registry.ts
+var MAX_EVENTS = 50;
+function createCompactionRegistryState() {
+  return { events: [] };
+}
+function eventId2(kind, event) {
+  return [
+    "cmp",
+    kind,
+    String(event.timestamp),
+    event.hookId ?? event.clientId ?? event.threadId ?? "unknown",
+    String(event.before ?? event.after ?? "")
+  ].join("-");
+}
+function applyCompactionEvent(state, kind, event) {
+  state.events.push({
+    id: event.eventId ?? eventId2(kind, event),
+    kind,
+    timestamp: event.timestamp,
+    hookId: event.hookId,
+    clientId: event.clientId,
+    threadId: event.threadId,
+    runId: event.runId,
+    before: event.before,
+    after: event.after,
+    messagesBefore: event.messagesBefore,
+    messagesAfter: event.messagesAfter,
+    reusedCheckpoint: event.reusedCheckpoint,
+    maxTokens: event.maxTokens,
+    strategyKey: event.strategyKey,
+    durationMs: event.durationMs,
+    dropped: event.dropped,
+    result: event.result
+  });
+  if (state.events.length > MAX_EVENTS) {
+    state.events.splice(0, state.events.length - MAX_EVENTS);
+  }
+}
+function clearCompactionRegistry(state) {
+  state.events = [];
+}
+function compactionEventsForHook(state, hook) {
+  const matched = state.events.filter((event) => {
+    if (event.hookId && event.hookId === hook.id) return true;
+    if (event.clientId && hook.clientId && event.clientId === hook.clientId) {
+      return true;
+    }
+    if (event.threadId && hook.threadId && event.threadId === hook.threadId) {
+      return true;
+    }
+    return false;
+  });
+  if (matched.length > 0) return matched;
+  return state.events;
+}
+
 // src/store/skills-registry.ts
 function createSkillsRegistryState() {
   return { snapshots: {} };
@@ -4774,6 +4825,7 @@ var AIProvider = (props) => {
     activeConversationId: null,
     hooks: createHookRegistryState(),
     memory: createMemoryRegistryState(),
+    compaction: createCompactionRegistryState(),
     skills: createSkillsRegistryState()
   });
   const streamToConversation = /* @__PURE__ */ new Map();
@@ -5031,15 +5083,23 @@ var AIProvider = (props) => {
       clearMemoryRegistry(memory);
     }));
   }
+  function clearCompaction() {
+    setState("compaction", produce((compaction) => {
+      clearCompactionRegistry(compaction);
+    }));
+  }
   function clearSkills() {
     setState("skills", produce((skills) => {
       clearSkillsRegistry(skills);
     }));
   }
   function selectHook(id) {
-    setState("hooks", produce((hooks) => {
-      setActiveHook(hooks, id);
-    }));
+    setState("hooks", "activeHookId", id);
+    if (id) {
+      setState("hooks", produce((hooks) => {
+        markHookViewed(hooks, id);
+      }));
+    }
   }
   function saveToolFixture(fixture) {
     const fixtures = mergeFixtures(fixture, state.hooks.fixtures);
@@ -6547,6 +6607,48 @@ var AIProvider = (props) => {
         arr.push(mwEvent);
       }));
     }));
+    const recordCompactionLifecycle = (kind, hookName, payload) => {
+      setState("compaction", produce((compaction) => {
+        applyCompactionEvent(compaction, kind, payload);
+      }));
+      const {
+        requestId,
+        streamId,
+        clientId
+      } = payload;
+      const conversationId = (clientId && state.conversations[clientId] ? clientId : void 0) || (streamId ? streamToConversation.get(streamId) : void 0) || (requestId ? requestToConversation.get(requestId) : void 0);
+      if (!conversationId || !state.conversations[conversationId]) return;
+      const conv = state.conversations[conversationId];
+      const iterIndex = findLatestIterationIndex(conv, requestId);
+      if (iterIndex < 0) return;
+      const mwEvent = {
+        id: `mw-cmp-${kind}-${Date.now()}-${Math.random()}`,
+        middlewareName: "compaction",
+        hookName,
+        timestamp: payload.timestamp,
+        hasTransform: kind === "state",
+        configChanges: {
+          before: payload.before,
+          after: payload.after,
+          messagesBefore: payload.messagesBefore,
+          messagesAfter: payload.messagesAfter,
+          reusedCheckpoint: payload.reusedCheckpoint,
+          maxTokens: payload.maxTokens,
+          strategyKey: payload.strategyKey,
+          durationMs: payload.durationMs
+        }
+      };
+      setState("conversations", conversationId, "iterations", iterIndex, "middlewareEvents", produce((arr) => {
+        arr.push(mwEvent);
+      }));
+    };
+    cleanupFns.push(aiEventClient.on("compaction:started", (e) => {
+      recordCompactionLifecycle("started", "onCompactStart", e.payload);
+    }), aiEventClient.on("compaction:state", (e) => {
+      recordCompactionLifecycle("state", "onCompact", e.payload);
+    }), aiEventClient.on("compaction:ended", (e) => {
+      recordCompactionLifecycle("ended", "onCompactEnd", e.payload);
+    }));
     cleanupFns.push(aiEventClient.on("summarize:request:started", (e) => {
       const {
         requestId,
@@ -6940,6 +7042,7 @@ var AIProvider = (props) => {
     selectConversation,
     clearHooks,
     clearMemory,
+    clearCompaction,
     clearSkills,
     selectHook,
     saveToolFixture,
@@ -7209,7 +7312,7 @@ var formatDuration = (ms) => {
 };
 var _tmpl$10 = ["<span", ">", "ms</span>"];
 var _tmpl$22 = ["<span", ">", "</span>"];
-var _tmpl$32 = ["<div", '><span class="', '">Middleware</span><span class="', '">', "</span><span", ">", "</span>", "", "", "</div>"];
+var _tmpl$32 = ["<div", ' style="', '"><span class="', '">Middleware</span><span class="', '">', "</span><span", ">", "</span>", "", "", "</div>"];
 var _tmpl$42 = ["<div", ">", "</div>"];
 var _tmpl$52 = ['<span class="', '">Thinking</span>'];
 var _tmpl$62 = ['<span class="', '">Structured</span>'];
@@ -7337,6 +7440,9 @@ var MiddlewareStep = (props) => {
     if (ev().wasDropped) return "DROP";
     if (ev().hookName === "onChunk" && ev().hasTransform) return "TRANSFORM";
     if (ev().hookName === "onConfig" && ev().hasTransform) return "TRANSFORM";
+    if (ev().hookName === "onCompactStart") return "START";
+    if (ev().hookName === "onCompact") return "COMPACT";
+    if (ev().hookName === "onCompactEnd") return "END";
     if (ev().hookName === "onBeforeToolCall" && ev().hasTransform) return "DECISION";
     return null;
   };
@@ -7344,7 +7450,9 @@ var MiddlewareStep = (props) => {
     const changes = ev().configChanges;
     return changes && Object.keys(changes).length > 0;
   };
-  return [ssr(_tmpl$32, ssrAttribute("class", escape(s().step, true), false), `${escape(s().stepPrefix, true)} ${escape(s().stepPrefixMiddleware, true)}`, `${escape(s().mwBadge, true)} ${escape(badgeClass(), true)}`, escape(ev().middlewareName), ssrAttribute("class", escape(s().mwHook, true), false), escape(ev().hookName), escape(createComponent(Show, {
+  return [ssr(_tmpl$32, ssrAttribute("class", escape(s().step, true), false), ssrStyle(hasChanges() ? {
+    cursor: "pointer"
+  } : void 0), `${escape(s().stepPrefix, true)} ${escape(s().stepPrefixMiddleware, true)}`, `${escape(s().mwBadge, true)} ${escape(badgeClass(), true)}`, escape(ev().middlewareName), ssrAttribute("class", escape(s().mwHook, true), false), escape(ev().hookName), escape(createComponent(Show, {
     get when() {
       return ev().duration !== void 0;
     },
@@ -9418,13 +9526,191 @@ var MemoryPanel = () => {
     })))]
   })));
 };
-var _tmpl$41 = ["<ul", ">", "</ul>"];
-var _tmpl$214 = ["<div", "><div", ">Catalog</div>", "</div>"];
-var _tmpl$312 = ["<div", ' data-testid="ai-devtools-skills-panel">', "</div>"];
-var _tmpl$47 = ["<div", ">No skills on this run. Add `withSkills(...)` to `chat()` and the catalog will appear here. A skill lights up when the model calls `load_skill`.</div>"];
-var _tmpl$57 = ["<div", ">Loaded via `load_skill`, but the catalog snapshot has not arrived yet.</div>"];
-var _tmpl$67 = ["<span", ">loaded</span>"];
-var _tmpl$77 = ["<li", "><span", ">", "</span>", "<span", ">", "</span></li>"];
+var _tmpl$41 = ["<div", "><div", ">", "", "</div><div", ">", "</div></div>"];
+var _tmpl$214 = ["<div", ">", "</div>"];
+var _tmpl$312 = ["<div", "><div", ">", " (", ")</div>", "</div>"];
+var _tmpl$47 = ["<span", ">", " \u2192 ", " tok</span>"];
+var _tmpl$57 = ["<span", ">", "ms</span>"];
+var _tmpl$67 = ["<span", ">checkpoint</span>"];
+var _tmpl$77 = ["<div", ' data-testid="ai-devtools-compaction-event"', ' style="', '"><span class="', '">', '</span><span class="', '">', "</span><span", ">", "</span>", "", "", "<span", ">", '</span><span class="', '">\u25B6</span></div>'];
+var _tmpl$87 = ["<div", ">", "", "</div>"];
+var _tmpl$97 = ["<div", "><span", ">", " event", '</span><button type="button"', ">Clear</button></div>"];
+var _tmpl$06 = ["<div", ' data-testid="ai-devtools-compaction-panel">', "</div>"];
+var _tmpl$116 = ["<div", ">No compaction yet. When the transcript passes maxTokens, each compact appears here.</div>"];
+function formatTime3(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  return date.toLocaleTimeString();
+}
+function shortStrategy(event) {
+  const key = event.strategyKey;
+  if (!key) return event.reusedCheckpoint ? "checkpoint" : "compaction";
+  const cut = key.indexOf(":maxTokens=");
+  return cut === -1 ? key : key.slice(0, cut);
+}
+var PreviewMessage = (props) => {
+  const styles = useStyles();
+  return ssr(_tmpl$41, ssrAttribute("class", escape(styles().hookDetails.message, true), false), ssrAttribute("class", escape(styles().hookDetails.messageRole, true), false), escape(props.preview.role), escape(createComponent(Show, {
+    get when() {
+      return props.preview.tokens > 0;
+    },
+    get children() {
+      return ` \xB7 ${props.preview.tokens} tok`;
+    }
+  })), ssrAttribute("class", escape(styles().hookDetails.messageContent, true), false), escape(props.preview.text));
+};
+var PreviewColumn = (props) => {
+  const styles = useStyles();
+  const s = () => styles().iterationTimeline;
+  return ssr(_tmpl$312, ssrAttribute("class", escape(s().stepJsonItem, true), false), ssrAttribute("class", escape(s().stepJsonItemLabel, true), false), escape(props.title), escape(props.previews.length), escape(createComponent(Show, {
+    get when() {
+      return props.previews.length > 0;
+    },
+    get fallback() {
+      return ssr(_tmpl$214, ssrAttribute("class", escape(styles().hookDetails.emptySmall, true), false), escape(props.empty));
+    },
+    get children() {
+      return ssr(_tmpl$214, ssrAttribute("class", escape(styles().memoryPanel.list, true), false), escape(createComponent(For, {
+        get each() {
+          return props.previews;
+        },
+        children: (preview) => createComponent(PreviewMessage, {
+          preview
+        })
+      })));
+    }
+  })));
+};
+function kindLabel(kind) {
+  if (kind === "started") return "Started";
+  if (kind === "ended") return "Ended";
+  return "State";
+}
+var CompactEvent = (props) => {
+  const styles = useStyles();
+  const s = () => styles().iterationTimeline;
+  const [expanded, setExpanded] = createSignal(props.defaultOpen === true);
+  const event = () => props.event;
+  const isState = () => event().kind === "state";
+  const stats = () => ({
+    kind: event().kind,
+    before: event().before,
+    after: event().after,
+    messagesBefore: event().messagesBefore,
+    messagesAfter: event().messagesAfter,
+    maxTokens: event().maxTokens,
+    strategyKey: event().strategyKey,
+    reusedCheckpoint: event().reusedCheckpoint,
+    durationMs: event().durationMs
+  });
+  const countLabel = () => {
+    if (event().kind === "started") {
+      return `${event().messagesBefore ?? 0} msgs \xB7 ${event().before ?? 0} tok`;
+    }
+    if (event().kind === "ended") {
+      return `${event().messagesAfter ?? 0} msgs \xB7 ${event().after ?? 0} tok`;
+    }
+    return `${event().messagesBefore ?? 0} \u2192 ${event().messagesAfter ?? 0} msgs`;
+  };
+  return [ssr(_tmpl$77, ssrAttribute("class", escape(s().step, true), false), ssrAttribute("data-kind", escape(event().kind, true), false), ssrStyleProperty("cursor:", "pointer"), `${escape(s().stepPrefix, true)} ${escape(s().stepPrefixMiddleware, true)}`, escape(kindLabel(event().kind)), `${escape(s().mwBadge, true)} ${escape(s().mwBadgeTransform, true)}`, escape(shortStrategy(event())), ssrAttribute("class", escape(s().mwHook, true), false), escape(countLabel()), escape(createComponent(Show, {
+    get when() {
+      return event().kind === "state";
+    },
+    get children() {
+      return ssr(_tmpl$47, ssrAttribute("class", escape(s().stepDuration, true), false), escape(event().before), escape(event().after));
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return event().durationMs !== void 0;
+    },
+    get children() {
+      return ssr(_tmpl$57, ssrAttribute("class", escape(s().stepDuration, true), false), escape(event().durationMs));
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return event().reusedCheckpoint;
+    },
+    get children() {
+      return ssr(_tmpl$67, ssrAttribute("class", escape(s().mwSuffix, true), false));
+    }
+  })), ssrAttribute("class", escape(s().stepDuration, true), false), escape(formatTime3(event().timestamp)), `${escape(s().chevron, true)} ${expanded() ? escape(s().chevronOpen, true) : ""}`), createComponent(Show, {
+    get when() {
+      return expanded();
+    },
+    get children() {
+      return [ssr(_tmpl$214, ssrAttribute("class", escape(s().mwChangesContainer, true), false), escape(createComponent(JsonTree, {
+        get value() {
+          return stats();
+        },
+        defaultExpansionDepth: 1,
+        copyable: true
+      }))), createComponent(Show, {
+        get when() {
+          return isState();
+        },
+        get children() {
+          return ssr(_tmpl$87, ssrAttribute("class", escape(s().stepJsonItemsCompare, true), false), escape(createComponent(PreviewColumn, {
+            title: "Dropped",
+            get previews() {
+              return event().dropped ?? [];
+            },
+            empty: "Nothing was dropped."
+          })), escape(createComponent(PreviewColumn, {
+            title: "Sent to model",
+            get previews() {
+              return event().result ?? [];
+            },
+            empty: "No compacted transcript on this event."
+          })));
+        }
+      })];
+    }
+  })];
+};
+var CompactionPanel = (props) => {
+  const {
+    state,
+    clearCompaction
+  } = useAIStore();
+  const styles = useStyles();
+  const s = () => styles().iterationTimeline;
+  const events = createMemo(() => compactionEventsForHook(state.compaction, props.hook));
+  const lastStateIndex = createMemo(() => {
+    const list = events();
+    for (let i = list.length - 1; i >= 0; i--) {
+      if (list[i]?.kind === "state") return i;
+    }
+    return -1;
+  });
+  return ssr(_tmpl$06, ssrAttribute("class", escape(styles().memoryPanel.container, true), false), escape(createComponent(Show, {
+    get when() {
+      return events().length > 0;
+    },
+    get fallback() {
+      return ssr(_tmpl$116, ssrAttribute("class", escape(styles().hookDetails.emptySmall, true), false));
+    },
+    get children() {
+      return [ssr(_tmpl$97, ssrAttribute("class", escape(styles().memoryPanel.toolbar, true), false), ssrAttribute("class", escape(styles().memoryPanel.badge, true), false), escape(events().length), events().length === 1 ? "" : "s", ssrAttribute("class", escape(styles().memoryPanel.clearButton, true), false)), ssr(_tmpl$214, ssrAttribute("class", escape(s().iterCard, true), false), escape(createComponent(For, {
+        get each() {
+          return events();
+        },
+        children: (event, index) => createComponent(CompactEvent, {
+          event,
+          get defaultOpen() {
+            return event.kind === "state" && index() === lastStateIndex();
+          }
+        })
+      })))];
+    }
+  })));
+};
+var _tmpl$48 = ["<ul", ">", "</ul>"];
+var _tmpl$215 = ["<div", "><div", ">Catalog</div>", "</div>"];
+var _tmpl$313 = ["<div", ' data-testid="ai-devtools-skills-panel">', "</div>"];
+var _tmpl$49 = ["<div", ">No skills on this run. Add `withSkills(...)` to `chat()` and the catalog will appear here. A skill lights up when the model calls `load_skill`.</div>"];
+var _tmpl$58 = ["<div", ">Loaded via `load_skill`, but the catalog snapshot has not arrived yet.</div>"];
+var _tmpl$68 = ["<span", ">loaded</span>"];
+var _tmpl$78 = ["<li", "><span", ">", "</span>", "<span", ">", "</span></li>"];
 function parseSkillName(argumentsJson) {
   if (!argumentsJson) return void 0;
   try {
@@ -9481,34 +9767,34 @@ var SkillsPanel = () => {
     return fromSnap;
   });
   const catalog = createMemo(() => snapshot()?.catalog ?? []);
-  return ssr(_tmpl$312, ssrAttribute("class", escape(styles().memoryPanel.container, true), false), escape(createComponent(Show, {
+  return ssr(_tmpl$313, ssrAttribute("class", escape(styles().memoryPanel.container, true), false), escape(createComponent(Show, {
     get when() {
       return catalog().length > 0 || loaded().size > 0;
     },
     get fallback() {
-      return ssr(_tmpl$47, ssrAttribute("class", escape(styles().memoryPanel.empty, true), false));
+      return ssr(_tmpl$49, ssrAttribute("class", escape(styles().memoryPanel.empty, true), false));
     },
     get children() {
-      return ssr(_tmpl$214, ssrAttribute("class", escape(styles().memoryPanel.section, true), false), ssrAttribute("class", escape(styles().memoryPanel.sectionTitle, true), false), escape(createComponent(Show, {
+      return ssr(_tmpl$215, ssrAttribute("class", escape(styles().memoryPanel.section, true), false), ssrAttribute("class", escape(styles().memoryPanel.sectionTitle, true), false), escape(createComponent(Show, {
         get when() {
           return catalog().length > 0;
         },
         get fallback() {
-          return ssr(_tmpl$57, ssrAttribute("class", escape(styles().memoryPanel.sectionEmpty, true), false));
+          return ssr(_tmpl$58, ssrAttribute("class", escape(styles().memoryPanel.sectionEmpty, true), false));
         },
         get children() {
-          return ssr(_tmpl$41, ssrAttribute("class", escape(styles().memoryPanel.list, true), false), escape(createComponent(For, {
+          return ssr(_tmpl$48, ssrAttribute("class", escape(styles().memoryPanel.list, true), false), escape(createComponent(For, {
             get each() {
               return catalog();
             },
             children: (skill) => {
               const isLoaded = () => loaded().has(skill.name);
-              return ssr(_tmpl$77, ssrAttribute("class", escape(styles().memoryPanel.row, true), false), ssrAttribute("class", escape(styles().memoryPanel.badge, true), false), escape(skill.name), escape(createComponent(Show, {
+              return ssr(_tmpl$78, ssrAttribute("class", escape(styles().memoryPanel.row, true), false), ssrAttribute("class", escape(styles().memoryPanel.badge, true), false), escape(skill.name), escape(createComponent(Show, {
                 get when() {
                   return isLoaded();
                 },
                 get children() {
-                  return ssr(_tmpl$67, ssrAttribute("class", escape(styles().memoryPanel.badge, true), false));
+                  return ssr(_tmpl$68, ssrAttribute("class", escape(styles().memoryPanel.badge, true), false));
                 }
               })), ssrAttribute("class", escape(styles().memoryPanel.sectionEmpty, true), false), escape(skill.description));
             }
@@ -9520,19 +9806,19 @@ var SkillsPanel = () => {
 };
 
 // src/components/hooks/HookDetails.tsx
-var _tmpl$48 = ["<aside", ' data-testid="ai-devtools-preview-pane"><div', ">", "</div>", "</aside>"];
-var _tmpl$215 = ["<div", ' data-testid="ai-devtools-hook-detail">', "<nav", ' data-testid="ai-devtools-hook-tabs">', "", "", "", '</nav><div class="', '"><main', ' data-testid="ai-devtools-primary-pane">', "", "", "", "", "</main>", "</div></div>"];
-var _tmpl$313 = ["<div", ' data-testid="ai-devtools-dashboard-overview"><header', "><div><div", ">Hooks Dashboard</div><div", ">Select a hook from the left or open one of the active hooks below.</div></div></header><div", ">", "", "", "", "", "", "", "", "</div><div", ">", "</div></div>"];
-var _tmpl$49 = ["<div", ">Open a page with TanStack AI hooks to inspect live state.</div>"];
-var _tmpl$58 = ["<section", ' data-testid="ai-devtools-overview-category"', "><div", "><span>", "</span><span>", "</span></div>", "</section>"];
-var _tmpl$68 = ["<span", ">running</span>"];
-var _tmpl$78 = ["<span", ">", " new</span>"];
-var _tmpl$87 = ['<button type="button" data-testid="ai-devtools-overview-hook"', "><div", "><span", ">", "</span><span", ">", "</span></div><div", "><span", ">", "</span>", "", "</div></button>"];
-var _tmpl$97 = ["<div", "><span", ">", "</span><span", ">", "</span></div>"];
-var _tmpl$06 = ["<span", ">", "</span>"];
-var _tmpl$116 = ['<span data-testid="ai-devtools-hook-technical-name">', "</span>"];
+var _tmpl$50 = ["<aside", ' data-testid="ai-devtools-preview-pane"><div', ">", "</div>", "</aside>"];
+var _tmpl$216 = ["<div", ' data-testid="ai-devtools-hook-detail">', "<nav", ' data-testid="ai-devtools-hook-tabs">', "", "", "", '</nav><div class="', '"><main', ' data-testid="ai-devtools-primary-pane">', "", "", "", "", "", "</main>", "</div></div>"];
+var _tmpl$314 = ["<div", ' data-testid="ai-devtools-dashboard-overview"><header', "><div><div", ">Hooks Dashboard</div><div", ">Select a hook from the left or open one of the active hooks below.</div></div></header><div", ">", "", "", "", "", "", "", "", "</div><div", ">", "</div></div>"];
+var _tmpl$410 = ["<div", ">Open a page with TanStack AI hooks to inspect live state.</div>"];
+var _tmpl$59 = ["<section", ' data-testid="ai-devtools-overview-category"', "><div", "><span>", "</span><span>", "</span></div>", "</section>"];
+var _tmpl$69 = ["<span", ">running</span>"];
+var _tmpl$79 = ["<span", ">", " new</span>"];
+var _tmpl$88 = ['<button type="button" data-testid="ai-devtools-overview-hook"', "><div", "><span", ">", "</span><span", ">", "</span></div><div", "><span", ">", "</span>", "", "</div></button>"];
+var _tmpl$98 = ["<div", "><span", ">", "</span><span", ">", "</span></div>"];
+var _tmpl$07 = ["<span", ">", "</span>"];
+var _tmpl$117 = ['<span data-testid="ai-devtools-hook-technical-name">', "</span>"];
 var _tmpl$106 = ['<span data-testid="ai-devtools-hook-registry-id">id ', "</span>"];
-var _tmpl$117 = ["<span>", "</span>"];
+var _tmpl$118 = ["<span>", "</span>"];
 var _tmpl$125 = ["<header", ' data-testid="ai-devtools-hook-header"', "><div", "><div", "><span", ' data-testid="ai-devtools-hook-title">', "</span><span", ">", "</span>", "</div><div", ">", '<span data-testid="ai-devtools-hook-identity">', "</span>", "", "</div></div><div", ">", "", "</div></header>"];
 var _tmpl$135 = ['<button type="button" data-testid="ai-devtools-hook-tab"', ' class="', '">', "</button>"];
 var _tmpl$144 = ["<div", "><section", "><div", ">Current State</div>", "</section></div>"];
@@ -9542,7 +9828,7 @@ var _tmpl$174 = ["<div", ">", "</div>"];
 var _tmpl$183 = ["<div", '><button type="button"', ' data-testid="ai-devtools-preview-save-tool-call">Save</button><button type="button"', ' data-testid="ai-devtools-preview-replay-tool-call">Replay</button></div>'];
 var _tmpl$193 = ['<div class="', '">', "</div>"];
 var _tmpl$202 = ["<div", "><span", ">", "</span><div", ">", "</div></div>"];
-var _tmpl$216 = ["<div", ">No messages yet. Start a conversation to see messages here.</div>"];
+var _tmpl$217 = ["<div", ">No messages yet. Start a conversation to see messages here.</div>"];
 var _tmpl$223 = ["<div", ' data-testid="ai-devtools-tools"><div', ">", "</div><div", ">", "</div></div>"];
 var _tmpl$232 = ["<div", ">No tools.</div>"];
 var _tmpl$242 = ["<span", ">approval</span>"];
@@ -9582,7 +9868,7 @@ var HookDetails = () => {
     return Boolean(outputKind && outputKind !== "chat" && outputKind !== "structured");
   });
   createEffect(() => {
-    if (isGenerationHook() && (activeTab() === "tools" || activeTab() === "memory" || activeTab() === "skills")) {
+    if (isGenerationHook() && (activeTab() === "tools" || activeTab() === "memory" || activeTab() === "compaction" || activeTab() === "skills")) {
       setActiveTab("conversation");
     }
   });
@@ -9615,13 +9901,14 @@ var HookDetails = () => {
       return createComponent(HookOverview, {
         onSelectHook: (selectedHook) => {
           selectHook(selectedHook.id);
-          if (state.conversations[selectedHook.id]) {
-            selectConversation(selectedHook.id);
+          const conversationId = selectedHook.id || selectedHook.clientId || selectedHook.threadId;
+          if (conversationId && state.conversations[conversationId]) {
+            selectConversation(conversationId);
           }
         }
       });
     },
-    children: (activeHook) => ssr(_tmpl$215, ssrAttribute("class", escape(styles().hookDetails.container, true), false), escape(createComponent(HookHeader, {
+    children: (activeHook) => ssr(_tmpl$216, ssrAttribute("class", escape(styles().hookDetails.container, true), false), escape(createComponent(HookHeader, {
       get hook() {
         return activeHook();
       },
@@ -9679,6 +9966,13 @@ var HookDetails = () => {
             return activeTab();
           },
           onSelect: setActiveTab
+        }), createComponent(TabButton, {
+          label: "Compaction",
+          tab: "compaction",
+          get activeTab() {
+            return activeTab();
+          },
+          onSelect: setActiveTab
         }), createComponent(TabButton, {
           label: "Skills",
           tab: "skills",
@@ -9755,6 +10049,17 @@ var HookDetails = () => {
       get children() {
         return createComponent(MemoryPanel, {});
       }
+    })), escape(createComponent(Show, {
+      get when() {
+        return activeTab() === "compaction";
+      },
+      get children() {
+        return createComponent(CompactionPanel, {
+          get hook() {
+            return activeHook();
+          }
+        });
+      }
     })), escape(createComponent(Show, {
       get when() {
         return activeTab() === "skills";
@@ -9767,7 +10072,7 @@ var HookDetails = () => {
         return showSecondaryPane();
       },
       get children() {
-        return ssr(_tmpl$48, ssrAttribute("class", escape(styles().hookDetails.previewPane, true), false), ssrAttribute("class", escape(styles().hookDetails.previewHeader, true), false), isGenerationHook() ? "Generated Output" : "User View", escape(createComponent(Show, {
+        return ssr(_tmpl$50, ssrAttribute("class", escape(styles().hookDetails.previewPane, true), false), ssrAttribute("class", escape(styles().hookDetails.previewHeader, true), false), isGenerationHook() ? "Generated Output" : "User View", escape(createComponent(Show, {
           get when() {
             return isGenerationHook();
           },
@@ -9815,10 +10120,10 @@ var HookOverview = (props) => {
       return hooks().length > 0;
     },
     get fallback() {
-      return ssr(_tmpl$49, ssrAttribute("class", escape(styles().hookDetails.empty, true), false));
+      return ssr(_tmpl$410, ssrAttribute("class", escape(styles().hookDetails.empty, true), false));
     },
     get children() {
-      return ssr(_tmpl$313, ssrAttribute("class", escape(styles().hookDetails.overview, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewHeader, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewTitle, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewSubtitle, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewMetricGrid, true), false), escape(createComponent(OverviewMetric, {
+      return ssr(_tmpl$314, ssrAttribute("class", escape(styles().hookDetails.overview, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewHeader, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewTitle, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewSubtitle, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewMetricGrid, true), false), escape(createComponent(OverviewMetric, {
         label: "active hooks",
         get value() {
           return summary().active;
@@ -9862,26 +10167,26 @@ var HookOverview = (props) => {
         get each() {
           return groups();
         },
-        children: (group) => ssr(_tmpl$58, ssrAttribute("class", escape(styles().hookDetails.overviewGroupCard, true), false), ssrAttribute("data-category", escape(group.id, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewGroupHeader, true), false), escape(group.label), escape(group.hooks.length), escape(createComponent(For, {
+        children: (group) => ssr(_tmpl$59, ssrAttribute("class", escape(styles().hookDetails.overviewGroupCard, true), false), ssrAttribute("data-category", escape(group.id, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewGroupHeader, true), false), escape(group.label), escape(group.hooks.length), escape(createComponent(For, {
           get each() {
             return group.hooks;
           },
           children: (hook) => {
             const running = createMemo(() => isHookRunning(hook, state.hooks.runs));
             const unseenCount = createMemo(() => getHookUnseenEventCount(state.hooks, hook.id));
-            return ssr(_tmpl$87, ssrAttribute("data-hook-id", escape(hook.id, true), false) + ssrAttribute("data-hook-name", escape(hook.hookName, true), false) + ssrAttribute("data-display-name", escape(getHookDisplayName(hook), true), false) + ssrAttribute("class", escape(styles().hookDetails.overviewHookButton, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewHookMain, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewHookTitle, true), false), escape(getHookDisplayName(hook)), ssrAttribute("class", escape(styles().hookDetails.overviewHookId, true), false), escape(getHookIdentitySubtitle(hook)), ssrAttribute("class", escape(styles().hookDetails.overviewHookMeta, true), false), ssrAttribute("class", escape(styles().hookDetails.kind, true), false), escape(hook.outputKind) ?? "hook", escape(createComponent(Show, {
+            return ssr(_tmpl$88, ssrAttribute("data-hook-id", escape(hook.id, true), false) + ssrAttribute("data-hook-name", escape(hook.hookName, true), false) + ssrAttribute("data-display-name", escape(getHookDisplayName(hook), true), false) + ssrAttribute("class", escape(styles().hookDetails.overviewHookButton, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewHookMain, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewHookTitle, true), false), escape(getHookDisplayName(hook)), ssrAttribute("class", escape(styles().hookDetails.overviewHookId, true), false), escape(getHookIdentitySubtitle(hook)), ssrAttribute("class", escape(styles().hookDetails.overviewHookMeta, true), false), ssrAttribute("class", escape(styles().hookDetails.kind, true), false), escape(hook.outputKind) ?? "hook", escape(createComponent(Show, {
               get when() {
                 return running();
               },
               get children() {
-                return ssr(_tmpl$68, ssrAttribute("class", escape(styles().hookDetails.lifecycle, true), false));
+                return ssr(_tmpl$69, ssrAttribute("class", escape(styles().hookDetails.lifecycle, true), false));
               }
             })), escape(createComponent(Show, {
               get when() {
                 return unseenCount() > 0;
               },
               get children() {
-                return ssr(_tmpl$78, ssrAttribute("class", escape(styles().hookDetails.kind, true), false), escape(unseenCount()));
+                return ssr(_tmpl$79, ssrAttribute("class", escape(styles().hookDetails.kind, true), false), escape(unseenCount()));
               }
             })));
           }
@@ -9892,7 +10197,7 @@ var HookOverview = (props) => {
 };
 var OverviewMetric = (props) => {
   const styles = useStyles();
-  return ssr(_tmpl$97, ssrAttribute("class", escape(styles().hookDetails.overviewMetricCard, true), false), ssrAttribute("class", escape(styles().hookDetails.metricValue, true), false), escape(props.value), ssrAttribute("class", escape(styles().hookDetails.metricLabel, true), false), escape(props.label));
+  return ssr(_tmpl$98, ssrAttribute("class", escape(styles().hookDetails.overviewMetricCard, true), false), ssrAttribute("class", escape(styles().hookDetails.metricValue, true), false), escape(props.value), ssrAttribute("class", escape(styles().hookDetails.metricLabel, true), false), escape(props.label));
 };
 var HookHeader = (props) => {
   const styles = useStyles();
@@ -9901,14 +10206,14 @@ var HookHeader = (props) => {
       return props.hook.outputKind;
     },
     get children() {
-      return ssr(_tmpl$06, ssrAttribute("class", escape(styles().hookDetails.kind, true), false), escape(props.hook.outputKind));
+      return ssr(_tmpl$07, ssrAttribute("class", escape(styles().hookDetails.kind, true), false), escape(props.hook.outputKind));
     }
   })), ssrAttribute("class", escape(styles().hookDetails.identity, true), false), escape(createComponent(Show, {
     get when() {
       return props.hook.displayName;
     },
     get children() {
-      return ssr(_tmpl$116, escape(props.hook.hookName));
+      return ssr(_tmpl$117, escape(props.hook.hookName));
     }
   })), props.hook.threadId ? `thread ${escape(props.hook.threadId)}` : escape(getHookIdentityLabel(props.hook)), escape(createComponent(Show, {
     get when() {
@@ -9922,7 +10227,7 @@ var HookHeader = (props) => {
       return props.hook.framework;
     },
     get children() {
-      return ssr(_tmpl$117, escape(props.hook.framework));
+      return ssr(_tmpl$118, escape(props.hook.framework));
     }
   })), ssrAttribute("class", escape(styles().hookDetails.metrics, true), false), escape(createComponent(Metric, {
     label: "runs",
@@ -9959,7 +10264,7 @@ var HookHeader = (props) => {
 };
 var Metric = (props) => {
   const styles = useStyles();
-  return ssr(_tmpl$97, ssrAttribute("class", escape(styles().hookDetails.metric, true), false) + ssrAttribute("data-testid", props.testId ? `ai-devtools-hook-metric-${escape(props.testId, true)}` : escape(void 0, true), false), ssrAttribute("class", escape(styles().hookDetails.metricValue, true), false), escape(props.value), ssrAttribute("class", escape(styles().hookDetails.metricLabel, true), false), escape(props.label));
+  return ssr(_tmpl$98, ssrAttribute("class", escape(styles().hookDetails.metric, true), false) + ssrAttribute("data-testid", props.testId ? `ai-devtools-hook-metric-${escape(props.testId, true)}` : escape(void 0, true), false), ssrAttribute("class", escape(styles().hookDetails.metricValue, true), false), escape(props.value), ssrAttribute("class", escape(styles().hookDetails.metricLabel, true), false), escape(props.label));
 };
 function formatMetricValue(value) {
   return Intl.NumberFormat(void 0, {
@@ -10129,7 +10434,7 @@ var MessagesPreview = (props) => {
               get ["data-part-kind"]() {
                 return part.kind;
               }
-            }), [ssr(_tmpl$06, ssrAttribute("class", escape(styles().hookDetails.previewPartLabel, true), false), escape(part.label)), escape(createComponent(Show, {
+            }), [ssr(_tmpl$07, ssrAttribute("class", escape(styles().hookDetails.previewPartLabel, true), false), escape(part.label)), escape(createComponent(Show, {
               get when() {
                 return part.fixture;
               },
@@ -10141,7 +10446,7 @@ var MessagesPreview = (props) => {
                 return part.jsonItems?.length;
               },
               get fallback() {
-                return ssr(_tmpl$06, ssrAttribute("class", escape(styles().hookDetails.previewPartContent, true), false), escape(part.content));
+                return ssr(_tmpl$07, ssrAttribute("class", escape(styles().hookDetails.previewPartContent, true), false), escape(part.content));
               },
               get children() {
                 return ssr(_tmpl$193, `${escape(styles().hookDetails.previewJsonItems, true)} ${part.kind === "structured-output" ? escape(styles().hookDetails.previewJsonItemsCompare, true) : ""}`, escape(createComponent(For, {
@@ -10171,7 +10476,7 @@ var HookMessageTimeline = (props) => {
       return props.messages.length > 0;
     },
     get fallback() {
-      return ssr(_tmpl$216, ssrAttribute("class", escape(styles().hookDetails.emptySmall, true), false));
+      return ssr(_tmpl$217, ssrAttribute("class", escape(styles().hookDetails.emptySmall, true), false));
     },
     get children() {
       return ssr(_tmpl$174, ssrAttribute("class", escape(styles().hookDetails.messageTimeline, true), false), escape(createComponent(For, {
@@ -10216,12 +10521,12 @@ var HookMessageTimeline = (props) => {
             get ["data-part-kind"]() {
               return part.kind;
             }
-          }), [ssr(_tmpl$06, ssrAttribute("class", escape(styles().hookDetails.previewPartLabel, true), false), escape(part.label)), escape(createComponent(Show, {
+          }), [ssr(_tmpl$07, ssrAttribute("class", escape(styles().hookDetails.previewPartLabel, true), false), escape(part.label)), escape(createComponent(Show, {
             get when() {
               return part.jsonItems?.length;
             },
             get fallback() {
-              return ssr(_tmpl$06, ssrAttribute("class", escape(styles().hookDetails.previewPartContent, true), false), escape(part.content));
+              return ssr(_tmpl$07, ssrAttribute("class", escape(styles().hookDetails.previewPartContent, true), false), escape(part.content));
             },
             get children() {
               return ssr(_tmpl$193, `${escape(styles().hookDetails.previewJsonItems, true)} ${part.kind === "structured-output" ? escape(styles().hookDetails.previewJsonItemsCompare, true) : ""}`, escape(createComponent(For, {
@@ -10302,7 +10607,7 @@ var ToolsView = (props) => {
           get each() {
             return savedFixtures();
           },
-          children: (fixture) => ssr(_tmpl$292, ssrAttribute("class", escape(styles().hookDetails.fixtureRow, true), false), ssrAttribute("data-fixture-name", escape(fixture.name, true) ?? escape(fixture.toolName, true), false) + ssrAttribute("data-tool-name", escape(fixture.toolName, true), false), ssrAttribute("class", escape(styles().hookDetails.fixtureInfo, true), false), ssrAttribute("class", escape(styles().hookDetails.fixtureName, true), false), escape(fixture.name) ?? escape(fixture.toolName), ssrAttribute("class", escape(styles().hookDetails.fixtureMeta, true), false), escape(fixture.toolName), escape(formatTime3(fixture.createdAt)), ssrAttribute("class", escape(styles().hookDetails.fixtureRowActions, true), false), ssrAttribute("class", escape(styles().hookDetails.fixtureRowButton, true), false), `${escape(styles().hookDetails.fixtureRowButton, true)} ${escape(styles().hookDetails.fixtureDangerButton, true)}`)
+          children: (fixture) => ssr(_tmpl$292, ssrAttribute("class", escape(styles().hookDetails.fixtureRow, true), false), ssrAttribute("data-fixture-name", escape(fixture.name, true) ?? escape(fixture.toolName, true), false) + ssrAttribute("data-tool-name", escape(fixture.toolName, true), false), ssrAttribute("class", escape(styles().hookDetails.fixtureInfo, true), false), ssrAttribute("class", escape(styles().hookDetails.fixtureName, true), false), escape(fixture.name) ?? escape(fixture.toolName), ssrAttribute("class", escape(styles().hookDetails.fixtureMeta, true), false), escape(fixture.toolName), escape(formatTime4(fixture.createdAt)), ssrAttribute("class", escape(styles().hookDetails.fixtureRowActions, true), false), ssrAttribute("class", escape(styles().hookDetails.fixtureRowButton, true), false), `${escape(styles().hookDetails.fixtureRowButton, true)} ${escape(styles().hookDetails.fixtureDangerButton, true)}`)
         })));
       }
     })]
@@ -10649,12 +10954,12 @@ function jsonSafeValue(value) {
     return `[ai-devtools] unserializable value: ${error instanceof Error ? error.message : String(error)}`;
   }
 }
-function formatTime3(timestamp) {
+function formatTime4(timestamp) {
   return new Date(timestamp).toLocaleTimeString();
 }
 
 // src/components/Shell.tsx
-var _tmpl$50 = ["<div", ' data-testid="ai-devtools-panel">', "<div", "><div", ' data-testid="ai-devtools-left-panel" style="', '"><div', ">AI Hooks</div>", '</div><div class="', '"></div><div', ' data-testid="ai-devtools-right-panel" style="', '">', "</div></div></div>"];
+var _tmpl$51 = ["<div", ' data-testid="ai-devtools-panel">', "<div", "><div", ' data-testid="ai-devtools-left-panel" style="', '"><div', ">AI Hooks</div>", '</div><div class="', '"></div><div', ' data-testid="ai-devtools-right-panel" style="', '">', "</div></div></div>"];
 function Devtools(props) {
   return createComponent(ThemeContextProvider, {
     get theme() {
@@ -10727,7 +11032,7 @@ function DevtoolsContent() {
   });
   return createComponent(MainPanel, {
     get children() {
-      return ssr(_tmpl$50, ssrAttribute("class", escape(styles().shellRoot, true), false), escape(createComponent(Header, {
+      return ssr(_tmpl$51, ssrAttribute("class", escape(styles().shellRoot, true), false), escape(createComponent(Header, {
         get children() {
           return createComponent(HeaderLogo, {
             flavor: {