@sentry/junior-dashboard 0.248.0 → 0.249.0

package/src/client/components/Button.tsx

@@ -18,10 +18,10 @@ export type ToggleButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
 };
 
 const buttonClassName =
-  "inline-flex h-9 max-w-full items-center gap-2 rounded border border-dashboard-border-emphasis bg-dashboard-surface-raised px-3 font-mono text-sm font-semibold leading-none text-dashboard-text transition-colors hover:border-dashboard-border-heavy hover:bg-dashboard-surface-hover hover:text-dashboard-text";
+  "inline-flex h-9 max-w-full items-center justify-center gap-2 rounded-md border border-dashboard-border-emphasis bg-dashboard-surface-raised px-3 font-sans text-sm font-medium leading-none text-dashboard-text transition-colors hover:border-dashboard-border-heavy hover:bg-dashboard-surface-hover hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus";
 
 const dangerButtonClassName =
-  "inline-flex h-9 max-w-full items-center justify-center gap-1.5 rounded border border-dashboard-border-strong bg-transparent px-3 font-mono text-xs font-semibold text-dashboard-text-muted transition-colors hover:border-rose-300/40 hover:text-rose-300";
+  "inline-flex h-9 max-w-full items-center justify-center gap-2 rounded-md border border-dashboard-border-strong bg-transparent px-3 font-sans text-sm font-medium leading-none text-dashboard-text-muted transition-colors hover:border-rose-300/40 hover:text-rose-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-rose-300/55";
 
 /** Render the dashboard's standard bordered command button surface. */
 export function Button({
@@ -36,16 +36,16 @@ export function Button({
     <button
       {...props}
       className={cn(
-        "font-mono transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+        "font-sans transition-colors disabled:cursor-not-allowed disabled:opacity-50",
         size === "icon"
           ? cn(
-              "grid size-9 place-items-center rounded-md border-0 bg-transparent p-0 focus-visible:outline focus-visible:outline-1 disabled:hover:!bg-transparent",
+              "grid size-9 place-items-center rounded-md border-0 bg-transparent p-0 focus-visible:outline-2 focus-visible:outline-offset-1 disabled:hover:!bg-transparent",
               isDanger
                 ? "text-dashboard-text-muted hover:!bg-rose-300/10 hover:!text-rose-300 focus-visible:outline-rose-300/55 disabled:hover:!text-dashboard-text-muted"
-                : "text-dashboard-text-muted hover:!bg-dashboard-fill-strong hover:!text-dashboard-text focus-visible:outline-cyan-300/55 disabled:hover:!text-dashboard-text-muted",
+                : "text-dashboard-text-muted hover:!bg-dashboard-fill-strong hover:!text-dashboard-text focus-visible:outline-dashboard-focus disabled:hover:!text-dashboard-text-muted",
             )
           : tone === "primary"
-            ? "inline-flex h-9 items-center justify-center gap-2 rounded border border-dashboard-text-solid bg-dashboard-text-solid px-3 font-sans text-sm font-semibold text-dashboard-text-inverse hover:bg-dashboard-text-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus"
+            ? "inline-flex h-9 items-center justify-center gap-2 rounded-md border border-dashboard-text-solid bg-dashboard-text-solid px-3 font-sans text-sm font-medium leading-none text-dashboard-text-inverse hover:border-dashboard-text-subtle hover:bg-dashboard-text-subtle disabled:hover:border-dashboard-text-solid disabled:hover:bg-dashboard-text-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus"
             : isDanger
               ? cn(
                   dangerButtonClassName,
@@ -96,21 +96,22 @@ export function ToggleButton({
 }
 
 const toggleButtonBase: Record<ToggleButtonVariant, string> = {
-  pill: "cursor-pointer rounded border px-2 py-1 font-mono text-xs font-semibold uppercase leading-tight transition-colors focus-visible:outline focus-visible:outline-1 focus-visible:outline-cyan-300/55",
+  pill: "cursor-pointer rounded-md border px-2 py-1 font-sans text-xs font-medium leading-tight transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus",
   segment:
-    "h-7 min-w-10 cursor-pointer rounded border px-2 font-mono text-xs transition-colors focus-visible:outline focus-visible:outline-1 focus-visible:outline-cyan-300/55",
-  text: "cursor-pointer border-0 bg-transparent px-1.5 py-1 font-mono uppercase tracking-normal underline-offset-4 transition-colors focus-visible:outline focus-visible:outline-1 focus-visible:outline-cyan-300/55",
+    "inline-flex h-7 min-w-10 cursor-pointer items-center justify-center rounded-md border px-2 font-sans text-xs font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus",
+  text: "cursor-pointer rounded-sm border-0 bg-transparent px-1.5 py-1 font-sans font-medium underline-offset-4 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus",
 };
 
 const toggleButtonPressed: Record<ToggleButtonVariant, string> = {
   pill: "border-dashboard-border-heavy bg-dashboard-text-solid text-dashboard-text-inverse",
-  segment: "border-amber-500/30 bg-amber-500/20 text-amber-400",
+  segment:
+    "border-dashboard-border-interactive bg-dashboard-surface-active text-dashboard-text",
   text: "text-dashboard-text underline decoration-dashboard-text-solid",
 };
 
 const toggleButtonIdle: Record<ToggleButtonVariant, string> = {
   pill: "border-dashboard-border-strong bg-dashboard-surface-raised text-dashboard-text-muted hover:border-dashboard-border-interactive hover:bg-dashboard-surface-hover hover:text-dashboard-text",
   segment:
-    "border-dashboard-border-strong bg-dashboard-fill-faint text-dashboard-text-muted hover:bg-dashboard-fill-strong hover:text-dashboard-text",
+    "border-transparent bg-transparent text-dashboard-text-muted hover:bg-dashboard-fill-hover hover:text-dashboard-text",
   text: "text-dashboard-text-muted hover:text-dashboard-text",
 };

package/src/client/components/ConversationList.tsx

@@ -28,7 +28,7 @@ export function ConversationList(props: {
   return (
     <div className="min-w-0" role="table">
       <div
-        className="sticky top-0 z-[1] grid grid-cols-[minmax(13rem,1.7fr)_minmax(13rem,1fr)] items-center gap-3 border-b border-dashboard-border-subtle bg-dashboard-overlay-soft px-3 py-2.5 font-mono text-xs uppercase tracking-[0.1em] text-dashboard-text-muted max-md:hidden"
+        className="sticky top-0 z-[1] grid grid-cols-[minmax(13rem,1.7fr)_minmax(13rem,1fr)] items-center gap-3 border-b border-dashboard-border-subtle bg-dashboard-overlay-soft px-3 py-2.5 font-sans font-medium text-xs text-dashboard-text-muted max-md:hidden"
         role="row"
       >
         <div>Conversation</div>
@@ -85,8 +85,8 @@ function conversationRecordClass(
   selected: boolean | undefined,
 ): string {
   return cn(
-    "group grid min-w-0 cursor-pointer grid-cols-[minmax(13rem,1.7fr)_minmax(13rem,1fr)] items-center gap-3 overflow-hidden border-b border-b-white/[0.055] px-3 py-3 text-left text-inherit no-underline transition-colors hover:bg-white/[0.035] max-md:grid-cols-1 max-md:px-4 max-md:py-4",
+    "group grid min-w-0 cursor-pointer grid-cols-[minmax(13rem,1.7fr)_minmax(13rem,1fr)] items-center gap-3 overflow-hidden border-b border-b-dashboard-border-subtle px-3 py-3 text-left text-inherit no-underline transition-colors hover:bg-dashboard-fill-soft max-md:grid-cols-1 max-md:px-4 max-md:py-4",
     status === "idle" && "saturate-50",
-    selected && "bg-cyan-400/[0.045]",
+    selected && "bg-dashboard-accent/[0.045]",
   );
 }

package/src/client/components/ConversationSummary.tsx

@@ -11,6 +11,7 @@ import {
   conversationParticipants,
   ParticipantAvatarStack,
 } from "./ParticipantAvatarStack";
+import { cn, dashboardInlineLinkClass } from "../styles";
 
 /** Render the shared conversation title and identity. */
 export function ConversationSummary(props: { conversation: Conversation }) {
@@ -38,7 +39,7 @@ function ConversationIdentity(props: { conversation: Conversation }) {
       {location && props.conversation.locationId ? (
         <>
           <Link
-            className="font-semibold text-dashboard-text underline decoration-white/20 underline-offset-2 transition-colors hover:text-dashboard-text hover:decoration-white/60"
+            className={cn("font-semibold", dashboardInlineLinkClass)}
             onClick={(event: MouseEvent<HTMLAnchorElement>) =>
               event.stopPropagation()
             }

package/src/client/components/DetailList.tsx

@@ -7,7 +7,7 @@ export function DetailList(props: { children: ReactNode; className?: string }) {
   return (
     <dl
       className={cn(
-        "grid gap-px overflow-hidden rounded border border-white/[0.06] bg-white/[0.055]",
+        "grid gap-px overflow-hidden rounded-md border border-dashboard-border-subtle bg-dashboard-fill-hover",
         props.className,
       )}
     >
@@ -23,8 +23,8 @@ export function Detail(props: {
   valueClassName?: string;
 }) {
   return (
-    <div className="min-w-0 bg-[#09090b] px-3 py-3">
-      <dt className="font-mono text-xs uppercase tracking-[0.12em] text-dashboard-text-muted">
+    <div className="min-w-0 bg-dashboard-bg-elevated px-3 py-3">
+      <dt className="font-sans font-medium text-xs text-dashboard-text-muted">
         {props.label}
       </dt>
       <dd

package/src/client/components/Drawer.tsx

@@ -112,7 +112,7 @@ export function Drawer(props: {
       />
       <aside
         className={cn(
-          "absolute top-0 right-0 grid h-full w-full grid-rows-[auto_minmax(0,1fr)] bg-dashboard-bg-elevated shadow-[-20px_0_60px_rgba(0,0,0,0.45)] md:border-l md:border-dashboard-border-emphasis",
+          "absolute top-0 right-0 grid h-full w-full grid-rows-[auto_minmax(0,1fr)] bg-dashboard-bg-elevated shadow-[-20px_0_60px_rgba(0,0,0,0.45)] md:border-l md:border-dashboard-border-strong",
           props.width === "wide"
             ? "md:w-[min(760px,94vw)]"
             : props.width === "narrow"
@@ -120,7 +120,7 @@ export function Drawer(props: {
               : "md:w-[min(560px,94vw)]",
         )}
       >
-        <header className="relative grid grid-cols-[minmax(0,1fr)_auto] gap-3 border-b border-dashboard-border-strong bg-dashboard-surface-raised px-4 py-3 pt-[max(0.75rem,env(safe-area-inset-top))] md:px-5">
+        <header className="relative grid grid-cols-[minmax(0,1fr)_auto] gap-3 border-b border-dashboard-border bg-dashboard-bg-elevated px-4 py-3 pt-[max(0.75rem,env(safe-area-inset-top))] md:px-5">
           <div className="min-w-0">{props.header}</div>
           <div className="flex items-start gap-1.5">
             {props.actions}

package/src/client/components/EmptyTelemetry.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from "react";
 /** Render the dashboard empty-state block with quiet warning context. */
 export function EmptyTelemetry(props: { children: ReactNode }) {
   return (
-    <div className="min-w-0 rounded-lg border border-white/10 bg-[#050505] px-4 py-3 text-base leading-relaxed text-dashboard-text-muted">
+    <div className="min-w-0 rounded-lg border border-dashboard-border-strong bg-dashboard-bg px-4 py-3 text-base leading-relaxed text-dashboard-text-muted">
       {props.children}
     </div>
   );

package/src/client/components/Field.tsx

@@ -5,8 +5,7 @@ import { cn } from "../styles";
 export type FieldSize = "compact" | "default";
 
 const labelClass: Record<FieldSize, string> = {
-  compact:
-    "font-mono text-xs uppercase tracking-[0.12em] text-dashboard-text-muted",
+  compact: "font-sans font-medium text-xs text-dashboard-text-muted",
   default: "text-sm font-semibold text-dashboard-text",
 };
 

package/src/client/components/FilterBar.tsx

@@ -41,7 +41,7 @@ export function FilterGroup(props: {
 }) {
   return (
     <div className={cn("min-w-0", props.className)}>
-      <div className="mb-2 font-mono text-xs uppercase tracking-[0.12em] text-dashboard-text-muted">
+      <div className="mb-2 font-sans font-medium text-xs text-dashboard-text-muted">
         {props.label}
       </div>
       <div
@@ -71,7 +71,7 @@ export function FilterTabList(props: {
   return (
     <div
       aria-label={props.ariaLabel}
-      className="grid min-w-0 grid-cols-3 gap-1 border-b border-white/[0.06] sm:flex sm:overflow-x-auto"
+      className="grid min-w-0 grid-cols-3 gap-1 border-b border-dashboard-border-subtle sm:flex sm:overflow-x-auto"
       role="tablist"
     >
       {props.items.map((item) => {
@@ -80,9 +80,9 @@ export function FilterTabList(props: {
           <button
             aria-selected={selected}
             className={cn(
-              "relative flex min-w-0 cursor-pointer items-center justify-between gap-2 border-0 bg-transparent px-3 py-2.5 font-mono text-xs uppercase tracking-[0.1em] transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-px sm:shrink-0 sm:justify-start",
+              "relative flex min-w-0 cursor-pointer items-center justify-between gap-2 border-0 bg-transparent px-3 py-2.5 font-sans font-medium text-xs transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-px sm:shrink-0 sm:justify-start",
               selected
-                ? "text-cyan-100 after:bg-cyan-300"
+                ? "text-dashboard-accent-text after:bg-dashboard-accent"
                 : "text-dashboard-text-muted after:bg-transparent hover:text-dashboard-text",
             )}
             key={item.value || "all"}
@@ -96,8 +96,8 @@ export function FilterTabList(props: {
                 className={cn(
                   "rounded-sm border px-1.5 py-0.5 text-xs",
                   selected
-                    ? "border-cyan-300/20 bg-cyan-300/10 text-cyan-100"
-                    : "border-white/[0.07] bg-white/[0.025] text-dashboard-text-muted",
+                    ? "border-dashboard-accent/20 bg-dashboard-accent/10 text-dashboard-accent-text"
+                    : "border-dashboard-border bg-dashboard-fill-soft text-dashboard-text-muted",
                 )}
               >
                 {item.count.toLocaleString("en-US")}

package/src/client/components/Metric.tsx

@@ -28,10 +28,10 @@ function TooltipLines(props: { lines: MetricTooltipLine[] }) {
               : cn(
                   "col-span-2 block min-w-0 break-words text-dashboard-text",
                   line.valueStyle === "heading" &&
-                    "font-mono font-semibold text-dashboard-text",
+                    "font-sans tabular-nums font-semibold text-dashboard-text",
                   line.valueStyle === "heading" &&
                     index > 0 &&
-                    "mt-1 border-t border-white/10 pt-2",
+                    "mt-1 border-t border-dashboard-border-strong pt-2",
                 )
           }
           key={`${index}-${line.label ?? ""}-${line.value}-${line.live ? "live" : ""}`}
@@ -88,7 +88,7 @@ export function MetricValue(props: {
     <Tooltip
       align={props.align}
       className={cn(
-        "w-[calc(100vw-2rem)] max-w-80 rounded-lg border border-white/15 bg-[#050505] text-left text-xs font-normal text-dashboard-text-muted shadow-xl shadow-black/35",
+        "w-[calc(100vw-2rem)] max-w-80 rounded-lg border border-dashboard-border-emphasis bg-dashboard-bg text-left text-xs font-normal text-dashboard-text-muted shadow-xl shadow-black/35",
         props.tooltipCard ? "p-3 leading-snug" : "px-3 py-2 leading-relaxed",
       )}
       content={
@@ -106,7 +106,7 @@ export function MetricValue(props: {
     >
       <span
         className={cn(
-          "inline-flex border-b border-dotted border-white/20 outline-none transition-colors hover:border-white/45 focus-visible:border-white/45",
+          "inline-flex border-b border-dotted border-dashboard-border-interactive outline-none transition-colors hover:border-dashboard-border-heavy focus-visible:border-dashboard-border-heavy",
           props.className,
         )}
         tabIndex={0}

package/src/client/components/Notice.tsx

@@ -31,8 +31,8 @@ export function Notice({
   return (
     <div
       className={cn(
-        "overflow-hidden rounded-xl shadow-[0_16px_40px_rgba(0,0,0,0.5)]",
-        isError ? "bg-[#1f1216]" : "bg-[#111719]",
+        "overflow-hidden rounded-xl border bg-dashboard-surface-raised shadow-[0_16px_40px_rgba(0,0,0,0.5)]",
+        isError ? "border-rose-300/25" : "border-dashboard-border-strong",
       )}
     >
       <div className="flex min-w-0 items-center gap-3 px-3 py-3">
@@ -42,7 +42,7 @@ export function Notice({
               "grid size-8 shrink-0 place-items-center rounded-lg",
               isError
                 ? "bg-rose-300/15 text-rose-100"
-                : "bg-cyan-300/10 text-cyan-100/80",
+                : "bg-dashboard-accent/10 text-dashboard-accent-text/80",
             )}
           >
             <Icon aria-hidden="true" size={16} />
@@ -61,7 +61,7 @@ export function Notice({
           {detail ? (
             <div
               className={cn(
-                "mt-0.5 truncate font-mono text-xs",
+                "mt-0.5 truncate font-sans text-xs",
                 isError ? "text-rose-100/70" : "text-dashboard-text-muted",
               )}
             >
@@ -89,10 +89,10 @@ export function NoticeAction({
       {...props}
       className={cn(
         "shrink-0 cursor-pointer px-3 py-1.5 text-xs transition focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-40",
-        isError ? "focus:ring-rose-300/40" : "focus:ring-cyan-300/35",
+        isError ? "focus:ring-rose-300/40" : "focus:ring-dashboard-focus/35",
         isError
-          ? "rounded-lg bg-rose-200/15 font-display font-medium text-rose-50 hover:bg-rose-200/25"
-          : "rounded-lg bg-cyan-200/10 font-display font-medium text-cyan-100 hover:bg-cyan-200/20",
+          ? "rounded-lg bg-rose-200/15 font-sans font-medium text-rose-50 hover:bg-rose-200/25"
+          : "rounded-lg bg-dashboard-accent/10 font-sans font-medium text-dashboard-accent-text hover:bg-dashboard-accent/20",
         className,
       )}
       type={type}

package/src/client/components/PageContentSkeleton.tsx

@@ -96,7 +96,7 @@ function LibrarySkeleton() {
   return (
     <>
       <div className="flex flex-wrap items-end justify-between gap-4">
-        <SkeletonBone className="h-7 w-56 rounded bg-dashboard-fill-soft" />
+        <SkeletonBone className="h-7 w-56 rounded-md bg-dashboard-fill-soft" />
         <SkeletonBone className="h-10 w-full max-w-md rounded-lg border border-dashboard-border-subtle bg-dashboard-fill-faint sm:w-72" />
       </div>
       <div
@@ -108,7 +108,7 @@ function LibrarySkeleton() {
             className="flex items-center justify-between gap-2 px-3 py-2.5 sm:justify-start"
             key={index}
           >
-            <SkeletonBone className="h-3 w-12 rounded bg-dashboard-fill-soft" />
+            <SkeletonBone className="h-3 w-12 rounded-md bg-dashboard-fill-soft" />
             <SkeletonBone className="h-5 w-8 rounded-sm border border-dashboard-border-subtle bg-dashboard-fill-faint" />
           </div>
         ))}

package/src/client/components/Pagination.tsx

@@ -61,7 +61,7 @@ export function PagePagination(props: {
         props.className,
       )}
     >
-      <p className="m-0 font-mono text-xs text-dashboard-text-muted">
+      <p className="m-0 font-sans tabular-nums text-xs text-dashboard-text-muted">
         Showing {start.toLocaleString("en-US")}-{end.toLocaleString("en-US")} of{" "}
         {props.total.toLocaleString("en-US")}
       </p>
@@ -74,7 +74,7 @@ export function PagePagination(props: {
         >
           <ChevronLeft aria-hidden="true" size={16} />
         </Button>
-        <span className="min-w-16 text-center font-mono text-xs text-dashboard-text-muted">
+        <span className="min-w-16 text-center font-sans tabular-nums text-xs text-dashboard-text-muted">
           {current} / {props.pageCount}
         </span>
         <Button

package/src/client/components/ParticipantAvatarStack.tsx

@@ -45,7 +45,7 @@ function ParticipantTooltipContent(props: { participant: ActorIdentity }) {
     <span className="grid gap-0.5 font-sans">
       <span className="font-semibold text-dashboard-text">{name}</span>
       {email && email !== name ? (
-        <span className="font-mono text-dashboard-text-muted">{email}</span>
+        <span className="font-sans text-dashboard-text-muted">{email}</span>
       ) : null}
     </span>
   );
@@ -60,7 +60,7 @@ function Avatar(props: {
     <Tooltip
       content={<ParticipantTooltipContent participant={props.participant} />}
       focusable
-      triggerClassName="-ml-1.5 first:ml-0 pointer-events-none [@media(hover:hover)_and_(pointer:fine)]:pointer-events-auto"
+      triggerClassName="-ml-1 first:ml-0 pointer-events-none [@media(hover:hover)_and_(pointer:fine)]:pointer-events-auto"
     >
       <span
         aria-label={label}
@@ -116,14 +116,14 @@ export function ParticipantAvatarStack(props: ParticipantAvatarStackProps) {
             </span>
           }
           focusable
-          triggerClassName="-ml-1.5 pointer-events-none [@media(hover:hover)_and_(pointer:fine)]:pointer-events-auto"
+          triggerClassName="-ml-1 pointer-events-none [@media(hover:hover)_and_(pointer:fine)]:pointer-events-auto"
         >
           <span
             aria-label={`${hidden.length} more participants: ${hidden
               .map(participantDescription)
               .join("; ")}`}
             className={cn(
-              "relative inline-grid shrink-0 place-items-center rounded-full border-2 border-dashboard-bg bg-dashboard-fill-strong font-mono font-semibold leading-none text-dashboard-text-muted focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus",
+              "relative inline-grid shrink-0 place-items-center rounded-full border-2 border-dashboard-bg bg-dashboard-surface-active font-sans font-semibold tabular-nums leading-none text-dashboard-text-muted focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus",
               props.size === "list" ? "size-6 text-2xs" : "size-7 text-xs",
             )}
             onKeyDown={(event) => event.stopPropagation()}

package/src/client/components/ProfileMenu.tsx

@@ -155,7 +155,7 @@ export function ProfileMenu({
           ) : null}
         </div>
       </div>
-      <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 font-mono text-xs tabular-nums text-dashboard-text-muted">
+      <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 font-sans text-xs tabular-nums text-dashboard-text-muted">
         <span>
           7d{" "}
           <span className="font-semibold text-dashboard-text">
@@ -230,11 +230,9 @@ export function ProfileMenu({
     return (
       <div
         aria-label={`Personal model spend: 7 days ${sevenDaySpend}, 30 days ${thirtyDaySpend}`}
-        className="grid gap-1.5 rounded-lg border border-dashboard-border bg-dashboard-fill-soft px-3 py-2.5 font-mono text-xs tabular-nums text-dashboard-text-muted"
+        className="grid gap-1.5 rounded-lg border border-dashboard-border bg-dashboard-fill-soft px-3 py-2.5 font-sans text-xs tabular-nums text-dashboard-text-muted"
       >
-        <span className="text-xs font-medium uppercase tracking-[0.08em]">
-          Spend
-        </span>
+        <span className="text-xs font-medium">Spend</span>
         <span className="whitespace-nowrap">
           7d{" "}
           <span className="font-semibold text-dashboard-text">
@@ -254,7 +252,7 @@ export function ProfileMenu({
   if (variant === "sheet-links") {
     // Match primary sheet rows exactly.
     const sheetItemClass = cn(
-      "rounded-lg border-0 bg-transparent px-3 py-3 text-left font-mono text-sm font-medium tracking-normal no-underline transition-colors hover:bg-dashboard-fill-soft focus-visible:bg-dashboard-fill-soft focus-visible:outline-none",
+      "rounded-lg border-0 bg-transparent px-3 py-3 text-left font-sans text-sm font-medium no-underline transition-colors hover:bg-dashboard-fill-soft focus-visible:bg-dashboard-fill-soft focus-visible:outline-none",
       dashboardInteractiveTextClass,
     );
     return (
@@ -313,7 +311,7 @@ export function ProfileMenu({
             {name}
           </p>
           {name !== email ? (
-            <p className="mt-0.5 mb-0 truncate font-mono text-xs text-dashboard-text-muted">
+            <p className="mt-0.5 mb-0 truncate font-sans text-xs text-dashboard-text-muted">
               {email}
             </p>
           ) : null}

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",
 };