@tanstack/ai-devtools-core 0.5.9 → 0.5.11

package/dist/{Shell/WD22ACIB.js → production/Shell/JT2B6WKX.js}

@@ -1,4 +1,4 @@
-import { delegateEvents, createComponent, insert, effect, className, setStyleProperty, addEventListener, setAttribute, use, memo, spread, mergeProps, template, Portal } from 'solid-js/web';
+import { delegateEvents, createComponent, insert, effect, className, setStyleProperty, addEventListener, setAttribute, use, memo, spread, mergeProps, template, Portal, style } 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';
@@ -1999,7 +1999,6 @@ var stylesFactory = (theme) => {
         border: 1px solid ${t(colors.gray[200], colors.darkGray[600])};
         border-radius: ${border.radius.sm};
         background: ${t(colors.white, colors.darkGray[900])};
-        min-height: 260px;
         max-height: 420px;
         overflow: auto;
         padding: ${size[2]} ${size[2]} ${size[2]} ${size[5]};
@@ -2874,7 +2873,7 @@ var stylesFactory = (theme) => {
         gap: ${size[3]};
         align-items: start;
         & > * {
-          min-height: 280px;
+          max-height: 420px;
           border: 1px solid oklch(0.28 0.03 260);
           border-radius: 6px;
           background: oklch(0.18 0.02 260);
@@ -3935,7 +3934,6 @@ var stylesFactory = (theme) => {
       `,
       stepJsonPanel: css2`
         margin: ${size[1.5]} ${size[3]};
-        min-height: 280px;
         max-height: 520px;
         overflow: auto;
         padding: ${size[2]} ${size[2]} ${size[2]} ${size[5]};
@@ -3953,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;
@@ -4354,12 +4353,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 = {};
@@ -4511,8 +4504,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];
@@ -4520,7 +4513,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] = {
@@ -4534,7 +4527,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;
   }
@@ -4550,8 +4543,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) {
@@ -4559,7 +4552,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) {
@@ -4585,7 +4578,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;
@@ -4597,8 +4590,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);
@@ -4628,11 +4621,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) {
@@ -4775,6 +4768,80 @@ 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: {} };
+}
+function clearSkillsRegistry(state) {
+  state.snapshots = {};
+}
+function applySkillsSnapshot(state, payload) {
+  const key = payload.hookId && payload.hookId.length > 0 ? payload.hookId : "_default";
+  const catalog = Array.isArray(payload.catalog) ? payload.catalog : [];
+  const activated = Array.isArray(payload.activated) ? payload.activated : [];
+  state.snapshots[key] = {
+    catalog,
+    activated,
+    updatedAt: payload.timestamp ?? Date.now()
+  };
+}
+
 // src/store/ai-context.tsx
 var AIContext = createContext();
 function useAIStore() {
@@ -4789,7 +4856,9 @@ var AIProvider = (props) => {
     conversations: {},
     activeConversationId: null,
     hooks: createHookRegistryState(),
-    memory: createMemoryRegistryState()
+    memory: createMemoryRegistryState(),
+    compaction: createCompactionRegistryState(),
+    skills: createSkillsRegistryState()
   });
   const streamToConversation = /* @__PURE__ */ new Map();
   const requestToConversation = /* @__PURE__ */ new Map();
@@ -5046,11 +5115,24 @@ var AIProvider = (props) => {
       clearMemoryRegistry(memory);
     }));
   }
