@sentry/junior-dashboard 0.265.0 → 0.267.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,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

package/src/client/conversations/TranscriptMessageView.tsx

@@ -1,5 +1,8 @@
 import { ForkConversationButton } from "./ForkConversationButton";
-import { TranscriptAttachments } from "./TranscriptAttachment";
+import {
+  TranscriptAttachments,
+  TranscriptLocalImages,
+} from "./TranscriptAttachment";
 import { ObjectCard } from "./ObjectCard";
 import { AutomationCard } from "../components/AutomationCard";
 import { memo, type ReactNode } from "react";
@@ -69,6 +72,9 @@ export const TranscriptMessageView = memo(
             conversationId={props.conversation.conversationId}
           />
         ) : null}
+        {props.message.images?.length ? (
+          <TranscriptLocalImages images={props.message.images} />
+        ) : null}
         {props.message.cards?.map((card) => {
           switch (card.kind) {
             case "object":

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

package/src/client/conversations/TranscriptTurnContextView.tsx

@@ -9,13 +9,20 @@ import {
 import { createPortal } from "react-dom";
 
 import { DetailsPanel } from "../components/DetailsPanel";
+import { Button } from "../components/ui/button";
+import { Collapsible, CollapsibleContent } from "../components/ui/collapsible";
 import { Drawer } from "../components/Drawer";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../components/ui/tooltip";
 import type { TranscriptViewTurnContext } from "../types";
 import { formatMessageTimestamp, formatTime } from "../format";
 import { memoryRecallContent, type MemoryRecallContent } from "./turnContext";
-import { cn } from "../styles";
+import { cn, dashboardDisclosureChevronClass } from "../styles";
 import { HighlightText } from "./transcriptSearch";
-import { TranscriptSummary } from "./TranscriptSummary";
+import { TranscriptSummaryTrigger } from "./TranscriptSummary";
 
 /** The turn context that a page panel shows, keyed by its message. */
 export type TurnContextSelection = {
@@ -66,24 +73,33 @@ export function TranscriptTurnContextView(props: {
 
   return (
     <>
-      <button
-        aria-haspopup={panel ? undefined : "dialog"}
-        aria-expanded={expanded}
-        aria-label="View turn context"
-        className={cn(
-          "inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-dashboard-text-muted transition-colors hover:bg-dashboard-fill-hover hover:text-dashboard-text focus-visible:bg-dashboard-fill-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus",
-          expanded && "bg-dashboard-fill-hover text-dashboard-text",
-        )}
-        data-turn-context-id={id}
-        onClick={() => {
-          if (!panel) return setOpen(true);
-          panel.onToggle({ contexts: props.contexts, id });
-        }}
-        title="View context"
-        type="button"
-      >
-        <Layers aria-hidden="true" size={14} strokeWidth={1.8} />
-      </button>
+      <Tooltip>
+        <TooltipTrigger
+          // The open panel keeps focus here. Close the tooltip on click so
+          // Escape reaches the panel.
+          closeOnClick
+          render={
+            <Button
+              aria-haspopup={panel ? undefined : "dialog"}
+              aria-expanded={expanded}
+              aria-label="View turn context"
+              className={cn(
+                "size-6 shrink-0",
+                expanded && "bg-dashboard-fill-strong text-dashboard-text",
+              )}
+              data-turn-context-id={id}
+              onClick={() => {
+                if (!panel) return setOpen(true);
+                panel.onToggle({ contexts: props.contexts, id });
+              }}
+              size="icon"
+            >
+              <Layers aria-hidden="true" size={14} strokeWidth={1.8} />
+            </Button>
+          }
+        />
+        <TooltipContent size="compact">View turn context</TooltipContent>
+      </Tooltip>
 
       {!panel && open
         ? createPortal(
@@ -189,15 +205,17 @@ function MemoryRecall(props: {
   return (
     <div className="overflow-hidden rounded-lg border border-dashboard-border-strong">
       {props.memories.map((memory, index) => (
-        <details
-          className="group/memory border-t border-dashboard-border-strong first:border-t-0"
+        <Collapsible
+          className="border-t border-dashboard-border-strong first:border-t-0"
           key={memory.id}
         >
-          <TranscriptSummary className="flex items-start gap-2.5">
+          <TranscriptSummaryTrigger className="group flex items-start gap-2.5">
             <ChevronRight
               aria-hidden="true"
-              className="mt-0.5 shrink-0 text-dashboard-text-muted transition-transform group-open/memory:rotate-90"
-              size={15}
+              className={cn(
+                dashboardDisclosureChevronClass,
+                "mt-0.5 text-dashboard-text-muted",
+              )}
             />
             <span className="min-w-0 flex-1">
               <span className="flex items-center justify-between gap-3">
@@ -212,39 +230,43 @@ function MemoryRecall(props: {
                 <HighlightText text={memory.content} />
               </span>
             </span>
-          </TranscriptSummary>
-
-          <div className="border-t border-dashboard-border bg-dashboard-fill-faint px-4 py-4">
-            <div className="whitespace-pre-wrap text-sm leading-6 text-dashboard-text">
-              <HighlightText text={memory.content} />
-            </div>
+          </TranscriptSummaryTrigger>
 
-            <dl className="mt-4 grid gap-2 text-xs">
-              <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
-                <dt className="text-dashboard-text-muted">Memory ID</dt>
-                <dd className="m-0 break-all font-mono text-dashboard-text-muted">
-                  <HighlightText text={memory.id} />
-                </dd>
-              </div>
-              <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
-                <dt className="text-dashboard-text-muted">Observed</dt>
-                <dd className="m-0 text-dashboard-text-muted">
-                  {formatTime(new Date(memory.observedAtMs).toISOString())}
-                </dd>
-              </div>
-              <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
-                <dt className="text-dashboard-text-muted">Scope</dt>
-                <dd className="m-0 text-dashboard-text-muted">
-                  {memory.scope}
-                </dd>
-              </div>
-              <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
-                <dt className="text-dashboard-text-muted">Kind</dt>
-                <dd className="m-0 text-dashboard-text-muted">{memory.kind}</dd>
+          <CollapsibleContent hiddenUntilFound>
+            <div className="border-t border-dashboard-border bg-dashboard-fill-faint px-4 py-4">
+              <div className="whitespace-pre-wrap text-sm leading-6 text-dashboard-text">
+                <HighlightText text={memory.content} />
               </div>
-            </dl>
-          </div>
-        </details>
+
+              <dl className="mt-4 grid gap-2 text-xs">
+                <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
+                  <dt className="text-dashboard-text-muted">Memory ID</dt>
+                  <dd className="m-0 break-all font-mono text-dashboard-text-muted">
+                    <HighlightText text={memory.id} />
+                  </dd>
+                </div>
+                <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
+                  <dt className="text-dashboard-text-muted">Observed</dt>
+                  <dd className="m-0 text-dashboard-text-muted">
+                    {formatTime(new Date(memory.observedAtMs).toISOString())}
+                  </dd>
+                </div>
+                <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
+                  <dt className="text-dashboard-text-muted">Scope</dt>
+                  <dd className="m-0 text-dashboard-text-muted">
+                    {memory.scope}
+                  </dd>
+                </div>
+                <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
+                  <dt className="text-dashboard-text-muted">Kind</dt>
+                  <dd className="m-0 text-dashboard-text-muted">
+                    {memory.kind}
+                  </dd>
+                </div>
+              </dl>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
       ))}
       <p className="m-0 border-t border-dashboard-border-strong px-3 py-2 text-xs text-dashboard-text-muted">
         {props.memories.length}{" "}

package/src/client/conversations/TranscriptView.tsx

@@ -1,10 +1,12 @@
 import { useState } from "react";
+import type { ConversationMailboxMessage } from "./conversationOutbox";
 import { ArrowDownToLine } from "lucide-react";
 
 import type {
   ConversationTranscript,
   TranscriptViewSubagentPart,
 } from "../types";
+import { EmptyTelemetry } from "../components/EmptyTelemetry";
 import { Button } from "../components/ui/button";
 import {
   Tooltip,
@@ -20,7 +22,6 @@ import {
   usePinnedTranscriptBottom,
 } from "./transcriptBottomPinning";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
-import { transcriptEmptyClass } from "./transcriptStyles";
 import { TranscriptSearchProvider } from "./transcriptSearch";
 import {
   TurnContextPanelProvider,
@@ -37,6 +38,8 @@ export function Transcript(props: {
   pinRequestVersion?: number;
   onLoadPreviousPage?: () => void;
   onSelectedEventSeqChange?(seq: number | undefined): void;
+  /** The reader's own sends to show at the end until history has them. */
+  pendingMessages?: readonly ConversationMailboxMessage[];
   responding?: boolean;
   search?: string;
   onSearchChange?(value: string): void;
@@ -86,9 +89,9 @@ export function Transcript(props: {
 
   if (!props.transcript) {
     return (
-      <div className={transcriptEmptyClass()}>
+      <EmptyTelemetry>
         No transcript is available for this conversation.
-      </div>
+      </EmptyTelemetry>
     );
   }
 
@@ -139,6 +142,7 @@ export function Transcript(props: {
             <ConversationTranscriptView
               onOpenSubagentTranscript={props.onOpenSubagentTranscript}
               conversation={props.transcript}
+              pendingMessages={props.pendingMessages}
               responding={props.responding ?? props.live ?? false}
             />
           </TurnContextPanelProvider>