@sentry/junior-dashboard 0.248.0 → 0.250.0

package/src/client/conversations/ConversationMeta.tsx

@@ -24,7 +24,7 @@ import {
 } from "../format";
 import { Tooltip } from "../components/Tooltip";
 import { MetricList, type MetricListItem } from "../components/Metric";
-import { cn } from "../styles";
+import { cn, dashboardInlineLinkClass } from "../styles";
 import {
   CostMetric,
   DurationMetric,
@@ -49,9 +49,9 @@ export function PendingAuthorization(props: {
   };
 }) {
   return (
-    <div className="mb-2 rounded-lg border border-cyan-300/20 bg-cyan-300/[0.07] px-3 py-2.5 font-sans text-sm text-dashboard-text">
+    <div className="mb-2 rounded-lg border border-dashboard-accent/20 bg-dashboard-accent/[0.07] px-3 py-2.5 font-sans text-sm text-dashboard-text">
       <a
-        className="font-medium text-cyan-200 underline decoration-cyan-300/40 underline-offset-2 hover:text-cyan-100"
+        className="font-medium text-dashboard-accent-text underline decoration-dashboard-accent/40 underline-offset-2 hover:text-dashboard-accent-text"
         href={props.authorization.authorizationUrl}
         rel="noreferrer"
         target="_blank"
@@ -82,7 +82,7 @@ export function ConversationPrivacyChip(props: {
       className={
         isPublic
           ? "inline-flex max-w-full items-center gap-1 rounded-full border border-dashboard-border-emphasis bg-dashboard-fill-soft px-2 py-0.5 font-sans text-2xs font-medium text-dashboard-text-muted"
-          : "inline-flex max-w-full items-center gap-1 rounded-full border border-white/[0.1] bg-white/[0.04] px-2 py-0.5 font-sans text-2xs font-medium text-dashboard-text-muted"
+          : "inline-flex max-w-full items-center gap-1 rounded-full border border-dashboard-border-strong bg-dashboard-fill-soft px-2 py-0.5 font-sans text-2xs font-medium text-dashboard-text-muted"
       }
       role="note"
       title={`${fullLabel}. ${detail}`}
@@ -176,7 +176,7 @@ export function ConversationSidebarAnnotations(props: {
               <SidebarAnnotationGroupChip group={group} key={group.label} />
             ))}
             {badges.overflowGroupCount > 0 ? (
-              <span className="inline-flex h-5 min-w-7 shrink-0 items-center justify-center rounded-full border border-white/12 bg-dashboard-control px-1.5 font-mono text-2xs leading-none text-dashboard-text-muted">
+              <span className="inline-flex h-5 min-w-7 shrink-0 items-center justify-center rounded-full border border-dashboard-border-strong bg-dashboard-control px-1.5 font-sans text-2xs tabular-nums leading-none text-dashboard-text-muted">
                 +{badges.overflowGroupCount}
               </span>
             ) : null}
@@ -225,7 +225,7 @@ function SidebarAnnotationGroupChip(props: {
   group: SidebarAnnotationBadgeGroup;
 }) {
   return (
-    <span className="inline-flex h-5 min-w-0 max-w-60 shrink-0 items-center gap-1 truncate rounded-full border border-white/10 bg-dashboard-control px-1.5 font-sans text-2xs leading-none text-dashboard-text-muted">
+    <span className="inline-flex h-5 min-w-0 max-w-60 shrink-0 items-center gap-1 truncate rounded-full border border-dashboard-border-strong bg-dashboard-control px-1.5 font-sans text-2xs leading-none text-dashboard-text-muted">
       {props.group.annotations.map((annotation) =>
         annotation.objectType ? (
           <ObjectIcon
@@ -269,7 +269,7 @@ function SidebarAnnotationStatusChip(props: {
         // real chips, not floating glyphs. Box-shadow cutout (not border) keeps
         // layout at 18px while punching a surface-colored ring through the chip
         // underneath — classic avatar-facepile silhouette.
-        "relative box-border inline-flex size-[18px] shrink-0 items-center justify-center rounded-full border border-white/12 bg-dashboard-control",
+        "relative box-border inline-flex size-[18px] shrink-0 items-center justify-center rounded-full border border-dashboard-border-strong bg-dashboard-control",
         props.stacked && "-ml-1",
       )}
       style={{
@@ -420,7 +420,7 @@ export function ConversationAnnotations(props: {
           className={cn(
             "inline-flex min-w-0 max-w-full shrink-0 items-center gap-2 rounded-md font-sans leading-snug text-dashboard-text no-underline transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus",
             props.layout === "strip"
-              ? "px-1 py-0.5 text-xs hover:text-cyan-100"
+              ? "px-1 py-0.5 text-xs hover:text-dashboard-accent-text"
               : "min-h-10 border border-dashboard-border px-3 py-2 text-sm hover:border-dashboard-border-interactive hover:bg-dashboard-surface-hover",
           )}
           href={link.url ?? undefined}
@@ -471,7 +471,7 @@ function resourceLinkTitle(link: {
 function LocationLink(props: { label: string; locationUrl?: string }) {
   return props.locationUrl ? (
     <a
-      className="text-dashboard-text underline decoration-white/20 underline-offset-2 transition-colors hover:decoration-white/60"
+      className={dashboardInlineLinkClass}
       href={props.locationUrl}
       rel="noreferrer"
       target="_blank"
@@ -494,7 +494,7 @@ function SourceTask(props: {
   const title = props.sourceTask.title?.trim();
   const link = automationId ? (
     <Link
-      className="text-dashboard-text underline decoration-white/20 underline-offset-2 transition-colors hover:decoration-white/60"
+      className={dashboardInlineLinkClass}
       to={automationPath(automationId)}
     >
       Triggered by {kindLabel}

package/src/client/conversations/ConversationPage.tsx

@@ -186,6 +186,7 @@ export function ConversationPage(props: {
       conversation: ConversationTranscript;
     }) => {
       setSubagentTarget({
+        ...(part.agentName ? { agentName: part.agentName } : undefined),
         conversationId: part.childConversationId,
         label: part.title ?? part.agentName,
         status: part.status,
@@ -327,7 +328,7 @@ export function ConversationPage(props: {
               {detail.isPending ? (
                 <TranscriptLoading />
               ) : detail.error && !detail.data ? (
-                <Card className="border-white/[0.07] bg-white/[0.025] p-4 font-sans text-xs leading-relaxed text-dashboard-text-muted">
+                <Card className="border-dashboard-border bg-dashboard-fill-soft p-4 font-sans text-xs leading-relaxed text-dashboard-text-muted">
                   {detail.error.message}
                 </Card>
               ) : (

package/src/client/conversations/ConversationSidebar.tsx

@@ -88,8 +88,8 @@ export function ConversationSidebar(props: {
       className={cn(
         "relative min-w-0",
         isLanding
-          ? "border-t border-white/[0.07] bg-transparent"
-          : "grid h-full min-h-0 grid-rows-[auto_auto_minmax(0,1fr)] overflow-hidden border-r border-dashboard-border-emphasis bg-dashboard-surface-panel",
+          ? "border-t border-dashboard-border bg-transparent"
+          : "grid h-full min-h-0 grid-rows-[auto_auto_minmax(0,1fr)] overflow-hidden border-r border-dashboard-border bg-dashboard-surface-panel",
       )}
     >
       <div className="px-5 py-3">
@@ -106,7 +106,7 @@ export function ConversationSidebar(props: {
             {isLanding ? null : (
               <button
                 aria-label="New conversation"
-                className="grid size-7 cursor-pointer place-items-center rounded-md text-dashboard-text-muted transition hover:bg-white/[0.05] hover:text-dashboard-text focus:outline-none focus:ring-2 focus:ring-cyan-300/35"
+                className="grid size-7 cursor-pointer place-items-center rounded-md text-dashboard-text-muted transition hover:bg-dashboard-fill-hover hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus"
                 onClick={props.onNewConversation}
                 title="New conversation"
                 type="button"
@@ -293,7 +293,7 @@ const ConversationSidebarRow = memo(function ConversationSidebarRow(props: {
       <Link
         aria-current={props.selected ? "page" : undefined}
         className={cn(
-          "block min-w-0 rounded-lg px-3 py-2 text-inherit no-underline transition-colors hover:bg-dashboard-fill-hover max-sm:pr-10",
+          "block min-w-0 rounded-lg px-3 py-2 text-inherit no-underline transition-colors hover:bg-dashboard-fill-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus max-sm:pr-10",
           props.selected && "bg-dashboard-surface-active",
         )}
         to={conversationPath(props.conversation.id)}
@@ -323,7 +323,7 @@ const ConversationSidebarRow = memo(function ConversationSidebarRow(props: {
       </Link>
       <button
         aria-label={`${props.conversation.archivedAt ? "Restore" : "Archive"} ${title}`}
-        className="absolute right-1.5 top-1/2 z-10 grid size-7 -translate-y-1/2 cursor-pointer place-items-center rounded-md bg-dashboard-surface-active text-dashboard-text-muted transition hover:text-dashboard-text focus:outline-none focus:ring-2 focus:ring-cyan-300/35 sm:pointer-events-none sm:opacity-0 sm:focus:pointer-events-auto sm:focus:opacity-100 sm:group-focus-within:pointer-events-auto sm:group-focus-within:opacity-100 sm:group-hover:pointer-events-auto sm:group-hover:opacity-100 disabled:cursor-not-allowed"
+        className="absolute right-1.5 top-1/2 z-10 grid size-7 -translate-y-1/2 cursor-pointer place-items-center rounded-md bg-dashboard-surface-active text-dashboard-text-muted transition hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus sm:pointer-events-none sm:opacity-0 sm:focus:pointer-events-auto sm:focus:opacity-100 sm:group-focus-within:pointer-events-auto sm:group-focus-within:opacity-100 sm:group-hover:pointer-events-auto sm:group-hover:opacity-100 disabled:cursor-not-allowed"
         disabled={archive.isPending}
         onClick={() =>
           archive.mutate({
@@ -413,7 +413,7 @@ function ArchivedConversationNotice(props: {
     >
       {restore.error ? (
         <div
-          className="border-t border-rose-300/25 bg-rose-400/[0.12] px-3 py-2 font-mono text-xs text-rose-50/85"
+          className="border-t border-rose-300/25 bg-rose-400/[0.12] px-3 py-2 font-sans text-xs text-rose-50/85"
           role="alert"
         >
           Could not restore the conversation.

package/src/client/conversations/ConversationUsageBreakdown.tsx

@@ -99,10 +99,10 @@ function BreakdownTable(props: {
                   </span>
                 ) : null}
               </th>
-              <td className="py-2 text-right align-top font-mono tabular-nums text-dashboard-text">
+              <td className="py-2 text-right align-top font-sans tabular-nums text-dashboard-text">
                 {row.count}
               </td>
-              <td className="py-2 text-right align-top font-mono tabular-nums text-dashboard-text">
+              <td className="py-2 text-right align-top font-sans tabular-nums text-dashboard-text">
                 {row.cost}
               </td>
             </tr>
@@ -112,10 +112,10 @@ function BreakdownTable(props: {
               <th scope="row" className="py-2 text-left font-semibold">
                 {props.total.label}
               </th>
-              <td className="py-2 text-right font-mono tabular-nums">
+              <td className="py-2 text-right font-sans tabular-nums">
                 {props.total.count}
               </td>
-              <td className="py-2 text-right font-mono tabular-nums">
+              <td className="py-2 text-right font-sans tabular-nums">
                 {props.total.cost}
               </td>
             </tr>

package/src/client/conversations/ConversationWorkspace.tsx

@@ -93,7 +93,7 @@ export function ConversationWorkspace() {
       <main
         className={cn(
           dashboardContainerClass,
-          "h-full min-h-0 overflow-y-auto overscroll-contain px-4 py-4 sm:px-6 sm:py-6 xl:border-x xl:border-dashboard-border-subtle",
+          "h-full min-h-0 overflow-y-auto overscroll-contain px-4 py-4 sm:px-6 sm:py-6",
         )}
       >
         <div className="mx-auto grid w-full max-w-6xl gap-8">

package/src/client/conversations/ConversationWorkspaceLoading.tsx

@@ -12,7 +12,7 @@ export function ConversationWorkspaceLoading(props: { detail: boolean }) {
       aria-live="polite"
       className={cn(
         dashboardContainerClass,
-        "grid h-full min-h-0 overflow-hidden md:grid-cols-[21rem_minmax(0,1fr)] xl:border-x xl:border-white/[0.07]",
+        "grid h-full min-h-0 overflow-hidden md:grid-cols-[20rem_minmax(0,1fr)]",
       )}
       role="status"
     >
@@ -25,7 +25,7 @@ export function ConversationWorkspaceLoading(props: { detail: boolean }) {
 
 function ConversationSidebarLoading() {
   return (
-    <aside className="hidden h-full min-h-0 grid-rows-[auto_auto_minmax(0,1fr)] overflow-hidden border-r border-white/[0.07] bg-white/[0.02] md:grid">
+    <aside className="hidden h-full min-h-0 grid-rows-[auto_auto_minmax(0,1fr)] overflow-hidden border-r border-dashboard-border bg-dashboard-fill-faint md:grid">
       <div className="flex items-center justify-between gap-2 px-3 pb-2 pt-3">
         <h2 className="m-0 font-display text-lg font-medium leading-tight text-dashboard-text">
           Conversations
@@ -60,7 +60,7 @@ function ConversationHomeLoading() {
       aria-live="polite"
       className={cn(
         dashboardContainerClass,
-        "h-full min-h-0 overflow-y-auto overscroll-contain px-4 py-4 sm:px-6 sm:py-6 xl:border-x xl:border-dashboard-border-subtle",
+        "h-full min-h-0 overflow-y-auto overscroll-contain px-4 py-4 sm:px-6 sm:py-6",
       )}
       role="status"
     >
@@ -89,7 +89,7 @@ function ConversationDetailLoading() {
   return (
     <section
       aria-label="Selected conversation"
-      className="grid min-h-0 grid-rows-[minmax(0,1fr)] overflow-hidden bg-white/[0.012]"
+      className="grid min-h-0 grid-rows-[minmax(0,1fr)] overflow-hidden bg-dashboard-fill-faint"
     >
       <ChatLayout
         scrollAriaLabel="Conversation transcript"

package/src/client/conversations/CopyMarkdownButton.tsx

@@ -39,7 +39,7 @@ export function CopyMarkdownButton(props: {
     return (
       <button
         aria-label={label}
-        className="flex w-full cursor-pointer items-center gap-2.5 rounded-md border-0 bg-transparent px-2.5 py-2 text-left text-sm font-semibold text-dashboard-text transition-colors hover:bg-white/10 focus-visible:bg-white/10 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+        className="flex w-full cursor-pointer items-center gap-2.5 rounded-md border-0 bg-transparent px-2.5 py-2 text-left text-sm font-semibold text-dashboard-text transition-colors hover:bg-dashboard-fill-strong focus-visible:bg-dashboard-fill-strong focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
         disabled={!props.getMarkdown || status === "copying"}
         onClick={() => void copyMarkdown()}
         type="button"

package/src/client/conversations/EventUsage.tsx

@@ -77,7 +77,7 @@ export function EventUsage({ usage }: { usage?: ConversationUsage }) {
                 >
                   {row.label}
                 </th>
-                <td className="py-2 text-right font-mono tabular-nums text-dashboard-text">
+                <td className="py-2 text-right font-sans tabular-nums text-dashboard-text">
                   {row.tokens === undefined ? (
                     <span
                       aria-label="Not recorded"
@@ -89,7 +89,7 @@ export function EventUsage({ usage }: { usage?: ConversationUsage }) {
                     row.tokens.toLocaleString("en-US")
                   )}
                 </td>
-                <td className="py-2 text-right font-mono tabular-nums text-dashboard-text">
+                <td className="py-2 text-right font-sans tabular-nums text-dashboard-text">
                   {row.cost === undefined ? (
                     <span
                       aria-label="Not recorded separately"

package/src/client/conversations/PendingMailboxStack.tsx

@@ -91,7 +91,7 @@ function PendingMetaIcons(props: {
                 ? "Could not remove. Try again."
                 : "Remove queued message"
             }
-            className="inline-flex size-5 cursor-pointer items-center justify-center rounded border-0 bg-transparent p-0 text-dashboard-text-muted transition-colors hover:bg-white/[0.06] hover:text-amber-50 focus-visible:outline focus-visible:outline-1 focus-visible:outline-amber-200/55 disabled:cursor-default disabled:opacity-50"
+            className="inline-flex size-5 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-dashboard-text-muted transition-colors hover:bg-dashboard-fill-hover hover:text-amber-50 focus-visible:outline focus-visible:outline-1 focus-visible:outline-amber-200/55 disabled:cursor-default disabled:opacity-50"
             disabled={props.cancelDisabled}
             onClick={props.onCancel}
             type="button"
@@ -141,7 +141,7 @@ function PendingRow(props: {
     <article className="grid min-w-0 grid-cols-[minmax(0,1fr)] gap-1 px-3 py-2 text-dashboard-text md:px-3.5">
       <TranscriptHeadingRow
         left={
-          <span className="inline-block max-w-full truncate font-display text-sm font-semibold leading-tight text-dashboard-text">
+          <span className="inline-block max-w-full truncate font-sans text-sm font-semibold leading-tight text-dashboard-text">
             {roleLabel}
           </span>
         }
@@ -160,11 +160,11 @@ function PendingRow(props: {
         }
       />
       {redacted ? (
-        <p className="m-0 font-mono text-sm leading-snug text-dashboard-text-muted">
+        <p className="m-0 font-sans text-sm leading-snug text-dashboard-text-muted">
           [redacted]
         </p>
       ) : (
-        <p className="m-0 line-clamp-3 font-mono text-sm leading-snug text-dashboard-text/90">
+        <p className="m-0 line-clamp-3 font-sans text-sm leading-snug text-dashboard-text-subtle">
           {text}
         </p>
       )}
@@ -174,7 +174,7 @@ function PendingRow(props: {
             Could not send.
           </p>
           <button
-            className="cursor-pointer border-0 bg-transparent p-0 font-sans text-xs font-medium text-cyan-200/90 underline-offset-2 hover:underline focus-visible:outline focus-visible:outline-1 focus-visible:outline-cyan-300/55"
+            className="cursor-pointer border-0 bg-transparent p-0 font-sans text-xs font-medium text-dashboard-accent-text/90 underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus"
             onClick={() => props.onRetry?.(props.message)}
             type="button"
           >

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] ?? ""} />