@sentry/junior-dashboard 0.248.0 → 0.249.0

package/src/client/pages/memory/MemoryPage.tsx

@@ -315,7 +315,7 @@ function MemoryListHeader() {
   return (
     <div
       className={cn(
-        "hidden items-center gap-3 border-b border-white/[0.07] px-4 py-2.5 text-left font-mono text-xs uppercase tracking-[0.12em] text-dashboard-text-muted sm:grid",
+        "hidden items-center gap-3 border-b border-dashboard-border px-4 py-2.5 text-left font-sans font-medium text-xs text-dashboard-text-muted sm:grid",
         MEMORY_GRID,
       )}
       role="row"
@@ -344,7 +344,7 @@ function MemorySummary(props: { data: MemoryDashboardData }) {
     {
       detail: "workspace shareable",
       label: "Public",
-      tone: "text-cyan-100",
+      tone: "text-dashboard-accent-text",
       value: stats.public.toLocaleString("en-US"),
     },
     {
@@ -356,11 +356,11 @@ function MemorySummary(props: { data: MemoryDashboardData }) {
   return (
     <section
       aria-label="Memory summary"
-      className="grid grid-cols-2 gap-px border-y border-white/[0.06] bg-white/[0.06] lg:grid-cols-4"
+      className="grid grid-cols-2 gap-px border-y border-dashboard-border-subtle bg-dashboard-fill-hover lg:grid-cols-4"
     >
       {items.map((item) => (
-        <div className="bg-[#050507] px-4 py-4 sm:px-5" key={item.label}>
-          <div className="font-mono text-xs uppercase tracking-[0.12em] text-dashboard-text-muted">
+        <div className="bg-dashboard-bg px-4 py-4 sm:px-5" key={item.label}>
+          <div className="font-sans font-medium text-xs text-dashboard-text-muted">
             {item.label}
           </div>
           <div
@@ -371,7 +371,7 @@ function MemorySummary(props: { data: MemoryDashboardData }) {
           >
             {item.value}
           </div>
-          <div className="mt-1 font-mono text-xs leading-relaxed text-dashboard-text-muted">
+          <div className="mt-1 font-sans text-xs leading-relaxed text-dashboard-text-muted">
             {item.detail}
           </div>
         </div>
@@ -387,10 +387,10 @@ function MemoryKindPanel(props: { data: MemoryDashboardData }) {
       <h2 className="m-0 font-display text-xl font-medium text-dashboard-text">
         What Junior remembers
       </h2>
-      <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">
         Across personal and public scopes.
       </p>
-      <div className="mt-5 grid gap-px overflow-hidden rounded border border-white/[0.06] bg-white/[0.055]">
+      <div className="mt-5 grid gap-px overflow-hidden rounded-md border border-dashboard-border-subtle bg-dashboard-fill-hover">
         <OverviewBreakdownRow
           detail="Almost entirely personal"
           icon={UserRound}
@@ -422,10 +422,10 @@ function MemoryOriginPanel(props: { data: MemoryDashboardData }) {
       <h2 className="m-0 font-display text-xl font-medium text-dashboard-text">
         How they got here
       </h2>
-      <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">
         Same totals, split by how they were written.
       </p>
-      <div className="mt-5 grid gap-px overflow-hidden rounded border border-white/[0.06] bg-white/[0.055]">
+      <div className="mt-5 grid gap-px overflow-hidden rounded-md border border-dashboard-border-subtle bg-dashboard-fill-hover">
         <OverviewBreakdownRow
           detail="Passive extraction after runs"
           icon={Sparkles}
@@ -457,15 +457,15 @@ function OverviewBreakdownRow(props: {
 }) {
   const Icon = props.icon;
   return (
-    <div className="flex items-center gap-3 bg-[#09090b] px-3 py-3">
-      <div className="grid size-9 shrink-0 place-items-center rounded border border-white/[0.07] bg-white/[0.025] text-dashboard-text-muted">
+    <div className="flex items-center gap-3 bg-dashboard-bg-elevated px-3 py-3">
+      <div className="grid size-9 shrink-0 place-items-center rounded-md border border-dashboard-border bg-dashboard-fill-soft text-dashboard-text-muted">
         <Icon aria-hidden="true" size={15} />
       </div>
       <div className="min-w-0 flex-1">
         <div className="font-display text-base font-medium text-dashboard-text">
           {props.label}
         </div>
-        <div className="mt-0.5 font-mono text-xs leading-relaxed text-dashboard-text-muted">
+        <div className="mt-0.5 font-sans text-xs leading-relaxed text-dashboard-text-muted">
           {props.detail}
         </div>
       </div>
@@ -492,7 +492,7 @@ function MemoryRow(props: {
     <SelectableRow
       className={cn(
         "flex items-stretch",
-        !props.first && "border-t border-white/[0.055]",
+        !props.first && "border-t border-dashboard-border-subtle",
       )}
       onSelect={props.onSelect}
       selected={props.selected}
@@ -521,7 +521,7 @@ function MemoryRow(props: {
               />
             </h3>
           </div>
-          <div className="mt-1.5 truncate font-mono text-xs leading-relaxed text-dashboard-text-muted">
+          <div className="mt-1.5 truncate font-sans text-xs leading-relaxed text-dashboard-text-muted">
             Source: {source}
             <span className="sm:hidden">
               {" "}

package/src/client/pages/memory/MemoryTimeline.tsx

@@ -43,7 +43,7 @@ export function MemoryTimeline(props: {
         <h2 className="m-0 font-display text-xl font-medium text-dashboard-text">
           Activity over time
         </h2>
-        <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">
           {bucketUnit === "hour"
             ? "Stacked personal + public memories created each hour."
             : bucketUnit === "6hour"
@@ -80,9 +80,7 @@ export function MemoryTimeline(props: {
                 date={day.date}
                 summary={`${day.personal} personal, ${day.public} public, ${total} total memories`}
               >
-                <g
-                  tabIndex={0}
-                >
+                <g tabIndex={0}>
                   {series.map((item) => {
                     const value = day[item.key];
                     const segmentHeight = (value / maximum) * layout.plotHeight;
@@ -118,7 +116,7 @@ export function MemoryTimeline(props: {
           />
         </ChartSvg>
         {!hasMemories ? (
-          <div className="pointer-events-none absolute inset-0 grid place-items-center pt-12 font-mono text-xs text-dashboard-text-muted">
+          <div className="pointer-events-none absolute inset-0 grid place-items-center pt-12 font-sans text-xs text-dashboard-text-muted">
             No memories were learned in this period.
           </div>
         ) : null}

package/src/client/pages/people/ContributionGrid.tsx

@@ -85,7 +85,10 @@ export function ContributionGrid(props: { days: ContributionDay[] }) {
                       rows={[
                         ["conversations", day.conversations],
                         ["runtime", activityRuntime(day)],
-                        ["spend", formatCostSummary({ total: day.costUsd ?? 0 })],
+                        [
+                          "spend",
+                          formatCostSummary({ total: day.costUsd ?? 0 }),
+                        ],
                         ["tokens", formatCompactNumber(day.tokens ?? 0)],
                       ]}
                     />
@@ -96,7 +99,7 @@ export function ContributionGrid(props: { days: ContributionDay[] }) {
                   <span
                     aria-label={`${day.date}: ${day.conversations} conversations, ${activityRuntime(day)}, ${formatCostSummary({ total: day.costUsd ?? 0 })} spend, ${formatCompactNumber(day.tokens ?? 0)} tokens`}
                     className={cn(
-                      "size-3 border border-black/40 outline-none focus-visible:ring-2 focus-visible:ring-[#beaaff]",
+                      "size-3 border border-dashboard-overlay outline-none focus-visible:ring-2 focus-visible:ring-dashboard-focus",
                       activityClass(day.conversations, max),
                     )}
                     role="listitem"
@@ -106,20 +109,20 @@ export function ContributionGrid(props: { days: ContributionDay[] }) {
               ) : (
                 <span
                   aria-hidden="true"
-                  className="size-3 border border-black/40 bg-[#101010]"
+                  className="size-3 border border-dashboard-overlay bg-dashboard-surface-raised"
                   key={`empty-${weekIndex}-${dayIndex}`}
                 />
               ),
             ),
           )}
         </div>
-        <div className="mt-3 flex items-center gap-1 text-xs font-semibold uppercase leading-none text-dashboard-text-muted">
+        <div className="mt-3 flex items-center gap-1 text-xs font-semibold leading-none text-dashboard-text-muted">
           <span>Less</span>
           {[0, 1, 2, 3, 4].map((level) => (
             <span
               aria-hidden="true"
               className={cn(
-                "size-3 border border-black/40",
+                "size-3 border border-dashboard-overlay",
                 level === 0 && "bg-dashboard-surface-hover",
                 level === 1 && "bg-[#133225]",
                 level === 2 && "bg-[#176a4a]",

package/src/client/pages/people/PersonProfilePage.tsx

@@ -112,10 +112,7 @@ export function Profile(props: {
       />
 
       <section className="grid gap-4" aria-labelledby="profile-metrics-title">
-        <SectionIntro
-          id="profile-metrics-title"
-          title="Usage over time"
-        />
+        <SectionIntro id="profile-metrics-title" title="Usage over time" />
         <SystemMetricCharts
           bucketUnit={timeRangeBucketUnit(range)}
           days={selectTimeSeries({
@@ -184,7 +181,7 @@ export function Profile(props: {
           <Card as="section" className="mb-0" variant="section">
             <SectionHeader
               actions={
-                <div className="font-mono text-xs uppercase tracking-[0.12em] text-dashboard-text-muted">
+                <div className="font-sans font-medium text-xs text-dashboard-text-muted">
                   52 weeks
                 </div>
               }
@@ -213,7 +210,7 @@ function LeaderboardSection(props: {
       <ol className="m-0 list-none p-0">
         {props.items.slice(0, 6).map((item, index) => (
           <li
-            className="grid min-w-0 grid-cols-[2rem_minmax(0,1fr)_auto] items-center gap-3 border-b border-white/[0.06] px-4 py-3 last:border-b-0"
+            className="grid min-w-0 grid-cols-[2rem_minmax(0,1fr)_auto] items-center gap-3 border-b border-dashboard-border-subtle px-4 py-3 last:border-b-0"
             key={item.label}
           >
             <div className="font-mono text-xs leading-none text-dashboard-text-muted">

package/src/client/pages/people/ProfilePluginReports.tsx

@@ -56,7 +56,7 @@ function ProfilePluginReport(props: {
       {metrics.length ? (
         <div
           className={cn(
-            "grid gap-px overflow-hidden rounded border border-white/[0.07] bg-white/[0.055]",
+            "grid gap-px overflow-hidden rounded-md border border-dashboard-border bg-dashboard-fill-hover",
             metrics.length === 1 ? "grid-cols-1" : "grid-cols-2",
             metrics.length === 3
               ? "lg:grid-cols-3"
@@ -81,7 +81,7 @@ function ProfilePluginReport(props: {
               <div className="truncate font-display text-2xl font-light leading-none text-dashboard-text">
                 {metric.value}
               </div>
-              <div className="mt-2 font-mono text-xs uppercase tracking-[0.1em] text-dashboard-text-muted">
+              <div className="mt-2 font-sans font-medium text-xs text-dashboard-text-muted">
                 {metric.label}
               </div>
             </div>

package/src/client/pages/system/GuardianActivity.tsx

@@ -31,11 +31,11 @@ function Stat(props: {
   valueClassName?: string;
 }) {
   return (
-    <div className="rounded-md border border-white/[0.05] bg-black/10 px-3 py-3">
+    <div className="rounded-md border border-dashboard-border-subtle bg-dashboard-overlay-soft px-3 py-3">
       <div className="font-display text-xl font-light text-dashboard-text">
         <span className={props.valueClassName}>{props.value}</span>
       </div>
-      <div className="mt-1 font-mono text-xs leading-relaxed text-dashboard-text-muted">
+      <div className="mt-1 font-sans text-xs leading-relaxed text-dashboard-text-muted">
         {props.label}
       </div>
     </div>
@@ -61,18 +61,18 @@ export function GuardianActivity(props: {
 
   return (
     <Card>
-      <div className="border-b border-white/[0.06] px-4 py-4">
+      <div className="border-b border-dashboard-border-subtle px-4 py-4">
         <div className="flex flex-wrap items-start justify-between gap-3">
           <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">
               Guardian reviews
             </h3>
-            <p className="mt-1 mb-0 font-mono text-xs leading-relaxed text-dashboard-text-muted">
-              {timeRangeBucketAdjective(bucketUnit)} decisions before
-              reviewed actions execute.
+            <p className="mt-1 mb-0 font-sans text-xs leading-relaxed text-dashboard-text-muted">
+              {timeRangeBucketAdjective(bucketUnit)} decisions before reviewed
+              actions execute.
             </p>
           </div>
-          <div className="font-mono text-xs uppercase tracking-[0.1em] text-dashboard-text-muted">
+          <div className="font-sans font-medium text-xs text-dashboard-text-muted">
             <span className="mr-3 text-emerald-200/75">Allow</span>
             <span className="mr-3 text-amber-200/75">Ask</span>
             <span className="text-rose-200/75">Deny</span>
@@ -131,7 +131,7 @@ export function GuardianActivity(props: {
                 triggerClassName="h-full min-w-0 flex-1 items-end"
               >
                 <button
-                  className="flex w-full min-w-0 flex-col justify-end overflow-hidden rounded-t-sm bg-white/[0.035] focus-visible:outline-1 focus-visible:outline-cyan-300"
+                  className="flex w-full min-w-0 flex-col justify-end overflow-hidden rounded-t-sm bg-dashboard-fill-soft focus-visible:outline-1 focus-visible:outline-dashboard-focus"
                   style={{ height: `${height}%` }}
                   type="button"
                 >

package/src/client/pages/system/PluginBarChart.tsx

@@ -53,10 +53,10 @@ export function PluginBarChart(props: {
   const zeroY = layout.top + (maximum / span) * layout.plotHeight;
 
   return (
-    <div className="overflow-hidden rounded border border-white/[0.07] bg-dashboard-surface-panel">
-      <div className="border-b border-white/[0.06] px-4 py-3">
+    <div className="overflow-hidden rounded-md border border-dashboard-border bg-dashboard-surface-panel">
+      <div className="border-b border-dashboard-border-subtle px-4 py-3">
         <div className="flex flex-wrap items-start justify-between gap-3">
-          <h4 className="m-0 font-mono text-xs font-medium uppercase tracking-[0.14em] text-dashboard-text-muted">
+          <h4 className="m-0 font-sans text-xs font-medium text-dashboard-text-muted">
             {widget.title}
           </h4>
         </div>
@@ -79,7 +79,7 @@ export function PluginBarChart(props: {
         ) : null}
       </div>
       {categories.length === 0 ? (
-        <p className="m-0 p-4 font-mono text-xs text-dashboard-text-muted">
+        <p className="m-0 p-4 font-sans text-xs text-dashboard-text-muted">
           {widget.emptyText ?? "No chart data."}
         </p>
       ) : (
@@ -184,8 +184,6 @@ function visibleCategoryCount(
   return availableRanges.includes(30) ? 30 : (availableRanges[0] ?? 30);
 }
 
-
-
 function formatChartNumber(value: number): string {
   return String(Number(value.toPrecision(12)));
 }

package/src/client/pages/system/PluginDetails.tsx

@@ -14,7 +14,7 @@ export function PluginDetails(props: { plugin: SystemPlugin }) {
         title="Details"
       />
       <Card>
-        <div className="grid grid-cols-1 gap-px bg-white/[0.055] sm:grid-cols-3">
+        <div className="grid grid-cols-1 gap-px bg-dashboard-fill-hover sm:grid-cols-3">
           <Detail icon={Boxes} label="Identifier" value={props.plugin.name} />
           <Detail
             icon={Sparkles}
@@ -27,7 +27,7 @@ export function PluginDetails(props: { plugin: SystemPlugin }) {
             value={String(props.plugin.configKeys.length)}
           />
         </div>
-        <div className="grid gap-5 border-t border-white/[0.06] p-4 sm:p-5 lg:grid-cols-2">
+        <div className="grid gap-5 border-t border-dashboard-border-subtle p-4 sm:p-5 lg:grid-cols-2">
           <CapabilityList
             emptyText="No plugin-provided skills were discovered."
             items={props.plugin.skills.map((skill) => skill.name)}
@@ -52,12 +52,16 @@ function Detail(props: { icon: typeof Boxes; label: string; value: string }) {
   const Icon = props.icon;
   return (
     <div className="flex items-center gap-3 bg-dashboard-surface-panel px-4 py-3.5">
-      <Icon aria-hidden="true" className="text-cyan-200/60" size={15} />
+      <Icon
+        aria-hidden="true"
+        className="text-dashboard-accent-text/60"
+        size={15}
+      />
       <div className="min-w-0">
         <div className="truncate font-display text-base font-medium text-dashboard-text">
           {props.value}
         </div>
-        <div className="mt-0.5 font-mono text-xs uppercase tracking-[0.1em] text-dashboard-text-muted">
+        <div className="mt-0.5 font-sans font-medium text-xs text-dashboard-text-muted">
           {props.label}
         </div>
       </div>
@@ -72,14 +76,14 @@ function CapabilityList(props: {
 }) {
   return (
     <div>
-      <h3 className="m-0 font-mono text-xs font-medium uppercase tracking-[0.12em] text-dashboard-text-muted">
+      <h3 className="m-0 font-sans text-xs font-medium text-dashboard-text-muted">
         {props.title}
       </h3>
       {props.items.length ? (
         <div className="mt-2.5 flex flex-wrap gap-2">
           {props.items.map((item) => (
             <span
-              className="rounded border border-white/[0.07] bg-black/20 px-2.5 py-1.5 font-mono text-xs text-dashboard-text-muted"
+              className="rounded-md border border-dashboard-border bg-dashboard-overlay-soft px-2.5 py-1.5 font-mono text-xs text-dashboard-text-muted"
               key={item}
             >
               {item}
@@ -87,7 +91,7 @@ function CapabilityList(props: {
           ))}
         </div>
       ) : (
-        <p className="mt-2 mb-0 font-mono text-xs leading-relaxed text-dashboard-text-muted">
+        <p className="mt-2 mb-0 font-sans text-xs leading-relaxed text-dashboard-text-muted">
           {props.emptyText}
         </p>
       )}

package/src/client/pages/system/PluginPanels.tsx

@@ -31,26 +31,26 @@ function PluginPanel(props: { plugin: SystemPlugin }) {
   );
   return (
     <Link
-      className="group grid min-w-0 gap-4 rounded-lg border border-white/[0.07] bg-dashboard-surface-panel/85 p-4 no-underline transition-colors hover:border-cyan-300/20 hover:bg-cyan-300/[0.025] sm:p-5"
+      className="group grid min-w-0 gap-4 rounded-lg border border-dashboard-border bg-dashboard-surface-panel/85 p-4 no-underline transition-colors hover:border-dashboard-accent/20 hover:bg-dashboard-accent/[0.025] sm:p-5"
       to={systemPluginPath(props.plugin.name)}
     >
       <div className="flex min-w-0 items-start justify-between gap-4">
         <div className="flex min-w-0 items-start gap-3">
-          <div className="grid size-9 shrink-0 place-items-center rounded border border-cyan-300/15 bg-cyan-300/[0.075] text-cyan-200">
+          <div className="grid size-9 shrink-0 place-items-center rounded-md border border-dashboard-accent/15 bg-dashboard-accent/[0.075] text-dashboard-accent-text">
             <Boxes aria-hidden="true" size={16} strokeWidth={1.8} />
           </div>
           <div className="min-w-0">
             <h3 className="m-0 truncate font-display text-lg font-medium text-dashboard-text">
               {props.plugin.displayName}
             </h3>
-            <p className="mt-1 mb-0 line-clamp-2 font-mono text-xs leading-relaxed text-dashboard-text-muted">
+            <p className="mt-1 mb-0 line-clamp-2 font-sans text-xs leading-relaxed text-dashboard-text-muted">
               {props.plugin.description}
             </p>
           </div>
         </div>
         <ArrowRight
           aria-hidden="true"
-          className="mt-1 shrink-0 text-dashboard-text-muted transition-transform group-hover:translate-x-0.5 group-hover:text-cyan-200/70"
+          className="mt-1 shrink-0 text-dashboard-text-muted transition-transform group-hover:translate-x-0.5 group-hover:text-dashboard-accent-text/70"
           size={16}
         />
       </div>
@@ -59,7 +59,7 @@ function PluginPanel(props: { plugin: SystemPlugin }) {
         <div
           className={`grid ${
             metrics.length === 1 ? "grid-cols-1" : "grid-cols-2"
-          } gap-px overflow-hidden rounded border border-white/[0.06] bg-white/[0.055]`}
+          } gap-px overflow-hidden rounded-md border border-dashboard-border-subtle bg-dashboard-fill-hover`}
         >
           {metrics.slice(0, 2).map((metric) => (
             <div
@@ -69,7 +69,7 @@ function PluginPanel(props: { plugin: SystemPlugin }) {
               <div className="truncate font-display text-lg font-light text-dashboard-text">
                 {metric.value}
               </div>
-              <div className="mt-1 truncate font-mono text-xs uppercase tracking-[0.1em] text-dashboard-text-muted">
+              <div className="mt-1 truncate font-sans font-medium text-xs text-dashboard-text-muted">
                 {metric.label}
               </div>
             </div>
@@ -77,7 +77,7 @@ function PluginPanel(props: { plugin: SystemPlugin }) {
         </div>
       ) : null}
 
-      <div className="flex flex-wrap items-center gap-x-4 gap-y-2 border-t border-white/[0.055] pt-3">
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-2 border-t border-dashboard-border-subtle pt-3">
         <PanelFact
           icon={Sparkles}
           label={`${props.plugin.skills.length} skills`}
@@ -90,7 +90,7 @@ function PluginPanel(props: { plugin: SystemPlugin }) {
 function PanelFact(props: { icon: typeof Sparkles; label: string }) {
   const Icon = props.icon;
   return (
-    <span className="inline-flex items-center gap-1.5 font-mono text-xs uppercase tracking-[0.08em] text-dashboard-text-muted">
+    <span className="inline-flex items-center gap-1.5 font-sans font-medium text-xs text-dashboard-text-muted">
       <Icon aria-hidden="true" size={11} />
       {props.label}
     </span>

package/src/client/pages/system/PluginReportRecordSet.tsx

@@ -19,12 +19,12 @@ export function PluginReportRecordSet(props: {
     <div
       className={cn(
         embedded
-          ? "border-t border-white/[0.06]"
-          : "overflow-hidden rounded border border-white/[0.07] bg-dashboard-surface-panel",
+          ? "border-t border-dashboard-border-subtle"
+          : "overflow-hidden rounded-md border border-dashboard-border bg-dashboard-surface-panel",
       )}
     >
       <div className="flex items-center justify-between gap-4 px-5 py-3">
-        <div className="font-mono text-xs uppercase tracking-[0.12em] text-dashboard-text-muted">
+        <div className="font-sans font-medium text-xs text-dashboard-text-muted">
           {props.recordSet.title}
         </div>
         <div className="hidden font-mono text-xs text-dashboard-text-muted sm:block">
@@ -32,30 +32,30 @@ export function PluginReportRecordSet(props: {
         </div>
       </div>
       {records.length === 0 ? (
-        <div className="px-5 pb-5 font-mono text-xs leading-relaxed text-dashboard-text-muted">
+        <div className="px-5 pb-5 font-sans text-xs leading-relaxed text-dashboard-text-muted">
           {props.recordSet.emptyText ?? "No records."}
         </div>
       ) : fields.length === 0 ? (
-        <div className="px-5 pb-5 font-mono text-xs leading-relaxed text-dashboard-text-muted">
+        <div className="px-5 pb-5 font-sans text-xs leading-relaxed text-dashboard-text-muted">
           Report records are unavailable because no fields were declared.
         </div>
       ) : (
         <>
-          <div className="grid gap-2 border-t border-white/[0.05] p-3 sm:hidden">
+          <div className="grid gap-2 border-t border-dashboard-border-subtle p-3 sm:hidden">
             {records.map((record) => (
               <div
                 className={cn(
-                  "grid gap-3 rounded-md border border-white/[0.06] bg-black/15 p-3",
+                  "grid gap-3 rounded-md border border-dashboard-border-subtle bg-dashboard-overlay-soft p-3",
                   rowToneClass(record.tone),
                 )}
                 key={record.id}
               >
                 {fields.map((field) => (
                   <div key={field.key}>
-                    <div className="font-mono text-xs uppercase tracking-[0.1em] text-dashboard-text-muted">
+                    <div className="font-sans font-medium text-xs text-dashboard-text-muted">
                       {field.label}
                     </div>
-                    <div className="mt-1 break-words font-mono text-xs leading-relaxed text-dashboard-text-muted">
+                    <div className="mt-1 break-words font-sans text-xs leading-relaxed text-dashboard-text-muted">
                       {record.values[field.key] ?? ""}
                     </div>
                   </div>
@@ -63,13 +63,13 @@ export function PluginReportRecordSet(props: {
               </div>
             ))}
           </div>
-          <div className="hidden overflow-x-auto border-t border-white/[0.05] sm:block">
+          <div className="hidden overflow-x-auto border-t border-dashboard-border-subtle sm:block">
             <table className="w-full min-w-[36rem] border-collapse text-left">
-              <thead className="bg-black/15 font-mono text-xs uppercase tracking-[0.1em] text-dashboard-text-muted">
+              <thead className="bg-dashboard-overlay-soft font-sans font-medium text-xs text-dashboard-text-muted">
                 <tr>
                   {fields.map((field) => (
                     <th
-                      className="border-b border-white/[0.055] px-5 py-2.5 font-medium"
+                      className="border-b border-dashboard-border-subtle px-5 py-2.5 font-medium"
                       key={field.key}
                       scope="col"
                     >
@@ -82,14 +82,14 @@ export function PluginReportRecordSet(props: {
                 {records.map((record) => (
                   <tr
                     className={cn(
-                      "transition-colors hover:bg-white/[0.025]",
+                      "transition-colors hover:bg-dashboard-fill-soft",
                       rowToneClass(record.tone),
                     )}
                     key={record.id}
                   >
                     {fields.map((field) => (
                       <td
-                        className="max-w-72 truncate border-b border-white/[0.05] px-5 py-3 font-mono text-xs text-dashboard-text-muted"
+                        className="max-w-72 truncate border-b border-dashboard-border-subtle px-5 py-3 font-mono text-xs text-dashboard-text-muted"
                         key={field.key}
                       >
                         {record.values[field.key] ?? ""}

package/src/client/pages/system/PluginReports.tsx

@@ -21,14 +21,14 @@ export function PluginReports(props: {
     return (
       <Card padding="md">
         <div className="flex items-center gap-4">
-          <div className="grid size-10 shrink-0 place-items-center rounded border border-white/[0.07] bg-white/[0.025] text-dashboard-text-muted">
+          <div className="grid size-10 shrink-0 place-items-center rounded-md border border-dashboard-border bg-dashboard-fill-soft text-dashboard-text-muted">
             <RadioTower aria-hidden="true" size={17} />
           </div>
           <div>
             <h2 className="m-0 font-display text-base font-medium text-dashboard-text-muted">
               Operational reports
             </h2>
-            <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.emptyText}
             </p>
           </div>
@@ -39,10 +39,7 @@ export function PluginReports(props: {
 
   return (
     <div className="grid gap-3">
-      <SectionIntro
-        className="px-1"
-        title="Operational reports"
-      />
+      <SectionIntro className="px-1" title="Operational reports" />
       {props.reports.map((report) => (
         <PluginReportView
           fallbackTitle={props.fallbackTitle}
@@ -68,7 +65,7 @@ function PluginReportView(props: {
   const metrics = props.report.metrics ?? [];
   return (
     <Card>
-      <div className="flex items-start justify-between gap-4 border-b border-white/[0.06] px-5 py-4">
+      <div className="flex items-start justify-between gap-4 border-b border-dashboard-border-subtle px-5 py-4">
         <div className="min-w-0">
           <h3 className="m-0 truncate font-display text-lg font-medium text-dashboard-text">
             {title}
@@ -86,7 +83,7 @@ function PluginReportView(props: {
       {metrics.length ? (
         <div
           className={cn(
-            "grid gap-px bg-white/[0.055]",
+            "grid gap-px bg-dashboard-fill-hover",
             metrics.length === 1 ? "grid-cols-1" : "grid-cols-2",
             metrics.length === 3
               ? "lg:grid-cols-3"
@@ -111,7 +108,7 @@ function PluginReportView(props: {
               <div className="truncate font-display text-2xl font-light leading-none text-dashboard-text">
                 {metric.value}
               </div>
-              <div className="mt-2 font-mono text-xs uppercase tracking-[0.1em] text-dashboard-text-muted">
+              <div className="mt-2 font-sans font-medium text-xs text-dashboard-text-muted">
                 {metric.label}
               </div>
             </div>
@@ -119,7 +116,7 @@ function PluginReportView(props: {
         </div>
       ) : null}
       {props.report.widgets?.length ? (
-        <div className="grid gap-3 border-t border-white/[0.06] bg-black/15 p-3 lg:grid-cols-2">
+        <div className="grid gap-3 border-t border-dashboard-border-subtle bg-dashboard-overlay-soft p-3 lg:grid-cols-2">
           {props.report.widgets.map((widget) => (
             <PluginBarChart
               key={widget.id}
@@ -146,4 +143,3 @@ function summaryToneClass(tone: string | undefined): string {
   if (tone === "good") return "shadow-[inset_0_2px_0_rgba(110,231,183,0.55)]";
   return "";
 }
-