@sentry/junior-dashboard 0.248.0 → 0.249.0

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

@@ -124,13 +124,16 @@ function ChildAgentRow(props: {
 
   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,
         })
       }
@@ -143,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>
         )}
@@ -185,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,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"
           >