@sentry/junior-dashboard 0.260.0 → 0.262.0

package/src/client/conversations/{ConversationDetailsDrawer.tsx → ConversationDetails.tsx}

@@ -3,7 +3,7 @@ import { useState, type ReactNode } from "react";
 
 import { formatRelativeTime, formatTime } from "../format";
 import { ButtonLink } from "../components/Button";
-import { Drawer } from "../components/Drawer";
+import { ConversationDetailsFrame } from "./ConversationDetailsFrame";
 import { SegmentedTabs } from "../components/SegmentedTabs";
 import {
   ConversationChildAgents,
@@ -16,29 +16,27 @@ import {
 import { ShareConversationButton } from "./ShareConversationButton";
 import type { SubagentTranscriptTarget } from "./SubagentTranscriptDrawer";
 
-type DetailsTab = "agents" | "details" | "memories";
+type DetailsTab = "agents" | "summary" | "memories";
 
 /** Put conversation context before usage and diagnostic links. */
-export function ConversationDetailsDrawer(props: {
+export function ConversationDetails(props: {
   annotations: ReactNode;
   brief: ReactNode;
   conversationId: string;
   identity: ReactNode;
   lastActivityAt?: string;
   onClose(): void;
-  /** Open one child agent transcript. The details drawer closes first. */
+  /** Open one child agent transcript. Details closes first. */
   onOpenSubagent(target: SubagentTranscriptTarget): void;
   sentryConversationUrl?: string;
-  privacy: ReactNode;
   stats: ReactNode;
-  title: string;
 }) {
-  const [tab, setTab] = useState<DetailsTab>("details");
-  // Load both lists with the drawer so each tab can show its count.
+  const [tab, setTab] = useState<DetailsTab>("summary");
+  // Load both lists with details so each tab can show its count.
   const memories = useConversationMemories(props.conversationId);
   const agents = useConversationChildAgents(props.conversationId);
   const tabs = [
-    { label: "Details", value: "details" },
+    { label: "Summary", value: "summary" },
     {
       count: memories.data?.memories.length,
       label: "Memories",
@@ -46,37 +44,18 @@ export function ConversationDetailsDrawer(props: {
     },
     { count: agents.data?.agents.length, label: "Subagents", value: "agents" },
   ] as const;
-  const titleId = "conversation-details-drawer-title";
+
   const sections = [
-    { content: props.brief, title: "Summary" },
+    { content: props.brief, title: undefined },
     { content: props.annotations, title: "Linked work" },
     { content: props.identity, title: "Participants" },
     { content: props.stats, title: "Usage" },
   ].filter((section) => section.content != null);
 
   return (
-    <Drawer
-      closeLabel="Close conversation details"
-      dismissLabel="Dismiss conversation details"
-      header={
-        <>
-          <h2
-            className="m-0 min-w-0 break-words text-lg font-bold leading-tight text-dashboard-text"
-            id={titleId}
-          >
-            {props.title}
-          </h2>
-          <div className="mt-2 flex flex-wrap items-center gap-2">
-            {props.privacy}
-          </div>
-        </>
-      }
-      onClose={props.onClose}
-      openKey={props.conversationId}
-      titleId={titleId}
-      width="narrow"
-    >
+    <ConversationDetailsFrame onClose={props.onClose}>
       <SegmentedTabs
+        scroll
         items={tabs}
         label="Conversation details"
         onChange={setTab}
@@ -97,11 +76,13 @@ export function ConversationDetailsDrawer(props: {
             {sections.map((section) => (
               <section
                 className="grid min-w-0 gap-3 border-b border-dashboard-border pb-5 last:border-0 last:pb-0"
-                key={section.title}
+                key={section.title ?? "summary"}
               >
-                <h3 className="m-0 text-sm font-semibold text-dashboard-text">
-                  {section.title}
-                </h3>
+                {section.title ? (
+                  <h3 className="m-0 text-sm font-semibold text-dashboard-text">
+                    {section.title}
+                  </h3>
+                ) : null}
                 <div className="min-w-0 break-words font-sans text-sm leading-relaxed text-dashboard-text-muted">
                   {section.content}
                 </div>
@@ -113,7 +94,7 @@ export function ConversationDetailsDrawer(props: {
             No additional conversation details.
           </p>
         )}
-        {tab === "details" ? (
+        {tab === "summary" ? (
           <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">
@@ -152,6 +133,6 @@ export function ConversationDetailsDrawer(props: {
           </footer>
         ) : null}
       </SegmentedTabs>
-    </Drawer>
+    </ConversationDetailsFrame>
   );
 }

package/src/client/conversations/ConversationDetailsFrame.tsx

@@ -0,0 +1,91 @@
+import { X } from "lucide-react";
+import {
+  useEffect,
+  useId,
+  useRef,
+  useSyncExternalStore,
+  type ReactNode,
+} from "react";
+
+import { Button } from "../components/Button";
+import { BottomSheet } from "../components/BottomSheet";
+
+const panelMediaQuery = "(min-width: 1280px)";
+
+function subscribeToPanelLayout(onChange: () => void) {
+  const media = window.matchMedia(panelMediaQuery);
+  media.addEventListener("change", onChange);
+  return () => media.removeEventListener("change", onChange);
+}
+
+function hasPanelSpace() {
+  return window.matchMedia(panelMediaQuery).matches;
+}
+
+/** Keep details beside the chat when space permits, or in a modal bottom sheet. */
+export function ConversationDetailsFrame(props: {
+  children: ReactNode;
+  onClose(): void;
+}) {
+  const titleId = useId();
+  const panel = useSyncExternalStore(
+    subscribeToPanelLayout,
+    hasPanelSpace,
+    () => false,
+  );
+  const closeRef = useRef<HTMLButtonElement>(null);
+  const wasPanel = useRef(panel);
+  useEffect(() => {
+    if (
+      panel &&
+      !wasPanel.current &&
+      !document.querySelector("[data-dashboard-modal]")
+    ) {
+      closeRef.current?.focus({ preventScroll: true });
+    }
+    wasPanel.current = panel;
+  }, [panel]);
+  if (!panel) {
+    return (
+      <BottomSheet label="Conversation details" onClose={props.onClose}>
+        {props.children}
+      </BottomSheet>
+    );
+  }
+
+  return (
+    <aside
+      aria-labelledby={titleId}
+      className="grid min-h-0 min-w-0 grid-rows-[auto_minmax(0,1fr)] border-l border-dashboard-border bg-dashboard-bg-elevated"
+      onKeyDown={(event) => {
+        if (
+          event.key === "Escape" &&
+          !event.defaultPrevented &&
+          !document.querySelector("[data-dashboard-modal]")
+        ) {
+          event.preventDefault();
+          props.onClose();
+        }
+      }}
+    >
+      <header className="flex items-center justify-between gap-3 border-b border-dashboard-border px-5 py-3">
+        <h2
+          aria-label="Conversation details"
+          className="m-0 text-base font-semibold text-dashboard-text"
+          id={titleId}
+        >
+          Details
+        </h2>
+        <Button
+          ref={closeRef}
+          aria-label="Close conversation details"
+          onClick={props.onClose}
+          size="icon"
+        >
+          <X aria-hidden="true" size={15} />
+        </Button>
+      </header>
+      <div className="min-h-0">{props.children}</div>
+    </aside>
+  );
+}

package/src/client/conversations/ConversationEventLog.tsx

@@ -200,7 +200,6 @@ export const ConversationEventLog = memo(function ConversationEventLog(props: {
         ? createPortal(
             <Drawer
               closeLabel="Close event details"
-              dismissLabel="Dismiss event details"
               header={
                 <>
                   <h2

package/src/client/conversations/ConversationHeader.tsx

@@ -22,37 +22,33 @@ import {
   TranscriptViewToggle,
   type ConversationArchiveAction,
 } from "./ConversationHeaderActions";
-import { ConversationDetailsDrawer } from "./ConversationDetailsDrawer";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
-import type { SubagentTranscriptTarget } from "./SubagentTranscriptDrawer";
 
 /** Show the conversation title, search, and details. */
 export function ConversationHeader(props: {
   /** Parent chain of a child Conversation. Root Conversations omit it. */
   agentTree?: ReactNode;
   copyAction?: ReactNode;
-  annotations: ReactNode;
   archive: ConversationArchiveAction;
-  brief?: ReactNode;
   conversationId: string;
+  detailsOpen: boolean;
+  onDetailsClick(): void;
   /** Links to the fork source and to forks of this conversation. */
   forks?: ReactNode;
-  identity: ReactNode;
   linkedWork?: ReactNode;
-  lastActivityAt?: string;
-  sentryConversationUrl?: string;
   live: boolean;
   meta?: ReactNode;
-  onOpenSubagent(target: SubagentTranscriptTarget): void;
   onSearchChange(value: string): void;
   onViewChange(value: TranscriptViewMode): void;
   privacy: ReactNode;
   search: string;
-  stats: ReactNode;
   title: string;
   view: TranscriptViewMode;
 }) {
-  const [detailsOpen, setDetailsOpen] = useState(false);
+  const detailsOpen = props.detailsOpen;
+  const detailsButtonRef = useRef<HTMLButtonElement>(null);
+  const menuButtonRef = useRef<HTMLButtonElement>(null);
+  const wasDetailsOpen = useRef(detailsOpen);
   const [searchOpen, setSearchOpen] = useState(false);
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const searchInputRef = useRef<HTMLInputElement>(null);
@@ -60,6 +56,16 @@ export function ConversationHeader(props: {
   const searchOpenVisible = searchOpen || props.search.length > 0;
   const openMobileNavigation = useOpenMobileNavigation();
 
+  useEffect(() => {
+    if (wasDetailsOpen.current && !detailsOpen) {
+      const trigger = window.matchMedia("(max-width: 767px)").matches
+        ? menuButtonRef.current
+        : detailsButtonRef.current;
+      trigger?.focus({ preventScroll: true });
+    }
+    wasDetailsOpen.current = detailsOpen;
+  }, [detailsOpen]);
+
   useEffect(() => {
     if (!searchOpenVisible) return;
     searchInputRef.current?.focus();
@@ -107,6 +113,7 @@ export function ConversationHeader(props: {
   const mobileOverflow = (
     <div className="relative" ref={mobileMenuRef}>
       <HeaderIconButton
+        ref={menuButtonRef}
         label={mobileMenuOpen ? "Close conversation menu" : "Conversation menu"}
         onClick={() => setMobileMenuOpen((open) => !open)}
         pressed={mobileMenuOpen}
@@ -123,7 +130,7 @@ export function ConversationHeader(props: {
             layout="menu"
             onDetailsClick={() => {
               setMobileMenuOpen(false);
-              setDetailsOpen(true);
+              props.onDetailsClick();
             }}
             onSearchClick={() => {
               setMobileMenuOpen(false);
@@ -205,7 +212,8 @@ export function ConversationHeader(props: {
             conversationId={props.conversationId}
             copyAction={props.copyAction}
             detailsOpen={detailsOpen}
-            onDetailsClick={() => setDetailsOpen(true)}
+            detailsButtonRef={detailsButtonRef}
+            onDetailsClick={props.onDetailsClick}
             onSearchClick={toggleSearch}
             onViewChange={props.onViewChange}
             searchOpen={searchOpenVisible}
@@ -252,22 +260,6 @@ export function ConversationHeader(props: {
           </div>
         ) : null}
       </header>
-
-      {detailsOpen ? (
-        <ConversationDetailsDrawer
-          annotations={props.annotations}
-          brief={props.brief}
-          conversationId={props.conversationId}
-          identity={props.identity}
-          lastActivityAt={props.lastActivityAt}
-          sentryConversationUrl={props.sentryConversationUrl}
-          onClose={() => setDetailsOpen(false)}
-          onOpenSubagent={props.onOpenSubagent}
-          privacy={props.privacy}
-          stats={props.stats}
-          title={props.title}
-        />
-      ) : null}
     </>
   );
 }

package/src/client/conversations/ConversationHeaderActions.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { ReactNode, Ref } from "react";
 import {
   Archive,
   ArchiveRestore,
@@ -30,6 +30,7 @@ export function ConversationHeaderActions(props: {
   conversationId: string;
   copyAction?: ReactNode;
   detailsOpen: boolean;
+  detailsButtonRef?: Ref<HTMLButtonElement>;
   /** `bar` is the desktop icon row. `menu` stacks actions for mobile overflow. */
   layout?: "bar" | "menu";
   onDetailsClick(): void;
@@ -94,6 +95,7 @@ export function ConversationHeaderActions(props: {
       {props.copyAction}
       <ArchiveConversationButton {...props.archive} layout="bar" />
       <Button
+        ref={props.detailsButtonRef}
         aria-label="Conversation details"
         aria-pressed={props.detailsOpen}
         className="ml-2"
@@ -180,6 +182,7 @@ function ViewModeButton(props: {
 /** Shared icon control used by conversation and subagent transcript headers. */
 export function HeaderIconButton(props: {
   children: ReactNode;
+  ref?: Ref<HTMLButtonElement>;
   label: string;
   onClick(): void;
   pressed?: boolean;
@@ -187,6 +190,7 @@ export function HeaderIconButton(props: {
   return (
     <IconButtonTooltip label={props.label}>
       <Button
+        ref={props.ref}
         aria-label={props.label}
         aria-pressed={props.pressed}
         className={cn(

package/src/client/conversations/ConversationPage.tsx

@@ -26,6 +26,8 @@ import {
 } from "./conversationRoutes";
 import { ConversationComposer } from "./ConversationComposer";
 import { ConversationHeader } from "./ConversationHeader";
+import { ConversationDetails } from "./ConversationDetails";
+import { cn } from "../styles";
 import { ConversationForkLinks } from "./ConversationForkLinks";
 import { ConversationAgentTree } from "./ConversationAgentTree";
 import { ConversationHeaderMeta } from "./ConversationHeaderMeta";
@@ -76,6 +78,7 @@ export function ConversationPage(props: {
   onRead?(conversationId: string, lastReadAt: string): void;
   pendingArchiveUpdate?: PendingArchiveConversationUpdate;
 }) {
+  const [detailsOpen, setDetailsOpen] = useState(false);
   const [subagentTarget, setSubagentTarget] =
     useState<SubagentTranscriptTarget>();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -196,7 +199,12 @@ export function ConversationPage(props: {
   );
 
   return (
-    <>
+    <div
+      className={cn(
+        "grid h-full min-h-0 min-w-0",
+        detailsOpen && "xl:grid-cols-[minmax(0,1fr)_25rem]",
+      )}
+    >
       <ChatLayout
         scrollMinTall
         scrollAriaLabel="Conversation transcript"
@@ -208,6 +216,8 @@ export function ConversationPage(props: {
                 agentTree ? <ConversationAgentTree nodes={agentTree} /> : null
               }
               conversationId={conversationId}
+              detailsOpen={detailsOpen}
+              onDetailsClick={() => setDetailsOpen((open) => !open)}
               forks={
                 detail.data?.forkedFromConversationId ||
                 detail.data?.forks?.length ? (
@@ -220,8 +230,6 @@ export function ConversationPage(props: {
                   />
                 ) : null
               }
-              lastActivityAt={conversation?.lastSeenAt}
-              sentryConversationUrl={detail.data?.sentryConversationUrl}
               copyAction={
                 <CopyMarkdownButton
                   key={conversationDetail?.conversationId ?? "loading"}
@@ -236,11 +244,6 @@ export function ConversationPage(props: {
                   }
                 />
               }
-              annotations={
-                hasConversationAnnotations(detail.data?.annotations) ? (
-                  <ConversationAnnotations detail={detail.data} />
-                ) : null
-              }
               linkedWork={
                 hasConversationAnnotations(detail.data?.annotations) ? (
                   <ConversationAnnotations
@@ -260,15 +263,6 @@ export function ConversationPage(props: {
                   }),
                 pending: archive.isPending,
               }}
-              brief={
-                detail.data?.brief ? (
-                  <ConversationBrief
-                    brief={detail.data.brief}
-                    variant="summary"
-                  />
-                ) : null
-              }
-              identity={identity}
               live={live}
               meta={
                 <ConversationHeaderMeta
@@ -288,7 +282,6 @@ export function ConversationPage(props: {
                   }
                 />
               }
-              onOpenSubagent={setSubagentTarget}
               onSearchChange={setSearch}
               onViewChange={onViewChange}
               privacy={
@@ -297,23 +290,6 @@ export function ConversationPage(props: {
                 />
               }
               search={search}
-              stats={
-                hasConversationStats({
-                  conversation,
-                  detail: detail.data,
-                }) ? (
-                  <div className="grid min-w-0 gap-5">
-                    <ConversationStats
-                      conversation={conversation}
-                      detail={detail.data}
-                    />
-                    <ConversationUsageBreakdown
-                      conversation={conversation}
-                      detail={detail.data}
-                    />
-                  </div>
-                ) : null
-              }
               title={title}
               view={view}
             />
@@ -382,11 +358,48 @@ export function ConversationPage(props: {
           ) : undefined
         }
       />
+      {detailsOpen ? (
+        <ConversationDetails
+          conversationId={conversationId}
+          identity={identity}
+          lastActivityAt={conversation?.lastSeenAt}
+          sentryConversationUrl={detail.data?.sentryConversationUrl}
+          onClose={() => setDetailsOpen(false)}
+          onOpenSubagent={setSubagentTarget}
+          annotations={
+            hasConversationAnnotations(detail.data?.annotations) ? (
+              <ConversationAnnotations detail={detail.data} />
+            ) : null
+          }
+          brief={
+            detail.data?.brief ? (
+              <ConversationBrief brief={detail.data.brief} variant="summary" />
+            ) : null
+          }
+          stats={
+            hasConversationStats({
+              conversation,
+              detail: detail.data,
+            }) ? (
+              <div className="grid min-w-0 gap-5">
+                <ConversationStats
+                  conversation={conversation}
+                  detail={detail.data}
+                />
+                <ConversationUsageBreakdown
+                  conversation={conversation}
+                  detail={detail.data}
+                />
+              </div>
+            ) : null
+          }
+        />
+      ) : null}
       <SubagentTranscriptDrawer
         onClose={() => setSubagentTarget(undefined)}
         target={subagentTarget}
       />
-    </>
+    </div>
   );
 }
 

package/src/client/conversations/ConversationWorkspace.tsx

@@ -1,5 +1,5 @@
 import type { InputImage } from "@sentry/junior/api/schema";
-import { useDeferredValue, useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Globe2, LockKeyhole } from "lucide-react";
 import { useNavigate, useParams } from "react-router";
 
@@ -17,8 +17,8 @@ import {
 } from "./queries";
 import { conversationPath, NEW_CONVERSATION_PATH } from "./conversationRoutes";
 import { buildConversations, getDashboardTimeZone } from "../format";
+import { useDebouncedValue } from "../debouncedValue";
 import type { Conversation } from "../types";
-import { cn, dashboardContainerClass } from "../styles";
 import { ConversationPage } from "./ConversationPage";
 import { useConversationFinishedIndicators } from "./useConversationFinishedIndicators";
 
@@ -28,7 +28,7 @@ const CONVERSATION_PAGE_SIZE = 20;
 export function ConversationWorkspace() {
   const [page, setPage] = useState(1);
   const [query, setQuery] = useState("");
-  const search = useDeferredValue(query.trim());
+  const search = useDebouncedValue(query.trim());
   const params = useParams();
   const navigate = useNavigate();
   const selectedId = params.conversationId;
@@ -90,12 +90,7 @@ export function ConversationWorkspace() {
 
   if (home) {
     return (
-      <main
-        className={cn(
-          dashboardContainerClass,
-          "h-full min-h-0 overflow-y-auto overscroll-contain px-4 py-4 sm:px-6 sm:py-6",
-        )}
-      >
+      <main className="h-full min-h-0 w-full 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">
           {createView}
           <section aria-label="Conversations" className="grid gap-3">
@@ -192,25 +187,27 @@ function NewConversationView(props: {
         footerStart={
           <div
             aria-label="Conversation visibility"
-            className="inline-flex items-center gap-1"
+            className="inline-flex shrink-0 items-center gap-0.5 rounded-lg border border-dashboard-border bg-dashboard-surface-panel p-0.5"
             role="group"
           >
             <ToggleButton
+              className="min-w-20 gap-1.5"
               onClick={() => setVisibility("public")}
               pressed={isPublic}
               type="button"
               variant="segment"
             >
-              <Globe2 aria-hidden="true" className="mr-1 inline size-3" />
+              <Globe2 aria-hidden="true" className="size-3" />
               Public
             </ToggleButton>
             <ToggleButton
+              className="min-w-20 gap-1.5"
               onClick={() => setVisibility("private")}
               pressed={!isPublic}
               type="button"
               variant="segment"
             >
-              <LockKeyhole aria-hidden="true" className="mr-1 inline size-3" />
+              <LockKeyhole aria-hidden="true" className="size-3" />
               Private
             </ToggleButton>
           </div>

package/src/client/conversations/ConversationWorkspaceLoading.tsx

@@ -58,10 +58,7 @@ function ConversationHomeLoading() {
     <main
       aria-busy="true"
       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",
-      )}
+      className="h-full min-h-0 w-full overflow-y-auto overscroll-contain px-4 py-4 sm:px-6 sm:py-6"
       role="status"
     >
       <span className="sr-only">Loading conversations</span>

package/src/client/conversations/ForkConversationButton.tsx

@@ -60,7 +60,6 @@ function ForkConversationDialog(props: ForkTarget & { onClose(): void }) {
   return (
     <Drawer
       closeLabel="Close fork dialog"
-      dismissLabel="Dismiss fork dialog"
       header={
         <h2 id={titleId} className="m-0 text-lg font-semibold">
           Fork Conversation

package/src/client/conversations/README.md

@@ -40,10 +40,26 @@ shared controls and overlays.
   Automation. Render this text with `TranscriptText` or `MentionText`. Both
   require `mentions`, so a caller cannot forget them. Do not resolve names in
   the dashboard, and do not rewrite tokens into links on the server.
-- `TranscriptTurnContextView` owns context content. The shared `Drawer` owns
-  dismissal, focus trapping, focus return, scroll locking, and panel layout.
+- `TranscriptTurnContextView` owns context content. The shared `Drawer` adds
+  its header and layout to the Base UI `Sheet` focus and dismissal boundary.
 
 Review these components together in `/dev/transcripts`. Use the conversation
 fixture for messages, events, activity, context, and typing. Use the attachment
 fixture for file wrapping. Keep visual checks out of automated assertions;
 browser tests cover opening, closing, and keyboard interaction.
+
+## Conversation details
+
+`ConversationPage` owns whether details are open. The page is keyed by the
+Conversation, so switching Conversations closes details. `ConversationHeader`
+only toggles details and restores focus through explicit control refs after
+dismissal.
+
+`ConversationDetails` owns one set of tabs and content. `ConversationDetailsFrame`
+uses a 400px aside at 1280px and above. The chat and aside scroll separately.
+Smaller windows use `BottomSheet` with a plain accessible label. The sheet and
+side drawers share the Base UI `Sheet` focus rules and the app's document
+scroll lock. A resize changes the frame and keeps the selected tab. Tabs stay fixed above the scrolling content in both
+layouts. Only the swipe handle sits above the sheet tabs. Swipe down, tap the
+backdrop, or press Escape to dismiss it. Base UI owns the transition lifecycle.
+A pending exit cannot close a new panel or a different Conversation.

package/src/client/conversations/SubagentTranscriptDrawer.tsx

@@ -103,7 +103,6 @@ function SubagentTranscriptDrawerContent(props: {
         </>
       }
       closeLabel="Close subagent transcript"
-      dismissLabel="Dismiss subagent transcript"
       header={
         <>
           <div className="flex min-w-0 items-center gap-2">

package/src/client/conversations/TelemetryMetrics.tsx

@@ -354,7 +354,7 @@ export function CostMetric(props: {
   align?: "left" | "right";
   auxiliaryCosts?: ConversationAuxiliaryCosts;
   childAgentTotals?: ConversationChildAgentTotals;
-  /** Point to the Details drawer, which has the full breakdown. */
+  /** Point to conversation details, which has the full breakdown. */
   detailsHint?: boolean;
   live?: boolean;
   liveModelId?: string;
@@ -398,7 +398,7 @@ export function TokenMetric(props: {
   align?: "left" | "right";
   childAgentTotals?: ConversationChildAgentTotals;
   compactionCount?: number;
-  /** Point to the Details drawer, which has the full breakdown. */
+  /** Point to conversation details, which has the full breakdown. */
   detailsHint?: boolean;
   live?: boolean;
   liveModelId?: string;