@sentry/junior-dashboard 0.248.0 → 0.249.0

package/src/client/components/SegmentedNav.tsx

@@ -2,11 +2,6 @@ import { useLayoutEffect, useRef, useState, type CSSProperties } from "react";
 import { Link, NavLink, useLocation } from "react-router";
 
 import { pathWithSearch } from "../searchParams";
-import {
-  segmentedTabClass,
-  segmentedTabsFrameClass,
-  segmentedTabsInsetClass,
-} from "./SegmentedTabs";
 import { cn } from "../styles";
 
 export type SegmentedNavItem = {
@@ -84,7 +79,10 @@ function edgeFade(edges: HiddenEdges): CSSProperties | undefined {
 }
 
 /**
- * Show links between sibling pages in the segmented pill track.
+ * Show links between sibling pages as underline tabs. The current page has
+ * a solid underline that sits on the border below the row. App navigation
+ * uses pills and in-place panel switches use `SegmentedTabs`, so the three
+ * levels stay distinct.
  *
  * With `fill`, links share the row width equally while their labels fit.
  * Otherwise each link keeps its label width. When the links do not fit, the
@@ -139,26 +137,21 @@ export function SegmentedNav(props: {
 
   const linkClass = ({ isActive }: { isActive: boolean }) =>
     cn(
-      segmentedTabClass(isActive),
-      "flex items-center justify-center whitespace-nowrap no-underline",
+      "relative flex h-10 items-center justify-center whitespace-nowrap font-sans text-sm font-medium no-underline transition-colors after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus",
+      isActive
+        ? "text-dashboard-text after:bg-dashboard-text-solid"
+        : "text-dashboard-text-muted hover:text-dashboard-text",
       props.fill ? "min-w-max flex-[1_0_0]" : "shrink-0",
     );
 
   return (
     <nav
       aria-label={props.ariaLabel}
-      className={cn(
-        segmentedTabsFrameClass,
-        "flex min-w-0 max-w-full",
-        !props.fill && "w-fit",
-      )}
+      className={cn("flex min-w-0 max-w-full", !props.fill && "w-fit")}
     >
-      {/* Pad the scrolling row, not the frame, so the last link keeps its
-          padding when the row is scrolled to the end. */}
       <div
         className={cn(
-          segmentedTabsInsetClass,
-          "relative flex min-w-0 flex-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+          "relative -mx-1 flex gap-5 px-1 min-w-0 flex-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
         )}
         ref={rowRef}
         style={edgeFade(edges)}

package/src/client/components/SegmentedTabs.tsx

@@ -3,11 +3,11 @@ import { useId, type ReactNode } from "react";
 import { cn } from "../styles";
 
 /** Style the border and fill of the segmented pill track. */
-export const segmentedTabsFrameClass =
+const segmentedTabsFrameClass =
   "rounded-lg border border-dashboard-border bg-dashboard-surface-panel";
 
 /** Style the spacing inside the segmented pill track. */
