@sentry/junior-dashboard 0.242.0 → 0.243.0

package/src/client/conversations/ConversationChildAgents.tsx

@@ -0,0 +1,107 @@
+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.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

@@ -169,7 +169,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/eventLog.ts

@@ -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/types.ts

@@ -40,7 +40,7 @@ export type TranscriptViewToolCallPart = {
 export type TranscriptViewSubagentPart = {
   childConversationId: string;
   id: string;
-  status: "aborted" | "completed" | "error" | "running";
+  status: "aborted" | "blocked" | "completed" | "error" | "running";
   subagentKind: 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,7 @@ function dashboardQaConversation(nowMs: number): ConversationDetailReport {
         startedSeq: 3,
         startedAt: iso(Date.parse(startedAt), 4_000),
         childConversationId: DASHBOARD_QA_PLAN_ID,
-        subagentKind: "advisor",
+        subagentKind: "agent",
         parentToolCallId: "qa-advisor",
         status: "running",
       }),
@@ -726,7 +727,7 @@ function dashboardQaConversation(nowMs: number): ConversationDetailReport {
         startedSeq: 3,
         startedAt: iso(Date.parse(startedAt), 4_000),
         childConversationId: DASHBOARD_QA_PLAN_ID,
-        subagentKind: "advisor",
+        subagentKind: "agent",
         parentToolCallId: "qa-advisor",
         status: "completed",
       }),
@@ -735,11 +736,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 +749,7 @@ function dashboardQaConversation(nowMs: number): ConversationDetailReport {
         startedSeq: 6,
         startedAt: iso(Date.parse(startedAt), 25_000),
         childConversationId: DASHBOARD_QA_REVIEW_ID,
-        subagentKind: "advisor",
+        subagentKind: "agent",
         status: "running",
       }),
       reportEvent(7, iso(Date.parse(startedAt), 44_000), {
@@ -756,8 +757,8 @@ 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",
+        status: "blocked",
       }),
       reportEvent(8, iso(Date.parse(startedAt), 50_000), {
         type: "tool_calls",
@@ -1816,6 +1817,39 @@ 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.",
+        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) {