@sentry/junior-dashboard 0.248.0 → 0.250.0

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

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

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

@@ -43,7 +43,7 @@ export function DirectoryTable(props: {
       <div
         aria-hidden="true"
         className={cn(
-          "grid items-center gap-4 border-b border-dashboard-border-subtle bg-dashboard-overlay-soft px-4 py-2.5 font-mono text-xs uppercase tracking-[0.1em] text-dashboard-text-muted max-md:hidden",
+          "grid items-center gap-4 border-b border-dashboard-border-subtle bg-dashboard-overlay-soft px-4 py-2.5 font-sans font-medium text-xs text-dashboard-text-muted max-md:hidden",
           directoryGridClass,
         )}
       >
@@ -84,7 +84,7 @@ export function DirectoryIdentity(props: {
     <div className="flex min-w-0 items-center gap-3 max-md:col-span-3">
       <span
         className={cn(
-          "grid size-9 shrink-0 place-items-center rounded border border-white/10 transition-colors",
+          "grid size-9 shrink-0 place-items-center rounded-md border border-dashboard-border-strong transition-colors",
           props.iconClassName,
         )}
       >
@@ -95,7 +95,7 @@ export function DirectoryIdentity(props: {
           {props.title}
         </div>
         {props.description ? (
-          <div className="mt-1 truncate font-mono text-xs leading-tight text-dashboard-text-muted">
+          <div className="mt-1 truncate font-sans text-xs leading-tight text-dashboard-text-muted">
             {props.description}
           </div>
         ) : null}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/client/components/metrics/StatCard.tsx

@@ -14,7 +14,7 @@ export function StatCard(props: {
   return (
     <Card className="relative p-4 sm:p-5">
       <div className="flex items-start justify-between gap-4">
-        <div className="font-mono text-xs font-medium uppercase tracking-[0.14em] text-dashboard-text-muted">
+        <div className="font-sans text-xs font-medium text-dashboard-text-muted">
           {props.label}
         </div>
         <Icon aria-hidden="true" className="text-amber-400/55" size={15} />
@@ -23,7 +23,7 @@ export function StatCard(props: {
         {props.value}
       </div>
       {props.detail ? (
-        <div className="mt-2 font-mono text-xs leading-relaxed text-dashboard-text-muted">
+        <div className="mt-2 font-sans text-xs leading-relaxed text-dashboard-text-muted">
           {props.detail}
         </div>
       ) : null}

package/src/client/conversations/ConversationArchiveNotices.tsx

@@ -102,7 +102,7 @@ function ArchivedNotice(props: {
     >
       {restore.error ? (
         <div
-          className="border-t border-rose-300/25 bg-rose-400/[0.12] px-3 py-2 font-mono text-xs text-rose-50/85"
+          className="border-t border-rose-300/25 bg-rose-400/[0.12] px-3 py-2 font-sans text-xs text-rose-50/85"
           role="alert"
         >
           Could not restore the conversation.

package/src/client/conversations/ConversationBrief.tsx

@@ -49,7 +49,7 @@ export function ConversationBrief(props: {
         <StatusChip tone={outcomeTones[content.outcome.status]}>
           {displayLabel(content.outcome.status)}
         </StatusChip>
-        <span className="font-mono text-xs text-dashboard-text-muted">
+        <span className="text-xs text-dashboard-text-muted">
           Brief v{props.brief.version} · updated{" "}
           {formatTime(props.brief.updatedAt, {
             dateStyle: "medium",
@@ -101,14 +101,14 @@ export function ConversationBrief(props: {
                       key={`${link.kind}:${link.url}`}
                     >
                       <a
-                        className="min-w-0 break-all font-medium text-cyan-200 underline decoration-cyan-300/30 underline-offset-2 hover:text-cyan-100"
+                        className="min-w-0 break-all font-medium text-dashboard-accent-text underline decoration-dashboard-accent/30 underline-offset-2 hover:text-dashboard-accent-text"
                         href={link.url}
                         rel="noopener noreferrer"
                         target="_blank"
                       >
                         {link.label}
                       </a>
-                      <span className="font-mono text-xs text-dashboard-text-muted">
+                      <span className="text-xs text-dashboard-text-muted">
                         {displayLabel(link.kind)}
                       </span>
                       {link.status ? (
@@ -172,7 +172,7 @@ function BriefDecisions(props: { decisions: BriefContent["decisions"] }) {
             <span className="min-w-0">{decision.text}</span>
           </div>
           {decision.by ? (
-            <div className="mt-0.5 font-mono text-xs text-dashboard-text-muted">
+            <div className="mt-0.5 text-xs text-dashboard-text-muted">
               by · {decision.by}
             </div>
           ) : null}

package/src/client/conversations/ConversationChildAgents.tsx

@@ -124,13 +124,16 @@ function ChildAgentRow(props: {
 
   return (
     <button
-      className="grid w-full min-w-0 cursor-pointer gap-1.5 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface px-3 py-2.5 text-left text-inherit transition-colors duration-200 hover:border-dashboard-border-emphasis hover:bg-dashboard-surface-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus"
+      className="grid w-full min-w-0 cursor-pointer gap-1.5 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface-panel px-3 py-2.5 text-left text-inherit transition-colors duration-200 hover:border-dashboard-border-emphasis hover:bg-dashboard-surface-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus"
       onClick={() =>
         props.onOpen({
           conversationId: agent.conversationId,
           ...(agent.redacted
             ? undefined
-            : { label: agent.title ?? agent.name }),
+            : {
+                ...(agent.name ? { agentName: agent.name } : undefined),
+                label: agent.title ?? agent.name,
+              }),
           status: agent.status,
         })
       }
@@ -143,7 +146,7 @@ function ChildAgentRow(props: {
             Private subagent
           </span>
         ) : (
-          <span className="min-w-0 truncate font-mono text-dashboard-text-muted">
+          <span className="min-w-0 truncate font-medium text-dashboard-text-muted">
             {agent.name ?? "subagent"}
           </span>
         )}
@@ -185,7 +188,7 @@ function ChildAgentRow(props: {
         </span>
       ) : null}
       {stats.length > 0 ? (
-        <span className="block font-mono text-xs tabular-nums text-dashboard-text-muted">
+        <span className="block text-xs tabular-nums text-dashboard-text-muted">
           {stats.join(" · ")}
         </span>
       ) : null}

package/src/client/conversations/ConversationComposer.tsx

@@ -351,7 +351,7 @@ export const ConversationComposer = memo(function ConversationComposer(
       {props.error || imageError ? (
         <div
           aria-live="polite"
-          className="min-w-0 font-mono text-xs leading-relaxed text-red-300/80"
+          className="min-w-0 font-sans text-xs leading-relaxed text-rose-300"
         >
           {imageError ?? props.error}
         </div>
@@ -361,10 +361,10 @@ export const ConversationComposer = memo(function ConversationComposer(
           // Accessory chrome needs a full footer row. Side-by-side mobile is
           // only for the bare reply dock.
           props.footerStart
-            ? "block overflow-hidden focus-within:border-cyan-300/35 focus-within:ring-1 focus-within:ring-cyan-300/35"
-            : "grid grid-cols-[minmax(0,1fr)_auto] items-end overflow-hidden focus-within:border-cyan-300/35 focus-within:ring-1 focus-within:ring-cyan-300/35 md:block",
+            ? "block overflow-hidden focus-within:border-dashboard-focus/45 focus-within:ring-1 focus-within:ring-dashboard-focus/25"
+            : "grid grid-cols-[minmax(0,1fr)_auto] items-end overflow-hidden focus-within:border-dashboard-accent/35 focus-within:ring-1 focus-within:ring-dashboard-focus/35 md:block",
           dashboardComposerSurfaceClass,
-          dragging && "ring-2 ring-cyan-300",
+          dragging && "ring-2 ring-dashboard-focus",
         )}
         onDragOver={(event) => {
           if (!event.dataTransfer.types.includes("Files")) return;
@@ -431,7 +431,7 @@ export const ConversationComposer = memo(function ConversationComposer(
           autoCapitalize="off"
           autoComplete="off"
           autoCorrect="off"
-          className="min-h-12 max-h-28 w-full resize-none overflow-y-auto border-0 bg-transparent px-3 py-3 font-sans text-base leading-relaxed text-dashboard-text outline-none placeholder:text-dashboard-text-muted/65 md:min-h-14 md:max-h-none md:resize-y md:overflow-visible md:px-4 md:py-3"
+          className="min-h-12 max-h-28 w-full resize-none overflow-y-auto border-0 bg-transparent px-3 py-3 font-sans text-base leading-relaxed text-dashboard-text outline-none placeholder:text-dashboard-text-muted/65 md:min-h-14 md:max-h-none md:overflow-visible md:px-4 md:py-3"
           disabled={Boolean(props.restoreDraftOnError && createPending)}
           enterKeyHint="send"
           id={id}
@@ -462,6 +462,7 @@ export const ConversationComposer = memo(function ConversationComposer(
               aria-label="Attach images"
               disabled={sendLocked || readingImages}
               onClick={() => fileInputRef.current?.click()}
+              size="icon"
               title="Attach images (up to 3 MB total)"
               type="button"
             >
@@ -478,7 +479,6 @@ export const ConversationComposer = memo(function ConversationComposer(
             {props.onStop ? (
               <Button
                 aria-label={props.stopPending ? "Stopping" : "Stop"}
-                className="rounded-lg font-sans"
                 disabled={props.stopPending || !online}
                 onClick={() => void stopTurn()}
                 title="Stop Junior"
@@ -491,7 +491,7 @@ export const ConversationComposer = memo(function ConversationComposer(
             ) : null}
             <Button
               aria-label={sendLocked ? "Sending message" : props.submitLabel}
-              className="rounded-lg !border-0 !bg-cyan-100 font-sans !text-dashboard-text-inverse hover:!bg-cyan-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-cyan-300/55 disabled:!bg-dashboard-fill-hover disabled:!text-dashboard-text-muted"
+              className="disabled:!border-transparent disabled:!bg-dashboard-fill-hover disabled:!text-dashboard-text-muted disabled:!opacity-100"
               disabled={
                 (!canSend && !images.length) ||
                 !online ||
@@ -499,6 +499,7 @@ export const ConversationComposer = memo(function ConversationComposer(
                 readingImages
               }
               title={sendLocked ? "Sending message" : props.submitLabel}
+              tone="primary"
               type="submit"
             >
               <Send aria-hidden="true" size={14} />

package/src/client/conversations/ConversationHeader.tsx

@@ -114,7 +114,7 @@ export function ConversationHeader(props: {
         <Ellipsis aria-hidden="true" size={18} strokeWidth={2} />
       </HeaderIconButton>
       {mobileMenuOpen ? (
-        <div className="absolute right-0 top-[calc(100%+0.35rem)] z-40 w-56 rounded-xl border border-white/[0.08] bg-dashboard-surface-raised/95 p-1.5 shadow-2xl shadow-black/75 backdrop-blur-xl">
+        <div className="absolute right-0 top-[calc(100%+0.35rem)] z-40 w-56 rounded-xl border border-dashboard-border-strong bg-dashboard-surface-raised/95 p-1.5 shadow-2xl shadow-black/75 backdrop-blur-xl">
           <ConversationHeaderActions
             archive={props.archive}
             conversationId={props.conversationId}
@@ -138,7 +138,7 @@ export function ConversationHeader(props: {
           />
           {openMobileNavigation ? (
             <button
-              className="mt-0.5 flex w-full cursor-pointer items-center gap-2.5 rounded-md border-0 bg-transparent px-2.5 py-2 text-left text-sm font-semibold text-dashboard-text transition-colors hover:bg-white/10 focus-visible:bg-white/10 focus-visible:outline-none"
+              className="mt-0.5 flex w-full cursor-pointer items-center gap-2.5 rounded-md border-0 bg-transparent px-2.5 py-2 text-left text-sm font-semibold text-dashboard-text transition-colors hover:bg-dashboard-fill-hover focus-visible:bg-dashboard-fill-hover focus-visible:outline-none"
               onClick={() => {
                 setMobileMenuOpen(false);
                 openMobileNavigation();
@@ -175,7 +175,7 @@ export function ConversationHeader(props: {
       <MobileHeaderLivePortal>{liveIndicator}</MobileHeaderLivePortal>
       <header
         className={cn(
-          "sticky top-0 z-10 -mx-4 border-b border-dashboard-border-emphasis bg-dashboard-bg md:-mx-7",
+          "sticky top-0 z-10 -mx-4 border-b border-dashboard-border bg-dashboard-bg md:-mx-7",
           !showMobileHeader && "hidden md:block",
         )}
       >
@@ -221,12 +221,12 @@ export function ConversationHeader(props: {
         {props.linkedWork ? (
           <div
             aria-label="Linked work"
-            className="border-t border-dashboard-border bg-dashboard-surface-panel px-4 py-3 md:px-7"
+            className="border-t border-dashboard-border-subtle px-4 py-2.5 md:px-7"
           >
             {props.linkedWork}
           </div>
         ) : null}
-        <div className="hidden border-t border-dashboard-border px-7 md:flex">
+        <div className="hidden border-t border-dashboard-border-subtle px-7 md:flex">
           <TranscriptViewToggle
             labelled
             onChange={props.onViewChange}

package/src/client/conversations/ConversationHeaderActions.tsx

@@ -96,7 +96,7 @@ export function ConversationHeaderActions(props: {
       <Button
         aria-label="Conversation details"
         aria-pressed={props.detailsOpen}
-        className="ml-2 rounded-lg font-sans text-xs"
+        className="ml-2"
         onClick={props.onDetailsClick}
       >
         <PanelRight aria-hidden="true" size={15} strokeWidth={2} />
@@ -153,13 +153,13 @@ function ViewModeButton(props: {
     <ToggleButton
       aria-label={props.label}
       className={cn(
-        "!normal-case !no-underline font-sans",
+        "!no-underline",
         props.labelled
-          ? "relative flex h-11 items-center gap-2 px-0 py-0 text-xs after:absolute after:inset-x-0 after:bottom-0 after:h-0.5"
-          : "grid size-7 place-items-center rounded px-0 py-0",
+          ? "relative flex h-11 items-center gap-2 rounded-none px-0 py-0 text-sm after:absolute after:inset-x-0 after:bottom-0 after:h-0.5"
+          : "grid size-7 place-items-center rounded-md px-0 py-0",
         props.active &&
           (props.labelled
-            ? "text-cyan-100 after:bg-cyan-100"
+            ? "text-dashboard-text after:bg-dashboard-text-solid"
             : "bg-dashboard-fill-hover text-dashboard-text"),
       )}
       onClick={props.onClick}
@@ -191,7 +191,7 @@ export function HeaderIconButton(props: {
         aria-pressed={props.pressed}
         className={cn(
           "text-dashboard-text-muted",
-          props.pressed && "bg-white/10 text-dashboard-text",
+          props.pressed && "bg-dashboard-fill-strong text-dashboard-text",
         )}
         onClick={props.onClick}
         size="icon"
@@ -233,8 +233,8 @@ function MenuActionButton(props: {
       aria-label={props.label}
       aria-pressed={props.pressed}
       className={cn(
-        "flex w-full cursor-pointer items-center gap-2.5 rounded-md border-0 bg-transparent px-2.5 py-2 text-left text-sm font-semibold text-dashboard-text transition-colors hover:bg-white/10 focus-visible:bg-white/10 focus-visible:outline-none",
-        props.pressed && "bg-white/[0.08]",
+        "flex w-full cursor-pointer items-center gap-2.5 rounded-md border-0 bg-transparent px-2.5 py-2 text-left text-sm font-semibold text-dashboard-text transition-colors hover:bg-dashboard-fill-strong focus-visible:bg-dashboard-fill-strong focus-visible:outline-none",
+        props.pressed && "bg-dashboard-fill-strong",
       )}
       onClick={props.onClick}
       type="button"
@@ -258,7 +258,7 @@ function ArchiveConversationButton(
     return (
       <button
         aria-label={label}
-        className="flex w-full cursor-pointer items-center gap-2.5 rounded-md border-0 bg-transparent px-2.5 py-2 text-left text-sm font-semibold text-dashboard-text transition-colors hover:bg-white/10 focus-visible:bg-white/10 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+        className="flex w-full cursor-pointer items-center gap-2.5 rounded-md border-0 bg-transparent px-2.5 py-2 text-left text-sm font-semibold text-dashboard-text transition-colors hover:bg-dashboard-fill-strong focus-visible:bg-dashboard-fill-strong focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
         disabled={props.disabled}
         onClick={props.onClick}
         type="button"

package/src/client/conversations/ConversationHomeList.tsx

@@ -172,7 +172,7 @@ function ConversationCardSection(props: {
   return (
     <section aria-labelledby={`conversation-section-${props.section.key}`}>
       <h3
-        className="mb-2 mt-0 px-1 font-display text-xs font-semibold uppercase tracking-[0.08em] text-dashboard-text-muted"
+        className="mb-2 mt-0 px-1 font-sans text-xs font-medium text-dashboard-text-muted"
         id={`conversation-section-${props.section.key}`}
       >
         {props.section.label}
@@ -238,7 +238,7 @@ function ConversationCard(props: {
         </div>
         <div className="flex items-start gap-3">
           <Link
-            className="pointer-events-auto whitespace-nowrap font-mono text-xs text-dashboard-text-muted hover:text-dashboard-text focus:outline-none focus:ring-2 focus:ring-dashboard-focus"
+            className="pointer-events-auto whitespace-nowrap font-sans text-xs tabular-nums text-dashboard-text-muted hover:text-dashboard-text focus:outline-none focus:ring-2 focus:ring-dashboard-focus"
             to={conversationPath(conversation.id)}
           >
             {formatRelativeTime(conversation.lastSeenAt)}
@@ -272,7 +272,7 @@ function ConversationCard(props: {
           {status === "active" ? "Working…" : "No recent message"}
         </p>
       )}
-      <div className="relative z-[1] flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1 font-mono text-xs text-dashboard-text-muted pointer-events-none">
+      <div className="relative z-[1] flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1 font-sans text-xs text-dashboard-text-muted pointer-events-none">
         {location ? <span className="truncate">{location}</span> : null}
         {location && participants.length > 0 ? (
           <span aria-hidden="true">·</span>

package/src/client/conversations/ConversationListStatusIcon.tsx

@@ -45,7 +45,7 @@ export function ConversationListStatusIcon(props: {
       className={cn(
         "size-1.5 shrink-0 rounded-full",
         props.status === "failed" && "bg-rose-300",
-        props.status === "idle" && "bg-white/25",
+        props.status === "idle" && "bg-dashboard-text-faint",
       )}
     />
   );

package/src/client/conversations/ConversationMemories.tsx

@@ -66,17 +66,17 @@ export function ConversationMemories(props: { conversationId: string }) {
     <ol className="m-0 grid list-none gap-3 p-0">
       {query.data.memories.map((memory) => (
         <li
-          className="grid gap-2 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface px-3 py-3"
+          className="grid gap-2 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface-panel px-3 py-3"
           key={memory.id}
         >
           <p className="m-0 whitespace-pre-wrap break-words text-sm leading-relaxed text-dashboard-text">
             {memory.content}
           </p>
-          <div className="flex flex-wrap items-center gap-1.5 font-mono text-xs text-dashboard-text-muted">
-            <span className="rounded border border-dashboard-border-subtle bg-dashboard-surface-raised px-1.5 py-0.5">
+          <div className="flex flex-wrap items-center gap-1.5 text-xs tabular-nums text-dashboard-text-muted">
+            <span className="rounded-md border border-dashboard-border-subtle bg-dashboard-surface-raised px-1.5 py-0.5">
               {memory.kind}
             </span>
-            <span className="rounded border border-dashboard-border-subtle bg-dashboard-surface-raised px-1.5 py-0.5">
+            <span className="rounded-md border border-dashboard-border-subtle bg-dashboard-surface-raised px-1.5 py-0.5">
               {memory.visibility}
             </span>
             <time className="ml-auto" dateTime={memory.capturedAt}>