@sentry/junior-dashboard 0.264.0 → 0.266.0

package/src/client/conversations/EventUsage.tsx

@@ -1,6 +1,15 @@
 import type { ConversationUsage } from "@sentry/junior/api/schema";
 
 import { formatCostBreakdown, summarizeCost } from "../format";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableFooter,
+  TableHeader,
+  TableRow,
+} from "../components/ui/table";
 import { cn } from "../styles";
 
 /** Align recorded token counts with their costs without adding overlapping counters. */
@@ -31,83 +40,53 @@ export function EventUsage({ usage }: { usage?: ConversationUsage }) {
     );
   }
 
+  const total = rows.find((row) => row.label === "Total");
   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-sans 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-sans 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>
+      <Table
+        aria-label="Model call token and cost breakdown"
+        className="min-w-72 table-fixed text-xs leading-relaxed"
+      >
+        <colgroup>
+          <col />
+          <col className="w-24" />
+          <col className="w-24" />
+        </colgroup>
+        <TableHeader>
+          <TableRow className="border-dashboard-border">
+            <TableHead
+              scope="col"
+              className="px-0 py-2 leading-relaxed font-normal"
+            >
+              Usage
+            </TableHead>
+            <TableHead
+              scope="col"
+              className="px-0 py-2 text-right leading-relaxed font-normal"
+            >
+              Tokens
+            </TableHead>
+            <TableHead
+              scope="col"
+              className="px-0 py-2 text-right leading-relaxed font-normal"
+            >
+              Cost (USD)
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {rows
+            .filter((row) => row !== total)
+            .map((row) => (
+              <UsageRow key={row.label} {...row} />
             ))}
-          </tbody>
-        </table>
-      </div>
+        </TableBody>
+        {total ? (
+          <TableFooter className="font-semibold">
+            <UsageRow {...total} total />
+          </TableFooter>
+        ) : null}
+      </Table>
       <p className="m-0 text-xs leading-relaxed text-dashboard-text-muted">
         This call only · Estimated costs
         <br />
@@ -116,3 +95,49 @@ export function EventUsage({ usage }: { usage?: ConversationUsage }) {
     </>
   );
 }
+
+function UsageRow(props: {
+  cost?: number;
+  label: string;
+  tokens?: number;
+  total?: boolean;
+}) {
+  return (
+    <TableRow>
+      <TableHead
+        scope="row"
+        className={cn(
+          "px-0 py-2 leading-relaxed",
+          props.total
+            ? "font-semibold text-dashboard-text"
+            : "font-normal text-dashboard-text-muted",
+        )}
+      >
+        {props.label}
+      </TableHead>
+      <TableCell className="px-0 py-2 text-right font-sans tabular-nums">
+        {props.tokens === undefined ? (
+          <span aria-label="Not recorded" className="text-dashboard-text-faint">
+            —
+          </span>
+        ) : (
+          props.tokens.toLocaleString("en-US")
+        )}
+      </TableCell>
+      <TableCell className="px-0 py-2 text-right font-sans tabular-nums">
+        {props.cost === undefined ? (
+          <span
+            aria-label="Not recorded separately"
+            className="text-dashboard-text-faint"
+          >
+            —
+          </span>
+        ) : (
+          <span title={`${props.cost} USD`}>
+            {formatCostBreakdown({ total: props.cost })}
+          </span>
+        )}
+      </TableCell>
+    </TableRow>
+  );
+}

package/src/client/conversations/ForkConversationButton.tsx

@@ -2,10 +2,15 @@ import { GitFork } from "lucide-react";
 import { useId, useState } from "react";
 import { createPortal } from "react-dom";
 import { useNavigate } from "react-router";
-import { Button } from "../components/Button";
+import { Button } from "../components/ui/button";
+import { Textarea } from "../components/ui/textarea";
+import { Field, FieldLabel } from "../components/ui/field";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../components/ui/tooltip";
 import { Drawer } from "../components/Drawer";
-import { Field } from "../components/Field";
-import { TextArea } from "../components/TextInput";
 import { DashboardApiError } from "../http";
 import { conversationPath } from "./conversationRoutes";
 import { useForkConversation } from "./queries";
