@sentry/junior-dashboard 0.261.0 → 0.262.0

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/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;

package/src/client/conversations/TranscriptSubagentView.tsx

@@ -9,7 +9,7 @@ import { HighlightText } from "./transcriptSearch";
 
 /**
  * Render a child agent as a compact card in the transcript stream. The card
- * matches the child agent rows in the details drawer: name, status, and run
+ * matches the child agent rows in conversation details: name, status, and run
  * time first, then the task title. It opens the child transcript.
  */
 export function TranscriptSubagentView(props: {

package/src/client/conversations/TranscriptTurnContextView.tsx

@@ -38,7 +38,6 @@ export function TranscriptTurnContextView(props: {
         ? createPortal(
             <Drawer
               closeLabel="Close turn context"
-              dismissLabel="Dismiss turn context"
               header={
                 <>
                   <h2

package/src/client/pages/automations/AutomationDetailsDrawer.tsx

@@ -65,7 +65,6 @@ export function AutomationDetailsDrawer(props: {
   return (
     <Drawer
       closeLabel="Close automation details"
-      dismissLabel="Dismiss automation details"
       header={
         <>
           <h2

package/src/client/pages/dev/ComponentsPage.tsx

@@ -37,6 +37,7 @@ import {
 } from "../../components/controls/TimeRangeSelector";
 import { EmptyTelemetry } from "../../components/EmptyTelemetry";
 import { Drawer } from "../../components/Drawer";
+import { BottomSheet } from "../../components/BottomSheet";
 import { Field } from "../../components/Field";
 import { Card } from "../../components/layout/Card";
 import { DashboardChromeProvider } from "../../components/layout/DashboardChrome";
@@ -193,6 +194,7 @@ function FoundationsGalleryPage() {
   const [pressed, setPressed] = useState(true);
   const [navigationOpen, setNavigationOpen] = useState(false);
   const [drawerOpen, setDrawerOpen] = useState(false);
+  const [sheetOpen, setSheetOpen] = useState(false);
   const [nestedDrawerOpen, setNestedDrawerOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState("deploy failure");
 
@@ -257,7 +259,6 @@ function FoundationsGalleryPage() {
         {drawerOpen ? (
           <Drawer
             closeLabel="Close gallery details"
-            dismissLabel="Dismiss gallery details"
             header={
               <h2
                 id="gallery-drawer-title"
@@ -281,7 +282,6 @@ function FoundationsGalleryPage() {
               ? createPortal(
                   <Drawer
                     closeLabel="Close nested details"
-                    dismissLabel="Dismiss nested details"
                     header={
                       <h2
                         id="gallery-nested-title"
@@ -305,6 +305,20 @@ function FoundationsGalleryPage() {
           </Drawer>
         ) : null}
       </Fixture>
+      <Fixture title="Bottom sheet">
+        <Button onClick={() => setSheetOpen(true)}>Open bottom sheet</Button>
+        {sheetOpen ? (
+          <BottomSheet
+            label="Gallery details"
+            onClose={() => setSheetOpen(false)}
+          >
+            <p className="m-0 p-4 pb-[max(1rem,env(safe-area-inset-bottom))] text-sm text-dashboard-text-muted">
+              Swipe the handle down, tap outside, or press Escape to return to
+              the page.
+            </p>
+          </BottomSheet>
+        ) : null}
+      </Fixture>
       <Fixture title="Theme">
         <ThemeSwitcher className="max-w-64" />
       </Fixture>

package/src/client/pages/dev/SegmentedFixtures.tsx

@@ -5,25 +5,26 @@ import { SegmentedTabs } from "../../components/SegmentedTabs";
 
 /** Show panel tabs switching the panel below them. */
 export function SegmentedTabsFixture() {
-  const [tab, setTab] = useState<"details" | "memories" | "usage">("details");
+  const [tab, setTab] = useState<"summary" | "memories" | "agents">("summary");
   return (
-    <div className="max-w-md">
+    <div className="h-64 max-w-xs">
       <SegmentedTabs
+        scroll
         items={[
-          { label: "Details", value: "details" },
+          { label: "Summary", value: "summary" },
           { count: 3, label: "Memories", value: "memories" },
-          { label: "Usage", value: "usage" },
+          { count: 2, label: "Subagents", value: "agents" },
         ]}
         label="Conversation panels"
         onChange={setTab}
         value={tab}
       >
         <p className="m-0 text-sm leading-relaxed text-dashboard-text-muted">
-          {tab === "details"
-            ? "Conversation summary and linked work."
+          {tab === "summary"
+            ? "Checkout latency increased after the latest release. Compare traces from before and after the deployment, then inspect the slow serialization span. The public brief links the affected repository, the release, and the open code change. Keep the rollout paused until the comparison confirms the cause. The next check is to run the same request against the previous release and compare its timings. Use the linked work to record the result and any rollback decision. The participants can continue this investigation in the conversation while keeping these details open. Model usage and related child conversations remain available in their own sections."
             : tab === "memories"
               ? "What Junior learned from this conversation."
-              : "Time, tokens, and cost for this conversation."}
+              : "Child conversations and their current work."}
         </p>
       </SegmentedTabs>
     </div>

package/src/client/pages/memory/MemoryDetailsDrawer.tsx

@@ -67,7 +67,6 @@ export function MemoryDetailsDrawer(props: {
   return (
     <Drawer
       closeLabel="Close memory details"
-      dismissLabel="Dismiss memory details"
       header={
         <>
           <h2