@tanstack/ai-devtools-core 0.4.24 → 0.5.0

package/dist/Shell/{54VAGOHT.js → G2SFOZV2.js}

@@ -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`
@@ -4370,8 +4482,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];
@@ -4379,7 +4491,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] = {
@@ -4393,7 +4505,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;
   }
@@ -4409,8 +4521,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) {
@@ -4418,7 +4530,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) {
@@ -4441,7 +4553,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;
@@ -4453,8 +4565,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);
@@ -4484,11 +4596,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) {
@@ -4530,6 +4642,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() {
@@ -4543,7 +4756,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();
@@ -4795,6 +5009,11 @@ var AIProvider = (props) => {
       clearHookRegistry(hooks);
     }));
   }
+  function clearMemory() {
+    setState("memory", produce((memory) => {
+      clearMemoryRegistry(memory);
+    }));
+  }
   function selectHook(id) {
     setState("hooks", produce((hooks) => {
       setActiveHook(hooks, id);
@@ -5097,6 +5316,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);
@@ -6671,6 +6913,7 @@ var AIProvider = (props) => {
     clearAllConversations,
     selectConversation,
     clearHooks,
+    clearMemory,
     selectHook,
     saveToolFixture,
     deleteToolFixture,
@@ -6715,6 +6958,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) {
@@ -6829,17 +7082,7 @@ var HookDashboard = () => {
               get children() {
                 return ssr(_tmpl$6, ssrAttribute("class", escape(styles().hookDashboard.updateBadge, true), false), escape(unseenCount()));
               }
-            })), ssrAttribute("class", escape(styles().hookDashboard.rowId, true), false), escape(createComponent(Show, {
-              get when() {
-                return hook.displayName;
-              },
-              get fallback() {
-                return hook.id;
-              },
-              get children() {
-                return [hook.hookName, " - ", hook.id];
-              }
-            })), ssrAttribute("class", escape(styles().hookDashboard.rowMeta, true), false), `${escape(styles().hookDashboard.lifecycleBadge, true)} ${hook.lifecycle === "streaming" ? escape(styles().hookDashboard.lifecycleStreaming, true) : hook.lifecycle === "errored" ? escape(styles().hookDashboard.lifecycleErrored, true) : ""}`, escape(hook.lifecycle), escape(createComponent(Show, {
+            })), ssrAttribute("class", escape(styles().hookDashboard.rowId, true), false), escape(getHookIdentitySubtitle(hook)), ssrAttribute("class", escape(styles().hookDashboard.rowMeta, true), false), `${escape(styles().hookDashboard.lifecycleBadge, true)} ${hook.lifecycle === "streaming" ? escape(styles().hookDashboard.lifecycleStreaming, true) : hook.lifecycle === "errored" ? escape(styles().hookDashboard.lifecycleErrored, true) : ""}`, escape(hook.lifecycle), escape(createComponent(Show, {
               get when() {
                 return hook.outputKind;
               },
@@ -8981,31 +9224,198 @@ function formatTime(timestamp) {
 function isRecord3(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
+var _tmpl$40 = ["<div", ' data-testid="ai-devtools-memory-panel">', "</div>"];
+var _tmpl$213 = ["<div", ">No memory activity yet. Send a message through a chat wired with<code> memoryMiddleware</code> and recall/save events will appear here.</div>"];
+var _tmpl$311 = ["<select", ' data-testid="ai-devtools-memory-scope-select">', "</select>"];
+var _tmpl$46 = ["<div", "><div", ">", '</div><button type="button"', ">Clear</button></div>"];
+var _tmpl$56 = ["<div", ">", "</div>"];
+var _tmpl$66 = ["<section", "><div", ">Stored records (", ")", "</div>", "</section>"];
+var _tmpl$76 = ["<section", "><div", ">listFacts() (", ")</div>", "</section>"];
+var _tmpl$86 = ["<section", "><div", ">Operations (", ")</div>", "</section>"];
+var _tmpl$96 = ["<span", ">", "</span>"];
+var _tmpl$05 = ["<option", ">", "", "</option>"];
+var _tmpl$114 = ["<span", ">snapshot ", "</span>"];
+var _tmpl$105 = ["<span>", "</span>"];
+var _tmpl$115 = ["<span>importance ", "</span>"];
+var _tmpl$124 = ["<div", ' data-testid="ai-devtools-memory-record"><div', "><span", ">", "</span>", "", "<span", ">", "</span></div><div", ">", "</div></div>"];
+var _tmpl$134 = ["<div", ">No facts.</div>"];
+var _tmpl$143 = ["<span", ">", ": </span>"];
+var _tmpl$153 = ["<div", "><div", ">", "", "</div></div>"];
+var _tmpl$163 = ["<div", ">No operations recorded.</div>"];
+var _tmpl$173 = ['<div class="', '" data-testid="ai-devtools-memory-event"><div', "><span", ">", "</span><span", ">", "</span></div><div", ">", "</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 ssr(_tmpl$40, ssrAttribute("class", escape(styles().memoryPanel.container, true), false), escape(createComponent(Show, {
+    get when() {
+      return scope();
+    },
+    get fallback() {
+      return ssr(_tmpl$213, ssrAttribute("class", escape(styles().memoryPanel.empty, true), false));
+    },
+    children: (activeScope) => [ssr(_tmpl$46, ssrAttribute("class", escape(styles().memoryPanel.toolbar, true), false), ssrAttribute("class", escape(styles().memoryPanel.scopeControls, true), false), escape(createComponent(Show, {
+      get when() {
+        return scopeKeys().length > 1;
+      },
+      get fallback() {
+        return ssr(_tmpl$96, ssrAttribute("class", escape(styles().memoryPanel.badge, true), false), escape(activeScope().adapter) ?? "memory");
+      },
+      get children() {
+        return ssr(_tmpl$311, ssrAttribute("class", escape(styles().memoryPanel.scopeSelect, true), false) + ssrAttribute("value", escape(selectedKey(), true) ?? "", false), escape(createComponent(For, {
+          get each() {
+            return scopeKeys();
+          },
+          children: (key) => {
+            const entry = state.memory.scopes[key];
+            const label = entry ? memoryScopeLabel(entry) : key;
+            return ssr(_tmpl$05, ssrAttribute("value", escape(key, true), false), entry?.adapter ? `${escape(entry.adapter)} \xB7 ` : "", label.length > 40 ? `${escape(label.slice(0, 40))}\u2026` : escape(label));
+          }
+        })));
+      }
+    })), ssrAttribute("class", escape(styles().memoryPanel.clearButton, true), false)), ssr(_tmpl$66, ssrAttribute("class", escape(styles().memoryPanel.section, true), false), ssrAttribute("class", escape(styles().memoryPanel.sectionTitle, true), false), escape(records().length), escape(createComponent(Show, {
+      get when() {
+        return activeScope().snapshot;
+      },
+      children: (snap) => ssr(_tmpl$114, ssrAttribute("class", escape(styles().memoryPanel.time, true), false), escape(formatTime2(snap().takenAt)))
+    })), escape(createComponent(Show, {
+      get when() {
+        return records().length > 0;
+      },
+      get fallback() {
+        return ssr(_tmpl$56, ssrAttribute("class", escape(styles().memoryPanel.sectionEmpty, true), false), activeScope().snapshot ? "Snapshot is empty." : "This adapter does not expose inspect() \u2014 see the timeline below for activity.");
+      },
+      get children() {
+        return ssr(_tmpl$56, ssrAttribute("class", escape(styles().memoryPanel.list, true), false), escape(createComponent(For, {
+          get each() {
+            return records();
+          },
+          children: (rec) => ssr(_tmpl$124, ssrAttribute("class", escape(styles().memoryPanel.row, true), false), ssrAttribute("class", escape(styles().memoryPanel.rowHeader, true), false), ssrAttribute("class", escape(styles().memoryPanel.badge, true), false), escape(rec.kind), escape(createComponent(Show, {
+            get when() {
+              return rec.role;
+            },
+            get children() {
+              return ssr(_tmpl$105, escape(rec.role));
+            }
+          })), escape(createComponent(Show, {
+            get when() {
+              return rec.importance !== void 0;
+            },
+            get children() {
+              return ssr(_tmpl$115, escape(rec.importance?.toFixed(2)));
+            }
+          })), ssrAttribute("class", escape(styles().memoryPanel.time, true), false), escape(formatTime2(rec.createdAt)), ssrAttribute("class", escape(styles().memoryPanel.rowText, true), false), escape(rec.text))
+        })));
+      }
+    }))), ssr(_tmpl$76, ssrAttribute("class", escape(styles().memoryPanel.section, true), false), ssrAttribute("class", escape(styles().memoryPanel.sectionTitle, true), false), escape(facts().length), escape(createComponent(Show, {
+      get when() {
+        return facts().length > 0;
+      },
+      get fallback() {
+        return ssr(_tmpl$134, ssrAttribute("class", escape(styles().memoryPanel.sectionEmpty, true), false));
+      },
+      get children() {
+        return ssr(_tmpl$56, ssrAttribute("class", escape(styles().memoryPanel.list, true), false), escape(createComponent(For, {
+          get each() {
+            return facts();
+          },
+          children: (fact) => ssr(_tmpl$153, ssrAttribute("class", escape(styles().memoryPanel.row, true), false), ssrAttribute("class", escape(styles().memoryPanel.rowText, true), false), escape(createComponent(Show, {
+            get when() {
+              return fact.source;
+            },
+            get children() {
+              return ssr(_tmpl$143, ssrAttribute("class", escape(styles().memoryPanel.rowHeader, true), false), escape(fact.source));
+            }
+          })), escape(fact.text))
+        })));
+      }
+    }))), ssr(_tmpl$86, ssrAttribute("class", escape(styles().memoryPanel.section, true), false), ssrAttribute("class", escape(styles().memoryPanel.sectionTitle, true), false), escape(events().length), escape(createComponent(Show, {
+      get when() {
+        return events().length > 0;
+      },
+      get fallback() {
+        return ssr(_tmpl$163, ssrAttribute("class", escape(styles().memoryPanel.sectionEmpty, true), false));
+      },
+      get children() {
+        return ssr(_tmpl$56, ssrAttribute("class", escape(styles().memoryPanel.list, true), false), escape(createComponent(For, {
+          get each() {
+            return events();
+          },
+          children: (event) => ssr(_tmpl$173, `${escape(styles().memoryPanel.row, true)} ${event.type === "error" ? escape(styles().memoryPanel.rowError, true) : ""}`, ssrAttribute("class", escape(styles().memoryPanel.rowHeader, true), false), ssrAttribute("class", escape(styles().memoryPanel.badge, true), false), escape(event.type), ssrAttribute("class", escape(styles().memoryPanel.time, true), false), escape(formatTime2(event.timestamp)), ssrAttribute("class", escape(styles().memoryPanel.rowText, true), false), escape(eventSummary(event)))
+        })));
+      }
+    })))]
+  })));
+};
 
 // src/components/hooks/HookDetails.tsx
-var _tmpl$40 = ["<aside", ' data-testid="ai-devtools-preview-pane"><div', ">", "</div>", "</aside>"];
-var _tmpl$213 = ["<div", ' data-testid="ai-devtools-hook-detail">', "<nav", ' data-testid="ai-devtools-hook-tabs">', "", "", '</nav><div class="', '"><main', ' data-testid="ai-devtools-primary-pane">', "", "", "</main>", "</div></div>"];
-var _tmpl$311 = ["<div", ' data-testid="ai-devtools-dashboard-overview"><header', "><div><div", ">Hooks Dashboard</div><div", ">Select a hook from the left or open one of the active hooks below.</div></div></header><div", ">", "", "", "", "", "", "", "", "</div><div", ">", "</div></div>"];
-var _tmpl$46 = ["<div", ">Open a page with TanStack AI hooks to inspect live state.</div>"];
-var _tmpl$56 = ["<section", ' data-testid="ai-devtools-overview-category"', "><div", "><span>", "</span><span>", "</span></div>", "</section>"];
-var _tmpl$66 = ["<span", ">running</span>"];
-var _tmpl$76 = ["<span", ">", " new</span>"];
-var _tmpl$86 = ['<button type="button" data-testid="ai-devtools-overview-hook"', "><div", "><span", ">", "</span><span", ">", "</span></div><div", "><span", ">", "</span>", "", "</div></button>"];
-var _tmpl$96 = ["<div", "><span", ">", "</span><span", ">", "</span></div>"];
-var _tmpl$05 = ["<span", ">", "</span>"];
-var _tmpl$114 = ['<span data-testid="ai-devtools-hook-technical-name">', "</span>"];
-var _tmpl$105 = ["<span>thread ", "</span>"];
-var _tmpl$115 = ["<span>", "</span>"];
-var _tmpl$124 = ["<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", ">", "", "</div></header>"];
-var _tmpl$134 = ['<button type="button" data-testid="ai-devtools-hook-tab"', ' class="', '">', "</button>"];
-var _tmpl$143 = ["<div", "><section", "><div", ">Current State</div>", "</section></div>"];
-var _tmpl$153 = ["<div", ">", "", "</div>"];
-var _tmpl$163 = ["<div", ">No messages.</div>"];
-var _tmpl$173 = ["<div", ">", "</div>"];
+var _tmpl$41 = ["<aside", ' data-testid="ai-devtools-preview-pane"><div', ">", "</div>", "</aside>"];
+var _tmpl$214 = ["<div", ' data-testid="ai-devtools-hook-detail">', "<nav", ' data-testid="ai-devtools-hook-tabs">', "", "", "", '</nav><div class="', '"><main', ' data-testid="ai-devtools-primary-pane">', "", "", "", "</main>", "</div></div>"];
+var _tmpl$312 = ["<div", ' data-testid="ai-devtools-dashboard-overview"><header', "><div><div", ">Hooks Dashboard</div><div", ">Select a hook from the left or open one of the active hooks below.</div></div></header><div", ">", "", "", "", "", "", "", "", "</div><div", ">", "</div></div>"];
+var _tmpl$47 = ["<div", ">Open a page with TanStack AI hooks to inspect live state.</div>"];
+var _tmpl$57 = ["<section", ' data-testid="ai-devtools-overview-category"', "><div", "><span>", "</span><span>", "</span></div>", "</section>"];
+var _tmpl$67 = ["<span", ">running</span>"];
+var _tmpl$77 = ["<span", ">", " new</span>"];
+var _tmpl$87 = ['<button type="button" data-testid="ai-devtools-overview-hook"', "><div", "><span", ">", "</span><span", ">", "</span></div><div", "><span", ">", "</span>", "", "</div></button>"];
+var _tmpl$97 = ["<div", "><span", ">", "</span><span", ">", "</span></div>"];
+var _tmpl$06 = ["<span", ">", "</span>"];
+var _tmpl$116 = ['<span data-testid="ai-devtools-hook-technical-name">', "</span>"];
+var _tmpl$106 = ['<span data-testid="ai-devtools-hook-registry-id">id ', "</span>"];
+var _tmpl$117 = ["<span>", "</span>"];
+var _tmpl$125 = ["<header", ' data-testid="ai-devtools-hook-header"', "><div", "><div", "><span", ' data-testid="ai-devtools-hook-title">', "</span><span", ">", "</span>", "</div><div", ">", '<span data-testid="ai-devtools-hook-identity">', "</span>", "", "</div></div><div", ">", "", "</div></header>"];
+var _tmpl$135 = ['<button type="button" data-testid="ai-devtools-hook-tab"', ' class="', '">', "</button>"];
+var _tmpl$144 = ["<div", "><section", "><div", ">Current State</div>", "</section></div>"];
+var _tmpl$154 = ["<div", ">", "", "</div>"];
+var _tmpl$164 = ["<div", ">No messages.</div>"];
+var _tmpl$174 = ["<div", ">", "</div>"];
 var _tmpl$183 = ["<div", '><button type="button"', ' data-testid="ai-devtools-preview-save-tool-call">Save</button><button type="button"', ' data-testid="ai-devtools-preview-replay-tool-call">Replay</button></div>'];
 var _tmpl$193 = ['<div class="', '">', "</div>"];
 var _tmpl$202 = ["<div", "><span", ">", "</span><div", ">", "</div></div>"];
-var _tmpl$214 = ["<div", ">No messages yet. Start a conversation to see messages here.</div>"];
+var _tmpl$215 = ["<div", ">No messages yet. Start a conversation to see messages here.</div>"];
 var _tmpl$223 = ["<div", ' data-testid="ai-devtools-tools"><div', ">", "</div><div", ">", "</div></div>"];
 var _tmpl$232 = ["<div", ">No tools.</div>"];
 var _tmpl$242 = ["<span", ">approval</span>"];
@@ -9044,7 +9454,7 @@ var HookDetails = () => {
     return Boolean(outputKind && outputKind !== "chat" && outputKind !== "structured");
   });
   createEffect(() => {
-    if (isGenerationHook() && activeTab() === "tools") {
+    if (isGenerationHook() && (activeTab() === "tools" || activeTab() === "memory")) {
       setActiveTab("conversation");
     }
   });
@@ -9083,7 +9493,7 @@ var HookDetails = () => {
         }
       });
     },
-    children: (activeHook) => ssr(_tmpl$213, ssrAttribute("class", escape(styles().hookDetails.container, true), false), escape(createComponent(HookHeader, {
+    children: (activeHook) => ssr(_tmpl$214, ssrAttribute("class", escape(styles().hookDetails.container, true), false), escape(createComponent(HookHeader, {
       get hook() {
         return activeHook();
       },
@@ -9129,6 +9539,20 @@ var HookDetails = () => {
         return activeTab();
       },
       onSelect: setActiveTab
+    })), escape(createComponent(Show, {
+      get when() {
+        return !isGenerationHook();
+      },
+      get children() {
+        return createComponent(TabButton, {
+          label: "Memory",
+          tab: "memory",
+          get activeTab() {
+            return activeTab();
+          },
+          onSelect: setActiveTab
+        });
+      }
     })), `${escape(styles().hookDetails.body, true)} ${showSecondaryPane() ? "" : escape(styles().hookDetails.bodySinglePane, true)}`, ssrAttribute("class", escape(styles().hookDetails.primary, true), false), escape(createComponent(Show, {
       get when() {
         return activeTab() === "conversation";
@@ -9189,12 +9613,19 @@ var HookDetails = () => {
           }
         });
       }
+    })), escape(createComponent(Show, {
+      get when() {
+        return activeTab() === "memory";
+      },
+      get children() {
+        return createComponent(MemoryPanel, {});
+      }
     })), escape(createComponent(Show, {
       get when() {
         return showSecondaryPane();
       },
       get children() {
-        return ssr(_tmpl$40, ssrAttribute("class", escape(styles().hookDetails.previewPane, true), false), ssrAttribute("class", escape(styles().hookDetails.previewHeader, true), false), isGenerationHook() ? "Generated Output" : "User View", escape(createComponent(Show, {
+        return ssr(_tmpl$41, ssrAttribute("class", escape(styles().hookDetails.previewPane, true), false), ssrAttribute("class", escape(styles().hookDetails.previewHeader, true), false), isGenerationHook() ? "Generated Output" : "User View", escape(createComponent(Show, {
           get when() {
             return isGenerationHook();
           },
@@ -9242,10 +9673,10 @@ var HookOverview = (props) => {
       return hooks().length > 0;
     },
     get fallback() {
-      return ssr(_tmpl$46, ssrAttribute("class", escape(styles().hookDetails.empty, true), false));
+      return ssr(_tmpl$47, ssrAttribute("class", escape(styles().hookDetails.empty, true), false));
     },
     get children() {
-      return ssr(_tmpl$311, ssrAttribute("class", escape(styles().hookDetails.overview, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewHeader, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewTitle, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewSubtitle, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewMetricGrid, true), false), escape(createComponent(OverviewMetric, {
+      return ssr(_tmpl$312, ssrAttribute("class", escape(styles().hookDetails.overview, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewHeader, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewTitle, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewSubtitle, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewMetricGrid, true), false), escape(createComponent(OverviewMetric, {
         label: "active hooks",
         get value() {
           return summary().active;
@@ -9289,36 +9720,26 @@ var HookOverview = (props) => {
         get each() {
           return groups();
         },
-        children: (group) => ssr(_tmpl$56, ssrAttribute("class", escape(styles().hookDetails.overviewGroupCard, true), false), ssrAttribute("data-category", escape(group.id, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewGroupHeader, true), false), escape(group.label), escape(group.hooks.length), escape(createComponent(For, {
+        children: (group) => ssr(_tmpl$57, ssrAttribute("class", escape(styles().hookDetails.overviewGroupCard, true), false), ssrAttribute("data-category", escape(group.id, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewGroupHeader, true), false), escape(group.label), escape(group.hooks.length), escape(createComponent(For, {
           get each() {
             return group.hooks;
           },
           children: (hook) => {
             const running = createMemo(() => isHookRunning(hook, state.hooks.runs));
             const unseenCount = createMemo(() => getHookUnseenEventCount(state.hooks, hook.id));
-            return ssr(_tmpl$86, ssrAttribute("data-hook-id", escape(hook.id, true), false) + ssrAttribute("data-hook-name", escape(hook.hookName, true), false) + ssrAttribute("data-display-name", escape(getHookDisplayName(hook), true), false) + ssrAttribute("class", escape(styles().hookDetails.overviewHookButton, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewHookMain, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewHookTitle, true), false), escape(getHookDisplayName(hook)), ssrAttribute("class", escape(styles().hookDetails.overviewHookId, true), false), escape(createComponent(Show, {
-              get when() {
-                return hook.displayName;
-              },
-              get fallback() {
-                return hook.id;
-              },
-              get children() {
-                return [hook.hookName, " - ", hook.id];
-              }
-            })), ssrAttribute("class", escape(styles().hookDetails.overviewHookMeta, true), false), ssrAttribute("class", escape(styles().hookDetails.kind, true), false), escape(hook.outputKind) ?? "hook", escape(createComponent(Show, {
+            return ssr(_tmpl$87, ssrAttribute("data-hook-id", escape(hook.id, true), false) + ssrAttribute("data-hook-name", escape(hook.hookName, true), false) + ssrAttribute("data-display-name", escape(getHookDisplayName(hook), true), false) + ssrAttribute("class", escape(styles().hookDetails.overviewHookButton, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewHookMain, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewHookTitle, true), false), escape(getHookDisplayName(hook)), ssrAttribute("class", escape(styles().hookDetails.overviewHookId, true), false), escape(getHookIdentitySubtitle(hook)), ssrAttribute("class", escape(styles().hookDetails.overviewHookMeta, true), false), ssrAttribute("class", escape(styles().hookDetails.kind, true), false), escape(hook.outputKind) ?? "hook", escape(createComponent(Show, {
               get when() {
                 return running();
               },
               get children() {
-                return ssr(_tmpl$66, ssrAttribute("class", escape(styles().hookDetails.lifecycle, true), false));
+                return ssr(_tmpl$67, ssrAttribute("class", escape(styles().hookDetails.lifecycle, true), false));
               }
             })), escape(createComponent(Show, {
               get when() {
                 return unseenCount() > 0;
               },
               get children() {
-                return ssr(_tmpl$76, ssrAttribute("class", escape(styles().hookDetails.kind, true), false), escape(unseenCount()));
+                return ssr(_tmpl$77, ssrAttribute("class", escape(styles().hookDetails.kind, true), false), escape(unseenCount()));
               }
             })));
           }
@@ -9329,37 +9750,37 @@ var HookOverview = (props) => {
 };
 var OverviewMetric = (props) => {
   const styles = useStyles();
-  return ssr(_tmpl$96, ssrAttribute("class", escape(styles().hookDetails.overviewMetricCard, true), false), ssrAttribute("class", escape(styles().hookDetails.metricValue, true), false), escape(props.value), ssrAttribute("class", escape(styles().hookDetails.metricLabel, true), false), escape(props.label));
+  return ssr(_tmpl$97, ssrAttribute("class", escape(styles().hookDetails.overviewMetricCard, true), false), ssrAttribute("class", escape(styles().hookDetails.metricValue, true), false), escape(props.value), ssrAttribute("class", escape(styles().hookDetails.metricLabel, true), false), escape(props.label));
 };
 var HookHeader = (props) => {
   const styles = useStyles();
-  return ssr(_tmpl$124, ssrAttribute("class", escape(styles().hookDetails.header, true), false), ssrAttribute("data-hook-id", escape(props.hook.id, true), false) + ssrAttribute("data-hook-name", escape(props.hook.hookName, true), false) + ssrAttribute("data-display-name", escape(getHookDisplayName(props.hook), true), false), ssrAttribute("class", escape(styles().hookDetails.headerMain, true), false), ssrAttribute("class", escape(styles().hookDetails.titleRow, true), false), ssrAttribute("class", escape(styles().hookDetails.title, true), false), escape(getHookDisplayName(props.hook)), ssrAttribute("class", escape(styles().hookDetails.lifecycle, true), false), escape(props.hook.lifecycle), escape(createComponent(Show, {
+  return ssr(_tmpl$125, ssrAttribute("class", escape(styles().hookDetails.header, true), false), ssrAttribute("data-hook-id", escape(props.hook.id, true), false) + ssrAttribute("data-hook-name", escape(props.hook.hookName, true), false) + ssrAttribute("data-display-name", escape(getHookDisplayName(props.hook), true), false), ssrAttribute("class", escape(styles().hookDetails.headerMain, true), false), ssrAttribute("class", escape(styles().hookDetails.titleRow, true), false), ssrAttribute("class", escape(styles().hookDetails.title, true), false), escape(getHookDisplayName(props.hook)), ssrAttribute("class", escape(styles().hookDetails.lifecycle, true), false), escape(props.hook.lifecycle), escape(createComponent(Show, {
     get when() {
       return props.hook.outputKind;
     },
     get children() {
-      return ssr(_tmpl$05, ssrAttribute("class", escape(styles().hookDetails.kind, true), false), escape(props.hook.outputKind));
+      return ssr(_tmpl$06, ssrAttribute("class", escape(styles().hookDetails.kind, true), false), escape(props.hook.outputKind));
     }
   })), ssrAttribute("class", escape(styles().hookDetails.identity, true), false), escape(createComponent(Show, {
     get when() {
       return props.hook.displayName;
     },
     get children() {
-      return ssr(_tmpl$114, escape(props.hook.hookName));
+      return ssr(_tmpl$116, escape(props.hook.hookName));
     }
-  })), escape(props.hook.id), escape(createComponent(Show, {
+  })), props.hook.threadId ? `thread ${escape(props.hook.threadId)}` : escape(getHookIdentityLabel(props.hook)), escape(createComponent(Show, {
     get when() {
-      return props.hook.threadId;
+      return props.hook.threadId && props.hook.threadId !== props.hook.id;
     },
     get children() {
-      return ssr(_tmpl$105, escape(props.hook.threadId));
+      return ssr(_tmpl$106, escape(props.hook.id));
     }
   })), escape(createComponent(Show, {
     get when() {
       return props.hook.framework;
     },
     get children() {
-      return ssr(_tmpl$115, escape(props.hook.framework));
+      return ssr(_tmpl$117, escape(props.hook.framework));
     }
   })), ssrAttribute("class", escape(styles().hookDetails.metrics, true), false), escape(createComponent(Metric, {
     label: "runs",
@@ -9396,7 +9817,7 @@ var HookHeader = (props) => {
 };
 var Metric = (props) => {
   const styles = useStyles();
-  return ssr(_tmpl$96, ssrAttribute("class", escape(styles().hookDetails.metric, true), false) + ssrAttribute("data-testid", props.testId ? `ai-devtools-hook-metric-${escape(props.testId, true)}` : escape(void 0, true), false), ssrAttribute("class", escape(styles().hookDetails.metricValue, true), false), escape(props.value), ssrAttribute("class", escape(styles().hookDetails.metricLabel, true), false), escape(props.label));
+  return ssr(_tmpl$97, ssrAttribute("class", escape(styles().hookDetails.metric, true), false) + ssrAttribute("data-testid", props.testId ? `ai-devtools-hook-metric-${escape(props.testId, true)}` : escape(void 0, true), false), ssrAttribute("class", escape(styles().hookDetails.metricValue, true), false), escape(props.value), ssrAttribute("class", escape(styles().hookDetails.metricLabel, true), false), escape(props.label));
 };
 function formatMetricValue(value) {
   return Intl.NumberFormat(void 0, {
@@ -9405,7 +9826,7 @@ function formatMetricValue(value) {
 }
 var TabButton = (props) => {
   const styles = useStyles();
-  return ssr(_tmpl$134, ssrAttribute("data-tab", escape(props.label, true), false), `${escape(styles().hookDetails.tab, true)} ${props.activeTab === props.tab ? escape(styles().hookDetails.tabActive, true) : ""}`, escape(props.label));
+  return ssr(_tmpl$135, ssrAttribute("data-tab", escape(props.label, true), false), `${escape(styles().hookDetails.tab, true)} ${props.activeTab === props.tab ? escape(styles().hookDetails.tabActive, true) : ""}`, escape(props.label));
 };
 var ConversationPanel = (props) => {
   const styles = useStyles();
@@ -9419,7 +9840,7 @@ var ConversationPanel = (props) => {
           return props.messages.length > 0;
         },
         get fallback() {
-          return ssr(_tmpl$143, ssrAttribute("class", escape(styles().hookDetails.stack, true), false), ssrAttribute("class", escape(styles().hookDetails.section, true), false), ssrAttribute("class", escape(styles().hookDetails.sectionTitle, true), false), escape(createComponent(JsonPanel, {
+          return ssr(_tmpl$144, ssrAttribute("class", escape(styles().hookDetails.stack, true), false), ssrAttribute("class", escape(styles().hookDetails.section, true), false), ssrAttribute("class", escape(styles().hookDetails.sectionTitle, true), false), escape(createComponent(JsonPanel, {
             get value() {
               return props.hook.state;
             },
@@ -9507,10 +9928,10 @@ var MessagesPreview = (props) => {
       return props.messages.length > 0;
     },
     get fallback() {
-      return ssr(_tmpl$163, ssrAttribute("class", escape(styles().hookDetails.emptySmall, true), false));
+      return ssr(_tmpl$164, ssrAttribute("class", escape(styles().hookDetails.emptySmall, true), false));
     },
     get children() {
-      return ssr(_tmpl$153, ssrAttribute("class", escape(styles().hookDetails.messages, true), false), escape(createComponent(Show, {
+      return ssr(_tmpl$154, ssrAttribute("class", escape(styles().hookDetails.messages, true), false), escape(createComponent(Show, {
         get when() {
           return pendingFixture();
         },
@@ -9541,12 +9962,12 @@ var MessagesPreview = (props) => {
             get ["data-role"]() {
               return message.role;
             }
-          }), [ssr(_tmpl$173, ssrAttribute("class", escape(styles().hookDetails.messageRole, true), false), escape(message.role)), escape(createComponent(Show, {
+          }), [ssr(_tmpl$174, ssrAttribute("class", escape(styles().hookDetails.messageRole, true), false), escape(message.role)), escape(createComponent(Show, {
             get when() {
               return message.content;
             },
             get children() {
-              return ssr(_tmpl$173, ssrAttribute("class", escape(styles().hookDetails.messageContent, true), false), escape(message.content));
+              return ssr(_tmpl$174, ssrAttribute("class", escape(styles().hookDetails.messageContent, true), false), escape(message.content));
             }
           })), escape(createComponent(For, {
             get each() {
@@ -9566,7 +9987,7 @@ var MessagesPreview = (props) => {
               get ["data-part-kind"]() {
                 return part.kind;
               }
-            }), [ssr(_tmpl$05, ssrAttribute("class", escape(styles().hookDetails.previewPartLabel, true), false), escape(part.label)), escape(createComponent(Show, {
+            }), [ssr(_tmpl$06, ssrAttribute("class", escape(styles().hookDetails.previewPartLabel, true), false), escape(part.label)), escape(createComponent(Show, {
               get when() {
                 return part.fixture;
               },
@@ -9578,7 +9999,7 @@ var MessagesPreview = (props) => {
                 return part.jsonItems?.length;
               },
               get fallback() {
-                return ssr(_tmpl$05, ssrAttribute("class", escape(styles().hookDetails.previewPartContent, true), false), escape(part.content));
+                return ssr(_tmpl$06, ssrAttribute("class", escape(styles().hookDetails.previewPartContent, true), false), escape(part.content));
               },
               get children() {
                 return ssr(_tmpl$193, `${escape(styles().hookDetails.previewJsonItems, true)} ${part.kind === "structured-output" ? escape(styles().hookDetails.previewJsonItemsCompare, true) : ""}`, escape(createComponent(For, {
@@ -9608,10 +10029,10 @@ var HookMessageTimeline = (props) => {
       return props.messages.length > 0;
     },
     get fallback() {
-      return ssr(_tmpl$214, ssrAttribute("class", escape(styles().hookDetails.emptySmall, true), false));
+      return ssr(_tmpl$215, ssrAttribute("class", escape(styles().hookDetails.emptySmall, true), false));
     },
     get children() {
-      return ssr(_tmpl$173, ssrAttribute("class", escape(styles().hookDetails.messageTimeline, true), false), escape(createComponent(For, {
+      return ssr(_tmpl$174, ssrAttribute("class", escape(styles().hookDetails.messageTimeline, true), false), escape(createComponent(For, {
         get each() {
           return props.messages;
         },
@@ -9628,12 +10049,12 @@ var HookMessageTimeline = (props) => {
           get ["class"]() {
             return `${styles().hookDetails.timelineMessage} ${isMessageHighlighted(message.id, props.hoverTarget) ? styles().hookDetails.timelineMessageHighlighted : ""}`;
           }
-        }), [ssr(_tmpl$173, ssrAttribute("class", escape(styles().hookDetails.messageRole, true), false), escape(message.role)), escape(createComponent(Show, {
+        }), [ssr(_tmpl$174, ssrAttribute("class", escape(styles().hookDetails.messageRole, true), false), escape(message.role)), escape(createComponent(Show, {
           get when() {
             return message.content;
           },
           get children() {
-            return ssr(_tmpl$173, ssrAttribute("class", escape(styles().hookDetails.messageContent, true), false), escape(message.content));
+            return ssr(_tmpl$174, ssrAttribute("class", escape(styles().hookDetails.messageContent, true), false), escape(message.content));
           }
         })), escape(createComponent(For, {
           get each() {
@@ -9653,12 +10074,12 @@ var HookMessageTimeline = (props) => {
             get ["data-part-kind"]() {
               return part.kind;
             }
-          }), [ssr(_tmpl$05, ssrAttribute("class", escape(styles().hookDetails.previewPartLabel, true), false), escape(part.label)), escape(createComponent(Show, {
+          }), [ssr(_tmpl$06, ssrAttribute("class", escape(styles().hookDetails.previewPartLabel, true), false), escape(part.label)), escape(createComponent(Show, {
             get when() {
               return part.jsonItems?.length;
             },
             get fallback() {
-              return ssr(_tmpl$05, ssrAttribute("class", escape(styles().hookDetails.previewPartContent, true), false), escape(part.content));
+              return ssr(_tmpl$06, ssrAttribute("class", escape(styles().hookDetails.previewPartContent, true), false), escape(part.content));
             },
             get children() {
               return ssr(_tmpl$193, `${escape(styles().hookDetails.previewJsonItems, true)} ${part.kind === "structured-output" ? escape(styles().hookDetails.previewJsonItemsCompare, true) : ""}`, escape(createComponent(For, {
@@ -9735,11 +10156,11 @@ var ToolsView = (props) => {
         return ssr(_tmpl$282, ssrAttribute("class", escape(styles().hookDetails.emptySmall, true), false));
       },
       get children() {
-        return ssr(_tmpl$173, ssrAttribute("class", escape(styles().hookDetails.eventList, true), false), escape(createComponent(For, {
+        return ssr(_tmpl$174, ssrAttribute("class", escape(styles().hookDetails.eventList, true), false), escape(createComponent(For, {
           get each() {
             return savedFixtures();
           },
-          children: (fixture) => ssr(_tmpl$292, ssrAttribute("class", escape(styles().hookDetails.fixtureRow, true), false), ssrAttribute("data-fixture-name", escape(fixture.name, true) ?? escape(fixture.toolName, true), false) + ssrAttribute("data-tool-name", escape(fixture.toolName, true), false), ssrAttribute("class", escape(styles().hookDetails.fixtureInfo, true), false), ssrAttribute("class", escape(styles().hookDetails.fixtureName, true), false), escape(fixture.name) ?? escape(fixture.toolName), ssrAttribute("class", escape(styles().hookDetails.fixtureMeta, true), false), escape(fixture.toolName), escape(formatTime2(fixture.createdAt)), ssrAttribute("class", escape(styles().hookDetails.fixtureRowActions, true), false), ssrAttribute("class", escape(styles().hookDetails.fixtureRowButton, true), false), `${escape(styles().hookDetails.fixtureRowButton, true)} ${escape(styles().hookDetails.fixtureDangerButton, true)}`)
+          children: (fixture) => ssr(_tmpl$292, ssrAttribute("class", escape(styles().hookDetails.fixtureRow, true), false), ssrAttribute("data-fixture-name", escape(fixture.name, true) ?? escape(fixture.toolName, true), false) + ssrAttribute("data-tool-name", escape(fixture.toolName, true), false), ssrAttribute("class", escape(styles().hookDetails.fixtureInfo, true), false), ssrAttribute("class", escape(styles().hookDetails.fixtureName, true), false), escape(fixture.name) ?? escape(fixture.toolName), ssrAttribute("class", escape(styles().hookDetails.fixtureMeta, true), false), escape(fixture.toolName), escape(formatTime3(fixture.createdAt)), ssrAttribute("class", escape(styles().hookDetails.fixtureRowActions, true), false), ssrAttribute("class", escape(styles().hookDetails.fixtureRowButton, true), false), `${escape(styles().hookDetails.fixtureRowButton, true)} ${escape(styles().hookDetails.fixtureDangerButton, true)}`)
         })));
       }
     })]
@@ -10086,12 +10507,12 @@ 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();
 }
 
 // src/components/Shell.tsx
-var _tmpl$41 = ["<div", ' data-testid="ai-devtools-panel">', "<div", "><div", ' data-testid="ai-devtools-left-panel" style="', '"><div', ">AI Hooks</div>", '</div><div class="', '"></div><div', ' data-testid="ai-devtools-right-panel" style="', '">', "</div></div></div>"];
+var _tmpl$48 = ["<div", ' data-testid="ai-devtools-panel">', "<div", "><div", ' data-testid="ai-devtools-left-panel" style="', '"><div', ">AI Hooks</div>", '</div><div class="', '"></div><div', ' data-testid="ai-devtools-right-panel" style="', '">', "</div></div></div>"];
 function Devtools(props) {
   return createComponent(ThemeContextProvider, {
     get theme() {
@@ -10164,7 +10585,7 @@ function DevtoolsContent() {
   });
   return createComponent(MainPanel, {
     get children() {
-      return ssr(_tmpl$41, ssrAttribute("class", escape(styles().shellRoot, true), false), escape(createComponent(Header, {
+      return ssr(_tmpl$48, ssrAttribute("class", escape(styles().shellRoot, true), false), escape(createComponent(Header, {
         get children() {
           return createComponent(HeaderLogo, {
             flavor: {