@sentry/junior-dashboard 0.264.0 → 0.265.0

package/src/client/conversations/README.md

@@ -18,7 +18,8 @@ shared controls and overlays.
   The caller owns the native `details` element and its content.
 - Activity rows (tools, reasoning, and grouped rail events) share one
   layout: a 1rem icon column, an 8px gap, then the title and metadata.
-  Expanded content sits in `transcriptActivityBodyClass` under the title.
+  Tool and reasoning rows use `ui/trace`. Transcript search forces them open.
+  Expanded content sits in `TraceCollapsibleContent` under the title.
   `TranscriptActivityNesting` tells a rail event that it is inside an activity
   group. Outside a group, the rail icon sits in the avatar column so the text
   lines up with message text.
@@ -40,23 +41,46 @@ 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` adds
-  its header and layout to the Base UI `Sheet` focus and dismissal boundary.
+- `TranscriptTurnContextView` owns context content. A transcript with a
+  `turnContextPanel` shows the context in the page panel. See "Page panel".
+  Other transcripts, such as a subagent drawer, open a modal `Drawer`. Each
+  `Transcript` sets the panel for its own rows, so a nested transcript does not
+  use the panel of the page behind it. The panel keys context by message id,
+  so every control for one message shows the same open state.
 
-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.
+Review these components together on the mock Conversations. Run
+`JUNIOR_DASHBOARD_MOCK_CONVERSATIONS=true pnpm dev` for messages, events,
+activity, context, typing, and attachments. 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.
+`ConversationPage` owns whether details are open. At 1440px and above, details
+open by default. An explicit choice lasts for the current Conversation. The page
+is keyed by the Conversation, so switching Conversations resets that choice.
+`ConversationHeader` 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.
+## Page panel
+
+The Conversation page has one panel on the right. It shows Conversation
+details, event details, or turn context. Only one shows at a time. Each uses
+`DetailsPanel`: a 400px aside at 1280px and above, and a `BottomSheet` below.
+
+- Event details and turn context show in place of Conversation details.
+- When you close them, Conversation details show again if they are open. The
+  details stay open by choice or by the 1440px default.
+- A link that opens an event sets details to closed. When you close that
+  event, no panel shows.
+- The details control closes event details and turn context, then shows or
+  hides Conversation details.
+- Turn context belongs to the Conversation view. A view change closes it.
+  Select the same context control again to close it.
+- Closing a panel returns focus to the row or control that opened it.
+
+`ConversationDetails` owns one set of tabs and content. It supplies its title and
+actions to `DetailsPanel`, which uses a 400px aside at 1280px and above. The chat
+and aside scroll separately.
 Smaller windows use `BottomSheet` with a visible title and close control. The sheet and
 side drawers use the shadcn Base UI `Sheet` and share the app's document
 scroll lock. A resize changes the frame and keeps the selected tab. Tabs stay
@@ -64,3 +88,52 @@ fixed above the scrolling content in both layouts. The sheet title and close con
 control, 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.
+
+## Event log
+
+`ChatLayout` keeps the Conversation header outside the transcript scroll region.
+`ConversationEventLog` fills the pane without a card border or page inset. Its
+search toolbar and column labels stay together at the top while rows scroll.
+`Transcript` shares the search value with its owner, or keeps it locally when
+used alone. Event log search stays visible; the transcript search toggle is for
+the Conversation view.
+
+Rows keep time, event type, and summary in columns when the pane is at least
+512px wide. Smaller panes put the summary below time and type. Model and usage
+metadata share one optional line. Missing model metadata is omitted from rows.
+Selected rows have a background and an accent edge. Up and Down select the
+previous or next visible row while a row has focus. Selection stops at the
+ends of the filtered list. The selected row stays clear of the fixed toolbar.
+`eventLogRows` and `filterEventLogRows` own the row text and search match.
+The page uses them too, so its step controls follow the same rows.
+
+The timezone toggle uses `useEventTime` to share a UTC/local preference through
+`@uidotdev/usehooks` and browser local storage. It applies to event row clocks
+and detail timestamps. Local mode follows the browser timezone. The button uses
+a generic zone name because a log can span standard and daylight-saving time.
+Detail timestamps use the zone name for each event date. The mode, not
+the timezone identifier, persists across visits and tabs. This hook belongs to
+the client-rendered event viewer. Raw JSON retains the original ISO values.
+
+## Event details
+
+The URL owns the selected event in the main Conversation. `ConversationPage`
+places `ConversationEventDetails` beside the log in the page panel. Selecting
+another row changes the event and resets its scroll position and disclosures.
+Closing returns focus to that row. Switching Conversations removes the panel.
+
+The previous and next controls select the adjacent visible row. They follow
+the event search, like Up and Down. They are necessary below 1280px, where the
+sheet covers the log. At the ends of the list, the control is disabled but
+keeps focus. The sheet title is the event type.
+
+A linked event can be older than the loaded pages. While the event loads, the
+panel stays open. Only its header shows placeholders, so it does not compete
+with the log. While the transcript loads, `ConversationEventLogLoading` shows
+the log toolbar, columns, and row skeletons in the event log view.
+
+Standalone transcripts, such as a subagent drawer, keep selection in
+`ConversationEventLog`. Their event details use a nested drawer on desktop and
+`BottomSheet` on smaller screens. This keeps the main log free of modal behavior
+while a nested transcript retains its parent drawer's focus rules. These event
+details have the same previous and next controls.

package/src/client/conversations/ShareConversationButton.tsx

@@ -2,8 +2,12 @@ import { useState } from "react";
 import { useHref } from "react-router";
 import { Check, Share2 } from "lucide-react";
 
-import { Button } from "../components/Button";
-import { IconButtonTooltip } from "../components/Tooltip";
+import { Button } from "../components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../components/ui/tooltip";
 import { conversationPath } from "./conversationRoutes";
 
 /** Share a conversation link without changing who can access it. */
@@ -72,17 +76,25 @@ export function ShareConversationButton(props: {
   );
   const button =
     props.layout === "icon" ? (
-      <IconButtonTooltip label={label} placement="below">
-        <Button
-          aria-label={label}
-          className="text-dashboard-text-muted"
-          disabled={status === "sharing"}
-          onClick={() => void shareLink()}
-          size="icon"
-        >
-          <Icon aria-hidden="true" size={15} />
-        </Button>
-      </IconButtonTooltip>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button
+              focusableWhenDisabled
+              aria-label={label}
+              className="text-dashboard-text-muted"
+              disabled={status === "sharing"}
+              onClick={() => void shareLink()}
+              size="icon"
+            >
+              <Icon aria-hidden="true" size={15} />
+            </Button>
+          }
+        />
+        <TooltipContent size="compact" side="bottom">
+          {label}
+        </TooltipContent>
+      </Tooltip>
     ) : props.layout === "menu" ? (
       <button
         aria-label={label}

package/src/client/conversations/SubagentTranscriptDrawer.tsx

@@ -14,7 +14,7 @@ import { Drawer } from "../components/Drawer";
 import { SearchInput } from "../components/SearchInput";
 import { StatusChip } from "../components/StatusChip";
 import { subagentStatusTone } from "./ConversationChildAgents";
-import { CopyMarkdownButton } from "./CopyMarkdownButton";
+import { CopyButton } from "../components/CopyButton";
 import {
   TranscriptSearchToggle,
   TranscriptViewToggle,
@@ -69,7 +69,8 @@ function SubagentTranscriptDrawerContent(props: {
       ? props.target.agentName
       : undefined;
   const startedAt = detail ? Date.parse(detail.startedAt) : undefined;
-  const searchOpenVisible = searchOpen || search.length > 0;
+  const searchOpenVisible =
+    view === "rich" && (searchOpen || search.length > 0);
 
   const titleId = "subagent-transcript-drawer-title";
 
@@ -77,21 +78,25 @@ function SubagentTranscriptDrawerContent(props: {
     <Drawer
       actions={
         <>
-          <TranscriptSearchToggle
-            onClick={() => {
-              if (searchOpenVisible) {
-                setSearchOpen(false);
-                if (search.length > 0) setSearch("");
-                return;
-              }
-              setSearchOpen(true);
-            }}
-            open={searchOpenVisible}
-          />
+          {view === "rich" ? (
+            <TranscriptSearchToggle
+              onClick={() => {
+                if (searchOpenVisible) {
+                  setSearchOpen(false);
+                  if (search.length > 0) setSearch("");
+                  return;
+                }
+                setSearchOpen(true);
+              }}
+              open={searchOpenVisible}
+            />
+          ) : null}
           <TranscriptViewToggle onChange={setView} value={view} />
-          <CopyMarkdownButton
+          <CopyButton
+            label="Copy as Markdown"
+            copyingLabel="Preparing Markdown"
             key={props.target.conversationId}
-            getMarkdown={
+            getText={
               detail
                 ? async () =>
                     buildConversationMarkdown(
@@ -184,6 +189,7 @@ function SubagentTranscriptDrawerContent(props: {
           loadingPreviousPage={query.isLoadingPreviousPage}
           onLoadPreviousPage={query.loadPreviousPage}
           search={search}
+          onSearchChange={setSearch}
           transcript={detail}
           view={view}
         />

package/src/client/conversations/ToolFrame.tsx

@@ -1,17 +1,17 @@
 import { useState, type ReactNode } from "react";
 import type { LucideIcon } from "lucide-react";
 
+import {
+  TraceCollapsible,
+  TraceCollapsibleContent,
+  TraceCollapsibleTrigger,
+} from "../components/ui/trace";
 import { cn } from "../styles";
 import {
   TranscriptHeadingMeta,
   TranscriptHeadingRow,
 } from "./TranscriptHeadingRow";
 import { useTranscriptSearch } from "./transcriptSearch";
-import { TranscriptSummary } from "./TranscriptSummary";
-
-/** Frame expanded transcript activity content below its row title. */
-export const transcriptActivityBodyClass =
-  "ml-6 mt-1.5 min-w-0 overflow-hidden rounded-md border border-dashboard-border-subtle bg-dashboard-surface-panel";
 
 /** Render the shared expandable/non-expandable frame for transcript tools. */
 export function ToolFrame(props: {
@@ -27,30 +27,22 @@ export function ToolFrame(props: {
   const { active: searchActive } = useTranscriptSearch();
   const [open, setOpen] = useState(false);
   const metaText = props.meta.join(" · ");
-  const interactive = props.expandable ?? Boolean(props.children);
-  const staticFrame = searchActive || !interactive;
+  const expandable = props.expandable ?? Boolean(props.children);
+  // Force-expand tool details during search so highlighted matches are visible.
+  const expanded = expandable && (searchActive || open);
   const Icon = props.icon;
   const row = (
     <TranscriptHeadingRow
+      className="flex-1"
       left={
         <>
           {props.signature}
-          {props.mobileSummaryMeta ? (
+          {props.mobileSummaryMeta && !expanded ? (
             <>
-              <span
-                className={cn(
-                  "hidden text-dashboard-text-muted max-md:inline",
-                  !staticFrame && "max-md:group-open:hidden",
-                )}
-              >
+              <span className="hidden text-dashboard-text-muted max-md:inline">
                 ·
               </span>
-              <span
-                className={cn(
-                  "hidden shrink-0 whitespace-nowrap text-dashboard-text-muted max-md:inline",
-                  !staticFrame && "max-md:group-open:hidden",
-                )}
-              >
+              <span className="hidden shrink-0 whitespace-nowrap text-dashboard-text-muted max-md:inline">
                 {props.mobileSummaryMeta}
               </span>
             </>
@@ -59,7 +51,7 @@ export function ToolFrame(props: {
       }
       leftClassName={cn(
         "gap-x-1 gap-y-0.5",
-        staticFrame ? "flex-wrap" : "flex-nowrap group-open:flex-wrap",
+        expandable && !expanded ? "flex-nowrap" : "flex-wrap",
       )}
       right={
         metaText ? (
@@ -72,54 +64,46 @@ export function ToolFrame(props: {
     />
   );
   const header = Icon ? (
-    <div className="grid min-w-0 grid-cols-[1rem_minmax(0,1fr)] items-center gap-2">
+    <span className="grid min-w-0 flex-1 grid-cols-[1rem_minmax(0,1fr)] items-center gap-2">
       <Icon
         aria-hidden="true"
         className={cn("size-3.5 justify-self-center", props.iconClassName)}
         strokeWidth={2}
       />
       {row}
-    </div>
+    </span>
   ) : (
     row
   );
-  const mobileMeta =
-    metaText && props.children ? (
-      <div className="hidden min-w-0 break-words border-b border-dashboard-border-subtle px-2.5 py-1.5 font-sans text-xs tabular-nums leading-snug text-dashboard-text-muted max-md:block">
-        {metaText}
-      </div>
-    ) : null;
 
-  const body = props.children ? (
-    <div className={transcriptActivityBodyClass}>
-      {mobileMeta}
-      {props.children}
-    </div>
-  ) : null;
-
-  // Force-expand tool details during search so highlighted matches are visible.
-  if (staticFrame) {
+  if (!expandable) {
     return (
-      <div className="min-w-0 max-w-full">
-        <div className="block py-1.5 font-mono text-xs leading-tight text-dashboard-text-muted">
-          {header}
-        </div>
-        {body}
+      <div className="flex min-w-0 max-w-full py-1.5 font-mono text-xs leading-tight text-dashboard-text-muted">
+        {header}
       </div>
     );
   }
 
   return (
-    <details
-      className="group min-w-0 max-w-full"
-      open={open}
-      onToggle={(event) => setOpen(event.currentTarget.open)}
+    <TraceCollapsible
+      className="max-w-full"
+      // Search holds rows open, so the row button is off until search ends.
+      disabled={searchActive}
+      open={expanded}
+      onOpenChange={setOpen}
     >
-      <TranscriptSummary className="-mx-2 block font-mono text-xs leading-tight text-dashboard-text-muted">
+      <TraceCollapsibleTrigger className="-mx-2 w-auto font-mono text-xs leading-tight">
         {header}
-      </TranscriptSummary>
-      {/* Closed details hide DOM, but still mount React children and run Shiki. */}
-      {open ? body : null}
-    </details>
+      </TraceCollapsibleTrigger>
+      {/* The closed panel unmounts, so closed rows do not run Shiki. */}
+      <TraceCollapsibleContent>
+        {metaText ? (
+          <div className="hidden min-w-0 break-words border-b border-dashboard-border-subtle px-2.5 py-1.5 font-sans text-xs tabular-nums leading-snug text-dashboard-text-muted max-md:block">
+            {metaText}
+          </div>
+        ) : null}
+        {props.children}
+      </TraceCollapsibleContent>
+    </TraceCollapsible>
   );
 }

package/src/client/conversations/TranscriptActivityGroup.tsx

@@ -2,7 +2,11 @@ import { Fragment, useState, type ReactNode } from "react";
 import { ChevronRight } from "lucide-react";
 
 import { ShimmerText } from "../components/ShimmerText";
-import { Tooltip } from "../components/Tooltip";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../components/ui/tooltip";
 import { formatMs } from "../format";
 import type { RenderedTranscriptEntry } from "./transcriptRenderModel";
 import { cn } from "../styles";
@@ -180,8 +184,12 @@ export function TranscriptActivityGroup(props: {
           setUserOpen(!open);
         }}
       >
-        <Tooltip content={summary} placement="above">
-          <span className="inline-flex min-w-0 max-w-full items-center gap-1">
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <span className="inline-flex min-w-0 max-w-full items-center gap-1" />
+            }
+          >
             <span className="min-w-0 truncate group-open/activity-run:hidden">
               <ShimmerText active={live}>{label}</ShimmerText>
             </span>
@@ -193,7 +201,8 @@ export function TranscriptActivityGroup(props: {
               className="size-3 shrink-0 opacity-55 transition-transform group-open/activity-run:rotate-90"
               strokeWidth={2.2}
             />
-          </span>
+          </TooltipTrigger>
+          <TooltipContent>{summary}</TooltipContent>
         </Tooltip>
       </TranscriptSummary>
       <TranscriptActivityNesting.Provider value>

package/src/client/conversations/TranscriptAutomationTriggerView.tsx

@@ -2,7 +2,8 @@ import { ArrowRight, ChevronRight } from "lucide-react";
 import { useId, useState } from "react";
 import type { ConversationDetailReport } from "@sentry/junior/api/schema";
 
-import { ButtonLink } from "../components/Button";
+import { buttonVariants } from "../components/ui/button";
+import { Link } from "react-router";
 import { ObjectIcon } from "../components/ObjectIcon";
 import { automationPath, formatRelativeTime } from "../format";
 import { messageRawText } from "./transcriptRenderModel";
@@ -70,13 +71,13 @@ export function TranscriptAutomationTriggerView(props: {
           <HighlightText text={name} />
         </span>
         {automationId ? (
-          <ButtonLink
-            className="h-8 shrink-0 text-xs"
+          <Link
+            className={cn(buttonVariants(), "h-8 shrink-0 text-xs")}
             to={automationPath(automationId)}
           >
             Open automation
             <ArrowRight aria-hidden="true" size={14} />
-          </ButtonLink>
+          </Link>
         ) : null}
       </div>
       {details.length > 0 ? (

package/src/client/conversations/TranscriptContextEventView.tsx

@@ -1,3 +1,11 @@
+import { ChevronRight } from "lucide-react";
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../components/ui/collapsible";
+import { dashboardDisclosureChevronClass } from "../styles";
 import { formatCompactNumber, formatMessageTimestamp } from "../format";
 import type { TranscriptViewContextEventPart } from "../types";
 import { TranscriptText } from "./TranscriptText";
@@ -39,18 +47,24 @@ export function TranscriptContextEventView(props: {
           : `Earlier context was summarized${compactionDetail}${compactionModel} before execution continued.`}
       </div>
       {event.summary ? (
-        <details className="mt-2">
-          <summary className="cursor-pointer select-none text-xs font-medium text-dashboard-text-muted">
-            Continuation summary
-          </summary>
-          <div className="mt-1.5 whitespace-pre-wrap text-xs leading-relaxed text-dashboard-text-muted">
-            <TranscriptText
-              mentions={props.part.mentions ?? []}
-              role="system"
-              text={event.summary}
+        <Collapsible className="mt-2">
+          <CollapsibleTrigger className="group flex cursor-pointer select-none items-center gap-1 text-xs font-medium text-dashboard-text-muted focus-visible:outline-2 focus-visible:outline-dashboard-focus">
+            <ChevronRight
+              aria-hidden="true"
+              className={dashboardDisclosureChevronClass}
             />
-          </div>
-        </details>
+            Continuation summary
+          </CollapsibleTrigger>
+          <CollapsibleContent hiddenUntilFound>
+            <div className="mt-1.5 whitespace-pre-wrap text-xs leading-relaxed text-dashboard-text-muted">
+              <TranscriptText
+                mentions={props.part.mentions ?? []}
+                role="system"
+                text={event.summary}
+              />
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
       ) : null}
     </article>
   );

package/src/client/conversations/TranscriptHeadingRow.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 
 import { cn } from "../styles";
 
-/** Align transcript labels and metadata as one centered heading row. */
+/** Align transcript labels and metadata as one centered heading row. Spans keep it valid inside a row button. */
 export function TranscriptHeadingRow(props: {
   className?: string;
   left: ReactNode;
@@ -14,31 +14,31 @@ export function TranscriptHeadingRow(props: {
     props.right !== undefined && props.right !== null && props.right !== false;
 
   return (
-    <div
+    <span
       className={cn(
         "flex min-w-0 items-start justify-between gap-2 md:items-center md:gap-3",
         props.className,
       )}
     >
-      <div
+      <span
         className={cn(
           "flex min-w-0 items-center gap-2 overflow-hidden",
           props.leftClassName,
         )}
       >
         {props.left}
-      </div>
+      </span>
       {hasRight ? (
-        <div
+        <span
           className={cn(
             "min-w-0 max-w-[60%] shrink text-right md:max-w-none md:shrink-0",
             props.rightClassName,
           )}
         >
           {props.right}
-        </div>
+        </span>
       ) : null}
-    </div>
+    </span>
   );
 }
 

package/src/client/conversations/TranscriptLoading.tsx

@@ -1,5 +1,5 @@
 import { TranscriptRow, TranscriptRows } from "./TranscriptRows";
-import { Skeleton } from "../components/Skeleton";
+import { Skeleton } from "../components/ui/skeleton";
 
 /** Match the usual transcript rhythm while the selected conversation loads. */
 export function TranscriptLoading() {

package/src/client/conversations/TranscriptMarkdown.tsx

@@ -1,5 +1,13 @@
 import type { ReactNode } from "react";
 
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../components/ui/table";
 import { cn } from "../styles";
 import {
   findTranscriptMarkdownLinks,
@@ -184,51 +192,48 @@ function MarkdownTable(props: {
   );
 
   return (
-    <div className="min-w-0 max-w-full overflow-x-auto rounded-md border border-dashboard-border bg-dashboard-fill-faint">
-      <table className="w-max min-w-full border-collapse text-left text-sm">
-        <thead className="bg-dashboard-overlay-soft">
-          <tr>
+    <div className="min-w-0 max-w-full overflow-hidden rounded-md border border-dashboard-border bg-dashboard-fill-faint">
+      <Table className="w-max min-w-full">
+        <TableHeader className="bg-dashboard-overlay-soft">
+          <TableRow className="border-dashboard-border">
             {Array.from({ length: columnCount }, (_, index) => {
               const alignment = props.block.alignments[index] ?? null;
               return (
-                <th
+                <TableHead
                   className={cn(
-                    "whitespace-nowrap border-b border-dashboard-border px-2.5 py-1.5 font-sans text-xs font-medium text-dashboard-text-muted",
+                    "px-2.5 py-1.5",
                     tableCellAlignClass(alignment),
                   )}
                   key={`h-${index}`}
                   scope="col"
                 >
                   {renderInlineMarkdown(props.block.headers[index] ?? "")}
-                </th>
+                </TableHead>
               );
             })}
-          </tr>
-        </thead>
-        <tbody>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
           {props.block.rows.map((row, rowIndex) => (
-            <tr
-              className="border-b border-dashboard-border-subtle last:border-b-0"
-              key={`r-${rowIndex}`}
-            >
+            <TableRow key={`r-${rowIndex}`}>
               {Array.from({ length: columnCount }, (_, index) => {
                 const alignment = props.block.alignments[index] ?? null;
                 return (
-                  <td
+                  <TableCell
                     className={cn(
-                      "whitespace-nowrap px-2.5 py-1.5 align-top text-dashboard-text",
+                      "px-2.5 py-1.5 align-top",
                       tableCellAlignClass(alignment),
                     )}
                     key={`c-${rowIndex}-${index}`}
                   >
                     {renderInlineMarkdown(row[index] ?? "")}
-                  </td>
+                  </TableCell>
                 );
               })}
-            </tr>
+            </TableRow>
           ))}
-        </tbody>
-      </table>
+        </TableBody>
+      </Table>
     </div>
   );
 }