@sentry/junior-dashboard 0.248.0 → 0.249.0

package/src/client/conversations/README.md

@@ -16,6 +16,15 @@ shared controls and overlays.
   `flush` when the text already sits on the transcript edge. It extends the
   padded control around that text. Do not repeat negative margins at call sites.
   The caller owns the native `details` element and its content.
+- Activity rows (tools, reasoning, and grouped rail events) share one
+  layout: a 1rem icon column, an 8px gap, then the title and metadata.
+  Expanded content sits in `transcriptActivityBodyClass` under the title.
+  `TranscriptActivityNesting` tells a rail event that it is inside an activity
+  group. Outside a group, the rail icon sits in the avatar column so the text
+  lines up with message text.
+- `TranscriptSubagentView` renders a child agent as a card with its name,
+  status, run time, and title. It matches the child agent rows in the details
+  drawer and opens the child transcript.
 - `TranscriptAttachments` owns wrapping for both message attachments and file
   deliveries. `ImageAttachment` owns image previews.
 - `TranscriptTurnContextView` owns context content. The shared `Drawer` owns

package/src/client/conversations/SubagentTranscriptDrawer.tsx

@@ -4,7 +4,11 @@ import { Link } from "react-router";
 
 import { useConversationData } from "./queries";
 import { conversationPath } from "./conversationRoutes";
-import { conversationDetailTitle, formatMessageTimestamp } from "../format";
+import {
+  conversationDetailTitle,
+  formatMessageTimestamp,
+  formatRelativeMessageTimestamp,
+} from "../format";
 import { buildConversationMarkdown } from "../markdownExport";
 import { Drawer } from "../components/Drawer";
 import { SearchInput } from "../components/SearchInput";
