@sentry/junior-dashboard 0.280.0 → 0.281.0

package/src/client/conversations/ConversationUsageBreakdown.tsx

@@ -1,18 +1,24 @@
-import type {
-  ConversationDetailReport,
-  ConversationModelUsage,
-} from "@sentry/junior/api/schema";
+import type { ConversationDetailReport } from "@sentry/junior/api/schema";
+import { ChevronRight } from "lucide-react";
 import type { ReactNode } from "react";
 
 import {
   formatCompactNumber,
+  formatCostSummary,
   summarizeCost,
   summarizeModelCost,
   summarizeModelUsage,
   summarizeUsage,
   totalConversationCost,
+  type CostUsageSummary,
+  type TokenUsageSummary,
 } from "../format";
 import { ShimmerText } from "../components/ShimmerText";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../components/ui/collapsible";
 import {
   Table,
   TableBody,
@@ -22,7 +28,7 @@ import {
   TableHeader,
   TableRow,
 } from "../components/ui/table";
-import { cn } from "../styles";
+import { cn, dashboardDisclosureChevronClass } from "../styles";
 import type { Conversation } from "../types";
 import { liveModelId } from "./ConversationMeta";
 import {
@@ -31,7 +37,6 @@ import {
   modelLabel,
   subagentShare,
   subagentUsage,
-  tokenTypeRows,
 } from "./TelemetryMetrics";
 
 /** One token type of a model, shown as an indented row under the model. */
@@ -52,31 +57,33 @@ type BreakdownRow = {
 const NOT_RECORDED = "—";
 
 /**
- * List each recorded token type of one model with its own count and, when
- * the provider reports it, its own cost. Reasoning tokens are part of the
- * output tokens, so they have no cost of their own.
+ * Show token types with a recorded count or cost. Reasoning tokens are part
+ * of output tokens and have no cost of their own.
  */
 function tokenTypeParts(
-  usage: ConversationModelUsage["usage"],
+  tokens: TokenUsageSummary | undefined,
+  costs: CostUsageSummary | undefined,
   formatCost: (value: number) => string,
 ): BreakdownPart[] | undefined {
-  const summary = summarizeUsage(usage);
-  if (!summary) return undefined;
-  const cost = summarizeCost(usage);
-  const costs: Readonly<Record<string, number | undefined>> = {
-    cached: cost?.cacheRead,
-    "cache write": cost?.cacheWrite,
-    input: cost?.input,
-    output: cost?.output,
-  };
-  const parts = tokenTypeRows(summary).map((row) => {
-    const value = costs[row.label];
-    return {
-      cost: value === undefined ? undefined : formatCost(value),
-      count: row.value,
-      label: row.label === "reasoning" ? "reasoning (in output)" : row.label,
-    };
-  });
+  const types = [
+    ["input", tokens?.inputTokens, costs?.input],
+    ["output", tokens?.outputTokens, costs?.output],
+    ["cached", tokens?.cachedInputTokens, costs?.cacheRead],
+    ["cache write", tokens?.cacheCreationTokens, costs?.cacheWrite],
+    ["reasoning (in output)", tokens?.reasoningTokens, undefined],
+  ] as const;
+  const parts = types.flatMap(([label, count, cost]) =>
+    count || cost !== undefined
+      ? [
+          {
+            cost: cost === undefined ? undefined : formatCost(cost),
+            count:
+              count === undefined ? NOT_RECORDED : formatCompactNumber(count),
+            label,
+          },
+        ]
+      : [],
+  );
   return parts.length ? parts : undefined;
 }
 
@@ -224,10 +231,8 @@ export function hasConversationUsageBreakdown(props: {
 }
 
 /**
- * Break a Conversation's usage down by agent, model, and auxiliary
- * operation. The header tooltips show only the largest items; this lists
- * every one with its token types. Render nothing without model or auxiliary
- * usage.
+ * Summarize usage and let the reader inspect the breakdown by agent, model,
+ * and auxiliary operation.
  */
 export function ConversationUsageBreakdown(props: {
   conversation: Conversation | undefined;
@@ -243,11 +248,16 @@ export function ConversationUsageBreakdown(props: {
     props.detail?.cumulativeUsage ?? props.conversation.cumulativeUsage;
   const childAgentTotals =
     props.detail?.childAgentTotals ?? props.conversation.childAgentTotals;
-  const tokens =
-    summarizeModelUsage(modelUsage)?.totalTokens ??
-    summarizeUsage(usage)?.totalTokens;
-  const modelCost = summarizeModelCost(modelUsage) ?? summarizeCost(usage);
-  const cost = totalConversationCost(modelCost, auxiliaryCosts)?.total;
+  const modelTokens = summarizeModelUsage(modelUsage);
+  const savedTokens = summarizeUsage(usage);
+  const tokens = (modelTokens ?? savedTokens)?.totalTokens;
+  const modelCost = summarizeModelCost(modelUsage);
+  const savedCost = summarizeCost(usage);
+  const totalCost = totalConversationCost(
+    modelCost ?? savedCost,
+    auxiliaryCosts,
+  );
+  const cost = totalCost?.total;
   const operations = [...(auxiliaryCosts?.operations ?? [])].sort(
     (a, b) => b.costUsd - a.costUsd,
   );
@@ -257,17 +267,38 @@ export function ConversationUsageBreakdown(props: {
   const formatMaybeCost = (value: number | undefined) =>
     value === undefined ? NOT_RECORDED : formatCost(value);
   const activeModelId = liveModelId(props.detail);
+  const live = (props.detail?.status ?? props.conversation.status) === "active";
+  const aggregateTokenTypes = tokenTypeParts(
+    modelTokens ? undefined : savedTokens,
+    modelCost ? undefined : savedCost,
+    formatCost,
+  );
+  const compactions = props.detail?.previousCursor
+    ? undefined
+    : props.detail?.events.filter((event) => event.data.type === "compaction")
+        .length;
 
   const models = modelUsage
     .map((item) => ({
-      cost: summarizeCost(item.usage)?.total,
-      item,
-      tokens: summarizeUsage(item.usage)?.totalTokens,
+      cost: summarizeCost(item.usage),
+      modelId: item.modelId,
+      tokens: summarizeUsage(item.usage),
     }))
     .sort(
       (a, b) =>
-        (b.cost ?? 0) - (a.cost ?? 0) || (b.tokens ?? 0) - (a.tokens ?? 0),
+        (b.cost?.total ?? 0) - (a.cost?.total ?? 0) ||
+        (b.tokens?.totalTokens ?? 0) - (a.tokens?.totalTokens ?? 0),
     );
+  if (
+    activeModelId &&
+    !models.some((model) => model.modelId === activeModelId)
+  ) {
+    models.unshift({
+      cost: undefined,
+      modelId: activeModelId,
+      tokens: undefined,
+    });
+  }
 
   const subagents = subagentUsage(childAgentTotals);
   const subagentCost = subagentShare(subagents.cost, cost ?? subagents.cost);
@@ -276,8 +307,8 @@ export function ConversationUsageBreakdown(props: {
     tokens ?? subagents.tokens,
   );
 
-  return (
-    <div className="grid min-w-0 gap-5">
+  const breakdown = (
+    <div className="grid min-w-0 gap-5 px-1 pb-2.5">
       {childAgentTotals ? (
         <BreakdownTable
           countLabel="Tokens"
@@ -311,38 +342,51 @@ export function ConversationUsageBreakdown(props: {
         <BreakdownTable
           countLabel="Tokens"
           label="Model"
-          rows={models.map(({ cost: itemCost, item, tokens: itemTokens }) => ({
-            cost: formatMaybeCost(itemCost),
-            count: formatTokens(itemTokens),
-            key: item.modelId,
-            label: (
-              <span className="flex min-w-0 items-baseline gap-2">
-                <span
-                  className="min-w-0 truncate font-mono"
-                  title={item.modelId}
-                >
-                  {modelLabel(item.modelId)}
-                </span>
-                {item.modelId === activeModelId ? (
-                  <span className="shrink-0 text-dashboard-text-muted">
-                    <ShimmerText active>in progress</ShimmerText>
+          rows={models.map(({ cost, modelId, tokens }) => {
+            const active = modelId === activeModelId;
+            return {
+              cost: active && !cost ? "…" : formatMaybeCost(cost?.total),
+              count:
+                active && !tokens ? "…" : formatTokens(tokens?.totalTokens),
+              key: modelId,
+              label: (
+                <span className="flex min-w-0 items-baseline gap-2">
+                  <span className="min-w-0 truncate font-mono" title={modelId}>
+                    {modelLabel(modelId)}
                   </span>
-                ) : null}
-              </span>
-            ),
-            parts: tokenTypeParts(item.usage, formatCost),
-          }))}
+                  {active ? (
+                    <span className="shrink-0 text-dashboard-text-muted">
+                      <ShimmerText active>in progress</ShimmerText>
+                    </span>
+                  ) : null}
+                </span>
+              ),
+              parts: tokenTypeParts(tokens, cost, formatCost),
+            };
+          })}
           total={
-            models.length > 1
+            modelUsage.length > 1
               ? {
                   cost: formatMaybeCost(modelCost?.total),
-                  count: formatTokens(tokens),
+                  count: formatTokens(modelTokens?.totalTokens),
                   label: "All models",
                 }
               : undefined
           }
         />
       ) : null}
+      {aggregateTokenTypes ? (
+        <BreakdownTable
+          countLabel="Tokens"
+          label="Token type"
+          rows={aggregateTokenTypes.map((part) => ({
+            cost: part.cost ?? NOT_RECORDED,
+            count: part.count,
+            key: part.label,
+            label: part.label,
+          }))}
+        />
+      ) : null}
       {auxiliaryCosts && operations.length ? (
         <BreakdownTable
           countLabel="Calls"
@@ -369,7 +413,41 @@ export function ConversationUsageBreakdown(props: {
       <p className="m-0 text-xs leading-relaxed text-dashboard-text-muted">
         Estimated costs.
         {childAgentTotals ? " Totals include subagents at any depth." : null}
+        {compactions
+          ? ` ${formatCompactNumber(compactions)} compaction${compactions === 1 ? "" : "s"}.`
+          : null}
       </p>
     </div>
   );
+
+  const summary = [
+    tokens === undefined ? undefined : `${formatTokens(tokens)} tokens`,
+    totalCost
+      ? `${formatCostSummary(totalCost)}${live ? "+" : ""}`
+      : live
+        ? "$…"
+        : undefined,
+  ]
+    .filter(Boolean)
+    .join(" · ");
+
+  return (
+    <Collapsible className="min-w-0 border-t border-dashboard-border-subtle">
+      <h3 className="m-0">
+        <CollapsibleTrigger className="group flex min-h-9 w-full min-w-0 cursor-pointer items-center gap-1.5 rounded-md px-1 py-2 text-left font-sans text-xs font-medium text-dashboard-text-muted transition-colors hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-dashboard-focus">
+          <ChevronRight
+            aria-hidden="true"
+            className={dashboardDisclosureChevronClass}
+          />
+          Usage
+          {summary ? (
+            <span className="ml-auto font-normal tabular-nums">
+              <ShimmerText active={live}>{summary}</ShimmerText>
+            </span>
+          ) : null}
+        </CollapsibleTrigger>
+      </h3>
+      <CollapsibleContent hiddenUntilFound>{breakdown}</CollapsibleContent>
+    </Collapsible>
+  );
 }

package/src/client/conversations/DetailsList.tsx

@@ -12,13 +12,19 @@ import { cn, dashboardDisclosureChevronClass } from "../styles";
 export function DetailsCard(props: {
   children: ReactNode;
   count?: number;
+  flat?: boolean;
   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"
+      className={cn(
+        "grid min-w-0 gap-2.5 border-dashboard-border-subtle",
+        props.flat
+          ? "border-t px-1 py-2.5"
+          : "rounded-lg border 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">

package/src/client/conversations/PendingMailboxStack.tsx

@@ -1,5 +1,6 @@
 import {
   memo,
+  useId,
   useLayoutEffect,
   useRef,
   useState,
@@ -12,6 +13,7 @@ import {
 } from "@sentry/junior/api/schema";
 import {
   AlertCircle,
+  ChevronRight,
   Clock3,
   FileText,
   Pencil,
@@ -44,6 +46,7 @@ import { SlackMark } from "./SlackMark";
 import { DisplayText } from "../display-text/DisplayText";
 import { ReviewItemChangeLabel } from "../review-desk/ReviewItemChangeRow";
 import { displayPlainText } from "../display-text/plainText";
+import { cn, dashboardDisclosureChevronClass } from "../styles";
 
 // Rows are one line each, so the stack can show five before it collapses.
 const MAX_EXPANDED_PENDING_ROWS = 5;
@@ -306,6 +309,7 @@ function PendingRow(props: {
   cancelPending: boolean;
   canEdit: boolean;
   canSteer: boolean;
+  className: string;
   conversationId?: string;
   editPending: boolean;
   message: ConversationMailboxMessage;
@@ -319,13 +323,14 @@ function PendingRow(props: {
   const mentions = props.message.mentions ?? [];
   const redacted = Boolean(props.message.redacted);
   const showSlack = props.message.source === "slack";
-  const canRetry =
-    props.message.clientStatus === "failed" &&
-    Boolean(props.message.idempotencyKey) &&
-    Boolean(props.onRetry);
 
   return (
-    <article className="grid min-w-0 grid-cols-[minmax(0,1fr)] gap-1 px-3 py-1.5 text-dashboard-text md:px-3.5">
+    <article
+      className={cn(
+        "min-w-0 grid-cols-[minmax(0,1fr)] gap-1 px-3 py-1.5 text-dashboard-text md:px-3.5",
+        props.className,
+      )}
+    >
       <TranscriptHeadingRow
         className="items-center"
         left={
@@ -390,7 +395,7 @@ function PendingRow(props: {
           />
         }
       />
-      {canRetry ? (
+      {props.onRetry ? (
         <div className="flex min-w-0 items-center gap-2">
           <p className="m-0 font-sans text-xs text-red-300/80">
             Could not send.
@@ -414,36 +419,42 @@ function PendingRow(props: {
 }
 
 function ExpandQueuedMessagesButton(props: {
+  className?: string;
+  controls: string;
   expanded: boolean;
-  hiddenCount: number;
   onClick(): void;
+  tallHiddenCount: number;
   totalCount: number;
 }) {
-  const totalLabel =
-    props.totalCount === 1
-      ? "1 queued message"
-      : `${props.totalCount} queued messages`;
-  const moreLabel =
-    props.hiddenCount > 0
-      ? `${props.hiddenCount} more queued messages`
-      : totalLabel;
-  // Mobile collapses previews and uses the total count as the expand control.
-  const mobileCollapsedLabel = totalLabel;
-  const label = props.expanded ? "Show fewer queued messages" : moreLabel;
-
   return (
     <button
+      aria-controls={props.controls}
       aria-expanded={props.expanded}
-      className="w-full cursor-pointer border-0 bg-transparent px-3 py-2 text-left font-sans text-xs font-medium text-amber-100/80 transition-colors hover:text-amber-50 focus-visible:outline focus-visible:outline-1 focus-visible:outline-amber-200/55 md:px-3.5"
+      className={cn(
+        "group flex w-full cursor-pointer items-center gap-1.5 border-0 bg-transparent px-3 py-2 text-left font-sans text-xs font-medium text-amber-100/80 transition-colors hover:text-amber-50 focus-visible:outline focus-visible:outline-1 focus-visible:outline-amber-200/55 md:px-3.5",
+        props.className,
+      )}
       onClick={props.onClick}
       type="button"
     >
+      <ChevronRight
+        aria-hidden="true"
+        className={dashboardDisclosureChevronClass}
+      />
       {props.expanded ? (
-        label
+        "Show fewer queued messages"
       ) : (
         <>
-          <span className="md:hidden">{mobileCollapsedLabel}</span>
-          <span className="hidden md:inline">{moreLabel}</span>
+          <span className="md:tall:hidden">
+            {props.totalCount} queued messages
+          </span>
+          {props.tallHiddenCount > 0 ? (
+            <span className="hidden md:tall:inline">
+              {props.tallHiddenCount === 1
+                ? "1 more queued message"
+                : `${props.tallHiddenCount} more queued messages`}
+            </span>
+          ) : null}
         </>
       )}
     </button>
@@ -484,6 +495,7 @@ export const PendingMailboxStack = memo(function PendingMailboxStack(props: {
   viewerEmail?: string;
 }): ReactNode {
   const [expanded, setExpanded] = useState(false);
+  const rowsId = useId();
   const onLayoutChangeRef = useRef(props.onLayoutChange);
   onLayoutChangeRef.current = props.onLayoutChange;
   const hasMountedExpandedRef = useRef(false);
@@ -500,24 +512,46 @@ export const PendingMailboxStack = memo(function PendingMailboxStack(props: {
   // Preserve mailbox order and clientStatus from the merged source rows.
   // History wins on messageId so a send does not appear twice once workers
   // persist the user message.
-  const rows = props.messages.filter(
-    (message) => !committedIds.has(message.messageId),
-  );
+  const rows = props.messages
+    .filter((message) => !committedIds.has(message.messageId))
+    .map((message) => {
+      const cancelError = Boolean(
+        props.cancelError &&
+        props.cancelTargetInboundMessageId === message.inboundMessageId,
+      );
+      const retry =
+        message.clientStatus === "failed" && message.idempotencyKey
+          ? props.onRetry
+          : undefined;
+      return {
+        cancelError,
+        message,
+        retry,
+        needsAttention: cancelError || !!retry,
+      };
+    });
   if (rows.length === 0) return null;
 
-  const canCollapse = rows.length > MAX_EXPANDED_PENDING_ROWS;
-  const showCollapsed = canCollapse && !expanded;
-  const previewRows = rows.slice(0, COLLAPSED_PENDING_ROW_COUNT);
-  const visibleRows = showCollapsed ? previewRows : rows;
-  const hiddenCount = Math.max(0, rows.length - COLLAPSED_PENDING_ROW_COUNT);
+  const longQueue = rows.length > MAX_EXPANDED_PENDING_ROWS;
+  const canCollapse =
+    rows.length > 1 && rows.some((row) => !row.needsAttention);
+  const tallHiddenCount = longQueue
+    ? rows
+        .slice(COLLAPSED_PENDING_ROW_COUNT)
+        .filter((row) => !row.needsAttention).length
+    : 0;
   const toggleExpanded = () => setExpanded((value) => !value);
   const actionsDisabled =
     Boolean(props.cancelPending) ||
     Boolean(props.editTargetInboundMessageId) ||
     Boolean(props.steerTargetInboundMessageId);
-  const renderRow = (message: ConversationMailboxMessage) => {
-    const isTarget =
-      props.cancelTargetInboundMessageId === message.inboundMessageId;
+  const renderRow = (row: (typeof rows)[number], index: number) => {
+    const { cancelError, message, needsAttention, retry } = row;
+    const collapsed = canCollapse && !expanded && !needsAttention;
+    if (collapsed && longQueue && index >= COLLAPSED_PENDING_ROW_COUNT) {
+      return null;
+    }
+
     // Only accepted server rows can leave the queue. Local rows are still sending.
     const accepted = message.clientStatus === undefined;
     const ownWebRow =
@@ -529,10 +563,20 @@ export const PendingMailboxStack = memo(function PendingMailboxStack(props: {
       <PendingRow
         actionsDisabled={actionsDisabled}
         authors={props.authors}
-        cancelError={Boolean(props.cancelError && isTarget)}
-        cancelPending={Boolean(props.cancelPending && isTarget)}
+        cancelError={cancelError}
+        cancelPending={Boolean(
+          props.cancelPending &&
+          props.cancelTargetInboundMessageId === message.inboundMessageId,
+        )}
         canEdit={ownWebRow}
         canSteer={ownWebRow && message.delivery === "defer"}
+        className={
+          collapsed
+            ? longQueue
+              ? "hidden md:tall:grid"
+              : "grid md:hidden md:tall:grid"
+            : "grid"
+        }
         conversationId={props.conversationId}
         editPending={
           props.editTargetInboundMessageId === message.inboundMessageId
@@ -541,7 +585,7 @@ export const PendingMailboxStack = memo(function PendingMailboxStack(props: {
         message={message}
         onCancel={accepted ? props.onCancelMessage : undefined}
         onEdit={props.onEditMessage}
-        onRetry={props.onRetry}
+        onRetry={retry}
         onSteer={props.onSteerMessage}
         steerPending={
           props.steerTargetInboundMessageId === message.inboundMessageId
@@ -555,17 +599,17 @@ export const PendingMailboxStack = memo(function PendingMailboxStack(props: {
       aria-label="Pending messages"
       className="mx-2 overflow-hidden rounded-t-lg bg-amber-300/[0.055] md:mx-3"
     >
-      {showCollapsed ? (
-        // Desktop keeps a short preview; mobile collapses to the control only.
-        <div className="hidden md:block">{previewRows.map(renderRow)}</div>
-      ) : (
-        visibleRows.map(renderRow)
-      )}
+      <div id={rowsId}>{rows.map(renderRow)}</div>
       {canCollapse ? (
         <ExpandQueuedMessagesButton
+          className={cn(
+            !longQueue && "hidden md:flex",
+            tallHiddenCount === 0 && "md:tall:hidden",
+          )}
+          controls={rowsId}
           expanded={expanded}
-          hiddenCount={hiddenCount}
           onClick={toggleExpanded}
+          tallHiddenCount={tallHiddenCount}
           totalCount={rows.length}
         />
       ) : null}

package/src/client/conversations/TranscriptActivityGroup.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useState, type ReactNode } from "react";
+import { Fragment, type ReactNode } from "react";
 import { ChevronRight } from "lucide-react";
 
 import { ShimmerText } from "../components/ShimmerText";
@@ -15,6 +15,7 @@ import type { RenderedTranscriptEntry } from "./transcriptRenderModel";
 import { cn } from "../styles";
 import { useTranscriptSearch } from "./transcriptSearch";
 import { TranscriptActivityNesting } from "./TranscriptRailEvent";
+import { useTranscriptRowOpen } from "./TranscriptRows";
 import { TranscriptSummaryTrigger } from "./TranscriptSummary";
 
 function countLabel(count: number, singular: string, plural: string): string {
@@ -175,18 +176,16 @@ function hasLiveActivity(entries: RenderedTranscriptEntry[]): boolean {
   );
 }
 
-/** Keep activity collapsed until the reader explicitly opens it. */
-export function activityGroupOpen(userOpen: boolean | null): boolean {
-  return userOpen ?? false;
-}
-
 /** Collapse completed non-message activity so chat messages stay primary. */
 export function TranscriptActivityGroup(props: {
   entries: RenderedTranscriptEntry[];
+  /** Keeps the group open while it unmounts outside the viewport. */
+  openKey?: string;
   renderEntry: (entry: RenderedTranscriptEntry) => ReactNode;
 }) {
   const { active: searchActive } = useTranscriptSearch();
-  const [userOpen, setUserOpen] = useState<boolean | null>(null);
+  // Activity stays collapsed until the reader opens it.
+  const [open, setOpen] = useTranscriptRowOpen(props.openKey);
   const rows = props.entries.map((entry) => (
     <Fragment key={entry.key}>{props.renderEntry(entry)}</Fragment>
   ));
@@ -202,14 +201,8 @@ export function TranscriptActivityGroup(props: {
     );
   }
 
-  const open = activityGroupOpen(userOpen);
-
   return (
-    <Collapsible
-      className="min-w-0 py-0.5"
-      onOpenChange={setUserOpen}
-      open={open}
-    >
+    <Collapsible className="min-w-0 py-0.5" onOpenChange={setOpen} open={open}>
       <TranscriptSummaryTrigger
         flush
         className={cn(

package/src/client/conversations/TranscriptEventView.tsx

@@ -1,5 +1,4 @@
 import { ChevronRight } from "lucide-react";
-import { useState } from "react";
 
 import { Collapsible, CollapsibleContent } from "../components/ui/collapsible";
 import { cn, dashboardDisclosureChevronClass } from "../styles";
@@ -9,6 +8,7 @@ import { messageRawText } from "./transcriptRenderModel";
 import { HighlightText, useTranscriptSearch } from "./transcriptSearch";
 import { RedactedMarker } from "./TranscriptRedacted";
 import type { TranscriptViewMessage } from "../types";
+import { useTranscriptRowOpen } from "./TranscriptRows";
 import { TranscriptSummaryTrigger } from "./TranscriptSummary";
 
 function EventTypeChip(props: { eventType: string }) {
@@ -28,9 +28,13 @@ function batchSummary(events: readonly { label?: string }[]): string {
 }
 
 /** Render an Event Message whose heading expands its full text. */
-export function TranscriptEventView(props: { message: TranscriptViewMessage }) {
+export function TranscriptEventView(props: {
+  message: TranscriptViewMessage;
+  /** Keeps the text open while the row unmounts outside the viewport. */
+  openKey?: string;
+}) {
   const { active: searchActive } = useTranscriptSearch();
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useTranscriptRowOpen(props.openKey);
   const text = messageRawText(props.message);
   const redacted = props.message.parts.some(
     (part) => part.type === "text" && part.redacted,

package/src/client/conversations/TranscriptReasoningView.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { Lightbulb } from "lucide-react";
 
 import {
@@ -13,15 +12,18 @@ import {
   TranscriptHeadingMeta,
   TranscriptHeadingRow,
 } from "./TranscriptHeadingRow";
+import { useTranscriptRowOpen } from "./TranscriptRows";
 import { useTranscriptSearch } from "./transcriptSearch";
 
 /** Render reasoning collapsed with a short preview until expanded or searched. */
 export function TranscriptReasoningView(props: {
+  /** Keeps the entry open while it unmounts outside the viewport. */
+  openKey?: string;
   part: TranscriptViewReasoningPart;
   timestamp?: number;
 }) {
   const { active: searchActive } = useTranscriptSearch();
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useTranscriptRowOpen(props.openKey);
   const expanded = searchActive || open;
   const rendered = props.part.redacted ? "Reasoning redacted" : props.part.text;
   const timestamp = formatMessageTimestamp(props.timestamp);