@sentry/junior-dashboard 0.247.0 → 0.248.0

package/src/client/conversations/UsageCard.tsx

@@ -0,0 +1,172 @@
+import { cn } from "../styles";
+import { ShimmerText } from "../components/ShimmerText";
+
+export type UsageCardRow = {
+  label: string;
+  live?: boolean;
+  /** Render the label in the code face, such as a model id. */
+  code?: boolean;
+  value: string;
+};
+
+export type UsageCardSection = {
+  /** Rows rolled up into one "N more" line, with their combined value. */
+  more?: { count: number; value: string };
+  rows: UsageCardRow[];
+  title: string;
+  /** Section total shown after the title, such as all auxiliary cost. */
+  total?: string;
+};
+
+export type UsageCardSplit = {
+  count: number;
+  self: string;
+  /** Share of the total that belongs to this agent, from 0 to 1. */
+  selfShare: number;
+  subagents: string;
+};
+
+export type UsageCardProps = {
+  /** Closing hint, such as where to find the full breakdown. */
+  footer?: string;
+  /** Muted detail after the title, such as a compaction count. */
+  note?: string;
+  sections: UsageCardSection[];
+  split?: UsageCardSplit;
+  title: string;
+  total: string;
+};
+
+const SELF_FILL = "bg-dashboard-focus/80";
+const SUBAGENT_FILL = "bg-dashboard-focus/30";
+
+function Swatch(props: { className: string }) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn("size-2 shrink-0 rounded-xs", props.className)}
+    />
+  );
+}
+
+/**
+ * Summarize one usage total: the total up top, how it splits between this
+ * agent and its subagents, then the largest contributors. Long lists roll
+ * their tail into one "N more" row so the card never needs to scroll.
+ */
+export function UsageCard(props: UsageCardProps) {
+  const selfPercent = Math.min(
+    100,
+    Math.max(0, (props.split?.selfShare ?? 1) * 100),
+  );
+  return (
+    <span className="grid gap-3">
+      <span
+        className={cn(
+          "grid gap-2.5",
+          (props.sections.length > 0 || props.footer) &&
+            "border-b border-dashboard-border pb-3",
+        )}
+      >
+        <span className="flex items-baseline justify-between gap-3">
+          <span className="min-w-0 truncate">
+            {props.title}
+            {props.note ? (
+              <span className="text-dashboard-text-faint"> · {props.note}</span>
+            ) : null}
+          </span>
+          <span className="whitespace-nowrap text-lg font-semibold tabular-nums text-dashboard-text">
+            {props.total}
+          </span>
+        </span>
+        {props.split ? (
+          <>
+            <span
+              aria-hidden="true"
+              className="flex h-1.5 overflow-hidden rounded-full bg-dashboard-fill-hover"
+            >
+              <span
+                className={SELF_FILL}
+                style={{ width: `${selfPercent}%` }}
+              />
+              <span
+                className={SUBAGENT_FILL}
+                style={{ width: `${100 - selfPercent}%` }}
+              />
+            </span>
+            <span className="flex flex-wrap justify-between gap-x-3 gap-y-1 tabular-nums">
+              <span className="inline-flex items-center gap-1.5 whitespace-nowrap">
+                <Swatch className={SELF_FILL} />
+                this agent
+                <span className="font-medium text-dashboard-text">
+                  {props.split.self}
+                </span>
+              </span>
+              <span className="inline-flex items-center gap-1.5 whitespace-nowrap">
+                <Swatch className={SUBAGENT_FILL} />
+                {props.split.count} subagent{props.split.count === 1 ? "" : "s"}
+                <span className="font-medium text-dashboard-text">
+                  {props.split.subagents}
+                </span>
+              </span>
+            </span>
+          </>
+        ) : null}
+      </span>
+      {props.sections.map((section) => (
+        <span
+          className="grid grid-cols-[minmax(0,1fr)_auto] gap-x-3 gap-y-2"
+          key={section.title}
+        >
+          <span className="col-span-2 font-mono uppercase tracking-[0.08em] text-dashboard-text-faint">
+            {section.title}
+            {section.total ? ` · ${section.total}` : null}
+          </span>
+          {section.rows.map((row) => (
+            <span className="contents" key={row.label}>
+              <span
+                className={cn(
+                  "flex min-w-0 items-baseline gap-2",
+                  row.code && "font-mono text-dashboard-text",
+                )}
+              >
+                <span className="min-w-0 truncate" title={row.label}>
+                  {row.label}
+                </span>
+                {row.live ? (
+                  <span className="shrink-0 font-sans text-2xs text-dashboard-text-muted">
+                    <ShimmerText active>in progress</ShimmerText>
+                  </span>
+                ) : null}
+              </span>
+              <span className="whitespace-nowrap text-right tabular-nums text-dashboard-text">
+                {row.value}
+              </span>
+            </span>
+          ))}
+          {section.more ? (
+            <>
+              <span className="text-dashboard-text-faint">
+                {section.more.count} more
+              </span>
+              <span className="whitespace-nowrap text-right tabular-nums">
+                {section.more.value}
+              </span>
+            </>
+          ) : null}
+        </span>
+      ))}
+      {props.footer ? (
+        <span
+          className={cn(
+            "text-dashboard-text-faint",
+            props.sections.length > 0 &&
+              "border-t border-dashboard-border pt-3",
+          )}
+        >
+          {props.footer}
+        </span>
+      ) : null}
+    </span>
+  );
+}

