@sentry/junior-dashboard 0.248.0 → 0.250.0

package/src/client/components/README.md

@@ -1,55 +1,128 @@
 # Dashboard UI kit
 
 Shared dashboard components live here. Feature pages compose these surfaces
-instead of copying Tailwind blocks.
-
-## Layers
-
-1. **Primitives** — `Button` / `ToggleButton`, `Field`, `TextInput`,
-   `StatusChip`, `StatusDot`, `Notice`, `FormNotice`, `Select`, `Drawer`, `Tooltip`, `Skeleton`,
-   `PageContentSkeleton`, `SegmentedTabs`, `SegmentedNav`, and other small reusable controls.
-   Use the segmented pill track to pick one of a few siblings. Use
-   `SegmentedTabs` to switch panels in place. Pass the selected value, items,
-   change handler, and selected panel content. It owns tab/panel labels and
-   keyboard focus. Use `SegmentedNav` for links between sibling pages. With
-   `fill`, links share the row width equally while their labels fit. Otherwise
-   each link keeps its label width. Rows that do not fit scroll sideways. Keep
-   collection filters in `FilterTabList`. Prefer
-   `ToggleButton` variants (`pill`, `segment`, `text`) over one-off pressed
-   styles. Prefer `Field` sizes (`default`, `compact`) over handwritten labels.
-   Prefer `StatusDot` for dense table or list status markers and `StatusChip`
-   when the label itself must stay visible. `StatusChip` uses a small dot and
-   sentence-case text, without a border, fill, or all-caps styling. It is not
-   an interactive control. Prefer `PageContentSkeleton`
-   variants over ad-hoc pulse blocks in route modules. Use `PageRouteLoading`
-   when a standard page must keep its real header above a body skeleton. Use a
-   feature-owned loading component for distinct geometry, such as conversations.
-   `ObjectIcon` owns native Ticket, Code change, Automation, Deployment, and
-   Item icons. It uses the shared type/status mapping and original Octicons
-   paths. Do not replace it with a provider logo or a status-only icon.
-   Structural colors live
-   as slim `dashboard-*` tokens in `src/tailwind.css` (canvas, surface, text,
-   border, fill, overlay, focus). Prefer those roles over `white/*`, `black/*`,
-   or hex literals. Status accents stay as Tailwind palette utilities.
-2. **Patterns** — layout, filters, directory tables, charts, metrics.
-   Activity time-series charts own bucket labels in
-   `charts/ActivityChart` (`formatActivityDate` for axes,
-   `ActivityChartTooltip` / `formatActivityTooltipDate` for hover labels).
-   New day/hour charts should compose those helpers instead of formatting
-   UTC bucket keys inline.
-   Conversation mobile geometry is a hard ownership edge (see
-   `policies/frontend-components.md`):
-   - `layout/VisualViewportShell` — fixed shell, visualViewport CSS vars, body lock
-   - `conversations/ChatLayout` — scroll-above-dock frame for reply threads
-   - `conversations/ComposerDock` — reply bottom pad / dock chrome only
-     Pages pass children only. Home and create are one landing surface, not a dock,
-     and must
-     not reuse `ComposerDock`. Do not invent viewport height, offset, or bottom
-     safe-area math in page modules.
-3. **Features** — stay under `conversations/` or `pages/` until a surface is
-   shared by two real callers. Transcript layout stays in `conversations/`;
-   see [Transcript components](../conversations/README.md) for ownership.
-   Context panels use the shared `Drawer`, not a separate modal implementation.
+instead of copying Tailwind blocks. See `policies/frontend-components.md` for
+the policy. `pnpm dashboard-style:check` enforces the token rules below.
+
+## Foundations
+
+Tokens live in the `@theme` block of `src/tailwind.css`. Light mode does not
+exist yet. Keep every color in a token so a second theme can redefine them.
+
+- **Surfaces.** Use the surface ladder, darkest to lightest: `bg`,
+  `bg-elevated` (drawers), `surface-panel` (sidebar, cards, bubbles),
+  `surface-raised` (buttons, tooltips), `control`, `surface-hover`,
+  `surface-active` (selected rows). Use `fill-*` for translucent fills and
+  `overlay-*` for scrims. Do not use `white/*` or `black/*` fills, borders, or
+  rings, or hex surface colors. Shadows may use black.
+- **Borders.** Use `border-subtle` for hairlines inside a surface,
+  `border` for card edges, `border-strong` for shell edges, and
+  `border-emphasis` or `border-interactive` for controls and hover.
+- **Text.** Brightest to dimmest: `text-solid`, `text`, `text-subtle`,
+  `text-muted`, `text-faint`.
+- **Accent.** Lavender is the one brand accent. Use `accent` for icons,
+  active markers, and tinted fills, such as `bg-dashboard-accent/10`. Use
+  `accent-text` for links and accent text. Keep Tailwind palette colors for
+  status (info, success, warning, error) and for categorical chart, event, and
+  subagent colors.
+- **Focus.** Use `outline-dashboard-focus` for keyboard focus. Do not use other
+  colors for focus rings.
+- **Type faces.** `font-sans` is the UI face for prose, controls, navigation,
+  labels, and names. `font-display` is for headings, record titles, and large
+  metric values. `font-mono` is for machine values: code, ids, paths, file
+  names, tool names, and raw payloads. Show counts, times, and prices in
+  `font-sans tabular-nums`.
+- **Type scale.** Use the named steps `text-2xs` through `text-4xl`. Keep
+  `text-2xs` for compact badges and chart annotations.
+- **Labels.** Section, card, field, and column labels use
+  `font-sans text-xs font-medium text-dashboard-text-muted` in sentence case.
+  Do not use uppercase or letter spacing for labels.
+- **Radius.** Controls and chips use `rounded-md`. Cards, list rows, and panels
+  use `rounded-lg`. The composer, menus, and transcript object cards use
+  `rounded-xl`. Avatars and count badges use `rounded-full`.
+
+## Shared class helpers
+
+`src/client/styles.ts` holds the few class strings that many components share.
+
+- `cn` joins class names.
+- `dashboardContainerClass` sets the page width.
+- `dashboardInlineLinkClass` styles a neutral underlined link inside prose.
+- `dashboardInteractiveTextClass` styles muted text that brightens on hover.
+- `dashboardComposerSurfaceClass` styles the composer surface.
+
+## Components
+
+### Primitives
+
+- **Actions.** `Button` (`default`, `primary`, `danger`, and `size="icon"`) and
+  `ButtonLink`. Form pages use `Button tone="primary"` for their one main save
+  action. Use `ToggleButton` variants (`pill`, `segment`, `text`) for pressed
+  states, not one-off styles.
+- **Forms.** `Field` (`default`, `compact`), `TextInput`, `TextArea`, `Select`,
+  and `SearchInput`. Use `TextInput size="comfortable"` for larger mobile
+  controls. Use `TextArea prose` for instructions, not code. `Field error`
+  renders an error at `<htmlFor>-error`. The owning control must set
+  `aria-invalid` and `aria-describedby`. `Select` matches native text controls.
+- **Status.** Use `StatusDot` for dense table or list markers. Use `StatusChip`
+  when the label must stay visible. `StatusChip` is a small dot and
+  sentence-case text, with no border or fill. It is not a control.
+- **Messages.** Use `Notice` for compact transient messages and `FormNotice`
+  for wrapping form recovery text.
+- **Overlays.** `Drawer` owns dismissal, focus trapping, focus return, scroll
+  locking, and panel layout. Context panels use it, not a separate modal.
+  `Tooltip` and `IconButtonTooltip` own hover text.
+- **Identity.** `ActorAvatar`, `ParticipantAvatarStack`, and `ObjectIcon`.
+  `ObjectIcon` owns native Ticket, Code change, Automation, Deployment, and
+  Item icons. It uses the shared type and status mapping and the original
+  Octicons paths. Do not replace it with a provider logo or a status-only icon.
+- **Loading.** Use `Skeleton` for placeholder leaves and `PageContentSkeleton`
+  variants for page bodies. Use `PageRouteLoading` when a page keeps its real
+  header above a body skeleton. Use a feature-owned loading component for
+  distinct geometry, such as conversations.
+
+### Navigation
+
+The dashboard has three navigation levels. Each has its own look, so the
+levels stay distinct.
+
+- **App navigation** in `layout/DashboardHeader` uses pills.
+- **Page links** use `SegmentedNav`, through `layout/SecondaryNavigation`. They
+  are underline tabs that sit on the header border. With `fill`, links share
+  the row width while their labels fit. Rows that do not fit scroll sideways.
+- **Panel switches** use `SegmentedTabs`, which draws a pill track. Pass the
+  selected value, items, change handler, and panel content. It owns tab and
+  panel labels and keyboard focus.
+
+Keep collection filters in `FilterTabList`.
+
+### Patterns
+
+- **Layout.** `layout/` holds the shell chrome, page headers, cards, and
+  section titles. `DashboardChrome` owns the sticky header block and its one
+  bottom border.
+- **Directory tables and metrics.** `directory/` and `metrics/`.
+- **Charts.** Activity time-series charts own bucket labels in
+  `charts/ActivityChart` (`formatActivityDate` for axes,
+  `ActivityChartTooltip` and `formatActivityTooltipDate` for hover labels). New
+  day or hour charts compose those helpers. They do not format UTC bucket keys
+  inline.
+- **Conversation mobile geometry** is a hard ownership edge:
+  - `layout/VisualViewportShell` owns the fixed shell, visualViewport CSS
+    variables, and body lock.
+  - `conversations/ChatLayout` owns the scroll-above-dock frame for reply
+    threads.
+  - `conversations/ComposerDock` owns the reply bottom pad and dock chrome.
+
+  Pages pass children only. Home and create are one landing surface, not a
+  dock, and must not use `ComposerDock`. Do not add viewport height, offset, or
+  bottom safe-area math in page modules.
+
+### Features
+
+Feature surfaces stay under `conversations/` or `pages/` until two real callers
+share them. Transcript layout stays in `conversations/`. See
+[Transcript components](../conversations/README.md) for ownership.
 
 ## Rules
 
