@tanstack/ai-devtools-core 0.4.24 → 0.5.1

package/dist/Shell/{3ITTEC6O.js → DRZSZBFE.js}

@@ -1,4 +1,4 @@
-import { delegateEvents, createComponent, insert, effect, className, setStyleProperty, addEventListener, memo, setAttribute, use, spread, mergeProps, template, Portal } from 'solid-js/web';
+import { delegateEvents, createComponent, insert, effect, className, setStyleProperty, addEventListener, setAttribute, use, memo, spread, mergeProps, template, Portal } 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';
@@ -2202,6 +2202,118 @@ var stylesFactory = (theme) => {
         padding: 0 ${size[3]};
       `
     },
+    // MemoryPanel component styles
+    memoryPanel: {
+      container: css2`
+        display: flex;
+        flex: 1;
+        min-height: 0;
+        flex-direction: column;
+        gap: ${size[4]};
+        overflow-y: auto;
+        padding: ${size[4]};
+      `,
+      toolbar: css2`
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: ${size[3]};
+      `,
+      scopeControls: css2`
+        display: flex;
+        align-items: center;
+        gap: ${size[2]};
+        min-width: 0;
+      `,
+      scopeSelect: css2`
+        max-width: 220px;
+        border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
+        border-radius: ${border.radius.sm};
+        background: ${t(colors.white, colors.darkGray[800])};
+        color: ${t(colors.gray[900], colors.gray[100])};
+        font-family: ${fontFamily.mono};
+        font-size: ${fontSize.xs};
+        padding: ${size[1]} ${size[2]};
+      `,
+      clearButton: css2`
+        border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
+        border-radius: ${border.radius.sm};
+        background: ${t(colors.gray[50], colors.darkGray[700])};
+        color: ${t(colors.gray[700], colors.gray[200])};
+        cursor: pointer;
+        font-size: ${fontSize.xs};
+        padding: ${size[1]} ${size[2]};
+        &:hover {
+          border-color: ${t(colors.blue[300], colors.blue[700])};
+        }
+      `,
+      empty: css2`
+        color: ${t(colors.gray[500], colors.gray[500])};
+        font-size: ${fontSize.sm};
+        padding: ${size[4]};
+        text-align: center;
+      `,
+      section: css2`
+        display: flex;
+        flex-direction: column;
+        gap: ${size[2]};
+      `,
+      sectionTitle: css2`
+        color: ${t(colors.gray[600], colors.gray[300])};
+        font-size: ${fontSize.xs};
+        font-weight: ${font.weight.semibold};
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+      `,
+      sectionEmpty: css2`
+        color: ${t(colors.gray[500], colors.gray[500])};
+        font-size: ${fontSize.xs};
+      `,
+      list: css2`
+        display: flex;
+        flex-direction: column;
+        gap: ${size[1]};
+      `,
+      row: css2`
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
+        border-radius: ${border.radius.sm};
+        background: ${t(colors.white, colors.darkGray[800])};
+        padding: ${size[2]};
+      `,
+      rowError: css2`
+        border-color: ${t(colors.red[300], colors.red[700])};
+        background: ${t(colors.red[50], colors.red[900] + "20")};
+      `,
+      rowHeader: css2`
+        display: flex;
+        align-items: center;
+        gap: ${size[2]};
+        font-size: ${fontSize.xs};
+        color: ${t(colors.gray[500], colors.gray[400])};
+      `,
+      badge: css2`
+        border-radius: ${border.radius.xs};
+        background: ${t(colors.blue[50], colors.blue[900] + "30")};
+        color: ${t(colors.blue[700], colors.blue[300])};
+        font-family: ${fontFamily.mono};
+        font-size: 10px;
+        padding: 1px 6px;
+      `,
+      time: css2`
+        margin-left: auto;
+        font-family: ${fontFamily.mono};
+        font-size: 10px;
+      `,
+      rowText: css2`
+        color: ${t(colors.gray[900], colors.gray[100])};
+        font-size: ${fontSize.sm};
+        white-space: pre-wrap;
+        word-break: break-word;
+      `
+    },
     // ConversationDetails component styles
     conversationDetails: {
       emptyState: css2`
@@ -4391,8 +4503,8 @@ function removeHookRecord(state, hookId) {
       delete state.runs[runId];
     }
   }
-  for (const eventId of hookEventIds) {
-    delete state.events[eventId];
+  for (const eventId2 of hookEventIds) {
+    delete state.events[eventId2];
   }
   delete state.hooks[hookId];
   delete state.seenHookActivityCounts[hookId];
@@ -4400,7 +4512,7 @@ function removeHookRecord(state, hookId) {
     state.activeHookId = null;
   }
 }
