@sentry/junior-dashboard 0.259.0 → 0.261.0

package/src/client/conversations/EventDetails.tsx

@@ -10,6 +10,7 @@ import { EventUsage } from "./EventUsage";
 /** Present event content as readable sections, with the exact report available on demand. */
 export function EventDetails({ event }: { event: ConversationReportEvent }) {
   const data = event.data;
+  const mentions = event.mentions ?? [];
   const model = eventLogModel(event);
   const { usage, ...callAttributes } = event.modelCall ?? {};
   let content: ReactNode;
@@ -54,7 +55,7 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
           ) : null}
           {summary ? (
             <DetailSection title="Continuation summary">
-              <TranscriptText text={summary} />
+              <TranscriptText mentions={mentions} text={summary} />
             </DetailSection>
           ) : null}
         </>
@@ -70,7 +71,7 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
             {redacted ? (
               <RedactedMarker />
             ) : (
-              <TranscriptText text={text ?? ""} />
+              <TranscriptText mentions={mentions} text={text ?? ""} />
             )}
           </DetailSection>
         </>
@@ -112,7 +113,7 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
           {part.redacted ? (
             <RedactedMarker />
           ) : (
-            <TranscriptText text={part.text ?? ""} />
+            <TranscriptText mentions={mentions} text={part.text ?? ""} />
           )}
         </DetailSection>
       ));
