@sentry/junior-dashboard 0.242.0 → 0.244.0

package/src/client/conversations/ConversationChildAgents.tsx

@@ -0,0 +1,112 @@
+import { useQuery } from "@tanstack/react-query";
+import { Bot } from "lucide-react";
+import { Link } from "react-router";
+import {
+  conversationChildAgentsReportSchema,
+  type ConversationChildAgent,
+} from "@sentry/junior/api/schema";
+
+import { StatusChip, type StatusChipTone } from "../components/StatusChip";
+import { formatMessageTimestamp } from "../format";
+import { fetchDashboardJson } from "../http";
+import { conversationPath } from "./conversationRoutes";
+
+const statusTone: Record<ConversationChildAgent["status"], StatusChipTone> = {
+  blocked: "warning",
+  completed: "success",
+  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({
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(
+        conversationChildAgentsReportSchema,
+        `/api/conversations/${encodeURIComponent(props.conversationId)}/agents`,
+        signal,
+      ),
+    queryKey: ["conversation", props.conversationId, "agents"],
+    retry: false,
+  });
+
+  if (query.isPending) {
+    return (
+      <p className="m-0 text-sm text-dashboard-text-muted" role="status">
+        Loading subagents…
+      </p>
+    );
+  }
+  if (query.error) {
+    return (
+      <p className="m-0 text-sm text-red-300/80">
+        Could not load subagents from this Conversation.
+      </p>
+    );
+  }
+  if (query.data.agents.length === 0) {
+    return (
+      <div className="grid justify-items-center gap-2 py-10 text-center text-dashboard-text-muted">
+        <Bot aria-hidden="true" className="size-5 opacity-60" />
+        <p className="m-0 text-sm">No subagents were started.</p>
+      </div>
+    );
+  }
+
+  return (
+    <ol aria-label="Subagents" className="m-0 grid list-none gap-3 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>
+      ))}
+    </ol>
+  );
+}

package/src/client/conversations/ConversationDetailsDrawer.tsx

@@ -5,12 +5,14 @@ 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 { ShareConversationButton } from "./ShareConversationButton";
 
 const tabs = [
   { label: "Details", value: "details" },
   { label: "Memories", value: "memories" },
+  { label: "Subagents", value: "agents" },
 ] as const;
 
 /** Put conversation context before usage and diagnostic links. */
