@sentry/junior-dashboard 0.247.0 → 0.249.0

package/src/client/conversations/ConversationUsageBreakdown.tsx

@@ -0,0 +1,278 @@
+import type {
+  ConversationDetailReport,
+  ConversationModelUsage,
+} from "@sentry/junior/api/schema";
+import type { ReactNode } from "react";
+
+import {
+  formatCompactNumber,
+  summarizeCost,
+  summarizeModelCost,
+  summarizeModelUsage,
+  summarizeUsage,
+  totalConversationCost,
+} from "../format";
+import { ShimmerText } from "../components/ShimmerText";
+import type { Conversation } from "../types";
+import { liveModelId } from "./ConversationMeta";
+import {
+  auxiliaryOperationLabel,
+  costFormatter,
+  modelLabel,
+  subagentShare,
+  subagentUsage,
+  tokenTypeRows,
+} from "./TelemetryMetrics";
+
+type BreakdownRow = {
+  cost: string;
+  count: string;
+  /** Muted second line, such as the token types of one model. */
+  detail?: string;
+  key: string;
+  label: ReactNode;
+};
+
+const NOT_RECORDED = "—";
+
+/** Name each recorded token type, such as `42k input · 4.6k output`. */
+function tokenTypes(
+  usage: ConversationModelUsage["usage"],
+): string | undefined {
+  const summary = summarizeUsage(usage);
+  const text = summary
+    ? tokenTypeRows(summary)
+        .map((row) => `${row.value} ${row.label}`)
+        .join(" · ")
+    : "";
+  return text || undefined;
+}
+
+/**
+ * One usage table. Every table in the breakdown shares column widths, so the
+ * cost column lines up from table to table.
+ */
+function BreakdownTable(props: {
+  /** Header of the count column, such as Tokens or Calls. */
+  countLabel: string;
+  label: string;
+  rows: BreakdownRow[];
+  total?: { cost: string; count: string; label: string };
+}) {
+  return (
+    <div className="min-w-0 overflow-x-auto">
+      <table
+        aria-label={props.label}
+        className="w-full min-w-72 table-fixed border-collapse text-xs leading-relaxed"
+      >
+        <colgroup>
+          <col />
+          <col className="w-20" />
+          <col className="w-20" />
+        </colgroup>
+        <thead>
+          <tr className="border-b border-dashboard-border text-dashboard-text-muted">
+            <th scope="col" className="py-2 text-left font-normal">
+              {props.label}
+            </th>
+            <th scope="col" className="py-2 text-right font-normal">
+              {props.countLabel}
+            </th>
+            <th scope="col" className="py-2 text-right font-normal">
+              Cost
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {props.rows.map((row) => (
+            <tr
+              className="border-b border-dashboard-border-subtle last:border-b-0"
+              key={row.key}
+            >
+              <th scope="row" className="py-2 pr-3 text-left font-normal">
+                <span className="block truncate text-dashboard-text">
+                  {row.label}
+                </span>
+                {row.detail ? (
+                  <span className="mt-0.5 block text-dashboard-text-faint">
+                    {row.detail}
+                  </span>
+                ) : null}
+              </th>
+              <td className="py-2 text-right align-top font-sans tabular-nums text-dashboard-text">
+                {row.count}
+              </td>
+              <td className="py-2 text-right align-top font-sans tabular-nums text-dashboard-text">
+                {row.cost}
+              </td>
+            </tr>
+          ))}
+          {props.total ? (
+            <tr className="border-t border-dashboard-border font-semibold text-dashboard-text">
+              <th scope="row" className="py-2 text-left font-semibold">
+                {props.total.label}
+              </th>
+              <td className="py-2 text-right font-sans tabular-nums">
+                {props.total.count}
+              </td>
+              <td className="py-2 text-right font-sans tabular-nums">
+                {props.total.cost}
+              </td>
+            </tr>
+          ) : null}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+/**
+ * Break a Conversation's usage down by agent, model, and auxiliary
+ * operation. The header tooltips show only the largest items; this lists
+ * every one with its token types. Render nothing without model or auxiliary
+ * usage.
+ */
+export function ConversationUsageBreakdown(props: {
+  conversation: Conversation | undefined;
+  detail?: ConversationDetailReport;
+}) {
+  if (!props.conversation) return null;
+  const modelUsage = props.detail?.modelUsage ?? [];
+  const auxiliaryCosts =
+    props.detail?.auxiliaryCosts ?? props.conversation.auxiliaryCosts;
+  const usage =
+    props.detail?.cumulativeUsage ?? props.conversation.cumulativeUsage;
+  const childAgentTotals =
+    props.detail?.childAgentTotals ?? props.conversation.childAgentTotals;
+  const tokens =
+    summarizeModelUsage(modelUsage)?.totalTokens ??
+    summarizeUsage(usage)?.totalTokens;
+  const modelCost = summarizeModelCost(modelUsage) ?? summarizeCost(usage);
+  const cost = totalConversationCost(modelCost, auxiliaryCosts)?.total;
+  const operations = [...(auxiliaryCosts?.operations ?? [])].sort(
+    (a, b) => b.costUsd - a.costUsd,
+  );
+  if (!modelUsage.length && !operations.length) return null;
+
+  const formatCost = costFormatter(cost ?? 0);
+  const formatTokens = (value: number | undefined) =>
+    value === undefined ? NOT_RECORDED : formatCompactNumber(value);
+  const formatMaybeCost = (value: number | undefined) =>
+    value === undefined ? NOT_RECORDED : formatCost(value);
+  const activeModelId = liveModelId(props.detail);
+
+  const models = modelUsage
+    .map((item) => ({
+      cost: summarizeCost(item.usage)?.total,
+      item,
+      tokens: summarizeUsage(item.usage)?.totalTokens,
+    }))
+    .sort(
+      (a, b) =>
+        (b.cost ?? 0) - (a.cost ?? 0) || (b.tokens ?? 0) - (a.tokens ?? 0),
+    );
+
+  const subagents = subagentUsage(childAgentTotals);
+  const subagentCost = subagentShare(subagents.cost, cost ?? subagents.cost);
+  const subagentTokens = subagentShare(
+    subagents.tokens,
+    tokens ?? subagents.tokens,
+  );
+
+  return (
+    <div className="grid min-w-0 gap-5">
+      {childAgentTotals ? (
+        <BreakdownTable
+          countLabel="Tokens"
+          label="Agent"
+          rows={[
+            {
+              cost: formatMaybeCost(
+                cost === undefined ? undefined : cost - subagentCost,
+              ),
+              count: formatTokens(
+                tokens === undefined ? undefined : tokens - subagentTokens,
+              ),
+              key: "self",
+              label: "This agent",
+            },
+            {
+              cost: formatCost(subagentCost),
+              count: formatTokens(subagentTokens),
+              key: "subagents",
+              label: `${formatCompactNumber(childAgentTotals.count)} subagent${childAgentTotals.count === 1 ? "" : "s"}`,
+            },
+          ]}
+          total={{
+            cost: formatMaybeCost(cost),
+            count: formatTokens(tokens),
+            label: "Total",
+          }}
+        />
+      ) : null}
+      {models.length ? (
+        <BreakdownTable
+          countLabel="Tokens"
+          label="Model"
+          rows={models.map(({ cost: itemCost, item, tokens: itemTokens }) => ({
+            cost: formatMaybeCost(itemCost),
+            count: formatTokens(itemTokens),
+            detail: tokenTypes(item.usage),
+            key: item.modelId,
+            label: (
+              <span className="flex min-w-0 items-baseline gap-2">
+                <span
+                  className="min-w-0 truncate font-mono"
+                  title={item.modelId}
+                >
+                  {modelLabel(item.modelId)}
+                </span>
+                {item.modelId === activeModelId ? (
+                  <span className="shrink-0 text-dashboard-text-muted">
+                    <ShimmerText active>in progress</ShimmerText>
+                  </span>
+                ) : null}
+              </span>
+            ),
+          }))}
+          total={
+            models.length > 1
+              ? {
+                  cost: formatMaybeCost(modelCost?.total),
+                  count: formatTokens(tokens),
+                  label: "All models",
+                }
+              : undefined
+          }
+        />
+      ) : null}
+      {auxiliaryCosts && operations.length ? (
+        <BreakdownTable
+          countLabel="Calls"
+          label="Auxiliary"
+          rows={operations.map((operation) => ({
+            cost: formatCost(operation.costUsd),
+            count: formatCompactNumber(operation.events),
+            key: `${operation.namespace}/${operation.name}`,
+            label: auxiliaryOperationLabel(operation),
+          }))}
+          total={
+            operations.length > 1
+              ? {
+                  cost: formatCost(auxiliaryCosts.costUsd),
+                  count: formatCompactNumber(
+                    operations.reduce((sum, item) => sum + item.events, 0),
+                  ),
+                  label: "All auxiliary",
+                }
+              : undefined
+          }
+        />
+      ) : null}
+      <p className="m-0 text-xs leading-relaxed text-dashboard-text-muted">
+        Estimated costs.
+        {childAgentTotals ? " Totals include subagents at any depth." : null}
+      </p>
+    </div>
+  );
+}

package/src/client/conversations/ConversationWorkspace.tsx

@@ -93,7 +93,7 @@ export function ConversationWorkspace() {
       <main
         className={cn(
           dashboardContainerClass,
-          "h-full min-h-0 overflow-y-auto overscroll-contain px-4 py-4 sm:px-6 sm:py-6 xl:border-x xl:border-dashboard-border-subtle",
+          "h-full min-h-0 overflow-y-auto overscroll-contain px-4 py-4 sm:px-6 sm:py-6",
         )}
       >
         <div className="mx-auto grid w-full max-w-6xl gap-8">

package/src/client/conversations/ConversationWorkspaceLoading.tsx

@@ -12,7 +12,7 @@ export function ConversationWorkspaceLoading(props: { detail: boolean }) {
       aria-live="polite"
       className={cn(
         dashboardContainerClass,
-        "grid h-full min-h-0 overflow-hidden md:grid-cols-[21rem_minmax(0,1fr)] xl:border-x xl:border-white/[0.07]",
+        "grid h-full min-h-0 overflow-hidden md:grid-cols-[20rem_minmax(0,1fr)]",
       )}
       role="status"
     >
@@ -25,7 +25,7 @@ export function ConversationWorkspaceLoading(props: { detail: boolean }) {
 
 function ConversationSidebarLoading() {
   return (
-    <aside className="hidden h-full min-h-0 grid-rows-[auto_auto_minmax(0,1fr)] overflow-hidden border-r border-white/[0.07] bg-white/[0.02] md:grid">
+    <aside className="hidden h-full min-h-0 grid-rows-[auto_auto_minmax(0,1fr)] overflow-hidden border-r border-dashboard-border bg-dashboard-fill-faint md:grid">
       <div className="flex items-center justify-between gap-2 px-3 pb-2 pt-3">
         <h2 className="m-0 font-display text-lg font-medium leading-tight text-dashboard-text">
           Conversations
@@ -60,7 +60,7 @@ function ConversationHomeLoading() {
       aria-live="polite"
       className={cn(
         dashboardContainerClass,
-        "h-full min-h-0 overflow-y-auto overscroll-contain px-4 py-4 sm:px-6 sm:py-6 xl:border-x xl:border-dashboard-border-subtle",
+        "h-full min-h-0 overflow-y-auto overscroll-contain px-4 py-4 sm:px-6 sm:py-6",
       )}
       role="status"
     >
@@ -89,7 +89,7 @@ function ConversationDetailLoading() {
   return (
     <section
       aria-label="Selected conversation"
-      className="grid min-h-0 grid-rows-[minmax(0,1fr)] overflow-hidden bg-white/[0.012]"
+      className="grid min-h-0 grid-rows-[minmax(0,1fr)] overflow-hidden bg-dashboard-fill-faint"
     >
       <ChatLayout
         scrollAriaLabel="Conversation transcript"

package/src/client/conversations/CopyMarkdownButton.tsx

@@ -39,7 +39,7 @@ export function CopyMarkdownButton(props: {
     return (
       <button
         aria-label={label}
-        className="flex w-full cursor-pointer items-center gap-2.5 rounded-md border-0 bg-transparent px-2.5 py-2 text-left text-sm font-semibold text-dashboard-text transition-colors hover:bg-white/10 focus-visible:bg-white/10 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+        className="flex w-full cursor-pointer items-center gap-2.5 rounded-md border-0 bg-transparent px-2.5 py-2 text-left text-sm font-semibold text-dashboard-text transition-colors hover:bg-dashboard-fill-strong focus-visible:bg-dashboard-fill-strong focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
         disabled={!props.getMarkdown || status === "copying"}
         onClick={() => void copyMarkdown()}
         type="button"

package/src/client/conversations/EventUsage.tsx

@@ -77,7 +77,7 @@ export function EventUsage({ usage }: { usage?: ConversationUsage }) {
                 >
                   {row.label}
                 </th>
-                <td className="py-2 text-right font-mono tabular-nums text-dashboard-text">
+                <td className="py-2 text-right font-sans tabular-nums text-dashboard-text">
                   {row.tokens === undefined ? (
                     <span
                       aria-label="Not recorded"
@@ -89,7 +89,7 @@ export function EventUsage({ usage }: { usage?: ConversationUsage }) {
                     row.tokens.toLocaleString("en-US")
                   )}
                 </td>
-                <td className="py-2 text-right font-mono tabular-nums text-dashboard-text">
+                <td className="py-2 text-right font-sans tabular-nums text-dashboard-text">
                   {row.cost === undefined ? (
                     <span
                       aria-label="Not recorded separately"

package/src/client/conversations/PendingMailboxStack.tsx

@@ -91,7 +91,7 @@ function PendingMetaIcons(props: {
                 ? "Could not remove. Try again."
                 : "Remove queued message"
             }
-            className="inline-flex size-5 cursor-pointer items-center justify-center rounded border-0 bg-transparent p-0 text-dashboard-text-muted transition-colors hover:bg-white/[0.06] hover:text-amber-50 focus-visible:outline focus-visible:outline-1 focus-visible:outline-amber-200/55 disabled:cursor-default disabled:opacity-50"
+            className="inline-flex size-5 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-dashboard-text-muted transition-colors hover:bg-dashboard-fill-hover hover:text-amber-50 focus-visible:outline focus-visible:outline-1 focus-visible:outline-amber-200/55 disabled:cursor-default disabled:opacity-50"
             disabled={props.cancelDisabled}
             onClick={props.onCancel}
             type="button"
@@ -141,7 +141,7 @@ function PendingRow(props: {
     <article className="grid min-w-0 grid-cols-[minmax(0,1fr)] gap-1 px-3 py-2 text-dashboard-text md:px-3.5">
       <TranscriptHeadingRow
         left={
-          <span className="inline-block max-w-full truncate font-display text-sm font-semibold leading-tight text-dashboard-text">
+          <span className="inline-block max-w-full truncate font-sans text-sm font-semibold leading-tight text-dashboard-text">
             {roleLabel}
           </span>
         }
@@ -160,11 +160,11 @@ function PendingRow(props: {
         }
       />
       {redacted ? (
-        <p className="m-0 font-mono text-sm leading-snug text-dashboard-text-muted">
+        <p className="m-0 font-sans text-sm leading-snug text-dashboard-text-muted">
           [redacted]
         </p>
       ) : (
-        <p className="m-0 line-clamp-3 font-mono text-sm leading-snug text-dashboard-text/90">
+        <p className="m-0 line-clamp-3 font-sans text-sm leading-snug text-dashboard-text-subtle">
           {text}
         </p>
       )}
@@ -174,7 +174,7 @@ function PendingRow(props: {
             Could not send.
           </p>
           <button
-            className="cursor-pointer border-0 bg-transparent p-0 font-sans text-xs font-medium text-cyan-200/90 underline-offset-2 hover:underline focus-visible:outline focus-visible:outline-1 focus-visible:outline-cyan-300/55"
+            className="cursor-pointer border-0 bg-transparent p-0 font-sans text-xs font-medium text-dashboard-accent-text/90 underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus"
             onClick={() => props.onRetry?.(props.message)}
             type="button"
           >

package/src/client/conversations/README.md

@@ -16,6 +16,15 @@ shared controls and overlays.
   `flush` when the text already sits on the transcript edge. It extends the
   padded control around that text. Do not repeat negative margins at call sites.
   The caller owns the native `details` element and its content.
+- Activity rows (tools, reasoning, and grouped rail events) share one
+  layout: a 1rem icon column, an 8px gap, then the title and metadata.
+  Expanded content sits in `transcriptActivityBodyClass` under the title.
+  `TranscriptActivityNesting` tells a rail event that it is inside an activity
+  group. Outside a group, the rail icon sits in the avatar column so the text
+  lines up with message text.
+- `TranscriptSubagentView` renders a child agent as a card with its name,
+  status, run time, and title. It matches the child agent rows in the details
+  drawer and opens the child transcript.
 - `TranscriptAttachments` owns wrapping for both message attachments and file
   deliveries. `ImageAttachment` owns image previews.
 - `TranscriptTurnContextView` owns context content. The shared `Drawer` owns

package/src/client/conversations/SubagentTranscriptDrawer.tsx

@@ -4,7 +4,11 @@ import { Link } from "react-router";
 
 import { useConversationData } from "./queries";
 import { conversationPath } from "./conversationRoutes";
-import { conversationDetailTitle, formatMessageTimestamp } from "../format";
+import {
+  conversationDetailTitle,
+  formatMessageTimestamp,
+  formatRelativeMessageTimestamp,
+} from "../format";
 import { buildConversationMarkdown } from "../markdownExport";
 import { Drawer } from "../components/Drawer";
 import { SearchInput } from "../components/SearchInput";
@@ -22,6 +26,8 @@ import { transcriptEmptyClass } from "./transcriptStyles";
 
 /** One child Conversation to show, with what its parent already knows. */
 export interface SubagentTranscriptTarget {
+  /** Agent name, such as "planner". Shown beside the status. */
+  agentName?: string;
   conversationId: string;
   /** Task title or agent name, shown before the child loads. */
   label?: string;
@@ -58,6 +64,11 @@ function SubagentTranscriptDrawerContent(props: {
   const label =
     props.target.label ?? conversationDetailTitle(detail) ?? "Subagent";
   const status = statusLabel(props.target.status, detail?.status);
+  const agentName =
+    props.target.agentName && props.target.agentName !== label
+      ? props.target.agentName
+      : undefined;
+  const startedAt = detail ? Date.parse(detail.startedAt) : undefined;
   const searchOpenVisible = searchOpen || search.length > 0;
 
   const titleId = "subagent-transcript-drawer-title";
@@ -100,42 +111,47 @@ function SubagentTranscriptDrawerContent(props: {
               aria-hidden="true"
               className="shrink-0 text-cyan-300"
               size={16}
-              strokeWidth={2.25}
+              strokeWidth={2}
             />
             <h2
-              className="m-0 min-w-0 break-words text-lg font-bold leading-tight tracking-normal text-dashboard-text"
+              className="m-0 min-w-0 break-words font-display text-lg font-medium leading-tight tracking-tight text-dashboard-text"
               id={titleId}
             >
               {label}
             </h2>
           </div>
-          <div className="mt-2 grid min-w-0 gap-1.5 text-xs leading-snug">
-            <code className="min-w-0 break-all font-mono text-xs text-dashboard-text">
-              {props.target.conversationId}
-            </code>
+          <div className="mt-1.5 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-5 text-dashboard-text-muted">
+            {agentName ? (
+              <span className="font-medium text-dashboard-text">
+                {agentName}
+              </span>
+            ) : null}
+            {status ? (
+              <StatusChip size="compact" tone={subagentStatusTone(status)}>
+                {status}
+              </StatusChip>
+            ) : null}
+            {detail && startedAt !== undefined ? (
+              <time
+                className="tabular-nums"
+                dateTime={detail.startedAt}
+                title={formatMessageTimestamp(startedAt, true)}
+              >
+                Started {formatRelativeMessageTimestamp(startedAt)}
+              </time>
+            ) : null}
             <Link
-              className="inline-flex w-fit items-center gap-1 font-semibold text-dashboard-text no-underline hover:underline"
+              className="inline-flex w-fit items-center gap-1 font-medium text-dashboard-accent-text no-underline hover:underline"
               onClick={props.onClose}
               to={conversationPath(props.target.conversationId)}
             >
               Open conversation
-              <ExternalLink aria-hidden="true" size={12} strokeWidth={2.25} />
+              <ExternalLink aria-hidden="true" size={12} strokeWidth={2} />
             </Link>
           </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}
+          <code className="mt-1 block min-w-0 break-all font-mono text-xs text-dashboard-text-faint">
+            {props.target.conversationId}
+          </code>
           {searchOpenVisible ? (
             <div className="mt-3 min-w-0">
               <SearchInput