@sentry/junior-dashboard 0.248.0 → 0.250.0

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}

package/src/client/conversations/TranscriptSubagentView.tsx

@@ -1,65 +1,90 @@
-import { formatMessageTimestamp } from "../format";
+import { ChevronRight } from "lucide-react";
+
+import { StatusChip } from "../components/StatusChip";
+import { formatElapsedDuration, formatMessageTimestamp } from "../format";
+import { cn } from "../styles";
 import type { TranscriptViewSubagentPart } from "../types";
-import { ToolFrame } from "./ToolFrame";
+import { subagentStatusTone } from "./ConversationChildAgents";
 import { HighlightText } from "./transcriptSearch";
 
-/** Render a child-agent lifecycle event inside the transcript stream. */
+/**
+ * Render a child agent as a compact card in the transcript stream. The card
+ * matches the child agent rows in the details drawer: name, status, and run
+ * time first, then the task title. It opens the child transcript.
+ */
 export function TranscriptSubagentView(props: {
   onOpenTranscript?: (part: TranscriptViewSubagentPart) => void;
   part: TranscriptViewSubagentPart;
   timestamp?: number;
 }) {
   const label = props.part.agentName ?? props.part.subagentKind;
-  const summary = props.part.title ?? props.part.task;
+  const headline = props.part.title ?? props.part.task;
   const status = props.part.status;
-  const meta = [
-    status,
+  const duration = formatElapsedDuration(
+    props.timestamp,
+    props.part.finishedTimestamp,
+  );
+  const started =
     typeof props.timestamp === "number"
-      ? formatMessageTimestamp(props.timestamp)
-      : undefined,
-  ].filter(isString);
+      ? `Started ${formatMessageTimestamp(props.timestamp)}`
+      : undefined;
+  const interactive = Boolean(props.onOpenTranscript);
 
-  const frame = (
-    <ToolFrame
-      meta={meta}
-      mobileSummaryMeta={status}
-      signature={
-        <>
-          <strong className="min-w-0 break-words font-bold text-cyan-100">
-            <HighlightText text={label} />
-          </strong>
-          {summary ? (
-            <span className="min-w-0 truncate text-dashboard-text-muted">
-              <HighlightText text={summary} />
-            </span>
-          ) : null}
-          {props.part.status === "running" ? (
-            <span
-              aria-hidden="true"
-              className="mt-px size-1.5 shrink-0 animate-pulse rounded-full bg-cyan-300"
-            />
-          ) : null}
-        </>
-      }
-    />
+  const content = (
+    <>
+      <span className="flex min-w-0 items-center gap-2 text-xs leading-5">
+        <span className="min-w-0 truncate font-sans text-sm font-semibold text-dashboard-text">
+          <HighlightText text={label} />
+        </span>
+        <StatusChip
+          className={cn("shrink-0", status === "running" && "animate-pulse")}
+          size="compact"
+          tone={subagentStatusTone(status)}
+        >
+          {status}
+        </StatusChip>
+        {duration ? (
+          <span className="shrink-0 tabular-nums text-dashboard-text-muted">
+            {duration}
+          </span>
+        ) : null}
+        {interactive ? (
+          <ChevronRight
+            aria-hidden="true"
+            className="ml-auto size-4 shrink-0 text-dashboard-text-faint transition-colors group-hover/subagent:text-dashboard-text"
+          />
+        ) : null}
+      </span>
+      {headline ? (
+        <span className="block min-w-0 truncate text-sm leading-snug text-dashboard-text-subtle">
+          <HighlightText text={headline} />
+        </span>
+      ) : null}
+    </>
   );
+  const frameClass =
+    "group/subagent grid w-full min-w-0 max-w-[37.5rem] gap-0.5 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface-panel px-3 py-2 text-left text-inherit";
 
   if (!props.onOpenTranscript) {
-    return frame;
+    return (
+      <div className={frameClass} title={started}>
+        {content}
+      </div>
+    );
   }
 
   return (
     <button
       aria-label={`Open ${label} transcript`}
-      className="block w-full min-w-0 cursor-pointer text-left transition-colors hover:bg-white/[0.035] focus-visible:outline focus-visible:outline-1 focus-visible:outline-cyan-300/55"
+      className={cn(
+        frameClass,
+        "cursor-pointer transition-colors hover:border-dashboard-border-emphasis hover:bg-dashboard-surface-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus",
+      )}
       onClick={() => props.onOpenTranscript?.(props.part)}
+      title={started}
       type="button"
     >
-      {frame}
+      {content}
     </button>
   );
 }
-
-function isString(value: string | undefined): value is string {
-  return typeof value === "string" && value.length > 0;
-}

package/src/client/conversations/TranscriptText.tsx

@@ -26,11 +26,12 @@ export const TranscriptText = memo(function TranscriptText(props: {
         }
 
         return (
-          <HighlightedCode
-            code={block.code}
+          <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}
-            language={block.language}
-          />
+          >
+            <HighlightedCode code={block.code} language={block.language} />
+          </div>
         );
       })}
     </div>