@@ -22,6 +26,8 @@ import { transcriptEmptyClass } from "./transcriptStyles";
 
 /** One child Conversation to show, with what its parent already knows. */
 export interface SubagentTranscriptTarget {
+  /** Agent name, such as "planner". Shown beside the status. */
+  agentName?: string;
   conversationId: string;
   /** Task title or agent name, shown before the child loads. */
   label?: string;
@@ -58,6 +64,11 @@ function SubagentTranscriptDrawerContent(props: {
   const label =
     props.target.label ?? conversationDetailTitle(detail) ?? "Subagent";
   const status = statusLabel(props.target.status, detail?.status);
+  const agentName =
+    props.target.agentName && props.target.agentName !== label
+      ? props.target.agentName
+      : undefined;
+  const startedAt = detail ? Date.parse(detail.startedAt) : undefined;
   const searchOpenVisible = searchOpen || search.length > 0;
 
   const titleId = "subagent-transcript-drawer-title";
@@ -100,42 +111,47 @@ function SubagentTranscriptDrawerContent(props: {
               aria-hidden="true"
               className="shrink-0 text-cyan-300"
               size={16}
-              strokeWidth={2.25}
+              strokeWidth={2}
             />
             <h2
-              className="m-0 min-w-0 break-words text-lg font-bold leading-tight tracking-normal text-dashboard-text"
+              className="m-0 min-w-0 break-words font-display text-lg font-medium leading-tight tracking-tight text-dashboard-text"
               id={titleId}
             >
               {label}
             </h2>
           </div>
-          <div className="mt-2 grid min-w-0 gap-1.5 text-xs leading-snug">
-            <code className="min-w-0 break-all font-mono text-xs text-dashboard-text">
-              {props.target.conversationId}
-            </code>
+          <div className="mt-1.5 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-5 text-dashboard-text-muted">
+            {agentName ? (
+              <span className="font-medium text-dashboard-text">
+                {agentName}
+              </span>
+            ) : null}
+            {status ? (
+              <StatusChip size="compact" tone={subagentStatusTone(status)}>
+                {status}
+              </StatusChip>
+            ) : null}
+            {detail && startedAt !== undefined ? (
+              <time
+                className="tabular-nums"
+                dateTime={detail.startedAt}
+                title={formatMessageTimestamp(startedAt, true)}
+              >
+                Started {formatRelativeMessageTimestamp(startedAt)}
+              </time>
+            ) : null}
             <Link
-              className="inline-flex w-fit items-center gap-1 font-semibold text-dashboard-text no-underline hover:underline"
+              className="inline-flex w-fit items-center gap-1 font-medium text-dashboard-accent-text no-underline hover:underline"
               onClick={props.onClose}
               to={conversationPath(props.target.conversationId)}
             >
               Open conversation
-              <ExternalLink aria-hidden="true" size={12} strokeWidth={2.25} />
+              <ExternalLink aria-hidden="true" size={12} strokeWidth={2} />
             </Link>
           </div>
-          {status || detail ? (
-            <div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-snug text-dashboard-text-muted">
-              {status ? (
-                <StatusChip size="compact" tone={subagentStatusTone(status)}>
-                  {status}
-                </StatusChip>
-              ) : null}
-              {detail ? (
-                <time className="font-mono" dateTime={detail.startedAt}>
-                  {formatMessageTimestamp(Date.parse(detail.startedAt))}
-                </time>
-              ) : null}
-            </div>
-          ) : null}
+          <code className="mt-1 block min-w-0 break-all font-mono text-xs text-dashboard-text-faint">
+            {props.target.conversationId}
+          </code>
           {searchOpenVisible ? (
             <div className="mt-3 min-w-0">
               <SearchInput

package/src/client/conversations/ToolFrame.tsx

@@ -1,4 +1,5 @@
 import { useState, type ReactNode } from "react";
+import type { LucideIcon } from "lucide-react";
 
 import { cn } from "../styles";
 import {
@@ -8,10 +9,17 @@ import {
 import { useTranscriptSearch } from "./transcriptSearch";
 import { TranscriptSummary } from "./TranscriptSummary";
 
+/** Frame expanded transcript activity content below its row title. */
+export const transcriptActivityBodyClass =
+  "ml-6 mt-1.5 min-w-0 overflow-hidden rounded-md border border-dashboard-border-subtle bg-dashboard-surface-panel";
+
 /** Render the shared expandable/non-expandable frame for transcript tools. */
 export function ToolFrame(props: {
   children?: ReactNode;
   expandable?: boolean;
+  /** Icon in the activity icon column. Rail events pass their own icon. */
+  icon?: LucideIcon;
+  iconClassName?: string;
   meta: string[];
   mobileSummaryMeta?: string;
   signature: ReactNode;
@@ -21,7 +29,8 @@ export function ToolFrame(props: {
   const metaText = props.meta.join(" · ");
   const interactive = props.expandable ?? Boolean(props.children);
   const staticFrame = searchActive || !interactive;
-  const header = (
+  const Icon = props.icon;
+  const row = (
     <TranscriptHeadingRow
       left={
         <>
@@ -62,42 +71,55 @@ export function ToolFrame(props: {
       rightClassName="ml-3 min-w-0 max-md:hidden"
     />
   );
+  const header = Icon ? (
+    <div className="grid min-w-0 grid-cols-[1rem_minmax(0,1fr)] items-center gap-2">
+      <Icon
+        aria-hidden="true"
+        className={cn("size-3.5 justify-self-center", props.iconClassName)}
+        strokeWidth={2}
+      />
+      {row}
+    </div>
+  ) : (
+    row
+  );
   const mobileMeta =
     metaText && props.children ? (
-      <div className="hidden min-w-0 break-words bg-black/15 px-2 py-1 font-mono text-xs leading-snug text-dashboard-text-muted max-md:block">
+      <div className="hidden min-w-0 break-words border-b border-dashboard-border-subtle px-2.5 py-1.5 font-sans text-xs tabular-nums leading-snug text-dashboard-text-muted max-md:block">
         {metaText}
       </div>
     ) : null;
 
+  const body = props.children ? (
+    <div className={transcriptActivityBodyClass}>
+      {mobileMeta}
+      {props.children}
+    </div>
+  ) : null;
+
   // Force-expand tool details during search so highlighted matches are visible.
   if (staticFrame) {
     return (
-      <div className="min-w-0 max-w-full overflow-hidden">
-        <div className="block px-2 py-1.5 font-mono text-xs leading-tight text-dashboard-text-muted">
+      <div className="min-w-0 max-w-full">
+        <div className="block py-1.5 font-mono text-xs leading-tight text-dashboard-text-muted">
           {header}
         </div>
-        {mobileMeta}
-        {props.children}
+        {body}
       </div>
     );
   }
 
   return (
     <details
-      className="group min-w-0 max-w-full overflow-hidden"
+      className="group min-w-0 max-w-full"
       open={open}
       onToggle={(event) => setOpen(event.currentTarget.open)}
     >
-      <TranscriptSummary className="block font-mono text-xs leading-tight text-dashboard-text-muted">
+      <TranscriptSummary className="-mx-2 block font-mono text-xs leading-tight text-dashboard-text-muted">
         {header}
       </TranscriptSummary>
       {/* Closed details hide DOM, but still mount React children and run Shiki. */}
-      {open ? (
-        <>
-          {mobileMeta}
-          {props.children}
-        </>
-      ) : null}
+      {open ? body : null}
     </details>
   );
 }

package/src/client/conversations/TranscriptActivityGroup.tsx

@@ -7,6 +7,7 @@ import { formatMs } from "../format";
 import type { RenderedTranscriptEntry } from "./transcriptRenderModel";
 import { cn } from "../styles";
 import { useTranscriptSearch } from "./transcriptSearch";
+import { TranscriptActivityNesting } from "./TranscriptRailEvent";
 import { TranscriptSummary } from "./TranscriptSummary";
 
 function countLabel(count: number, singular: string, plural: string): string {
@@ -156,7 +157,11 @@ export function TranscriptActivityGroup(props: {
   const live = hasLiveActivity(props.entries);
 
   if (searchActive) {
-    return <div className="grid min-w-0 gap-1">{rows}</div>;
+    return (
+      <TranscriptActivityNesting.Provider value>
+        <div className="grid min-w-0 gap-1">{rows}</div>
+      </TranscriptActivityNesting.Provider>
+    );
   }
 
   const open = activityGroupOpen(userOpen);
@@ -167,7 +172,7 @@ export function TranscriptActivityGroup(props: {
         flush
         className={cn(
           "flex items-center gap-1 text-left text-xs leading-tight text-dashboard-text-muted",
-          live && "text-cyan-100/80",
+          live && "text-dashboard-accent-text/80",
         )}
         onClick={(event) => {
           event.preventDefault();
@@ -190,7 +195,9 @@ export function TranscriptActivityGroup(props: {
           </span>
         </Tooltip>
       </TranscriptSummary>
-      <div className="mt-1.5 grid min-w-0 gap-1">{rows}</div>
+      <TranscriptActivityNesting.Provider value>
+        <div className="mt-1.5 grid min-w-0 gap-1">{rows}</div>
+      </TranscriptActivityNesting.Provider>
     </details>
   );
 }

package/src/client/conversations/TranscriptAttachmentsDeliveredView.tsx

@@ -1,13 +1,13 @@
 import { TranscriptAttachments } from "./TranscriptAttachment";
 
 import { getDashboardAgentName } from "../agentName";
-import { formatMessageTimestamp } from "../format";
 import type {
   ConversationTranscript,
   TranscriptViewAttachmentsDeliveredPart,
 } from "../types";
 import { TranscriptMessageHeading } from "./TranscriptHeadingRow";
 import { TranscriptMessageShell } from "./TranscriptMessageShell";
+import { TranscriptTimestamp } from "./TranscriptTimestamp";
 
 /** Render host-delivered conversation attachments as first-class transcript media. */
 export function TranscriptAttachmentsDeliveredView(props: {
@@ -15,17 +15,15 @@ export function TranscriptAttachmentsDeliveredView(props: {
   part: TranscriptViewAttachmentsDeliveredPart;
   timestamp?: number;
 }) {
-  const timestamp = formatMessageTimestamp(props.timestamp);
-
   return (
     <TranscriptMessageShell role="assistant" actor={getDashboardAgentName()}>
       <TranscriptMessageHeading>
-        <span className="max-w-full truncate font-sans text-sm font-semibold leading-6 text-cyan-100">
+        <span className="max-w-full truncate font-sans text-sm font-semibold leading-6 text-dashboard-accent-text">
           {getDashboardAgentName()}
         </span>
-        {timestamp ? (
+        {typeof props.timestamp === "number" ? (
           <span className="text-xs leading-6 text-dashboard-text-muted">
-            {timestamp}
+            <TranscriptTimestamp value={props.timestamp} />
           </span>
         ) : null}
       </TranscriptMessageHeading>

package/src/client/conversations/TranscriptContextEventView.tsx

@@ -18,10 +18,10 @@ export function TranscriptContextEventView(props: {
       ? ` using the ${event.modelProfile} profile (${event.modelId})`
       : "";
   return (
-    <article className="min-w-0 px-0.5 py-1 first:mt-0.5">
+    <article className="min-w-0 py-0.5">
       <div className="flex min-w-0 flex-wrap items-center justify-between gap-x-3 gap-y-1">
         <strong
-          className={`font-display text-xs font-semibold ${
+          className={`font-sans text-xs font-semibold ${
             handoff ? "text-sky-100" : "text-amber-100"
           }`}
         >

package/src/client/conversations/TranscriptEventView.tsx

@@ -41,7 +41,7 @@ export function TranscriptEventView(props: { message: TranscriptViewMessage }) {
               strokeWidth={2.2}
             />
           </TranscriptSummary>
-          <pre className="mt-2 max-h-80 overflow-auto whitespace-pre-wrap break-words rounded-lg border border-dashboard-border bg-dashboard-surface px-3 py-2 font-mono text-xs leading-relaxed text-dashboard-text-muted">
+          <pre className="mt-2 max-h-80 overflow-auto whitespace-pre-wrap break-words rounded-lg border border-dashboard-border bg-dashboard-surface-panel px-3 py-2 font-sans text-xs leading-relaxed text-dashboard-text-muted">
             <HighlightText text={text} />
           </pre>
         </details>

package/src/client/conversations/TranscriptMarkdown.tsx

@@ -177,7 +177,7 @@ function MarkdownTable(props: {
 
   return (
     <div className="min-w-0 max-w-full overflow-x-auto rounded-md border border-dashboard-border bg-dashboard-fill-faint">
-      <table className="w-max border-collapse text-left text-sm">
+      <table className="w-max min-w-full border-collapse text-left text-sm">
         <thead className="bg-dashboard-overlay-soft">
           <tr>
             {Array.from({ length: columnCount }, (_, index) => {
@@ -185,7 +185,7 @@ function MarkdownTable(props: {
               return (
                 <th
                   className={cn(
-                    "whitespace-nowrap border-b border-dashboard-border px-2.5 py-1.5 font-mono text-xs font-medium tracking-[0.04em] text-dashboard-text-muted",
+                    "whitespace-nowrap border-b border-dashboard-border px-2.5 py-1.5 font-sans text-xs font-medium text-dashboard-text-muted",
                     tableCellAlignClass(alignment),
                   )}
                   key={`h-${index}`}
@@ -365,7 +365,7 @@ function renderInlineCode(text: string, keyBase: number): ReactNode[] {
     }
     nodes.push(
       <code
-        className="rounded-[0.25rem] bg-white/[0.08] px-1 py-0.5 font-mono text-[0.9em] text-cyan-50"
+        className="rounded-[0.25rem] bg-dashboard-fill-strong px-1 py-0.5 font-mono text-[0.9em] text-dashboard-text"
         key={`code-${keyBase}-${part++}`}
       >
         <HighlightText text={match[2] ?? ""} />

package/src/client/conversations/TranscriptMessageContextView.tsx

@@ -31,12 +31,12 @@ export function TranscriptMessageContextView(props: {
   return (
     <>
       <details
-        className="group/message-context min-w-0 rounded-lg bg-white/[0.025] px-3 py-2.5 md:hidden"
+        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"
         data-transcript-message-context
       >
         <TranscriptSummary
           flush
-          className="flex items-center justify-between gap-2 font-display text-xs font-semibold text-dashboard-text-muted"
+          className="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
@@ -45,7 +45,7 @@ export function TranscriptMessageContextView(props: {
             size={14}
           />
         </TranscriptSummary>
-        <div className="mt-2 whitespace-pre-wrap pt-2 text-sm leading-relaxed text-dashboard-text/75">
+        <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 ? (
@@ -55,25 +55,25 @@ export function TranscriptMessageContextView(props: {
         ) : null}
       </details>
       <article
-        className="hidden min-w-0 rounded-lg bg-white/[0.025] px-3 py-2.5 md:block"
+        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
       >
         <TranscriptHeadingRow
           left={
-            <span className="font-display text-xs font-semibold text-dashboard-text-muted">
+            <span className="font-sans text-xs font-medium text-dashboard-text-muted">
               Context from {actor}
             </span>
           }
           leftClassName="min-w-0"
           right={
             timestamp ? (
-              <TranscriptHeadingMeta className="font-mono text-2xs text-dashboard-text-muted/70">
+              <TranscriptHeadingMeta className="text-xs tabular-nums text-dashboard-text-muted">
                 {timestamp}
               </TranscriptHeadingMeta>
             ) : undefined
           }
         />
-        <div className="mt-1 whitespace-pre-wrap text-sm leading-relaxed text-dashboard-text/75">
+        <div className="mt-1 whitespace-pre-wrap text-sm leading-relaxed text-dashboard-text-subtle">
           {content}
         </div>
         {!props.redacted && props.message.contexts?.length ? (

package/src/client/conversations/TranscriptMessageView.tsx

@@ -160,11 +160,7 @@ function TranscriptMessageHeader(props: {
             </span>
           ) : null}
           {showSlack && timestamp ? <span aria-hidden="true">·</span> : null}
-          {props.message.role === "assistant" ? (
-            <TranscriptTimestamp value={props.message.timestamp} />
-          ) : (
-            timestamp
-          )}
+          <TranscriptTimestamp value={props.message.timestamp} />
         </span>
       ) : null}
     </TranscriptMessageHeading>
@@ -176,7 +172,7 @@ function transcriptRoleLabelClass(role: string): string {
 
   return cn(
     "inline-block max-w-full truncate font-sans text-sm font-semibold leading-6",
-    kind === "assistant" && "text-cyan-100",
+    kind === "assistant" && "text-dashboard-accent-text",
     kind === "user" && "text-dashboard-text",
     kind === "system" && "text-amber-200",
     kind === "tool" && "text-dashboard-text-muted",

package/src/client/conversations/TranscriptRailEvent.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { createContext, useContext, type ReactNode } from "react";
 import type { ObjectType } from "@sentry/junior-plugin-api";
 import { ObjectIcon } from "../components/ObjectIcon";
 import {
@@ -33,6 +33,13 @@ type TranscriptRailEventKind =
   | "structured_event"
   | "subagent";
 
+/**
+ * True inside an activity group. Grouped rows use the narrow activity icon
+ * column. Top-level rows put the icon in the avatar column, so their text
+ * lines up with message text.
+ */
+export const TranscriptActivityNesting = createContext(false);
+
 /** Mark noteworthy transcript events with an inline status icon. */
 export function TranscriptRailEvent(props: {
   children: ReactNode;
@@ -42,30 +49,35 @@ export function TranscriptRailEvent(props: {
 }) {
   const marker = transcriptRailMarker(props.kind);
   const Icon = props.icon ?? marker.icon;
+  const nested = useContext(TranscriptActivityNesting);
 
   return (
     <div
       className={cn(
         "grid min-w-0 items-start",
-        props.kind === "event"
-          ? "grid-cols-[2rem_minmax(0,1fr)] gap-3"
-          : "grid-cols-[auto_minmax(0,1fr)] gap-2",
+        nested
+          ? "grid-cols-[1rem_minmax(0,1fr)] gap-2"
+          : "grid-cols-[2rem_minmax(0,1fr)] gap-3",
       )}
       data-transcript-rail-event={props.kind}
     >
       <span
         aria-hidden="true"
         className={cn(
-          props.kind === "event"
-            ? "mt-1 grid h-5 w-8 place-items-center"
-            : "mt-1.5 grid size-5 place-items-center",
+          nested
+            ? "grid h-6 w-4 place-items-center"
+            : "grid h-6 w-8 place-items-center",
+          // Card rows: center the icon on the card's first line.
+          !nested &&
+            (props.kind === "subagent" || props.kind === "message_context") &&
+            "mt-1.5",
           marker.className,
         )}
       >
         {props.objectType ? (
           <ObjectIcon objectType={props.objectType} size={14} decorative />
         ) : (
-          <Icon size={11} strokeWidth={2.2} />
+          <Icon size={nested ? 14 : 15} strokeWidth={2} />
         )}
       </span>
       <div className="min-w-0">{props.children}</div>

package/src/client/conversations/TranscriptReasoningView.tsx

@@ -9,6 +9,7 @@ import {
 } from "./TranscriptHeadingRow";
 import { HighlightText, useTranscriptSearch } from "./transcriptSearch";
 import { TranscriptSummary } from "./TranscriptSummary";
+import { transcriptActivityBodyClass } from "./ToolFrame";
 
 /** Render reasoning collapsed with a short preview until expanded or searched. */
 export function TranscriptReasoningView(props: {
@@ -22,23 +23,23 @@ export function TranscriptReasoningView(props: {
     <>
       <span
         aria-label="Reasoning"
-        className="mt-0.5 inline-flex size-4 shrink-0 items-center justify-center text-violet-200/80"
+        className="inline-flex size-4 shrink-0 items-center justify-center text-violet-200/80"
         title="Reasoning"
       >
-        <Lightbulb aria-hidden="true" size={13} strokeWidth={1.8} />
+        <Lightbulb aria-hidden="true" size={14} strokeWidth={2} />
       </span>
       <TranscriptHeadingRow
         left={
           searchActive ? (
-            <span className="block min-w-0 italic text-violet-100/75">
+            <span className="block min-w-0 text-dashboard-text-muted">
               Reasoning
             </span>
           ) : (
             <>
-              <span className="block min-w-0 truncate italic text-violet-100/70 group-open/reasoning:hidden">
+              <span className="block min-w-0 truncate italic text-dashboard-text-muted group-open/reasoning:hidden">
                 {rendered}
               </span>
-              <span className="hidden min-w-0 italic text-violet-100/75 group-open/reasoning:inline">
+              <span className="hidden min-w-0 text-dashboard-text-muted group-open/reasoning:inline">
                 Reasoning
               </span>
             </>
@@ -46,7 +47,7 @@ export function TranscriptReasoningView(props: {
         }
         right={
           timestamp ? (
-            <TranscriptHeadingMeta className="min-w-0 break-words text-2xs not-italic text-dashboard-text-muted max-md:hidden">
+            <TranscriptHeadingMeta className="min-w-0 break-words text-xs tabular-nums text-dashboard-text-muted max-md:hidden">
               {timestamp}
             </TranscriptHeadingMeta>
           ) : undefined
@@ -56,9 +57,8 @@ export function TranscriptReasoningView(props: {
     </>
   );
   const content = (
-    <div className="grid min-w-0 grid-cols-[1rem_minmax(0,1fr)] gap-2 bg-violet-950/15 px-2 pb-2 pt-1.5">
-      <span aria-hidden="true" />
-      <div className="min-w-0 whitespace-pre-wrap break-words text-xs leading-relaxed italic text-violet-100/65">
+    <div className={cn(transcriptActivityBodyClass, "px-3 py-2.5")}>
+      <div className="min-w-0 whitespace-pre-wrap break-words text-sm leading-relaxed text-dashboard-text-subtle">
         <HighlightText text={rendered} />
       </div>
     </div>
@@ -67,7 +67,7 @@ export function TranscriptReasoningView(props: {
   if (searchActive) {
     return (
       <div className={reasoningFrameClass()}>
-        <div className="grid list-none grid-cols-[1rem_minmax(0,1fr)] items-start gap-2 px-2 py-1.5">
+        <div className="grid list-none grid-cols-[1rem_minmax(0,1fr)] items-center gap-2 py-1.5">
           {summary}
         </div>
         {content}
@@ -77,7 +77,7 @@ export function TranscriptReasoningView(props: {
 
   return (
     <details className={cn("group/reasoning", reasoningFrameClass())}>
-      <TranscriptSummary className="grid grid-cols-[1rem_minmax(0,1fr)] items-start gap-2">
+      <TranscriptSummary className="-mx-2 grid grid-cols-[1rem_minmax(0,1fr)] items-center gap-2">
         {summary}
       </TranscriptSummary>
       {content}
@@ -86,5 +86,5 @@ export function TranscriptReasoningView(props: {
 }
 
 function reasoningFrameClass(): string {
-  return "min-w-0 overflow-hidden rounded-md bg-violet-300/[0.075] text-sm leading-relaxed text-violet-100/70";
+  return "min-w-0 text-xs leading-tight";
 }

package/src/client/conversations/TranscriptStructuredEventView.tsx

@@ -14,24 +14,29 @@ export function TranscriptStructuredEventView(props: {
   const presentation = props.part.presentation;
   const timestamp = formatMessageTimestamp(props.timestamp);
   const details = presentation.details ?? [];
-  // Match TranscriptRailEvent icon offset (mt-1.5) so single-line titles share a baseline.
-  const surfaceClass =
-    "min-w-0 px-0.5 pb-1 pt-1.5 font-mono text-xs leading-tight";
+  // 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"
+  // over "AGENTS.md". Skip that repeated title.
+  const repeatsTitle = (title: string) =>
+    details.length === 1 && presentation.title.includes(title);
   const body =
     details.length > 0 ? (
-      <div className="grid gap-4 pb-1 pt-3">
+      <div className="grid gap-4 pb-1 pt-2">
         {details.map((detail, index) => (
           <section key={`${detail.title}:${index}`}>
-            <div className="whitespace-pre-wrap break-words font-sans text-sm font-medium text-dashboard-text">
-              <HighlightText text={detail.title} />
-            </div>
+            {repeatsTitle(detail.title) ? null : (
+              <div className="whitespace-pre-wrap break-words font-sans text-sm font-medium text-dashboard-text">
+                <HighlightText text={detail.title} />
+              </div>
+            )}
             {detail.description ? (
               <div className="mt-1 whitespace-pre-wrap break-words text-xs leading-relaxed text-dashboard-text-muted">
                 <HighlightText text={detail.description} />
               </div>
             ) : null}
             {detail.content ? (
-              <pre className="mt-2 max-h-[32rem] overflow-auto whitespace-pre-wrap break-words font-mono text-xs leading-relaxed text-dashboard-text-muted">
+              <pre className="mt-2 max-h-[32rem] overflow-auto whitespace-pre-wrap break-words rounded-md border border-dashboard-border-subtle bg-dashboard-surface-panel px-3 py-2.5 font-mono text-xs leading-normal text-dashboard-text-muted first:mt-0">
                 <HighlightText text={detail.content} />
               </pre>
             ) : null}
@@ -39,7 +44,7 @@ export function TranscriptStructuredEventView(props: {
               <div className="mt-2 flex flex-wrap gap-1.5">
                 {detail.metadata.map((value) => (
                   <span
-                    className="font-mono text-xs text-dashboard-text-muted"
+                    className="text-xs text-dashboard-text-muted"
                     key={value}
                   >
                     <HighlightText text={value} />
@@ -54,7 +59,7 @@ export function TranscriptStructuredEventView(props: {
   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="font-display text-sm font-semibold text-dashboard-text">
+        <div className="text-sm font-medium leading-6 text-dashboard-text">
           <HighlightText text={presentation.title} />
         </div>
         {presentation.preview ? (
@@ -64,7 +69,7 @@ export function TranscriptStructuredEventView(props: {
         ) : null}
       </div>
       {timestamp ? (
-        <span className="font-mono text-xs text-dashboard-text-muted max-md:hidden">
+        <span className="text-xs leading-6 tabular-nums text-dashboard-text-muted max-md:hidden">
           {timestamp}
         </span>
       ) : null}