@sentry/junior-dashboard 0.264.0 → 0.266.0

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