package/src/client/format.ts

@@ -919,6 +919,7 @@ export function buildConversations(
       channel: summary.channel,
       channelName: summary.channelName,
       channelNameRedacted: summary.channelNameRedacted,
+      childAgentTotals: summary.childAgentTotals,
       cumulativeDurationMs: summary.cumulativeDurationMs,
       cumulativeUsage: summary.cumulativeUsage,
       displayTitle: summary.displayTitle,

package/src/client/types.ts

@@ -156,6 +156,7 @@ export type Conversation = {
   channel?: string;
   channelName?: string;
   channelNameRedacted?: boolean;
+  childAgentTotals?: ConversationSummaryReport["childAgentTotals"];
   cumulativeDurationMs: number;
   cumulativeUsage?: ConversationSummaryReport["cumulativeUsage"];
   displayTitle: string;

package/src/mock-reporting/fixtures.ts

@@ -129,6 +129,8 @@ export const DASHBOARD_QA_CONVERSATION_ID = "internal:dashboard-qa";
 export const ARCHIVED_CONVERSATION_ID = "internal:archived-restore-qa";
 const DASHBOARD_QA_PLAN_ID = "junior:internal:dashboard-qa:advisor-plan";
 const DASHBOARD_QA_REVIEW_ID = "junior:internal:dashboard-qa:advisor-review";
+const DASHBOARD_QA_PLAN_CHECK_ID =
+  "junior:internal:dashboard-qa:advisor-plan:claim-check";
 /** Process-local archive state so mock restore can be exercised in visual QA. */
 const mockArchivedConversationIds = new Set<string>([ARCHIVED_CONVERSATION_ID]);
 
@@ -672,7 +674,24 @@ function dashboardQaConversation(nowMs: number): ConversationDetailReport {
         updatedAt: iso(Date.parse(startedAt), 20_000),
       },
     ],
-    cumulativeDurationMs: 98_000,
+    // Totals include all three subagents, like the API.
+    childAgentTotals: {
+      count: 3,
+      cumulativeDurationMs: 88_400,
+      cumulativeUsage: {
+        inputTokens: 48_700,
+        outputTokens: 2_680,
+        cachedInputTokens: 21_600,
+        cost: { total: 0.172 },
+      },
+    },
+    cumulativeDurationMs: 186_400,
+    cumulativeUsage: {
+      inputTokens: 100_700,
+      outputTokens: 6_080,
+      cachedInputTokens: 51_600,
+      cost: { total: 0.382 },
+    },
     events: [
       reportEvent(0, startedAt, {
         type: "message",
@@ -973,8 +992,9 @@ function advisorConversation(
   text: string,
   metrics: Pick<
     ConversationDetailReport,
-    "cumulativeDurationMs" | "cumulativeUsage"
+    "childAgentTotals" | "cumulativeDurationMs" | "cumulativeUsage"
   >,
+  parentConversationId = DASHBOARD_QA_CONVERSATION_ID,
 ): MockConversation {
   const startedAt = iso(nowMs, -10 * 60_000);
   const conversation = detail(nowMs, {
@@ -999,10 +1019,7 @@ function advisorConversation(
       }),
     ],
   });
-  return {
-    ...conversation,
-    parentConversationId: DASHBOARD_QA_CONVERSATION_ID,
-  };
+  return { ...conversation, parentConversationId };
 }
 
 function longConversation(nowMs: number): ConversationDetailReport {
@@ -1404,14 +1421,37 @@ function mockConversations(nowMs: number): MockConversation[] {
       DASHBOARD_QA_PLAN_ID,
       "Review the dashboard plan before editing.",
       {
-        cumulativeDurationMs: 72_400,
+        childAgentTotals: {
+          count: 1,
+          cumulativeDurationMs: 6_200,
+          cumulativeUsage: {
+            inputTokens: 4_100,
+            outputTokens: 220,
+            cost: { total: 0.011 },
+          },
+        },
+        cumulativeDurationMs: 78_600,
         cumulativeUsage: {
-          inputTokens: 38_400,
-          outputTokens: 2_150,
+          inputTokens: 42_500,
+          outputTokens: 2_370,
           cachedInputTokens: 21_600,
-          cost: { input: 0.094, output: 0.048, total: 0.142 },
+          cost: { input: 0.1, output: 0.053, total: 0.153 },
+        },
+      },
+    ),
+    advisorConversation(
+      nowMs,
+      DASHBOARD_QA_PLAN_CHECK_ID,
+      "Check one claim in the dashboard plan.",
+      {
+        cumulativeDurationMs: 6_200,
+        cumulativeUsage: {
+          inputTokens: 4_100,
+          outputTokens: 220,
+          cost: { total: 0.011 },
         },
       },
+      DASHBOARD_QA_PLAN_ID,
     ),
     advisorConversation(
       nowMs,
@@ -1855,20 +1895,39 @@ export function readMockConversationChildAgents(
     (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;
-  // Match the API: each row has the usage of its own child Conversation.
+  // Match the API: each row has the usage of its child Conversation and of
+  // that child's own subagents.
   const childMetrics = (childConversationId: string) => {
     const child = conversations.find(
       (candidate) => candidate.conversationId === childConversationId,
     )!;
     return {
+      ...(child.childAgentTotals
+        ? { childAgentTotals: child.childAgentTotals }
+        : undefined),
       cumulativeDurationMs: child.cumulativeDurationMs,
       cumulativeUsage: child.cumulativeUsage,
     };
   };
+  if (conversationId === DASHBOARD_QA_PLAN_ID) {
+    return {
+      agents: [
+        {
+          ...childMetrics(DASHBOARD_QA_PLAN_CHECK_ID),
+          conversationId: DASHBOARD_QA_PLAN_CHECK_ID,
+          status: "completed",
+          task: "Check one claim in the dashboard plan.",
+          title: "Check one plan claim",
+          updatedAt: iso(startedAtMs, 16_000),
+        },
+      ],
+      conversationId,
+    };
+  }
+  if (conversationId !== DASHBOARD_QA_CONVERSATION_ID) {
+    return { agents: [], conversationId };
+  }
   return {
     agents: [
       {