@sentry/junior-dashboard 0.232.0 → 0.233.0

package/src/client/conversations/ConversationEventLog.tsx

@@ -5,7 +5,12 @@ import { createPortal } from "react-dom";
 import { Drawer } from "../components/Drawer";
 import { cn } from "../styles";
 import type { ConversationTranscript } from "../types";
-import { eventLogSummary, eventLogTone } from "./eventLog";
+import {
+  eventLogModel,
+  eventLogSummary,
+  eventLogTone,
+  eventLogUsage,
+} from "./eventLog";
 import { EventDetails } from "./EventDetails";
 import { HighlightText, useTranscriptSearch } from "./transcriptSearch";
 
@@ -25,6 +30,8 @@ export const ConversationEventLog = memo(function ConversationEventLog(props: {
     () =>
       events.map((event) => ({
         event,
+        model: eventLogModel(event),
+        usage: eventLogUsage(event),
         summary: eventLogSummary(event.data).replace(/\s+/g, " ").slice(0, 300),
       })),
     [events],
@@ -33,8 +40,8 @@ export const ConversationEventLog = memo(function ConversationEventLog(props: {
   const visibleRows = useMemo(
     () =>
       search.active
-        ? rows.filter(({ event, summary }) =>
-            `${summary} ${JSON.stringify(event)}`
+        ? rows.filter(({ event, summary, usage }) =>
+            `${summary} ${usage} ${JSON.stringify(event)}`
               .toLowerCase()
               .includes(search.normalizedQuery),
           )
@@ -79,7 +86,7 @@ export const ConversationEventLog = memo(function ConversationEventLog(props: {
           aria-label="Events"
           className="m-0 list-none divide-y divide-dashboard-border-subtle p-0"
         >
-          {visibleRows.map(({ event, summary }) => (
+          {visibleRows.map(({ event, summary, model, usage }) => (
             <li key={event.seq}>
               <button
                 aria-haspopup="dialog"
@@ -105,11 +112,44 @@ export const ConversationEventLog = memo(function ConversationEventLog(props: {
                 >
                   <HighlightText text={event.data.type} />
                 </span>
-                <span
-                  className="col-span-2 row-start-2 truncate text-dashboard-text @min-[48rem]:col-span-1 @min-[48rem]:row-auto"
-                  title={summary}
-                >
-                  <HighlightText text={summary} />
+                <span className="col-span-2 row-start-2 grid min-w-0 gap-1 text-dashboard-text @min-[48rem]:col-span-1 @min-[48rem]:row-auto">
+                  <span className="flex min-w-0 flex-wrap items-baseline gap-x-2">
+                    <span
+                      className={cn(
+                        "break-all",
+                        model
+                          ? "font-semibold text-violet-300"
+                          : "text-dashboard-text-muted",
+                      )}
+                    >
+                      <HighlightText
+                        text={model?.modelId ?? "Model not recorded"}
+                      />
+                    </span>
+                    {model?.modelProfile ? (
+                      <span className="text-dashboard-text-muted">
+                        <HighlightText text={model.modelProfile} />
+                      </span>
+                    ) : null}
+                    {model?.reasoningLevel ? (
+                      <span className="text-dashboard-text-muted">
+                        <HighlightText
+                          text={`${model.reasoningLevel} reasoning`}
+                        />
+                      </span>
+                    ) : null}
+                  </span>
+                  <span className="truncate" title={summary}>
+                    <HighlightText text={summary} />
+                  </span>
+                  {usage ? (
+                    <span
+                      className="text-dashboard-text-muted"
+                      title="Usage for this event only; costs are estimated USD"
+                    >
+                      <HighlightText text={usage} />
+                    </span>
+                  ) : null}
                 </span>
                 <ChevronRight
                   aria-hidden="true"

package/src/client/conversations/EventDetails.tsx

@@ -3,13 +3,64 @@ import type { ReactNode } from "react";
 
 import { RedactedMarker } from "./TranscriptRedacted";
 import { TranscriptText } from "./TranscriptText";
+import { eventLogModel } from "./eventLog";
+import { formatCostBreakdown } from "../format";
+import { EventUsage } from "./EventUsage";
 
 /** Present event content as readable sections, with the exact report available on demand. */
 export function EventDetails({ event }: { event: ConversationReportEvent }) {
   const data = event.data;
+  const model = eventLogModel(event);
+  const { usage, ...callAttributes } = event.modelCall ?? {};
   let content: ReactNode;
 
   switch (data.type) {
+    case "turn_routed": {
+      const {
+        type: _,
+        modelId: _modelId,
+        modelProfile: _profile,
+        reasoningLevel: _reasoning,
+        costUsd,
+        ...metadata
+      } = data;
+      content = (
+        <DetailSection title="Route selection">
+          <DetailValue
+            value={{
+              ...metadata,
+              ...(costUsd !== undefined
+                ? { routerCostUsd: formatCostBreakdown({ total: costUsd }) }
+                : undefined),
+            }}
+          />
+        </DetailSection>
+      );
+      break;
+    }
+    case "handoff": {
+      const {
+        type: _,
+        modelId: _modelId,
+        modelProfile: _profile,
+        reasoningLevel: _reasoning,
+        summary,
+        ...metadata
+      } = data;
+      content = (
+        <>
+          {Object.keys(metadata).length > 0 ? (
+            <DetailValue value={metadata} />
+          ) : null}
+          {summary ? (
+            <DetailSection title="Continuation summary">
+              <TranscriptText text={summary} />
+            </DetailSection>
+          ) : null}
+        </>
+      );
+      break;
+    }
     case "message": {
       const { type: _, text, redacted, ...metadata } = data;
       content = (
@@ -98,7 +149,30 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
   }
 
   return (
-    <div className="grid min-w-0 gap-6">
+    <div className="@container grid min-w-0 gap-6">
+      <DetailSection
+        title={
+          data.type === "handoff" ? "Target configuration" : "Configuration"
+        }
+      >
+        <DetailValue
+          value={{
+            model: model?.modelId ?? "Not recorded",
+            ...(model
+              ? {
+                  modelProfile: model.modelProfile ?? "Not recorded",
+                  reasoningLevel: model.reasoningLevel ?? "Not recorded",
+                }
+              : undefined),
+            ...callAttributes,
+          }}
+        />
+      </DetailSection>
+      {event.modelCall ? (
+        <DetailSection title="Call usage">
+          <EventUsage usage={usage} />
+        </DetailSection>
+      ) : null}
       {content}
       <details className="border-t border-dashboard-border pt-4">
         <summary className="cursor-pointer text-xs text-dashboard-text-muted hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-dashboard-focus">
@@ -114,8 +188,8 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
 
 function DetailSection(props: { title: string; children: ReactNode }) {
   return (
-    <section aria-label={props.title} className="grid min-w-0 gap-3">
-      <h3 className="m-0 break-words text-sm font-semibold text-dashboard-text">
+    <section aria-label={props.title} className="grid min-w-0 gap-2">
+      <h3 className="m-0 border-b border-dashboard-border pb-2 text-sm font-semibold text-dashboard-text">
         {props.title}
       </h3>
       {props.children}
@@ -131,7 +205,8 @@ function fieldLabel(key: string): string {
   return (words.charAt(0).toUpperCase() + words.slice(1))
     .replace(/\bid\b/gi, "ID")
     .replace(/\bids\b/gi, "IDs")
-    .replace(/\busd\b/gi, "USD");
+    .replace(/\busd\b/gi, "USD")
+    .replace(/\bapi\b/gi, "API");
 }
 
 // Keep arbitrary tool and context payloads readable without guessing their schema.
@@ -150,9 +225,11 @@ function DetailValue({ value }: { value: unknown }) {
     );
   }
   if (typeof value === "object" && value !== null) {
-    const fields = Object.entries(value);
+    const fields = Object.entries(value).filter(
+      ([, entry]) => entry !== undefined,
+    );
     return fields.length ? (
-      <dl className="m-0 grid min-w-0 gap-3">
+      <dl className="m-0 grid min-w-0 divide-y divide-dashboard-border-subtle">
         {fields.map(([key, entry]) => {
           const nested = typeof entry === "object" && entry !== null;
           return (
@@ -160,15 +237,21 @@ function DetailValue({ value }: { value: unknown }) {
               key={key}
               className={
                 nested
-                  ? "grid min-w-0 gap-2"
-                  : "grid min-w-0 grid-cols-[minmax(0,8rem)_minmax(0,1fr)] gap-3"
+                  ? "grid min-w-0 gap-2 py-2"
+                  : "grid min-w-0 grid-cols-[minmax(0,7rem)_minmax(0,1fr)] items-baseline gap-x-4 py-2 @min-[30rem]:grid-cols-[minmax(0,10rem)_minmax(0,1fr)]"
               }
             >
-              <dt className="break-words text-sm text-dashboard-text-muted">
+              <dt className="break-words text-xs leading-relaxed text-dashboard-text-muted">
                 {fieldLabel(key)}
               </dt>
               <dd className="m-0 min-w-0">
-                <DetailValue value={entry} />
+                {nested ? (
+                  <div className="border-l border-dashboard-border pl-3">
+                    <DetailValue value={entry} />
+                  </div>
+                ) : (
+                  <DetailValue value={entry} />
+                )}
               </dd>
             </div>
           );
@@ -179,7 +262,7 @@ function DetailValue({ value }: { value: unknown }) {
     );
   }
   return (
-    <span className="block whitespace-pre-wrap break-words font-mono text-sm leading-relaxed text-dashboard-text [overflow-wrap:anywhere]">
+    <span className="block whitespace-pre-wrap break-words font-mono text-xs leading-relaxed text-dashboard-text [overflow-wrap:anywhere]">
       {value === null ? "null" : value === "" ? "Empty text" : String(value)}
     </span>
   );

package/src/client/conversations/EventUsage.tsx

@@ -0,0 +1,118 @@
+import type { ConversationUsage } from "@sentry/junior/api/schema";
+
+import { formatCostBreakdown, summarizeCost } from "../format";
+import { cn } from "../styles";
+
+/** Align recorded token counts with their costs without adding overlapping counters. */
+export function EventUsage({ usage }: { usage?: ConversationUsage }) {
+  const cost = summarizeCost(usage);
+  const rows = [
+    { label: "Input", tokens: usage?.inputTokens, cost: usage?.cost?.input },
+    { label: "Output", tokens: usage?.outputTokens, cost: usage?.cost?.output },
+    {
+      label: "Cache read",
+      tokens: usage?.cachedInputTokens,
+      cost: usage?.cost?.cacheRead,
+    },
+    {
+      label: "Cache write",
+      tokens: usage?.cacheCreationTokens,
+      cost: usage?.cost?.cacheWrite,
+    },
+    { label: "Reasoning", tokens: usage?.reasoningTokens },
+    { label: "Total", tokens: usage?.totalTokens, cost: cost?.total },
+  ].filter((row) => row.tokens !== undefined || row.cost !== undefined);
+
+  if (rows.length === 0) {
+    return (
+      <p className="m-0 text-sm text-dashboard-text-muted">
+        Token usage and cost were not recorded for this call.
+      </p>
+    );
+  }
+
+  return (
+    <>
+      <div className="min-w-0 overflow-x-auto">
+        <table
+          aria-label="Model call token and cost breakdown"
+          className="w-full min-w-72 table-fixed border-collapse text-xs leading-relaxed"
+        >
+          <colgroup>
+            <col />
+            <col className="w-24" />
+            <col className="w-24" />
+          </colgroup>
+          <thead>
+            <tr className="border-b border-dashboard-border text-dashboard-text-muted">
+              <th scope="col" className="py-2 text-left font-normal">
+                Usage
+              </th>
+              <th scope="col" className="py-2 text-right font-normal">
+                Tokens
+              </th>
+              <th scope="col" className="py-2 text-right font-normal">
+                Cost (USD)
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row) => (
+              <tr
+                key={row.label}
+                className={cn(
+                  "border-b border-dashboard-border-subtle last:border-b-0",
+                  row.label === "Total" &&
+                    "border-t border-dashboard-border font-semibold",
+                )}
+              >
+                <th
+                  scope="row"
+                  className={cn(
+                    "py-2 text-left font-normal",
+                    row.label === "Total"
+                      ? "font-semibold text-dashboard-text"
+                      : "text-dashboard-text-muted",
+                  )}
+                >
+                  {row.label}
+                </th>
+                <td className="py-2 text-right font-mono tabular-nums text-dashboard-text">
+                  {row.tokens === undefined ? (
+                    <span
+                      aria-label="Not recorded"
+                      className="text-dashboard-text-faint"
+                    >
+                      —
+                    </span>
+                  ) : (
+                    row.tokens.toLocaleString("en-US")
+                  )}
+                </td>
+                <td className="py-2 text-right font-mono tabular-nums text-dashboard-text">
+                  {row.cost === undefined ? (
+                    <span
+                      aria-label="Not recorded separately"
+                      className="text-dashboard-text-faint"
+                    >
+                      —
+                    </span>
+                  ) : (
+                    <span title={`${row.cost} USD`}>
+                      {formatCostBreakdown({ total: row.cost })}
+                    </span>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <p className="m-0 text-xs leading-relaxed text-dashboard-text-muted">
+        This call only · Estimated costs
+        <br />
+        Input excludes cache reads and writes. Reasoning is included in output.
+      </p>
+    </>
+  );
+}

package/src/client/conversations/eventLog.ts

@@ -1,6 +1,57 @@
-import type { ConversationReportEventData } from "@sentry/junior/api/schema";
+import type {
+  ConversationReportEvent,
+  ConversationReportEventData,
+} from "@sentry/junior/api/schema";
 
 import { toolCallPreview } from "./toolCallPreview";
+import {
+  formatCompactNumber,
+  formatCostBreakdown,
+  summarizeCost,
+} from "../format";
+
+/** Read recorded event configuration, including reports from before model context was added. */
+export function eventLogModel(
+  event: ConversationReportEvent,
+): ConversationReportEvent["model"] {
+  if (event.model) return event.model;
+  const data = event.data;
+  if (data.type === "turn_routed" || data.type === "handoff") {
+    return {
+      modelId: data.modelId,
+      modelProfile: data.modelProfile,
+      reasoningLevel: data.reasoningLevel,
+    };
+  }
+  return undefined;
+}
+
+/** Keep call costs distinct from router cost and never repeat usage on tool results. */
+export function eventLogUsage(event: ConversationReportEvent): string {
+  const usage = event.modelCall?.usage;
+  const cost = summarizeCost(usage);
+  const fields = [
+    cost ? `${formatCostBreakdown(cost)} call` : undefined,
+    event.data.type === "turn_routed" && event.data.costUsd !== undefined
+      ? `${formatCostBreakdown({ total: event.data.costUsd })} router`
+      : undefined,
+    ...(
+      [
+        ["inputTokens", "in"],
+        ["outputTokens", "out"],
+        ["cachedInputTokens", "cache read"],
+        ["cacheCreationTokens", "cache write"],
+        ["reasoningTokens", "reasoning"],
+        ["totalTokens", "total"],
+      ] as const
+    ).map(([key, label]) =>
+      usage?.[key] !== undefined
+        ? `${formatCompactNumber(usage[key])} ${label}`
+        : undefined,
+    ),
+  ];
+  return fields.filter((field) => field !== undefined).join(" · ");
+}
 
 /** Summarize an event without merging it with earlier or later events. */
 export function eventLogSummary(data: ConversationReportEventData): string {
@@ -10,9 +61,11 @@ export function eventLogSummary(data: ConversationReportEventData): string {
     case "message_handled":
       return data.messageId;
     case "assistant_message":
-      return data.parts
-        .map((part) => (part.redacted ? "Content hidden" : part.text))
-        .join(" · ");
+      return (
+        data.parts
+          .map((part) => (part.redacted ? "Content hidden" : part.text))
+          .join(" · ") || "Model call recorded"
+      );
     case "tool_calls":
       return data.calls
         .map((call) => {
@@ -25,7 +78,7 @@ export function eventLogSummary(data: ConversationReportEventData): string {
         ? `${data.state} · ${data.failureCode}${data.failureReason ? ` · ${data.failureReason}` : ""}`
         : `${data.state} · ${data.turnId}`;
     case "turn_routed":
-      return `${data.modelProfile} · ${data.modelId} · ${data.reasoningLevel}`;
+      return `Route selected · ${data.source}${data.confidence !== undefined ? ` · ${Math.round(data.confidence * 100)}% confidence` : ""}`;
     case "turn_context":
       return `${data.pluginName} · ${data.kind} · v${data.version}`;
     case "guardian_action_reviewed":
@@ -39,7 +92,7 @@ export function eventLogSummary(data: ConversationReportEventData): string {
     case "compaction":
       return data.summary ?? "Agent history compacted";
     case "handoff":
-      return `${data.modelProfile} · ${data.modelId}`;
+      return "Handoff · New configuration applied";
     case "subagent":
       return `${data.subagentKind} · ${data.status} · ${data.childConversationId}`;
   }

package/src/client/conversations/eventTranscript.ts

@@ -242,6 +242,8 @@ export function transcriptMessagesFromEvents(
     }
 
     if (data.type === "assistant_message") {
+      // Calls with no reasoning still carry usage in the event log, not a chat bubble.
+      if (data.parts.length === 0) continue;
       messages.push(
         eventMessage(
           event,

package/src/client/conversations/transcriptBottomPinning.ts

@@ -73,7 +73,7 @@ export function transcriptJuniorMessageVersion(
         data.redacted ? "redacted" : (data.text?.length ?? 0),
       ].join(":");
     }
-    if (data.type === "assistant_message") {
+    if (data.type === "assistant_message" && data.parts.length > 0) {
       const lastPart = data.parts.at(-1);
       return [
         event.seq,
@@ -117,7 +117,7 @@ function changesVisibleTranscript(event: ConversationReportEvent): boolean {
   if (data.type === "turn_lifecycle") return data.state === "failed";
   return (
     data.type === "message" ||
-    data.type === "assistant_message" ||
+    (data.type === "assistant_message" && data.parts.length > 0) ||
     data.type === "tool_calls" ||
     data.type === "subagent" ||
     data.type === "structured_event" ||

package/src/mock-reporting/fixtures.ts

@@ -162,8 +162,9 @@ function reportEvent(
   seq: number,
   createdAt: string,
   data: ConversationReportEventData,
+  metadata?: Pick<ConversationReportEvent, "model" | "modelCall">,
 ): ConversationReportEvent {
-  return { seq, createdAt, data };
+  return { seq, createdAt, data, ...metadata };
 }
 
 type DetailOptions = Omit<
@@ -453,38 +454,81 @@ function activeConversation(nowMs: number): ConversationDetailReport {
         reasoningLevel: "high",
         confidence: 0.93,
         source: "router",
+        costUsd: 0.0012,
       }),
-      reportEvent(4, iso(Date.parse(startedAt), 10_000), {
-        type: "tool_calls",
-        calls: [
-          {
-            toolCallId: "active-search",
-            name: "webSearch",
-            status: "running",
+      reportEvent(
+        4,
+        iso(Date.parse(startedAt), 10_000),
+        {
+          type: "tool_calls",
+          calls: [
+            {
+              toolCallId: "active-search",
+              name: "webSearch",
+              status: "running",
+            },
+          ],
+        },
+        {
+          model: {
+            modelId: "openai/gpt-5.6-sol",
+            modelProfile: "handoff",
+            reasoningLevel: "high",
           },
-        ],
-      }),
-      reportEvent(5, iso(Date.parse(startedAt), 14_000), {
-        type: "tool_calls",
-        calls: [
-          {
-            toolCallId: "active-search",
-            name: "webSearch",
-            status: "completed",
-            startedSeq: 4,
-            startedAt: iso(Date.parse(startedAt), 10_000),
-            input: { query: "checkout latency last deployment" },
-            output: {
-              results: [
-                {
-                  title: "payments-v42 deploy notes",
-                  url: "https://docs.sentry.io",
-                },
-              ],
+          modelCall: {
+            provider: "vercel-ai-gateway",
+            api: "openai-responses",
+            stopReason: "toolUse",
+            usage: {
+              inputTokens: 12500,
+              outputTokens: 800,
+              cachedInputTokens: 32000,
+              cacheCreationTokens: 2000,
+              reasoningTokens: 600,
+              totalTokens: 47300,
+              cost: {
+                input: 0.025,
+                output: 0.008,
+                cacheRead: 0.0064,
+                cacheWrite: 0.005,
+                total: 0.0444,
+              },
             },
           },
-        ],
-      }),
+        },
+      ),
+      reportEvent(
+        5,
+        iso(Date.parse(startedAt), 14_000),
+        {
+          type: "tool_calls",
+          calls: [
+            {
+              toolCallId: "active-search",
+              name: "webSearch",
+              status: "completed",
+              startedSeq: 4,
+              startedAt: iso(Date.parse(startedAt), 10_000),
+              input: { query: "checkout latency last deployment" },
+              output: {
+                results: [
+                  {
+                    title: "payments-v42 deploy notes",
+                    url: "https://docs.sentry.io",
+                  },
+                ],
+              },
+            },
+          ],
+        },
+        {
+          model: {
+            modelId: "openai/gpt-5.6-sol",
+            modelProfile: "handoff",
+            reasoningLevel: "high",
+          },
+        },
+      ),
       // Mixed markdown keeps font/legibility QA honest for long assistant replies.
       reportEvent(6, iso(Date.parse(startedAt), 22_000), {
         type: "message",