@sentry/junior-dashboard 0.231.0 → 0.233.0

package/src/client/conversations/ConversationDetailsDrawer.tsx

@@ -6,6 +6,7 @@ import { ButtonLink } from "../components/Button";
 import { Drawer } from "../components/Drawer";
 import { SegmentedTabs } from "../components/SegmentedTabs";
 import { ConversationMemories } from "./ConversationMemories";
+import { ShareConversationButton } from "./ShareConversationButton";
 
 const tabs = [
   { label: "Details", value: "details" },
@@ -85,9 +86,8 @@ export function ConversationDetailsDrawer(props: {
             No additional conversation details.
           </p>
         )}
-        {tab === "details" &&
-        (props.lastActivityAt || props.sentryConversationUrl) ? (
-          <footer className="mt-5 grid gap-3 border-t border-dashboard-border pt-4 text-xs text-dashboard-text-muted">
+        {tab === "details" ? (
+          <footer className="mt-5 grid gap-6 border-t border-dashboard-border pt-4 text-xs text-dashboard-text-muted">
             {props.lastActivityAt ? (
               <div className="flex flex-wrap items-baseline justify-between gap-2">
                 <span>Last activity</span>
@@ -102,20 +102,26 @@ export function ConversationDetailsDrawer(props: {
                 </time>
               </div>
             ) : null}
-            {props.sentryConversationUrl ? (
-              <ButtonLink
-                className="w-fit focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
-                to={props.sentryConversationUrl}
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                Open in Sentry
-                <ExternalLink
-                  aria-hidden="true"
-                  className="size-3.5 shrink-0"
-                />
-              </ButtonLink>
-            ) : null}
+            <div className="flex flex-wrap items-center gap-2">
+              <ShareConversationButton
+                key={props.conversationId}
+                conversationId={props.conversationId}
+              />
+              {props.sentryConversationUrl ? (
+                <ButtonLink
+                  className="w-fit focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
+                  to={props.sentryConversationUrl}
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  Open in Sentry
+                  <ExternalLink
+                    aria-hidden="true"
+                    className="size-3.5 shrink-0"
+                  />
+                </ButtonLink>
+              ) : null}
+            </div>
           </footer>
         ) : null}
       </SegmentedTabs>

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/ConversationHeader.tsx

@@ -111,6 +111,7 @@ export function ConversationHeader(props: {
         <div className="absolute right-0 top-[calc(100%+0.35rem)] z-40 w-56 rounded-xl border border-white/[0.08] bg-dashboard-surface-raised/95 p-1.5 shadow-2xl shadow-black/75 backdrop-blur-xl">
           <ConversationHeaderActions
             archive={props.archive}
+            conversationId={props.conversationId}
             copyAction={menuCopyAction}
             detailsOpen={detailsOpen}
             layout="menu"
@@ -185,6 +186,7 @@ export function ConversationHeader(props: {
           </div>
           <ConversationHeaderActions
             archive={props.archive}
+            conversationId={props.conversationId}
             copyAction={props.copyAction}
             detailsOpen={detailsOpen}
             onDetailsClick={() => setDetailsOpen(true)}

package/src/client/conversations/ConversationHeaderActions.tsx

@@ -14,6 +14,7 @@ import { Button, ToggleButton } from "../components/Button";
 import { IconButtonTooltip } from "../components/Tooltip";
 import { cn } from "../styles";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
+import { ShareConversationButton } from "./ShareConversationButton";
 
 export type ConversationArchiveAction = {
   archived: boolean;
@@ -26,6 +27,7 @@ export type ConversationArchiveAction = {
 /** Show conversation actions in the header or mobile menu. */
 export function ConversationHeaderActions(props: {
   archive: ConversationArchiveAction;
+  conversationId: string;
   copyAction?: ReactNode;
   detailsOpen: boolean;
   /** `bar` is the desktop icon row. `menu` stacks actions for mobile overflow. */
@@ -65,6 +67,11 @@ export function ConversationHeaderActions(props: {
         >
           <ScrollText aria-hidden="true" size={16} strokeWidth={2} />
         </MenuActionButton>
+        <ShareConversationButton
+          key={props.conversationId}
+          conversationId={props.conversationId}
+          layout="menu"
+        />
         {props.copyAction}
         <ArchiveConversationButton {...props.archive} layout="menu" />
         <MenuActionButton

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/ShareConversationButton.tsx

@@ -0,0 +1,101 @@
+import { useState } from "react";
+import { useHref } from "react-router";
+import { Check, Share2 } from "lucide-react";
+
+import { Button } from "../components/Button";
+import { conversationPath } from "./conversationRoutes";
+
+/** Share a conversation link without changing who can access it. */
+export function ShareConversationButton(props: {
+  conversationId: string;
+  layout?: "button" | "menu";
+}) {
+  const href = useHref(conversationPath(props.conversationId));
+  const [status, setStatus] = useState<
+    "idle" | "sharing" | "copied" | "copy-failed" | "share-failed"
+  >("idle");
+  const label =
+    status === "copied"
+      ? "Link copied"
+      : status === "copy-failed"
+        ? "Copy failed — retry"
+        : status === "share-failed"
+          ? "Share failed — retry"
+          : "Share";
+  const Icon = status === "copied" ? Check : Share2;
+  const feedback =
+    status === "copied"
+      ? "Conversation link copied. Access has not changed."
+      : status === "copy-failed"
+        ? "Could not copy the link. Try again or copy it from the address bar."
+        : status === "share-failed"
+          ? "Could not share the link. Try again or copy it from the address bar."
+          : "";
+
+  async function shareLink() {
+    setStatus("sharing");
+    const url = new URL(href, window.location.origin).href;
+    // Touch-first devices use the native sheet, including tablets. Desktop
+    // browsers keep copy-link behavior even when they support native sharing.
+    if (
+      window.matchMedia("(pointer: coarse)").matches &&
+      typeof navigator.share === "function"
+    ) {
+      try {
+        await navigator.share({ url });
+        setStatus("idle");
+      } catch (error) {
+        // Dismissing the sheet must not copy a link or show an error.
+        setStatus(
+          error instanceof DOMException && error.name === "AbortError"
+            ? "idle"
+            : "share-failed",
+        );
+      }
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(url);
+      setStatus("copied");
+    } catch {
+      setStatus("copy-failed");
+    }
+  }
+
+  const content = (
+    <>
+      <Icon aria-hidden="true" size={16} strokeWidth={2} />
+      <span>{label}</span>
+    </>
+  );
+  const button =
+    props.layout === "menu" ? (
+      <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-dashboard-fill-hover focus-visible:bg-dashboard-fill-hover focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+        disabled={status === "sharing"}
+        onClick={() => void shareLink()}
+        type="button"
+      >
+        {content}
+      </button>
+    ) : (
+      <Button
+        aria-label={label}
+        disabled={status === "sharing"}
+        onClick={() => void shareLink()}
+      >
+        {content}
+      </Button>
+    );
+
+  return (
+    <>
+      {button}
+      <span className="sr-only" role="status">
+        {feedback}
+      </span>
+    </>
+  );
+}

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}`;
   }