-export const segmentedTabsInsetClass = "gap-1 p-1";
+const segmentedTabsInsetClass = "gap-1 p-1";
 
 /** Style one tab or link in the segmented pill track. */
 export function segmentedTabClass(selected: boolean): string {
@@ -88,7 +88,7 @@ export function SegmentedTabs<const Value extends string>(props: {
       </div>
       <div
         aria-labelledby={`${id}-${props.value}`}
-        className="min-w-0 rounded focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
+        className="min-w-0 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
         id={`${id}-panel`}
         role="tabpanel"
         tabIndex={0}

package/src/client/components/Select.tsx

@@ -10,7 +10,7 @@ export function Select({
     <select
       {...props}
       className={cn(
-        "block min-h-11 w-full min-w-0 rounded border border-dashboard-border-emphasis bg-dashboard-ink px-3 py-2 text-base text-dashboard-text focus:border-dashboard-focus focus:outline-none aria-invalid:border-rose-300 disabled:cursor-not-allowed disabled:opacity-60 sm:min-h-10 sm:text-sm",
+        "block min-h-11 w-full min-w-0 rounded-md border border-dashboard-border-emphasis bg-dashboard-ink px-3 py-2 text-base text-dashboard-text focus:border-dashboard-focus focus:outline-none aria-invalid:border-rose-300 disabled:cursor-not-allowed disabled:opacity-60 sm:min-h-10 sm:text-sm",
         className,
       )}
     />

package/src/client/components/SelectableRow.tsx

@@ -27,8 +27,8 @@ export function SelectableRow(props: {
       className={cn(
         "group cursor-pointer transition-colors",
         props.selected
-          ? "bg-cyan-300/[0.045]"
-          : "hover:bg-white/[0.035] focus-within:bg-white/[0.035]",
+          ? "bg-dashboard-accent/[0.045]"
+          : "hover:bg-dashboard-fill-soft focus-within:bg-dashboard-fill-soft",
         props.className,
       )}
       onClick={handleClick}

package/src/client/components/Skeleton.tsx

@@ -9,7 +9,7 @@ export function Skeleton(props: { as?: ElementType; className?: string }) {
     <Component
       aria-hidden="true"
       className={cn(
-        "animate-pulse rounded bg-dashboard-fill-soft motion-reduce:animate-none",
+        "animate-pulse rounded-md bg-dashboard-fill-soft motion-reduce:animate-none",
         props.className,
       )}
     />

package/src/client/components/StatusChip.tsx

@@ -13,7 +13,7 @@ export type StatusChipTone =
 export type StatusChipSize = "default" | "compact";
 
 const toneClass: Record<StatusChipTone, string> = {
-  accent: "text-violet-300",
+  accent: "text-dashboard-accent",
   danger: "text-rose-300",
   info: "text-cyan-300",
   neutral: "text-dashboard-text-muted",

package/src/client/components/StatusDot.tsx

@@ -5,7 +5,7 @@ const toneClass: Record<StatusChipTone, string> = {
   accent: "bg-violet-300",
   danger: "bg-rose-300",
   info: "bg-cyan-300",
-  neutral: "bg-white/30",
+  neutral: "bg-dashboard-text-faint",
   success: "bg-emerald-300",
   warning: "bg-amber-300",
 };

package/src/client/components/TextInput.tsx

@@ -3,7 +3,7 @@ import type { InputHTMLAttributes, TextareaHTMLAttributes } from "react";
 import { cn } from "../styles";
 
 const textControlClassName =
-  "block w-full rounded border border-dashboard-border-emphasis bg-dashboard-ink px-3 py-2 text-sm text-dashboard-text focus:border-dashboard-focus focus:outline-none aria-invalid:border-rose-300 disabled:cursor-not-allowed disabled:opacity-50";
+  "block w-full rounded-md border border-dashboard-border-emphasis bg-dashboard-ink px-3 py-2 font-sans text-sm text-dashboard-text placeholder:text-dashboard-text-muted/70 focus:border-dashboard-focus focus:outline-none focus:ring-1 focus:ring-dashboard-focus/25 aria-invalid:border-rose-300 disabled:cursor-not-allowed disabled:opacity-50";
 
 export type TextInputProps = Omit<
   InputHTMLAttributes<HTMLInputElement>,

package/src/client/components/Tooltip.tsx

@@ -166,7 +166,7 @@ export function Tooltip({
           className={cn(
             "z-50 select-text outline-none",
             className ??
-              "min-w-36 max-w-lg rounded-md border border-dashboard-border-emphasis bg-dashboard-surface-raised px-3 py-2 font-mono text-xs leading-relaxed text-dashboard-text-muted shadow-2xl shadow-black/70",
+              "min-w-36 max-w-lg rounded-md border border-dashboard-border-emphasis bg-dashboard-surface-raised px-3 py-2 font-sans text-xs leading-relaxed text-dashboard-text-muted shadow-2xl shadow-black/70",
           )}
           collisionPadding={VIEWPORT_GAP}
           hideWhenDetached
@@ -176,7 +176,7 @@ export function Tooltip({
           sideOffset={ANCHOR_GAP}
         >
           {label ? (
-            <div className="mb-1 font-semibold uppercase tracking-[0.1em] text-dashboard-text-muted">
+            <div className="mb-1 font-semibold text-dashboard-text-muted">
               {label}
             </div>
           ) : null}

package/src/client/components/VersionDriftBanner.tsx

@@ -7,12 +7,12 @@ export function VersionDriftBanner(props: { serverVersion?: string }) {
   return (
     <div
       aria-live="polite"
-      className="flex flex-wrap items-center justify-center gap-x-3 gap-y-1 border-t border-cyan-300/15 bg-cyan-300/[0.07] px-3 py-1.5 text-center font-sans text-xs text-cyan-100/80"
+      className="flex flex-wrap items-center justify-center gap-x-3 gap-y-1 border-t border-dashboard-accent/15 bg-dashboard-accent/[0.07] px-3 py-1.5 text-center font-sans text-xs text-dashboard-accent-text/80"
       role="status"
     >
       <span>The dashboard changed. Refresh to load the latest version.</span>
       <button
-        className="cursor-pointer border-0 bg-transparent p-0 font-mono font-semibold text-cyan-100 underline decoration-cyan-300/40 underline-offset-2 hover:text-dashboard-text-solid"
+        className="cursor-pointer border-0 bg-transparent p-0 font-sans font-semibold text-dashboard-accent-text underline decoration-dashboard-accent/40 underline-offset-2 hover:text-dashboard-text-solid"
         onClick={() => window.location.reload()}
         type="button"
       >

package/src/client/components/charts/ActivityChart.tsx

@@ -65,9 +65,7 @@ export function isActivityHourBucket(date: string): boolean {
 /** UTC start of a day (`YYYY-MM-DD`) or hour (`YYYY-MM-DDTHH`) bucket key. */
 export function activityBucketStartMs(date: string): number {
   return Date.parse(
-    isActivityHourBucket(date)
-      ? `${date}:00:00.000Z`
-      : `${date}T00:00:00.000Z`,
+    isActivityHourBucket(date) ? `${date}:00:00.000Z` : `${date}T00:00:00.000Z`,
   );
 }
 
@@ -134,7 +132,7 @@ const ChartSvgScaleContext = createContext(1);
 
 /** Shared visual style for SVG chart axis labels. */
 export const chartAxisLabelClassName =
-  "fill-white/50 font-mono leading-none text-dashboard-text-muted";
+  "fill-dashboard-text-muted font-sans tabular-nums leading-none text-dashboard-text-muted";
 
 type ChartAxisLabelProps = Omit<
   SVGProps<SVGTextElement>,
@@ -167,7 +165,7 @@ export function ChartAxisHtmlLabel(props: {
   return (
     <span
       className={cn(
-        "font-mono text-2xs leading-none text-dashboard-text-muted",
+        "font-sans tabular-nums text-2xs leading-none text-dashboard-text-muted",
         props.className,
       )}
       style={props.style}
@@ -331,7 +329,8 @@ export function activityChartAverage(values: readonly number[]): number {
 }
 
 /** Shared visual style for average-line labels. */
-export const chartAverageLabelClassName = "fill-white font-mono leading-none";
+export const chartAverageLabelClassName =
+  "fill-dashboard-text-solid font-sans tabular-nums leading-none";
 
 /** Solid chip behind average labels so series colors never wash out the text. */
 const chartAverageLabelChip = "rgba(9, 12, 14, 0.92)";

package/src/client/components/charts/CacheWrites.tsx

@@ -21,17 +21,17 @@ export function CacheWrites(props: {
   const unit = props.bucketUnit === "6hour" ? "6 hours" : props.bucketUnit;
   return (
     <details className="border-t border-dashboard-border-subtle px-4 py-3 sm:px-5">
-      <summary className="cursor-pointer font-mono text-xs text-dashboard-text focus-visible:outline focus-visible:outline-cyan-300">
+      <summary className="cursor-pointer font-sans tabular-nums text-xs text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus">
         Largest cache writes
       </summary>
-      <p className="mb-2 mt-3 font-mono text-xs leading-relaxed text-dashboard-text-muted">
+      <p className="mb-2 mt-3 font-sans tabular-nums text-xs leading-relaxed text-dashboard-text-muted">
         Top three by tokens written per {unit}, within the selected time window.
         Large writes alone do not mean a cache problem.
       </p>
       <div className="overflow-x-auto">
         <table
           aria-label="Largest cache writes"
-          className="w-full min-w-80 table-fixed border-collapse font-mono text-xs tabular-nums"
+          className="w-full min-w-80 table-fixed border-collapse font-sans text-xs tabular-nums"
         >
           <thead className="text-dashboard-text-muted">
             <tr>

package/src/client/components/charts/ChartHeader.tsx

@@ -4,11 +4,11 @@ import { cn } from "../../styles";
 
 /** Shared title style for chart headers and period-total values. */
 export const chartHeaderPrimaryClassName =
-  "m-0 font-mono text-sm font-medium text-dashboard-text";
+  "m-0 font-sans text-sm font-medium text-dashboard-text";
 
 /** Shared supporting copy style for chart descriptions and total captions. */
 export const chartHeaderSecondaryClassName =
-  "mt-1 mb-0 font-mono text-xs leading-relaxed text-dashboard-text-muted";
+  "mt-1 mb-0 font-sans text-xs leading-relaxed text-dashboard-text-muted";
 
 /**
  * Card header used by metric charts.
@@ -26,7 +26,7 @@ export function ChartHeader(props: {
   return (
     <div
       className={cn(
-        "flex flex-wrap items-start justify-between gap-3 border-b border-white/[0.06] px-4 py-4 sm:px-5",
+        "flex flex-wrap items-start justify-between gap-3 border-b border-dashboard-border-subtle px-4 py-4 sm:px-5",
         props.className,
       )}
     >
@@ -42,7 +42,7 @@ export function ChartHeader(props: {
           <div className={chartHeaderSecondaryClassName}>{totalLabel}</div>
         </div>
       ) : props.trailing ? (
-        <div className="font-mono text-xs text-dashboard-text-muted">
+        <div className="font-sans text-xs text-dashboard-text-muted">
           {props.trailing}
         </div>
       ) : null}

package/src/client/components/charts/ChartLegend.tsx

@@ -19,7 +19,7 @@ export function ChartLegend(props: {
     <ul
       aria-label={props.ariaLabel}
       className={cn(
-        "m-0 flex list-none flex-wrap gap-x-4 gap-y-1 p-0 font-mono text-2xs text-dashboard-text-muted",
+        "m-0 flex list-none flex-wrap gap-x-4 gap-y-1 p-0 font-sans text-2xs text-dashboard-text-muted",
         !props.inline && "mt-4",
       )}
     >

package/src/client/components/charts/InputCacheChart.tsx

@@ -69,7 +69,7 @@ export function InputCacheChart(props: {
           </div>
         }
       />
-      <dl className="m-0 flex flex-wrap gap-x-5 gap-y-2 px-4 py-3 font-mono text-xs sm:px-5">
+      <dl className="m-0 flex flex-wrap gap-x-5 gap-y-2 px-4 py-3 font-sans tabular-nums text-xs sm:px-5">
         {CACHE_INPUT_SERIES.map(({ key, label, color }) => (
           <div key={key} className="flex items-center gap-2">
             <dt className="flex items-center gap-1.5 text-dashboard-text-muted">
@@ -87,11 +87,11 @@ export function InputCacheChart(props: {
         ))}
       </dl>
       {summary.activePeriods === 0 ? (
-        <p className="m-0 px-4 pb-2 font-mono text-xs text-dashboard-text-muted sm:px-5">
+        <p className="m-0 px-4 pb-2 font-sans tabular-nums text-xs text-dashboard-text-muted sm:px-5">
           No input data in this time window.
         </p>
       ) : summary.incompletePeriods > 0 ? (
-        <p className="m-0 px-4 pb-2 font-mono text-xs text-dashboard-text-muted sm:px-5">
+        <p className="m-0 px-4 pb-2 font-sans tabular-nums text-xs text-dashboard-text-muted sm:px-5">
           Missing data in {summary.incompletePeriods} of {summary.activePeriods}{" "}
           active time intervals. Percentages are unavailable; Tokens shows the
           reported values.
@@ -183,8 +183,8 @@ export function InputCacheChart(props: {
         </ChartSvg>
       </div>
       <CacheWrites days={props.days} bucketUnit={props.bucketUnit} />
-      <details className="border-t border-dashboard-border-subtle px-4 py-3 font-mono text-xs text-dashboard-text-muted sm:px-5">
-        <summary className="cursor-pointer text-dashboard-text focus-visible:outline focus-visible:outline-cyan-300">
+      <details className="border-t border-dashboard-border-subtle px-4 py-3 font-sans tabular-nums text-xs text-dashboard-text-muted sm:px-5">
+        <summary className="cursor-pointer text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus">
           How to read this
         </summary>
         <div className="mt-3 grid gap-2 leading-relaxed">

package/src/client/components/charts/WorkspaceUsageChart.tsx

@@ -11,10 +11,7 @@ import {
 import { ChartHeader } from "./ChartHeader";
 import type { TimeRangeDays } from "../controls/TimeRangeSelector";
 import { Card } from "../layout/Card";
-import {
-  formatActivityChartAverage,
-  formatCompactNumber,
-} from "../../format";
+import { formatActivityChartAverage, formatCompactNumber } from "../../format";
 import type { WorkspaceUsageDay } from "./workspaceUsage";
 
 const USAGE_COLOR = "#a78bfa";
@@ -59,15 +56,11 @@ export function WorkspaceUsageChart(props: {
             return (
               <ActivityChartTooltip
                 key={day.date}
-                content={
-                  <ActivityTooltipRows rows={[["usage", day.count]]} />
-                }
+                content={<ActivityTooltipRows rows={[["usage", day.count]]} />}
                 date={day.date}
                 summary={`${day.count} switches`}
               >
-                <g
-                  tabIndex={0}
-                >
+                <g tabIndex={0}>
                   <rect
                     fill={USAGE_COLOR}
                     height={renderedHeight}
@@ -102,7 +95,7 @@ export function WorkspaceUsageChart(props: {
           />
         </ChartSvg>
         {!hasUsage ? (
-          <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 usage in this period.
           </div>
         ) : null}

package/src/client/components/controls/DirectorySortSelect.tsx

@@ -12,12 +12,12 @@ export function DirectorySortSelect(props: {
 }) {
   return (
     <label className="grid h-9 min-w-0 grid-cols-[auto_minmax(0,1fr)] items-center overflow-hidden rounded-lg border border-dashboard-border-strong bg-dashboard-fill-faint transition-colors hover:border-dashboard-border-emphasis focus-within:border-amber-500/35 focus-within:ring-1 focus-within:ring-amber-500/15">
-      <span className="flex h-full items-center border-r border-dashboard-border-subtle px-2 font-mono text-xs uppercase tracking-[0.12em] text-dashboard-text-muted">
+      <span className="flex h-full items-center border-r border-dashboard-border-subtle px-2 font-sans font-medium text-xs text-dashboard-text-muted">
         Sort
       </span>
       <select
         aria-label={props.ariaLabel}
-        className="h-full min-w-0 bg-dashboard-control px-2 font-mono text-xs text-dashboard-text-muted outline-none [color-scheme:var(--dashboard-color-scheme,dark)]"
+        className="h-full min-w-0 bg-dashboard-control px-2 font-sans text-xs text-dashboard-text-muted outline-none [color-scheme:var(--dashboard-color-scheme,dark)]"
         value={props.value}
         onChange={(event) => props.onChange(event.currentTarget.value)}
       >

package/src/client/components/directory/DirectoryMetric.tsx

@@ -6,11 +6,11 @@ export function DirectoryMetric(props: { label: string; value: ReactNode }) {
     <div className="justify-self-end text-right max-md:justify-self-stretch max-md:text-left">
       <div
         aria-hidden="true"
-        className="mb-1 hidden font-mono text-xs uppercase tracking-[0.1em] text-dashboard-text-muted max-md:block"
+        className="mb-1 hidden font-sans font-medium text-xs text-dashboard-text-muted max-md:block"
       >
         {props.label}
       </div>
-      <div className="font-display text-xl font-light leading-none text-dashboard-text md:font-mono md:text-xs md:text-dashboard-text-muted">
+      <div className="font-display text-xl font-light leading-none text-dashboard-text md:font-sans md:tabular-nums md:text-xs md:text-dashboard-text-muted">
         <span className="sr-only">{props.label}: </span>
         {props.value}
       </div>

package/src/client/components/directory/DirectoryRowsSkeleton.tsx

@@ -13,19 +13,19 @@ export function DirectoryRowsSkeleton(props: { wideRuntime?: boolean }) {
       {Array.from({ length: 5 }, (_, index) => (
         <div
           aria-hidden="true"
-          className={`grid min-w-0 ${gridColumns} items-center gap-4 border-b border-white/[0.055] px-4 py-3.5 last:border-b-0 max-md:gap-x-3 max-md:gap-y-4`}
+          className={`grid min-w-0 ${gridColumns} items-center gap-4 border-b border-dashboard-border-subtle px-4 py-3.5 last:border-b-0 max-md:gap-x-3 max-md:gap-y-4`}
           key={index}
         >
           <div className="flex min-w-0 items-center gap-3 max-md:col-span-3">
-            <span className="size-9 shrink-0 rounded bg-white/[0.07]" />
+            <span className="size-9 shrink-0 rounded-md bg-dashboard-fill-hover" />
             <div className="grid min-w-0 flex-1 gap-2">
-              <span className="h-3.5 w-2/5 rounded bg-white/[0.08]" />
-              <span className="h-2.5 w-3/5 rounded bg-white/[0.045]" />
+              <span className="h-3.5 w-2/5 rounded-md bg-dashboard-fill-strong" />
+              <span className="h-2.5 w-3/5 rounded-md bg-dashboard-fill-soft" />
             </div>
           </div>
           {[0, 1, 2].map((metric) => (
             <span
-              className="h-4 w-10 justify-self-end rounded bg-white/[0.06]"
+              className="h-4 w-10 justify-self-end rounded-md bg-dashboard-fill-hover"
               key={metric}
             />
           ))}

package/src/client/components/directory/DirectoryTable.tsx

@@ -43,7 +43,7 @@ export function DirectoryTable(props: {
       <div
         aria-hidden="true"
         className={cn(
-          "grid 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 max-md:hidden",
+          "grid 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 max-md:hidden",
           directoryGridClass,
         )}
       >
@@ -84,7 +84,7 @@ export function DirectoryIdentity(props: {
     <div className="flex min-w-0 items-center gap-3 max-md:col-span-3">
       <span
         className={cn(
-          "grid size-9 shrink-0 place-items-center rounded border border-white/10 transition-colors",
+          "grid size-9 shrink-0 place-items-center rounded-md border border-dashboard-border-strong transition-colors",
           props.iconClassName,
         )}
       >
@@ -95,7 +95,7 @@ export function DirectoryIdentity(props: {
           {props.title}
         </div>
         {props.description ? (
-          <div className="mt-1 truncate font-mono text-xs leading-tight text-dashboard-text-muted">
+          <div className="mt-1 truncate font-sans text-xs leading-tight text-dashboard-text-muted">
             {props.description}
           </div>
         ) : null}

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

@@ -12,22 +12,22 @@ export function CardHeader(props: {
   return (
     <div
       className={cn(
-        "flex flex-wrap items-start justify-between gap-4 border-b border-white/[0.06] px-4 py-4 sm:px-5",
+        "flex flex-wrap items-start justify-between gap-4 border-b border-dashboard-border-subtle px-4 py-4 sm:px-5",
         props.className,
       )}
     >
       <div>
-        <h3 className="m-0 font-mono text-xs font-medium uppercase tracking-[0.14em] text-dashboard-text-muted">
+        <h3 className="m-0 font-sans text-xs font-medium text-dashboard-text-muted">
           {props.title}
         </h3>
         {props.description ? (
-          <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">
             {props.description}
           </p>
         ) : null}
       </div>
       {props.trailing ? (
-        <div className="font-mono text-xs text-dashboard-text-muted">
+        <div className="font-sans text-xs text-dashboard-text-muted">
           {props.trailing}
         </div>
       ) : null}

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

@@ -101,7 +101,11 @@ export function DashboardChromeProvider(props: { children: ReactNode }) {
   );
 }
 
-/** Sticky shell chrome: primary header, secondary navigation slot, and banner. */
+/**
+ * Sticky shell chrome: primary header, secondary navigation slot, and banner.
+ * One bottom border closes the header and page links, so page link
+ * underlines sit on it. Banners render below that border.
+ */
 export function DashboardChrome(props: {
   banner?: ReactNode;
   header: ReactNode;
@@ -113,8 +117,10 @@ export function DashboardChrome(props: {
 
   return (
     <div className="sticky top-0 z-30 bg-dashboard-bg/95 pt-[env(safe-area-inset-top)]">
-      {props.header}
-      <div className="hidden md:block" ref={chrome.secondarySlotRef} />
+      <div className="border-b border-dashboard-border-strong">
+        {props.header}
+        <div className="hidden md:block" ref={chrome.secondarySlotRef} />
+      </div>
       {props.banner}
     </div>
   );

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

@@ -74,14 +74,14 @@ export function DashboardHeader(props: {
     cn(
       "shrink-0 whitespace-nowrap rounded-lg px-3 py-2 font-sans text-sm font-medium tracking-normal no-underline transition-colors",
       isActive
-        ? "bg-cyan-300/[0.1] text-cyan-50"
+        ? "bg-dashboard-accent/[0.1] text-dashboard-accent-text"
         : cn("hover:bg-dashboard-fill-soft", dashboardInteractiveTextClass),
     );
   const sheetLinkClass = ({ isActive }: { isActive: boolean }) =>
     cn(
-      "rounded-lg px-3 py-3 font-mono text-sm font-medium tracking-normal no-underline transition-colors",
+      "rounded-lg px-3 py-3 font-sans text-sm font-medium no-underline transition-colors",
       isActive
-        ? "bg-cyan-300/[0.1] text-cyan-50"
+        ? "bg-dashboard-accent/[0.1] text-dashboard-accent-text"
         : cn("hover:bg-dashboard-fill-soft", dashboardInteractiveTextClass),
     );
 
@@ -148,7 +148,7 @@ export function DashboardHeader(props: {
   }, [props.mobileNavigationOpen]);
 
   return (
-    <header className="relative border-b border-dashboard-border-emphasis bg-dashboard-bg">
+    <header className="relative bg-dashboard-bg">
       <div
         className={cn(
           props.compact ? "w-full min-w-0" : dashboardContainerClass,
@@ -200,7 +200,7 @@ export function DashboardHeader(props: {
           )}
           to="/"
         >
-          <span className="truncate font-mono text-sm font-semibold md:hidden">
+          <span className="truncate font-sans text-sm font-semibold md:hidden">
             {getDashboardAgentName()}
           </span>
           <span className="hidden md:block">
@@ -252,7 +252,7 @@ export function DashboardHeader(props: {
           <div className="flex items-center justify-between gap-3 border-b border-dashboard-border-subtle bg-dashboard-surface-raised px-3 py-2 pt-[max(0.5rem,env(safe-area-inset-top))]">
             <Link
               aria-label={`${getDashboardAgentName()} home`}
-              className="min-w-0 truncate font-mono text-sm font-semibold text-inherit no-underline"
+              className="min-w-0 truncate font-sans text-sm font-semibold text-inherit no-underline"
               to="/"
             >
               {getDashboardAgentName()}
@@ -307,7 +307,7 @@ export function DashboardHeader(props: {
                   </div>
                 ) : null}
                 {props.version ? (
-                  <p className="m-0 font-mono text-xs text-dashboard-text-muted">
+                  <p className="m-0 font-sans text-xs text-dashboard-text-muted">
                     junior version {props.version}
                   </p>
                 ) : null}

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

@@ -36,12 +36,12 @@ export function PageHeader(props: {
   const actions = props.actions ?? rangeActions;
 
   return (
-    <header className="flex min-w-0 items-center justify-between gap-6 border-b border-white/[0.05] pb-4 sm:pb-6 max-md:flex-col max-md:items-stretch">
+    <header className="flex min-w-0 items-center justify-between gap-6 border-b border-dashboard-border-subtle pb-4 sm:pb-6 max-md:flex-col max-md:items-stretch">
       <div className="min-w-0">
         <h2 className="m-0 font-display text-3xl font-light leading-none tracking-[-0.03em] text-dashboard-text sm:text-4xl">
           {props.title}
         </h2>
-        <div className="mt-2 max-w-2xl font-mono text-xs leading-relaxed text-dashboard-text-muted sm:text-sm">
+        <div className="mt-2 max-w-2xl font-sans text-xs leading-relaxed text-dashboard-text-muted sm:text-sm">
           {props.description}
         </div>
       </div>

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

@@ -27,31 +27,24 @@ export function SecondaryNavigation(props: {
 }) {
   const menuLinkClass = ({ isActive }: { isActive: boolean }) =>
     cn(
-      "rounded-lg px-3 py-3 pl-6 font-mono text-sm font-medium no-underline transition-colors",
+      "rounded-lg px-3 py-3 pl-6 font-sans text-sm font-medium no-underline transition-colors",
       isActive
-        ? "bg-cyan-300/[0.1] text-cyan-50"
-        : cn("hover:bg-white/[0.035]", dashboardInteractiveTextClass),
+        ? "bg-dashboard-accent/[0.1] text-dashboard-accent-text"
+        : cn("hover:bg-dashboard-fill-faint", dashboardInteractiveTextClass),
     );
 
   return (
     <div className="min-w-0">
       <SecondaryNavigationPortal
         desktop={
-          <div className="border-b border-white/[0.06] bg-white/[0.018]">
-            <div
-              className={cn(
-                dashboardContainerClass,
-                "min-w-0 px-4 py-2 md:px-8",
-              )}
-            >
-              <SegmentedNav ariaLabel={props.ariaLabel} items={props.items} />
-            </div>
+          <div className={cn(dashboardContainerClass, "min-w-0 px-4 md:px-8")}>
+            <SegmentedNav ariaLabel={props.ariaLabel} items={props.items} />
           </div>
         }
         mobile={
           <nav
             aria-label={props.ariaLabel}
-            className="mt-3 grid gap-1 border-t border-white/[0.07] pt-3"
+            className="mt-3 grid gap-1 border-t border-dashboard-border pt-3"
           >
             {props.items.map((item) => (
               <SiblingPageLink
@@ -63,7 +56,7 @@ export function SecondaryNavigation(props: {
           </nav>
         }
       />
-      <div className="px-4 pt-4 sm:px-8 md:hidden">
+      <div className="border-b border-dashboard-border px-4 pt-2 sm:px-8 md:hidden">
         <SegmentedNav ariaLabel={props.ariaLabel} fill items={props.items} />
       </div>
       {props.children}

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

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

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

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