@@ -58,12 +131,3 @@ instead of copying Tailwind blocks.
 - Add gallery fixtures under `/dev/<section>` for new or changed shared
   components. Keep the `/dev` index as the catalog only.
 - One-off page glue may stay inline when extraction only adds indirection.
-
-See `policies/frontend-components.md`.
-
-Use `TextInput size="comfortable"` for larger mobile form controls.
-Form pages use `Button tone="primary"` for their one main save action. Use
-`TextArea prose` for instructions rather than code. `Field error` renders an
-error at `<htmlFor>-error`; the owning control must set `aria-invalid` and
-`aria-describedby`. `Select` matches native text controls. Use `FormNotice` for
-wrapping form recovery text; use `Notice` for compact transient messages.

package/src/client/components/SearchInput.tsx

@@ -30,7 +30,7 @@ export function SearchInput(props: {
       <input
         aria-label={props.label}
         className={cn(
-          "w-full rounded-lg border border-dashboard-border font-mono text-xs text-dashboard-text outline-none transition-colors placeholder:text-dashboard-text-muted hover:border-dashboard-border-emphasis focus:border-dashboard-focus",
+          "w-full rounded-md border border-dashboard-border font-sans text-sm text-dashboard-text outline-none transition-colors placeholder:text-dashboard-text-muted/70 hover:border-dashboard-border-emphasis focus:border-dashboard-focus",
           searchInputClass[size],
         )}
         onChange={(event) => props.onChange(event.currentTarget.value)}
@@ -49,7 +49,8 @@ const searchIconClass: Record<SearchInputSize, string> = {
 };
 
 const searchInputClass: Record<SearchInputSize, string> = {
-  compact: "h-9 bg-dashboard-overlay-soft pr-3 pl-8 focus:ring-1 focus:ring-dashboard-focus/25",
+  compact:
+    "h-9 bg-dashboard-overlay-soft pr-3 pl-8 focus:ring-1 focus:ring-dashboard-focus/25",
   default:
-    "h-10 bg-dashboard-overlay-soft pr-3 pl-9 focus:ring-2 focus:ring-dashboard-focus/20",
+    "h-10 bg-dashboard-overlay-soft pr-3 pl-9 focus:ring-1 focus:ring-dashboard-focus/25",
 };

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>