@sentry/junior-dashboard 0.248.0 → 0.250.0

package/src/client/components/ActorAvatar.tsx

@@ -9,15 +9,18 @@ export function ActorAvatar(props: {
 }) {
   const [failedUrl, setFailedUrl] = useState<string>();
   const words = props.name.trim().split(/\s+/).filter(Boolean);
+  // The compact size fits one initial at the 12px type floor.
   const initials =
-    words.length > 1
-      ? `${words[0]![0]}${words.at(-1)![0]}`
-      : props.name.slice(0, 2);
+    props.size === "list"
+      ? props.name.trim().slice(0, 1)
+      : words.length > 1
+        ? `${words[0]![0]}${words.at(-1)![0]}`
+        : props.name.slice(0, 2);
   return (
     <span
       aria-hidden="true"
       className={cn(
-        "relative inline-grid shrink-0 place-items-center overflow-hidden rounded-full border-2 border-dashboard-bg bg-dashboard-focus font-sans font-bold leading-none text-dashboard-text-inverse shadow-sm",
+        "relative inline-grid shrink-0 place-items-center overflow-hidden rounded-full border-2 border-dashboard-bg bg-dashboard-focus font-sans font-semibold leading-none tracking-tight text-dashboard-text-inverse shadow-sm",
         props.size === "list" ? "size-6 text-2xs" : "size-7 text-xs",
       )}
     >

package/src/client/components/AutomationCard.tsx

@@ -21,7 +21,7 @@ export function AutomationCard({
       className="my-1 w-full min-w-0 max-w-[37.5rem] overflow-hidden rounded-xl border border-dashboard-border-emphasis bg-dashboard-surface-panel text-sm"
     >
       <div className="flex items-center gap-3 px-4 pb-3 pt-4 md:px-5">
-        <span className="grid size-9 shrink-0 place-items-center rounded-lg border border-dashboard-border bg-dashboard-fill-soft text-cyan-100">
+        <span className="grid size-9 shrink-0 place-items-center rounded-lg border border-dashboard-border bg-dashboard-fill-soft text-dashboard-accent-text">
           <ObjectIcon objectType="automation" status={card.status} size={18} />
         </span>
         <span className="min-w-0 flex-1 break-words text-base font-semibold text-dashboard-text">
@@ -65,7 +65,7 @@ export function AutomationCard({
       <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 border-t border-dashboard-border bg-dashboard-fill-faint px-4 py-3 md:px-5">
         <Link
           to={automationPath(card.id)}
-          className="inline-flex shrink-0 items-center gap-2 rounded-sm text-xs font-medium text-cyan-100 no-underline hover:underline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-dashboard-focus"
+          className="inline-flex shrink-0 items-center gap-2 rounded-sm text-xs font-medium text-dashboard-accent-text no-underline hover:underline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-dashboard-focus"
         >
           Open automation
           <ArrowUpRight aria-hidden="true" size={14} />

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

@@ -3,6 +3,7 @@ import {
   ChevronDown,
   KeyRound,
   LogOut,
+  Plug,
   Settings,
   ShieldCheck,
   UserRound,
@@ -155,7 +156,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">
@@ -194,6 +195,14 @@ export function ProfileMenu({
         <KeyRound aria-hidden="true" size={16} strokeWidth={2} />
         API tokens
       </Link>
+      <Link
+        className={profileLinkClass}
+        onClick={close}
+        to="/settings/connections"
+      >
+        <Plug aria-hidden="true" size={16} strokeWidth={2} />
+        Connected accounts
+      </Link>
       {identity.user.isAdmin ? (
         <Link className={profileLinkClass} onClick={close} to="/admin">
           <ShieldCheck aria-hidden="true" size={16} strokeWidth={2} />
@@ -230,11 +239,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 +261,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 (
@@ -268,6 +275,9 @@ export function ProfileMenu({
         <Link className={sheetItemClass} to="/settings/api-tokens">
           API tokens
         </Link>
+        <Link className={sheetItemClass} to="/settings/connections">
+          Connected accounts
+        </Link>
         {identity.user.isAdmin ? (
           <Link className={sheetItemClass} to="/admin">
             Admin
@@ -313,7 +323,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}