@sentry/junior-dashboard 0.244.0 → 0.245.0

package/src/client/components/SegmentedTabs.tsx

@@ -19,11 +19,12 @@ export function segmentedTabClass(selected: boolean): string {
   );
 }
 
-/** Switch between related panels with equal-width tabs and keyboard navigation. */
+/** Switch between related panels. Tabs share the row equally on wide screens. */
 export function SegmentedTabs<const Value extends string>(props: {
   children: ReactNode;
   label: string;
-  items: readonly { label: string; value: Value }[];
+  /** `count` is the number of entries in the panel. Zero and unknown counts are hidden. */
+  items: readonly { count?: number; label: string; value: Value }[];
   onChange(value: NoInfer<Value>): void;
   value: NoInfer<Value>;
 }) {
@@ -33,11 +34,7 @@ export function SegmentedTabs<const Value extends string>(props: {
     <div className="grid min-w-0 gap-4">
       <div
         aria-label={props.label}
-        className={cn(
-          "grid auto-cols-fr grid-flow-col",
-          segmentedTabsFrameClass,
-          segmentedTabsInsetClass,
-        )}
+        className={cn("flex", segmentedTabsFrameClass, segmentedTabsInsetClass)}
         role="tablist"
       >
         {props.items.map((item, index) => (
@@ -45,7 +42,7 @@ export function SegmentedTabs<const Value extends string>(props: {
             aria-controls={`${id}-panel`}
             aria-selected={props.value === item.value}
             className={cn(
-              "min-w-0",
+              "inline-flex min-w-0 flex-auto items-center justify-center gap-1.5 sm:flex-1",
               segmentedTabClass(props.value === item.value),
             )}
             id={`${id}-${item.value}`}
@@ -80,7 +77,12 @@ export function SegmentedTabs<const Value extends string>(props: {
             tabIndex={props.value === item.value ? 0 : -1}
             type="button"
           >
-            {item.label}
+            <span className="truncate">{item.label}</span>
+            {item.count ? (
+              <span className="min-w-5 shrink-0 rounded-full bg-dashboard-fill-strong px-1.5 text-center text-xs font-semibold leading-5 tabular-nums">
+                {item.count.toLocaleString("en-US")}
+              </span>
+            ) : null}
           </button>
         ))}
       </div>

package/src/client/conversations/ConversationAgentTree.tsx

@@ -0,0 +1,42 @@
+import { Bot, ChevronRight } from "lucide-react";
+import { Link } from "react-router";
+import type { ConversationAgentTreeNode } from "@sentry/junior/api/schema";
+
+import { conversationPath } from "./conversationRoutes";
+
+/**
+ * Show the parents of a child Conversation, root first. The page title already
+ * names this agent, so the last node is not shown. Root Conversations have no
+ * tree.
+ */
+export function ConversationAgentTree(props: {
+  nodes: readonly ConversationAgentTreeNode[];
+}) {
+  return (
+    <nav
+      aria-label="Agent tree"
+      className="flex min-w-0 items-center gap-1.5 text-xs leading-snug text-dashboard-text-muted"
+    >
+      <Bot aria-hidden="true" className="shrink-0 text-cyan-300" size={12} />
+      <ol className="m-0 flex min-w-0 list-none items-center gap-1 p-0">
+        {props.nodes.slice(0, -1).map((node, index) => (
+          <li
+            className="inline-flex min-w-0 items-center gap-1"
+            key={node.conversationId}
+          >
+            {index > 0 ? (
+              <ChevronRight aria-hidden="true" className="shrink-0" size={12} />
+            ) : null}
+            <Link
+              className="min-w-0 max-w-[16rem] truncate font-medium text-dashboard-text no-underline underline-offset-2 hover:underline"
+              title={node.label}
+              to={conversationPath(node.conversationId)}
+            >
+              {node.label}
+            </Link>
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+}

package/src/client/conversations/ConversationChildAgents.tsx

@@ -1,42 +1,65 @@
 import { useQuery } from "@tanstack/react-query";
-import { Bot } from "lucide-react";
-import { Link } from "react-router";
+import { Bot, CircleAlert, LockKeyhole } from "lucide-react";
 import {
   conversationChildAgentsReportSchema,
   type ConversationChildAgent,
 } from "@sentry/junior/api/schema";
 
 import { StatusChip, type StatusChipTone } from "../components/StatusChip";
-import { formatMessageTimestamp } from "../format";
+import {
+  formatConversationCostTotal,
+  formatRelativeTime,
+  formatRuntime,
+  formatTime,
+  formatUsageTotal,
+} from "../format";
 import { fetchDashboardJson } from "../http";
-import { conversationPath } from "./conversationRoutes";
+import { cn } from "../styles";
+import type { SubagentTranscriptTarget } from "./SubagentTranscriptDrawer";
 
-const statusTone: Record<ConversationChildAgent["status"], StatusChipTone> = {
+const statusTones: Partial<Record<string, StatusChipTone>> = {
+  active: "info",
   blocked: "warning",
   completed: "success",
+  error: "danger",
   failed: "danger",
   paused: "info",
-  pending: "neutral",
   running: "info",
-  stopped: "neutral",
 };
 
-/** Load and show the child agents of one Conversation with runtime status. */
-export function ConversationChildAgents(props: {
-  conversationId: string;
-  /** Called before a child link leaves the current Conversation. */
-  onNavigate(): void;
-}) {
-  const query = useQuery({
+/** Pick the status tone for a child agent, its transcript row, or its detail. */
+export function subagentStatusTone(status: string): StatusChipTone {
+  return statusTones[status] ?? "neutral";
+}
+
+const errorToneClass: Partial<Record<StatusChipTone, string>> = {
+  danger: "text-rose-200/85",
+  warning: "text-amber-200/85",
+};
+
+/** Load the child agents of one Conversation with runtime status. */
+export function useConversationChildAgents(conversationId: string) {
+  return useQuery({
     queryFn: ({ signal }) =>
       fetchDashboardJson(
         conversationChildAgentsReportSchema,
-        `/api/conversations/${encodeURIComponent(props.conversationId)}/agents`,
+        `/api/conversations/${encodeURIComponent(conversationId)}/agents`,
         signal,
       ),
-    queryKey: ["conversation", props.conversationId, "agents"],
+    queryKey: ["conversation", conversationId, "agents"],
     retry: false,
   });
+}
+
+/**
+ * Show the child agents of one Conversation with runtime status. A row opens
+ * that child's transcript.
+ */
+export function ConversationChildAgents(props: {
+  conversationId: string;
+  onOpenAgent(target: SubagentTranscriptTarget): void;
+}) {
+  const query = useConversationChildAgents(props.conversationId);
 
   if (query.isPending) {
     return (
@@ -62,51 +85,104 @@ export function ConversationChildAgents(props: {
   }
 
   return (
-    <ol aria-label="Subagents" className="m-0 grid list-none gap-3 p-0">
+    <ol aria-label="Subagents" className="m-0 grid list-none gap-2 p-0">
       {query.data.agents.map((agent) => (
-        <li
-          className="grid gap-2 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface px-3 py-3"
-          key={agent.conversationId}
-        >
-          <div className="flex min-w-0 flex-wrap items-center gap-2">
-            <Link
-              className="min-w-0 truncate font-mono text-xs font-semibold text-dashboard-text no-underline hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
-              onClick={props.onNavigate}
-              to={conversationPath(agent.conversationId)}
-            >
-              {agent.redacted ? "Private subagent" : (agent.name ?? "agent")}
-            </Link>
-            <StatusChip
-              className="ml-auto"
-              size="compact"
-              tone={statusTone[agent.status]}
-            >
-              {agent.status}
-            </StatusChip>
-          </div>
-          {agent.title ? (
-            <p className="m-0 break-words text-sm font-semibold text-dashboard-text">
-              {agent.title}
-            </p>
-          ) : null}
-          {agent.task ? (
-            <p className="m-0 line-clamp-4 whitespace-pre-wrap break-words text-sm leading-relaxed text-dashboard-text">
-              {agent.task}
-            </p>
-          ) : null}
-          {agent.error ? (
-            <p className="m-0 whitespace-pre-wrap break-words text-xs leading-relaxed text-dashboard-text-muted">
-              {agent.error}
-            </p>
-          ) : null}
-          <time
-            className="font-mono text-xs text-dashboard-text-muted"
-            dateTime={agent.updatedAt}
-          >
-            {formatMessageTimestamp(Date.parse(agent.updatedAt), true)}
-          </time>
+        <li key={agent.conversationId}>
+          <ChildAgentRow agent={agent} onOpen={props.onOpenAgent} />
         </li>
       ))}
     </ol>
   );
 }
+
+/**
+ * Show who ran, what it was asked to do, and what it cost. The row text is the
+ * accessible name, so status, title, task, and error stay audible.
+ */
+function ChildAgentRow(props: {
+  agent: ConversationChildAgent;
+  onOpen(target: SubagentTranscriptTarget): void;
+}) {
+  const { agent } = props;
+  const tone = subagentStatusTone(agent.status);
+  const task = agent.task?.trim();
+  const headline = agent.title ?? task;
+  // A title is often a short form of the task. Skip the task when it adds nothing.
+  const detail = agent.title && task && task !== agent.title ? task : undefined;
+  const runtime = formatRuntime(agent.cumulativeDurationMs);
+  const stats = [
+    formatUsageTotal(agent.cumulativeUsage),
+    formatConversationCostTotal(agent.cumulativeUsage, agent.auxiliaryCosts),
+    runtime ? `${runtime} runtime` : "",
+  ].filter(Boolean);
+
+  return (
+    <button
+      className="grid w-full min-w-0 cursor-pointer gap-1.5 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface px-3 py-2.5 text-left text-inherit transition-colors duration-200 hover:border-dashboard-border-emphasis hover:bg-dashboard-surface-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus"
+      onClick={() =>
+        props.onOpen({
+          conversationId: agent.conversationId,
+          ...(agent.redacted
+            ? undefined
+            : { label: agent.title ?? agent.name }),
+          status: agent.status,
+        })
+      }
+      type="button"
+    >
+      <span className="flex min-w-0 items-center gap-2 text-xs">
+        {agent.redacted ? (
+          <span className="flex min-w-0 items-center gap-1.5 text-dashboard-text-muted">
+            <LockKeyhole aria-hidden="true" className="size-3 shrink-0" />
+            Private subagent
+          </span>
+        ) : (
+          <span className="min-w-0 truncate font-mono text-dashboard-text-muted">
+            {agent.name ?? "subagent"}
+          </span>
+        )}
+        <StatusChip className="ml-auto shrink-0" size="compact" tone={tone}>
+          {agent.status}
+        </StatusChip>
+        <time
+          className="shrink-0 text-dashboard-text-faint"
+          dateTime={agent.updatedAt}
+          title={`Updated ${formatTime(agent.updatedAt, {
+            dateStyle: "medium",
+            timeStyle: "short",
+          })}`}
+        >
+          {formatRelativeTime(agent.updatedAt)}
+        </time>
+      </span>
+      {headline ? (
+        <span className="line-clamp-2 break-words text-sm font-semibold leading-snug text-dashboard-text">
+          {headline}
+        </span>
+      ) : null}
+      {detail ? (
+        <span className="line-clamp-2 whitespace-pre-wrap break-words text-sm leading-relaxed text-dashboard-text-muted">
+          {detail}
+        </span>
+      ) : null}
+      {agent.error ? (
+        <span
+          className={cn(
+            "flex min-w-0 items-start gap-1.5 text-xs leading-relaxed",
+            errorToneClass[tone] ?? "text-dashboard-text-muted",
+          )}
+        >
+          <CircleAlert aria-hidden="true" className="mt-0.5 size-3 shrink-0" />
+          <span className="line-clamp-3 min-w-0 whitespace-pre-wrap break-words">
+            {agent.error}
+          </span>
+        </span>
+      ) : null}
+      {stats.length > 0 ? (
+        <span className="block font-mono text-xs tabular-nums text-dashboard-text-muted">
+          {stats.join(" · ")}
+        </span>
+      ) : null}
+    </button>
+  );
+}

package/src/client/conversations/ConversationDetailsDrawer.tsx

@@ -5,15 +5,18 @@ import { formatRelativeTime, formatTime } from "../format";
 import { ButtonLink } from "../components/Button";
 import { Drawer } from "../components/Drawer";
 import { SegmentedTabs } from "../components/SegmentedTabs";
-import { ConversationChildAgents } from "./ConversationChildAgents";
-import { ConversationMemories } from "./ConversationMemories";
+import {
+  ConversationChildAgents,
+  useConversationChildAgents,
+} from "./ConversationChildAgents";
+import {
+  ConversationMemories,
+  useConversationMemories,
+} from "./ConversationMemories";
 import { ShareConversationButton } from "./ShareConversationButton";
+import type { SubagentTranscriptTarget } from "./SubagentTranscriptDrawer";
 
-const tabs = [
-  { label: "Details", value: "details" },
-  { label: "Memories", value: "memories" },
-  { label: "Subagents", value: "agents" },
-] as const;
+type DetailsTab = "agents" | "details" | "memories";
 
 /** Put conversation context before usage and diagnostic links. */
 export function ConversationDetailsDrawer(props: {
@@ -23,12 +26,26 @@ export function ConversationDetailsDrawer(props: {
   identity: ReactNode;
   lastActivityAt?: string;
   onClose(): void;
+  /** Open one child agent transcript. The details drawer closes first. */
+  onOpenSubagent(target: SubagentTranscriptTarget): void;
   sentryConversationUrl?: string;
   privacy: ReactNode;
   stats: ReactNode;
   title: string;
 }) {
-  const [tab, setTab] = useState<(typeof tabs)[number]["value"]>("details");
+  const [tab, setTab] = useState<DetailsTab>("details");
+  // Load both lists with the drawer so each tab can show its count.
+  const memories = useConversationMemories(props.conversationId);
+  const agents = useConversationChildAgents(props.conversationId);
+  const tabs = [
+    { label: "Details", value: "details" },
+    {
+      count: memories.data?.memories.length,
+      label: "Memories",
+      value: "memories",
+    },
+    { count: agents.data?.agents.length, label: "Subagents", value: "agents" },
+  ] as const;
   const titleId = "conversation-details-drawer-title";
   const sections = [
     { content: props.brief, title: "Summary" },
@@ -70,7 +87,10 @@ export function ConversationDetailsDrawer(props: {
         ) : tab === "agents" ? (
           <ConversationChildAgents
             conversationId={props.conversationId}
-            onNavigate={props.onClose}
+            onOpenAgent={(target) => {
+              props.onClose();
+              props.onOpenSubagent(target);
+            }}
           />
         ) : sections.length > 0 ? (
           <div className="grid min-w-0 gap-5">

package/src/client/conversations/ConversationHeader.tsx

@@ -24,9 +24,12 @@ import {
 } from "./ConversationHeaderActions";
 import { ConversationDetailsDrawer } from "./ConversationDetailsDrawer";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
+import type { SubagentTranscriptTarget } from "./SubagentTranscriptDrawer";
 
 /** Show the conversation title, search, and details. */
 export function ConversationHeader(props: {
+  /** Parent chain of a child Conversation. Root Conversations omit it. */
+  agentTree?: ReactNode;
   copyAction?: ReactNode;
   annotations: ReactNode;
   archive: ConversationArchiveAction;
@@ -40,6 +43,7 @@ export function ConversationHeader(props: {
   sentryConversationUrl?: string;
   live: boolean;
   meta?: ReactNode;
+  onOpenSubagent(target: SubagentTranscriptTarget): void;
   onSearchChange(value: string): void;
   onViewChange(value: TranscriptViewMode): void;
   privacy: ReactNode;
@@ -154,7 +158,8 @@ export function ConversationHeader(props: {
     searchOpenVisible ||
     props.archive.error ||
     Boolean(props.linkedWork) ||
-    Boolean(props.forks);
+    Boolean(props.forks) ||
+    Boolean(props.agentTree);
 
   const liveIndicator = props.live ? (
     <span
@@ -176,6 +181,9 @@ export function ConversationHeader(props: {
       >
         <div className="hidden min-w-0 items-start justify-between gap-4 px-7 py-5 md:flex">
           <div className="min-w-0">
+            {props.agentTree ? (
+              <div className="mb-1.5 min-w-0">{props.agentTree}</div>
+            ) : null}
             <div className="flex min-w-0 items-center gap-2">
               <h2 className="m-0 line-clamp-1 min-w-0 font-display text-xl font-medium leading-tight tracking-tight">
                 {props.title}
@@ -204,6 +212,9 @@ export function ConversationHeader(props: {
             view={props.view}
           />
         </div>
+        {props.agentTree ? (
+          <div className="px-4 py-2 md:hidden">{props.agentTree}</div>
+        ) : null}
         {props.forks ? (
           <div className="px-4 py-2 md:hidden">{props.forks}</div>
         ) : null}
@@ -251,6 +262,7 @@ export function ConversationHeader(props: {
           lastActivityAt={props.lastActivityAt}
           sentryConversationUrl={props.sentryConversationUrl}
           onClose={() => setDetailsOpen(false)}
+          onOpenSubagent={props.onOpenSubagent}
           privacy={props.privacy}
           stats={props.stats}
           title={props.title}

package/src/client/conversations/ConversationMemories.tsx

@@ -21,18 +21,23 @@ const conversationMemoryListSchema = z
   })
   .strict();
 
-/** Load and show the memories captured from one Conversation. */
-export function ConversationMemories(props: { conversationId: string }) {
-  const query = useQuery({
+/** Load the memories captured from one Conversation. */
+export function useConversationMemories(conversationId: string) {
+  return useQuery({
     queryFn: ({ signal }) =>
       fetchDashboardJson(
         conversationMemoryListSchema,
-        `/api/plugins/memory/conversations/${encodeURIComponent(props.conversationId)}/memories`,
+        `/api/plugins/memory/conversations/${encodeURIComponent(conversationId)}/memories`,
         signal,
       ),
-    queryKey: ["conversation", props.conversationId, "memories"],
+    queryKey: ["conversation", conversationId, "memories"],
     retry: false,
   });
+}
+
+/** Show the memories captured from one Conversation. */
+export function ConversationMemories(props: { conversationId: string }) {
+  const query = useConversationMemories(props.conversationId);
 
   if (query.isPending) {
     return (

package/src/client/conversations/ConversationPage.tsx

@@ -26,6 +26,7 @@ import {
 import { ConversationComposer } from "./ConversationComposer";
 import { ConversationHeader } from "./ConversationHeader";
 import { ConversationForkLinks } from "./ConversationForkLinks";
+import { ConversationAgentTree } from "./ConversationAgentTree";
 import { ConversationHeaderMeta } from "./ConversationHeaderMeta";
 import {
   ConversationAnnotations,
@@ -38,6 +39,7 @@ import {
 import { PendingMailboxStack } from "./PendingMailboxStack";
 import {
   buildConversations,
+  conversationDetailTitle,
   conversationDisplayTitle,
   conversationFromDetail,
   visualStatusForConversation,
@@ -103,6 +105,7 @@ export function ConversationPage(props: {
       <ParticipantAvatarStack participants={participants} size="detail" />
     ) : null;
   const conversationDetail = detail.data;
+  const agentTree = detail.data?.agentTree;
   useEffect(() => {
     if (!conversation) return;
     onRead?.(conversation.id, conversation.lastSeenAt);
@@ -177,7 +180,8 @@ export function ConversationPage(props: {
     }) => {
       setSubagentTarget({
         conversationId: part.childConversationId,
-        part,
+        label: part.title ?? part.agentName,
+        status: part.status,
       });
     },
     [],
@@ -192,6 +196,9 @@ export function ConversationPage(props: {
         scroll={
           <section className="min-w-0">
             <ConversationHeader
+              agentTree={
+                agentTree ? <ConversationAgentTree nodes={agentTree} /> : null
+              }
               conversationId={conversationId}
               forks={
                 detail.data?.forkedFromConversationId ||
@@ -273,6 +280,7 @@ export function ConversationPage(props: {
                   }
                 />
               }
+              onOpenSubagent={setSubagentTarget}
               onSearchChange={setSearch}
               onViewChange={onViewChange}
               privacy={
@@ -292,7 +300,10 @@ export function ConversationPage(props: {
                   />
                 ) : null
               }
-              title={conversationDisplayTitle(conversation)}
+              title={
+                conversationDetailTitle(detail.data) ??
+                conversationDisplayTitle(conversation)
+              }
               view={view}
             />
 
@@ -341,7 +352,9 @@ export function ConversationPage(props: {
           </section>
         }
         dock={
-          view === "rich" && detail.data?.isParticipant ? (
+          // A child Conversation takes input only from its parent agent, and it
+          // runs without interactive auth, so it has no approval to show.
+          view === "rich" && detail.data?.isParticipant && !agentTree ? (
             <ConversationReplyFooter
               conversationId={conversationId}
               // Only pass committed ids for mailbox de-dupe. The full transcript is

package/src/client/conversations/SubagentTranscriptDrawer.tsx

@@ -4,11 +4,12 @@ import { Link } from "react-router";
 
 import { useConversationData } from "./queries";
 import { conversationPath } from "./conversationRoutes";
-import { formatMessageTimestamp } from "../format";
+import { conversationDetailTitle, formatMessageTimestamp } from "../format";
 import { buildConversationMarkdown } from "../markdownExport";
-import type { TranscriptViewSubagentPart } from "../types";
 import { Drawer } from "../components/Drawer";
 import { SearchInput } from "../components/SearchInput";
+import { StatusChip } from "../components/StatusChip";
+import { subagentStatusTone } from "./ConversationChildAgents";
 import { CopyMarkdownButton } from "./CopyMarkdownButton";
 import {
   TranscriptSearchToggle,
@@ -19,9 +20,13 @@ import { TranscriptLoading } from "./TranscriptLoading";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
 import { transcriptEmptyClass } from "./transcriptStyles";
 
+/** One child Conversation to show, with what its parent already knows. */
 export interface SubagentTranscriptTarget {
   conversationId: string;
-  part: TranscriptViewSubagentPart;
+  /** Task title or agent name, shown before the child loads. */
+  label?: string;
+  /** Child status from the parent, which knows how the child ended. */
+  status?: string;
 }
 
 /** Show a child conversation through the ordinary authorized detail API. */
@@ -51,13 +56,8 @@ function SubagentTranscriptDrawerContent(props: {
 
   const detail = query.data;
   const label =
-    props.target.part.title ||
-    detail?.displayTitle ||
-    props.target.part.subagentKind;
-  const meta = [
-    statusLabel(props.target.part, detail?.status),
-    detail ? formatMessageTimestamp(Date.parse(detail.startedAt)) : undefined,
-  ].filter(isString);
+    props.target.label ?? conversationDetailTitle(detail) ?? "Subagent";
+  const status = statusLabel(props.target.status, detail?.status);
   const searchOpenVisible = searchOpen || search.length > 0;
 
   const titleId = "subagent-transcript-drawer-title";
@@ -122,9 +122,20 @@ function SubagentTranscriptDrawerContent(props: {
               <ExternalLink aria-hidden="true" size={12} strokeWidth={2.25} />
             </Link>
           </div>
-          <div className="mt-1 break-words font-mono text-xs leading-snug text-dashboard-text-muted">
-            {meta.join(" · ")}
-          </div>
+          {status || detail ? (
+            <div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-snug text-dashboard-text-muted">
+              {status ? (
+                <StatusChip size="compact" tone={subagentStatusTone(status)}>
+                  {status}
+                </StatusChip>
+              ) : null}
+              {detail ? (
+                <time className="font-mono" dateTime={detail.startedAt}>
+                  {formatMessageTimestamp(Date.parse(detail.startedAt))}
+                </time>
+              ) : null}
+            </div>
+          ) : null}
           {searchOpenVisible ? (
             <div className="mt-3 min-w-0">
               <SearchInput
@@ -169,13 +180,13 @@ function SubagentTranscriptDrawerContent(props: {
 }
 
 function statusLabel(
-  part: TranscriptViewSubagentPart,
-  detailStatus?: string,
-): string {
-  if (part.status !== "running" && part.status !== "completed") {
-    return part.status;
+  status: string | undefined,
+  detailStatus: string | undefined,
+): string | undefined {
+  if (status && status !== "running" && status !== "completed") {
+    return status;
   }
-  return detailStatus ?? part.status;
+  return detailStatus ?? status;
 }
 
 function DrawerEmptyState(props: {
@@ -193,7 +204,3 @@ function DrawerEmptyState(props: {
     </div>
   );
 }
-
-function isString(value: string | undefined): value is string {
-  return typeof value === "string" && value.length > 0;
-}

package/src/client/format.ts

@@ -660,6 +660,21 @@ function compareTimeDesc(a: string | undefined, b: string | undefined): number {
   return (parseTime(b) ?? 0) - (parseTime(a) ?? 0);
 }
 
+/**
+ * Return the title of a loaded Conversation. A child agent Conversation uses
+ * its agent label from the agent tree, because it has no title of its own.
+ */
+export function conversationDetailTitle(
+  detail:
+    | Pick<ConversationTranscript, "agentTree" | "displayTitle">
+    | undefined,
+): string | undefined {
+  return (
+    detail?.agentTree?.at(-1)?.label ??
+    (detail?.displayTitle?.trim() || undefined)
+  );
+}
+
 /** Return the display title prepared by the reporting API. */
 export function conversationDisplayTitle(
   conversation: Conversation | undefined,