-function upsertRun(state, event, eventId) {
+function upsertRun(state, event, eventId2) {
   const existing = state.runs[event.runId];
   if (!existing) {
     state.runs[event.runId] = {
@@ -4414,7 +4526,7 @@ function upsertRun(state, event, eventId) {
       updatedAt: event.timestamp,
       ...isTerminalRunStatus(event.status) ? { completedAt: event.timestamp } : {},
       ...event.error ? { error: event.error } : {},
-      eventIds: [eventId]
+      eventIds: [eventId2]
     };
     return;
   }
@@ -4430,8 +4542,8 @@ function upsertRun(state, event, eventId) {
   if (event.error) {
     existing.error = event.error;
   }
-  if (!existing.eventIds.includes(eventId)) {
-    existing.eventIds.push(eventId);
+  if (!existing.eventIds.includes(eventId2)) {
+    existing.eventIds.push(eventId2);
   }
 }
 function attachRunToHook(state, hookId, runId) {
@@ -4439,7 +4551,7 @@ function attachRunToHook(state, hookId, runId) {
   if (!hook || hook.runIds.includes(runId)) return;
   hook.runIds.push(runId);
 }
-function syncRunsFromSnapshot(state, snapshot, eventId) {
+function syncRunsFromSnapshot(state, snapshot, eventId2) {
   const rawRuns = snapshot.state.runs;
   if (!Array.isArray(rawRuns)) return;
   for (const candidate of rawRuns) {
@@ -4462,7 +4574,7 @@ function syncRunsFromSnapshot(state, snapshot, eventId) {
         updatedAt,
         ...typeof run.completedAt === "number" ? { completedAt: run.completedAt } : isTerminalRunStatus(status) ? { completedAt: updatedAt } : {},
         ...typeof run.error === "string" ? { error: run.error } : {},
-        eventIds: [eventId]
+        eventIds: [eventId2]
       };
     } else {
       existing.hookId = snapshot.hookId;
@@ -4474,8 +4586,8 @@ function syncRunsFromSnapshot(state, snapshot, eventId) {
         existing.completedAt = updatedAt;
       }
       if (typeof run.error === "string") existing.error = run.error;
-      if (!existing.eventIds.includes(eventId)) {
-        existing.eventIds.push(eventId);
+      if (!existing.eventIds.includes(eventId2)) {
+        existing.eventIds.push(eventId2);
       }
     }
     attachRunToHook(state, snapshot.hookId, run.id);
@@ -4505,11 +4617,11 @@ function attachActivityRunToHook(state, hookId, runId) {
   if (!hook || hook.activityRunIds.includes(runId)) return;
   hook.activityRunIds.push(runId);
 }
-function attachEventToHook(state, hookId, eventId) {
+function attachEventToHook(state, hookId, eventId2) {
   if (!hookId) return;
   const hook = state.hooks[hookId];
-  if (!hook || hook.eventIds.includes(eventId)) return;
-  hook.eventIds.push(eventId);
+  if (!hook || hook.eventIds.includes(eventId2)) return;
+  hook.eventIds.push(eventId2);
 }
 function inferLifecycleFromSnapshot(state) {
   if (state.status === "error" || state.error) {
@@ -4551,6 +4663,107 @@ function shouldSkipClientAssistantPlaceholder(message) {
   return message.role === "assistant" && message.source === "client" && !message.content && (!message.toolCalls || message.toolCalls.length === 0) && (!message.parts || message.parts.length === 0);
 }
 
+// src/store/memory-registry.ts
+function createMemoryRegistryState() {
+  return { scopes: {} };
+}
+function escapeScopeDim(value) {
+  return value.replace(/[\\:_]/g, "\\$&");
+}
+function scopeDim(value) {
+  return value != null && value.length > 0 ? escapeScopeDim(value) : "_";
+}
+function memoryScopeKey(scope) {
+  if (!scope) return "(unknown)";
+  return `${scopeDim(scope.tenantId)}:${scopeDim(scope.userId)}:${escapeScopeDim(scope.threadId)}:${scopeDim(scope.namespace)}`;
+}
+function memoryScopeLabel(entry) {
+  if (entry.key === "(unknown)" || !entry.threadId) return "(unknown)";
+  const parts = [
+    entry.tenantId,
+    entry.userId,
+    entry.threadId,
+    entry.namespace
+  ].filter((p) => p != null && p.length > 0);
+  return parts.join(" \xB7 ");
+}
+var MAX_EVENTS_PER_SCOPE = 200;
+function ensureScope(state, scope) {
+  const key = memoryScopeKey(scope);
+  let entry = state.scopes[key];
+  if (!entry) {
+    entry = {
+      key,
+      threadId: scope?.threadId ?? "",
+      userId: scope?.userId,
+      tenantId: scope?.tenantId,
+      namespace: scope?.namespace,
+      events: [],
+      lastActivity: 0
+    };
+    state.scopes[key] = entry;
+  }
+  if (scope) {
+    if (scope.userId) entry.userId = scope.userId;
+    if (scope.tenantId) entry.tenantId = scope.tenantId;
+    if (scope.namespace) entry.namespace = scope.namespace;
+  }
+  return entry;
+}
+var fallbackCounter = 0;
+function eventId(payload, type, ts) {
+  if (payload.eventId && payload.eventId.length > 0) return payload.eventId;
+  return `${type}:${ts}:${fallbackCounter++}`;
+}
+function applyMemoryEvent(state, event) {
+  const entry = ensureScope(state, event.scope);
+  entry.adapter = event.adapter;
+  entry.lastActivity = Math.max(entry.lastActivity, event.timestamp);
+  const record = {
+    id: eventId(event, event.type, event.timestamp),
+    type: event.type,
+    timestamp: event.timestamp,
+    adapter: event.adapter
+  };
+  switch (event.type) {
+    case "retrieve:started":
+      record.query = event.query;
+      break;
+    case "retrieve:completed":
+      record.fragmentCount = event.fragmentCount;
+      record.hasTools = event.hasTools;
+      record.systemPromptChars = event.systemPromptChars;
+      record.durationMs = event.durationMs;
+      break;
+    case "persist:completed":
+      record.receiptCount = event.receiptCount;
+      record.okCount = event.okCount;
+      record.durationMs = event.durationMs;
+      break;
+    case "error":
+      record.phase = event.phase;
+      record.error = event.error;
+      break;
+  }
+  entry.events.push(record);
+  if (entry.events.length > MAX_EVENTS_PER_SCOPE) {
+    entry.events.splice(0, entry.events.length - MAX_EVENTS_PER_SCOPE);
+  }
+}
+function applyMemorySnapshot(state, event) {
+  const entry = ensureScope(state, event.scope);
+  entry.adapter = event.adapter;
+  entry.lastActivity = Math.max(entry.lastActivity, event.timestamp);
+  entry.snapshot = {
+    takenAt: event.takenAt,
+    data: event.data,
+    facts: event.facts
+  };
+}
+function clearMemoryRegistry(state) {
+  state.scopes = {};
+}
+
 // src/store/ai-context.tsx
 var AIContext = createContext();
 function useAIStore() {
@@ -4564,7 +4777,8 @@ var AIProvider = (props) => {
   const [state, setState] = createStore({
     conversations: {},
     activeConversationId: null,
-    hooks: createHookRegistryState()
+    hooks: createHookRegistryState(),
+    memory: createMemoryRegistryState()
   });
   const streamToConversation = /* @__PURE__ */ new Map();
   const requestToConversation = /* @__PURE__ */ new Map();
@@ -4816,6 +5030,11 @@ var AIProvider = (props) => {
       clearHookRegistry(hooks);
     }));
   }
+  function clearMemory() {
+    setState("memory", produce((memory) => {
+      clearMemoryRegistry(memory);
+    }));
+  }
   function selectHook(id) {
     setState("hooks", produce((hooks) => {
       setActiveHook(hooks, id);
@@ -5118,6 +5337,29 @@ var AIProvider = (props) => {
         applyHookEvent(hooks, "hook:state-snapshot", e.payload);
       }));
     }));
+    const recordMemoryEvent = (type, payload) => {
+      setState("memory", produce((memory) => {
+        applyMemoryEvent(memory, {
+          ...payload,
+          type
+        });
+      }));
+    };
+    cleanupFns.push(aiEventClient.on("memory:retrieve:started", (e) => {
+      recordMemoryEvent("retrieve:started", e.payload);
+    }), aiEventClient.on("memory:retrieve:completed", (e) => {
+      recordMemoryEvent("retrieve:completed", e.payload);
+    }), aiEventClient.on("memory:persist:started", (e) => {
+      recordMemoryEvent("persist:started", e.payload);
+    }), aiEventClient.on("memory:persist:completed", (e) => {
+      recordMemoryEvent("persist:completed", e.payload);
+    }), aiEventClient.on("memory:error", (e) => {
+      recordMemoryEvent("error", e.payload);
+    }), aiEventClient.on("memory:snapshot", (e) => {
+      setState("memory", produce((memory) => {
+        applyMemorySnapshot(memory, e.payload);
+      }));
+    }));
     const recordRunEvent = (eventName, payload) => {
       setState("hooks", produce((hooks) => {
         applyHookEvent(hooks, eventName, payload);
@@ -6692,6 +6934,7 @@ var AIProvider = (props) => {
     clearAllConversations,
     selectConversation,
     clearHooks,
+    clearMemory,
     selectHook,
     saveToolFixture,
     deleteToolFixture,
@@ -6736,6 +6979,16 @@ function visibleHooks(hooks) {
 function getHookDisplayName(hook) {
   return hook.displayName ?? hook.hookName;
 }
+function getHookIdentityLabel(hook) {
+  return hook.threadId ?? hook.id;
+}
+function getHookIdentitySubtitle(hook) {
+  const identity = getHookIdentityLabel(hook);
+  if (hook.displayName) {
+    return `${hook.hookName} - ${identity}`;
+  }
+  return identity;
+}
 function groupHooksByCategory(hooks) {
   const groups = /* @__PURE__ */ new Map();
   for (const hook of hooks) {
@@ -6889,17 +7142,7 @@ var HookDashboard = () => {
                       return _el$45;
                     }
                   }), null);
-                  insert(_el$47, createComponent(Show, {
-                    get when() {
-                      return hook.displayName;
-                    },
-                    get fallback() {
-                      return hook.id;
-                    },
-                    get children() {
-                      return [memo(() => hook.hookName), " - ", memo(() => hook.id)];
-                    }
-                  }));
+                  insert(_el$47, () => getHookIdentitySubtitle(hook));
                   insert(_el$49, () => hook.lifecycle);
                   insert(_el$48, createComponent(Show, {
                     get when() {
@@ -10323,31 +10566,383 @@ function isRecord3(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 delegateEvents(["click"]);
+var _tmpl$38 = /* @__PURE__ */ template(`<div data-testid=ai-devtools-memory-panel>`);
+var _tmpl$213 = /* @__PURE__ */ template(`<div>No memory activity yet. Send a message through a chat wired with<code> memoryMiddleware</code> and recall/save events will appear here.`);
+var _tmpl$39 = /* @__PURE__ */ template(`<select data-testid=ai-devtools-memory-scope-select>`);
+var _tmpl$46 = /* @__PURE__ */ template(`<div><div></div><button type=button>Clear`);
+var _tmpl$56 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$66 = /* @__PURE__ */ template(`<section><div>Stored records (<!>)`);
+var _tmpl$76 = /* @__PURE__ */ template(`<section><div>listFacts() (<!>)`);
+var _tmpl$86 = /* @__PURE__ */ template(`<section><div>Operations (<!>)`);
+var _tmpl$96 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$05 = /* @__PURE__ */ template(`<option>`);
+var _tmpl$114 = /* @__PURE__ */ template(`<span>snapshot `);
+var _tmpl$105 = /* @__PURE__ */ template(`<span>importance `);
+var _tmpl$115 = /* @__PURE__ */ template(`<div data-testid=ai-devtools-memory-record><div><span></span><span></span></div><div>`);
+var _tmpl$123 = /* @__PURE__ */ template(`<div>No facts.`);
+var _tmpl$133 = /* @__PURE__ */ template(`<span>: `);
+var _tmpl$143 = /* @__PURE__ */ template(`<div><div>`);
+var _tmpl$153 = /* @__PURE__ */ template(`<div>No operations recorded.`);
+var _tmpl$163 = /* @__PURE__ */ template(`<div data-testid=ai-devtools-memory-event><div><span></span><span></span></div><div>`);
+function extractRecords(data) {
+  if (!data || typeof data !== "object") return [];
+  const records = data.records;
+  if (!Array.isArray(records)) return [];
+  return records.filter((r) => Boolean(r) && typeof r === "object" && typeof r.id === "string" && typeof r.text === "string");
+}
+function formatTime2(value) {
+  if (value === void 0) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  return date.toLocaleTimeString();
+}
+function eventSummary(event) {
+  switch (event.type) {
+    case "retrieve:started":
+      return `recall "${event.query ?? ""}"`;
+    case "retrieve:completed":
+      return `recalled ${event.fragmentCount ?? 0} fragment(s), ${event.systemPromptChars ?? 0} prompt chars${event.hasTools ? ", +tools" : ""} (${event.durationMs ?? 0}ms)`;
+    case "persist:started":
+      return "save started";
+    case "persist:completed":
+      return `saved ${event.okCount ?? 0}/${event.receiptCount ?? 0} receipt(s) (${event.durationMs ?? 0}ms)`;
+    case "error":
+      return `${event.phase ?? ""} error: ${event.error?.message ?? "unknown"}`;
+    default:
+      return event.type;
+  }
+}
+var MemoryPanel = () => {
+  const {
+    state,
+    clearMemory
+  } = useAIStore();
+  const styles = useStyles();
+  const [override, setOverride] = createSignal(null);
+  const scopeKeys = createMemo(() => Object.values(state.memory.scopes).slice().sort((a, b) => b.lastActivity - a.lastActivity).map((s) => s.key));
+  const selectedKey = createMemo(() => {
+    const chosen = override();
+    if (chosen && state.memory.scopes[chosen]) return chosen;
+    return scopeKeys()[0] ?? null;
+  });
+  const scope = createMemo(() => {
+    const key = selectedKey();
+    return key ? state.memory.scopes[key] : void 0;
+  });
+  const records = createMemo(() => extractRecords(scope()?.snapshot?.data));
+  const facts = createMemo(() => scope()?.snapshot?.facts ?? []);
+  const events = createMemo(() => (scope()?.events ?? []).slice().sort((a, b) => b.timestamp - a.timestamp));
+  return (() => {
+    var _el$ = _tmpl$38();
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return scope();
+      },
+      get fallback() {
+        return (() => {
+          var _el$2 = _tmpl$213();
+          effect(() => className(_el$2, styles().memoryPanel.empty));
+          return _el$2;
+        })();
+      },
+      children: (activeScope) => [(() => {
+        var _el$3 = _tmpl$46(), _el$4 = _el$3.firstChild, _el$6 = _el$4.nextSibling;
+        insert(_el$4, createComponent(Show, {
+          get when() {
+            return scopeKeys().length > 1;
+          },
+          get fallback() {
+            return (() => {
+              var _el$23 = _tmpl$96();
+              insert(_el$23, () => activeScope().adapter ?? "memory");
+              effect(() => className(_el$23, styles().memoryPanel.badge));
+              return _el$23;
+            })();
+          },
+          get children() {
+            var _el$5 = _tmpl$39();
+            _el$5.addEventListener("change", (e) => setOverride(e.currentTarget.value));
+            insert(_el$5, createComponent(For, {
+              get each() {
+                return scopeKeys();
+              },
+              children: (key) => {
+                const entry = state.memory.scopes[key];
+                const label = entry ? memoryScopeLabel(entry) : key;
+                return (() => {
+                  var _el$24 = _tmpl$05();
+                  _el$24.value = key;
+                  insert(_el$24, (() => {
+                    var _c$ = memo(() => !!entry?.adapter);
+                    return () => _c$() ? `${entry.adapter} \xB7 ` : "";
+                  })(), null);
+                  insert(_el$24, (() => {
+                    var _c$2 = memo(() => label.length > 40);
+                    return () => _c$2() ? `${label.slice(0, 40)}\u2026` : label;
+                  })(), null);
+                  return _el$24;
+                })();
+              }
+            }));
+            effect(() => className(_el$5, styles().memoryPanel.scopeSelect));
+            effect(() => _el$5.value = selectedKey() ?? "");
+            return _el$5;
+          }
+        }));
+        _el$6.$$click = () => {
+          setOverride(null);
+          clearMemory();
+        };
+        effect((_p$) => {
+          var _v$ = styles().memoryPanel.toolbar, _v$2 = styles().memoryPanel.scopeControls, _v$3 = styles().memoryPanel.clearButton;
+          _v$ !== _p$.e && className(_el$3, _p$.e = _v$);
+          _v$2 !== _p$.t && className(_el$4, _p$.t = _v$2);
+          _v$3 !== _p$.a && className(_el$6, _p$.a = _v$3);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        });
+        return _el$3;
+      })(), (() => {
+        var _el$7 = _tmpl$66(), _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$1 = _el$9.nextSibling; _el$1.nextSibling;
+        insert(_el$8, () => records().length, _el$1);
+        insert(_el$8, createComponent(Show, {
+          get when() {
+            return activeScope().snapshot;
+          },
+          children: (snap) => (() => {
+            var _el$25 = _tmpl$114(); _el$25.firstChild;
+            insert(_el$25, () => formatTime2(snap().takenAt), null);
+            effect(() => className(_el$25, styles().memoryPanel.time));
+            return _el$25;
+          })()
+        }), null);
+        insert(_el$7, createComponent(Show, {
+          get when() {
+            return records().length > 0;
+          },
+          get fallback() {
+            return (() => {
+              var _el$27 = _tmpl$56();
+              insert(_el$27, () => activeScope().snapshot ? "Snapshot is empty." : "This adapter does not expose inspect() \u2014 see the timeline below for activity.");
+              effect(() => className(_el$27, styles().memoryPanel.sectionEmpty));
+              return _el$27;
+            })();
+          },
+          get children() {
+            var _el$10 = _tmpl$56();
+            insert(_el$10, createComponent(For, {
+              get each() {
+                return records();
+              },
+              children: (rec) => (() => {
+                var _el$28 = _tmpl$115(), _el$29 = _el$28.firstChild, _el$30 = _el$29.firstChild, _el$34 = _el$30.nextSibling, _el$35 = _el$29.nextSibling;
+                insert(_el$30, () => rec.kind);
+                insert(_el$29, createComponent(Show, {
+                  get when() {
+                    return rec.role;
+                  },
+                  get children() {
+                    var _el$31 = _tmpl$96();
+                    insert(_el$31, () => rec.role);
+                    return _el$31;
+                  }
+                }), _el$34);
+                insert(_el$29, createComponent(Show, {
+                  get when() {
+                    return rec.importance !== void 0;
+                  },
+                  get children() {
+                    var _el$32 = _tmpl$105(); _el$32.firstChild;
+                    insert(_el$32, () => rec.importance?.toFixed(2), null);
+                    return _el$32;
+                  }
+                }), _el$34);
+                insert(_el$34, () => formatTime2(rec.createdAt));
+                insert(_el$35, () => rec.text);
+                effect((_p$) => {
+                  var _v$0 = styles().memoryPanel.row, _v$1 = styles().memoryPanel.rowHeader, _v$10 = styles().memoryPanel.badge, _v$11 = styles().memoryPanel.time, _v$12 = styles().memoryPanel.rowText;
+                  _v$0 !== _p$.e && className(_el$28, _p$.e = _v$0);
+                  _v$1 !== _p$.t && className(_el$29, _p$.t = _v$1);
+                  _v$10 !== _p$.a && className(_el$30, _p$.a = _v$10);
+                  _v$11 !== _p$.o && className(_el$34, _p$.o = _v$11);
+                  _v$12 !== _p$.i && className(_el$35, _p$.i = _v$12);
+                  return _p$;
+                }, {
+                  e: void 0,
+                  t: void 0,
+                  a: void 0,
+                  o: void 0,
+                  i: void 0
+                });
+                return _el$28;
+              })()
+            }));
+            effect(() => className(_el$10, styles().memoryPanel.list));
+            return _el$10;
+          }
+        }), null);
+        effect((_p$) => {
+          var _v$4 = styles().memoryPanel.section, _v$5 = styles().memoryPanel.sectionTitle;
+          _v$4 !== _p$.e && className(_el$7, _p$.e = _v$4);
+          _v$5 !== _p$.t && className(_el$8, _p$.t = _v$5);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$7;
+      })(), (() => {
+        var _el$11 = _tmpl$76(), _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$15 = _el$13.nextSibling; _el$15.nextSibling;
+        insert(_el$12, () => facts().length, _el$15);
+        insert(_el$11, createComponent(Show, {
+          get when() {
+            return facts().length > 0;
+          },
+          get fallback() {
+            return (() => {
+              var _el$36 = _tmpl$123();
+              effect(() => className(_el$36, styles().memoryPanel.sectionEmpty));
+              return _el$36;
+            })();
+          },
+          get children() {
+            var _el$16 = _tmpl$56();
+            insert(_el$16, createComponent(For, {
+              get each() {
+                return facts();
+              },
+              children: (fact) => (() => {
+                var _el$37 = _tmpl$143(), _el$38 = _el$37.firstChild;
+                insert(_el$38, createComponent(Show, {
+                  get when() {
+                    return fact.source;
+                  },
+                  get children() {
+                    var _el$39 = _tmpl$133(), _el$40 = _el$39.firstChild;
+                    insert(_el$39, () => fact.source, _el$40);
+                    effect(() => className(_el$39, styles().memoryPanel.rowHeader));
+                    return _el$39;
+                  }
+                }), null);
+                insert(_el$38, () => fact.text, null);
+                effect((_p$) => {
+                  var _v$13 = styles().memoryPanel.row, _v$14 = styles().memoryPanel.rowText;
+                  _v$13 !== _p$.e && className(_el$37, _p$.e = _v$13);
+                  _v$14 !== _p$.t && className(_el$38, _p$.t = _v$14);
+                  return _p$;
+                }, {
+                  e: void 0,
+                  t: void 0
+                });
+                return _el$37;
+              })()
+            }));
+            effect(() => className(_el$16, styles().memoryPanel.list));
+            return _el$16;
+          }
+        }), null);
+        effect((_p$) => {
+          var _v$6 = styles().memoryPanel.section, _v$7 = styles().memoryPanel.sectionTitle;
+          _v$6 !== _p$.e && className(_el$11, _p$.e = _v$6);
+          _v$7 !== _p$.t && className(_el$12, _p$.t = _v$7);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$11;
+      })(), (() => {
+        var _el$17 = _tmpl$86(), _el$18 = _el$17.firstChild, _el$19 = _el$18.firstChild, _el$21 = _el$19.nextSibling; _el$21.nextSibling;
+        insert(_el$18, () => events().length, _el$21);
+        insert(_el$17, createComponent(Show, {
+          get when() {
+            return events().length > 0;
+          },
+          get fallback() {
+            return (() => {
+              var _el$41 = _tmpl$153();
+              effect(() => className(_el$41, styles().memoryPanel.sectionEmpty));
+              return _el$41;
+            })();
+          },
+          get children() {
+            var _el$22 = _tmpl$56();
+            insert(_el$22, createComponent(For, {
+              get each() {
+                return events();
+              },
+              children: (event) => (() => {
+                var _el$42 = _tmpl$163(), _el$43 = _el$42.firstChild, _el$44 = _el$43.firstChild, _el$45 = _el$44.nextSibling, _el$46 = _el$43.nextSibling;
+                insert(_el$44, () => event.type);
+                insert(_el$45, () => formatTime2(event.timestamp));
+                insert(_el$46, () => eventSummary(event));
+                effect((_p$) => {
+                  var _v$15 = `${styles().memoryPanel.row} ${event.type === "error" ? styles().memoryPanel.rowError : ""}`, _v$16 = styles().memoryPanel.rowHeader, _v$17 = styles().memoryPanel.badge, _v$18 = styles().memoryPanel.time, _v$19 = styles().memoryPanel.rowText;
+                  _v$15 !== _p$.e && className(_el$42, _p$.e = _v$15);
+                  _v$16 !== _p$.t && className(_el$43, _p$.t = _v$16);
+                  _v$17 !== _p$.a && className(_el$44, _p$.a = _v$17);
+                  _v$18 !== _p$.o && className(_el$45, _p$.o = _v$18);
+                  _v$19 !== _p$.i && className(_el$46, _p$.i = _v$19);
+                  return _p$;
+                }, {
+                  e: void 0,
+                  t: void 0,
+                  a: void 0,
+                  o: void 0,
+                  i: void 0
+                });
+                return _el$42;
+              })()
+            }));
+            effect(() => className(_el$22, styles().memoryPanel.list));
+            return _el$22;
+          }
+        }), null);
+        effect((_p$) => {
+          var _v$8 = styles().memoryPanel.section, _v$9 = styles().memoryPanel.sectionTitle;
+          _v$8 !== _p$.e && className(_el$17, _p$.e = _v$8);
+          _v$9 !== _p$.t && className(_el$18, _p$.t = _v$9);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$17;
+      })()]
+    }));
+    effect(() => className(_el$, styles().memoryPanel.container));
+    return _el$;
+  })();
+};
+delegateEvents(["click"]);
 
 // src/components/hooks/HookDetails.tsx
-var _tmpl$38 = /* @__PURE__ */ template(`<aside data-testid=ai-devtools-preview-pane><div>`);
-var _tmpl$213 = /* @__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$39 = /* @__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$46 = /* @__PURE__ */ template(`<div>Open a page with TanStack AI hooks to inspect live state.`);
-var _tmpl$56 = /* @__PURE__ */ template(`<section data-testid=ai-devtools-overview-category><div><span></span><span>`);
-var _tmpl$66 = /* @__PURE__ */ template(`<span>running`);
-var _tmpl$76 = /* @__PURE__ */ template(`<span> new`);
-var _tmpl$86 = /* @__PURE__ */ template(`<button type=button data-testid=ai-devtools-overview-hook><div><span></span><span></span></div><div><span>`);
-var _tmpl$96 = /* @__PURE__ */ template(`<div><span></span><span>`);
-var _tmpl$05 = /* @__PURE__ */ template(`<span>`);
-var _tmpl$114 = /* @__PURE__ */ template(`<span data-testid=ai-devtools-hook-technical-name>`);
-var _tmpl$105 = /* @__PURE__ */ template(`<span>thread `);
-var _tmpl$115 = /* @__PURE__ */ template(`<header data-testid=ai-devtools-hook-header><div><div><span data-testid=ai-devtools-hook-title></span><span></span></div><div><span></span></div></div><div>`);
-var _tmpl$123 = /* @__PURE__ */ template(`<button type=button data-testid=ai-devtools-hook-tab>`);
-var _tmpl$133 = /* @__PURE__ */ template(`<div><section><div>Current State`);
-var _tmpl$143 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$153 = /* @__PURE__ */ template(`<div>No messages.`);
-var _tmpl$163 = /* @__PURE__ */ template(`<div><div>`);
+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$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>`);
+var _tmpl$124 = /* @__PURE__ */ template(`<button type=button data-testid=ai-devtools-hook-tab>`);
+var _tmpl$134 = /* @__PURE__ */ template(`<div><section><div>Current State`);
+var _tmpl$144 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$154 = /* @__PURE__ */ template(`<div>No messages.`);
+var _tmpl$164 = /* @__PURE__ */ template(`<div><div>`);
 var _tmpl$173 = /* @__PURE__ */ template(`<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`);
 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$214 = /* @__PURE__ */ template(`<div data-testid=ai-devtools-tools><div></div><div>`);
+var _tmpl$215 = /* @__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>`);
@@ -10386,7 +10981,7 @@ var HookDetails = () => {
     return Boolean(outputKind && outputKind !== "chat" && outputKind !== "structured");
   });
   createEffect(() => {
-    if (isGenerationHook() && activeTab() === "tools") {
+    if (isGenerationHook() && (activeTab() === "tools" || activeTab() === "memory")) {
       setActiveTab("conversation");
     }
   });
@@ -10431,7 +11026,7 @@ var HookDetails = () => {
       });
     },
     children: (activeHook) => (() => {
-      var _el$ = _tmpl$213(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
+      var _el$ = _tmpl$214(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
       insert(_el$, createComponent(HookHeader, {
         get hook() {
           return activeHook();
@@ -10482,6 +11077,21 @@ var HookDetails = () => {
         },
         onSelect: setActiveTab
       }), null);
+      insert(_el$2, createComponent(Show, {
+        get when() {
+          return !isGenerationHook();
+        },
+        get children() {
+          return createComponent(TabButton, {
+            label: "Memory",
+            tab: "memory",
+            get activeTab() {
+              return activeTab();
+            },
+            onSelect: setActiveTab
+          });
+        }
+      }), null);
       _el$4.addEventListener("mouseleave", () => setHoverTarget(null));
       _el$4.$$mouseover = (event) => setHoverTargetFromEvent(event, "timeline", setHoverTarget);
       use((el) => {
@@ -10550,12 +11160,20 @@ var HookDetails = () => {
           });
         }
       }), null);
+      insert(_el$4, createComponent(Show, {
+        get when() {
+          return activeTab() === "memory";
+        },
+        get children() {
+          return createComponent(MemoryPanel, {});
+        }
+      }), null);
       insert(_el$3, createComponent(Show, {
         get when() {
           return showSecondaryPane();
         },
         get children() {
-          var _el$5 = _tmpl$38(), _el$6 = _el$5.firstChild;
+          var _el$5 = _tmpl$40(), _el$6 = _el$5.firstChild;
           _el$5.addEventListener("mouseleave", () => setHoverTarget(null));
           _el$5.$$mouseover = (event) => setHoverTargetFromEvent(event, "preview", setHoverTarget);
           use((el) => {
@@ -10636,13 +11254,13 @@ var HookOverview = (props) => {
     },
     get fallback() {
       return (() => {
-        var _el$12 = _tmpl$46();
+        var _el$12 = _tmpl$47();
         effect(() => className(_el$12, styles().hookDetails.empty));
         return _el$12;
       })();
     },
     get children() {
-      var _el$7 = _tmpl$39(), _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$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;
       insert(_el$10, createComponent(OverviewMetric, {
         label: "active hooks",
         get value() {
@@ -10696,7 +11314,7 @@ var HookOverview = (props) => {
           return groups();
         },
         children: (group) => (() => {
-          var _el$13 = _tmpl$56(), _el$14 = _el$13.firstChild, _el$15 = _el$14.firstChild, _el$16 = _el$15.nextSibling;
+          var _el$13 = _tmpl$57(), _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, {
@@ -10707,27 +11325,17 @@ var HookOverview = (props) => {
               const running = createMemo(() => isHookRunning(hook, state.hooks.runs));
               const unseenCount = createMemo(() => getHookUnseenEventCount(state.hooks, hook.id));
               return (() => {
-                var _el$17 = _tmpl$86(), _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$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;
                 _el$17.$$click = () => props.onSelectHook(hook);
                 insert(_el$19, () => getHookDisplayName(hook));
-                insert(_el$20, createComponent(Show, {
-                  get when() {
-                    return hook.displayName;
-                  },
-                  get fallback() {
-                    return hook.id;
-                  },
-                  get children() {
-                    return [memo(() => hook.hookName), " - ", memo(() => hook.id)];
-                  }
-                }));
+                insert(_el$20, () => getHookIdentitySubtitle(hook));
                 insert(_el$22, () => hook.outputKind ?? "hook");
                 insert(_el$21, createComponent(Show, {
                   get when() {
                     return running();
                   },
                   get children() {
-                    var _el$23 = _tmpl$66();
+                    var _el$23 = _tmpl$67();
                     effect(() => className(_el$23, styles().hookDetails.lifecycle));
                     return _el$23;
                   }
@@ -10737,7 +11345,7 @@ var HookOverview = (props) => {
                     return unseenCount() > 0;
                   },
                   get children() {
-                    var _el$24 = _tmpl$76(), _el$25 = _el$24.firstChild;
+                    var _el$24 = _tmpl$77(), _el$25 = _el$24.firstChild;
                     insert(_el$24, unseenCount, _el$25);
                     effect(() => className(_el$24, styles().hookDetails.kind));
                     return _el$24;
@@ -10808,7 +11416,7 @@ var HookOverview = (props) => {
 var OverviewMetric = (props) => {
   const styles = useStyles();
   return (() => {
-    var _el$26 = _tmpl$96(), _el$27 = _el$26.firstChild, _el$28 = _el$27.nextSibling;
+    var _el$26 = _tmpl$97(), _el$27 = _el$26.firstChild, _el$28 = _el$27.nextSibling;
     insert(_el$27, () => props.value);
     insert(_el$28, () => props.label);
     effect((_p$) => {
@@ -10828,7 +11436,7 @@ var OverviewMetric = (props) => {
 var HookHeader = (props) => {
   const styles = useStyles();
   return (() => {
-    var _el$29 = _tmpl$115(), _el$30 = _el$29.firstChild, _el$31 = _el$30.firstChild, _el$32 = _el$31.firstChild, _el$33 = _el$32.nextSibling, _el$35 = _el$31.nextSibling, _el$37 = _el$35.firstChild, _el$41 = _el$30.nextSibling;
+    var _el$29 = _tmpl$117(), _el$30 = _el$29.firstChild, _el$31 = _el$30.firstChild, _el$32 = _el$31.firstChild, _el$33 = _el$32.nextSibling, _el$35 = _el$31.nextSibling, _el$37 = _el$35.firstChild, _el$41 = _el$30.nextSibling;
     insert(_el$32, () => getHookDisplayName(props.hook));
     insert(_el$33, () => props.hook.lifecycle);
     insert(_el$31, createComponent(Show, {
@@ -10836,7 +11444,7 @@ var HookHeader = (props) => {
         return props.hook.outputKind;
       },
       get children() {
-        var _el$34 = _tmpl$05();
+        var _el$34 = _tmpl$06();
         insert(_el$34, () => props.hook.outputKind);
         effect(() => className(_el$34, styles().hookDetails.kind));
         return _el$34;
@@ -10847,19 +11455,22 @@ var HookHeader = (props) => {
         return props.hook.displayName;
       },
       get children() {
-        var _el$36 = _tmpl$114();
+        var _el$36 = _tmpl$116();
         insert(_el$36, () => props.hook.hookName);
         return _el$36;
       }
     }), _el$37);
-    insert(_el$37, () => props.hook.id);
+    insert(_el$37, (() => {
+      var _c$ = memo(() => !!props.hook.threadId);
+      return () => _c$() ? `thread ${props.hook.threadId}` : getHookIdentityLabel(props.hook);
+    })());
     insert(_el$35, createComponent(Show, {
       get when() {
-        return props.hook.threadId;
+        return memo(() => !!props.hook.threadId)() && props.hook.threadId !== props.hook.id;
       },
       get children() {
-        var _el$38 = _tmpl$105(); _el$38.firstChild;
-        insert(_el$38, () => props.hook.threadId, null);
+        var _el$38 = _tmpl$106(); _el$38.firstChild;
+        insert(_el$38, () => props.hook.id, null);
         return _el$38;
       }
     }), null);
@@ -10868,7 +11479,7 @@ var HookHeader = (props) => {
         return props.hook.framework;
       },
       get children() {
-        var _el$40 = _tmpl$05();
+        var _el$40 = _tmpl$06();
         insert(_el$40, () => props.hook.framework);
         return _el$40;
       }
@@ -10937,7 +11548,7 @@ var HookHeader = (props) => {
 var Metric = (props) => {
   const styles = useStyles();
   return (() => {
-    var _el$42 = _tmpl$96(), _el$43 = _el$42.firstChild, _el$44 = _el$43.nextSibling;
+    var _el$42 = _tmpl$97(), _el$43 = _el$42.firstChild, _el$44 = _el$43.nextSibling;
     insert(_el$43, () => props.value);
     insert(_el$44, () => props.label);
     effect((_p$) => {
@@ -10964,7 +11575,7 @@ function formatMetricValue(value) {
 var TabButton = (props) => {
   const styles = useStyles();
   return (() => {
-    var _el$45 = _tmpl$123();
+    var _el$45 = _tmpl$124();
     _el$45.$$click = () => props.onSelect(props.tab);
     insert(_el$45, () => props.label);
     effect((_p$) => {
@@ -10992,7 +11603,7 @@ var ConversationPanel = (props) => {
         },
         get fallback() {
           return (() => {
-            var _el$46 = _tmpl$133(), _el$47 = _el$46.firstChild, _el$48 = _el$47.firstChild;
+            var _el$46 = _tmpl$134(), _el$47 = _el$46.firstChild, _el$48 = _el$47.firstChild;
             insert(_el$47, createComponent(JsonPanel, {
               get value() {
                 return props.hook.state;
@@ -11105,13 +11716,13 @@ var MessagesPreview = (props) => {
     },
     get fallback() {
       return (() => {
-        var _el$50 = _tmpl$153();
+        var _el$50 = _tmpl$154();
         effect(() => className(_el$50, styles().hookDetails.emptySmall));
         return _el$50;
       })();
     },
     get children() {
-      var _el$49 = _tmpl$143();
+      var _el$49 = _tmpl$144();
       insert(_el$49, createComponent(Show, {
         get when() {
           return pendingFixture();
@@ -11131,7 +11742,7 @@ var MessagesPreview = (props) => {
         children: (message) => {
           const visibleParts = () => visiblePreviewPartsForMessage(message);
           return (() => {
-            var _el$51 = _tmpl$163(), _el$52 = _el$51.firstChild;
+            var _el$51 = _tmpl$164(), _el$52 = _el$51.firstChild;
             spread(_el$51, mergeProps(() => getHoverDataAttributes({
               messageIds: [message.id],
               partIds: visibleParts().map((part) => part.id)
@@ -11158,7 +11769,7 @@ var MessagesPreview = (props) => {
                 return message.content;
               },
               get children() {
-                var _el$53 = _tmpl$143();
+                var _el$53 = _tmpl$144();
                 insert(_el$53, () => message.content);
                 effect(() => className(_el$53, styles().hookDetails.messageContent));
                 return _el$53;
@@ -11229,14 +11840,14 @@ var MessagesPreview = (props) => {
                   },
                   get fallback() {
                     return (() => {
-                      var _el$60 = _tmpl$05();
+                      var _el$60 = _tmpl$06();
                       insert(_el$60, () => part.content);
                       effect(() => className(_el$60, styles().hookDetails.previewPartContent));
                       return _el$60;
                     })();
                   },
                   get children() {
-                    var _el$59 = _tmpl$143();
+                    var _el$59 = _tmpl$144();
                     insert(_el$59, createComponent(For, {
                       get each() {
                         return part.jsonItems;
@@ -11297,13 +11908,13 @@ var HookMessageTimeline = (props) => {
       })();
     },
     get children() {
-      var _el$64 = _tmpl$143();
+      var _el$64 = _tmpl$144();
       insert(_el$64, createComponent(For, {
         get each() {
           return props.messages;
         },
         children: (message) => (() => {
-          var _el$66 = _tmpl$163(), _el$67 = _el$66.firstChild;
+          var _el$66 = _tmpl$164(), _el$67 = _el$66.firstChild;
           spread(_el$66, mergeProps(() => getHoverDataAttributes({
             messageIds: [message.id]
           }), {
@@ -11329,7 +11940,7 @@ var HookMessageTimeline = (props) => {
               return message.content;
             },
             get children() {
-              var _el$68 = _tmpl$143();
+              var _el$68 = _tmpl$144();
               insert(_el$68, () => message.content);
               effect(() => className(_el$68, styles().hookDetails.messageContent));
               return _el$68;
@@ -11363,14 +11974,14 @@ var HookMessageTimeline = (props) => {
                 },
                 get fallback() {
                   return (() => {
-                    var _el$72 = _tmpl$05();
+                    var _el$72 = _tmpl$06();
                     insert(_el$72, () => part.content);
                     effect(() => className(_el$72, styles().hookDetails.previewPartContent));
                     return _el$72;
                   })();
                 },
                 get children() {
-                  var _el$71 = _tmpl$143();
+                  var _el$71 = _tmpl$144();
                   insert(_el$71, createComponent(For, {
                     get each() {
                       return part.jsonItems;
@@ -11427,7 +12038,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$214(), _el$77 = _el$76.firstChild, _el$78 = _el$77.nextSibling;
+    var _el$76 = _tmpl$215(), _el$77 = _el$76.firstChild, _el$78 = _el$77.nextSibling;
     insert(_el$77, createComponent(Show, {
       get when() {
         return props.hook.tools.length > 0;
@@ -11509,7 +12120,7 @@ var ToolsView = (props) => {
           })();
         },
         get children() {
-          var _el$85 = _tmpl$143();
+          var _el$85 = _tmpl$144();
           insert(_el$85, createComponent(For, {
             get each() {
               return savedFixtures();
@@ -11518,7 +12129,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, () => formatTime2(fixture.createdAt), null);
+              insert(_el$90, () => formatTime3(fixture.createdAt), null);
               _el$93.$$click = () => applyToolFixture(fixture);
               _el$94.$$click = () => deleteToolFixture(fixture.id);
               effect((_p$) => {
@@ -11569,7 +12180,7 @@ var ToolsView = (props) => {
 var JsonPanel = (props) => {
   const styles = useStyles();
   return (() => {
-    var _el$95 = _tmpl$143();
+    var _el$95 = _tmpl$144();
     insert(_el$95, createComponent(JsonTree, {
       get value() {
         return props.value;
@@ -12012,13 +12623,13 @@ function jsonSafeValue(value) {
     return `[ai-devtools] unserializable value: ${error instanceof Error ? error.message : String(error)}`;
   }
 }
-function formatTime2(timestamp) {
+function formatTime3(timestamp) {
   return new Date(timestamp).toLocaleTimeString();
 }
 delegateEvents(["mouseover", "click"]);
 
 // src/components/Shell.tsx
-var _tmpl$40 = /* @__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$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>`);
 function Devtools(props) {
   return createComponent(ThemeContextProvider, {
     get theme() {
@@ -12100,7 +12711,7 @@ function DevtoolsContent() {
   });
   return createComponent(MainPanel, {
     get children() {
-      var _el$ = _tmpl$40(), _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$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;
       insert(_el$, createComponent(Header, {
         get children() {
           return createComponent(HeaderLogo, {