@sentry/junior-dashboard 0.248.0 → 0.249.0

package/src/client/conversations/TranscriptSubagentView.tsx

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

package/src/client/conversations/TranscriptText.tsx

@@ -26,11 +26,12 @@ export const TranscriptText = memo(function TranscriptText(props: {
         }
 
         return (
-          <HighlightedCode
-            code={block.code}
+          <div
+            className="min-w-0 overflow-hidden rounded-md border border-dashboard-border-subtle bg-dashboard-surface-panel px-3 py-2.5"
             key={index}
-            language={block.language}
-          />
+          >
+            <HighlightedCode code={block.code} language={block.language} />
+          </div>
         );
       })}
     </div>

package/src/client/conversations/TranscriptToolView.tsx

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

package/src/client/conversations/TranscriptTurnContextView.tsx

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

package/src/client/conversations/TranscriptView.tsx

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

package/src/client/conversations/UsageCard.tsx

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

package/src/client/conversations/eventTranscript.ts

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

package/src/client/conversations/transcriptMarkdownLinks.ts

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

package/src/client/conversations/transcriptStyles.ts

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

package/src/client/pages/PersonalTokensPage.tsx

@@ -110,11 +110,11 @@ export function PersonalTokensPage() {
 
         <Card className="mb-0 mt-6" padding="md" variant="raised">
           {createdToken ? (
-            <div className="mt-5 rounded border border-emerald-400/40 bg-emerald-400/5 p-3">
+            <div className="mt-5 rounded-md border border-emerald-400/40 bg-emerald-400/5 p-3">
               <p className="mt-0 mb-2 text-sm font-semibold">
                 Copy this token now. It won't be shown again.
               </p>
-              <code className="block overflow-x-auto rounded bg-black p-2 text-xs text-emerald-300">
+              <code className="block overflow-x-auto rounded-md bg-dashboard-ink p-2 text-xs text-emerald-300">
                 {createdToken.token}
               </code>
               <Button
@@ -166,10 +166,10 @@ export function PersonalTokensPage() {
             ) : (
               tokens.map((token) => (
                 <div
-                  className="flex items-center gap-3 rounded border border-white/10 p-3"
+                  className="flex items-center gap-3 rounded-md border border-dashboard-border-strong p-3"
                   key={token.id}
                 >
-                  <KeyRound className="text-[#beaaff]" size={16} />
+                  <KeyRound className="text-dashboard-accent" size={16} />
                   <div className="min-w-0 flex-1">
                     <p className="m-0 truncate text-sm font-semibold">
                       {token.name}

package/src/client/pages/admin/AdminPage.tsx

@@ -31,7 +31,7 @@ export function AdminPage(props: { pages: PluginUserPageLink[] }) {
         {adminPages.length === 0 ? (
           <Card padding="md">
             <div className="flex items-center gap-4">
-              <div className="grid size-10 shrink-0 place-items-center rounded border border-white/[0.07] bg-white/[0.025] text-dashboard-text-muted">
+              <div className="grid size-10 shrink-0 place-items-center rounded-md border border-dashboard-border bg-dashboard-fill-soft text-dashboard-text-muted">
                 <Boxes aria-hidden="true" size={17} />
               </div>
               <p className="m-0 text-sm text-dashboard-text-muted">
@@ -50,7 +50,7 @@ export function AdminPage(props: { pages: PluginUserPageLink[] }) {
                 <Card padding="md">
                   <div className="flex items-center gap-3">
                     <div className="min-w-0 flex-1">
-                      <div className="font-mono text-xs uppercase tracking-[0.12em] text-dashboard-text-muted">
+                      <div className="font-sans font-medium text-xs text-dashboard-text-muted">
                         {page.pluginDisplayName}
                       </div>
                       <h2 className="mt-1 mb-0 font-display text-base font-medium text-dashboard-text">

package/src/client/pages/automations/AutomationCostChart.tsx

@@ -45,7 +45,7 @@ export function AutomationCostChart(props: {
         <h2 className="m-0 font-display text-xl font-medium text-dashboard-text">
           {formatCostSummary({ total }) || "$0.00"}
         </h2>
-        <p className="mt-1 mb-0 font-mono text-xs leading-relaxed text-dashboard-text-muted">
+        <p className="mt-1 mb-0 font-sans text-xs leading-relaxed text-dashboard-text-muted">
           Spend from conversations linked to completed automation executions.
         </p>
       </div>
@@ -112,7 +112,7 @@ export function AutomationCostChart(props: {
           />
         </ChartSvg>
         {!hasCost ? (
-          <div className="pointer-events-none absolute inset-0 grid place-items-center pt-12 font-mono text-xs text-dashboard-text-muted">
+          <div className="pointer-events-none absolute inset-0 grid place-items-center pt-12 font-sans text-xs text-dashboard-text-muted">
             No linked spend in this period.
           </div>
         ) : null}

package/src/client/pages/automations/AutomationDetailsDrawer.tsx

@@ -17,6 +17,7 @@ import {
 import { conversationPath } from "../../conversations/conversationRoutes";
 import { formatTime, peoplePath } from "../../format";
 import { TranscriptText } from "../../conversations/TranscriptText";
+import { cn, dashboardInlineLinkClass } from "../../styles";
 
 /** Show one automation's instruction and metadata in a right-side slide-out. */
 export function AutomationDetailsDrawer(props: {
@@ -30,7 +31,7 @@ export function AutomationDetailsDrawer(props: {
   const { automation } = props;
   const createdBy = automation.createdByEmail ? (
     <Link
-      className="font-semibold text-dashboard-text underline decoration-white/20 underline-offset-2 transition-colors hover:decoration-white/60"
+      className={cn("font-semibold", dashboardInlineLinkClass)}
       to={peoplePath(automation.createdByEmail)}
     >
       {automation.ownedByViewer ? "you" : automation.createdBy}
@@ -175,10 +176,7 @@ function AutomationExecutionSummary(props: {
   return (
     <div className="text-sm text-dashboard-text-muted">
       {automation.totalRuns > 0 ? (
-        <Link
-          className="text-dashboard-text underline decoration-white/20 underline-offset-2 hover:decoration-white/60"
-          to={executionsPath}
-        >
+        <Link className={dashboardInlineLinkClass} to={executionsPath}>
           {runCount} runs / {rangeLabel}
         </Link>
       ) : (
@@ -189,10 +187,7 @@ function AutomationExecutionSummary(props: {
       <span className="mx-2 opacity-45">·</span>
       <span>
         {automation.totalRuns > 0 ? (
-          <Link
-            className="text-dashboard-text underline decoration-white/20 underline-offset-2 hover:decoration-white/60"
-            to={executionsPath}
-          >
+          <Link className={dashboardInlineLinkClass} to={executionsPath}>
             {automation.totalRuns} total
           </Link>
         ) : (
@@ -201,7 +196,7 @@ function AutomationExecutionSummary(props: {
         {automation.lastRunAt ? " · Last run " : " · Never run"}
         {automation.lastRunAt && automation.lastConversationId ? (
           <Link
-            className="text-dashboard-text underline decoration-white/20 underline-offset-2 hover:decoration-white/60"
+            className={dashboardInlineLinkClass}
             to={conversationPath(automation.lastConversationId)}
           >
             {formatAutomationRunTime(automation.lastRunAt)}

package/src/client/pages/automations/AutomationEditor.tsx

@@ -425,7 +425,7 @@ export function AutomationEditor(props: {
           <div className="flex shrink-0 gap-2">
             <Link
               to={props.returnPath}
-              className="inline-flex min-h-11 items-center rounded border border-dashboard-border-emphasis px-3 text-sm text-dashboard-text no-underline sm:min-h-9"
+              className="inline-flex min-h-11 items-center rounded-md border border-dashboard-border-emphasis px-3 text-sm text-dashboard-text no-underline sm:min-h-9"
             >
               Cancel
             </Link>

package/src/client/pages/automations/AutomationExecutionChart.tsx

@@ -45,7 +45,7 @@ export function AutomationExecutionChart(props: {
         <h2 className="m-0 font-display text-xl font-medium text-dashboard-text">
           {totals.reduce((sum, value) => sum + value, 0).toLocaleString()} runs
         </h2>
-        <p className="mt-1 mb-0 font-mono text-xs leading-relaxed text-dashboard-text-muted">
+        <p className="mt-1 mb-0 font-sans text-xs leading-relaxed text-dashboard-text-muted">
           Completed automation executions over time.
         </p>
       </div>
@@ -104,7 +104,7 @@ export function AutomationExecutionChart(props: {
           />
         </ChartSvg>
         {!hasExecutions ? (
-          <div className="pointer-events-none absolute inset-0 grid place-items-center pt-12 font-mono text-xs text-dashboard-text-muted">
+          <div className="pointer-events-none absolute inset-0 grid place-items-center pt-12 font-sans text-xs text-dashboard-text-muted">
             No automation executions in this period.
           </div>
         ) : null}

package/src/client/pages/automations/AutomationExecutionStatusChart.tsx

@@ -44,7 +44,7 @@ export function AutomationExecutionStatusChart(props: {
         <h2 className="m-0 font-display text-xl font-medium text-dashboard-text">
           Executions over time
         </h2>
-        <p className="mt-1 mb-0 font-mono text-xs leading-relaxed text-dashboard-text-muted">
+        <p className="mt-1 mb-0 font-sans text-xs leading-relaxed text-dashboard-text-muted">
           {bucketUnit === "hour"
             ? "Terminal runs for this automation each hour."
             : bucketUnit === "6hour"
@@ -121,7 +121,7 @@ export function AutomationExecutionStatusChart(props: {
           />
         </ChartSvg>
         {!hasExecutions ? (
-          <div className="pointer-events-none absolute inset-0 grid place-items-center pt-12 font-mono text-xs text-dashboard-text-muted">
+          <div className="pointer-events-none absolute inset-0 grid place-items-center pt-12 font-sans text-xs text-dashboard-text-muted">
             No automation executions in this period.
           </div>
         ) : null}

package/src/client/pages/automations/AutomationExecutionsPage.tsx

@@ -87,7 +87,7 @@ export function AutomationExecutionsPage(props: { enabled: boolean }) {
               : "Automation executions could not be loaded. Try again."}
           </InlineError>
           <Link
-            className="mt-3 inline-flex items-center gap-2 font-mono text-xs text-dashboard-text-muted no-underline hover:text-dashboard-text"
+            className="mt-3 inline-flex items-center gap-2 font-sans text-xs text-dashboard-text-muted no-underline hover:text-dashboard-text"
             to={
               automationId ? automationPath(automationId) : "/automations/list"
             }
@@ -122,7 +122,7 @@ function AutomationExecutionsView(props: {
     <>
       <div>
         <Link
-          className="mb-3 inline-flex items-center gap-2 font-mono text-xs text-dashboard-text-muted no-underline hover:text-dashboard-text"
+          className="mb-3 inline-flex items-center gap-2 font-sans text-xs text-dashboard-text-muted no-underline hover:text-dashboard-text"
           to={props.backTo}
         >
           <ArrowLeft aria-hidden="true" size={14} />
@@ -177,7 +177,7 @@ function AutomationExecutionsView(props: {
             <div className="min-w-[36rem]">
               <div
                 className={cn(
-                  "sticky top-0 z-[1] hidden items-center gap-4 border-b border-dashboard-border-subtle bg-dashboard-overlay-soft px-4 py-2.5 font-mono text-xs uppercase tracking-[0.1em] text-dashboard-text-muted md:grid",
+                  "sticky top-0 z-[1] hidden items-center gap-4 border-b border-dashboard-border-subtle bg-dashboard-overlay-soft px-4 py-2.5 font-sans font-medium text-xs text-dashboard-text-muted md:grid",
                   EXECUTION_GRID,
                 )}
                 role="row"
@@ -290,7 +290,7 @@ function MetricCell(props: { label: string; value: string }) {
     <div className="min-w-0 max-md:flex max-md:items-center max-md:gap-2">
       <div
         aria-hidden="true"
-        className="mb-1 hidden font-mono text-2xs uppercase tracking-[0.1em] text-dashboard-text-muted max-md:mb-0 max-md:block"
+        className="mb-1 hidden font-sans font-medium text-2xs text-dashboard-text-muted max-md:mb-0 max-md:block"
       >
         {props.label}
       </div>

package/src/client/pages/automations/AutomationRow.tsx

@@ -58,7 +58,7 @@ export function AutomationRow(props: {
           <button
             aria-expanded={props.selected}
             aria-label={`View automation details: ${automation.title}`}
-            className="block w-full min-w-0 cursor-pointer rounded border-0 bg-transparent p-0 text-left focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
+            className="block w-full min-w-0 cursor-pointer rounded-md border-0 bg-transparent p-0 text-left focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
             onClick={props.onSelect}
             type="button"
           >
@@ -88,7 +88,7 @@ export function AutomationRow(props: {
           <div className="mt-2.5 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs text-dashboard-text-muted">
             {automation.createdByEmail ? (
               <Link
-                className="inline-flex min-w-0 max-w-full items-center gap-2 rounded text-dashboard-text no-underline hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
+                className="inline-flex min-w-0 max-w-full items-center gap-2 rounded-md text-dashboard-text no-underline hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
                 title={automation.createdBy}
                 to={peoplePath(automation.createdByEmail)}
               >
@@ -320,12 +320,12 @@ function AutomationActions(props: {
           <Link
             role="menuitem"
             to={props.editPath}
-            className="flex min-h-11 items-center rounded px-3 text-sm text-dashboard-text no-underline hover:bg-dashboard-fill-hover focus-visible:outline focus-visible:outline-dashboard-focus"
+            className="flex min-h-11 items-center rounded-md px-3 text-sm text-dashboard-text no-underline hover:bg-dashboard-fill-hover focus-visible:outline focus-visible:outline-dashboard-focus"
           >
             Edit automation
           </Link>
           <button
-            className="flex min-h-11 w-full cursor-pointer items-center gap-2 rounded border-0 bg-transparent px-3 text-sm text-rose-300 hover:bg-dashboard-fill-hover focus-visible:bg-dashboard-fill-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
+            className="flex min-h-11 w-full cursor-pointer items-center gap-2 rounded-md border-0 bg-transparent px-3 text-sm text-rose-300 hover:bg-dashboard-fill-hover focus-visible:bg-dashboard-fill-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
             onClick={() => {
               close();
               props.onDelete();

package/src/client/pages/automations/AutomationRunsPage.tsx

@@ -156,7 +156,7 @@ export function AutomationRunsPage(props: { enabled: boolean }) {
                 <div className="min-w-[44rem]">
                   <div
                     className={cn(
-                      "sticky top-0 z-[1] hidden items-center gap-4 border-b border-dashboard-border-subtle bg-dashboard-overlay-soft px-4 py-2.5 font-mono text-xs uppercase tracking-[0.1em] text-dashboard-text-muted md:grid",
+                      "sticky top-0 z-[1] hidden items-center gap-4 border-b border-dashboard-border-subtle bg-dashboard-overlay-soft px-4 py-2.5 font-sans font-medium text-xs text-dashboard-text-muted md:grid",
                       RUN_GRID,
                     )}
                     role="row"
@@ -278,7 +278,7 @@ function MetricCell(props: { label: string; value: string }) {
     <div className="min-w-0 max-md:flex max-md:items-center max-md:gap-2">
       <div
         aria-hidden="true"
-        className="mb-1 hidden font-mono text-2xs uppercase tracking-[0.1em] text-dashboard-text-muted max-md:mb-0 max-md:block"
+        className="mb-1 hidden font-sans font-medium text-2xs text-dashboard-text-muted max-md:mb-0 max-md:block"
       >
         {props.label}
       </div>
@@ -297,7 +297,7 @@ function AutomationKindIcon(props: { kind: AutomationRun["kind"] }) {
   return (
     <span
       aria-label={label}
-      className="inline-flex size-3.5 shrink-0 items-center justify-center text-cyan-300/80"
+      className="inline-flex size-3.5 shrink-0 items-center justify-center text-dashboard-accent/80"
       role="img"
       title={label}
     >

package/src/client/pages/automations/AutomationScheduleFields.tsx

@@ -152,7 +152,7 @@ export function AutomationScheduleFields(props: {
                       })
                     }
                     className={cn(
-                      "min-h-11 cursor-pointer rounded border px-1 text-xs font-medium capitalize focus-visible:outline-2 focus-visible:outline-dashboard-focus sm:min-h-10 sm:text-sm",
+                      "min-h-11 cursor-pointer rounded-md border px-1 text-xs font-medium capitalize focus-visible:outline-2 focus-visible:outline-dashboard-focus sm:min-h-10 sm:text-sm",
                       value.weekdays?.includes(day)
                         ? "border-dashboard-focus/50 bg-dashboard-focus/10 text-dashboard-focus"
                         : "border-dashboard-border-emphasis text-dashboard-text-muted hover:bg-dashboard-fill-hover",

package/src/client/pages/automations/AutomationVersionsPage.tsx

@@ -77,7 +77,7 @@ export function AutomationVersionsPage(props: { enabled: boolean }) {
 function BackLink(props: { to: string }) {
   return (
     <Link
-      className="mb-3 inline-flex items-center gap-2 font-mono text-xs text-dashboard-text-muted no-underline hover:text-dashboard-text"
+      className="mb-3 inline-flex items-center gap-2 font-sans text-xs text-dashboard-text-muted no-underline hover:text-dashboard-text"
       to={props.to}
     >
       <ArrowLeft aria-hidden="true" size={14} />

package/src/client/pages/code/CodeActivityChart.tsx

@@ -40,7 +40,10 @@ export function CodeActivityChart(props: {
   const gap = Math.max(1, barWidth * 0.2);
   const groupWidth = barWidth * 3 + gap * 2;
   const totals = days.map((day) => day.created + day.merged + day.closed);
-  const maximum = Math.max(1, ...days.flatMap((day) => [day.created, day.merged, day.closed]));
+  const maximum = Math.max(
+    1,
+    ...days.flatMap((day) => [day.created, day.merged, day.closed]),
+  );
   const average = activityChartAverage(days.map((day) => day.created));
   const hasActivity = totals.some((total) => total > 0);
 
@@ -51,7 +54,7 @@ export function CodeActivityChart(props: {
           <h2 className="m-0 font-display text-xl font-medium text-dashboard-text">
             Changes over time
           </h2>
-          <p className="mt-1 mb-0 font-mono text-xs leading-relaxed text-dashboard-text-muted">
+          <p className="mt-1 mb-0 font-sans text-xs leading-relaxed text-dashboard-text-muted">
             Code changes created, merged, and closed each day.
           </p>
         </div>
@@ -106,9 +109,7 @@ export function CodeActivityChart(props: {
                 date={day.date}
                 summary={`${day.created} created, ${day.merged} merged, ${day.closed} closed`}
               >
-                <g
-                  tabIndex={0}
-                >
+                <g tabIndex={0}>
                   {series.map((entry, seriesIndex) => {
                     const height = (entry.value / maximum) * layout.plotHeight;
                     const x = groupX + seriesIndex * (barWidth + gap);
@@ -151,7 +152,7 @@ export function CodeActivityChart(props: {
           />
         </ChartSvg>
         {!hasActivity ? (
-          <div className="pointer-events-none absolute inset-0 grid place-items-center pt-12 font-mono text-xs text-dashboard-text-muted">
+          <div className="pointer-events-none absolute inset-0 grid place-items-center pt-12 font-sans text-xs text-dashboard-text-muted">
             No code changes in this period.
           </div>
         ) : null}

package/src/client/pages/code/CodeChangeRow.tsx

@@ -18,7 +18,7 @@ export function CodeChangeRow(props: { change: CodeChangeSummaryReport }) {
         <div className="truncate font-display text-sm text-dashboard-text">
           {change.url ? (
             <a
-              className="text-inherit no-underline hover:text-cyan-100"
+              className="text-inherit no-underline hover:text-dashboard-accent-text"
               href={change.url}
               rel="noreferrer"
               target="_blank"