package/src/client/conversations/TranscriptToolView.tsx

@@ -1,5 +1,5 @@
 import { memo, useMemo } from "react";
-import { TriangleAlert } from "lucide-react";
+import { TriangleAlert, Wrench } from "lucide-react";
 
 import { HighlightedCode } from "../code";
 import {
@@ -45,6 +45,12 @@ export const TranscriptToolView = memo(function TranscriptToolView(props: {
   const frame = (
     <ToolFrame
       expandable={hasDetails}
+      icon={props.part.status === "error" ? TriangleAlert : Wrench}
+      iconClassName={
+        props.part.status === "error"
+          ? "text-rose-300"
+          : "text-dashboard-text-faint"
+      }
       meta={meta}
       mobileSummaryMeta={mobileSummary}
       signature={signature}
@@ -78,14 +84,6 @@ function ToolSignature(props: {
 
   return (
     <>
-      {failed ? (
-        <TriangleAlert
-          aria-hidden="true"
-          className="shrink-0 !text-rose-300"
-          size={12}
-          strokeWidth={2.2}
-        />
-      ) : null}
       <ShimmerText
         active={shimmering}
         aria-label={statusLabel}
@@ -109,8 +107,8 @@ function ToolSignature(props: {
 function ToolPayload(props: { label: string; value: unknown }) {
   const code = useMemo(() => stringifyPartValue(props.value), [props.value]);
   return (
-    <div className="min-w-0 max-w-full overflow-hidden bg-black/20 px-2.5 py-2">
-      <div className="pb-1.5 font-mono text-2xs font-bold uppercase leading-none tracking-[0.08em] text-dashboard-text-muted">
+    <div className="min-w-0 max-w-full overflow-hidden border-dashboard-border-subtle px-3 py-2.5 [&+&]:border-t">
+      <div className="pb-1.5 font-sans text-xs font-medium leading-none text-dashboard-text-muted">
         {props.label}
       </div>
       <HighlightedCode code={code} language="json" />

package/src/client/conversations/TranscriptTurnContextView.tsx

@@ -24,7 +24,7 @@ export function TranscriptTurnContextView(props: {
         aria-expanded={open}
         aria-label="View turn context"
         className={cn(
-          "inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded text-dashboard-text-muted transition-colors hover:bg-dashboard-fill-hover hover:text-dashboard-text focus-visible:bg-dashboard-fill-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus",
+          "inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-dashboard-text-muted transition-colors hover:bg-dashboard-fill-hover hover:text-dashboard-text focus-visible:bg-dashboard-fill-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus",
           open && "bg-dashboard-fill-hover text-dashboard-text",
         )}
         onClick={() => setOpen(true)}
@@ -80,13 +80,13 @@ function TurnContext(props: { context: TranscriptViewTurnContext }) {
           {memory ? (
             <Brain
               aria-hidden="true"
-              className="shrink-0 text-cyan-100/60"
+              className="shrink-0 text-dashboard-accent-text/60"
               size={15}
             />
           ) : (
             <Braces
               aria-hidden="true"
-              className="shrink-0 text-cyan-100/60"
+              className="shrink-0 text-dashboard-accent-text/60"
               size={15}
             />
           )}

package/src/client/conversations/TranscriptView.tsx

@@ -72,10 +72,10 @@ export function Transcript(props: {
         ) : null}
         {props.hasPreviousPage || props.loadingPreviousPage ? (
           <div className="mb-3 flex items-center gap-3">
-            <span className="h-px min-w-4 flex-1 bg-white/[0.08]" />
+            <span className="h-px min-w-4 flex-1 bg-dashboard-fill-strong" />
             <button
               aria-label="Load earlier events"
-              className="shrink-0 cursor-pointer border-0 bg-transparent px-1 py-0.5 font-sans text-xs font-medium text-dashboard-text-muted transition-colors hover:text-dashboard-text focus-visible:outline focus-visible:outline-1 focus-visible:outline-cyan-300/55 disabled:cursor-not-allowed disabled:opacity-50"
+              className="shrink-0 cursor-pointer border-0 bg-transparent px-1 py-0.5 font-sans text-xs font-medium text-dashboard-text-muted transition-colors hover:text-dashboard-text focus-visible:outline focus-visible:outline-1 focus-visible:outline-dashboard-focus/55 disabled:cursor-not-allowed disabled:opacity-50"
               disabled={props.loadingPreviousPage}
               onClick={() => {
                 bottomPinning.preserveViewportForPrepend();
@@ -88,7 +88,7 @@ export function Transcript(props: {
                 ? `Loading earlier ${historyLabel}…`
                 : `Show earlier ${historyLabel}`}
             </button>
-            <span className="h-px min-w-4 flex-1 bg-white/[0.08]" />
+            <span className="h-px min-w-4 flex-1 bg-dashboard-fill-strong" />
           </div>
         ) : null}
         {props.historyError ? (

package/src/client/conversations/UsageCard.tsx

@@ -118,7 +118,7 @@ export function UsageCard(props: UsageCardProps) {
           className="grid grid-cols-[minmax(0,1fr)_auto] gap-x-3 gap-y-2"
           key={section.title}
         >
-          <span className="col-span-2 font-mono uppercase tracking-[0.08em] text-dashboard-text-faint">
+          <span className="col-span-2 font-sans font-medium text-dashboard-text-faint">
             {section.title}
             {section.total ? ` · ${section.total}` : null}
           </span>

package/src/client/conversations/eventTranscript.ts

@@ -352,8 +352,12 @@ export function transcriptMessagesFromEvents(
     if (data.type === "subagent") {
       const subagentId = `${data.childConversationId}:${data.startedSeq}`;
       const existing = subagents.get(subagentId);
+      const finishedTimestamp =
+        data.status === "running" ? undefined : eventTimestamp(event);
       if (existing) {
         existing.status = data.status;
+        if (finishedTimestamp === undefined) delete existing.finishedTimestamp;
+        else existing.finishedTimestamp = finishedTimestamp;
         continue;
       }
       const part = {
@@ -362,6 +366,9 @@ export function transcriptMessagesFromEvents(
         childConversationId: data.childConversationId,
         subagentKind: data.subagentKind,
         status: data.status,
+        ...(finishedTimestamp === undefined
+          ? undefined
+          : { finishedTimestamp }),
         ...(data.agentName ? { agentName: data.agentName } : undefined),
         ...(data.task ? { task: data.task } : undefined),
         ...(data.title ? { title: data.title } : undefined),

package/src/client/conversations/transcriptMarkdownLinks.ts

@@ -1,5 +1,5 @@
 export const TRANSCRIPT_ANCHOR_CLASS =
-  "font-medium text-cyan-100 underline decoration-cyan-300/35 underline-offset-2 transition-colors hover:text-dashboard-text hover:decoration-white";
+  "font-medium text-dashboard-accent-text underline decoration-dashboard-accent/35 underline-offset-2 transition-colors hover:text-dashboard-text hover:decoration-dashboard-text-solid";
 
 export type TranscriptMarkdownLink = {
   end: number;
@@ -36,9 +36,7 @@ export function findTranscriptMarkdownLinks(
     ...markdownLinks,
     ...autolinks,
     ...findBareLinks(text, bareRanges),
-  ].sort(
-    (left, right) => left.start - right.start || left.end - right.end,
-  );
+  ].sort((left, right) => left.start - right.start || left.end - right.end);
 }
 
 function findMarkdownLinks(

package/src/client/conversations/transcriptStyles.ts

@@ -5,6 +5,6 @@ export function transcriptEmptyClass(
   const colors =
     tone === "error"
       ? "border-rose-300/25 bg-rose-300/[0.07] text-rose-100"
-      : "border-white/[0.07] bg-white/[0.025] text-dashboard-text-muted";
+      : "border-dashboard-border bg-dashboard-fill-soft text-dashboard-text-muted";
   return `rounded-lg border p-5 text-sm leading-relaxed ${colors}`;
 }