@sentry/junior-dashboard 0.247.0 → 0.249.0

package/src/client/components/layout/SectionIntro.tsx

@@ -16,7 +16,7 @@ export function SectionIntro(props: {
         {props.title}
       </h2>
       {props.description ? (
-        <p className="mt-1.5 mb-0 max-w-2xl font-mono text-xs leading-relaxed text-dashboard-text-muted">
+        <p className="mt-1.5 mb-0 max-w-2xl font-sans text-xs leading-relaxed text-dashboard-text-muted">
           {props.description}
         </p>
       ) : null}

package/src/client/components/layout/SectionTitle.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from "react";
 /** Render compact section titles that fit inside operational panels. */
 export function SectionTitle(props: { children: ReactNode }) {
   return (
-    <div className="min-w-0 break-words font-mono text-xs font-medium uppercase leading-tight tracking-[0.14em] text-dashboard-text-muted">
+    <div className="min-w-0 break-words font-sans text-xs font-medium leading-tight text-dashboard-text-muted">
       {props.children}
     </div>
   );

package/src/client/components/metrics/StatCard.tsx

@@ -14,7 +14,7 @@ export function StatCard(props: {
   return (
     <Card className="relative p-4 sm:p-5">
       <div className="flex items-start justify-between gap-4">
-        <div className="font-mono text-xs font-medium uppercase tracking-[0.14em] text-dashboard-text-muted">
+        <div className="font-sans text-xs font-medium text-dashboard-text-muted">
           {props.label}
         </div>
         <Icon aria-hidden="true" className="text-amber-400/55" size={15} />
@@ -23,7 +23,7 @@ export function StatCard(props: {
         {props.value}
       </div>
       {props.detail ? (
-        <div className="mt-2 font-mono text-xs leading-relaxed text-dashboard-text-muted">
+        <div className="mt-2 font-sans text-xs leading-relaxed text-dashboard-text-muted">
           {props.detail}
         </div>
       ) : null}

package/src/client/conversations/ConversationArchiveNotices.tsx

@@ -102,7 +102,7 @@ function ArchivedNotice(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/ConversationBrief.tsx

@@ -49,7 +49,7 @@ export function ConversationBrief(props: {
         <StatusChip tone={outcomeTones[content.outcome.status]}>
           {displayLabel(content.outcome.status)}
         </StatusChip>
-        <span className="font-mono text-xs text-dashboard-text-muted">
+        <span className="text-xs text-dashboard-text-muted">
           Brief v{props.brief.version} · updated{" "}
           {formatTime(props.brief.updatedAt, {
             dateStyle: "medium",
@@ -101,14 +101,14 @@ export function ConversationBrief(props: {
                       key={`${link.kind}:${link.url}`}
                     >
                       <a
-                        className="min-w-0 break-all font-medium text-cyan-200 underline decoration-cyan-300/30 underline-offset-2 hover:text-cyan-100"
+                        className="min-w-0 break-all font-medium text-dashboard-accent-text underline decoration-dashboard-accent/30 underline-offset-2 hover:text-dashboard-accent-text"
                         href={link.url}
                         rel="noopener noreferrer"
                         target="_blank"
                       >
                         {link.label}
                       </a>
-                      <span className="font-mono text-xs text-dashboard-text-muted">
+                      <span className="text-xs text-dashboard-text-muted">
                         {displayLabel(link.kind)}
                       </span>
                       {link.status ? (
@@ -172,7 +172,7 @@ function BriefDecisions(props: { decisions: BriefContent["decisions"] }) {
             <span className="min-w-0">{decision.text}</span>
           </div>
           {decision.by ? (
-            <div className="mt-0.5 font-mono text-xs text-dashboard-text-muted">
+            <div className="mt-0.5 text-xs text-dashboard-text-muted">
               by · {decision.by}
             </div>
           ) : null}

package/src/client/conversations/ConversationChildAgents.tsx

@@ -110,21 +110,30 @@ function ChildAgentRow(props: {
   // A title is often a short form of the task. Skip the task when it adds nothing.
   const detail = agent.title && task && task !== agent.title ? task : undefined;
   const runtime = formatRuntime(agent.cumulativeDurationMs);
+  // Totals include this subagent's own subagents. Say so, so the row does not
+  // read as the work of this subagent alone.
+  const nested = agent.childAgentTotals?.count;
   const stats = [
     formatUsageTotal(agent.cumulativeUsage),
     formatConversationCostTotal(agent.cumulativeUsage, agent.auxiliaryCosts),
     runtime ? `${runtime} runtime` : "",
+    nested
+      ? `incl. ${nested} nested ${nested === 1 ? "subagent" : "subagents"}`
+      : "",
   ].filter(Boolean);
 
   return (
     <button
-      className="grid w-full min-w-0 cursor-pointer gap-1.5 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface px-3 py-2.5 text-left text-inherit transition-colors duration-200 hover:border-dashboard-border-emphasis hover:bg-dashboard-surface-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus"
+      className="grid w-full min-w-0 cursor-pointer gap-1.5 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface-panel px-3 py-2.5 text-left text-inherit transition-colors duration-200 hover:border-dashboard-border-emphasis hover:bg-dashboard-surface-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus"
       onClick={() =>
         props.onOpen({
           conversationId: agent.conversationId,
           ...(agent.redacted
             ? undefined
-            : { label: agent.title ?? agent.name }),
+            : {
+                ...(agent.name ? { agentName: agent.name } : undefined),
+                label: agent.title ?? agent.name,
+              }),
           status: agent.status,
         })
       }
@@ -137,7 +146,7 @@ function ChildAgentRow(props: {
             Private subagent
           </span>
         ) : (
-          <span className="min-w-0 truncate font-mono text-dashboard-text-muted">
+          <span className="min-w-0 truncate font-medium text-dashboard-text-muted">
             {agent.name ?? "subagent"}
           </span>
         )}
@@ -179,7 +188,7 @@ function ChildAgentRow(props: {
         </span>
       ) : null}
       {stats.length > 0 ? (
-        <span className="block font-mono text-xs tabular-nums text-dashboard-text-muted">
+        <span className="block text-xs tabular-nums text-dashboard-text-muted">
           {stats.join(" · ")}
         </span>
       ) : null}

package/src/client/conversations/ConversationComposer.tsx

@@ -351,7 +351,7 @@ export const ConversationComposer = memo(function ConversationComposer(
       {props.error || imageError ? (
         <div
           aria-live="polite"
-          className="min-w-0 font-mono text-xs leading-relaxed text-red-300/80"
+          className="min-w-0 font-sans text-xs leading-relaxed text-rose-300"
         >
           {imageError ?? props.error}
         </div>
@@ -361,10 +361,10 @@ export const ConversationComposer = memo(function ConversationComposer(
           // Accessory chrome needs a full footer row. Side-by-side mobile is
           // only for the bare reply dock.
           props.footerStart
-            ? "block overflow-hidden focus-within:border-cyan-300/35 focus-within:ring-1 focus-within:ring-cyan-300/35"
-            : "grid grid-cols-[minmax(0,1fr)_auto] items-end overflow-hidden focus-within:border-cyan-300/35 focus-within:ring-1 focus-within:ring-cyan-300/35 md:block",
+            ? "block overflow-hidden focus-within:border-dashboard-focus/45 focus-within:ring-1 focus-within:ring-dashboard-focus/25"
+            : "grid grid-cols-[minmax(0,1fr)_auto] items-end overflow-hidden focus-within:border-dashboard-accent/35 focus-within:ring-1 focus-within:ring-dashboard-focus/35 md:block",
           dashboardComposerSurfaceClass,
-          dragging && "ring-2 ring-cyan-300",
+          dragging && "ring-2 ring-dashboard-focus",
         )}
         onDragOver={(event) => {
           if (!event.dataTransfer.types.includes("Files")) return;
@@ -431,7 +431,7 @@ export const ConversationComposer = memo(function ConversationComposer(
           autoCapitalize="off"
           autoComplete="off"
           autoCorrect="off"
-          className="min-h-12 max-h-28 w-full resize-none overflow-y-auto border-0 bg-transparent px-3 py-3 font-sans text-base leading-relaxed text-dashboard-text outline-none placeholder:text-dashboard-text-muted/65 md:min-h-14 md:max-h-none md:resize-y md:overflow-visible md:px-4 md:py-3"
+          className="min-h-12 max-h-28 w-full resize-none overflow-y-auto border-0 bg-transparent px-3 py-3 font-sans text-base leading-relaxed text-dashboard-text outline-none placeholder:text-dashboard-text-muted/65 md:min-h-14 md:max-h-none md:overflow-visible md:px-4 md:py-3"
           disabled={Boolean(props.restoreDraftOnError && createPending)}
           enterKeyHint="send"
           id={id}
@@ -462,6 +462,7 @@ export const ConversationComposer = memo(function ConversationComposer(
               aria-label="Attach images"
               disabled={sendLocked || readingImages}
               onClick={() => fileInputRef.current?.click()}
+              size="icon"
               title="Attach images (up to 3 MB total)"
               type="button"
             >
@@ -478,7 +479,6 @@ export const ConversationComposer = memo(function ConversationComposer(
             {props.onStop ? (
               <Button
                 aria-label={props.stopPending ? "Stopping" : "Stop"}
-                className="rounded-lg font-sans"
                 disabled={props.stopPending || !online}
                 onClick={() => void stopTurn()}
                 title="Stop Junior"
@@ -491,7 +491,7 @@ export const ConversationComposer = memo(function ConversationComposer(
             ) : null}
             <Button
               aria-label={sendLocked ? "Sending message" : props.submitLabel}
-              className="rounded-lg !border-0 !bg-cyan-100 font-sans !text-dashboard-text-inverse hover:!bg-cyan-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-cyan-300/55 disabled:!bg-dashboard-fill-hover disabled:!text-dashboard-text-muted"
+              className="disabled:!border-transparent disabled:!bg-dashboard-fill-hover disabled:!text-dashboard-text-muted disabled:!opacity-100"
               disabled={
                 (!canSend && !images.length) ||
                 !online ||
@@ -499,6 +499,7 @@ export const ConversationComposer = memo(function ConversationComposer(
                 readingImages
               }
               title={sendLocked ? "Sending message" : props.submitLabel}
+              tone="primary"
               type="submit"
             >
               <Send aria-hidden="true" size={14} />

package/src/client/conversations/ConversationHeader.tsx

@@ -114,7 +114,7 @@ export function ConversationHeader(props: {
         <Ellipsis aria-hidden="true" size={18} strokeWidth={2} />
       </HeaderIconButton>
       {mobileMenuOpen ? (
-        <div className="absolute right-0 top-[calc(100%+0.35rem)] z-40 w-56 rounded-xl border border-white/[0.08] bg-dashboard-surface-raised/95 p-1.5 shadow-2xl shadow-black/75 backdrop-blur-xl">
+        <div className="absolute right-0 top-[calc(100%+0.35rem)] z-40 w-56 rounded-xl border border-dashboard-border-strong bg-dashboard-surface-raised/95 p-1.5 shadow-2xl shadow-black/75 backdrop-blur-xl">
           <ConversationHeaderActions
             archive={props.archive}
             conversationId={props.conversationId}
@@ -138,7 +138,7 @@ export function ConversationHeader(props: {
           />
           {openMobileNavigation ? (
             <button
-              className="mt-0.5 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"
+              className="mt-0.5 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-hover focus-visible:bg-dashboard-fill-hover focus-visible:outline-none"
               onClick={() => {
                 setMobileMenuOpen(false);
                 openMobileNavigation();
@@ -175,7 +175,7 @@ export function ConversationHeader(props: {
       <MobileHeaderLivePortal>{liveIndicator}</MobileHeaderLivePortal>
       <header
         className={cn(
-          "sticky top-0 z-10 -mx-4 border-b border-dashboard-border-emphasis bg-dashboard-bg md:-mx-7",
+          "sticky top-0 z-10 -mx-4 border-b border-dashboard-border bg-dashboard-bg md:-mx-7",
           !showMobileHeader && "hidden md:block",
         )}
       >
@@ -221,12 +221,12 @@ export function ConversationHeader(props: {
         {props.linkedWork ? (
           <div
             aria-label="Linked work"
-            className="border-t border-dashboard-border bg-dashboard-surface-panel px-4 py-3 md:px-7"
+            className="border-t border-dashboard-border-subtle px-4 py-2.5 md:px-7"
           >
             {props.linkedWork}
           </div>
         ) : null}
-        <div className="hidden border-t border-dashboard-border px-7 md:flex">
+        <div className="hidden border-t border-dashboard-border-subtle px-7 md:flex">
           <TranscriptViewToggle
             labelled
             onChange={props.onViewChange}

package/src/client/conversations/ConversationHeaderActions.tsx

@@ -96,7 +96,7 @@ export function ConversationHeaderActions(props: {
       <Button
         aria-label="Conversation details"
         aria-pressed={props.detailsOpen}
-        className="ml-2 rounded-lg font-sans text-xs"
+        className="ml-2"
         onClick={props.onDetailsClick}
       >
         <PanelRight aria-hidden="true" size={15} strokeWidth={2} />
@@ -153,13 +153,13 @@ function ViewModeButton(props: {
     <ToggleButton
       aria-label={props.label}
       className={cn(
-        "!normal-case !no-underline font-sans",
+        "!no-underline",
         props.labelled
-          ? "relative flex h-11 items-center gap-2 px-0 py-0 text-xs after:absolute after:inset-x-0 after:bottom-0 after:h-0.5"
-          : "grid size-7 place-items-center rounded px-0 py-0",
+          ? "relative flex h-11 items-center gap-2 rounded-none px-0 py-0 text-sm after:absolute after:inset-x-0 after:bottom-0 after:h-0.5"
+          : "grid size-7 place-items-center rounded-md px-0 py-0",
         props.active &&
           (props.labelled
-            ? "text-cyan-100 after:bg-cyan-100"
+            ? "text-dashboard-text after:bg-dashboard-text-solid"
             : "bg-dashboard-fill-hover text-dashboard-text"),
       )}
       onClick={props.onClick}
@@ -191,7 +191,7 @@ export function HeaderIconButton(props: {
         aria-pressed={props.pressed}
         className={cn(
           "text-dashboard-text-muted",
-          props.pressed && "bg-white/10 text-dashboard-text",
+          props.pressed && "bg-dashboard-fill-strong text-dashboard-text",
         )}
         onClick={props.onClick}
         size="icon"
@@ -233,8 +233,8 @@ function MenuActionButton(props: {
       aria-label={props.label}
       aria-pressed={props.pressed}
       className={cn(
-        "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",
-        props.pressed && "bg-white/[0.08]",
+        "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",
+        props.pressed && "bg-dashboard-fill-strong",
       )}
       onClick={props.onClick}
       type="button"
@@ -258,7 +258,7 @@ function ArchiveConversationButton(
     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.disabled}
         onClick={props.onClick}
         type="button"

package/src/client/conversations/ConversationHomeList.tsx

@@ -172,7 +172,7 @@ function ConversationCardSection(props: {
   return (
     <section aria-labelledby={`conversation-section-${props.section.key}`}>
       <h3
-        className="mb-2 mt-0 px-1 font-display text-xs font-semibold uppercase tracking-[0.08em] text-dashboard-text-muted"
+        className="mb-2 mt-0 px-1 font-sans text-xs font-medium text-dashboard-text-muted"
         id={`conversation-section-${props.section.key}`}
       >
         {props.section.label}
@@ -238,7 +238,7 @@ function ConversationCard(props: {
         </div>
         <div className="flex items-start gap-3">
           <Link
-            className="pointer-events-auto whitespace-nowrap font-mono text-xs text-dashboard-text-muted hover:text-dashboard-text focus:outline-none focus:ring-2 focus:ring-dashboard-focus"
+            className="pointer-events-auto whitespace-nowrap font-sans text-xs tabular-nums text-dashboard-text-muted hover:text-dashboard-text focus:outline-none focus:ring-2 focus:ring-dashboard-focus"
             to={conversationPath(conversation.id)}
           >
             {formatRelativeTime(conversation.lastSeenAt)}
@@ -272,7 +272,7 @@ function ConversationCard(props: {
           {status === "active" ? "Working…" : "No recent message"}
         </p>
       )}
-      <div className="relative z-[1] flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1 font-mono text-xs text-dashboard-text-muted pointer-events-none">
+      <div className="relative z-[1] flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1 font-sans text-xs text-dashboard-text-muted pointer-events-none">
         {location ? <span className="truncate">{location}</span> : null}
         {location && participants.length > 0 ? (
           <span aria-hidden="true">·</span>

package/src/client/conversations/ConversationListStatusIcon.tsx

@@ -45,7 +45,7 @@ export function ConversationListStatusIcon(props: {
       className={cn(
         "size-1.5 shrink-0 rounded-full",
         props.status === "failed" && "bg-rose-300",
-        props.status === "idle" && "bg-white/25",
+        props.status === "idle" && "bg-dashboard-text-faint",
       )}
     />
   );

package/src/client/conversations/ConversationMemories.tsx

@@ -66,17 +66,17 @@ export function ConversationMemories(props: { conversationId: string }) {
     <ol className="m-0 grid list-none gap-3 p-0">
       {query.data.memories.map((memory) => (
         <li
-          className="grid gap-2 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface px-3 py-3"
+          className="grid gap-2 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface-panel px-3 py-3"
           key={memory.id}
         >
           <p className="m-0 whitespace-pre-wrap break-words text-sm leading-relaxed text-dashboard-text">
             {memory.content}
           </p>
-          <div className="flex flex-wrap items-center gap-1.5 font-mono text-xs text-dashboard-text-muted">
-            <span className="rounded border border-dashboard-border-subtle bg-dashboard-surface-raised px-1.5 py-0.5">
+          <div className="flex flex-wrap items-center gap-1.5 text-xs tabular-nums text-dashboard-text-muted">
+            <span className="rounded-md border border-dashboard-border-subtle bg-dashboard-surface-raised px-1.5 py-0.5">
               {memory.kind}
             </span>
-            <span className="rounded border border-dashboard-border-subtle bg-dashboard-surface-raised px-1.5 py-0.5">
+            <span className="rounded-md border border-dashboard-border-subtle bg-dashboard-surface-raised px-1.5 py-0.5">
               {memory.visibility}
             </span>
             <time className="ml-auto" dateTime={memory.capturedAt}>

package/src/client/conversations/ConversationMeta.tsx

@@ -24,8 +24,13 @@ import {
 } from "../format";
 import { Tooltip } from "../components/Tooltip";
 import { MetricList, type MetricListItem } from "../components/Metric";
-import { cn } from "../styles";
-import { CostMetric, DurationMetric, TokenMetric } from "./TelemetryMetrics";
+import { cn, dashboardInlineLinkClass } from "../styles";
+import {
+  CostMetric,
+  DurationMetric,
+  SubagentsMetric,
+  TokenMetric,
+} from "./TelemetryMetrics";
 import type { Conversation } from "../types";
 import {
   projectSidebarAnnotationBadges,
@@ -44,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"
@@ -77,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}`}
@@ -171,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}
@@ -220,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
@@ -264,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={{
@@ -415,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}
@@ -466,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"
@@ -489,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}
@@ -598,6 +603,8 @@ function conversationStatItems(props: {
   const live = (props.detail?.status ?? props.conversation.status) === "active";
   const activeModelId = liveModelId(props.detail);
   const sourceTask = props.detail?.sourceTask;
+  const childAgentTotals =
+    props.detail?.childAgentTotals ?? props.conversation.childAgentTotals;
   const rawStats: Array<MetricListItem | undefined> = [
     location
       ? {
@@ -615,6 +622,8 @@ function conversationStatItems(props: {
       ? {
           content: (
             <DurationMetric
+              childAgentTotals={childAgentTotals}
+              durationMs={props.conversation.cumulativeDurationMs}
               endedAt={props.conversation.lastSeenAt}
               label={durationLabel}
               startedAt={props.conversation.startedAt}
@@ -627,6 +636,8 @@ function conversationStatItems(props: {
       ? {
           content: (
             <TokenMetric
+              detailsHint={variant === "compact"}
+              childAgentTotals={childAgentTotals}
               compactionCount={
                 completeDetail
                   ? completeDetail.events.filter(
@@ -650,10 +661,12 @@ function conversationStatItems(props: {
       ? {
           content: (
             <CostMetric
+              detailsHint={variant === "compact"}
               auxiliaryCosts={
                 props.detail?.auxiliaryCosts ??
                 props.conversation.auxiliaryCosts
               }
+              childAgentTotals={childAgentTotals}
               live={live}
               liveModelId={activeModelId}
               modelUsage={props.detail?.modelUsage}
@@ -663,6 +676,12 @@ function conversationStatItems(props: {
           key: "cost",
         }
       : undefined,
+    childAgentTotals
+      ? {
+          content: <SubagentsMetric childAgentTotals={childAgentTotals} />,
+          key: "subagents",
+        }
+      : undefined,
   ];
   return rawStats.filter((item): item is MetricListItem => item !== undefined);
 }

package/src/client/conversations/ConversationPage.tsx

@@ -37,6 +37,7 @@ import {
   hasConversationStats,
   PendingAuthorization,
 } from "./ConversationMeta";
+import { ConversationUsageBreakdown } from "./ConversationUsageBreakdown";
 import { PendingMailboxStack } from "./PendingMailboxStack";
 import {
   buildConversations,
@@ -185,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,
@@ -300,10 +302,16 @@ export function ConversationPage(props: {
                   conversation,
                   detail: detail.data,
                 }) ? (
-                  <ConversationStats
-                    conversation={conversation}
-                    detail={detail.data}
-                  />
+                  <div className="grid min-w-0 gap-5">
+                    <ConversationStats
+                      conversation={conversation}
+                      detail={detail.data}
+                    />
+                    <ConversationUsageBreakdown
+                      conversation={conversation}
+                      detail={detail.data}
+                    />
+                  </div>
                 ) : null
               }
               title={title}
@@ -320,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.