@sentry/junior-dashboard 0.247.0 → 0.249.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

@@ -0,0 +1,172 @@
+import { cn } from "../styles";
+import { ShimmerText } from "../components/ShimmerText";
+
+export type UsageCardRow = {
+  label: string;
+  live?: boolean;
+  /** Render the label in the code face, such as a model id. */
+  code?: boolean;
+  value: string;
+};
+
+export type UsageCardSection = {
+  /** Rows rolled up into one "N more" line, with their combined value. */
+  more?: { count: number; value: string };
+  rows: UsageCardRow[];
+  title: string;
+  /** Section total shown after the title, such as all auxiliary cost. */
+  total?: string;
+};
+
+export type UsageCardSplit = {
+  count: number;
+  self: string;
+  /** Share of the total that belongs to this agent, from 0 to 1. */
+  selfShare: number;
+  subagents: string;
+};
+
+export type UsageCardProps = {
+  /** Closing hint, such as where to find the full breakdown. */
+  footer?: string;
+  /** Muted detail after the title, such as a compaction count. */
+  note?: string;
+  sections: UsageCardSection[];
+  split?: UsageCardSplit;
+  title: string;
+  total: string;
+};
+
+const SELF_FILL = "bg-dashboard-focus/80";
+const SUBAGENT_FILL = "bg-dashboard-focus/30";
+
+function Swatch(props: { className: string }) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn("size-2 shrink-0 rounded-xs", props.className)}
+    />
+  );
+}
+
+/**
+ * Summarize one usage total: the total up top, how it splits between this
+ * agent and its subagents, then the largest contributors. Long lists roll
+ * their tail into one "N more" row so the card never needs to scroll.
+ */
+export function UsageCard(props: UsageCardProps) {
+  const selfPercent = Math.min(
+    100,
+    Math.max(0, (props.split?.selfShare ?? 1) * 100),
+  );
+  return (
+    <span className="grid gap-3">
+      <span
+        className={cn(
+          "grid gap-2.5",
+          (props.sections.length > 0 || props.footer) &&
+            "border-b border-dashboard-border pb-3",
+        )}
+      >
+        <span className="flex items-baseline justify-between gap-3">
+          <span className="min-w-0 truncate">
+            {props.title}
+            {props.note ? (
+              <span className="text-dashboard-text-faint"> · {props.note}</span>
+            ) : null}
+          </span>
+          <span className="whitespace-nowrap text-lg font-semibold tabular-nums text-dashboard-text">
+            {props.total}
+          </span>
+        </span>
+        {props.split ? (
+          <>
+            <span
+              aria-hidden="true"
+              className="flex h-1.5 overflow-hidden rounded-full bg-dashboard-fill-hover"
+            >
+              <span
+                className={SELF_FILL}
+                style={{ width: `${selfPercent}%` }}
+              />
+              <span
+                className={SUBAGENT_FILL}
+                style={{ width: `${100 - selfPercent}%` }}
+              />
+            </span>
+            <span className="flex flex-wrap justify-between gap-x-3 gap-y-1 tabular-nums">
+              <span className="inline-flex items-center gap-1.5 whitespace-nowrap">
+                <Swatch className={SELF_FILL} />
+                this agent
+                <span className="font-medium text-dashboard-text">
+                  {props.split.self}
+                </span>
+              </span>
+              <span className="inline-flex items-center gap-1.5 whitespace-nowrap">
+                <Swatch className={SUBAGENT_FILL} />
+                {props.split.count} subagent{props.split.count === 1 ? "" : "s"}
+                <span className="font-medium text-dashboard-text">
+                  {props.split.subagents}
+                </span>
+              </span>
+            </span>
+          </>
+        ) : null}
+      </span>
+      {props.sections.map((section) => (
+        <span
+          className="grid grid-cols-[minmax(0,1fr)_auto] gap-x-3 gap-y-2"
+          key={section.title}
+        >
+          <span className="col-span-2 font-sans font-medium text-dashboard-text-faint">
+            {section.title}
+            {section.total ? ` · ${section.total}` : null}
+          </span>
+          {section.rows.map((row) => (
+            <span className="contents" key={row.label}>
+              <span
+                className={cn(
+                  "flex min-w-0 items-baseline gap-2",
+                  row.code && "font-mono text-dashboard-text",
+                )}
+              >
+                <span className="min-w-0 truncate" title={row.label}>
+                  {row.label}
+                </span>
+                {row.live ? (
+                  <span className="shrink-0 font-sans text-2xs text-dashboard-text-muted">
+                    <ShimmerText active>in progress</ShimmerText>
+                  </span>
+                ) : null}
+              </span>
+              <span className="whitespace-nowrap text-right tabular-nums text-dashboard-text">
+                {row.value}
+              </span>
+            </span>
+          ))}
+          {section.more ? (
+            <>
+              <span className="text-dashboard-text-faint">
+                {section.more.count} more
+              </span>
+              <span className="whitespace-nowrap text-right tabular-nums">
+                {section.more.value}
+              </span>
+            </>
+          ) : null}
+        </span>
+      ))}
+      {props.footer ? (
+        <span
+          className={cn(
+            "text-dashboard-text-faint",
+            props.sections.length > 0 &&
+              "border-t border-dashboard-border pt-3",
+          )}
+        >
+          {props.footer}
+        </span>
+      ) : 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/format.ts

@@ -919,6 +919,7 @@ export function buildConversations(
       channel: summary.channel,
       channelName: summary.channelName,
       channelNameRedacted: summary.channelNameRedacted,
+      childAgentTotals: summary.childAgentTotals,
       cumulativeDurationMs: summary.cumulativeDurationMs,
       cumulativeUsage: summary.cumulativeUsage,
       displayTitle: summary.displayTitle,

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