@sentry/junior-dashboard 0.265.0 → 0.266.0

package/src/client/conversations/DetailsList.tsx

@@ -7,8 +7,8 @@ import { cn, dashboardDisclosureChevronClass } from "../styles";
 const COLLAPSED_ROW_COUNT = 3;
 
 /**
- * Show rows in a details card. Rows are split by thin rules. A list with more
- * than three rows shows the first three and a row that shows the rest.
+ * Show rows in a details card. A list with more than three rows shows the
+ * first three and a row that shows the rest.
  */
 export function DetailsList<T>(props: {
   items: readonly T[];
@@ -23,26 +23,21 @@ export function DetailsList<T>(props: {
       : props.items.slice(0, COLLAPSED_ROW_COUNT);
 
   return (
-    // Rows own their padding, so hover fills reach the rules. The negative
-    // margin keeps the first and last text on the card padding.
-    <ul className="-my-2.5 grid list-none p-0">
+    // Rows own their padding, so a hover fill sits inside the card with an
+    // even inset. The negative margins keep row text on the card padding.
+    <ul className="-mx-1.5 -mb-1.5 -mt-1 grid list-none gap-0.5 p-0">
       {visible.map((item) => (
-        <li
-          className="border-t border-dashboard-border-subtle first:border-t-0"
-          key={props.itemKey(item)}
-        >
-          {props.renderItem(item)}
-        </li>
+        <li key={props.itemKey(item)}>{props.renderItem(item)}</li>
       ))}
       {hidden > 0 ? (
-        <li className="border-t border-dashboard-border-subtle">
+        <li>
           <button
             aria-expanded={expanded}
-            className="group -mx-2 flex min-h-8 items-center gap-2.5 rounded-md px-2 py-2 text-left text-xs font-medium leading-4 text-dashboard-text-muted transition-colors hover:bg-dashboard-surface-hover hover:text-dashboard-text focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus"
+            className="group flex min-h-8 w-full items-center gap-2.5 rounded-md px-1.5 py-1.5 text-left text-xs font-medium leading-4 text-dashboard-text-muted transition-colors hover:bg-dashboard-surface-hover hover:text-dashboard-text focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus"
             onClick={() => setExpanded((value) => !value)}
             type="button"
           >
-            <span className="grid size-4 shrink-0 place-items-center">
+            <span className="grid size-5 shrink-0 place-items-center">
               <ChevronRight
                 aria-hidden="true"
                 className={dashboardDisclosureChevronClass}
@@ -59,20 +54,24 @@ export function DetailsList<T>(props: {
 /**
  * Lay out one details list row: an icon, a title, and short trailing text on
  * the first line, then optional lines under the title. A row with `href`
- * opens that link in a new tab.
+ * opens that link in a new tab. A row with `onToggle` is a disclosure button
+ * that shows or hides content the caller renders under it.
  */
 export function DetailsRow(props: {
   children?: ReactNode;
+  expanded?: boolean;
   href?: string;
   icon: ReactNode;
   meta?: ReactNode;
+  onToggle?(): void;
   title: ReactNode;
   /** Native hover text with detail that the row does not show. */
   tooltip?: string;
 }) {
+  const interactive = props.href !== undefined || props.onToggle !== undefined;
   const className = cn(
-    "-mx-2 grid min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-x-2.5 gap-y-1 rounded-md px-2 py-2.5 text-inherit no-underline",
-    props.href &&
+    "grid w-full min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-x-2.5 gap-y-1 rounded-md px-1.5 py-1.5 text-left text-inherit no-underline",
+    interactive &&
       "group transition-colors hover:bg-dashboard-surface-hover focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus",
   );
   const content = (
@@ -80,7 +79,7 @@ export function DetailsRow(props: {
       <span className="grid size-5 shrink-0 place-items-center text-dashboard-text-muted">
         {props.icon}
       </span>
-      <span className="min-w-0 truncate text-sm font-medium leading-5 text-dashboard-text group-hover:underline">
+      <span className="min-w-0 truncate text-sm font-medium leading-5 text-dashboard-text">
         {props.title}
       </span>
       <span className="shrink-0 text-xs leading-5 tabular-nums text-dashboard-text-muted">
@@ -89,17 +88,33 @@ export function DetailsRow(props: {
       {props.children}
     </>
   );
-  return props.href ? (
-    <a
-      className={className}
-      href={props.href}
-      rel="noreferrer"
-      target="_blank"
-      title={props.tooltip}
-    >
-      {content}
-    </a>
-  ) : (
+  if (props.href) {
+    return (
+      <a
+        className={className}
+        href={props.href}
+        rel="noreferrer"
+        target="_blank"
+        title={props.tooltip}
+      >
+        {content}
+      </a>
+    );
+  }
+  if (props.onToggle) {
+    return (
+      <button
+        aria-expanded={props.expanded ?? false}
+        className={className}
+        onClick={props.onToggle}
+        title={props.tooltip}
+        type="button"
+      >
+        {content}
+      </button>
+    );
+  }
+  return (
     <div className={className} title={props.tooltip}>
       {content}
     </div>

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

@@ -9,7 +9,6 @@ import {
 import {
   AlertCircle,
   Clock3,
-  LoaderCircle,
   SkipForward,
   X,
   type LucideIcon,
@@ -20,6 +19,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "../components/ui/tooltip";
+import { Spinner } from "../components/ui/spinner";
 import { actorLabel } from "../format";
 import type { ConversationMailboxMessage } from "./conversationOutbox";
 import {
@@ -33,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" };
@@ -92,8 +92,7 @@ function PendingMetaIcons(props: {
       <PendingMetaIcon label={delivery.label}>
         <DeliveryIcon
           aria-hidden="true"
-          className={delivery.spin ? "animate-spin" : undefined}
-          size={13}
+          className="size-3.25"
           strokeWidth={2.2}
         />
       </PendingMetaIcon>
@@ -113,11 +112,7 @@ function PendingMetaIcons(props: {
                 type="button"
               >
                 {props.cancelPending ? (
-                  <LoaderCircle
-                    aria-hidden="true"
-                    className="animate-spin"
-                    size={13}
-                  />
+                  <Spinner aria-hidden="true" className="size-3.25" />
                 ) : (
                   <X aria-hidden="true" size={14} strokeWidth={2.2} />
                 )}

package/src/client/conversations/README.md

@@ -16,6 +16,9 @@ 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.
   Tool and reasoning rows use `ui/trace`. Transcript search forces them open.

package/src/client/conversations/ShareConversationButton.tsx

@@ -96,15 +96,14 @@ export function ShareConversationButton(props: {
         </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}

package/src/client/conversations/TranscriptEventView.tsx

@@ -1,11 +1,14 @@
 import { ChevronRight } from "lucide-react";
+import { useState } from "react";
 
+import { Collapsible, CollapsibleContent } from "../components/ui/collapsible";
+import { cn, dashboardDisclosureChevronClass } from "../styles";
 import { MentionText } from "./transcriptMentions";
 import { messageRawText } from "./transcriptRenderModel";
-import { HighlightText } from "./transcriptSearch";
+import { HighlightText, useTranscriptSearch } from "./transcriptSearch";
 import { RedactedMarker } from "./TranscriptRedacted";
 import type { TranscriptViewMessage } from "../types";
-import { TranscriptSummary } from "./TranscriptSummary";
+import { TranscriptSummaryTrigger } from "./TranscriptSummary";
 
 function EventTypeChip(props: { eventType: string }) {
   return (
@@ -25,6 +28,8 @@ function batchSummary(events: readonly { label?: string }[]): string {
 
 /** Render an Event Message whose heading expands its full text. */
 export function TranscriptEventView(props: { message: TranscriptViewMessage }) {
+  const { active: searchActive } = useTranscriptSearch();
+  const [open, setOpen] = useState(false);
   const text = messageRawText(props.message);
   const redacted = props.message.parts.some(
     (part) => part.type === "text" && part.redacted,
@@ -35,33 +40,38 @@ export function TranscriptEventView(props: { message: TranscriptViewMessage }) {
   const summary = isBatch
     ? batchSummary(events)
     : (props.message.trustedSummary ?? props.message.eventType ?? "");
+  // With text, the heading sits in the disclosure button, which cannot hold
+  // links.
+  const links = !text;
   const heading = (
     <span className="flex min-w-0 flex-col gap-1">
       <span className="flex min-h-6 min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
         <span className="min-w-0 break-words font-display text-sm font-semibold leading-6 text-dashboard-text">
-          <MentionText mentions={mentions} text={summary} />
+          <MentionText links={links} mentions={mentions} text={summary} />
         </span>
         {!isBatch && props.message.eventType ? (
           <EventTypeChip eventType={props.message.eventType} />
         ) : null}
       </span>
       {isBatch ? (
-        <ul className="flex min-w-0 flex-col gap-1">
+        <span className="flex min-w-0 flex-col gap-1" role="list">
           {events.map((event, index) => (
-            <li
+            <span
               key={index}
+              role="listitem"
               className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-5 text-dashboard-text-muted"
             >
               <span className="min-w-0 break-words">
                 <MentionText
+                  links={links}
                   mentions={mentions}
                   text={event.trustedSummary ?? event.eventType}
                 />
               </span>
               <EventTypeChip eventType={event.eventType} />
-            </li>
+            </span>
           ))}
-        </ul>
+        </span>
       ) : null}
     </span>
   );
@@ -69,22 +79,31 @@ export function TranscriptEventView(props: { message: TranscriptViewMessage }) {
   return (
     <div className="min-w-0 py-1">
       {text ? (
-        <details className="group/event min-w-0">
-          <TranscriptSummary
+        <Collapsible
+          className="min-w-0"
+          // Search holds the text open, so the heading button is off until
+          // search ends.
+          disabled={searchActive}
+          onOpenChange={setOpen}
+          open={searchActive || open}
+        >
+          <TranscriptSummaryTrigger
             flush
-            className="flex items-start gap-2 text-dashboard-text-muted"
+            className="group flex items-start gap-2 text-dashboard-text-muted"
           >
             {heading}
             <ChevronRight
               aria-hidden="true"
-              className="mt-1.5 size-3 shrink-0 transition-transform group-open/event:rotate-90"
+              className={cn(dashboardDisclosureChevronClass, "mt-1.5")}
               strokeWidth={2.2}
             />
-          </TranscriptSummary>
-          <pre className="mt-2 max-h-80 overflow-auto whitespace-pre-wrap break-words rounded-lg border border-dashboard-border bg-dashboard-surface-panel px-3 py-2 font-sans text-xs leading-relaxed text-dashboard-text-muted">
-            <HighlightText text={text} />
-          </pre>
-        </details>
+          </TranscriptSummaryTrigger>
+          <CollapsibleContent hiddenUntilFound>
+            <pre className="mt-2 max-h-80 overflow-auto whitespace-pre-wrap break-words rounded-lg border border-dashboard-border bg-dashboard-surface-panel px-3 py-2 font-sans text-xs leading-relaxed text-dashboard-text-muted">
+              <HighlightText text={text} />
+            </pre>
+          </CollapsibleContent>
+        </Collapsible>
       ) : (
         <>
           {heading}

package/src/client/conversations/TranscriptMessageContextView.tsx

@@ -1,16 +1,19 @@
 import { ChevronRight } from "lucide-react";
+import { useState } from "react";
 
+import { Collapsible, CollapsibleContent } from "../components/ui/collapsible";
+import { dashboardDisclosureChevronClass } from "../styles";
 import { formatMessageTimestamp, transcriptMessageActorLabel } from "../format";
 import type { ConversationTranscript, TranscriptViewMessage } from "../types";
 import {
   TranscriptHeadingMeta,
   TranscriptHeadingRow,
 } from "./TranscriptHeadingRow";
-import { HighlightText } from "./transcriptSearch";
+import { HighlightText, useTranscriptSearch } from "./transcriptSearch";
 import { messageRawText } from "./transcriptRenderModel";
 import { RedactedMarker } from "./TranscriptRedacted";
 import { TranscriptTurnContextView } from "./TranscriptTurnContextView";
-import { TranscriptSummary } from "./TranscriptSummary";
+import { TranscriptSummaryTrigger } from "./TranscriptSummary";
 
 /** Render ambient conversation context that is not a primary chat bubble. */
 export function TranscriptMessageContextView(props: {
@@ -18,6 +21,8 @@ export function TranscriptMessageContextView(props: {
   message: TranscriptViewMessage;
   redacted?: boolean;
 }) {
+  const { active: searchActive } = useTranscriptSearch();
+  const [open, setOpen] = useState(false);
   const actor = transcriptMessageActorLabel(props.conversation, props.message);
   const timestamp = formatMessageTimestamp(props.message.timestamp);
   const text = messageRawText(props.message);
@@ -30,33 +35,39 @@ export function TranscriptMessageContextView(props: {
 
   return (
     <>
-      <details
-        className="group/message-context min-w-0 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface-panel px-3 py-2.5 md:hidden"
+      <Collapsible
+        className="min-w-0 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface-panel px-3 py-2.5 md:hidden"
         data-transcript-message-context
+        // Search holds the text open, so the heading button is off until
+        // search ends.
+        disabled={searchActive}
+        onOpenChange={setOpen}
+        open={searchActive || open}
       >
-        <TranscriptSummary
+        <TranscriptSummaryTrigger
           flush
-          className="flex items-center justify-between gap-2 font-sans text-xs font-medium text-dashboard-text-muted"
+          className="group flex items-center justify-between gap-2 font-sans text-xs font-medium text-dashboard-text-muted"
         >
           <span className="min-w-0 truncate">Context from {actor}</span>
           <ChevronRight
             aria-hidden="true"
-            className="shrink-0 transition-transform group-open/message-context:rotate-90"
-            size={14}
+            className={dashboardDisclosureChevronClass}
           />
-        </TranscriptSummary>
-        <div className="mt-2 whitespace-pre-wrap pt-2 text-sm leading-relaxed text-dashboard-text-subtle">
-          {content}
-        </div>
-        {!props.redacted && props.message.contexts?.length ? (
-          <div className="mt-2">
-            <TranscriptTurnContextView
-              contexts={props.message.contexts}
-              messageId={props.message.messageId}
-            />
+        </TranscriptSummaryTrigger>
+        <CollapsibleContent hiddenUntilFound>
+          <div className="mt-2 whitespace-pre-wrap pt-2 text-sm leading-relaxed text-dashboard-text-subtle">
+            {content}
           </div>
-        ) : null}
-      </details>
+          {!props.redacted && props.message.contexts?.length ? (
+            <div className="mt-2">
+              <TranscriptTurnContextView
+                contexts={props.message.contexts}
+                messageId={props.message.messageId}
+              />
+            </div>
+          ) : null}
+        </CollapsibleContent>
+      </Collapsible>
       <article
         className="hidden min-w-0 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface-panel px-3 py-2.5 md:block"
         data-transcript-message-context