Comprehensive UX audit fixes: navigation, feedback, affordances, and accessibility

Address 18 issues across high/medium/low impact tiers identified in a full
interface review. Key changes: Models page decomposed into tabs, confirmation
dialogs for irreversible actions (deploy/open-source/acquire), chart Y-axes
made visible, hash router extended for Market tab persistence, collapsible
sidebar, keyboard navigation shortcuts (g+key chords), notification bulk
actions, achievement progress bars, and ARIA label improvements.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web/src/pages/ModelsPage.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Play, Rocket, Globe, ChevronDown, ChevronUp, Beaker, Shield, Scissors, Wrench, Zap, BarChart3 } from 'lucide-react';
 import { TutorialHint } from '@/components/game/TutorialHint';
+import { ConfirmModal } from '@/components/common/ConfirmModal';
 import { useGameStore } from '@/store';
 import {
   formatNumber, formatPercent, formatDuration,
@@ -68,6 +69,7 @@ export function ModelsPage() {
   const openSourcedModels = useGameStore((s) => s.market.openSourcedModels);
   const completedResearch = useGameStore((s) => s.research.completedResearch);
 
+  const [modelsTab, setModelsTab] = useState<'overview' | 'train' | 'models' | 'benchmarks' | 'products'>('overview');
   const [modelName, setModelName] = useState('');
   const [expandedModel, setExpandedModel] = useState<string | null>(null);
   const [expandedPipeline, setExpandedPipeline] = useState<string | null>(null);
@@ -144,7 +146,29 @@ export function ModelsPage() {
         Split compute between training (building new models) and inference (serving customers). Deploy trained models to start earning revenue.
       </TutorialHint>
 
-      {/* Compute Allocation */}
+      <div className="flex gap-1 border-b border-surface-700 pb-px">
+        {([
+          { id: 'overview' as const, label: 'Overview' },
+          { id: 'train' as const, label: 'Train New' },
+          { id: 'models' as const, label: `Families${families.length > 0 ? ` (${families.length})` : ''}` },
+          { id: 'benchmarks' as const, label: 'Benchmarks' },
+          { id: 'products' as const, label: 'Products' },
+        ]).map(tab => (
+          <button
+            key={tab.id}
+            onClick={() => setModelsTab(tab.id)}
+            className={`px-4 py-2 text-sm rounded-t-lg transition-colors ${
+              modelsTab === tab.id
+                ? 'bg-surface-800 text-surface-100 border-b-2 border-accent'
+                : 'text-surface-400 hover:text-surface-200 hover:bg-surface-800/50'
+            }`}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Compute Allocation — always visible */}
       <div className="bg-surface-900 border border-surface-700 rounded-xl p-4">
         <h3 className="font-semibold mb-3">Compute Allocation</h3>
         <div className="flex items-center gap-4">
@@ -164,7 +188,7 @@ export function ModelsPage() {
       </div>
 
       {/* Active Training Pipelines */}
-      {activePipelines.length > 0 && (
+      {modelsTab === 'overview' && activePipelines.length > 0 && (
         <div className="space-y-3">
           <h3 className="font-semibold">Active Training</h3>
           {activePipelines.map(pipeline => {
@@ -259,7 +283,7 @@ export function ModelsPage() {
       )}
 
       {/* Active Variant Jobs */}
-      {activeVariantJobs.length > 0 && (
+      {modelsTab === 'overview' && activeVariantJobs.length > 0 && (
         <div className="space-y-3">
           <h3 className="font-semibold">Variant Jobs</h3>
           {activeVariantJobs.map(job => {
@@ -284,7 +308,7 @@ export function ModelsPage() {
       )}
 
       {/* Active Eval Jobs */}
-      {activeEvalJobs.length > 0 && (
+      {modelsTab === 'overview' && activeEvalJobs.length > 0 && (
         <div className="space-y-3">
           <h3 className="font-semibold">Running Evaluations</h3>
           {activeEvalJobs.map(job => {
@@ -306,7 +330,7 @@ export function ModelsPage() {
       )}
 
       {/* Train New Model */}
-      <div className="bg-surface-900 border border-surface-700 rounded-xl p-4 space-y-4">
+      {modelsTab === 'train' && <div className="bg-surface-900 border border-surface-700 rounded-xl p-4 space-y-4">
         <h3 className="font-semibold">Train New Model</h3>
         <div className="space-y-3">
           <div className="grid grid-cols-2 gap-3">
@@ -382,6 +406,7 @@ export function ModelsPage() {
                 ))}
               </div>
             </div>
+            <p className="text-[10px] text-surface-500 mb-1">Total must equal 100% — other values adjust proportionally.</p>
             <div className="grid grid-cols-2 gap-x-4 gap-y-1">
               {(Object.keys(DOMAIN_LABELS) as DataDomain[]).map(domain => (
                 <div key={domain} className="flex items-center gap-2">
@@ -438,10 +463,10 @@ export function ModelsPage() {
             )}
           </div>
         </div>
-      </div>
+      </div>}
 
       {/* Model Families & Trained Models */}
-      {families.length > 0 && (
+      {modelsTab === 'models' && families.length > 0 && (
         <div className="space-y-3">
           <h3 className="font-semibold">Model Families</h3>
           {families.map(family => {
@@ -525,7 +550,7 @@ export function ModelsPage() {
       )}
 
       {/* Benchmark Leaderboard */}
-      {benchmarkResults.length > 0 && (
+      {modelsTab === 'benchmarks' && benchmarkResults.length > 0 && (
         <BenchmarkLeaderboard
           benchmarkResults={benchmarkResults}
           baseModels={baseModels}
@@ -533,9 +558,14 @@ export function ModelsPage() {
           availableBenchmarks={availableBenchmarks}
         />
       )}
+      {modelsTab === 'benchmarks' && benchmarkResults.length === 0 && (
+        <div className="bg-surface-900 border border-surface-700 rounded-xl p-8 text-center text-surface-500 text-sm">
+          No benchmark results yet. Run evaluations from the Models tab.
+        </div>
+      )}
 
       {/* Product Lines */}
-      <div className="space-y-3">
+      {modelsTab === 'products' && <div className="space-y-3">
         <h3 className="font-semibold">Product Lines</h3>
         {productLines.map(pl => (
           <div key={pl.id} className="bg-surface-900 border border-surface-700 rounded-xl p-4">
@@ -552,7 +582,21 @@ export function ModelsPage() {
             </div>
           </div>
         ))}
-      </div>
+      </div>}
+
+      {/* Empty state for Models tab */}
+      {modelsTab === 'models' && families.length === 0 && (
+        <div className="bg-surface-900 border border-surface-700 rounded-xl p-8 text-center text-surface-500 text-sm">
+          No model families yet. Train your first model from the Train New tab.
+        </div>
+      )}
+
+      {/* Empty state for Overview when nothing is active */}
+      {modelsTab === 'overview' && activePipelines.length === 0 && activeVariantJobs.length === 0 && activeEvalJobs.length === 0 && (
+        <div className="bg-surface-900 border border-surface-700 rounded-xl p-8 text-center text-surface-500 text-sm">
+          No active jobs. Start a training pipeline from the Train New tab.
+        </div>
+      )}
     </div>
   );
 }
@@ -563,10 +607,12 @@ function ModelActions({ model, isOpenSourced, onDeploy, onOpenSource }: {
   onDeploy: () => void;
   onOpenSource: () => void;
 }) {
+  const [confirmAction, setConfirmAction] = useState<'deploy' | 'opensource' | null>(null);
+
   return (
     <>
       {!isOpenSourced && model.isDeployed && (
-        <button onClick={onOpenSource}
+        <button onClick={() => setConfirmAction('opensource')}
           className="flex items-center gap-1 bg-blue-600/20 hover:bg-blue-600/30 text-blue-400 border border-blue-600/30 rounded px-3 py-1.5 text-xs">
           <Globe size={12} /> Open Source
         </button>
@@ -574,11 +620,30 @@ function ModelActions({ model, isOpenSourced, onDeploy, onOpenSource }: {
       {model.isDeployed ? (
         <span className="text-xs px-2 py-1 rounded-full bg-success/20 text-success">Deployed</span>
       ) : (
-        <button onClick={onDeploy}
+        <button onClick={() => setConfirmAction('deploy')}
           className="flex items-center gap-1 bg-accent hover:bg-accent-dark text-white rounded px-3 py-1.5 text-xs">
           <Rocket size={12} /> Deploy
         </button>
       )}
+      {confirmAction === 'deploy' && (
+        <ConfirmModal
+          title="Deploy Model"
+          message={`Deploy "${model.name}" to production? All product lines will use this model for inference.`}
+          confirmLabel="Deploy"
+          onConfirm={() => { onDeploy(); setConfirmAction(null); }}
+          onCancel={() => setConfirmAction(null)}
+        />
+      )}
+      {confirmAction === 'opensource' && (
+        <ConfirmModal
+          title="Open Source Model"
+          message={`Open source "${model.name}"? This will make the model publicly available. Your competitors will benefit from it. This cannot be undone.`}
+          confirmLabel="Open Source"
+          danger
+          onConfirm={() => { onOpenSource(); setConfirmAction(null); }}
+          onCancel={() => setConfirmAction(null)}
+        />
+      )}
     </>
   );
 }