fix(dashboard): polish pass - a11y test mocks for cost API

Updates a11y test mocks. Recovery from botched remerge of #3283.

Author: OneStepAt4time

dashboard/src/__tests__/a11y-pages.test.tsx

@@ -165,6 +165,18 @@ vi.mock('../api/client', () => ({
     ],
     generatedAt: new Date().toISOString(),
   }),
+  getCostSummary: vi.fn().mockResolvedValue({
+    from: null, to: null,
+    totalInputTokens: 3000, totalOutputTokens: 1500,
+    totalCacheCreationTokens: 600, totalCacheReadTokens: 2400,
+    cacheHitRate: 0.8, estimatedCostUsd: 12.34,
+    burnRateUsdPerHour: 1.5, sessions: 5,
+  }),
+  getCostByModel: vi.fn().mockResolvedValue({
+    from: null, to: null,
+    models: [{ model: 'claude-sonnet-4-20250514', inputTokens: 3000, outputTokens: 1500, cacheCreationTokens: 600, cacheReadTokens: 2400, estimatedCostUsd: 12.34, cacheHitRate: 0.8 }],
+    totalModels: 1, totalCostUsd: 12.34,
+  }),
   checkForUpdates: vi.fn().mockResolvedValue({
     currentVersion: '1.0.0',
     latestVersion: '1.0.0',

dashboard/src/pages/ActivityPage.tsx

@@ -16,7 +16,7 @@ export default function ActivityPage() {
       <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
         <div>
           <h1 className="text-2xl font-bold text-[var(--color-text-primary)]">Live Activity</h1>
-          <p className="mt-1 text-sm text-[var(--color-text-muted)] dark:text-slate-400 flex items-center gap-2">
+          <p className="mt-1 text-sm text-[var(--color-text-muted)]  flex items-center gap-2">
             {t('activity.subtitle')}
             <LiveStatusIndicator />
           </p>

dashboard/src/pages/AuthKeysPage.tsx

@@ -214,7 +214,7 @@ export default function AuthKeysPage() {
         <div
           role="status"
           aria-live="polite"
-          className="flex items-start justify-between gap-3 rounded-lg border border-slate-700/60 bg-slate-800/30 px-4 py-3 text-sm text-slate-300"
+          className="flex items-start justify-between gap-3 rounded-lg border border-[var(--color-border-strong)] bg-[var(--color-surface-strong)] p-4 text-sm text-[var(--color-text-primary)]"
         >
           <p className="leading-relaxed">
             {t('authKeys.usersBannerText')}
@@ -223,7 +223,7 @@ export default function AuthKeysPage() {
             type="button"
             onClick={dismissUsersBanner}
             aria-label={t('authKeys.authDismissBanner')}
-            className="shrink-0 rounded p-1 text-slate-400 transition-colors hover:bg-slate-700/40 hover:text-slate-200"
+            className="shrink-0 rounded p-1 text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]"
           >
             <X className="h-3.5 w-3.5" />
           </button>

dashboard/src/pages/CostPage.tsx

@@ -225,6 +225,12 @@ export default function CostPage() {
           <SkeletonCard className="h-72" />
           <SkeletonCard className="h-72" />
         </div>
+        {/* Cost analytics skeleton */}
+        <SkeletonCard className="h-72" />
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+          <SkeletonCard className="h-72" />
+          <SkeletonCard className="h-72" />
+        </div>
       </div>
     );
   }
@@ -332,7 +338,7 @@ export default function CostPage() {
 
       {/* Daily spend chart */}
       {dailyData.length > 0 && (
-        <section className="rounded-lg border border-[var(--color-border-strong)] bg-[var(--color-surface-strong)] p-5">
+        <section className="rounded-lg border border-[var(--color-border-strong)] bg-[var(--color-surface-strong)] p-5" aria-label="Daily spend chart">
           <h3 className="mb-4 text-lg font-medium text-[var(--color-text-primary)]">
             Daily Spend ({dailyData.length} days)
           </h3>
@@ -366,7 +372,7 @@ export default function CostPage() {
 
       {/* ── Cost Analytics Panels (#3273) ── */}
       <section aria-label="Cost analytics">
-        <div className="mb-4 flex items-center justify-between">
+        <div className="mb-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
           <h2 className="text-lg font-medium text-[var(--color-text-primary)]">
             Cost Analytics
           </h2>
@@ -389,7 +395,7 @@ export default function CostPage() {
       {modelData.length > 0 && (
         <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
           {/* Pie chart */}
-          <section className="rounded-lg border border-[var(--color-border-strong)] bg-[var(--color-surface-strong)] p-5">
+          <section className="rounded-lg border border-[var(--color-border-strong)] bg-[var(--color-surface-strong)] p-5" aria-label="Cost by model chart">
             <h3 className="mb-4 text-lg font-medium text-[var(--color-text-primary)]">
               Cost by Model
             </h3>
@@ -420,7 +426,7 @@ export default function CostPage() {
           </section>
 
           {/* Model list */}
-          <section className="rounded-lg border border-[var(--color-border-strong)] bg-[var(--color-surface-strong)] p-5">
+          <section className="rounded-lg border border-[var(--color-border-strong)] bg-[var(--color-surface-strong)] p-5" aria-label="Model details">
             <h3 className="mb-4 text-lg font-medium text-[var(--color-text-primary)]">
               Model Details
             </h3>

dashboard/src/pages/SessionsPage.tsx

@@ -35,7 +35,7 @@ export default function SessionsPage() {
       {/* Page header */}
       <div>
         <h1 className="text-2xl font-bold text-[var(--color-text-primary)]">{translate("sessions.title")}</h1>
-        <p className="mt-1 text-sm text-[var(--color-text-muted)] dark:text-slate-400">
+        <p className="mt-1 text-sm text-[var(--color-text-muted)] ">
           {translate("sessions.subtitle")}
         </p>
       </div>