@@ -124,12 +125,15 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
           <DetailValue value={metadata} />
           <DetailSection title={presentation.title}>
             {presentation.preview ? (
-              <TranscriptText text={presentation.preview} />
+              <TranscriptText mentions={mentions} text={presentation.preview} />
             ) : null}
             {presentation.details?.map((detail, index) => (
               <DetailSection key={index} title={detail.title}>
                 {detail.description ? (
-                  <TranscriptText text={detail.description} />
+                  <TranscriptText
+                    mentions={mentions}
+                    text={detail.description}
+                  />
                 ) : null}
                 {detail.content ? <DetailValue value={detail.content} /> : null}
                 {detail.metadata ? (

package/src/client/conversations/README.md

@@ -34,6 +34,12 @@ shared controls and overlays.
   a person, so it stays collapsed behind "Show prompt".
 - `TranscriptAttachments` owns wrapping for both message attachments and file
   deliveries. `ImageAttachment` owns image previews.
+- Display text keeps Slack tokens such as `<@U123>` and `<#C123|name>`. The
+  API resolves the people in that text. It returns them as `mentions` next to
+  the object that owns the text: an event, an activity preview, a Brief, or an
+  Automation. Render this text with `TranscriptText` or `MentionText`. Both
+  require `mentions`, so a caller cannot forget them. Do not resolve names in
+  the dashboard, and do not rewrite tokens into links on the server.
 - `TranscriptTurnContextView` owns context content. The shared `Drawer` owns
   dismissal, focus trapping, focus return, scroll locking, and panel layout.
 

package/src/client/conversations/TranscriptContextEventView.tsx

@@ -44,7 +44,11 @@ export function TranscriptContextEventView(props: {
             Continuation summary
           </summary>
           <div className="mt-1.5 whitespace-pre-wrap text-xs leading-relaxed text-dashboard-text-muted">
-            <TranscriptText role="system" text={event.summary} />
+            <TranscriptText
+              mentions={props.part.mentions ?? []}
+              role="system"
+              text={event.summary}
+            />
           </div>
         </details>
       ) : null}

package/src/client/conversations/TranscriptEventView.tsx

@@ -1,28 +1,67 @@
 import { ChevronRight } from "lucide-react";
 
-import { renderMentionText } from "./transcriptMentions";
+import { MentionText } from "./transcriptMentions";
 import { messageRawText } from "./transcriptRenderModel";
 import { HighlightText } from "./transcriptSearch";
 import { RedactedMarker } from "./TranscriptRedacted";
 import type { TranscriptViewMessage } from "../types";
 import { TranscriptSummary } from "./TranscriptSummary";
 
+function EventTypeChip(props: { eventType: string }) {
+  return (
+    <span className="break-all rounded-md border border-dashboard-border px-1.5 py-0.5 font-mono text-2xs leading-none text-dashboard-text-muted">
+      <HighlightText text={props.eventType} />
+    </span>
+  );
+}
+
+/** Heading for several Events that arrived in one message. */
+function batchSummary(events: readonly { label?: string }[]): string {
+  // Name the resource only when every Event is about it.
+  const label = events[0]?.label;
+  const shared = label && events.every((event) => event.label === label);
+  return `${events.length} events${shared ? ` · ${label}` : ""}`;
+}
+
 /** Render an Event Message whose heading expands its full text. */
 export function TranscriptEventView(props: { message: TranscriptViewMessage }) {
   const text = messageRawText(props.message);
   const redacted = props.message.parts.some(
     (part) => part.type === "text" && part.redacted,
   );
-  const summary = props.message.trustedSummary ?? props.message.eventType ?? "";
+  const events = props.message.events ?? [];
+  const mentions = props.message.mentions ?? [];
+  const isBatch = events.length > 1;
+  const summary = isBatch
+    ? batchSummary(events)
+    : (props.message.trustedSummary ?? props.message.eventType ?? "");
   const heading = (
-    <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">
-        {renderMentionText(summary, "event-summary")}
-      </span>
-      {props.message.eventType ? (
-        <span className="break-all rounded-md border border-dashboard-border px-1.5 py-0.5 font-mono text-2xs leading-none text-dashboard-text-muted">
-          <HighlightText text={props.message.eventType} />
+    <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} />
         </span>
+        {!isBatch && props.message.eventType ? (
+          <EventTypeChip eventType={props.message.eventType} />
+        ) : null}
+      </span>
+      {isBatch ? (
+        <ul className="flex min-w-0 flex-col gap-1">
+          {events.map((event, index) => (
+            <li
+              key={index}
+              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
+                  mentions={mentions}
+                  text={event.trustedSummary ?? event.eventType}
+                />
+              </span>
+              <EventTypeChip eventType={event.eventType} />
+            </li>
+          ))}
+        </ul>
       ) : null}
     </span>
   );

package/src/client/conversations/TranscriptMessageView.tsx

@@ -54,7 +54,12 @@ export const TranscriptMessageView = memo(
         <div className="grid min-w-0 grid-cols-[minmax(0,1fr)] gap-2">
           {props.message.parts.map((part, index) =>
             part.type === "text" ? (
-              <TranscriptText key={index} role={role} text={part.text ?? ""} />
+              <TranscriptText
+                key={index}
+                mentions={props.message.mentions ?? []}
+                role={role}
+                text={part.text ?? ""}
+              />
             ) : null,
           )}
         </div>

package/src/client/conversations/TranscriptStructuredEventView.tsx

@@ -1,5 +1,6 @@
 import { formatMessageTimestamp } from "../format";
 import type { TranscriptViewStructuredEventPart } from "../types";
+import { MentionText } from "./transcriptMentions";
 import { HighlightText, useTranscriptSearch } from "./transcriptSearch";
 import { TranscriptSummary } from "./TranscriptSummary";
 
@@ -14,6 +15,7 @@ export function TranscriptStructuredEventView(props: {
   const presentation = props.part.presentation;
   const timestamp = formatMessageTimestamp(props.timestamp);
   const details = presentation.details ?? [];
+  const mentions = props.part.mentions ?? [];
   // The rail icon box is h-6. A leading-6 title shares its center line.
   const surfaceClass = "min-w-0 font-sans text-xs";
   // A lone detail often repeats the event title, such as "Loaded AGENTS.md"
@@ -32,7 +34,7 @@ export function TranscriptStructuredEventView(props: {
             )}
             {detail.description ? (
               <div className="mt-1 whitespace-pre-wrap break-words text-xs leading-relaxed text-dashboard-text-muted">
-                <HighlightText text={detail.description} />
+                <MentionText mentions={mentions} text={detail.description} />
               </div>
             ) : null}
             {detail.content ? (
@@ -64,7 +66,7 @@ export function TranscriptStructuredEventView(props: {
         </div>
         {presentation.preview ? (
           <div className="mt-0.5 truncate text-xs text-dashboard-text-muted">
-            <HighlightText text={presentation.preview} />
+            <MentionText mentions={mentions} text={presentation.preview} />
           </div>
         ) : null}
       </div>

package/src/client/conversations/TranscriptText.tsx

@@ -1,11 +1,17 @@
 import { memo } from "react";
+import type { ActorIdentity } from "@sentry/junior/api/schema";
 
 import { HighlightedCode } from "../code";
 import { parseMarkdownBlocks, transcriptRoleKind } from "../format";
 import { TranscriptMarkdown } from "./TranscriptMarkdown";
+import { MentionPeopleProvider } from "./transcriptMentions";
 
-/** Render transcript prose as Markdown with explicit fenced code blocks. */
+/**
+ * Render transcript prose as Markdown with explicit fenced code blocks.
+ * `mentions` are the people that the API resolved for this text.
+ */
 export const TranscriptText = memo(function TranscriptText(props: {
+  mentions: readonly ActorIdentity[];
   role?: string;
   text: string;
 }) {
@@ -13,27 +19,29 @@ export const TranscriptText = memo(function TranscriptText(props: {
   const blocks = parseMarkdownBlocks(props.text);
 
   return (
-    <div className="grid min-w-0 gap-2">
-      {blocks.map((block, index) => {
-        if (block.language === "markdown" && !block.fenced) {
+    <MentionPeopleProvider mentions={props.mentions}>
+      <div className="grid min-w-0 gap-2">
+        {blocks.map((block, index) => {
+          if (block.language === "markdown" && !block.fenced) {
+            return (
+              <TranscriptMarkdown
+                compact={roleKind === "assistant" || roleKind === "user"}
+                key={index}
+                text={block.code}
+              />
+            );
+          }
+
           return (
-            <TranscriptMarkdown
-              compact={roleKind === "assistant" || roleKind === "user"}
+            <div
+              className="min-w-0 overflow-hidden rounded-md border border-dashboard-border-subtle bg-dashboard-surface-panel px-3 py-2.5"
               key={index}
-              text={block.code}
-            />
+            >
+              <HighlightedCode code={block.code} language={block.language} />
+            </div>
           );
-        }
-
-        return (
-          <div
-            className="min-w-0 overflow-hidden rounded-md border border-dashboard-border-subtle bg-dashboard-surface-panel px-3 py-2.5"
-            key={index}
-          >
-            <HighlightedCode code={block.code} language={block.language} />
-          </div>
-        );
-      })}
-    </div>
+        })}
+      </div>
+    </MentionPeopleProvider>
   );
 });

package/src/client/conversations/conversationActivityPreview.ts

@@ -1,6 +1,12 @@
+// Slack writes links as `<https://example.com>` or `<https://example.com|label>`.
+const SLACK_LINK_RE = /<((?:https?|mailto):[^\s|<>]+)(?:\|([^<>]*))?>/g;
+
 /** Reduce message Markdown to compact plain text for conversation previews. */
 export function formatConversationActivityPreview(text: string): string {
   return text
+    .replace(SLACK_LINK_RE, (_, url: string, label?: string) =>
+      label?.trim() ? label.trim() : url,
+    )
     .replace(/\[([^\]]+)\]\([^\s)]+(?:\s+"[^"]*")?\)/g, "$1")
     .replace(/(^|\s)([*_~`]{1,3})(?=\S)/g, "$1")
     .replace(/([*_~`]{1,3})(?=\s|$|[.,!?;:])/g, "")

package/src/client/conversations/eventTranscript.ts

@@ -37,6 +37,7 @@ function eventMessage(
     role,
     sourceSeq: event.seq,
     timestamp: eventTimestamp(event),
+    ...(event.mentions ? { mentions: event.mentions } : undefined),
   };
 }
 
@@ -213,12 +214,12 @@ export function transcriptMessagesFromEvents(
         ...(data.actorIdentity
           ? { actorIdentity: data.actorIdentity }
           : undefined),
-        ...(data.mentions ? { mentions: data.mentions } : undefined),
         ...(data.eventType ? { eventType: data.eventType } : undefined),
         eventObjectType: data.eventObjectType,
         ...(data.trustedSummary
           ? { trustedSummary: data.trustedSummary }
           : undefined),
+        ...(data.events ? { events: data.events } : undefined),
         ...(data.explicitMention !== undefined
           ? { explicitMention: data.explicitMention }
           : undefined),
@@ -388,6 +389,7 @@ export function transcriptMessagesFromEvents(
         eventMessage(event, "system", [
           {
             type: "structured_event",
+            ...(event.mentions ? { mentions: event.mentions } : undefined),
             namespace: data.namespace,
             name: data.name,
             version: data.version,
@@ -415,6 +417,7 @@ export function transcriptMessagesFromEvents(
         eventMessage(event, "system", [
           {
             type: "context_event",
+            ...(event.mentions ? { mentions: event.mentions } : undefined),
             event:
               data.type === "handoff"
                 ? {

package/src/client/conversations/transcriptMentions.tsx

@@ -3,7 +3,7 @@ import { Link } from "react-router";
 import type { ActorIdentity } from "@sentry/junior/api/schema";
 
 import { peoplePath } from "../format";
-import type { TranscriptViewMessage } from "../types";
+import { cn } from "../styles";
 import { TRANSCRIPT_ANCHOR_CLASS } from "./transcriptMarkdownLinks";
 import { HighlightText } from "./transcriptSearch";
 
@@ -22,16 +22,17 @@ const TranscriptMentionPeople = createContext<
   ReadonlyMap<string, ActorIdentity>
 >(new Map());
 
-/** Share the people that the API resolved for mentions in one transcript. */
-export function TranscriptMentionPeopleProvider(props: {
+/**
+ * Share the people that the API resolved for one block of display text.
+ * Use `TranscriptText` or `MentionText`, which require the API mentions.
+ */
+export function MentionPeopleProvider(props: {
   children: ReactNode;
-  messages: readonly TranscriptViewMessage[];
+  mentions: readonly ActorIdentity[];
 }) {
   const people = new Map<string, ActorIdentity>();
-  for (const message of props.messages) {
-    for (const person of message.mentions ?? []) {
-      if (person.slackUserId) people.set(person.slackUserId, person);
-    }
+  for (const person of props.mentions) {
+    if (person.slackUserId) people.set(person.slackUserId, person);
   }
   return (
     <TranscriptMentionPeople.Provider value={people}>
@@ -40,7 +41,22 @@ export function TranscriptMentionPeopleProvider(props: {
   );
 }
 
-/** Render text with Slack `<@U123>` and `<#C123|name>` tokens as readable mentions. */
+/** Render one line of display text with the people the API resolved for it. */
+export function MentionText(props: {
+  mentions: readonly ActorIdentity[];
+  text: string;
+}) {
+  return (
+    <MentionPeopleProvider mentions={props.mentions}>
+      {renderMentionText(props.text, "mention-text")}
+    </MentionPeopleProvider>
+  );
+}
+
+/**
+ * Render text with Slack `<@U123>` and `<#C123|name>` tokens as readable
+ * mentions. It reads people from the nearest `MentionPeopleProvider`.
+ */
 export function renderMentionText(text: string, keyBase: string): ReactNode[] {
   const nodes: ReactNode[] = [];
   let cursor = 0;
@@ -88,7 +104,8 @@ function MentionView(props: { mention: TranscriptMention }) {
   if (person?.email) {
     return (
       <Link
-        className={TRANSCRIPT_ANCHOR_CLASS}
+        // Previews sit in cards that disable pointer events on their text.
+        className={cn("pointer-events-auto", TRANSCRIPT_ANCHOR_CLASS)}
         title={id}
         to={peoplePath(person.email)}
       >

package/src/client/debouncedValue.ts

@@ -0,0 +1,14 @@
+import { useEffect, useState } from "react";
+
+/**
+ * Return `value` once it stops changing for `delayMs`. Use it for search text
+ * that is local state, so each keystroke does not send a request.
+ */
+export function useDebouncedValue<T>(value: T, delayMs = 250): T {
+  const [debounced, setDebounced] = useState(value);
+  useEffect(() => {
+    const timeout = window.setTimeout(() => setDebounced(value), delayMs);
+    return () => window.clearTimeout(timeout);
+  }, [delayMs, value]);
+  return debounced;
+}

package/src/client/pages/automations/AutomationCostChart.tsx

@@ -18,7 +18,7 @@ import {
 import { Card } from "../../components/layout/Card";
 import { formatCostSummary } from "../../format";
 
-const COST_COLOR = "#67e8f9";
+const COST_COLOR = "var(--color-cyan-300)";
 
 /** Render linked conversation spend for completed automation executions. */
 export function AutomationCostChart(props: {
@@ -103,7 +103,7 @@ export function AutomationCostChart(props: {
             format={(value) => formatCostSummary({ total: value })}
             layout={layout}
             maximum={maximum}
-            stroke="#e2e8f0"
+            stroke="var(--color-slate-200)"
           />
           <ActivityChartDateLabels
             dates={days.map((day) => day.date)}

package/src/client/pages/automations/AutomationDetailsDrawer.tsx

@@ -88,7 +88,10 @@ export function AutomationDetailsDrawer(props: {
           <h3 className="mt-0 mb-2 text-sm font-medium text-dashboard-text-muted">
             What to do
           </h3>
-          <TranscriptText text={automation.instruction} />
+          <TranscriptText
+            mentions={automation.mentions ?? []}
+            text={automation.instruction}
+          />
         </div>
         <AutomationLifecycle
           key={`${automation.kind}:${automation.id}`}

package/src/client/pages/automations/AutomationExecutionChart.tsx

@@ -18,7 +18,7 @@ import {
 import { Card } from "../../components/layout/Card";
 import { formatActivityChartAverage } from "../../format";
 
-const EXECUTION_COLOR = "#fbbf24";
+const EXECUTION_COLOR = "var(--color-amber-400)";
 
 /** Render completed automation executions over a trailing window. */
 export function AutomationExecutionChart(props: {
@@ -95,7 +95,7 @@ export function AutomationExecutionChart(props: {
             format={formatActivityChartAverage}
             layout={layout}
             maximum={maximum}
-            stroke="#e2e8f0"
+            stroke="var(--color-slate-200)"
           />
           <ActivityChartDateLabels
             dates={days.map((day) => day.date)}

package/src/client/pages/automations/AutomationExecutionStatusChart.tsx

@@ -15,9 +15,9 @@ import {
 import { Card } from "../../components/layout/Card";
 
 const series = [
-  { color: "#6ee7b7", key: "completed", label: "Completed" },
-  { color: "#fda4af", key: "failed", label: "Failed" },
-  { color: "#fcd34d", key: "blocked", label: "Blocked" },
+  { color: "var(--color-emerald-300)", key: "completed", label: "Completed" },
+  { color: "var(--color-rose-300)", key: "failed", label: "Failed" },
+  { color: "var(--color-amber-300)", key: "blocked", label: "Blocked" },
 ] as const;
 
 /** Render one automation's terminal executions by status over a trailing window. */

package/src/client/pages/automations/AutomationFilters.tsx

@@ -9,6 +9,7 @@ import { Button, ToggleButton } from "../../components/Button";
 import { DirectorySortSelect } from "../../components/controls/DirectorySortSelect";
 import { FilterGroup } from "../../components/FilterBar";
 import { SearchInput } from "../../components/SearchInput";
+import { Select } from "../../components/Select";
 
 /** Keep collection controls visible while a filtered page loads. */
 export function AutomationFilters(props: {
@@ -157,9 +158,9 @@ function AutomationFilterSelect(props: {
 }) {
   return (
     <FilterGroup label={props.label}>
-      <select
+      <Select
         aria-label={props.ariaLabel ?? `Filter by ${props.label.toLowerCase()}`}
-        className="h-9 w-full min-w-0 rounded-lg border border-dashboard-border-emphasis bg-dashboard-control px-2 text-sm text-dashboard-text transition-colors hover:border-dashboard-border-interactive focus:border-dashboard-focus focus:outline-none focus:ring-1 focus:ring-dashboard-focus/25 [color-scheme:var(--dashboard-color-scheme,dark)]"
+        variant="filter"
         value={props.value}
         onChange={(event) => props.onChange(event.currentTarget.value)}
       >
@@ -173,7 +174,7 @@ function AutomationFilterSelect(props: {
             {option.label}
           </option>
         ))}
-      </select>
+      </Select>
     </FilterGroup>
   );
 }

package/src/client/pages/code/CodeActivityChart.tsx

@@ -19,9 +19,9 @@ import { ChartLegend } from "../../components/charts/ChartLegend";
 import { Card } from "../../components/layout/Card";
 import { formatActivityChartAverage } from "../../format";
 
-const CREATED_COLOR = "#67e8f9";
-const MERGED_COLOR = "#6ee7b7";
-const CLOSED_COLOR = "#fb7185";
+const CREATED_COLOR = "var(--color-cyan-300)";
+const MERGED_COLOR = "var(--color-emerald-300)";
+const CLOSED_COLOR = "var(--color-rose-400)";
 
 /** Render created, merged, and closed code changes over a trailing window. */
 export function CodeActivityChart(props: {
@@ -143,7 +143,7 @@ export function CodeActivityChart(props: {
             format={formatActivityChartAverage}
             layout={layout}
             maximum={maximum}
-            stroke="#e2e8f0"
+            stroke="var(--color-slate-200)"
           />
           <ActivityChartDateLabels
             dates={days.map((day) => day.date)}

package/src/client/pages/code/RepositoryTabs.tsx

@@ -1,4 +1,4 @@
-import { useDeferredValue, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import type { CodeRepositoryReport } from "@sentry/junior/api/schema";
 
 import { useCodeRepositoryConversationsData } from "../../api";
@@ -17,6 +17,7 @@ import {
 import { Card } from "../../components/layout/Card";
 import { ConversationHomeList } from "../../conversations/ConversationHomeList";
 import { buildConversations, getDashboardTimeZone } from "../../format";
+import { useDebouncedValue } from "../../debouncedValue";
 import { CodeActivityChart } from "./CodeActivityChart";
 import { CodeChangeRow } from "./CodeChangeRow";
 import { repositoryActivity } from "./RepositorySections";
@@ -28,7 +29,7 @@ const noFinishedConversations = new Set<string>();
 export function RepositoryConversationsTab(props: { repositoryId: string }) {
   const [query, setQuery] = useState("");
   const [page, setPage] = useState(1);
-  const search = useDeferredValue(query.trim());
+  const search = useDebouncedValue(query.trim());
   const feed = useCodeRepositoryConversationsData(props.repositoryId, search);
   const conversations = buildConversations(feed.data?.conversations ?? []);
   useEffect(() => {

package/src/client/pages/dev/ComponentsPage.tsx

@@ -1,6 +1,7 @@
 import { FormNotice } from "../../components/FormNotice";
 import { SearchInput } from "../../components/SearchInput";
 import { Select } from "../../components/Select";
+import { SelectFixtures } from "./SelectFixtures";
 import { ObjectFixtures } from "./ObjectFixtures";
 import { ChartFixtures } from "./ChartFixtures";
 import { SegmentedNavFixture, SegmentedTabsFixture } from "./SegmentedFixtures";
@@ -50,6 +51,7 @@ import { StatCard } from "../../components/metrics/StatCard";
 import { StatusChip } from "../../components/StatusChip";
 import { StatusDot } from "../../components/StatusDot";
 import { TextArea, TextInput } from "../../components/TextInput";
+import { ThemeSwitcher } from "../../components/ThemeSwitcher";
 import { TranscriptMarkdown } from "../../conversations/TranscriptMarkdown";
 import { TranscriptText } from "../../conversations/TranscriptText";
 import { TranscriptMessageShell } from "../../conversations/TranscriptMessageShell";
@@ -228,10 +230,12 @@ function FoundationsGalleryPage() {
           Your edits are still here. Review the latest version before saving.
         </FormNotice>
       </Fixture>
+      <Fixture title="Select controls">
+        <SelectFixtures />
+      </Fixture>
       <Fixture title="Conversation navigation">
         <DashboardChromeProvider>
           <DashboardHeader
-            compact
             mobileNavigationOpen={navigationOpen}
             navItems={[
               { key: "code", label: "Code", to: "/code" },
@@ -301,6 +305,9 @@ function FoundationsGalleryPage() {
           </Drawer>
         ) : null}
       </Fixture>
+      <Fixture title="Theme">
+        <ThemeSwitcher className="max-w-64" />
+      </Fixture>
       <Fixture title="Color tokens">
         <div className="grid gap-4">
           <TokenSwatchRow
@@ -733,6 +740,7 @@ function TranscriptsGalleryPage() {
               Junior
             </span>
             <TranscriptText
+              mentions={[]}
               role="assistant"
               text={
                 "Your reminder is set.\n\nI'll remind you to drink water every 30 minutes until you ask me to stop."
@@ -793,10 +801,10 @@ function TranscriptsGalleryPage() {
         <TranscriptMarkdown text={GFM_SAMPLE} />
       </Fixture>
       <Fixture title="TranscriptText assistant">
-        <TranscriptText role="assistant" text={MIXED_ASSISTANT} />
+        <TranscriptText mentions={[]} role="assistant" text={MIXED_ASSISTANT} />
       </Fixture>
       <Fixture title="TranscriptText user">
-        <TranscriptText role="user" text={EVENT_NOTIFICATION} />
+        <TranscriptText mentions={[]} role="user" text={EVENT_NOTIFICATION} />
       </Fixture>
       <Fixture title="Tool calls">
         <ToolCallGallery />

package/src/client/pages/dev/ConversationFixture.tsx

@@ -107,6 +107,35 @@ const EVENTS: ConversationReportEventData[] = [
     trustedSummary: "GitHub PR getsentry/junior#1200 received a review.",
     text: "The preview is ready for visual review.",
   },
+  {
+    type: "message",
+    messageId: "gallery-event-batch",
+    role: "user",
+    eventType: "pull_request.review.approved",
+    eventObjectType: "code_change",
+    trustedSummary: "GitHub PR getsentry/junior#1200 was approved by dcramer.",
+    events: [
+      {
+        eventType: "pull_request.review.approved",
+        label: "GitHub PR getsentry/junior#1200",
+        trustedSummary:
+          "GitHub PR getsentry/junior#1200 was approved by dcramer.",
+      },
+      {
+        eventType: "pull_request.review.commented",
+        label: "GitHub PR getsentry/junior#1200",
+        trustedSummary:
+          "GitHub PR getsentry/junior#1200 received a review comment from cursor[bot].",
+      },
+      {
+        eventType: "pull_request.review_comment.created",
+        label: "GitHub PR getsentry/junior#1200",
+        trustedSummary:
+          "GitHub PR getsentry/junior#1200 received an inline review comment from cursor[bot].",
+      },
+    ],
+    text: "[task]\n\nThis is a task, not a message from a person.\n\nYou received 3 events.",
+  },
 ];
 
 const CONVERSATION: ConversationDetailReport = {