@sentry/junior-dashboard 0.264.0 → 0.266.0

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,30 +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} />
+        </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
@@ -78,7 +92,10 @@ export function TranscriptMessageContextView(props: {
         </div>
         {!props.redacted && props.message.contexts?.length ? (
           <div className="mt-2">
-            <TranscriptTurnContextView contexts={props.message.contexts} />
+            <TranscriptTurnContextView
+              contexts={props.message.contexts}
+              messageId={props.message.messageId}
+            />
           </div>
         ) : null}
       </article>

package/src/client/conversations/TranscriptMessageView.tsx

@@ -122,7 +122,12 @@ function messageAction(
   conversation: ConversationTranscript,
 ): ReactNode {
   if (message.role === "user" && message.contexts?.length) {
-    return <TranscriptTurnContextView contexts={message.contexts} />;
+    return (
+      <TranscriptTurnContextView
+        contexts={message.contexts}
+        messageId={message.messageId}
+      />
+    );
   }
   if (
     conversation.canFork &&

package/src/client/conversations/TranscriptReasoningView.tsx

@@ -1,15 +1,18 @@
+import { useState } from "react";
 import { Lightbulb } from "lucide-react";
 
+import {
+  TraceCollapsible,
+  TraceCollapsibleContent,
+  TraceCollapsibleTrigger,
+} from "../components/ui/trace";
 import { formatMessageTimestamp } from "../format";
 import type { TranscriptViewReasoningPart } from "../types";
-import { cn } from "../styles";
 import {
   TranscriptHeadingMeta,
   TranscriptHeadingRow,
 } from "./TranscriptHeadingRow";
 import { HighlightText, useTranscriptSearch } from "./transcriptSearch";
-import { TranscriptSummary } from "./TranscriptSummary";
-import { transcriptActivityBodyClass } from "./ToolFrame";
 
 /** Render reasoning collapsed with a short preview until expanded or searched. */
 export function TranscriptReasoningView(props: {
@@ -17,74 +20,57 @@ export function TranscriptReasoningView(props: {
   timestamp?: number;
 }) {
   const { active: searchActive } = useTranscriptSearch();
+  const [open, setOpen] = useState(false);
+  const expanded = searchActive || open;
   const rendered = props.part.redacted ? "Reasoning redacted" : props.part.text;
   const timestamp = formatMessageTimestamp(props.timestamp);
-  const summary = (
-    <>
-      <span
-        aria-label="Reasoning"
-        className="inline-flex size-4 shrink-0 items-center justify-center text-violet-200/80"
-        title="Reasoning"
-      >
-        <Lightbulb aria-hidden="true" size={14} strokeWidth={2} />
-      </span>
-      <TranscriptHeadingRow
-        left={
-          searchActive ? (
-            <span className="block min-w-0 text-dashboard-text-muted">
-              Reasoning
-            </span>
-          ) : (
-            <>
-              <span className="block min-w-0 truncate italic text-dashboard-text-muted group-open/reasoning:hidden">
-                {rendered}
-              </span>
-              <span className="hidden min-w-0 text-dashboard-text-muted group-open/reasoning:inline">
-                Reasoning
-              </span>
-            </>
-          )
-        }
-        right={
-          timestamp ? (
-            <TranscriptHeadingMeta className="min-w-0 break-words text-xs tabular-nums text-dashboard-text-muted max-md:hidden">
-              {timestamp}
-            </TranscriptHeadingMeta>
-          ) : undefined
-        }
-        rightClassName="min-w-0 max-md:hidden"
-      />
-    </>
-  );
-  const content = (
-    <div className={cn(transcriptActivityBodyClass, "px-3 py-2.5")}>
-      <div className="min-w-0 whitespace-pre-wrap break-words text-sm leading-relaxed text-dashboard-text-subtle">
-        <HighlightText text={rendered} />
-      </div>
-    </div>
-  );
-
-  if (searchActive) {
-    return (
-      <div className={reasoningFrameClass()}>
-        <div className="grid list-none grid-cols-[1rem_minmax(0,1fr)] items-center gap-2 py-1.5">
-          {summary}
-        </div>
-        {content}
-      </div>
-    );
-  }
 
   return (
-    <details className={cn("group/reasoning", reasoningFrameClass())}>
-      <TranscriptSummary className="-mx-2 grid grid-cols-[1rem_minmax(0,1fr)] items-center gap-2">
-        {summary}
-      </TranscriptSummary>
-      {content}
-    </details>
+    <TraceCollapsible
+      className="text-xs leading-tight"
+      // Search holds rows open, so the row button is off until search ends.
+      disabled={searchActive}
+      open={expanded}
+      onOpenChange={setOpen}
+    >
+      <TraceCollapsibleTrigger className="-mx-2 w-auto">
+        <span className="grid min-w-0 flex-1 grid-cols-[1rem_minmax(0,1fr)] items-center gap-2">
+          <span
+            aria-label="Reasoning"
+            className="inline-flex size-4 shrink-0 items-center justify-center text-violet-200/80"
+            title="Reasoning"
+          >
+            <Lightbulb aria-hidden="true" size={14} strokeWidth={2} />
+          </span>
+          <TranscriptHeadingRow
+            left={
+              expanded ? (
+                <span className="block min-w-0 text-dashboard-text-muted">
+                  Reasoning
+                </span>
+              ) : (
+                <span className="block min-w-0 truncate italic text-dashboard-text-muted">
+                  {rendered}
+                </span>
+              )
+            }
+            right={
+              timestamp ? (
+                <TranscriptHeadingMeta className="min-w-0 break-words text-xs tabular-nums text-dashboard-text-muted max-md:hidden">
+                  {timestamp}
+                </TranscriptHeadingMeta>
+              ) : undefined
+            }
+            rightClassName="min-w-0 max-md:hidden"
+          />
+        </span>
+      </TraceCollapsibleTrigger>
+      {/* Keep closed reasoning in the page, so browser find can reach it. */}
+      <TraceCollapsibleContent className="px-3 py-2.5" hiddenUntilFound>
+        <div className="min-w-0 whitespace-pre-wrap break-words text-sm leading-relaxed text-dashboard-text-subtle">
+          <HighlightText text={rendered} />
+        </div>
+      </TraceCollapsibleContent>
+    </TraceCollapsible>
   );
 }
-
-function reasoningFrameClass(): string {
-  return "min-w-0 text-xs leading-tight";
-}

package/src/client/conversations/TranscriptStructuredEventView.tsx

@@ -1,8 +1,9 @@
+import { Collapsible, CollapsibleContent } from "../components/ui/collapsible";
 import { formatMessageTimestamp } from "../format";
 import type { TranscriptViewStructuredEventPart } from "../types";
 import { MentionText } from "./transcriptMentions";
 import { HighlightText, useTranscriptSearch } from "./transcriptSearch";
-import { TranscriptSummary } from "./TranscriptSummary";
+import { TranscriptSummaryTrigger } from "./TranscriptSummary";
 
 type TranscriptPresentationEventPart = TranscriptViewStructuredEventPart;
 
@@ -58,27 +59,34 @@ export function TranscriptStructuredEventView(props: {
         ))}
       </div>
     ) : null;
+  const collapsible = details.length > 0 && !search.active;
+  // The header can sit inside the row button, so it uses only inline elements
+  // and no links.
   const header = (
-    <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-start gap-2 max-md:grid-cols-[minmax(0,1fr)]">
-      <div className="min-w-0">
-        <div className="text-sm font-medium leading-6 text-dashboard-text">
+    <span className="grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-start gap-2 max-md:grid-cols-[minmax(0,1fr)]">
+      <span className="min-w-0">
+        <span className="block text-sm font-medium leading-6 text-dashboard-text">
           <HighlightText text={presentation.title} />
-        </div>
+        </span>
         {presentation.preview ? (
-          <div className="mt-0.5 truncate text-xs text-dashboard-text-muted">
-            <MentionText mentions={mentions} text={presentation.preview} />
-          </div>
+          <span className="mt-0.5 block truncate text-xs text-dashboard-text-muted">
+            <MentionText
+              links={!collapsible}
+              mentions={mentions}
+              text={presentation.preview}
+            />
+          </span>
         ) : null}
-      </div>
+      </span>
       {timestamp ? (
         <span className="text-xs leading-6 tabular-nums text-dashboard-text-muted max-md:hidden">
           {timestamp}
         </span>
       ) : null}
-    </div>
+    </span>
   );
 
-  if (details.length === 0 || search.active) {
+  if (!collapsible) {
     return (
       <div className={surfaceClass}>
         {header}
@@ -87,9 +95,11 @@ export function TranscriptStructuredEventView(props: {
     );
   }
   return (
-    <details className={`group/plugin-event ${surfaceClass}`}>
-      <TranscriptSummary flush>{header}</TranscriptSummary>
-      {body}
-    </details>
+    <Collapsible className={surfaceClass}>
+      <TranscriptSummaryTrigger flush className="block">
+        {header}
+      </TranscriptSummaryTrigger>
+      <CollapsibleContent hiddenUntilFound>{body}</CollapsibleContent>
+    </Collapsible>
   );
 }

package/src/client/conversations/TranscriptSummary.tsx

@@ -1,7 +1,11 @@
-import type { ComponentPropsWithoutRef } from "react";
+import type { ComponentProps, ComponentPropsWithoutRef } from "react";
 
+import { CollapsibleTrigger } from "../components/ui/collapsible";
 import { cn } from "../styles";
 
+const summaryClass =
+  "cursor-pointer rounded-md px-2 py-1.5 transition-colors hover:bg-dashboard-fill-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus";
+
 /** Keep hover and keyboard focus around a padded transcript cell. */
 export function TranscriptSummary({
   className,
@@ -15,10 +19,38 @@ export function TranscriptSummary({
     <summary
       {...props}
       className={cn(
-        "cursor-pointer list-none rounded-md px-2 py-1.5 transition-colors hover:bg-dashboard-fill-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus [&::-webkit-details-marker]:hidden",
+        summaryClass,
+        "list-none [&::-webkit-details-marker]:hidden",
         flush && "-mx-2 -my-1.5",
         className,
       )}
     />
   );
 }
+
+/**
+ * Give a `Collapsible` trigger the same padding, hover, and focus as
+ * `TranscriptSummary`. The caller sets the display. Put only inline elements,
+ * such as `span`, inside the trigger.
+ */
+export function TranscriptSummaryTrigger({
+  className,
+  flush = false,
+  ...props
+}: Omit<ComponentProps<typeof CollapsibleTrigger>, "className"> & {
+  className?: string;
+  /** Extend padding around text that already sits on the transcript edge. */
+  flush?: boolean;
+}) {
+  return (
+    <CollapsibleTrigger
+      {...props}
+      className={cn(
+        summaryClass,
+        "text-left disabled:cursor-default disabled:hover:bg-transparent",
+        flush ? "-mx-2 -my-1.5 w-[calc(100%+1rem)]" : "w-full",
+        className,
+      )}
+    />
+  );
+}

package/src/client/conversations/TranscriptTimestamp.tsx

@@ -1,6 +1,10 @@
 import { createContext, useContext, useState, type ReactNode } from "react";
 
-import { Tooltip } from "../components/Tooltip";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../components/ui/tooltip";
 import {
   formatMessageTimestamp,
   formatRelativeMessageTimestamp,
@@ -51,18 +55,16 @@ export function TranscriptTimestamp(props: { value: number | undefined }) {
 
   const details = formatTranscriptTimestampDetails(props.value!);
   return (
-    <Tooltip
-      content={
+    <Tooltip>
+      <TooltipTrigger render={button} />
+      <TooltipContent>
         <span className="grid grid-cols-[auto_auto] gap-x-3">
           <span>Local</span>
           <span>{details.local}</span>
           <span>UTC</span>
           <span>{details.utc}</span>
         </span>
-      }
-      placement="above"
-    >
-      {button}
+      </TooltipContent>
     </Tooltip>
   );
 }

package/src/client/conversations/TranscriptToolView.tsx

@@ -96,7 +96,7 @@ function ToolSignature(props: {
         <HighlightText text={props.name} />
       </ShimmerText>
       {props.preview && !searchActive ? (
-        <code className="min-w-0 truncate font-[inherit] text-dashboard-text-muted group-open:hidden">
+        <code className="min-w-0 truncate font-[inherit] text-dashboard-text-muted group-aria-expanded/trace-collapsible-trigger:hidden">
           (<HighlightText text={props.preview} />)
         </code>
       ) : null}