@tanstack/ai-devtools-core 0.5.17 → 0.5.20

package/dist/Shell/{3BTXBRTQ.js → TTHBDBPP.js}

@@ -6491,6 +6491,9 @@ var AIProvider = (props) => {
       }
       const newIteration = {
         requestId,
+        ...e.payload.runId ? {
+          runId: e.payload.runId
+        } : {},
         index: iteration,
         messageId,
         startedAt: e.payload.timestamp,
@@ -7330,6 +7333,241 @@ var formatDuration = (ms) => {
   if (ms < 1e3) return `${ms}ms`;
   return `${(ms / 1e3).toFixed(2)}s`;
 };
+
+// src/store/subagent-steps.ts
+function isRecord(value) {
+  return Boolean(value && typeof value === "object" && !Array.isArray(value));
+}
+function text(value) {
+  return typeof value === "string" ? value : "";
+}
+function collectSubagents(messages) {
+  const out = [];
+  let turn = -1;
+  const visit = (list, parentPath, parentTurn) => {
+    for (const message of list) {
+      if (!isRecord(message)) continue;
+      if (parentTurn === void 0 && message.role === "user") turn += 1;
+      if (!Array.isArray(message.parts)) continue;
+      for (const part of message.parts) {
+        if (!isRecord(part) || part.type !== "subagent") continue;
+        const subagent = part.subagent;
+        if (!isRecord(subagent) || typeof subagent.id !== "string") continue;
+        const name = text(subagent.name) || "subagent";
+        const path = parentPath ? `${parentPath} > ${name}` : name;
+        const error = isRecord(subagent.error) ? text(subagent.error.message) : "";
+        const childMessages = Array.isArray(subagent.messages) ? subagent.messages : [];
+        const info = {
+          id: subagent.id,
+          name,
+          path,
+          ...typeof subagent.status === "string" ? { status: subagent.status } : {},
+          ...error ? { error } : {},
+          turn: parentTurn ?? Math.max(turn, 0),
+          messages: childMessages
+        };
+        out.push(info);
+        visit(childMessages, path, info.turn);
+      }
+    }
+  };
+  visit(messages, void 0, void 0);
+  return out;
+}
+function subagentIdForRunId(runId, ids) {
+  if (!runId) return void 0;
+  if (ids.has(runId)) return runId;
+  const last = runId.slice(runId.lastIndexOf(":") + 1);
+  return last !== runId && ids.has(last) ? last : void 0;
+}
+function childRequestAgents(iterations, subagents) {
+  const ids = new Set(subagents.map((agent) => agent.id));
+  const pathById = new Map(subagents.map((agent) => [agent.id, agent.path]));
+  const out = /* @__PURE__ */ new Map();
+  for (const iteration of iterations) {
+    const id = subagentIdForRunId(iteration.runId, ids);
+    const path = id ? pathById.get(id) : void 0;
+    if (path && iteration.requestId) out.set(iteration.requestId, path);
+  }
+  return out;
+}
+function collectServerSteps(root, conversations, subagents) {
+  const ids = new Set(subagents.map((agent) => agent.id));
+  const iterations = [...root?.iterations ?? []];
+  const messages = [...root?.messages ?? []];
+  const seenSteps = new Set(
+    iterations.map((iteration) => `${iteration.requestId}:${iteration.index}`)
+  );
+  const seenMessages = new Set(messages.map((message) => message.id));
+  for (const conversation of conversations) {
+    if (conversation === root) continue;
+    const child = conversation.iterations.filter(
+      (iteration) => subagentIdForRunId(iteration.runId, ids)
+    );
+    if (child.length === 0) continue;
+    for (const iteration of child) {
+      const key = `${iteration.requestId}:${iteration.index}`;
+      if (seenSteps.has(key)) continue;
+      seenSteps.add(key);
+      iterations.push(iteration);
+    }
+    for (const message of conversation.messages) {
+      if (seenMessages.has(message.id)) continue;
+      seenMessages.add(message.id);
+      messages.push(message);
+    }
+  }
+  return { iterations, messages };
+}
+function timestampOf(value) {
+  if (value instanceof Date) return value.getTime();
+  if (typeof value !== "string" && typeof value !== "number") return void 0;
+  const time = new Date(value).getTime();
+  return Number.isNaN(time) ? void 0 : time;
+}
+function snapshotTurns(messages) {
+  const turns = [];
+  for (const message of messages) {
+    if (!isRecord(message) || message.role !== "user") continue;
+    const timestamp = timestampOf(message.createdAt);
+    if (timestamp === void 0 || typeof message.id !== "string") return [];
+    const content = Array.isArray(message.parts) ? message.parts.map(
+      (part) => isRecord(part) && part.type === "text" ? text(part.content) : ""
+    ).join("") : text(message.content);
+    turns.push({ id: message.id, role: "user", content, timestamp });
+  }
+  return turns;
+}
+function groupTimeline(iterations, messages, subagents, turns = []) {
+  const ids = new Set(subagents.map((agent) => agent.id));
+  const childRequests = childRequestAgents(iterations, subagents);
+  const rootIterations = iterations.filter(
+    (iteration) => !subagentIdForRunId(iteration.runId, ids)
+  );
+  const agents = subagents.map((agent) => {
+    const server = iterations.filter(
+      (iteration) => subagentIdForRunId(iteration.runId, ids) === agent.id
+    );
+    return server.length > 0 ? { agent, iterations: server, messages, source: "server" } : { agent, ...buildSubagentSteps(agent), source: "snapshot" };
+  });
+  const users = (turns.length > 0 ? [...turns] : messages.filter(
+    (message) => message.role === "user" && !(message.requestId && childRequests.has(message.requestId))
+  )).sort((a, b) => a.timestamp - b.timestamp);
+  if (users.length === 0) {
+    return rootIterations.length > 0 || agents.length > 0 ? [{ userMessage: null, iterations: rootIterations, agents }] : [];
+  }
+  const groups = [];
+  const first = users[0];
+  const early = first ? rootIterations.filter(
+    (iteration) => iteration.startedAt < first.timestamp
+  ) : [];
+  if (early.length > 0) {
+    groups.push({ userMessage: null, iterations: early, agents: [] });
+  }
+  users.forEach((user, turn) => {
+    const next = users[turn + 1];
+    const own = rootIterations.filter(
+      (iteration) => iteration.startedAt >= user.timestamp && (!next || iteration.startedAt < next.timestamp)
+    );
+    const isLast = turn === users.length - 1;
+    const ownAgents = agents.filter(
+      (group) => isLast ? group.agent.turn >= turn : group.agent.turn === turn
+    );
+    if (own.length > 0 || ownAgents.length > 0) {
+      groups.push({ userMessage: user, iterations: own, agents: ownAgents });
+    }
+  });
+  return groups;
+}
+function resultText(value) {
+  if (typeof value === "string") return value;
+  if (value === void 0) return "";
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+function buildSubagentSteps(agent) {
+  const iterations = [];
+  const messages = [];
+  let current;
+  const close = () => {
+    if (!current) return;
+    const index = iterations.length;
+    const { message, results } = current;
+    const hasContent = message.content || message.thinkingContent || (message.toolCalls?.length ?? 0) > 0 || results.length > 0;
+    if (hasContent) {
+      messages.push(message, ...results);
+      iterations.push({
+        requestId: `subagent:${agent.id}`,
+        index,
+        messageId: message.id,
+        // ponytail: the snapshot has no timestamps, so steps have no duration.
+        startedAt: 1,
+        completedAt: 1,
+        finishReason: (message.toolCalls?.length ?? 0) > 0 ? "tool_calls" : "stop",
+        middlewareEvents: [],
+        messageIds: [message.id, ...results.map((result) => result.id)]
+      });
+    }
+    current = void 0;
+  };
+  const open = () => {
+    const index = iterations.length;
+    current = {
+      message: {
+        id: `${agent.id}:step-${index}`,
+        role: "assistant",
+        content: "",
+        timestamp: 1,
+        toolCalls: []
+      },
+      results: [],
+      hasResult: false
+    };
+    return current;
+  };
+  for (const message of agent.messages) {
+    if (!isRecord(message) || message.role !== "assistant") continue;
+    if (!Array.isArray(message.parts)) continue;
+    for (const part of message.parts) {
+      if (!isRecord(part)) continue;
+      const step = part.type === "tool-result" ? current ?? open() : current && !current.hasResult ? current : (close(), open());
+      if (part.type === "thinking") {
+        step.message.thinkingContent = (step.message.thinkingContent ?? "") + text(part.content);
+      } else if (part.type === "text") {
+        step.message.content += text(part.content);
+      } else if (part.type === "tool-call") {
+        const toolCall = {
+          id: text(part.id),
+          name: text(part.name) || "tool",
+          arguments: text(part.arguments),
+          state: text(part.state),
+          ...part.output !== void 0 ? { result: part.output } : {}
+        };
+        step.message.toolCalls?.push(toolCall);
+      } else if (part.type === "tool-result") {
+        const toolCallId = text(part.toolCallId);
+        const content = resultText(part.content ?? part.error);
+        const call = step.message.toolCalls?.find((tc) => tc.id === toolCallId);
+        if (call && call.result === void 0) call.result = content;
+        step.results.push({
+          id: `${agent.id}:result-${toolCallId || step.results.length}`,
+          role: "tool",
+          content,
+          timestamp: 1
+        });
+        step.hasResult = true;
+      }
+    }
+  }
+  close();
+  const last = iterations.at(-1);
+  if (last && agent.status === "running") delete last.completedAt;
+  if (last && agent.status === "error") last.finishReason = "error";
+  return { iterations, messages };
+}
 var _tmpl$10 = ["<span", ">", "ms</span>"];
 var _tmpl$22 = ["<span", ">", "</span>"];
 var _tmpl$32 = ["<div", ' style="', '"><span class="', '">Middleware</span><span class="', '">', "</span><span", ">", "</span>", "", "", "</div>"];
@@ -7581,9 +7819,9 @@ var AssistantStep = (props) => {
   const contentLength = () => (msg().content || "").length;
   const isLong = () => contentLength() > 200;
   const preview = () => {
-    const text = msg().content || "";
-    if (text.length <= 200) return text;
-    return truncate(text, 200);
+    const text2 = msg().content || "";
+    if (text2.length <= 200) return text2;
+    return truncate(text2, 200);
   };
   return [ssrElement("div", mergeProps(() => getHoverDataAttributes({
     messageIds: [msg().id]
@@ -7701,8 +7939,8 @@ var ToolResultStep = (props) => {
   const [isOpen, setIsOpen] = createSignal(false);
   const msg = () => props.step.message;
   const parsedContent = () => {
-    const text = msg().content || "";
-    return tryParseJson(text) || text;
+    const text2 = msg().content || "";
+    return tryParseJson(text2) || text2;
   };
   return [ssrElement("div", mergeProps(() => getHoverDataAttributes({
     messageIds: [msg().id]
@@ -8130,49 +8368,14 @@ var _tmpl$132 = ["<div", "><span", ">Tools</span><div", ">", "</div></div>"];
 var _tmpl$142 = ["<div", "><span", ">System Prompts (", ")</span>", "</div>"];
 var _tmpl$152 = ["<div", "><span", ">Model Options</span><div", ">", "</div></div>"];
 var _tmpl$162 = ['<div class="', '"><div', "><div>", "", "", "</div></div></div>"];
-var _tmpl$172 = ['<div class="', '"><div', "><div", ">", "</div></div></div>"];
+var _tmpl$172 = ['<div class="', '"><div', "><div", ">", "", "</div></div></div>"];
 var _tmpl$182 = ['<span class="', '" title="', '">\u{1F3AF} ', "</span>"];
 var _tmpl$192 = ["<span", ">", "<span", ">", "</span></span>"];
+var _tmpl$202 = ['<div class="', '" style="', '" data-testid="ai-devtools-subagent-steps"', "><div", ' role="button" tabindex="0"', "><div", ">", "</div><div", "><span", ">", "</span><div", "><span", ">subagent</span>", "", "</div></div><div", '><span class="', '" title="', '">\u{1F504} ', '</span></div><span class="', '">\u25B6</span></div><div class="', '"><div', "><div", ">", "</div></div></div></div>"];
 var IterationTimeline = (props) => {
   const styles = useStyles();
   const s = () => styles().iterationTimeline;
-  const groups = createMemo(() => {
-    const userMessages = props.messages.filter((m) => m.role === "user");
-    const iters = props.iterations;
-    if (userMessages.length === 0) {
-      return iters.length > 0 ? [{
-        userMessage: null,
-        iterations: iters
-      }] : [];
-    }
-    const result = [];
-    const sortedUsers = [...userMessages].sort((a, b) => a.timestamp - b.timestamp);
-    for (const [u, currentUser] of sortedUsers.entries()) {
-      const nextUser = sortedUsers[u + 1];
-      const groupIters = iters.filter((it) => {
-        if (it.startedAt < currentUser.timestamp) return false;
-        if (nextUser && it.startedAt >= nextUser.timestamp) return false;
-        return true;
-      });
-      if (groupIters.length > 0) {
-        result.push({
-          userMessage: currentUser,
-          iterations: groupIters
-        });
-      }
-    }
-    const firstUser = sortedUsers[0];
-    if (firstUser) {
-      const earlyIters = iters.filter((it) => it.startedAt < firstUser.timestamp);
-      if (earlyIters.length > 0) {
-        result.unshift({
-          userMessage: null,
-          iterations: earlyIters
-        });
-      }
-    }
-    return result;
-  });
+  const groups = createMemo(() => groupTimeline(props.iterations, props.messages, props.subagents ?? [], props.turns ?? []));
   return ssr(_tmpl$34, ssrAttribute("class", escape(s().container, true), false), escape(createComponent(Show, {
     get when() {
       return props.iterations.length > 0;
@@ -8304,8 +8507,8 @@ var UserMessageGroupCard = (props) => {
   const userContent = () => {
     const msg = userMsg();
     if (!msg) return "(no user message)";
-    const text = msg.content || "";
-    return text.length > 120 ? text.slice(0, 120) + "..." : text;
+    const text2 = msg.content || "";
+    return text2.length > 120 ? text2.slice(0, 120) + "..." : text2;
   };
   const isUserMessageHighlighted = () => {
     const messageId = userMessageId();
@@ -8485,8 +8688,89 @@ var UserMessageGroupCard = (props) => {
         return props.onHoverTarget;
       }
     })
+  })), escape(createComponent(For, {
+    get each() {
+      return group().agents;
+    },
+    children: (agentGroup) => createComponent(SubagentStepsCard, {
+      group: agentGroup,
+      get hoverTarget() {
+        return props.hoverTarget;
+      },
+      get onHoverTarget() {
+        return props.onHoverTarget;
+      }
+    })
   })))], false);
 };
+var SubagentStepsCard = (props) => {
+  const styles = useStyles();
+  const s = () => styles().iterationTimeline;
+  const [isOpen, setIsOpen] = createSignal(true);
+  const group = createMemo(() => {
+    if (props.group) return props.group;
+    if (!props.agent) return void 0;
+    return {
+      agent: props.agent,
+      ...buildSubagentSteps(props.agent),
+      source: "snapshot"
+    };
+  });
+  const agent = () => group()?.agent;
+  const iterations = () => group()?.iterations ?? [];
+  const accentClass = () => {
+    const status = agent()?.status;
+    if (status === "running") return s().cardActive;
+    if (status === "error") return s().cardError;
+    if (status === "finished") return s().cardCompleted;
+    return "";
+  };
+  return createComponent(Show, {
+    get when() {
+      return agent();
+    },
+    children: (current) => ssr(_tmpl$202, `${escape(s().card, true)} ${escape(accentClass(), true)}`, ssrStyleProperty("margin-top:", "8px"), ssrAttribute("data-agent", escape(current().path, true), false) + ssrAttribute("data-source", escape(group()?.source, true), false), ssrAttribute("class", escape(s().cardHeader, true), false), ssrAttribute("aria-expanded", escape(isOpen(), true), false), ssrAttribute("class", escape(s().userBubble, true), false), escape(current().name.charAt(0).toUpperCase()), ssrAttribute("class", escape(s().cardHeaderContent, true), false), ssrAttribute("class", escape(s().cardHeaderLabel, true), false), escape(current().path), ssrAttribute("class", escape(s().cardSubtitle, true), false), ssrAttribute("class", escape(s().subtitleText, true), false), escape(createComponent(Show, {
+      get when() {
+        return current().status;
+      },
+      get children() {
+        return ssr(_tmpl$35, ssrAttribute("class", escape(s().subtitleBadge, true), false), escape(current().status));
+      }
+    })), escape(createComponent(Show, {
+      get when() {
+        return current().error;
+      },
+      get children() {
+        return ssr(_tmpl$35, ssrAttribute("class", escape(s().subtitleBadgeWarn, true), false), escape(current().error));
+      }
+    })), ssrAttribute("class", escape(s().cardHeaderBadges, true), false), `${escape(s().badge, true)} ${escape(s().badgeDuration, true)}`, `${escape(iterations().length, true)} ${iterations().length === 1 ? "iteration" : "iterations"}`, escape(iterations().length), `${escape(s().chevron, true)} ${isOpen() ? escape(s().chevronOpen, true) : ""}`, `${escape(s().cardBody, true)} ${isOpen() ? escape(s().cardBodyOpen, true) : ""}`, ssrAttribute("class", escape(s().cardBodyInner, true), false), ssrAttribute("class", escape(s().iterList, true), false), escape(createComponent(For, {
+      get each() {
+        return iterations();
+      },
+      children: (iteration, index) => createComponent(IterationCard, {
+        iteration,
+        get previousIteration() {
+          return index() > 0 ? iterations()[index() - 1] : void 0;
+        },
+        get messages() {
+          return group()?.messages ?? [];
+        },
+        get index() {
+          return index();
+        },
+        get isLast() {
+          return index() === iterations().length - 1;
+        },
+        get hoverTarget() {
+          return props.hoverTarget;
+        },
+        get onHoverTarget() {
+          return props.onHoverTarget;
+        }
+      })
+    })))
+  });
+};
 var _tmpl$36 = ["<form", ' data-testid="ai-devtools-fixture-save-popover"><label', "><span", ">Fixture name</span><input", ' data-testid="ai-devtools-fixture-name-input"', "></label><div", "><button", ' data-testid="ai-devtools-fixture-save-confirm" type="submit">Save</button><button class="', '" data-testid="ai-devtools-fixture-save-cancel" type="button">Cancel</button></div></form>'];
 var FixtureNamePopover = (props) => {
   const styles = useStyles();
@@ -8630,7 +8914,7 @@ var FieldInput = (props) => {
 function fieldsFromSchema(schema) {
   if (!isJsonSchemaObject(schema)) return [];
   const properties = schema.properties;
-  if (!isRecord(properties)) return [];
+  if (!isRecord2(properties)) return [];
   const required = Array.isArray(schema.required) ? new Set(schema.required.filter((item) => typeof item === "string")) : /* @__PURE__ */ new Set();
   return Object.entries(properties).map(([name, property]) => {
     const propertySchema = isJsonSchemaObject(property) ? property : void 0;
@@ -8710,9 +8994,9 @@ function normalizeType(value) {
   return "string";
 }
 function isJsonSchemaObject(value) {
-  return isRecord(value);
+  return isRecord2(value);
 }
-function isRecord(value) {
+function isRecord2(value) {
   return typeof value === "object" && value !== null;
 }
 
@@ -8743,7 +9027,7 @@ function mergePreviewMessagesForUserView(conversationMessages, snapshotMessages)
 }
 function partsToMessageText(parts) {
   return parts.map((part) => {
-    if (!isRecord2(part)) return "";
+    if (!isRecord3(part)) return "";
     if (part.type !== "text") return "";
     if (typeof part.text === "string") return part.text;
     if (typeof part.content === "string") return part.content;
@@ -8782,7 +9066,7 @@ function isRenderablePreviewMessage(message) {
 function isNonUserPreviewMessage(message) {
   return message.role !== void 0 && message.role !== "user";
 }
-function isRecord2(value) {
+function isRecord3(value) {
   return Boolean(value && typeof value === "object" && !Array.isArray(value));
 }
 function normalizeText(value) {
@@ -9133,7 +9417,7 @@ function runSortTime(run) {
   return run.startedAt ?? run.updatedAt ?? run.completedAt ?? 0;
 }
 function runFromUnknown(value) {
-  if (!isRecord3(value) || typeof value.id !== "string") {
+  if (!isRecord4(value) || typeof value.id !== "string") {
     return void 0;
   }
   const progress = progressFromUnknown(value.progress);
@@ -9266,7 +9550,7 @@ function isGenerationRunView(value) {
   return value !== void 0;
 }
 function previewFromUnknown(value, fallbackResult) {
-  if (isRecord3(value) && typeof value.kind === "string") {
+  if (isRecord4(value) && typeof value.kind === "string") {
     if (value.kind === "image") {
       return {
         kind: "image",
@@ -9317,7 +9601,7 @@ function previewFromUnknown(value, fallbackResult) {
   };
 }
 function progressFromUnknown(value) {
-  if (!isRecord3(value) || typeof value.value !== "number") {
+  if (!isRecord4(value) || typeof value.value !== "number") {
     return void 0;
   }
   return {
@@ -9332,17 +9616,17 @@ function mediaItemsFromUnknown(value) {
   return value.filter(isMediaItem);
 }
 function isMediaItem(value) {
-  if (!isRecord3(value) || typeof value.src !== "string") {
+  if (!isRecord4(value) || typeof value.src !== "string") {
     return false;
   }
   return true;
 }
 function isVideoJob(value) {
-  return isRecord3(value) && typeof value.jobId === "string";
+  return isRecord4(value) && typeof value.jobId === "string";
 }
 function errorTextFromUnknown(value) {
   if (typeof value === "string") return value;
-  if (isRecord3(value) && typeof value.message === "string") {
+  if (isRecord4(value) && typeof value.message === "string") {
     return value.message;
   }
   return void 0;
@@ -9354,7 +9638,7 @@ function numberFromUnknown(value) {
   return typeof value === "number" ? value : void 0;
 }
 function videoStatusLabel(value) {
-  if (!isRecord3(value)) return void 0;
+  if (!isRecord4(value)) return void 0;
   const status = stringFromUnknown(value.status);
   const progress = numberFromUnknown(value.progress);
   if (!status && progress === void 0) return void 0;
@@ -9376,7 +9660,7 @@ function formatTime(timestamp) {
   if (timestamp === void 0) return "unknown";
   return new Date(timestamp).toLocaleTimeString();
 }
-function isRecord3(value) {
+function isRecord4(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 var _tmpl$40 = ["<div", ' data-testid="ai-devtools-memory-panel">', "</div>"];
@@ -9847,7 +10131,7 @@ 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$203 = ["<div", "><span", ">", "</span><div", ">", "</div></div>"];
 var _tmpl$217 = ["<div", ">No messages yet. Start a conversation to see messages here.</div>"];
 var _tmpl$223 = ["<div", ' data-testid="ai-devtools-tools"><div', ">", "</div><div", ">", "</div></div>"];
 var _tmpl$232 = ["<div", ">No tools.</div>"];
@@ -9892,13 +10176,34 @@ var HookDetails = () => {
       setActiveTab("conversation");
     }
   });
+  const subagents = createMemo(() => {
+    const messages = hook()?.state.messages;
+    return Array.isArray(messages) ? collectSubagents(messages) : [];
+  });
+  const serverSteps = createMemo(() => collectServerSteps(conversation(), Object.values(state.conversations), subagents()));
+  const turns = createMemo(() => {
+    const messages = hook()?.state.messages;
+    return Array.isArray(messages) ? snapshotTurns(messages) : [];
+  });
   const previewMessages = createMemo(() => {
     const activeHook = hook();
     if (!activeHook) return [];
     const snapshotMessages = messagesFromSnapshot(activeHook.state);
+    if (snapshotMessages.length > 0 && subagents().length > 0) {
+      return snapshotMessages;
+    }
     const conversationMessages = conversation()?.messages ?? [];
     if (conversationMessages.length > 0) {
-      return mergePreviewMessagesForUserView(conversationMessages.map(messageFromConversation), snapshotMessages);
+      const childAgents = childRequestAgents(conversation()?.iterations ?? [], subagents());
+      const agentOf = (message) => message.requestId ? childAgents.get(message.requestId) : void 0;
+      return mergePreviewMessagesForUserView(conversationMessages.filter((message) => !(message.role === "user" && agentOf(message))).map((message) => {
+        const preview = messageFromConversation(message);
+        const agent = agentOf(message);
+        return agent ? {
+          ...preview,
+          agent
+        } : preview;
+      }), snapshotMessages);
     }
     if (snapshotMessages.length > 0) return snapshotMessages;
     return [];
@@ -10022,6 +10327,15 @@ var HookDetails = () => {
               get messages() {
                 return previewMessages();
               },
+              get subagents() {
+                return subagents();
+              },
+              get steps() {
+                return serverSteps();
+              },
+              get turns() {
+                return turns();
+              },
               get hoverTarget() {
                 return hoverTarget();
               },
@@ -10299,7 +10613,7 @@ var ConversationPanel = (props) => {
   const styles = useStyles();
   return createComponent(Show, {
     get when() {
-      return props.conversation;
+      return props.conversation || props.steps.iterations.length > 0;
     },
     get fallback() {
       return createComponent(Show, {
@@ -10319,6 +10633,9 @@ var ConversationPanel = (props) => {
             get messages() {
               return props.messages;
             },
+            get subagents() {
+              return props.subagents;
+            },
             get hoverTarget() {
               return props.hoverTarget;
             },
@@ -10329,40 +10646,51 @@ var ConversationPanel = (props) => {
         }
       });
     },
-    children: (conversation) => createComponent(Show, {
-      get when() {
-        return conversation().iterations.length > 0;
-      },
-      get fallback() {
-        return createComponent(HookMessageTimeline, {
-          get messages() {
-            return props.messages;
-          },
-          get hoverTarget() {
-            return props.hoverTarget;
-          },
-          get onHoverTarget() {
-            return props.onHoverTarget;
-          }
-        });
-      },
-      get children() {
-        return createComponent(IterationTimeline, {
-          get iterations() {
-            return conversation().iterations;
-          },
-          get messages() {
-            return conversation().messages;
-          },
-          get hoverTarget() {
-            return props.hoverTarget;
-          },
-          get onHoverTarget() {
-            return props.onHoverTarget;
-          }
-        });
-      }
-    })
+    get children() {
+      return createComponent(Show, {
+        get when() {
+          return props.steps.iterations.length > 0;
+        },
+        get fallback() {
+          return createComponent(HookMessageTimeline, {
+            get messages() {
+              return props.messages;
+            },
+            get subagents() {
+              return props.subagents;
+            },
+            get hoverTarget() {
+              return props.hoverTarget;
+            },
+            get onHoverTarget() {
+              return props.onHoverTarget;
+            }
+          });
+        },
+        get children() {
+          return createComponent(IterationTimeline, {
+            get iterations() {
+              return props.steps.iterations;
+            },
+            get messages() {
+              return props.steps.messages;
+            },
+            get subagents() {
+              return props.subagents;
+            },
+            get turns() {
+              return props.turns;
+            },
+            get hoverTarget() {
+              return props.hoverTarget;
+            },
+            get onHoverTarget() {
+              return props.onHoverTarget;
+            }
+          });
+        }
+      });
+    }
   });
 };
 var MessagesPreview = (props) => {
@@ -10414,7 +10742,7 @@ var MessagesPreview = (props) => {
           return props.messages;
         },
         children: (message) => {
-          const visibleParts = () => visiblePreviewPartsForMessage(message);
+          const visibleParts = () => visiblePreviewPartsForMessage(message).filter((part) => !hiddenInUserView(message, part));
           return ssrElement("div", mergeProps(() => getHoverDataAttributes({
             messageIds: [message.id],
             partIds: visibleParts().map((part) => part.id)
@@ -10429,7 +10757,7 @@ var MessagesPreview = (props) => {
             get ["data-role"]() {
               return message.role;
             }
-          }), [ssr(_tmpl$174, 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(roleLabel(message))), escape(createComponent(Show, {
             get when() {
               return message.content;
             },
@@ -10473,7 +10801,7 @@ var MessagesPreview = (props) => {
                   get each() {
                     return part.jsonItems;
                   },
-                  children: (item) => ssr(_tmpl$202, ssrAttribute("class", escape(styles().hookDetails.previewJsonItem, true), false), ssrAttribute("class", escape(styles().hookDetails.previewJsonItemLabel, true), false), escape(item.label), ssrAttribute("class", escape(styles().hookDetails.previewJsonPanel, true), false), escape(createComponent(JsonTree, {
+                  children: (item) => ssr(_tmpl$203, ssrAttribute("class", escape(styles().hookDetails.previewJsonItem, true), false), ssrAttribute("class", escape(styles().hookDetails.previewJsonItemLabel, true), false), escape(item.label), ssrAttribute("class", escape(styles().hookDetails.previewJsonPanel, true), false), escape(createComponent(JsonTree, {
                     get value() {
                       return item.value;
                     },
@@ -10516,7 +10844,7 @@ var HookMessageTimeline = (props) => {
           get ["class"]() {
             return `${styles().hookDetails.timelineMessage} ${isMessageHighlighted(message.id, props.hoverTarget) ? styles().hookDetails.timelineMessageHighlighted : ""}`;
           }
-        }), [ssr(_tmpl$174, 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(roleLabel(message))), escape(createComponent(Show, {
           get when() {
             return message.content;
           },
@@ -10525,49 +10853,74 @@ var HookMessageTimeline = (props) => {
           }
         })), escape(createComponent(For, {
           get each() {
-            return visiblePreviewPartsForMessage(message);
+            return visiblePreviewPartsForMessage(message).filter((part) => part.subagentId || !part.subagentPath);
           },
-          children: (part) => ssrElement("div", mergeProps(() => getHoverDataAttributes({
-            messageIds: [message.id],
-            partIds: [part.id]
-          }), {
-            get ["class"]() {
-              return styles().hookDetails.previewPart;
-            },
-            "data-testid": "ai-devtools-timeline-part",
-            get ["data-part-id"]() {
-              return part.id;
-            },
-            get ["data-part-kind"]() {
-              return part.kind;
-            }
-          }), [ssr(_tmpl$07, ssrAttribute("class", escape(styles().hookDetails.previewPartLabel, true), false), escape(part.label)), escape(createComponent(Show, {
+          children: (part) => createComponent(Show, {
             get when() {
-              return part.jsonItems?.length;
+              return props.subagents.find((agent) => agent.id === part.subagentId);
             },
             get fallback() {
-              return ssr(_tmpl$07, ssrAttribute("class", escape(styles().hookDetails.previewPartContent, true), false), escape(part.content));
-            },
-            get children() {
-              return ssr(_tmpl$193, `${escape(styles().hookDetails.previewJsonItems, true)} ${part.kind === "structured-output" ? escape(styles().hookDetails.previewJsonItemsCompare, true) : ""}`, escape(createComponent(For, {
-                get each() {
-                  return part.jsonItems;
+              return ssrElement("div", mergeProps(() => getHoverDataAttributes({
+                messageIds: [message.id],
+                partIds: [part.id]
+              }), {
+                get ["class"]() {
+                  return styles().hookDetails.previewPart;
                 },
-                children: (item) => ssr(_tmpl$202, ssrAttribute("class", escape(styles().hookDetails.previewJsonItem, true), false), ssrAttribute("class", escape(styles().hookDetails.previewJsonItemLabel, true), false), escape(item.label), ssrAttribute("class", escape(styles().hookDetails.previewJsonPanel, true), false), escape(createComponent(JsonTree, {
-                  get value() {
-                    return item.value;
-                  },
-                  defaultExpansionDepth: 1,
-                  copyable: true
-                })))
-              })));
-            }
-          }))], false)
+                "data-testid": "ai-devtools-timeline-part",
+                get ["data-part-id"]() {
+                  return part.id;
+                },
+                get ["data-part-kind"]() {
+                  return part.kind;
+                }
+              }), [ssr(_tmpl$07, ssrAttribute("class", escape(styles().hookDetails.previewPartLabel, true), false), escape(part.label)), escape(createComponent(Show, {
+                get when() {
+                  return part.jsonItems?.length;
+                },
+                get fallback() {
+                  return ssr(_tmpl$07, ssrAttribute("class", escape(styles().hookDetails.previewPartContent, true), false), escape(part.content));
+                },
+                get children() {
+                  return ssr(_tmpl$193, `${escape(styles().hookDetails.previewJsonItems, true)} ${part.kind === "structured-output" ? escape(styles().hookDetails.previewJsonItemsCompare, true) : ""}`, escape(createComponent(For, {
+                    get each() {
+                      return part.jsonItems;
+                    },
+                    children: (item) => ssr(_tmpl$203, ssrAttribute("class", escape(styles().hookDetails.previewJsonItem, true), false), ssrAttribute("class", escape(styles().hookDetails.previewJsonItemLabel, true), false), escape(item.label), ssrAttribute("class", escape(styles().hookDetails.previewJsonPanel, true), false), escape(createComponent(JsonTree, {
+                      get value() {
+                        return item.value;
+                      },
+                      defaultExpansionDepth: 1,
+                      copyable: true
+                    })))
+                  })));
+                }
+              }))], false);
+            },
+            children: (agent) => createComponent(SubagentStepsCard, {
+              get agent() {
+                return agent();
+              },
+              get hoverTarget() {
+                return props.hoverTarget;
+              },
+              get onHoverTarget() {
+                return props.onHoverTarget;
+              }
+            })
+          })
         }))], false)
       })));
     }
   });
 };
+function roleLabel(message) {
+  return message.agent ? `${message.role} (${message.agent})` : message.role;
+}
+function hiddenInUserView(message, part) {
+  if (!message.agent && !part.subagentPath) return false;
+  return part.kind === "thinking" || part.kind === "tool-call";
+}
 var ToolsView = (props) => {
   const {
     state,
@@ -10666,7 +11019,7 @@ function findConversationForHook(hook, conversations) {
   }
   const snapshotMessages = hook.state.messages;
   if (Array.isArray(snapshotMessages)) {
-    const messageIds = new Set(snapshotMessages.map((message) => isRecord4(message) && typeof message.id === "string" ? message.id : void 0).filter((id) => typeof id === "string"));
+    const messageIds = new Set(snapshotMessages.map((message) => isRecord5(message) && typeof message.id === "string" ? message.id : void 0).filter((id) => typeof id === "string"));
     if (messageIds.size > 0) {
       addCandidate(Object.values(conversations).find((conversation) => conversation.messages.some((message) => messageIds.has(message.id))));
     }
@@ -10694,7 +11047,7 @@ function messageFromConversation(message) {
   };
 }
 function messageFromUnknown(value) {
-  if (!isRecord4(value)) return void 0;
+  if (!isRecord5(value)) return void 0;
   const id = typeof value.id === "string" ? value.id : void 0;
   const role = typeof value.role === "string" ? value.role : void 0;
   if (!id || !role) return void 0;
@@ -10711,10 +11064,49 @@ function messageFromUnknown(value) {
   };
 }
 function partsFromMessageParts(parts, messageId) {
-  return parts.map((part, index) => previewPartFromRecord(part, index, messageId));
+  return parts.flatMap((part, index) => previewPartsFromRecord(part, index, messageId));
 }
 function partsFromUnknown(parts, messageId) {
-  return parts.map((part, index) => isRecord4(part) ? previewPartFromRecord(part, index, messageId) : void 0).filter(isPreviewPart);
+  return parts.flatMap((part, index) => isRecord5(part) ? previewPartsFromRecord(part, index, messageId) : []);
+}
+function previewPartsFromRecord(part, index, messageId, path) {
+  if (part.type === "subagent" && isRecord5(part.subagent)) {
+    return subagentPreviewParts(part.subagent, index, path);
+  }
+  const preview = previewPartFromRecord(part, index, messageId);
+  if (!path) return [preview];
+  const {
+    fixture: _fixture,
+    ...childPart
+  } = preview;
+  return [{
+    ...childPart,
+    id: `${path}:${messageId ?? index}:${preview.id}`,
+    label: `${path} > ${preview.label}`,
+    subagentPath: path
+  }];
+}
+function subagentPreviewParts(subagent, index, parentPath) {
+  const name = typeof subagent.name === "string" ? subagent.name : "subagent";
+  const status = typeof subagent.status === "string" ? subagent.status : void 0;
+  const id = typeof subagent.id === "string" ? subagent.id : `${index}`;
+  const error = isRecord5(subagent.error) ? subagent.error.message : void 0;
+  const path = parentPath ? `${parentPath} > ${name}` : name;
+  const header = {
+    id: `subagent:${id}`,
+    label: status ? `subagent ${path} - ${status}` : `subagent ${path}`,
+    ...typeof error === "string" ? {
+      content: error
+    } : {},
+    kind: "subagent",
+    subagentId: id
+  };
+  const messages = Array.isArray(subagent.messages) ? subagent.messages : [];
+  return [header, ...messages.flatMap((message, messageIndex) => {
+    if (!isRecord5(message) || !Array.isArray(message.parts)) return [];
+    const childMessageId = typeof message.id === "string" ? message.id : `${id}:${messageIndex}`;
+    return message.parts.flatMap((child, childIndex) => isRecord5(child) ? previewPartsFromRecord(child, childIndex, childMessageId, path) : []);
+  })];
 }
 function previewPartFromRecord(part, index, messageId) {
   const type = typeof part.type === "string" ? part.type : "part";
@@ -10901,7 +11293,7 @@ function approvalStatusFromToolCall(tool) {
   return void 0;
 }
 function approvalStatusFromRecord(approval, state) {
-  if (isRecord4(approval)) {
+  if (isRecord5(approval)) {
     if (approval.approved === true) return "approved";
     if (approval.approved === false) return "denied";
     if (approval.needsApproval === true) return "approval requested";
@@ -10958,10 +11350,7 @@ function formatUnknown(value) {
 function isPreviewMessage(value) {
   return Boolean(value);
 }
-function isPreviewPart(value) {
-  return Boolean(value);
-}
-function isRecord4(value) {
+function isRecord5(value) {
   return typeof value === "object" && value !== null;
 }
 function isToolFixtureMessageRole(role) {