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/AchievementsPage.tsx

@@ -1,10 +1,12 @@
 import { useGameStore } from '@/store';
 import { ACHIEVEMENT_DEFINITIONS } from '@ai-tycoon/game-engine';
+import { formatNumber } from '@ai-tycoon/shared';
 import {
   Trophy, Lock, Server, Brain, Rocket, DollarSign, Sprout, Users,
   Globe, Sparkles, TrendingUp, Building2, Atom, Cpu, FlaskConical,
   GitBranch, Zap,
 } from 'lucide-react';
+import type { AchievementCondition } from '@ai-tycoon/shared';
 
 const ICON_MAP: Record<string, React.ComponentType<{ size?: number; className?: string }>> = {
   Trophy, Server, Brain, Rocket, DollarSign, Sprout, Users,
@@ -12,9 +14,34 @@ const ICON_MAP: Record<string, React.ComponentType<{ size?: number; className?:
   GitBranch, Zap,
 };
 
+function resolveField(state: Record<string, unknown>, path: string): number {
+  const parts = path.split('.');
+  let current: unknown = state;
+  for (const part of parts) {
+    if (current == null || typeof current !== 'object') return 0;
+    current = (current as Record<string, unknown>)[part];
+  }
+  return typeof current === 'number' ? current : 0;
+}
+
+function getProgress(state: Record<string, unknown>, condition: AchievementCondition): { current: number; target: number; pct: number } | null {
+  if (condition.field.startsWith('meta._')) return null;
+  if (condition.operator === 'gt' && condition.value === 0) {
+    const current = resolveField(state, condition.field);
+    return { current, target: 1, pct: current > 0 ? 100 : 0 };
+  }
+  if (condition.operator === 'gte' || condition.operator === 'eq') {
+    const current = resolveField(state, condition.field);
+    const pct = condition.value > 0 ? Math.min(100, (current / condition.value) * 100) : (current > 0 ? 100 : 0);
+    return { current, target: condition.value, pct };
+  }
+  return null;
+}
+
 export function AchievementsPage() {
   const unlocked = useGameStore((s) => s.achievements.unlocked);
   const unlockedIds = new Set(unlocked.map(a => a.id));
+  const state = useGameStore.getState() as unknown as Record<string, unknown>;
 
   return (
     <div className="space-y-6">
@@ -29,6 +56,7 @@ export function AchievementsPage() {
         {ACHIEVEMENT_DEFINITIONS.map(def => {
           const isUnlocked = unlockedIds.has(def.id);
           const IconComponent = ICON_MAP[def.icon] ?? Trophy;
+          const progress = !isUnlocked ? getProgress(state, def.condition) : null;
 
           return (
             <div
@@ -43,12 +71,23 @@ export function AchievementsPage() {
                 <div className={`p-2 rounded-lg ${isUnlocked ? 'bg-accent/20 text-accent-light' : 'bg-surface-800 text-surface-500'}`}>
                   {isUnlocked ? <IconComponent size={20} /> : <Lock size={20} />}
                 </div>
-                <div>
+                <div className="flex-1 min-w-0">
                   <h4 className={`font-semibold text-sm ${isUnlocked ? '' : 'text-surface-400'}`}>{def.name}</h4>
                   <p className="text-xs text-surface-400 mt-0.5">{def.description}</p>
                   {isUnlocked && (
                     <p className="text-xs text-accent mt-1">Unlocked</p>
                   )}
+                  {!isUnlocked && progress && progress.target > 0 && (
+                    <div className="mt-2">
+                      <div className="flex justify-between text-[10px] text-surface-500 mb-0.5">
+                        <span>{formatNumber(progress.current)} / {formatNumber(progress.target)}</span>
+                        <span>{Math.floor(progress.pct)}%</span>
+                      </div>
+                      <div className="h-1 bg-surface-700 rounded-full overflow-hidden">
+                        <div className="h-full bg-accent/50 rounded-full transition-all" style={{ width: `${progress.pct}%` }} />
+                      </div>
+                    </div>
+                  )}
                 </div>
               </div>
             </div>

apps/web/src/pages/CompetitorsPage.tsx

@@ -1,5 +1,8 @@
+import { useState } from 'react';
 import { Swords, TrendingUp, Shield, Users, Brain, ShoppingCart } from 'lucide-react';
 import { useGameStore } from '@/store';
+import { ConfirmModal } from '@/components/common/ConfirmModal';
+import { Tooltip } from '@/components/common/Tooltip';
 import { formatMoney, formatNumber } from '@ai-tycoon/shared';
 import type { Era } from '@ai-tycoon/shared';
 
@@ -27,6 +30,7 @@ export function CompetitorsPage() {
   const money = useGameStore((s) => s.economy.money);
   const acquireCompetitor = useGameStore((s) => s.acquireCompetitor);
   const canAcquire = (era: Era) => era === 'bigtech' || era === 'agi';
+  const [acquireConfirm, setAcquireConfirm] = useState<{ id: string; name: string; cost: number } | null>(null);
 
   return (
     <div className="space-y-6">
@@ -55,10 +59,15 @@ export function CompetitorsPage() {
                   key={rival.id}
                   className="absolute top-0 h-full w-0.5 bg-danger"
                   style={{ left: `${rival.estimatedCapability}%` }}
-                  title={`${rival.name}: ${rival.estimatedCapability.toFixed(1)}`}
                 />
               ))}
             </div>
+            <div className="flex items-center gap-4 mt-1.5 text-[10px]">
+              <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-full bg-accent inline-block" />You: {playerBest.toFixed(1)}</span>
+              {rivals.filter(r => r.status === 'active').map(rival => (
+                <span key={rival.id} className="flex items-center gap-1"><span className="w-2 h-0.5 bg-danger inline-block" />{rival.name}: {rival.estimatedCapability.toFixed(1)}</span>
+              ))}
+            </div>
           </div>
         </div>
       </div>
@@ -84,7 +93,7 @@ export function CompetitorsPage() {
                   return (
                     <div className="text-right">
                       <button
-                        onClick={() => acquireCompetitor(rival.id)}
+                        onClick={() => setAcquireConfirm({ id: rival.id, name: rival.name, cost })}
                         disabled={money < cost}
                         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 disabled:opacity-40 disabled:cursor-not-allowed"
                       >
@@ -134,6 +143,17 @@ export function CompetitorsPage() {
           <p>No competitors detected yet.</p>
         </div>
       )}
+
+      {acquireConfirm && (
+        <ConfirmModal
+          title="Acquire Competitor"
+          message={`Acquire "${acquireConfirm.name}" for ${formatMoney(acquireConfirm.cost)}? This will absorb their users and technology. This cannot be undone.`}
+          confirmLabel={`Acquire (${formatMoney(acquireConfirm.cost)})`}
+          danger
+          onConfirm={() => { acquireCompetitor(acquireConfirm.id); setAcquireConfirm(null); }}
+          onCancel={() => setAcquireConfirm(null)}
+        />
+      )}
     </div>
   );
 }

apps/web/src/pages/DashboardPage.tsx

@@ -2,7 +2,7 @@ import { useGameStore } from '@/store';
 import { formatMoney, formatNumber, formatPercent } from '@ai-tycoon/shared';
 import {
   DollarSign, Server, Brain, Users, TrendingUp,
-  TrendingDown, Minus, Cpu, Zap, Shield,
+  TrendingDown, Minus, Cpu, Zap, Shield, ChevronRight,
 } from 'lucide-react';
 import { XAxis, YAxis, Tooltip, ResponsiveContainer, Area, AreaChart } from 'recharts';
 import { TutorialHint } from '@/components/game/TutorialHint';
@@ -94,7 +94,7 @@ export function DashboardPage() {
                   </linearGradient>
                 </defs>
                 <XAxis dataKey="tick" hide />
-                <YAxis hide />
+                <YAxis width={50} tickFormatter={(v: number) => formatMoney(v)} tick={{ fontSize: 10, fill: '#64748b' }} axisLine={false} tickLine={false} />
                 <Tooltip
                   contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: '8px' }}
                   labelStyle={{ color: '#94a3b8' }}
@@ -151,7 +151,7 @@ export function DashboardPage() {
                   </linearGradient>
                 </defs>
                 <XAxis dataKey="tick" hide />
-                <YAxis hide />
+                <YAxis width={50} tickFormatter={(v: number) => formatNumber(v)} tick={{ fontSize: 10, fill: '#64748b' }} axisLine={false} tickLine={false} />
                 <Tooltip
                   contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: '8px' }}
                   formatter={(value: number) => [formatNumber(value), 'Subscribers']}
@@ -178,7 +178,7 @@ export function DashboardPage() {
                   </linearGradient>
                 </defs>
                 <XAxis dataKey="tick" hide />
-                <YAxis hide domain={[0, 100]} />
+                <YAxis width={30} domain={[0, 100]} tickFormatter={(v: number) => `${v}`} tick={{ fontSize: 10, fill: '#64748b' }} axisLine={false} tickLine={false} />
                 <Tooltip
                   contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: '8px' }}
                   formatter={(value: number) => [`${value}/100`, 'Reputation']}
@@ -225,12 +225,15 @@ function StatCard({
 }) {
   return (
     <div
-      className={`bg-surface-900 border border-surface-700 rounded-xl p-4 ${onClick ? 'cursor-pointer hover:border-accent/30 transition-colors' : ''}`}
+      className={`bg-surface-900 border border-surface-700 rounded-xl p-4 ${onClick ? 'cursor-pointer hover:border-accent/50 transition-colors group' : ''}`}
       onClick={onClick}
     >
-      <div className="flex items-center gap-2 mb-2">
-        <Icon size={16} className={color ?? 'text-surface-400'} />
-        <span className="text-xs text-surface-400 uppercase tracking-wider">{label}</span>
+      <div className="flex items-center justify-between mb-2">
+        <div className="flex items-center gap-2">
+          <Icon size={16} className={color ?? 'text-surface-400'} />
+          <span className="text-xs text-surface-400 uppercase tracking-wider">{label}</span>
+        </div>
+        {onClick && <ChevronRight size={14} className="text-surface-500 group-hover:text-accent-light group-hover:translate-x-0.5 transition-all" />}
       </div>
       <div className="text-2xl font-bold font-mono">{value}</div>
       {subValue && (
@@ -256,12 +259,14 @@ function StatusRow({
   bar: number;
   barColor: string;
 }) {
+  const severity = barColor.includes('danger') ? 'Critical' : barColor.includes('warning') ? 'Warning' : null;
   return (
     <div>
       <div className="flex items-center justify-between mb-1">
         <div className="flex items-center gap-2">
           <Icon size={14} className="text-surface-400" />
           <span className="text-sm text-surface-300">{label}</span>
+          {severity && <span className={`text-[10px] px-1.5 py-0.5 rounded ${barColor.includes('danger') ? 'bg-danger/20 text-danger' : 'bg-warning/20 text-warning'}`}>{severity}</span>}
         </div>
         <span className="text-sm font-mono text-surface-200">{value}</span>
       </div>

apps/web/src/pages/FinancePage.tsx

@@ -77,7 +77,7 @@ export function FinancePage() {
                   </linearGradient>
                 </defs>
                 <XAxis dataKey="tick" hide />
-                <YAxis hide />
+                <YAxis width={50} tickFormatter={(v: number) => formatMoney(v)} tick={{ fontSize: 10, fill: '#64748b' }} axisLine={false} tickLine={false} />
                 <Area type="monotone" dataKey="money" stroke="#6366f1" fill="url(#cashGrad)" />
               </AreaChart>
             </ResponsiveContainer>
@@ -100,7 +100,7 @@ export function FinancePage() {
             <ResponsiveContainer width="100%" height={200}>
               <LineChart data={history}>
                 <XAxis dataKey="tick" hide />
-                <YAxis hide />
+                <YAxis width={50} tickFormatter={(v: number) => formatMoney(v)} tick={{ fontSize: 10, fill: '#64748b' }} axisLine={false} tickLine={false} />
                 <Tooltip
                   contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: '8px' }}
                   formatter={(value: number, name: string) => [formatMoney(value), name === 'revenue' ? 'Revenue' : 'Expenses']}

apps/web/src/pages/InfrastructurePage.tsx

@@ -233,7 +233,10 @@ function ClustersListView() {
           <button
             key={cluster.id}
             onClick={() => cluster.status === 'operational' && setNav({ level: 'cluster', clusterId: cluster.id })}
-            className="bg-surface-800 border border-surface-700 rounded-xl p-5 text-left hover:border-accent/50 transition-colors"
+            className={`bg-surface-800 border border-surface-700 rounded-xl p-5 text-left transition-colors ${
+              cluster.status === 'operational' ? 'hover:border-accent/50 cursor-pointer' : 'cursor-default'
+            }`}
+            title={cluster.status === 'constructing' ? 'Available when construction completes' : undefined}
           >
             <div className="flex items-center justify-between mb-3">
               <div className="flex items-center gap-2">

apps/web/src/pages/MarketPage.tsx

@@ -25,19 +25,26 @@ const TABS: { id: MarketTab; label: string }[] = [
 ];
 
 function useAppliedFeedback() {
-  const [show, setShow] = useState(false);
+  const [state, setState] = useState<'hidden' | 'valid' | 'invalid'>('hidden');
   const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
-  const trigger = useCallback(() => {
-    setShow(true);
+  const trigger = useCallback((valid = true) => {
+    setState(valid ? 'valid' : 'invalid');
     clearTimeout(timerRef.current);
-    timerRef.current = setTimeout(() => setShow(false), 1200);
+    timerRef.current = setTimeout(() => setState('hidden'), 1200);
   }, []);
   useEffect(() => () => clearTimeout(timerRef.current), []);
-  return { show, trigger };
+  return { show: state !== 'hidden', valid: state === 'valid', trigger };
 }
 
-function AppliedBadge({ visible }: { visible: boolean }) {
+function AppliedBadge({ visible, valid = true }: { visible: boolean; valid?: boolean }) {
   if (!visible) return null;
+  if (!valid) {
+    return (
+      <span className="inline-flex items-center gap-1 text-[10px] text-danger ml-2 animate-pulse">
+        Invalid
+      </span>
+    );
+  }
   return (
     <span className="inline-flex items-center gap-1 text-[10px] text-success ml-2 animate-pulse">
       <Check size={10} /> Applied
@@ -86,7 +93,7 @@ function SettingsPanel() {
         <h3 className="font-semibold flex items-center gap-2">
           <Settings2 size={16} />
           Overload Policy
-          <AppliedBadge visible={policyFeedback.show} />
+          <AppliedBadge visible={policyFeedback.show} valid={policyFeedback.valid} />
         </h3>
         <div className="grid grid-cols-2 gap-4">
           <div>
@@ -94,7 +101,7 @@ function SettingsPanel() {
             <input
               type="number"
               value={overloadPolicy.maxQueueDepth}
-              onChange={(e) => { setOverloadPolicy({ maxQueueDepth: Number(e.target.value) }); policyFeedback.trigger(); }}
+              onChange={(e) => { const v = Number(e.target.value); if (v >= 10) { setOverloadPolicy({ maxQueueDepth: v }); policyFeedback.trigger(true); } else { policyFeedback.trigger(false); } }}
               className="w-full bg-surface-800 border border-surface-600 rounded px-3 py-1.5 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-accent/50"
               min={10}
               step={10}
@@ -106,7 +113,7 @@ function SettingsPanel() {
             <input
               type="number"
               value={overloadPolicy.rateLimitPerCustomer}
-              onChange={(e) => { setOverloadPolicy({ rateLimitPerCustomer: Number(e.target.value) }); policyFeedback.trigger(); }}
+              onChange={(e) => { const v = Number(e.target.value); if (v >= 100) { setOverloadPolicy({ rateLimitPerCustomer: v }); policyFeedback.trigger(true); } else { policyFeedback.trigger(false); } }}
               className="w-full bg-surface-800 border border-surface-600 rounded px-3 py-1.5 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-accent/50"
               min={100}
               step={100}
@@ -141,8 +148,16 @@ function SettingsPanel() {
   );
 }
 
-export function MarketPage() {
-  const [activeTab, setActiveTab] = useState<MarketTab>('overview');
+const VALID_TABS = new Set(TABS.map(t => t.id));
+
+export function MarketPage({ initialTab, onTabChange }: { initialTab?: string | null; onTabChange?: (tab: string | null) => void }) {
+  const resolvedInitial = initialTab && VALID_TABS.has(initialTab as MarketTab) ? (initialTab as MarketTab) : 'overview';
+  const [activeTab, setActiveTab] = useState<MarketTab>(resolvedInitial);
+
+  const handleTabChange = (tab: MarketTab) => {
+    setActiveTab(tab);
+    onTabChange?.(tab === 'overview' ? null : tab);
+  };
 
   return (
     <div className="space-y-4">
@@ -156,7 +171,7 @@ export function MarketPage() {
         {TABS.map(tab => (
           <button
             key={tab.id}
-            onClick={() => setActiveTab(tab.id)}
+            onClick={() => handleTabChange(tab.id)}
             className={`px-4 py-2 text-sm rounded-t-lg transition-colors ${
               activeTab === tab.id
                 ? 'bg-surface-800 text-surface-100 border-b-2 border-accent'

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)}
+        />
+      )}
     </>
   );
 }

apps/web/src/pages/ResearchPage.tsx

@@ -105,10 +105,12 @@ export function ResearchPage() {
                 return (
                   <div
                     key={node.id}
+                    onClick={() => isAvailable && !activeResearch && handleStart(node)}
                     className={`rounded-xl border p-4 transition-all ${
                       isCompleted ? 'border-success/50 bg-success/5 opacity-70' :
                       isActive ? 'border-accent/50 bg-accent/5' :
-                      isAvailable ? `${CATEGORY_COLORS[category]} hover:brightness-110` :
+                      isAvailable && !activeResearch ? `${CATEGORY_COLORS[category]} hover:brightness-110 cursor-pointer ring-1 ring-transparent hover:ring-accent/30` :
+                      isAvailable ? `${CATEGORY_COLORS[category]}` :
                       'border-surface-700 bg-surface-900 opacity-50'
                     }`}
                   >

apps/web/src/pages/SettingsPage.tsx

@@ -83,14 +83,17 @@ export function SettingsPage() {
             <div className="text-sm">Music Volume</div>
             <div className="text-xs text-surface-400">Background music level</div>
           </div>
-          <input
-            type="range"
-            min={0}
-            max={100}
-            value={settings.musicVolume * 100}
-            onChange={(e) => setMusicVolume(Number(e.target.value) / 100)}
-            className="w-32 accent-accent"
-          />
+          <div className="flex items-center gap-2">
+            <input
+              type="range"
+              min={0}
+              max={100}
+              value={settings.musicVolume * 100}
+              onChange={(e) => setMusicVolume(Number(e.target.value) / 100)}
+              className="w-32 accent-accent"
+            />
+            <span className="text-sm font-mono text-surface-400 w-8 text-right">{Math.round(settings.musicVolume * 100)}%</span>
+          </div>
         </div>
       </div>