@@ -17,14 +22,20 @@ export function ForkConversationButton(props: ForkTarget) {
   const [open, setOpen] = useState(false);
   return (
     <>
-      <Button
-        size="icon"
-        aria-label="Fork after this message"
-        title="Fork after this message"
-        onClick={() => setOpen(true)}
-      >
-        <GitFork size={14} aria-hidden="true" />
-      </Button>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button
+              size="icon"
+              aria-label="Fork after this message"
+              onClick={() => setOpen(true)}
+            >
+              <GitFork size={14} aria-hidden="true" />
+            </Button>
+          }
+        />
+        <TooltipContent size="compact">Fork after this message</TooltipContent>
+      </Tooltip>
       {open
         ? createPortal(
             <ForkConversationDialog
@@ -82,12 +93,12 @@ function ForkConversationDialog(props: ForkTarget & { onClose(): void }) {
         <p className="m-0">
           Creates a fork of the conversation from this point.
         </p>
-        <Field htmlFor={inputId} label="Message">
-          <TextArea
+        <Field>
+          <FieldLabel htmlFor={inputId}>Message</FieldLabel>
+          <Textarea
             id={inputId}
-            prose
             autoFocus
-            className="min-h-28"
+            className="min-h-28 leading-relaxed"
             placeholder="Message Junior…"
             value={message}
             disabled={fork.isPending}
@@ -112,7 +123,7 @@ function ForkConversationDialog(props: ForkTarget & { onClose(): void }) {
           </p>
         ) : null}
         <Button
-          tone="primary"
+          variant="primary"
           type="submit"
           disabled={!message.trim() || fork.isPending}
         >

package/src/client/conversations/ObjectCard.tsx

@@ -3,10 +3,16 @@ import {
   objectFactFields,
   objectPresentation,
 } from "@sentry/junior-plugin-api";
-import { ArrowUpRight } from "lucide-react";
+import { ArrowUpRight, ChevronRight } from "lucide-react";
 import { ObjectIcon } from "../components/ObjectIcon";
 import { AutomationCard } from "../components/AutomationCard";
 import { StatusChip } from "../components/StatusChip";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../components/ui/collapsible";
+import { dashboardDisclosureChevronClass } from "../styles";
 
 /** Show the latest saved annotation. Opening a source is always explicit. */
 export function ObjectCard({ card }: { card: OwnedObjectAnnotation }) {
@@ -78,14 +84,20 @@ export function ObjectCard({ card }: { card: OwnedObjectAnnotation }) {
         )}
         {fields.length > 0 && facts(fields)}
         {card.description && (
-          <details className="min-w-0 border-t border-dashboard-border pt-3">
-            <summary className="cursor-pointer text-xs font-medium text-dashboard-text-muted focus-visible:outline-dashboard-focus">
+          <Collapsible className="min-w-0 border-t border-dashboard-border pt-3">
+            <CollapsibleTrigger className="group flex cursor-pointer items-center gap-1 text-xs font-medium text-dashboard-text-muted focus-visible:outline-dashboard-focus">
+              <ChevronRight
+                aria-hidden="true"
+                className={dashboardDisclosureChevronClass}
+              />
               More details
-            </summary>
-            <p className="mb-0 mt-3 whitespace-pre-wrap break-words text-sm text-dashboard-text-muted">
-              {card.description}
-            </p>
-          </details>
+            </CollapsibleTrigger>
+            <CollapsibleContent hiddenUntilFound>
+              <p className="mb-0 mt-3 whitespace-pre-wrap break-words text-sm text-dashboard-text-muted">
+                {card.description}
+              </p>
+            </CollapsibleContent>
+          </Collapsible>
         )}
         {card.warning && (
           <p className="m-0 break-words text-xs text-amber-500">

package/src/client/conversations/PendingMailboxStack.tsx

@@ -9,13 +9,17 @@ import {
 import {
   AlertCircle,
   Clock3,
-  LoaderCircle,
   SkipForward,
   X,
   type LucideIcon,
 } from "lucide-react";
 
-import { Tooltip } from "../components/Tooltip";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../components/ui/tooltip";
+import { Spinner } from "../components/ui/spinner";
 import { actorLabel } from "../format";
 import type { ConversationMailboxMessage } from "./conversationOutbox";
 import {
@@ -29,12 +33,12 @@ const COLLAPSED_PENDING_ROW_COUNT = 2;
 
 function pendingDeliveryMeta(
   message: Pick<ConversationMailboxMessage, "clientStatus" | "delivery">,
-): { icon: LucideIcon; label: string; spin?: boolean } {
+): { icon: LucideIcon | typeof Spinner; label: string } {
   if (message.clientStatus === "failed") {
     return { icon: AlertCircle, label: "Failed to send" };
   }
   if (message.clientStatus === "sending") {
-    return { icon: LoaderCircle, label: "Sending", spin: true };
+    return { icon: Spinner, label: "Sending" };
   }
   if (message.delivery === "interrupt") {
     return { icon: SkipForward, label: "Interrupt" };
@@ -44,13 +48,18 @@ function pendingDeliveryMeta(
 
 function PendingMetaIcon(props: { children: ReactElement; label: string }) {
   return (
-    <Tooltip content={props.label} placement="above">
-      <span
-        aria-label={props.label}
-        className="inline-flex text-dashboard-text-muted"
-      >
-        {props.children}
-      </span>
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <span
+            aria-label={props.label}
+            className="inline-flex text-dashboard-text-muted"
+          >
+            {props.children}
+          </span>
+        }
+      />
+      <TooltipContent>{props.label}</TooltipContent>
     </Tooltip>
   );
 }
@@ -69,43 +78,48 @@ function PendingMetaIcons(props: {
   return (
     <TranscriptHeadingMeta className="flex min-w-0 items-center justify-end gap-1.5 text-xs leading-none text-dashboard-text-muted">
       {props.showSlack ? (
-        <Tooltip content="Slack" placement="above">
-          <span className="inline-flex text-dashboard-text-muted">
-            <SlackMark className="size-3.5" />
-          </span>
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <span className="inline-flex text-dashboard-text-muted">
+                <SlackMark className="size-3.5" />
+              </span>
+            }
+          />
+          <TooltipContent>Slack</TooltipContent>
         </Tooltip>
       ) : null}
       <PendingMetaIcon label={delivery.label}>
         <DeliveryIcon
           aria-hidden="true"
-          className={delivery.spin ? "animate-spin" : undefined}
-          size={13}
+          className="size-3.25"
           strokeWidth={2.2}
         />
       </PendingMetaIcon>
       {props.onCancel ? (
-        <Tooltip content="Remove queued message" placement="above">
-          <button
-            aria-label={
-              props.cancelError
-                ? "Could not remove. Try again."
-                : "Remove queued message"
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <button
+                aria-label={
+                  props.cancelError
+                    ? "Could not remove. Try again."
+                    : "Remove queued message"
+                }
+                className="inline-flex size-5 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-dashboard-text-muted transition-colors hover:bg-dashboard-fill-hover hover:text-amber-50 focus-visible:outline focus-visible:outline-1 focus-visible:outline-amber-200/55 disabled:cursor-default disabled:opacity-50"
+                disabled={props.cancelDisabled}
+                onClick={props.onCancel}
+                type="button"
+              >
+                {props.cancelPending ? (
+                  <Spinner aria-hidden="true" className="size-3.25" />
+                ) : (
+                  <X aria-hidden="true" size={14} strokeWidth={2.2} />
+                )}
+              </button>
             }
-            className="inline-flex size-5 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-dashboard-text-muted transition-colors hover:bg-dashboard-fill-hover hover:text-amber-50 focus-visible:outline focus-visible:outline-1 focus-visible:outline-amber-200/55 disabled:cursor-default disabled:opacity-50"
-            disabled={props.cancelDisabled}
-            onClick={props.onCancel}
-            type="button"
-          >
-            {props.cancelPending ? (
-              <LoaderCircle
-                aria-hidden="true"
-                className="animate-spin"
-                size={13}
-              />
-            ) : (
-              <X aria-hidden="true" size={14} strokeWidth={2.2} />
-            )}
-          </button>
+          />
+          <TooltipContent>Remove queued message</TooltipContent>
         </Tooltip>
       ) : null}
     </TranscriptHeadingMeta>

package/src/client/conversations/README.md

@@ -16,9 +16,13 @@ shared controls and overlays.
   `flush` when the text already sits on the transcript edge. It extends the
   padded control around that text. Do not repeat negative margins at call sites.
   The caller owns the native `details` element and its content.
+  `TranscriptSummaryTrigger` gives a `ui/collapsible` trigger the same look.
+  Its caller owns the `Collapsible` and its content. Transcript search holds
+  event and context rows open.
 - 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 +44,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 +91,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,27 +76,34 @@ 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
+      <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"
+        size="menu"
       >
         {content}
-      </button>
+      </Button>
     ) : (
       <Button
         aria-label={label}