-  function selectHook(id) {
-    setState("hooks", produce((hooks) => {
-      setActiveHook(hooks, id);
+  function clearCompaction() {
+    setState("compaction", produce((compaction) => {
+      clearCompactionRegistry(compaction);
     }));
   }
+  function clearSkills() {
+    setState("skills", produce((skills) => {
+      clearSkillsRegistry(skills);
+    }));
+  }
+  function selectHook(id) {
+    setState("hooks", "activeHookId", id);
+    if (id) {
+      setState("hooks", produce((hooks) => {
+        markHookViewed(hooks, id);
+      }));
+    }
+  }
   function saveToolFixture(fixture) {
     const fixtures = mergeFixtures(fixture, state.hooks.fixtures);
     setState("hooks", produce((hooks) => {
@@ -5376,6 +5458,10 @@ var AIProvider = (props) => {
       setState("memory", produce((memory) => {
         applyMemorySnapshot(memory, e.payload);
       }));
+    }), aiEventClient.on("skills:snapshot", (e) => {
+      setState("skills", produce((skills) => {
+        applySkillsSnapshot(skills, e.payload);
+      }));
     }));
     const recordRunEvent = (eventName, payload) => {
       setState("hooks", produce((hooks) => {
@@ -6559,6 +6645,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,
@@ -6952,6 +7080,8 @@ var AIProvider = (props) => {
     selectConversation,
     clearHooks,
     clearMemory,
+    clearCompaction,
+    clearSkills,
     selectHook,
     saveToolFixture,
     deleteToolFixture,
@@ -7086,8 +7216,9 @@ var HookDashboard = () => {
   const unseenUpdateCount = createMemo(() => hooks().reduce((count, hook) => count + getHookUnseenEventCount(state.hooks, hook.id), 0));
   const handleSelect = (hook) => {
     selectHook(hook.id);
-    if (state.conversations[hook.id]) {
-      selectConversation(hook.id);
+    const conversationId = hook.id || hook.clientId || hook.threadId;
+    if (conversationId && state.conversations[conversationId]) {
+      selectConversation(conversationId);
     }
   };
   return (() => {
@@ -7563,6 +7694,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;
   };
@@ -7572,6 +7706,9 @@ var MiddlewareStep = (props) => {
   };
   return [(() => {
     var _el$ = _tmpl$32(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
+    _el$.$$click = () => {
+      if (hasChanges()) setExpanded(!expanded());
+    };
     insert(_el$3, () => ev().middlewareName);
     insert(_el$4, () => ev().hookName);
     insert(_el$, createComponent(Show, {
@@ -7602,24 +7739,27 @@ var MiddlewareStep = (props) => {
       },
       get children() {
         var _el$8 = _tmpl$22();
-        _el$8.$$click = () => setExpanded(!expanded());
         insert(_el$8, () => expanded() ? "hide changes" : "show changes");
         effect(() => className(_el$8, s().stepExpandToggle));
         return _el$8;
       }
     }), null);
     effect((_p$) => {
-      var _v$ = s().step, _v$2 = `${s().stepPrefix} ${s().stepPrefixMiddleware}`, _v$3 = `${s().mwBadge} ${badgeClass()}`, _v$4 = s().mwHook;
+      var _v$ = s().step, _v$2 = hasChanges() ? {
+        cursor: "pointer"
+      } : void 0, _v$3 = `${s().stepPrefix} ${s().stepPrefixMiddleware}`, _v$4 = `${s().mwBadge} ${badgeClass()}`, _v$5 = s().mwHook;
       _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
-      _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
-      _v$4 !== _p$.o && className(_el$4, _p$.o = _v$4);
+      _p$.t = style(_el$, _v$2, _p$.t);
+      _v$3 !== _p$.a && className(_el$2, _p$.a = _v$3);
+      _v$4 !== _p$.o && className(_el$3, _p$.o = _v$4);
+      _v$5 !== _p$.i && className(_el$4, _p$.i = _v$5);
       return _p$;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
-      o: void 0
+      o: void 0,
+      i: void 0
     });
     return _el$;
   })(), createComponent(Show, {
@@ -7675,9 +7815,9 @@ var ThinkingStep = (props) => {
       }
     }), null);
     effect((_p$) => {
-      var _v$5 = `${s().stepPrefix} ${s().stepPrefixThinking}`, _v$6 = s().stepContent;
-      _v$5 !== _p$.e && className(_el$1, _p$.e = _v$5);
-      _v$6 !== _p$.t && className(_el$10, _p$.t = _v$6);
+      var _v$6 = `${s().stepPrefix} ${s().stepPrefixThinking}`, _v$7 = s().stepContent;
+      _v$6 !== _p$.e && className(_el$1, _p$.e = _v$6);
+      _v$7 !== _p$.t && className(_el$10, _p$.t = _v$7);
       return _p$;
     }, {
       e: void 0,
@@ -7731,10 +7871,10 @@ var StructuredOutputStep = (props) => {
     }), false, true);
     insert(_el$15, () => part().status);
     effect((_p$) => {
-      var _v$7 = `${s().stepPrefix} ${s().stepPrefixAssistant}`, _v$8 = `${s().mwBadge} ${badgeClass()}`, _v$9 = `${s().chevron} ${expanded() ? s().chevronOpen : ""}`;
-      _v$7 !== _p$.e && className(_el$14, _p$.e = _v$7);
-      _v$8 !== _p$.t && className(_el$15, _p$.t = _v$8);
-      _v$9 !== _p$.a && className(_el$16, _p$.a = _v$9);
+      var _v$8 = `${s().stepPrefix} ${s().stepPrefixAssistant}`, _v$9 = `${s().mwBadge} ${badgeClass()}`, _v$0 = `${s().chevron} ${expanded() ? s().chevronOpen : ""}`;
+      _v$8 !== _p$.e && className(_el$14, _p$.e = _v$8);
+      _v$9 !== _p$.t && className(_el$15, _p$.t = _v$9);
+      _v$0 !== _p$.a && className(_el$16, _p$.a = _v$0);
       return _p$;
     }, {
       e: void 0,
@@ -7759,10 +7899,10 @@ var StructuredOutputStep = (props) => {
           copyable: true
         }));
         effect((_p$) => {
-          var _v$10 = s().stepJsonItem, _v$11 = s().stepJsonItemLabel, _v$12 = s().stepJsonPanel;
-          _v$10 !== _p$.e && className(_el$19, _p$.e = _v$10);
-          _v$11 !== _p$.t && className(_el$20, _p$.t = _v$11);
-          _v$12 !== _p$.a && className(_el$21, _p$.a = _v$12);
+          var _v$11 = s().stepJsonItem, _v$12 = s().stepJsonItemLabel, _v$13 = s().stepJsonPanel;
+          _v$11 !== _p$.e && className(_el$19, _p$.e = _v$11);
+          _v$12 !== _p$.t && className(_el$20, _p$.t = _v$12);
+          _v$13 !== _p$.a && className(_el$21, _p$.a = _v$13);
           return _p$;
         }, {
           e: void 0,
@@ -7773,9 +7913,9 @@ var StructuredOutputStep = (props) => {
       })()
     }));
     effect((_p$) => {
-      var _v$0 = `${s().cardBody} ${expanded() ? s().cardBodyOpen : ""}`, _v$1 = `${s().cardBodyInner} ${s().stepJsonItemsCompare}`;
-      _v$0 !== _p$.e && className(_el$17, _p$.e = _v$0);
-      _v$1 !== _p$.t && className(_el$18, _p$.t = _v$1);
+      var _v$1 = `${s().cardBody} ${expanded() ? s().cardBodyOpen : ""}`, _v$10 = `${s().cardBodyInner} ${s().stepJsonItemsCompare}`;
+      _v$1 !== _p$.e && className(_el$17, _p$.e = _v$1);
+      _v$10 !== _p$.t && className(_el$18, _p$.t = _v$10);
       return _p$;
     }, {
       e: void 0,
@@ -7824,9 +7964,9 @@ var AssistantStep = (props) => {
       }
     }), null);
     effect((_p$) => {
-      var _v$13 = `${s().stepPrefix} ${s().stepPrefixAssistant}`, _v$14 = isLong() ? s().stepContentLong : s().stepContent;
-      _v$13 !== _p$.e && className(_el$23, _p$.e = _v$13);
-      _v$14 !== _p$.t && className(_el$24, _p$.t = _v$14);
+      var _v$14 = `${s().stepPrefix} ${s().stepPrefixAssistant}`, _v$15 = isLong() ? s().stepContentLong : s().stepContent;
+      _v$14 !== _p$.e && className(_el$23, _p$.e = _v$14);
+      _v$15 !== _p$.t && className(_el$24, _p$.t = _v$15);
       return _p$;
     }, {
       e: void 0,
@@ -7917,10 +8057,10 @@ var ToolCallStep = (props) => {
       }
     }), _el$32);
     effect((_p$) => {
-      var _v$15 = `${s().stepPrefix} ${s().stepPrefixToolCall}`, _v$16 = `${s().mwBadge} ${s().mwBadgeToolCall}`, _v$17 = `${s().chevron} ${argsOpen() ? s().chevronOpen : ""}`;
-      _v$15 !== _p$.e && className(_el$28, _p$.e = _v$15);
-      _v$16 !== _p$.t && className(_el$29, _p$.t = _v$16);
-      _v$17 !== _p$.a && className(_el$32, _p$.a = _v$17);
+      var _v$16 = `${s().stepPrefix} ${s().stepPrefixToolCall}`, _v$17 = `${s().mwBadge} ${s().mwBadgeToolCall}`, _v$18 = `${s().chevron} ${argsOpen() ? s().chevronOpen : ""}`;
+      _v$16 !== _p$.e && className(_el$28, _p$.e = _v$16);
+      _v$17 !== _p$.t && className(_el$29, _p$.t = _v$17);
+      _v$18 !== _p$.a && className(_el$32, _p$.a = _v$18);
       return _p$;
     }, {
       e: void 0,
@@ -7938,10 +8078,10 @@ var ToolCallStep = (props) => {
       copyable: true
     }));
     effect((_p$) => {
-      var _v$18 = `${s().cardBody} ${argsOpen() ? s().cardBodyOpen : ""}`, _v$19 = s().cardBodyInner, _v$20 = s().stepJsonPanel;
-      _v$18 !== _p$.e && className(_el$33, _p$.e = _v$18);
-      _v$19 !== _p$.t && className(_el$34, _p$.t = _v$19);
-      _v$20 !== _p$.a && className(_el$35, _p$.a = _v$20);
+      var _v$19 = `${s().cardBody} ${argsOpen() ? s().cardBodyOpen : ""}`, _v$20 = s().cardBodyInner, _v$21 = s().stepJsonPanel;
+      _v$19 !== _p$.e && className(_el$33, _p$.e = _v$19);
+      _v$20 !== _p$.t && className(_el$34, _p$.t = _v$20);
+      _v$21 !== _p$.a && className(_el$35, _p$.a = _v$21);
       return _p$;
     }, {
       e: void 0,
@@ -7987,10 +8127,10 @@ var ToolCallStep = (props) => {
           }
         }), _el$41);
         effect((_p$) => {
-          var _v$21 = `${s().stepPrefix} ${s().stepPrefixToolResult}`, _v$22 = `${s().mwBadge} ${s().mwBadgeToolResult}`, _v$23 = `${s().chevron} ${resultOpen() ? s().chevronOpen : ""}`;
-          _v$21 !== _p$.e && className(_el$37, _p$.e = _v$21);
-          _v$22 !== _p$.t && className(_el$38, _p$.t = _v$22);
-          _v$23 !== _p$.a && className(_el$41, _p$.a = _v$23);
+          var _v$22 = `${s().stepPrefix} ${s().stepPrefixToolResult}`, _v$23 = `${s().mwBadge} ${s().mwBadgeToolResult}`, _v$24 = `${s().chevron} ${resultOpen() ? s().chevronOpen : ""}`;
+          _v$22 !== _p$.e && className(_el$37, _p$.e = _v$22);
+          _v$23 !== _p$.t && className(_el$38, _p$.t = _v$23);
+          _v$24 !== _p$.a && className(_el$41, _p$.a = _v$24);
           return _p$;
         }, {
           e: void 0,
@@ -8008,10 +8148,10 @@ var ToolCallStep = (props) => {
           copyable: true
         }));
         effect((_p$) => {
-          var _v$24 = `${s().cardBody} ${resultOpen() ? s().cardBodyOpen : ""}`, _v$25 = s().cardBodyInner, _v$26 = s().stepJsonPanel;
-          _v$24 !== _p$.e && className(_el$42, _p$.e = _v$24);
-          _v$25 !== _p$.t && className(_el$43, _p$.t = _v$25);
-          _v$26 !== _p$.a && className(_el$44, _p$.a = _v$26);
+          var _v$25 = `${s().cardBody} ${resultOpen() ? s().cardBodyOpen : ""}`, _v$26 = s().cardBodyInner, _v$27 = s().stepJsonPanel;
+          _v$25 !== _p$.e && className(_el$42, _p$.e = _v$25);
+          _v$26 !== _p$.t && className(_el$43, _p$.t = _v$26);
+          _v$27 !== _p$.a && className(_el$44, _p$.a = _v$27);
           return _p$;
         }, {
           e: void 0,
@@ -8051,9 +8191,9 @@ var ToolResultStep = (props) => {
       }
     }), false, true);
     effect((_p$) => {
-      var _v$27 = `${s().stepPrefix} ${s().stepPrefixToolResult}`, _v$28 = `${s().chevron} ${isOpen() ? s().chevronOpen : ""}`;
-      _v$27 !== _p$.e && className(_el$47, _p$.e = _v$27);
-      _v$28 !== _p$.t && className(_el$48, _p$.t = _v$28);
+      var _v$28 = `${s().stepPrefix} ${s().stepPrefixToolResult}`, _v$29 = `${s().chevron} ${isOpen() ? s().chevronOpen : ""}`;
+      _v$28 !== _p$.e && className(_el$47, _p$.e = _v$28);
+      _v$29 !== _p$.t && className(_el$48, _p$.t = _v$29);
       return _p$;
     }, {
       e: void 0,
@@ -8070,10 +8210,10 @@ var ToolResultStep = (props) => {
       copyable: true
     }));
     effect((_p$) => {
-      var _v$29 = `${s().cardBody} ${isOpen() ? s().cardBodyOpen : ""}`, _v$30 = s().cardBodyInner, _v$31 = s().stepJsonPanel;
-      _v$29 !== _p$.e && className(_el$49, _p$.e = _v$29);
-      _v$30 !== _p$.t && className(_el$50, _p$.t = _v$30);
-      _v$31 !== _p$.a && className(_el$51, _p$.a = _v$31);
+      var _v$30 = `${s().cardBody} ${isOpen() ? s().cardBodyOpen : ""}`, _v$31 = s().cardBodyInner, _v$32 = s().stepJsonPanel;
+      _v$30 !== _p$.e && className(_el$49, _p$.e = _v$30);
+      _v$31 !== _p$.t && className(_el$50, _p$.t = _v$31);
+      _v$32 !== _p$.a && className(_el$51, _p$.a = _v$32);
       return _p$;
     }, {
       e: void 0,
@@ -8346,9 +8486,9 @@ var IterationCard = (props) => {
         var _el$69 = _tmpl$17(); _el$69.firstChild;
         insert(_el$69, totalToolCalls, null);
         effect((_p$) => {
-          var _v$32 = `${s().badge} ${s().badgeFinishReasonToolCalls}`, _v$33 = `${totalToolCalls()} tool ${totalToolCalls() === 1 ? "call" : "calls"}`;
-          _v$32 !== _p$.e && className(_el$69, _p$.e = _v$32);
-          _v$33 !== _p$.t && setAttribute(_el$69, "title", _p$.t = _v$33);
+          var _v$33 = `${s().badge} ${s().badgeFinishReasonToolCalls}`, _v$34 = `${totalToolCalls()} tool ${totalToolCalls() === 1 ? "call" : "calls"}`;
+          _v$33 !== _p$.e && className(_el$69, _p$.e = _v$33);
+          _v$34 !== _p$.t && setAttribute(_el$69, "title", _p$.t = _v$34);
           return _p$;
         }, {
           e: void 0,
@@ -8365,9 +8505,9 @@ var IterationCard = (props) => {
         var _el$71 = _tmpl$18(); _el$71.firstChild;
         insert(_el$71, () => formatDuration(duration()), null);
         effect((_p$) => {
-          var _v$34 = `${s().badge} ${s().badgeDuration}`, _v$35 = formatDuration(duration());
-          _v$34 !== _p$.e && className(_el$71, _p$.e = _v$34);
-          _v$35 !== _p$.t && setAttribute(_el$71, "title", _p$.t = _v$35);
+          var _v$35 = `${s().badge} ${s().badgeDuration}`, _v$36 = formatDuration(duration());
+          _v$35 !== _p$.e && className(_el$71, _p$.e = _v$35);
+          _v$36 !== _p$.t && setAttribute(_el$71, "title", _p$.t = _v$36);
           return _p$;
         }, {
           e: void 0,
@@ -8384,9 +8524,9 @@ var IterationCard = (props) => {
         var _el$94 = _tmpl$25(); _el$94.firstChild;
         insert(_el$94, () => usage().totalTokens.toLocaleString(), null);
         effect((_p$) => {
-          var _v$56 = `${s().badge} ${s().badgeUsage}`, _v$57 = `Prompt: ${usage().promptTokens.toLocaleString()} | Completion: ${usage().completionTokens.toLocaleString()}`;
-          _v$56 !== _p$.e && className(_el$94, _p$.e = _v$56);
-          _v$57 !== _p$.t && setAttribute(_el$94, "title", _p$.t = _v$57);
+          var _v$57 = `${s().badge} ${s().badgeUsage}`, _v$58 = `Prompt: ${usage().promptTokens.toLocaleString()} | Completion: ${usage().completionTokens.toLocaleString()}`;
+          _v$57 !== _p$.e && className(_el$94, _p$.e = _v$57);
+          _v$58 !== _p$.t && setAttribute(_el$94, "title", _p$.t = _v$58);
           return _p$;
         }, {
           e: void 0,
@@ -8443,12 +8583,12 @@ var IterationCard = (props) => {
             insert(_el$103, () => diff.from);
             insert(_el$105, () => diff.to);
             effect((_p$) => {
-              var _v$58 = s().configDiffRow, _v$59 = s().configDiffKey, _v$60 = s().configDiffFrom, _v$61 = s().configDiffArrow, _v$62 = s().configDiffTo;
-              _v$58 !== _p$.e && className(_el$100, _p$.e = _v$58);
-              _v$59 !== _p$.t && className(_el$101, _p$.t = _v$59);
-              _v$60 !== _p$.a && className(_el$103, _p$.a = _v$60);
-              _v$61 !== _p$.o && className(_el$104, _p$.o = _v$61);
-              _v$62 !== _p$.i && className(_el$105, _p$.i = _v$62);
+              var _v$59 = s().configDiffRow, _v$60 = s().configDiffKey, _v$61 = s().configDiffFrom, _v$62 = s().configDiffArrow, _v$63 = s().configDiffTo;
+              _v$59 !== _p$.e && className(_el$100, _p$.e = _v$59);
+              _v$60 !== _p$.t && className(_el$101, _p$.t = _v$60);
+              _v$61 !== _p$.a && className(_el$103, _p$.a = _v$61);
+              _v$62 !== _p$.o && className(_el$104, _p$.o = _v$62);
+              _v$63 !== _p$.i && className(_el$105, _p$.i = _v$63);
               return _p$;
             }, {
               e: void 0,
@@ -8461,10 +8601,10 @@ var IterationCard = (props) => {
           })()
         }));
         effect((_p$) => {
-          var _v$36 = s().configPanelSection, _v$37 = s().configPanelLabel, _v$38 = s().configDiffSection;
-          _v$36 !== _p$.e && className(_el$78, _p$.e = _v$36);
-          _v$37 !== _p$.t && className(_el$79, _p$.t = _v$37);
-          _v$38 !== _p$.a && className(_el$80, _p$.a = _v$38);
+          var _v$37 = s().configPanelSection, _v$38 = s().configPanelLabel, _v$39 = s().configDiffSection;
+          _v$37 !== _p$.e && className(_el$78, _p$.e = _v$37);
+          _v$38 !== _p$.t && className(_el$79, _p$.t = _v$38);
+          _v$39 !== _p$.a && className(_el$80, _p$.a = _v$39);
           return _p$;
         }, {
           e: void 0,
@@ -8489,9 +8629,9 @@ var IterationCard = (props) => {
             insert(_el$106, name, _el$107);
             insert(_el$107, () => toolInvocationCounts().get(name) || 0);
             effect((_p$) => {
-              var _v$63 = s().configToolChip, _v$64 = s().configToolChipCount;
-              _v$63 !== _p$.e && className(_el$106, _p$.e = _v$63);
-              _v$64 !== _p$.t && className(_el$107, _p$.t = _v$64);
+              var _v$64 = s().configToolChip, _v$65 = s().configToolChipCount;
+              _v$64 !== _p$.e && className(_el$106, _p$.e = _v$64);
+              _v$65 !== _p$.t && className(_el$107, _p$.t = _v$65);
               return _p$;
             }, {
               e: void 0,
@@ -8501,10 +8641,10 @@ var IterationCard = (props) => {
           })()
         }));
         effect((_p$) => {
-          var _v$39 = s().configPanelSection, _v$40 = s().configPanelLabel, _v$41 = s().configToolsList;
-          _v$39 !== _p$.e && className(_el$81, _p$.e = _v$39);
-          _v$40 !== _p$.t && className(_el$82, _p$.t = _v$40);
-          _v$41 !== _p$.a && className(_el$83, _p$.a = _v$41);
+          var _v$40 = s().configPanelSection, _v$41 = s().configPanelLabel, _v$42 = s().configToolsList;
+          _v$40 !== _p$.e && className(_el$81, _p$.e = _v$40);
+          _v$41 !== _p$.t && className(_el$82, _p$.t = _v$41);
+          _v$42 !== _p$.a && className(_el$83, _p$.a = _v$42);
           return _p$;
         }, {
           e: void 0,
@@ -8533,9 +8673,9 @@ var IterationCard = (props) => {
           })
         }), null);
         effect((_p$) => {
-          var _v$42 = s().configPanelSection, _v$43 = s().configPanelLabel;
-          _v$42 !== _p$.e && className(_el$84, _p$.e = _v$42);
-          _v$43 !== _p$.t && className(_el$85, _p$.t = _v$43);
+          var _v$43 = s().configPanelSection, _v$44 = s().configPanelLabel;
+          _v$43 !== _p$.e && className(_el$84, _p$.e = _v$43);
+          _v$44 !== _p$.t && className(_el$85, _p$.t = _v$44);
           return _p$;
         }, {
           e: void 0,
@@ -8558,10 +8698,10 @@ var IterationCard = (props) => {
           copyable: true
         }));
         effect((_p$) => {
-          var _v$44 = s().configPanelSection, _v$45 = s().configPanelLabel, _v$46 = s().configJsonTreeContainer;
-          _v$44 !== _p$.e && className(_el$89, _p$.e = _v$44);
-          _v$45 !== _p$.t && className(_el$90, _p$.t = _v$45);
-          _v$46 !== _p$.a && className(_el$91, _p$.a = _v$46);
+          var _v$45 = s().configPanelSection, _v$46 = s().configPanelLabel, _v$47 = s().configJsonTreeContainer;
+          _v$45 !== _p$.e && className(_el$89, _p$.e = _v$45);
+          _v$46 !== _p$.t && className(_el$90, _p$.t = _v$46);
+          _v$47 !== _p$.a && className(_el$91, _p$.a = _v$47);
           return _p$;
         }, {
           e: void 0,
@@ -8663,16 +8803,16 @@ var IterationCard = (props) => {
       })
     }));
     effect((_p$) => {
-      var _v$47 = s().cardHeaderContent, _v$48 = s().iterCardTitle, _v$49 = s().cardSubtitle, _v$50 = s().cardHeaderBadges, _v$51 = `${s().chevron} ${isOpen() ? s().chevronOpen : ""}`, _v$52 = `${s().configPanelWrapper} ${configExpanded() ? s().configPanelWrapperOpen : ""}`, _v$53 = s().configPanel, _v$54 = `${s().cardBody} ${isOpen() ? s().cardBodyOpen : ""}`, _v$55 = s().cardBodyInner;
-      _v$47 !== _p$.e && className(_el$54, _p$.e = _v$47);
-      _v$48 !== _p$.t && className(_el$55, _p$.t = _v$48);
-      _v$49 !== _p$.a && className(_el$56, _p$.a = _v$49);
-      _v$50 !== _p$.o && className(_el$67, _p$.o = _v$50);
-      _v$51 !== _p$.i && className(_el$74, _p$.i = _v$51);
-      _v$52 !== _p$.n && className(_el$75, _p$.n = _v$52);
-      _v$53 !== _p$.s && className(_el$76, _p$.s = _v$53);
-      _v$54 !== _p$.h && className(_el$92, _p$.h = _v$54);
-      _v$55 !== _p$.r && className(_el$93, _p$.r = _v$55);
+      var _v$48 = s().cardHeaderContent, _v$49 = s().iterCardTitle, _v$50 = s().cardSubtitle, _v$51 = s().cardHeaderBadges, _v$52 = `${s().chevron} ${isOpen() ? s().chevronOpen : ""}`, _v$53 = `${s().configPanelWrapper} ${configExpanded() ? s().configPanelWrapperOpen : ""}`, _v$54 = s().configPanel, _v$55 = `${s().cardBody} ${isOpen() ? s().cardBodyOpen : ""}`, _v$56 = s().cardBodyInner;
+      _v$48 !== _p$.e && className(_el$54, _p$.e = _v$48);
+      _v$49 !== _p$.t && className(_el$55, _p$.t = _v$49);
+      _v$50 !== _p$.a && className(_el$56, _p$.a = _v$50);
+      _v$51 !== _p$.o && className(_el$67, _p$.o = _v$51);
+      _v$52 !== _p$.i && className(_el$74, _p$.i = _v$52);
+      _v$53 !== _p$.n && className(_el$75, _p$.n = _v$53);
+      _v$54 !== _p$.s && className(_el$76, _p$.s = _v$54);
+      _v$55 !== _p$.h && className(_el$92, _p$.h = _v$55);
+      _v$56 !== _p$.r && className(_el$93, _p$.r = _v$56);
       return _p$;
     }, {
       e: void 0,
@@ -10935,18 +11075,461 @@ var MemoryPanel = () => {
   })();
 };
 delegateEvents(["click"]);
+var _tmpl$40 = /* @__PURE__ */ template(`<div><div></div><div>`);
+var _tmpl$214 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$310 = /* @__PURE__ */ template(`<div><div> (<!>)`);
+var _tmpl$47 = /* @__PURE__ */ template(`<span> \u2192 <!> tok`);
+var _tmpl$57 = /* @__PURE__ */ template(`<span>ms`);
+var _tmpl$67 = /* @__PURE__ */ template(`<span>checkpoint`);
+var _tmpl$77 = /* @__PURE__ */ template(`<div data-testid=ai-devtools-compaction-event style=cursor:pointer><span></span><span></span><span></span><span></span><span>\u25B6`);
+var _tmpl$87 = /* @__PURE__ */ template(`<div><span> event</span><button type=button>Clear`);
+var _tmpl$97 = /* @__PURE__ */ template(`<div data-testid=ai-devtools-compaction-panel>`);
+var _tmpl$06 = /* @__PURE__ */ template(`<div>No compaction yet. When the transcript passes maxTokens, each compact appears here.`);
+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 (() => {
+    var _el$ = _tmpl$40(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    insert(_el$2, () => props.preview.role, null);
+    insert(_el$2, createComponent(Show, {
+      get when() {
+        return props.preview.tokens > 0;
+      },
+      get children() {
+        return ` \xB7 ${props.preview.tokens} tok`;
+      }
+    }), null);
+    insert(_el$3, () => props.preview.text);
+    effect((_p$) => {
+      var _v$ = styles().hookDetails.message, _v$2 = styles().hookDetails.messageRole, _v$3 = styles().hookDetails.messageContent;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+      _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    });
+    return _el$;
+  })();
+};
+var PreviewColumn = (props) => {
+  const styles = useStyles();
+  const s = () => styles().iterationTimeline;
+  return (() => {
+    var _el$4 = _tmpl$310(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$8 = _el$6.nextSibling; _el$8.nextSibling;
+    insert(_el$5, () => props.title, _el$6);
+    insert(_el$5, () => props.previews.length, _el$8);
+    insert(_el$4, createComponent(Show, {
+      get when() {
+        return props.previews.length > 0;
+      },
+      get fallback() {
+        return (() => {
+          var _el$0 = _tmpl$214();
+          insert(_el$0, () => props.empty);
+          effect(() => className(_el$0, styles().hookDetails.emptySmall));
+          return _el$0;
+        })();
+      },
+      get children() {
+        var _el$9 = _tmpl$214();
+        insert(_el$9, createComponent(For, {
+          get each() {
+            return props.previews;
+          },
+          children: (preview) => createComponent(PreviewMessage, {
+            preview
+          })
+        }));
+        effect(() => className(_el$9, styles().memoryPanel.list));
+        return _el$9;
+      }
+    }), null);
+    effect((_p$) => {
+      var _v$4 = s().stepJsonItem, _v$5 = s().stepJsonItemLabel;
+      _v$4 !== _p$.e && className(_el$4, _p$.e = _v$4);
+      _v$5 !== _p$.t && className(_el$5, _p$.t = _v$5);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$4;
+  })();
+};
+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 [(() => {
+    var _el$1 = _tmpl$77(), _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling, _el$12 = _el$11.nextSibling, _el$20 = _el$12.nextSibling, _el$21 = _el$20.nextSibling;
+    _el$1.$$click = () => setExpanded(!expanded());
+    insert(_el$10, () => kindLabel(event().kind));
+    insert(_el$11, () => shortStrategy(event()));
+    insert(_el$12, countLabel);
+    insert(_el$1, createComponent(Show, {
+      get when() {
+        return event().kind === "state";
+      },
+      get children() {
+        var _el$13 = _tmpl$47(), _el$14 = _el$13.firstChild, _el$16 = _el$14.nextSibling; _el$16.nextSibling;
+        insert(_el$13, () => event().before, _el$14);
+        insert(_el$13, () => event().after, _el$16);
+        effect(() => className(_el$13, s().stepDuration));
+        return _el$13;
+      }
+    }), _el$20);
+    insert(_el$1, createComponent(Show, {
+      get when() {
+        return event().durationMs !== void 0;
+      },
+      get children() {
+        var _el$17 = _tmpl$57(), _el$18 = _el$17.firstChild;
+        insert(_el$17, () => event().durationMs, _el$18);
+        effect(() => className(_el$17, s().stepDuration));
+        return _el$17;
+      }
+    }), _el$20);
+    insert(_el$1, createComponent(Show, {
+      get when() {
+        return event().reusedCheckpoint;
+      },
+      get children() {
+        var _el$19 = _tmpl$67();
+        effect(() => className(_el$19, s().mwSuffix));
+        return _el$19;
+      }
+    }), _el$20);
+    insert(_el$20, () => formatTime3(event().timestamp));
+    effect((_p$) => {
+      var _v$6 = s().step, _v$7 = event().kind, _v$8 = `${s().stepPrefix} ${s().stepPrefixMiddleware}`, _v$9 = `${s().mwBadge} ${s().mwBadgeTransform}`, _v$0 = s().mwHook, _v$1 = s().stepDuration, _v$10 = `${s().chevron} ${expanded() ? s().chevronOpen : ""}`;
+      _v$6 !== _p$.e && className(_el$1, _p$.e = _v$6);
+      _v$7 !== _p$.t && setAttribute(_el$1, "data-kind", _p$.t = _v$7);
+      _v$8 !== _p$.a && className(_el$10, _p$.a = _v$8);
+      _v$9 !== _p$.o && className(_el$11, _p$.o = _v$9);
+      _v$0 !== _p$.i && className(_el$12, _p$.i = _v$0);
+      _v$1 !== _p$.n && className(_el$20, _p$.n = _v$1);
+      _v$10 !== _p$.s && className(_el$21, _p$.s = _v$10);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0,
+      s: void 0
+    });
+    return _el$1;
+  })(), createComponent(Show, {
+    get when() {
+      return expanded();
+    },
+    get children() {
+      return [(() => {
+        var _el$22 = _tmpl$214();
+        insert(_el$22, createComponent(JsonTree, {
+          get value() {
+            return stats();
+          },
+          defaultExpansionDepth: 1,
+          copyable: true
+        }));
+        effect(() => className(_el$22, s().mwChangesContainer));
+        return _el$22;
+      })(), createComponent(Show, {
+        get when() {
+          return isState();
+        },
+        get children() {
+          var _el$23 = _tmpl$214();
+          insert(_el$23, createComponent(PreviewColumn, {
+            title: "Dropped",
+            get previews() {
+              return event().dropped ?? [];
+            },
+            empty: "Nothing was dropped."
+          }), null);
+          insert(_el$23, createComponent(PreviewColumn, {
+            title: "Sent to model",
+            get previews() {
+              return event().result ?? [];
+            },
+            empty: "No compacted transcript on this event."
+          }), null);
+          effect(() => className(_el$23, s().stepJsonItemsCompare));
+          return _el$23;
+        }
+      })];
+    }
+  })];
+};
+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 (() => {
+    var _el$24 = _tmpl$97();
+    insert(_el$24, createComponent(Show, {
+      get when() {
+        return events().length > 0;
+      },
+      get fallback() {
+        return (() => {
+          var _el$30 = _tmpl$06();
+          effect(() => className(_el$30, styles().hookDetails.emptySmall));
+          return _el$30;
+        })();
+      },
+      get children() {
+        return [(() => {
+          var _el$25 = _tmpl$87(), _el$26 = _el$25.firstChild, _el$27 = _el$26.firstChild, _el$28 = _el$26.nextSibling;
+          insert(_el$26, () => events().length, _el$27);
+          insert(_el$26, () => events().length === 1 ? "" : "s", null);
+          _el$28.$$click = () => clearCompaction();
+          effect((_p$) => {
+            var _v$11 = styles().memoryPanel.toolbar, _v$12 = styles().memoryPanel.badge, _v$13 = styles().memoryPanel.clearButton;
+            _v$11 !== _p$.e && className(_el$25, _p$.e = _v$11);
+            _v$12 !== _p$.t && className(_el$26, _p$.t = _v$12);
+            _v$13 !== _p$.a && className(_el$28, _p$.a = _v$13);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0
+          });
+          return _el$25;
+        })(), (() => {
+          var _el$29 = _tmpl$214();
+          insert(_el$29, createComponent(For, {
+            get each() {
+              return events();
+            },
+            children: (event, index) => createComponent(CompactEvent, {
+              event,
+              get defaultOpen() {
+                return memo(() => event.kind === "state")() && index() === lastStateIndex();
+              }
+            })
+          }));
+          effect(() => className(_el$29, s().iterCard));
+          return _el$29;
+        })()];
+      }
+    }));
+    effect(() => className(_el$24, styles().memoryPanel.container));
+    return _el$24;
+  })();
+};
+delegateEvents(["click"]);
+var _tmpl$41 = /* @__PURE__ */ template(`<ul>`);
+var _tmpl$215 = /* @__PURE__ */ template(`<div><div>Catalog`);
+var _tmpl$311 = /* @__PURE__ */ template(`<div data-testid=ai-devtools-skills-panel>`);
+var _tmpl$48 = /* @__PURE__ */ template(`<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\`.`);
+var _tmpl$58 = /* @__PURE__ */ template(`<div>Loaded via \`load_skill\`, but the catalog snapshot has not arrived yet.`);
+var _tmpl$68 = /* @__PURE__ */ template(`<span>loaded`);
+var _tmpl$78 = /* @__PURE__ */ template(`<li><span></span><span>`);
+function parseSkillName(argumentsJson) {
+  if (!argumentsJson) return void 0;
+  try {
+    const parsed = JSON.parse(argumentsJson);
+    if (parsed && typeof parsed === "object" && "name" in parsed && typeof parsed.name === "string") {
+      return parsed.name;
+    }
+  } catch {
+    return void 0;
+  }
+  return void 0;
+}
+function loadedFromMessages(messages) {
+  const names = /* @__PURE__ */ new Set();
+  for (const message of messages) {
+    for (const toolCall of message.toolCalls ?? []) {
+      if (toolCall.name === "load_skill") {
+        const name = parseSkillName(toolCall.arguments);
+        if (name) names.add(name);
+      }
+    }
+    for (const part of message.parts ?? []) {
+      if (part.type === "tool-call" && part.toolName === "load_skill") {
+        const name = parseSkillName(part.arguments);
+        if (name) names.add(name);
+      }
+    }
+  }
+  return [...names];
+}
+var SkillsPanel = () => {
+  const {
+    state
+  } = useAIStore();
+  const styles = useStyles();
+  const snapshot = createMemo(() => {
+    const hookId = state.hooks.activeHookId;
+    if (hookId && state.skills.snapshots[hookId]) {
+      return state.skills.snapshots[hookId];
+    }
+    const first = Object.values(state.skills.snapshots)[0];
+    return first;
+  });
+  const conversation = createMemo(() => {
+    const hookId = state.hooks.activeHookId;
+    if (!hookId) return void 0;
+    return state.conversations[hookId];
+  });
+  const loaded = createMemo(() => {
+    const fromSnap = new Set(snapshot()?.activated ?? []);
+    for (const name of loadedFromMessages(conversation()?.messages ?? [])) {
+      fromSnap.add(name);
+    }
+    return fromSnap;
+  });
+  const catalog = createMemo(() => snapshot()?.catalog ?? []);
+  return (() => {
+    var _el$ = _tmpl$311();
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return catalog().length > 0 || loaded().size > 0;
+      },
+      get fallback() {
+        return (() => {
+          var _el$5 = _tmpl$48();
+          effect(() => className(_el$5, styles().memoryPanel.empty));
+          return _el$5;
+        })();
+      },
+      get children() {
+        var _el$2 = _tmpl$215(), _el$3 = _el$2.firstChild;
+        insert(_el$2, createComponent(Show, {
+          get when() {
+            return catalog().length > 0;
+          },
+          get fallback() {
+            return (() => {
+              var _el$6 = _tmpl$58();
+              effect(() => className(_el$6, styles().memoryPanel.sectionEmpty));
+              return _el$6;
+            })();
+          },
+          get children() {
+            var _el$4 = _tmpl$41();
+            insert(_el$4, createComponent(For, {
+              get each() {
+                return catalog();
+              },
+              children: (skill) => {
+                const isLoaded = () => loaded().has(skill.name);
+                return (() => {
+                  var _el$7 = _tmpl$78(), _el$8 = _el$7.firstChild, _el$0 = _el$8.nextSibling;
+                  insert(_el$8, () => skill.name);
+                  insert(_el$7, createComponent(Show, {
+                    get when() {
+                      return isLoaded();
+                    },
+                    get children() {
+                      var _el$9 = _tmpl$68();
+                      effect(() => className(_el$9, styles().memoryPanel.badge));
+                      return _el$9;
+                    }
+                  }), _el$0);
+                  insert(_el$0, () => skill.description);
+                  effect((_p$) => {
+                    var _v$3 = styles().memoryPanel.row, _v$4 = styles().memoryPanel.badge, _v$5 = styles().memoryPanel.sectionEmpty;
+                    _v$3 !== _p$.e && className(_el$7, _p$.e = _v$3);
+                    _v$4 !== _p$.t && className(_el$8, _p$.t = _v$4);
+                    _v$5 !== _p$.a && className(_el$0, _p$.a = _v$5);
+                    return _p$;
+                  }, {
+                    e: void 0,
+                    t: void 0,
+                    a: void 0
+                  });
+                  return _el$7;
+                })();
+              }
+            }));
+            effect(() => className(_el$4, styles().memoryPanel.list));
+            return _el$4;
+          }
+        }), null);
+        effect((_p$) => {
+          var _v$ = styles().memoryPanel.section, _v$2 = styles().memoryPanel.sectionTitle;
+          _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+          _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$2;
+      }
+    }));
+    effect(() => className(_el$, styles().memoryPanel.container));
+    return _el$;
+  })();
+};
 
 // src/components/hooks/HookDetails.tsx
-var _tmpl$40 = /* @__PURE__ */ template(`<aside data-testid=ai-devtools-preview-pane><div>`);
-var _tmpl$214 = /* @__PURE__ */ template(`<div data-testid=ai-devtools-hook-detail><nav data-testid=ai-devtools-hook-tabs></nav><div><main data-testid=ai-devtools-primary-pane>`);
-var _tmpl$310 = /* @__PURE__ */ template(`<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>`);
-var _tmpl$47 = /* @__PURE__ */ template(`<div>Open a page with TanStack AI hooks to inspect live state.`);
-var _tmpl$57 = /* @__PURE__ */ template(`<section data-testid=ai-devtools-overview-category><div><span></span><span>`);
-var _tmpl$67 = /* @__PURE__ */ template(`<span>running`);
-var _tmpl$77 = /* @__PURE__ */ template(`<span> new`);
-var _tmpl$87 = /* @__PURE__ */ template(`<button type=button data-testid=ai-devtools-overview-hook><div><span></span><span></span></div><div><span>`);
-var _tmpl$97 = /* @__PURE__ */ template(`<div><span></span><span>`);
-var _tmpl$06 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$49 = /* @__PURE__ */ template(`<aside data-testid=ai-devtools-preview-pane><div>`);
+var _tmpl$216 = /* @__PURE__ */ template(`<div data-testid=ai-devtools-hook-detail><nav data-testid=ai-devtools-hook-tabs></nav><div><main data-testid=ai-devtools-primary-pane>`);
+var _tmpl$312 = /* @__PURE__ */ template(`<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>`);
+var _tmpl$410 = /* @__PURE__ */ template(`<div>Open a page with TanStack AI hooks to inspect live state.`);
+var _tmpl$59 = /* @__PURE__ */ template(`<section data-testid=ai-devtools-overview-category><div><span></span><span>`);
+var _tmpl$69 = /* @__PURE__ */ template(`<span>running`);
+var _tmpl$79 = /* @__PURE__ */ template(`<span> new`);
+var _tmpl$88 = /* @__PURE__ */ template(`<button type=button data-testid=ai-devtools-overview-hook><div><span></span><span></span></div><div><span>`);
+var _tmpl$98 = /* @__PURE__ */ template(`<div><span></span><span>`);
+var _tmpl$07 = /* @__PURE__ */ template(`<span>`);
 var _tmpl$116 = /* @__PURE__ */ template(`<span data-testid=ai-devtools-hook-technical-name>`);
 var _tmpl$106 = /* @__PURE__ */ template(`<span data-testid=ai-devtools-hook-registry-id>id `);
 var _tmpl$117 = /* @__PURE__ */ template(`<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>`);
@@ -10959,7 +11542,7 @@ var _tmpl$173 = /* @__PURE__ */ template(`<div><button type=button data-testid=a
 var _tmpl$182 = /* @__PURE__ */ template(`<div><span>`);
 var _tmpl$192 = /* @__PURE__ */ template(`<div><span></span><div>`);
 var _tmpl$202 = /* @__PURE__ */ template(`<div>No messages yet. Start a conversation to see messages here.`);
-var _tmpl$215 = /* @__PURE__ */ template(`<div data-testid=ai-devtools-tools><div></div><div>`);
+var _tmpl$217 = /* @__PURE__ */ template(`<div data-testid=ai-devtools-tools><div></div><div>`);
 var _tmpl$223 = /* @__PURE__ */ template(`<div>No tools.`);
 var _tmpl$232 = /* @__PURE__ */ template(`<span>approval`);
 var _tmpl$242 = /* @__PURE__ */ template(`<button type=button data-testid=ai-devtools-tool-row><span>`);
@@ -10981,7 +11564,8 @@ var HookDetails = () => {
   let previewPane;
   const hook = createMemo(() => {
     const id = state.hooks.activeHookId;
-    return id ? state.hooks.hooks[id] : void 0;
+    if (id === null) return void 0;
+    return state.hooks.hooks[id];
   });
   const conversation = createMemo(() => {
     const activeHook = hook();
@@ -10998,7 +11582,7 @@ var HookDetails = () => {
     return Boolean(outputKind && outputKind !== "chat" && outputKind !== "structured");
   });
   createEffect(() => {
-    if (isGenerationHook() && (activeTab() === "tools" || activeTab() === "memory")) {
+    if (isGenerationHook() && (activeTab() === "tools" || activeTab() === "memory" || activeTab() === "compaction" || activeTab() === "skills")) {
       setActiveTab("conversation");
     }
   });
@@ -11014,7 +11598,7 @@ var HookDetails = () => {
     return [];
   });
   const showSecondaryPane = createMemo(() => {
-    if (activeTab() === "tools" && !isGenerationHook()) return false;
+    if ((activeTab() === "tools" || activeTab() === "skills") && !isGenerationHook()) return false;
     return isGenerationHook() || !hasStructuredOutputPreview(previewMessages());
   });
   createEffect(() => {
@@ -11036,14 +11620,15 @@ 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) => (() => {
-      var _el$ = _tmpl$214(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
+      var _el$ = _tmpl$216(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
       insert(_el$, createComponent(HookHeader, {
         get hook() {
           return activeHook();
@@ -11099,14 +11684,28 @@ var HookDetails = () => {
           return !isGenerationHook();
         },
         get children() {
-          return createComponent(TabButton, {
+          return [createComponent(TabButton, {
             label: "Memory",
             tab: "memory",
             get activeTab() {
               return activeTab();
             },
             onSelect: setActiveTab
-          });
+          }), createComponent(TabButton, {
+            label: "Compaction",
+            tab: "compaction",
+            get activeTab() {
+              return activeTab();
+            },
+            onSelect: setActiveTab
+          }), createComponent(TabButton, {
+            label: "Skills",
+            tab: "skills",
+            get activeTab() {
+              return activeTab();
+            },
+            onSelect: setActiveTab
+          })];
         }
       }), null);
       _el$4.addEventListener("mouseleave", () => setHoverTarget(null));
@@ -11185,12 +11784,32 @@ var HookDetails = () => {
           return createComponent(MemoryPanel, {});
         }
       }), null);
+      insert(_el$4, createComponent(Show, {
+        get when() {
+          return activeTab() === "compaction";
+        },
+        get children() {
+          return createComponent(CompactionPanel, {
+            get hook() {
+              return activeHook();
+            }
+          });
+        }
+      }), null);
+      insert(_el$4, createComponent(Show, {
+        get when() {
+          return activeTab() === "skills";
+        },
+        get children() {
+          return createComponent(SkillsPanel, {});
+        }
+      }), null);
       insert(_el$3, createComponent(Show, {
         get when() {
           return showSecondaryPane();
         },
         get children() {
-          var _el$5 = _tmpl$40(), _el$6 = _el$5.firstChild;
+          var _el$5 = _tmpl$49(), _el$6 = _el$5.firstChild;
           _el$5.addEventListener("mouseleave", () => setHoverTarget(null));
           _el$5.$$mouseover = (event) => setHoverTargetFromEvent(event, "preview", setHoverTarget);
           use((el) => {
@@ -11271,13 +11890,13 @@ var HookOverview = (props) => {
     },
     get fallback() {
       return (() => {
-        var _el$12 = _tmpl$47();
+        var _el$12 = _tmpl$410();
         effect(() => className(_el$12, styles().hookDetails.empty));
         return _el$12;
       })();
     },
     get children() {
-      var _el$7 = _tmpl$310(), _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling, _el$10 = _el$8.nextSibling, _el$11 = _el$10.nextSibling;
+      var _el$7 = _tmpl$312(), _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling, _el$10 = _el$8.nextSibling, _el$11 = _el$10.nextSibling;
       insert(_el$10, createComponent(OverviewMetric, {
         label: "active hooks",
         get value() {
@@ -11331,7 +11950,7 @@ var HookOverview = (props) => {
           return groups();
         },
         children: (group) => (() => {
-          var _el$13 = _tmpl$57(), _el$14 = _el$13.firstChild, _el$15 = _el$14.firstChild, _el$16 = _el$15.nextSibling;
+          var _el$13 = _tmpl$59(), _el$14 = _el$13.firstChild, _el$15 = _el$14.firstChild, _el$16 = _el$15.nextSibling;
           insert(_el$15, () => group.label);
           insert(_el$16, () => group.hooks.length);
           insert(_el$13, createComponent(For, {
@@ -11342,7 +11961,7 @@ var HookOverview = (props) => {
               const running = createMemo(() => isHookRunning(hook, state.hooks.runs));
               const unseenCount = createMemo(() => getHookUnseenEventCount(state.hooks, hook.id));
               return (() => {
-                var _el$17 = _tmpl$87(), _el$18 = _el$17.firstChild, _el$19 = _el$18.firstChild, _el$20 = _el$19.nextSibling, _el$21 = _el$18.nextSibling, _el$22 = _el$21.firstChild;
+                var _el$17 = _tmpl$88(), _el$18 = _el$17.firstChild, _el$19 = _el$18.firstChild, _el$20 = _el$19.nextSibling, _el$21 = _el$18.nextSibling, _el$22 = _el$21.firstChild;
                 _el$17.$$click = () => props.onSelectHook(hook);
                 insert(_el$19, () => getHookDisplayName(hook));
                 insert(_el$20, () => getHookIdentitySubtitle(hook));
@@ -11352,7 +11971,7 @@ var HookOverview = (props) => {
                     return running();
                   },
                   get children() {
-                    var _el$23 = _tmpl$67();
+                    var _el$23 = _tmpl$69();
                     effect(() => className(_el$23, styles().hookDetails.lifecycle));
                     return _el$23;
                   }
@@ -11362,7 +11981,7 @@ var HookOverview = (props) => {
                     return unseenCount() > 0;
                   },
                   get children() {
-                    var _el$24 = _tmpl$77(), _el$25 = _el$24.firstChild;
+                    var _el$24 = _tmpl$79(), _el$25 = _el$24.firstChild;
                     insert(_el$24, unseenCount, _el$25);
                     effect(() => className(_el$24, styles().hookDetails.kind));
                     return _el$24;
@@ -11433,7 +12052,7 @@ var HookOverview = (props) => {
 var OverviewMetric = (props) => {
   const styles = useStyles();
   return (() => {
-    var _el$26 = _tmpl$97(), _el$27 = _el$26.firstChild, _el$28 = _el$27.nextSibling;
+    var _el$26 = _tmpl$98(), _el$27 = _el$26.firstChild, _el$28 = _el$27.nextSibling;
     insert(_el$27, () => props.value);
     insert(_el$28, () => props.label);
     effect((_p$) => {
@@ -11461,7 +12080,7 @@ var HookHeader = (props) => {
         return props.hook.outputKind;
       },
       get children() {
-        var _el$34 = _tmpl$06();
+        var _el$34 = _tmpl$07();
         insert(_el$34, () => props.hook.outputKind);
         effect(() => className(_el$34, styles().hookDetails.kind));
         return _el$34;
@@ -11496,7 +12115,7 @@ var HookHeader = (props) => {
         return props.hook.framework;
       },
       get children() {
-        var _el$40 = _tmpl$06();
+        var _el$40 = _tmpl$07();
         insert(_el$40, () => props.hook.framework);
         return _el$40;
       }
@@ -11565,7 +12184,7 @@ var HookHeader = (props) => {
 var Metric = (props) => {
   const styles = useStyles();
   return (() => {
-    var _el$42 = _tmpl$97(), _el$43 = _el$42.firstChild, _el$44 = _el$43.nextSibling;
+    var _el$42 = _tmpl$98(), _el$43 = _el$42.firstChild, _el$44 = _el$43.nextSibling;
     insert(_el$43, () => props.value);
     insert(_el$44, () => props.label);
     effect((_p$) => {
@@ -11857,7 +12476,7 @@ var MessagesPreview = (props) => {
                   },
                   get fallback() {
                     return (() => {
-                      var _el$60 = _tmpl$06();
+                      var _el$60 = _tmpl$07();
                       insert(_el$60, () => part.content);
                       effect(() => className(_el$60, styles().hookDetails.previewPartContent));
                       return _el$60;
@@ -11991,7 +12610,7 @@ var HookMessageTimeline = (props) => {
                 },
                 get fallback() {
                   return (() => {
-                    var _el$72 = _tmpl$06();
+                    var _el$72 = _tmpl$07();
                     insert(_el$72, () => part.content);
                     effect(() => className(_el$72, styles().hookDetails.previewPartContent));
                     return _el$72;
@@ -12055,7 +12674,7 @@ var ToolsView = (props) => {
   const selectedTool = createMemo(() => props.hook.tools.find((tool) => tool.name === selectedToolName()));
   const savedFixtures = createMemo(() => state.hooks.fixtures.filter((fixture) => fixture.hookId === props.hook.id || !!props.hook.threadId && fixture.threadId === props.hook.threadId).sort((a, b) => b.createdAt - a.createdAt));
   return (() => {
-    var _el$76 = _tmpl$215(), _el$77 = _el$76.firstChild, _el$78 = _el$77.nextSibling;
+    var _el$76 = _tmpl$217(), _el$77 = _el$76.firstChild, _el$78 = _el$77.nextSibling;
     insert(_el$77, createComponent(Show, {
       get when() {
         return props.hook.tools.length > 0;
@@ -12146,7 +12765,7 @@ var ToolsView = (props) => {
               var _el$87 = _tmpl$282(), _el$88 = _el$87.firstChild, _el$89 = _el$88.firstChild, _el$90 = _el$89.nextSibling, _el$91 = _el$90.firstChild, _el$92 = _el$88.nextSibling, _el$93 = _el$92.firstChild, _el$94 = _el$93.nextSibling;
               insert(_el$89, () => fixture.name ?? fixture.toolName);
               insert(_el$90, () => fixture.toolName, _el$91);
-              insert(_el$90, () => formatTime3(fixture.createdAt), null);
+              insert(_el$90, () => formatTime4(fixture.createdAt), null);
               _el$93.$$click = () => applyToolFixture(fixture);
               _el$94.$$click = () => deleteToolFixture(fixture.id);
               effect((_p$) => {
@@ -12646,13 +13265,13 @@ 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();
 }
 delegateEvents(["mouseover", "click"]);
 
 // src/components/Shell.tsx
-var _tmpl$41 = /* @__PURE__ */ template(`<div data-testid=ai-devtools-panel><div><div data-testid=ai-devtools-left-panel style=min-width:150px;max-width:800px><div>AI Hooks</div></div><div></div><div data-testid=ai-devtools-right-panel style=flex:1>`);
+var _tmpl$50 = /* @__PURE__ */ template(`<div data-testid=ai-devtools-panel><div><div data-testid=ai-devtools-left-panel style=min-width:150px;max-width:800px><div>AI Hooks</div></div><div></div><div data-testid=ai-devtools-right-panel style=flex:1>`);
 function Devtools(props) {
   return createComponent(ThemeContextProvider, {
     get theme() {
@@ -12734,7 +13353,7 @@ function DevtoolsContent() {
   });
   return createComponent(MainPanel, {
     get children() {
-      var _el$ = _tmpl$41(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$3.nextSibling, _el$6 = _el$5.nextSibling;
+      var _el$ = _tmpl$50(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$3.nextSibling, _el$6 = _el$5.nextSibling;
       insert(_el$, createComponent(Header, {
         get children() {
           return createComponent(HeaderLogo, {