@tanstack/ai-devtools-core 0.5.16 → 0.5.18

package/dist/{production/Shell/EBEFU2GI.js → Shell/7YKZZJIO.js}

@@ -6529,6 +6529,9 @@ var AIProvider = (props) => {
       }
       const newIteration = {
         requestId,
+        ...e.payload.runId ? {
+          runId: e.payload.runId
+        } : {},
         index: iteration,
         messageId,
         startedAt: e.payload.timestamp,
@@ -7588,6 +7591,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 = /* @__PURE__ */ template(`<span>ms`);
 var _tmpl$22 = /* @__PURE__ */ template(`<span>`);
 var _tmpl$32 = /* @__PURE__ */ template(`<div><span>Middleware</span><span></span><span>`);
@@ -7952,9 +8190,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 [(() => {
     var _el$22 = _tmpl$92(), _el$23 = _el$22.firstChild, _el$24 = _el$23.nextSibling;
@@ -8189,8 +8427,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 [(() => {
     var _el$46 = _tmpl$11(), _el$47 = _el$46.firstChild, _el$48 = _el$47.nextSibling;
@@ -8870,46 +9108,11 @@ var _tmpl$142 = /* @__PURE__ */ template(`<div><span>Model Options</span><div>`)
 var _tmpl$152 = /* @__PURE__ */ template(`<div><div><div>U</div><div><span></span><div></div></div><div></div><span>\u25B6</span></div><div><div><div></div></div></div><div><div><div>`);
 var _tmpl$162 = /* @__PURE__ */ template(`<span>\u{1F3AF} `);
 var _tmpl$172 = /* @__PURE__ */ template(`<span><span>`);
+var _tmpl$182 = /* @__PURE__ */ template(`<div data-testid=ai-devtools-subagent-steps style=margin-top:8px><div role=button tabindex=0><div></div><div><span></span><div><span>subagent</span></div></div><div><span>\u{1F504} </span></div><span>\u25B6</span></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 (() => {
     var _el$ = _tmpl$30();
     insert(_el$, createComponent(Show, {
@@ -9083,8 +9286,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 handleUserMouseEnter = () => {
     const messageId = userMessageId();
@@ -9421,7 +9624,21 @@ var UserMessageGroupCard = (props) => {
           return props.onHoverTarget;
         }
       })
-    }));
+    }), null);
+    insert(_el$49, createComponent(For, {
+      get each() {
+        return group().agents;
+      },
+      children: (agentGroup) => createComponent(SubagentStepsCard, {
+        group: agentGroup,
+        get hoverTarget() {
+          return props.hoverTarget;
+        },
+        get onHoverTarget() {
+          return props.onHoverTarget;
+        }
+      })
+    }), null);
     effect((_p$) => {
       var _v$17 = s().cardHeader, _v$18 = s().userBubble, _v$19 = s().cardHeaderContent, _v$20 = s().cardHeaderLabel, _v$21 = s().cardSubtitle, _v$22 = s().cardHeaderBadges, _v$23 = `${s().chevron} ${isOpen() ? s().chevronOpen : ""}`, _v$24 = `${s().configPanelWrapper} ${configExpanded() ? s().configPanelWrapperOpen : ""}`, _v$25 = s().configPanel, _v$26 = `${s().cardBody} ${isOpen() ? s().cardBodyOpen : ""}`, _v$27 = s().cardBodyInner, _v$28 = s().iterList;
       _v$17 !== _p$.e && className(_el$10, _p$.e = _v$17);
@@ -9454,7 +9671,135 @@ var UserMessageGroupCard = (props) => {
     return _el$1;
   })();
 };
-delegateEvents(["click"]);
+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) => (() => {
+      var _el$54 = _tmpl$182(), _el$55 = _el$54.firstChild, _el$56 = _el$55.firstChild, _el$57 = _el$56.nextSibling, _el$58 = _el$57.firstChild, _el$59 = _el$58.nextSibling, _el$60 = _el$59.firstChild, _el$63 = _el$57.nextSibling, _el$64 = _el$63.firstChild; _el$64.firstChild; var _el$66 = _el$63.nextSibling, _el$67 = _el$55.nextSibling, _el$68 = _el$67.firstChild, _el$69 = _el$68.firstChild;
+      _el$55.$$keydown = (event) => {
+        if (event.key !== "Enter" && event.key !== " ") return;
+        event.preventDefault();
+        setIsOpen(!isOpen());
+      };
+      _el$55.$$click = () => setIsOpen(!isOpen());
+      insert(_el$56, () => current().name.charAt(0).toUpperCase());
+      insert(_el$58, () => current().path);
+      insert(_el$59, createComponent(Show, {
+        get when() {
+          return current().status;
+        },
+        get children() {
+          var _el$61 = _tmpl$33();
+          insert(_el$61, () => current().status);
+          effect(() => className(_el$61, s().subtitleBadge));
+          return _el$61;
+        }
+      }), null);
+      insert(_el$59, createComponent(Show, {
+        get when() {
+          return current().error;
+        },
+        get children() {
+          var _el$62 = _tmpl$33();
+          insert(_el$62, () => current().error);
+          effect(() => className(_el$62, s().subtitleBadgeWarn));
+          return _el$62;
+        }
+      }), null);
+      insert(_el$64, () => iterations().length, null);
+      insert(_el$69, createComponent(For, {
+        get each() {
+          return iterations();
+        },
+        children: (iteration, index) => createComponent(IterationCard, {
+          iteration,
+          get previousIteration() {
+            return memo(() => 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;
+          }
+        })
+      }));
+      effect((_p$) => {
+        var _v$33 = `${s().card} ${accentClass()}`, _v$34 = current().path, _v$35 = group()?.source, _v$36 = s().cardHeader, _v$37 = isOpen(), _v$38 = s().userBubble, _v$39 = s().cardHeaderContent, _v$40 = s().cardHeaderLabel, _v$41 = s().cardSubtitle, _v$42 = s().subtitleText, _v$43 = s().cardHeaderBadges, _v$44 = `${s().badge} ${s().badgeDuration}`, _v$45 = `${iterations().length} ${iterations().length === 1 ? "iteration" : "iterations"}`, _v$46 = `${s().chevron} ${isOpen() ? s().chevronOpen : ""}`, _v$47 = `${s().cardBody} ${isOpen() ? s().cardBodyOpen : ""}`, _v$48 = s().cardBodyInner, _v$49 = s().iterList;
+        _v$33 !== _p$.e && className(_el$54, _p$.e = _v$33);
+        _v$34 !== _p$.t && setAttribute(_el$54, "data-agent", _p$.t = _v$34);
+        _v$35 !== _p$.a && setAttribute(_el$54, "data-source", _p$.a = _v$35);
+        _v$36 !== _p$.o && className(_el$55, _p$.o = _v$36);
+        _v$37 !== _p$.i && setAttribute(_el$55, "aria-expanded", _p$.i = _v$37);
+        _v$38 !== _p$.n && className(_el$56, _p$.n = _v$38);
+        _v$39 !== _p$.s && className(_el$57, _p$.s = _v$39);
+        _v$40 !== _p$.h && className(_el$58, _p$.h = _v$40);
+        _v$41 !== _p$.r && className(_el$59, _p$.r = _v$41);
+        _v$42 !== _p$.d && className(_el$60, _p$.d = _v$42);
+        _v$43 !== _p$.l && className(_el$63, _p$.l = _v$43);
+        _v$44 !== _p$.u && className(_el$64, _p$.u = _v$44);
+        _v$45 !== _p$.c && setAttribute(_el$64, "title", _p$.c = _v$45);
+        _v$46 !== _p$.w && className(_el$66, _p$.w = _v$46);
+        _v$47 !== _p$.m && className(_el$67, _p$.m = _v$47);
+        _v$48 !== _p$.f && className(_el$68, _p$.f = _v$48);
+        _v$49 !== _p$.y && className(_el$69, _p$.y = _v$49);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0,
+        o: void 0,
+        i: void 0,
+        n: void 0,
+        s: void 0,
+        h: void 0,
+        r: void 0,
+        d: void 0,
+        l: void 0,
+        u: void 0,
+        c: void 0,
+        w: void 0,
+        m: void 0,
+        f: void 0,
+        y: void 0
+      });
+      return _el$54;
+    })()
+  });
+};
+delegateEvents(["click", "keydown"]);
 var _tmpl$31 = /* @__PURE__ */ template(`<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 data-testid=ai-devtools-fixture-save-cancel type=button>Cancel`);
 var FixtureNamePopover = (props) => {
   const styles = useStyles();
@@ -9751,7 +10096,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;
@@ -9831,9 +10176,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;
 }
 delegateEvents(["input", "click"]);
@@ -9865,7 +10210,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;
@@ -9904,7 +10249,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) {
@@ -10496,7 +10841,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);
@@ -10629,7 +10974,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",
@@ -10680,7 +11025,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 {
@@ -10695,17 +11040,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;
@@ -10717,7 +11062,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;
@@ -10739,7 +11084,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);
 }
 delegateEvents(["click"]);
@@ -11559,7 +11904,7 @@ var _tmpl$144 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$154 = /* @__PURE__ */ template(`<div>No messages.`);
 var _tmpl$164 = /* @__PURE__ */ template(`<div><div>`);
 var _tmpl$173 = /* @__PURE__ */ template(`<div><button type=button data-testid=ai-devtools-preview-save-tool-call>Save</button><button type=button data-testid=ai-devtools-preview-replay-tool-call>Replay`);
-var _tmpl$182 = /* @__PURE__ */ template(`<div><span>`);
+var _tmpl$183 = /* @__PURE__ */ template(`<div><span>`);
 var _tmpl$192 = /* @__PURE__ */ template(`<div><span></span><div>`);
 var _tmpl$202 = /* @__PURE__ */ template(`<div>No messages yet. Start a conversation to see messages here.`);
 var _tmpl$217 = /* @__PURE__ */ template(`<div data-testid=ai-devtools-tools><div></div><div>`);
@@ -11606,13 +11951,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 [];
@@ -11753,6 +12119,15 @@ var HookDetails = () => {
                 get messages() {
                   return previewMessages();
                 },
+                get subagents() {
+                  return subagents();
+                },
+                get steps() {
+                  return serverSteps();
+                },
+                get turns() {
+                  return turns();
+                },
                 get hoverTarget() {
                   return hoverTarget();
                 },
@@ -12250,7 +12625,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, {
@@ -12285,6 +12660,9 @@ var ConversationPanel = (props) => {
             get messages() {
               return props.messages;
             },
+            get subagents() {
+              return props.subagents;
+            },
             get hoverTarget() {
               return props.hoverTarget;
             },
@@ -12295,40 +12673,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) => {
@@ -12396,7 +12785,7 @@ var MessagesPreview = (props) => {
           return props.messages;
         },
         children: (message) => {
-          const visibleParts = () => visiblePreviewPartsForMessage(message);
+          const visibleParts = () => visiblePreviewPartsForMessage(message).filter((part) => !hiddenInUserView(message, part));
           return (() => {
             var _el$51 = _tmpl$164(), _el$52 = _el$51.firstChild;
             spread(_el$51, mergeProps(() => getHoverDataAttributes({
@@ -12419,7 +12808,7 @@ var MessagesPreview = (props) => {
               })),
               "onMouseLeave": () => props.onHoverTarget(null)
             }), false, true);
-            insert(_el$52, () => message.role);
+            insert(_el$52, () => roleLabel(message));
             insert(_el$51, createComponent(Show, {
               get when() {
                 return message.content;
@@ -12436,7 +12825,7 @@ var MessagesPreview = (props) => {
                 return visibleParts();
               },
               children: (part) => (() => {
-                var _el$54 = _tmpl$182(), _el$55 = _el$54.firstChild;
+                var _el$54 = _tmpl$183(), _el$55 = _el$54.firstChild;
                 spread(_el$54, mergeProps(() => getHoverDataAttributes({
                   messageIds: [message.id],
                   partIds: [part.id]
@@ -12590,7 +12979,7 @@ var HookMessageTimeline = (props) => {
             })),
             "onMouseLeave": () => props.onHoverTarget(null)
           }), false, true);
-          insert(_el$67, () => message.role);
+          insert(_el$67, () => roleLabel(message));
           insert(_el$66, createComponent(Show, {
             get when() {
               return message.content;
@@ -12604,75 +12993,93 @@ var HookMessageTimeline = (props) => {
           }), null);
           insert(_el$66, createComponent(For, {
             get each() {
-              return visiblePreviewPartsForMessage(message);
+              return visiblePreviewPartsForMessage(message).filter((part) => part.subagentId || !part.subagentPath);
             },
-            children: (part) => (() => {
-              var _el$69 = _tmpl$182(), _el$70 = _el$69.firstChild;
-              spread(_el$69, 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;
-                }
-              }), false, true);
-              insert(_el$70, () => part.label);
-              insert(_el$69, createComponent(Show, {
-                get when() {
-                  return part.jsonItems?.length;
-                },
-                get fallback() {
-                  return (() => {
-                    var _el$72 = _tmpl$07();
-                    insert(_el$72, () => part.content);
-                    effect(() => className(_el$72, styles().hookDetails.previewPartContent));
-                    return _el$72;
-                  })();
-                },
-                get children() {
-                  var _el$71 = _tmpl$144();
-                  insert(_el$71, createComponent(For, {
-                    get each() {
-                      return part.jsonItems;
+            children: (part) => createComponent(Show, {
+              get when() {
+                return props.subagents.find((agent) => agent.id === part.subagentId);
+              },
+              get fallback() {
+                return (() => {
+                  var _el$69 = _tmpl$183(), _el$70 = _el$69.firstChild;
+                  spread(_el$69, 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;
                     },
-                    children: (item) => (() => {
-                      var _el$73 = _tmpl$192(), _el$74 = _el$73.firstChild, _el$75 = _el$74.nextSibling;
-                      insert(_el$74, () => item.label);
-                      insert(_el$75, createComponent(JsonTree, {
-                        get value() {
-                          return item.value;
+                    get ["data-part-kind"]() {
+                      return part.kind;
+                    }
+                  }), false, true);
+                  insert(_el$70, () => part.label);
+                  insert(_el$69, createComponent(Show, {
+                    get when() {
+                      return part.jsonItems?.length;
+                    },
+                    get fallback() {
+                      return (() => {
+                        var _el$72 = _tmpl$07();
+                        insert(_el$72, () => part.content);
+                        effect(() => className(_el$72, styles().hookDetails.previewPartContent));
+                        return _el$72;
+                      })();
+                    },
+                    get children() {
+                      var _el$71 = _tmpl$144();
+                      insert(_el$71, createComponent(For, {
+                        get each() {
+                          return part.jsonItems;
                         },
-                        defaultExpansionDepth: 1,
-                        copyable: true
+                        children: (item) => (() => {
+                          var _el$73 = _tmpl$192(), _el$74 = _el$73.firstChild, _el$75 = _el$74.nextSibling;
+                          insert(_el$74, () => item.label);
+                          insert(_el$75, createComponent(JsonTree, {
+                            get value() {
+                              return item.value;
+                            },
+                            defaultExpansionDepth: 1,
+                            copyable: true
+                          }));
+                          effect((_p$) => {
+                            var _v$51 = styles().hookDetails.previewJsonItem, _v$52 = styles().hookDetails.previewJsonItemLabel, _v$53 = styles().hookDetails.previewJsonPanel;
+                            _v$51 !== _p$.e && className(_el$73, _p$.e = _v$51);
+                            _v$52 !== _p$.t && className(_el$74, _p$.t = _v$52);
+                            _v$53 !== _p$.a && className(_el$75, _p$.a = _v$53);
+                            return _p$;
+                          }, {
+                            e: void 0,
+                            t: void 0,
+                            a: void 0
+                          });
+                          return _el$73;
+                        })()
                       }));
-                      effect((_p$) => {
-                        var _v$51 = styles().hookDetails.previewJsonItem, _v$52 = styles().hookDetails.previewJsonItemLabel, _v$53 = styles().hookDetails.previewJsonPanel;
-                        _v$51 !== _p$.e && className(_el$73, _p$.e = _v$51);
-                        _v$52 !== _p$.t && className(_el$74, _p$.t = _v$52);
-                        _v$53 !== _p$.a && className(_el$75, _p$.a = _v$53);
-                        return _p$;
-                      }, {
-                        e: void 0,
-                        t: void 0,
-                        a: void 0
-                      });
-                      return _el$73;
-                    })()
-                  }));
-                  effect(() => className(_el$71, `${styles().hookDetails.previewJsonItems} ${part.kind === "structured-output" ? styles().hookDetails.previewJsonItemsCompare : ""}`));
-                  return _el$71;
+                      effect(() => className(_el$71, `${styles().hookDetails.previewJsonItems} ${part.kind === "structured-output" ? styles().hookDetails.previewJsonItemsCompare : ""}`));
+                      return _el$71;
+                    }
+                  }), null);
+                  effect(() => className(_el$70, styles().hookDetails.previewPartLabel));
+                  return _el$69;
+                })();
+              },
+              children: (agent) => createComponent(SubagentStepsCard, {
+                get agent() {
+                  return agent();
+                },
+                get hoverTarget() {
+                  return props.hoverTarget;
+                },
+                get onHoverTarget() {
+                  return props.onHoverTarget;
                 }
-              }), null);
-              effect(() => className(_el$70, styles().hookDetails.previewPartLabel));
-              return _el$69;
-            })()
+              })
+            })
           }), null);
           effect(() => className(_el$67, styles().hookDetails.messageRole));
           return _el$66;
@@ -12683,6 +13090,13 @@ var HookMessageTimeline = (props) => {
     }
   });
 };
+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,
@@ -12954,7 +13368,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))));
     }
@@ -12982,7 +13396,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;
@@ -12999,10 +13413,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";
@@ -13189,7 +13642,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";
@@ -13266,10 +13719,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) {