@@ -26,7 +28,7 @@ export function ConversationDetailsDrawer(props: {
   stats: ReactNode;
   title: string;
 }) {
-  const [tab, setTab] = useState<"details" | "memories">("details");
+  const [tab, setTab] = useState<(typeof tabs)[number]["value"]>("details");
   const titleId = "conversation-details-drawer-title";
   const sections = [
     { content: props.brief, title: "Summary" },
@@ -65,6 +67,11 @@ export function ConversationDetailsDrawer(props: {
       >
         {tab === "memories" ? (
           <ConversationMemories conversationId={props.conversationId} />
+        ) : tab === "agents" ? (
+          <ConversationChildAgents
+            conversationId={props.conversationId}
+            onNavigate={props.onClose}
+          />
         ) : sections.length > 0 ? (
           <div className="grid min-w-0 gap-5">
             {sections.map((section) => (

package/src/client/conversations/SubagentTranscriptDrawer.tsx

@@ -50,7 +50,10 @@ function SubagentTranscriptDrawerContent(props: {
   const [searchOpen, setSearchOpen] = useState(false);
 
   const detail = query.data;
-  const label = detail?.displayTitle || props.target.part.subagentKind;
+  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,
@@ -169,7 +172,7 @@ function statusLabel(
   part: TranscriptViewSubagentPart,
   detailStatus?: string,
 ): string {
-  if (part.status === "error" || part.status === "aborted") {
+  if (part.status !== "running" && part.status !== "completed") {
     return part.status;
   }
   return detailStatus ?? part.status;

package/src/client/conversations/TranscriptSubagentView.tsx

@@ -9,7 +9,8 @@ export function TranscriptSubagentView(props: {
   part: TranscriptViewSubagentPart;
   timestamp?: number;
 }) {
-  const label = props.part.subagentKind;
+  const label = props.part.agentName ?? props.part.subagentKind;
+  const summary = props.part.title ?? props.part.task;
   const status = props.part.status;
   const meta = [
     status,
@@ -27,6 +28,11 @@ export function TranscriptSubagentView(props: {
           <strong className="min-w-0 break-words font-bold text-cyan-100">
             <HighlightText text={label} />
           </strong>
+          {summary ? (
+            <span className="min-w-0 truncate text-dashboard-text-muted">
+              <HighlightText text={summary} />
+            </span>
+          ) : null}
           {props.part.status === "running" ? (
             <span
               aria-hidden="true"
@@ -44,7 +50,7 @@ export function TranscriptSubagentView(props: {
 
   return (
     <button
-      aria-label={`Open ${props.part.subagentKind} transcript`}
+      aria-label={`Open ${label} transcript`}
       className="block w-full min-w-0 cursor-pointer text-left transition-colors hover:bg-white/[0.035] focus-visible:outline focus-visible:outline-1 focus-visible:outline-cyan-300/55"
       onClick={() => props.onOpenTranscript?.(props.part)}
       type="button"

package/src/client/conversations/eventLog.ts

@@ -94,7 +94,7 @@ export function eventLogSummary(data: ConversationReportEventData): string {
     case "handoff":
       return "Handoff · New configuration applied";
     case "subagent":
-      return `${data.subagentKind} · ${data.status} · ${data.childConversationId}`;
+      return `${data.agentName ?? data.subagentKind} · ${data.status} · ${data.childConversationId}`;
   }
 }
 
@@ -111,7 +111,8 @@ export function eventLogTone(data: ConversationReportEventData): string {
   }
   if (
     (data.type === "guardian_action_reviewed" && data.decision === "ask") ||
-    (data.type === "subagent" && data.status === "aborted")
+    (data.type === "subagent" &&
+      (data.status === "aborted" || data.status === "blocked"))
   ) {
     return "text-amber-200";
   }

package/src/client/conversations/eventTranscript.ts

@@ -362,6 +362,9 @@ export function transcriptMessagesFromEvents(
         childConversationId: data.childConversationId,
         subagentKind: data.subagentKind,
         status: data.status,
+        ...(data.agentName ? { agentName: data.agentName } : undefined),
+        ...(data.task ? { task: data.task } : undefined),
+        ...(data.title ? { title: data.title } : undefined),
       };
       subagents.set(subagentId, part);
       messages.push({

package/src/client/conversations/transcriptRenderModel.ts

@@ -194,7 +194,12 @@ export function messageRawText(message: TranscriptViewMessage): string {
       if (part.type === "reasoning") return part.text ?? "reasoning redacted";
       if (part.type === "tool_call") return `tool_call ${part.name}`;
       if (part.type === "subagent") {
-        return `subagent ${part.subagentKind}\nstatus ${part.status}`;
+        return [
+          `subagent ${part.agentName ?? part.subagentKind}`,
+          ...(part.title ? [`title ${part.title}`] : []),
+          ...(part.task ? [`task ${part.task}`] : []),
+          `status ${part.status}`,
+        ].join("\n");
       }
       if (part.type === "structured_event") {
         return [

package/src/client/conversations/transcriptSearch.tsx

@@ -160,7 +160,12 @@ export function entryMatchesSearch(
 
   if (entry.kind === "subagent") {
     return (
-      textContains(entry.part.subagentKind, normalizedQuery) ||
+      textContains(
+        entry.part.agentName ?? entry.part.subagentKind,
+        normalizedQuery,
+      ) ||
+      textContains(entry.part.title, normalizedQuery) ||
+      textContains(entry.part.task, normalizedQuery) ||
       textContains(entry.part.status, normalizedQuery)
     );
   }

package/src/client/markdownExport.ts

@@ -396,9 +396,14 @@ function appendSubagent(
   part: TranscriptViewSubagentPart,
   timestamp: number | undefined,
 ): void {
-  lines.push("", `### Subagent: ${headingText(part.subagentKind)}`);
+  lines.push(
+    "",
+    `### Subagent: ${headingText(part.agentName ?? part.subagentKind)}`,
+  );
   addEventMeta(lines, conversationTranscript, timestamp);
   addMetaLine(lines, "Status", part.status);
+  addMetaLine(lines, "Title", part.title);
+  addMetaLine(lines, "Task", part.task);
 }
 
 function appendTool(

package/src/client/types.ts

@@ -38,10 +38,13 @@ export type TranscriptViewToolCallPart = {
 };
 
 export type TranscriptViewSubagentPart = {
+  agentName?: string;
   childConversationId: string;
   id: string;
-  status: "aborted" | "completed" | "error" | "running";
+  status: "aborted" | "blocked" | "completed" | "error" | "running";
   subagentKind: string;
+  task?: string;
+  title?: string;
   type: "subagent";
 };
 

package/src/mock-reporting/fixtures.ts

@@ -8,6 +8,7 @@ import type {
   ActorProfileReport,
   ActorSummaryReport,
   ActorWindowMetrics,
+  ConversationChildAgentsReport,
   ConversationDetailReport,
   ConversationEventPage,
   ConversationFeed,
@@ -694,7 +695,7 @@ function dashboardQaConversation(nowMs: number): ConversationDetailReport {
         calls: [
           {
             toolCallId: "qa-advisor",
-            name: "advisor",
+            name: "spawnAgent",
             status: "running",
           },
         ],
@@ -704,11 +705,11 @@ function dashboardQaConversation(nowMs: number): ConversationDetailReport {
         calls: [
           {
             toolCallId: "qa-advisor",
-            name: "advisor",
+            name: "spawnAgent",
             status: "running",
             startedSeq: 1,
             startedAt: iso(Date.parse(startedAt), 2_000),
-            input: { automation: "Review the dashboard plan" },
+            input: { task: "Review the dashboard plan before editing." },
           },
         ],
       }),
@@ -717,7 +718,10 @@ function dashboardQaConversation(nowMs: number): ConversationDetailReport {
         startedSeq: 3,
         startedAt: iso(Date.parse(startedAt), 4_000),
         childConversationId: DASHBOARD_QA_PLAN_ID,
-        subagentKind: "advisor",
+        subagentKind: "agent",
+        agentName: "planner",
+        task: "Review the dashboard plan before editing.",
+        title: "Review the dashboard plan",
         parentToolCallId: "qa-advisor",
         status: "running",
       }),
@@ -726,7 +730,10 @@ function dashboardQaConversation(nowMs: number): ConversationDetailReport {
         startedSeq: 3,
         startedAt: iso(Date.parse(startedAt), 4_000),
         childConversationId: DASHBOARD_QA_PLAN_ID,
-        subagentKind: "advisor",
+        subagentKind: "agent",
+        agentName: "planner",
+        task: "Review the dashboard plan before editing.",
+        title: "Review the dashboard plan",
         parentToolCallId: "qa-advisor",
         status: "completed",
       }),
@@ -735,11 +742,11 @@ function dashboardQaConversation(nowMs: number): ConversationDetailReport {
         calls: [
           {
             toolCallId: "qa-advisor",
-            name: "advisor",
+            name: "spawnAgent",
             status: "completed",
             startedSeq: 1,
             startedAt: iso(Date.parse(startedAt), 2_000),
-            output: { child_conversation_id: DASHBOARD_QA_PLAN_ID },
+            output: { conversation_id: DASHBOARD_QA_PLAN_ID },
           },
         ],
       }),
@@ -748,7 +755,8 @@ function dashboardQaConversation(nowMs: number): ConversationDetailReport {
         startedSeq: 6,
         startedAt: iso(Date.parse(startedAt), 25_000),
         childConversationId: DASHBOARD_QA_REVIEW_ID,
-        subagentKind: "advisor",
+        subagentKind: "agent",
+        agentName: "reviewer",
         status: "running",
       }),
       reportEvent(7, iso(Date.parse(startedAt), 44_000), {
@@ -756,8 +764,9 @@ function dashboardQaConversation(nowMs: number): ConversationDetailReport {
         startedSeq: 6,
         startedAt: iso(Date.parse(startedAt), 25_000),
         childConversationId: DASHBOARD_QA_REVIEW_ID,
-        subagentKind: "advisor",
-        status: "completed",
+        subagentKind: "agent",
+        agentName: "reviewer",
+        status: "blocked",
       }),
       reportEvent(8, iso(Date.parse(startedAt), 50_000), {
         type: "tool_calls",
@@ -1816,6 +1825,40 @@ export function readMockConversationPendingMessages(
   };
 }
 
+/** Return the child agents of one mock Conversation, matching its transcript. */
+export function readMockConversationChildAgents(
+  conversationId: string,
+): ConversationChildAgentsReport | undefined {
+  const conversation = mockConversations(NOW_MS).find(
+    (candidate) => candidate.conversationId === conversationId,
+  );
+  if (!conversation) return undefined;
+  if (conversationId !== DASHBOARD_QA_CONVERSATION_ID) {
+    return { agents: [], conversationId };
+  }
+  const startedAtMs = NOW_MS - 5 * 60 * 60_000;
+  return {
+    agents: [
+      {
+        conversationId: DASHBOARD_QA_REVIEW_ID,
+        error: "GitHub access is needed to read the pull request.",
+        name: "reviewer",
+        status: "blocked",
+        task: "Review the open dashboard pull requests and list risky changes.",
+        updatedAt: iso(startedAtMs, 44_000),
+      },
+      {
+        conversationId: DASHBOARD_QA_PLAN_ID,
+        status: "completed",
+        task: "Review the dashboard plan before editing.",
+        title: "Review the dashboard plan",
+        updatedAt: iso(startedAtMs, 20_000),
+      },
+    ],
+    conversationId,
+  };
+}
+
 /** Return one canonical-event visual-QA conversation detail fixture. */
 export function readMockConversationDetail(
   conversationId: string,

package/src/mock-reporting/routes.ts

@@ -7,6 +7,7 @@ import {
   actorProfileReportSchema,
   archiveConversationBodySchema,
   archiveConversationResponseSchema,
+  conversationChildAgentsReportSchema,
   conversationDetailQuerySchema,
   conversationDetailReportSchema,
   conversationEventPageSchema,
@@ -38,6 +39,7 @@ import {
   readMockCodeRepository,
 } from "./code-repository";
 import {
+  readMockConversationChildAgents,
   readMockConversationDetail,
   readMockConversationEvents,
   readMockConversationFeed,
@@ -193,6 +195,16 @@ export function createMockReportingApi(): Hono<{
       ? jsonResponse(conversationEventPageSchema, report)
       : errorResponse("Invalid conversation cursor.", 400);
   });
+  app.get("/conversations/:conversationId/agents", (c) => {
+    const params = conversationParamsSchema.safeParse(c.req.param());
+    if (!params.success) {
+      return errorResponse("Invalid route parameters.", 400);
+    }
+    const report = readMockConversationChildAgents(params.data.conversationId);
+    return report
+      ? jsonResponse(conversationChildAgentsReportSchema, report)
+      : errorResponse("Conversation not found.", 404);
+  });
   app.get("/conversations/:conversationId/pending-messages", (c) => {
     const params = conversationParamsSchema.safeParse(c.req.param());
     if (!params.success) {