@sentry/junior-dashboard 0.265.0 → 0.267.0

package/src/client/conversations/SubagentTranscriptDrawer.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Bot, ExternalLink } from "lucide-react";
+import { Bot, CircleAlert, ExternalLink } from "lucide-react";
 import { Link } from "react-router";
 
 import { useConversationData } from "./queries";
@@ -11,6 +11,8 @@ import {
 } from "../format";
 import { buildConversationMarkdown } from "../markdownExport";
 import { Drawer } from "../components/Drawer";
+import { EmptyTelemetry } from "../components/EmptyTelemetry";
+import { Alert, AlertDescription, AlertTitle } from "../components/ui/alert";
 import { SearchInput } from "../components/SearchInput";
 import { StatusChip } from "../components/StatusChip";
 import { subagentStatusTone } from "./ConversationChildAgents";
@@ -22,7 +24,6 @@ import {
 import { Transcript } from "./TranscriptView";
 import { TranscriptLoading } from "./TranscriptLoading";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
-import { transcriptEmptyClass } from "./transcriptStyles";
 
 /** One child Conversation to show, with what its parent already knows. */
 export interface SubagentTranscriptTarget {
@@ -108,6 +109,8 @@ function SubagentTranscriptDrawerContent(props: {
         </>
       }
       closeLabel="Close subagent transcript"
+      // The event log owns its row insets and sticky toolbar, like the page.
+      flush={view === "raw"}
       header={
         <>
           <div className="flex min-w-0 items-center gap-2">
@@ -178,9 +181,19 @@ function SubagentTranscriptDrawerContent(props: {
       {query.isPending ? (
         <TranscriptLoading />
       ) : query.error && !detail ? (
-        <DrawerEmptyState tone="error">
-          Conversation failed to load.
-        </DrawerEmptyState>
+        <Alert
+          className="gap-1 px-4 py-3 has-[>svg]:gap-x-3"
+          variant="destructive"
+        >
+          <CircleAlert aria-hidden="true" />
+          <AlertTitle className="font-display text-base font-semibold leading-tight">
+            Conversation failed to load.
+          </AlertTitle>
+          <AlertDescription className="leading-relaxed">
+            Junior could not get this child conversation. Use Open conversation
+            to view it on its own page.
+          </AlertDescription>
+        </Alert>
       ) : detail ? (
         <Transcript
           hasPreviousPage={query.hasPreviousPage}
@@ -194,7 +207,7 @@ function SubagentTranscriptDrawerContent(props: {
           view={view}
         />
       ) : (
-        <DrawerEmptyState>Conversation unavailable.</DrawerEmptyState>
+        <EmptyTelemetry>Conversation unavailable.</EmptyTelemetry>
       )}
     </Drawer>
   );
@@ -209,19 +222,3 @@ function statusLabel(
   }
   return detailStatus ?? status;
 }
-
-function DrawerEmptyState(props: {
-  children: string;
-  tone?: "default" | "error";
-}) {
-  const isError = props.tone === "error";
-  return (
-    <div
-      className={transcriptEmptyClass(isError ? "error" : "default")}
-      data-tone={props.tone ?? "default"}
-      role={isError ? "alert" : undefined}
-    >
-      {props.children}
-    </div>
-  );
-}

package/src/client/conversations/TranscriptActivityGroup.tsx

@@ -2,6 +2,7 @@ import { Fragment, useState, type ReactNode } from "react";
 import { ChevronRight } from "lucide-react";
 
 import { ShimmerText } from "../components/ShimmerText";
+import { Collapsible, CollapsibleContent } from "../components/ui/collapsible";
 import {
   Tooltip,
   TooltipContent,
@@ -12,7 +13,7 @@ import type { RenderedTranscriptEntry } from "./transcriptRenderModel";
 import { cn } from "../styles";
 import { useTranscriptSearch } from "./transcriptSearch";
 import { TranscriptActivityNesting } from "./TranscriptRailEvent";
-import { TranscriptSummary } from "./TranscriptSummary";
+import { TranscriptSummaryTrigger } from "./TranscriptSummary";
 
 function countLabel(count: number, singular: string, plural: string): string {
   return count === 1 ? singular : `${count} ${plural}`;
@@ -172,17 +173,17 @@ export function TranscriptActivityGroup(props: {
   const open = activityGroupOpen(userOpen);
 
   return (
-    <details className="group/activity-run min-w-0 py-0.5" open={open}>
-      <TranscriptSummary
+    <Collapsible
+      className="min-w-0 py-0.5"
+      onOpenChange={setUserOpen}
+      open={open}
+    >
+      <TranscriptSummaryTrigger
         flush
         className={cn(
-          "flex items-center gap-1 text-left text-xs leading-tight text-dashboard-text-muted",
+          "group/activity-run flex items-center gap-1 text-xs leading-tight text-dashboard-text-muted",
           live && "text-dashboard-accent-text/80",
         )}
-        onClick={(event) => {
-          event.preventDefault();
-          setUserOpen(!open);
-        }}
       >
         <Tooltip>
           <TooltipTrigger
@@ -190,24 +191,26 @@ export function TranscriptActivityGroup(props: {
               <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>
-            <span className="hidden min-w-0 truncate group-open/activity-run:inline">
-              <ShimmerText active={live}>Hide {label}</ShimmerText>
+            <span className="min-w-0 truncate">
+              <ShimmerText active={live}>
+                {open ? `Hide ${label}` : label}
+              </ShimmerText>
             </span>
             <ChevronRight
               aria-hidden="true"
-              className="size-3 shrink-0 opacity-55 transition-transform group-open/activity-run:rotate-90"
+              className="size-3 shrink-0 opacity-55 transition-transform group-aria-expanded/activity-run:rotate-90"
               strokeWidth={2.2}
             />
           </TooltipTrigger>
           <TooltipContent>{summary}</TooltipContent>
         </Tooltip>
-      </TranscriptSummary>
-      <TranscriptActivityNesting.Provider value>
-        <div className="mt-1.5 grid min-w-0 gap-1">{rows}</div>
-      </TranscriptActivityNesting.Provider>
-    </details>
+      </TranscriptSummaryTrigger>
+      {/* Closed rows stay in the page, so browser find can open the group. */}
+      <CollapsibleContent hiddenUntilFound>
+        <TranscriptActivityNesting.Provider value>
+          <div className="mt-1.5 grid min-w-0 gap-1">{rows}</div>
+        </TranscriptActivityNesting.Provider>
+      </CollapsibleContent>
+    </Collapsible>
   );
 }

package/src/client/conversations/TranscriptAttachment.tsx

@@ -1,12 +1,22 @@
 import {
   INPUT_IMAGE_TYPES,
+  type InputImage,
   type MessageAttachment,
 } from "@sentry/junior/api/schema";
 import { FileText } from "lucide-react";
 import { ImageAttachment } from "../components/ImageAttachment";
 import { HighlightText, useTranscriptSearch } from "./transcriptSearch";
 
-function attachmentUrl(conversationId: string, attachmentId: string): string {
+/** Build a data URL that previews an image before the server stores it. */
+export function inputImageSrc(image: InputImage): string {
+  return `data:${image.contentType};base64,${image.data}`;
+}
+
+/** Build the private read route for one stored conversation attachment. */
+export function conversationAttachmentUrl(
+  conversationId: string,
+  attachmentId: string,
+): string {
   return `/api/conversations/${encodeURIComponent(conversationId)}/attachments/${encodeURIComponent(attachmentId)}`;
 }
 
@@ -35,13 +45,38 @@ export function TranscriptAttachments(props: {
   );
 }
 
+/** Show the images of a send before the server stores them. */
+export function TranscriptLocalImages(props: { images: InputImage[] }) {
+  return (
+    <div className="flex min-w-0 flex-wrap items-start gap-2">
+      {props.images.map((image, index) => (
+        <ImageAttachment
+          filename={image.filename}
+          imageClassName={TRANSCRIPT_IMAGE_CLASS}
+          key={`${image.filename}:${index}`}
+          src={inputImageSrc(image)}
+          triggerClassName={TRANSCRIPT_IMAGE_TRIGGER_CLASS}
+        />
+      ))}
+    </div>
+  );
+}
+
+const TRANSCRIPT_IMAGE_CLASS =
+  "max-h-48 w-auto max-w-full h-auto rounded-lg object-contain";
+const TRANSCRIPT_IMAGE_TRIGGER_CLASS =
+  "block min-w-0 max-w-full flex-none rounded-lg border border-dashboard-border bg-dashboard-fill-faint transition-colors hover:border-dashboard-border-interactive hover:bg-dashboard-fill-hover focus-visible:outline-2 focus-visible:outline-dashboard-focus";
+
 /** Render one stored user or assistant attachment using the private read route. */
 function TranscriptAttachment(props: {
   attachment: MessageAttachment;
   conversationId: string;
 }) {
   const search = useTranscriptSearch();
-  const href = attachmentUrl(props.conversationId, props.attachment.id);
+  const href = conversationAttachmentUrl(
+    props.conversationId,
+    props.attachment.id,
+  );
   const size = formatAttachmentBytes(props.attachment.bytes);
   const inline = INPUT_IMAGE_TYPES.some(
     (type) => type === props.attachment.contentType,
@@ -53,10 +88,10 @@ function TranscriptAttachment(props: {
       <ImageAttachment
         context={meta}
         filename={props.attachment.filename}
-        imageClassName="max-h-48 w-auto max-w-full h-auto rounded-lg object-contain"
+        imageClassName={TRANSCRIPT_IMAGE_CLASS}
         loading="lazy"
         src={href}
-        triggerClassName="block min-w-0 max-w-full flex-none rounded-lg border border-dashboard-border bg-dashboard-fill-faint transition-colors hover:border-dashboard-border-interactive hover:bg-dashboard-fill-hover focus-visible:outline-2 focus-visible:outline-dashboard-focus"
+        triggerClassName={TRANSCRIPT_IMAGE_TRIGGER_CLASS}
       />
     );
   }

package/src/client/conversations/TranscriptAutomationTriggerView.tsx

@@ -1,8 +1,13 @@
 import { ArrowRight, ChevronRight } from "lucide-react";
-import { useId, useState } from "react";
+import { useState } from "react";
 import type { ConversationDetailReport } from "@sentry/junior/api/schema";
 
 import { buttonVariants } from "../components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../components/ui/collapsible";
 import { Link } from "react-router";
 import { ObjectIcon } from "../components/ObjectIcon";
 import { automationPath, formatRelativeTime } from "../format";
@@ -49,7 +54,6 @@ export function TranscriptAutomationTriggerView(props: {
     (part) => part.type === "text" && part.redacted,
   );
   const [open, setOpen] = useState(false);
-  const promptId = useId();
   const automationId = props.sourceTask.id?.trim();
   const name = props.sourceTask.title?.trim() || "Automation";
   const details = [
@@ -86,30 +90,21 @@ export function TranscriptAutomationTriggerView(props: {
         </p>
       ) : null}
       {text ? (
-        <div className="min-w-0">
-          <button
-            aria-controls={promptId}
-            aria-expanded={open}
-            className="-mx-1 inline-flex cursor-pointer items-center gap-1 rounded-sm border-0 bg-transparent px-1 py-0.5 font-sans text-xs font-medium text-dashboard-text-muted transition-colors hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus"
-            onClick={() => setOpen((value) => !value)}
-            type="button"
-          >
+        <Collapsible className="min-w-0" onOpenChange={setOpen} open={open}>
+          <CollapsibleTrigger className="group -mx-1 inline-flex cursor-pointer items-center gap-1 rounded-sm border-0 bg-transparent px-1 py-0.5 font-sans text-xs font-medium text-dashboard-text-muted transition-colors hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus">
             <ChevronRight
               aria-hidden="true"
-              className={cn("size-3 transition-transform", open && "rotate-90")}
+              className="size-3 transition-transform group-aria-expanded:rotate-90 motion-reduce:transition-none"
               strokeWidth={2.2}
             />
             {open ? "Hide prompt" : "Show prompt"}
-          </button>
-          {open ? (
-            <pre
-              className="mt-2 max-h-80 overflow-auto whitespace-pre-wrap break-words rounded-lg border border-dashboard-border-subtle bg-dashboard-bg px-3 py-2 font-mono text-xs leading-relaxed text-dashboard-text-muted"
-              id={promptId}
-            >
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <pre className="mt-2 max-h-80 overflow-auto whitespace-pre-wrap break-words rounded-lg border border-dashboard-border-subtle bg-dashboard-bg px-3 py-2 font-mono text-xs leading-relaxed text-dashboard-text-muted">
               <HighlightText text={text} />
             </pre>
-          ) : null}
-        </div>
+          </CollapsibleContent>
+        </Collapsible>
       ) : redacted ? (
         <RedactedMarker />
       ) : null}

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

@@ -4,6 +4,7 @@ import type {
   ConversationTurnFailureReason,
 } from "@sentry/junior/api/schema";
 
+import { Alert, AlertDescription, AlertTitle } from "../components/ui/alert";
 import { formatMessageTimestamp } from "../format";
 import {
   transcriptFailureDescription,
@@ -35,25 +36,21 @@ export function TranscriptFailureView(props: {
   ) : null;
 
   return (
-    <div
-      className="grid min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 rounded-lg bg-rose-300/[0.1] px-4 py-3 text-rose-100 max-md:grid-cols-[auto_minmax(0,1fr)]"
+    <Alert
+      className="min-w-0 gap-3 rounded-lg border-0 bg-rose-300/[0.1] px-4 py-3 text-rose-100 *:[svg]:row-span-1 has-[>svg]:grid-cols-[auto_minmax(0,1fr)_auto] has-[>svg]:gap-x-3 max-md:has-[>svg]:grid-cols-[auto_minmax(0,1fr)] *:[svg]:text-rose-300"
       data-transcript-failure={props.failureCode}
       data-transcript-failure-event-id={props.eventId}
       data-transcript-failure-reason={props.failureReason}
-      role="alert"
+      variant="destructive"
     >
-      <CircleAlert
-        aria-hidden="true"
-        className="mt-0.5 text-rose-300"
-        size={16}
-      />
+      <CircleAlert aria-hidden="true" size={16} />
       <div className="min-w-0">
-        <div className="font-display text-base font-semibold leading-tight">
+        <AlertTitle className="font-display text-base font-semibold leading-tight">
           {transcriptFailureTitle(props.failureCode, props.failureReason)}
-        </div>
-        <div className="mt-1 text-sm leading-relaxed text-rose-100/70">
+        </AlertTitle>
+        <AlertDescription className="mt-1 leading-relaxed text-rose-100/70">
           {transcriptFailureDescription(props.failureCode, props.failureReason)}
-        </div>
+        </AlertDescription>
         {eventReference ? (
           <div className="mt-2 text-xs leading-relaxed text-rose-100/65">
             Reference: {eventReference}
@@ -65,6 +62,6 @@ export function TranscriptFailureView(props: {
           {timestamp}
         </span>
       ) : null}
-    </div>
+    </Alert>
   );
 }