@sentry/junior-dashboard 0.266.0 → 0.268.0

package/src/client/conversations/ConversationPage.tsx

@@ -19,6 +19,7 @@ import {
   useAppendConversationMessage,
   useArchiveConversation,
   useCancelConversationPendingMessages,
+  useSteerConversationPendingMessages,
   useConversationData,
   useStopConversationTurn,
   type PendingArchiveConversationUpdate,
@@ -32,7 +33,13 @@ import {
   CONVERSATION_EVENT_PARAM,
   parseConversationEventSeq,
 } from "./conversationRoutes";
-import { ConversationComposer } from "./ConversationComposer";
+import {
+  ConversationComposer,
+  restoreStoredDraftText,
+  type ConversationComposerHandle,
+} from "./ConversationComposer";
+import { readStoredComposerImages } from "./ComposerImages";
+import { useDashboardCoreData } from "../api";
 import { ConversationHeader } from "./ConversationHeader";
 import { ConversationDetails } from "./ConversationDetails";
 import { ConversationEventDetails } from "./ConversationEventDetails";
@@ -66,6 +73,11 @@ import {
   hasConversationUsageBreakdown,
 } from "./ConversationUsageBreakdown";
 import { PendingMailboxStack } from "./PendingMailboxStack";
+import { UserInputRequestCard } from "./UserInputRequestCard";
+import {
+  openUserInputRequest,
+  type OpenUserInputRequest,
+} from "./userInputRequest";
 import {
   buildConversations,
   conversationDetailTitle,
@@ -81,6 +93,7 @@ import {
 } from "../components/ParticipantAvatarStack";
 import { ChatLayout } from "./ChatLayout";
 import { ComposerDock } from "./ComposerDock";
+import { ConversationReviewBar } from "../review-desk/ConversationReviewBar";
 import { Transcript } from "./TranscriptView";
 import { TranscriptLoading } from "./TranscriptLoading";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
@@ -184,6 +197,10 @@ export function ConversationPage(props: {
     () => committedMessageIds(detail.data?.events),
     [detail.data?.events],
   );
+  const userInputRequest = useMemo(
+    () => openUserInputRequest(detail.data?.events),
+    [detail.data?.events],
+  );
   // Cancel needs the latest mailbox watermark, but not as a render prop. Live
   // polls refresh generatedAt every 2s even when the queue is unchanged.
   const pendingGeneratedAtRef = useRef(detail.pendingGeneratedAt);
@@ -434,6 +451,7 @@ export function ConversationPage(props: {
                     loadingPreviousPage={detail.isLoadingPreviousPage}
                     onLoadPreviousPage={detail.loadPreviousPage}
                     onSelectedEventSeqChange={setSelectedEventSeq}
+                    pendingMessages={detail.inlineMessages}
                     pinRequestVersion={pinRequestVersion}
                     responding={
                       !detail.error && conversationIsResponding(transcript)
@@ -466,7 +484,17 @@ export function ConversationPage(props: {
               // every 2s; a prop would bust footer memo while the reader types.
               pendingGeneratedAtRef={pendingGeneratedAtRef}
               pendingMessages={detail.pendingMessages}
+              // Without live history, an inline send would never leave the
+              // transcript tail. A started Turn reads a new send only later.
+              // Keep those sends in the queue. An earlier inline send that
+              // history does not have yet can start that Turn first.
+              sendsInline={
+                detail.data.eventHistory.status === "available" &&
+                !conversationIsResponding(detail.data) &&
+                detail.inlineMessages.length === 0
+              }
               stoppable={live}
+              userInputRequest={userInputRequest}
             />
           ) : undefined
         }
@@ -520,9 +548,11 @@ export function ConversationPage(props: {
       {turnContext ? (
         <TranscriptSearchProvider query={search}>
           <TurnContextDetails
+            actor={turnContext.actor}
             contexts={turnContext.contexts}
             key={turnContext.id}
             onClose={closeTurnContext}
+            timestamp={turnContext.timestamp}
           />
         </TranscriptSearchProvider>
       ) : null}
@@ -548,8 +578,15 @@ const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
   pendingAuthorization?: ConversationPendingMessagesReport["authorization"];
   pendingGeneratedAtRef: { current: string | undefined };
   pendingMessages: readonly ConversationMailboxMessage[];
+  /**
+   * True when history is live and no Turn has started, so the next Turn will
+   * read a new send at once.
+   */
+  sendsInline: boolean;
   /** True while the conversation has a Turn that a stop can end. */
   stoppable: boolean;
+  /** Junior's open question, if no user message answers it yet. */
+  userInputRequest?: OpenUserInputRequest;
 }) {
   const appendMessage = useAppendConversationMessage(props.conversationId);
   const stopTurn = useStopConversationTurn(props.conversationId);
@@ -558,6 +595,9 @@ const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
   const cancelPendingMessages = useCancelConversationPendingMessages(
     props.conversationId,
   );
+  const [editTargetInboundMessageId, setEditTargetInboundMessageId] =
+    useState<string>();
+  const [queueActionError, setQueueActionError] = useState<string>();
   // Keep submit identity stable across mutation status flips so the memoized
   // composer does not re-render while the reader is still typing.
   const appendMessageRef = useRef(appendMessage);
@@ -583,10 +623,21 @@ const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
     if (!window.matchMedia("(max-width: 767px)").matches) return;
     onPinRequestRef.current();
   }, [pendingMessageVersion]);
+  // No Turn runs and nothing waits in the queue, so the next send would
+  // leave the queue almost at once. Show it in the transcript instead. A
+  // conversation can be active before its Turn starts; that still counts.
+  const committedIds = new Set(props.committedMessageIds);
+  const sendInlineRef = useRef(false);
+  sendInlineRef.current =
+    props.sendsInline &&
+    !props.pendingMessages.some(
+      (message) => !committedIds.has(message.messageId),
+    );
   const onSubmit = useCallback(
     async (message: string, idempotencyKey: string, images?: InputImage[]) => {
       await appendMessageRef.current.mutateAsync({
         idempotencyKey,
+        inline: sendInlineRef.current,
         message,
         images,
       });
@@ -608,11 +659,19 @@ const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
       cancelPendingMessagesRef.current.reset();
     }
     if (!stopTurnRef.current.isPending) stopTurnRef.current.reset();
+    setQueueActionError(undefined);
     onPinRequestRef.current();
   }, []);
   const cancellableMessageIds = props.pendingMessages
     .filter((message) => message.clientStatus === undefined)
     .map((message) => message.inboundMessageId);
+  const onAnswerUserInput = useCallback(async (answer: string) => {
+    onPinRequestRef.current();
+    await appendMessageRef.current.mutateAsync({
+      idempotencyKey: crypto.randomUUID(),
+      message: answer,
+    });
+  }, []);
   const onCancelMessage = useCallback(
     (message: ConversationMailboxMessage) => {
       const receivedBefore = props.pendingGeneratedAtRef.current;
@@ -633,6 +692,86 @@ const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
     ),
   );
 
+  // Edit uses its own cancel mutation so remove errors stay on remove.
+  const editCancel = useCancelConversationPendingMessages(props.conversationId);
+  const editCancelRef = useRef(editCancel);
+  editCancelRef.current = editCancel;
+  const editingRef = useRef(false);
+  const composerRef = useRef<ConversationComposerHandle>(null);
+  const viewerEmail = useDashboardCoreData().data?.me.user.email;
+  const onEditMessage = useCallback(
+    async (message: ConversationMailboxMessage) => {
+      const receivedBefore = props.pendingGeneratedAtRef.current;
+      // The image read runs before the cancel starts, so isPending alone does
+      // not stop a second click.
+      if (!receivedBefore || editingRef.current) return;
+      editingRef.current = true;
+      const inboundMessageId = message.inboundMessageId;
+      setEditTargetInboundMessageId(inboundMessageId);
+      setQueueActionError(undefined);
+      try {
+        // Read images first. A failed read must leave the message queued.
+        const images = await readStoredComposerImages(
+          props.conversationId,
+          message.attachments,
+        );
+        // The reader left during the read. Keep the message in the queue.
+        if (!composerRef.current) return;
+        // Check before the cancel. After it, images that do not fit are lost.
+        if (!composerRef.current.canRestoreImages(images)) {
+          setQueueActionError("Remove some draft images to edit that message.");
+          return;
+        }
+        const result = await editCancelRef.current.mutateAsync({
+          inboundMessageIds: [inboundMessageId],
+          receivedBefore,
+        });
+        // Junior can read the message before the cancel lands. Then it is
+        // already in the Conversation and there is nothing to edit.
+        if (!result.cancelledInboundMessageIds.includes(inboundMessageId)) {
+          setQueueActionError("Junior already read that message.");
+          return;
+        }
+        const restored = { images, text: message.text ?? "" };
+        if (composerRef.current) {
+          composerRef.current.restoreMessage(restored);
+        } else {
+          // The reader left during the cancel. Keep the text in the saved
+          // draft so it is there when they come back.
+          restoreStoredDraftText(props.conversationId, restored.text);
+        }
+      } catch {
+        setQueueActionError("Could not edit the queued message. Try again.");
+      } finally {
+        editingRef.current = false;
+        setEditTargetInboundMessageId(undefined);
+      }
+    },
+    [props.conversationId, props.pendingGeneratedAtRef],
+  );
+
+  const steerPendingMessages = useSteerConversationPendingMessages(
+    props.conversationId,
+  );
+  const steerPendingMessagesRef = useRef(steerPendingMessages);
+  steerPendingMessagesRef.current = steerPendingMessages;
+  const onSteerMessage = useCallback((message: ConversationMailboxMessage) => {
+    if (steerPendingMessagesRef.current.isPending) return;
+    setQueueActionError(undefined);
+    steerPendingMessagesRef.current.mutate(
+      { inboundMessageIds: [message.inboundMessageId] },
+      {
+        onError: () =>
+          setQueueActionError(
+            "Could not send the queued message now. Try again.",
+          ),
+      },
+    );
+  }, []);
+  const steerTargetInboundMessageId = steerPendingMessages.isPending
+    ? steerPendingMessages.variables?.inboundMessageIds[0]
+    : undefined;
+
   const onStop = useCallback(async () => {
     const result = await stopTurnRef.current.mutateAsync();
     const restored = result.stoppedMessages.map((message) => message.text);
@@ -657,22 +796,41 @@ const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
           {props.pendingAuthorization ? (
             <PendingAuthorization authorization={props.pendingAuthorization} />
           ) : null}
+          {/* A queued message already answers the question. */}
+          {props.userInputRequest && props.pendingMessages.length === 0 ? (
+            <UserInputRequestCard
+              key={props.userInputRequest.toolCallId}
+              onAnswer={onAnswerUserInput}
+              request={props.userInputRequest}
+            />
+          ) : null}
+          <ConversationReviewBar conversationId={props.conversationId} />
           <PendingMailboxStack
             cancelError={cancelError}
             cancelPending={cancelPendingMessages.isPending}
             cancelTargetInboundMessageId={cancelTargetInboundMessageId}
             committedMessageIds={props.committedMessageIds}
+            conversationId={props.conversationId}
+            editTargetInboundMessageId={editTargetInboundMessageId}
             messages={props.pendingMessages}
             onCancelMessage={onCancelMessage}
+            onEditMessage={onEditMessage}
             onLayoutChange={onMailboxLayoutChange}
             onRetry={onRetry}
+            onSteerMessage={props.stoppable ? onSteerMessage : undefined}
+            steerTargetInboundMessageId={steerTargetInboundMessageId}
+            viewerEmail={viewerEmail}
           />
         </>
       }
     >
       <ConversationComposer
         draftId={props.conversationId}
-        error={stopTurn.error ? "Could not stop Junior. Try again." : undefined}
+        error={
+          queueActionError ??
+          (stopTurn.error ? "Could not stop Junior. Try again." : undefined)
+        }
+        ref={composerRef}
         label="Continue this conversation"
         submitLabel="Send"
         onFocus={onComposerFocus}

package/src/client/conversations/ConversationSidebar.tsx

@@ -48,6 +48,7 @@ export function ConversationSidebar(props: {
   query: string;
   selectedId?: string;
   timeZone: string;
+  waitingConversationIds: ReadonlySet<string>;
   /**
    * `panel` = split-pane dock with internal scroll.
    * `landing` = flow nav under create compose (parent owns scroll).
@@ -186,6 +187,9 @@ export function ConversationSidebar(props: {
                   onArchiveError={handleArchiveError}
                   onArchived={handleArchived}
                   selected={entry.conversation.id === props.selectedId}
+                  waitingOnViewer={props.waitingConversationIds.has(
+                    entry.conversation.id,
+                  )}
                 />
               )
             }
@@ -271,6 +275,7 @@ const ConversationSidebarRow = memo(function ConversationSidebarRow(props: {
   onArchiveError(conversation: Conversation, wasArchiving: boolean): void;
   onArchived(conversation: Conversation): void;
   selected: boolean;
+  waitingOnViewer: boolean;
 }) {
   const archive = useArchiveConversation(props.conversation.id, {
     // Read the attempted direction from the mutation call, not the (possibly
@@ -316,6 +321,7 @@ const ConversationSidebarRow = memo(function ConversationSidebarRow(props: {
               finishedSinceSeen={props.finishedSinceSeen}
               isPrivate={isPrivate}
               status={status}
+              waitingOnViewer={props.waitingOnViewer}
             />
           </div>
           <div className="col-start-2 row-start-1 min-w-0 truncate font-sans text-sm font-medium leading-snug text-dashboard-text">

package/src/client/conversations/ConversationTranscript.tsx

@@ -1,7 +1,16 @@
 import { memo, useMemo, useRef, type ReactNode } from "react";
+import { History } from "lucide-react";
+import type { ConversationMailboxMessage } from "./conversationOutbox";
 
+import { EmptyTelemetry } from "../components/EmptyTelemetry";
+import {
+  Empty,
+  EmptyDescription,
+  EmptyMedia,
+  EmptyTitle,
+} from "../components/ui/empty";
 import { Card } from "../components/layout/Card";
-import { unavailableTranscriptLabel } from "../format";
+import { formatTime, unavailableTranscriptLabel } from "../format";
 import { ConversationBrief } from "./ConversationBrief";
 import { transcriptMessagesFromEvents } from "./eventTranscript";
 import type {
@@ -39,7 +48,6 @@ import {
   groupTranscriptMessages,
   type RenderedTranscriptEntry,
 } from "./transcriptRenderModel";
-import { transcriptEmptyClass } from "./transcriptStyles";
 import { entryMatchesSearch, useTranscriptSearch } from "./transcriptSearch";
 import { TranscriptRow, TranscriptRows } from "./TranscriptRows";
 import { TranscriptTimestampProvider } from "./TranscriptTimestamp";
@@ -74,13 +82,20 @@ export const ConversationTranscriptView = memo(
       conversation: ConversationTranscript;
     }) => void;
     conversation: ConversationTranscript;
+    /** Sends that history does not have yet. History wins on message id. */
+    pendingMessages?: readonly ConversationMailboxMessage[];
     responding?: boolean;
   }) {
     // Cards can change while their Message events stay unchanged.
     const { events, annotations } = props.conversation;
     const messages = useMemo(
-      () => transcriptMessagesFromEvents(events, annotations),
-      [events, annotations],
+      () =>
+        transcriptMessagesFromEvents(
+          events,
+          annotations,
+          props.pendingMessages,
+        ),
+      [events, annotations, props.pendingMessages],
     );
 
     return (
@@ -110,7 +125,10 @@ function SegmentEvents(props: {
   return (
     <TranscriptRows>
       {props.conversation.eventHistory.status === "expired" ? (
-        <ExpiredTranscriptView conversation={props.conversation} />
+        <ExpiredTranscriptView
+          brief={props.conversation.brief}
+          expiredAt={props.conversation.eventHistory.expiredAt}
+        />
       ) : props.conversation.eventHistory.status === "available" ? (
         <VisibleTranscriptEntries
           onOpenSubagentTranscript={props.onOpenSubagentTranscript}
@@ -131,9 +149,9 @@ function SegmentEvents(props: {
           conversation={props.conversation}
         />
       ) : (
-        <div className={transcriptEmptyClass()}>
+        <EmptyTelemetry>
           {unavailableTranscriptLabel(props.conversation)}
-        </div>
+        </EmptyTelemetry>
       )}
       {props.responding ? (
         <TranscriptRow indent>
@@ -145,21 +163,37 @@ function SegmentEvents(props: {
 }
 
 function ExpiredTranscriptView(props: {
-  conversation: ConversationTranscript;
+  brief: ConversationTranscript["brief"];
+  expiredAt: string;
 }) {
   return (
     <>
-      {props.conversation.brief ? (
+      {props.brief ? (
         <Card as="section" padding="md" variant="section">
           <h3 className="mt-0 mb-3 font-display text-lg font-medium text-dashboard-text">
             Brief
           </h3>
-          <ConversationBrief brief={props.conversation.brief} />
+          <ConversationBrief brief={props.brief} />
         </Card>
       ) : null}
-      <div className={transcriptEmptyClass()}>
-        {unavailableTranscriptLabel(props.conversation)}
-      </div>
+      <Empty className="flex items-start gap-3 border-dashed border-dashboard-border-emphasis bg-dashboard-fill-soft">
+        <EmptyMedia>
+          <History />
+        </EmptyMedia>
+        <div className="min-w-0">
+          <EmptyTitle>Transcript expired</EmptyTitle>
+          <EmptyDescription className="mt-1 text-sm">
+            The retention policy removed these events on{" "}
+            <time dateTime={props.expiredAt}>
+              {formatTime(props.expiredAt, {
+                dateStyle: "medium",
+                timeStyle: "short",
+              })}
+            </time>
+            .{props.brief ? " The brief above is still available." : null}
+          </EmptyDescription>
+        </div>
+      </Empty>
     </>
   );
 }
@@ -348,9 +382,7 @@ function TranscriptEntryList(props: {
   }
 
   if (search.active && rows.length === 0) {
-    return (
-      <div className={transcriptEmptyClass()}>No events match your search.</div>
-    );
+    return <EmptyTelemetry>No events match your search.</EmptyTelemetry>;
   }
 
   // Let rows participate in the parent transcript stack so messages, tool

package/src/client/conversations/ConversationWorkspace.tsx

@@ -20,6 +20,7 @@ import { buildConversations, getDashboardTimeZone } from "../format";
 import { useDebouncedValue } from "../debouncedValue";
 import type { Conversation } from "../types";
 import { ConversationPage } from "./ConversationPage";
+import { useWaitingConversationIds } from "../review-desk/queries";
 import { useConversationFinishedIndicators } from "./useConversationFinishedIndicators";
 
 const CONVERSATION_PAGE_SIZE = 20;
@@ -61,6 +62,7 @@ export function ConversationWorkspace() {
   useEffect(() => {
     if (page > totalPages) setPage(totalPages);
   }, [page, totalPages]);
+  const waitingConversationIds = useWaitingConversationIds();
   const { finishedConversationIds, markRead } =
     useConversationFinishedIndicators(
       conversations,
@@ -107,6 +109,7 @@ export function ConversationWorkspace() {
               finishedConversationIds={finishedConversationIds}
               loading={feed.isPending}
               timeZone={getDashboardTimeZone()}
+              waitingConversationIds={waitingConversationIds}
             />
             <PagePagination
               className="pt-1"
@@ -135,6 +138,7 @@ export function ConversationWorkspace() {
           query={query}
           selectedId={selectedId}
           timeZone={getDashboardTimeZone()}
+          waitingConversationIds={waitingConversationIds}
         />
       </div>
       <section

package/src/client/conversations/DetailsList.tsx

@@ -3,6 +3,39 @@ import { useState, type ReactNode } from "react";
 
 import { cn, dashboardDisclosureChevronClass } from "../styles";
 
+/**
+ * Group one kind of detail in a compact card. Conversation details and event
+ * details share it, so both panels read the same way. A `label` names the
+ * card as a region.
+ */
+export function DetailsCard(props: {
+  children: ReactNode;
+  count?: number;
+  label?: string;
+  title?: string;
+}) {
+  return (
+    <section
+      aria-label={props.label}
+      className="grid min-w-0 gap-2.5 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface-panel p-3"
+    >
+      {props.title ? (
+        <h3 className="m-0 flex min-w-0 items-center gap-1.5 break-words font-sans text-xs font-medium text-dashboard-text-muted">
+          {props.title}
+          {props.count ? (
+            <span className="tabular-nums text-dashboard-text-faint">
+              {props.count.toLocaleString("en-US")}
+            </span>
+          ) : null}
+        </h3>
+      ) : null}
+      <div className="min-w-0 break-words font-sans text-xs leading-relaxed text-dashboard-text-muted">
+        {props.children}
+      </div>
+    </section>
+  );
+}
+
 /** Rows a details list shows before the reader asks for the rest. */
 const COLLAPSED_ROW_COUNT = 3;
 

package/src/client/conversations/EventDetails.tsx

@@ -12,6 +12,7 @@ import {
 import { dashboardDisclosureChevronClass } from "../styles";
 
 import { RedactedMarker } from "./TranscriptRedacted";
+import { DetailsCard } from "./DetailsList";
 import { TranscriptText } from "./TranscriptText";
 import { eventLogModel } from "./eventLog";
 import { formatCostBreakdown } from "../format";
@@ -61,7 +62,9 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
       content = (
         <>
           {Object.keys(metadata).length > 0 ? (
-            <DetailValue value={metadata} />
+            <DetailSection>
+              <DetailValue value={metadata} />
+            </DetailSection>
           ) : null}
           {summary ? (
             <DetailSection title="Continuation summary">
@@ -76,7 +79,9 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
       const { type: _, text, redacted, ...metadata } = data;
       content = (
         <>
-          <DetailValue value={metadata} />
+          <DetailSection>
+            <DetailValue value={metadata} />
+          </DetailSection>
           <DetailSection title="Message">
             {redacted ? (
               <RedactedMarker />
@@ -97,14 +102,14 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
               <DetailSection key={call.toolCallId} title={name}>
                 <DetailValue value={metadata} />
                 {input !== undefined ? (
-                  <DetailSection title="Input">
+                  <DetailSubsection title="Input">
                     <DetailValue value={input} />
-                  </DetailSection>
+                  </DetailSubsection>
                 ) : null}
                 {output !== undefined ? (
-                  <DetailSection title="Output">
+                  <DetailSubsection title="Output">
                     <DetailValue value={output} />
-                  </DetailSection>
+                  </DetailSubsection>
                 ) : null}
               </DetailSection>
             );
@@ -132,13 +137,15 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
       const { type: _, presentation, ...metadata } = data;
       content = (
         <>
-          <DetailValue value={metadata} />
+          <DetailSection>
+            <DetailValue value={metadata} />
+          </DetailSection>
           <DetailSection title={presentation.title}>
             {presentation.preview ? (
               <TranscriptText mentions={mentions} text={presentation.preview} />
             ) : null}
             {presentation.details?.map((detail, index) => (
-              <DetailSection key={index} title={detail.title}>
+              <DetailSubsection key={index} title={detail.title}>
                 {detail.description ? (
                   <TranscriptText
                     mentions={mentions}
@@ -149,7 +156,7 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
                 {detail.metadata ? (
                   <DetailValue value={detail.metadata} />
                 ) : null}
-              </DetailSection>
+              </DetailSubsection>
             ))}
           </DetailSection>
         </>
@@ -158,12 +165,16 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
     }
     default: {
       const { type: _, ...fields } = data;
-      content = <DetailValue value={fields} />;
+      content = (
+        <DetailSection>
+          <DetailValue value={fields} />
+        </DetailSection>
+      );
     }
   }
 
   return (
-    <div className="@container grid min-w-0 gap-6">
+    <div className="@container grid min-w-0 gap-3">
       <DetailSection
         title={
           data.type === "handoff" ? "Target configuration" : "Configuration"
@@ -197,7 +208,7 @@ function RawEventJson({ event }: { event: ConversationReportEvent }) {
   const [open, setOpen] = useState(false);
   const json = open ? JSON.stringify(event, null, 2) : "";
   return (
-    <div className="relative min-w-0 border-t border-dashboard-border pt-4">
+    <div className="relative min-w-0">
       <Collapsible onOpenChange={setOpen} open={open}>
         <CollapsibleTrigger className="group flex min-h-9 cursor-pointer items-center gap-1 pr-12 text-xs text-dashboard-text-muted hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-dashboard-focus">
           <ChevronRight
@@ -207,7 +218,7 @@ function RawEventJson({ event }: { event: ConversationReportEvent }) {
           Raw JSON
         </CollapsibleTrigger>
         <CollapsibleContent>
-          <div className="absolute right-0 top-4">
+          <div className="absolute right-0 top-0">
             <CopyButton getText={() => json} label="Copy JSON" />
           </div>
           <div
@@ -224,12 +235,28 @@ function RawEventJson({ event }: { event: ConversationReportEvent }) {
   );
 }
 
-function DetailSection(props: { title: string; children: ReactNode }) {
+// Top-level groups use the conversation details card. A titled card is a
+// region, so readers can jump to a section such as "Message".
+function DetailSection(props: { title?: string; children: ReactNode }) {
+  return (
+    <DetailsCard label={props.title} title={props.title}>
+      <div className="grid min-w-0 gap-3 text-sm text-dashboard-text">
+        {props.children}
+      </div>
+    </DetailsCard>
+  );
+}
+
+// A group inside a card, such as a tool input. It does not nest another card.
+function DetailSubsection(props: { title: string; children: ReactNode }) {
   return (
-    <section aria-label={props.title} className="grid min-w-0 gap-2">
-      <h3 className="m-0 border-b border-dashboard-border pb-2 text-sm font-semibold text-dashboard-text">
+    <section
+      aria-label={props.title}
+      className="grid min-w-0 gap-1.5 border-t border-dashboard-border-subtle pt-3"
+    >
+      <h4 className="m-0 font-sans text-xs font-medium text-dashboard-text-muted">
         {props.title}
-      </h3>
+      </h4>
       {props.children}
     </section>
   );
@@ -275,8 +302,8 @@ function DetailValue({ value }: { value: unknown }) {
               key={key}
               className={
                 nested
-                  ? "grid min-w-0 gap-2 py-2"
-                  : "grid min-w-0 grid-cols-[minmax(0,7rem)_minmax(0,1fr)] items-baseline gap-x-4 py-2 @min-[30rem]:grid-cols-[minmax(0,10rem)_minmax(0,1fr)]"
+                  ? "grid min-w-0 gap-2 py-2 first:pt-0 last:pb-0"
+                  : "grid min-w-0 grid-cols-[minmax(0,7rem)_minmax(0,1fr)] items-baseline gap-x-4 py-2 first:pt-0 last:pb-0 @min-[30rem]:grid-cols-[minmax(0,10rem)_minmax(0,1fr)]"
               }
             >
               <dt className="break-words text-xs leading-relaxed text-dashboard-text-muted">