@sentry/junior-dashboard 0.247.0 → 0.249.0

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}

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;
-}