Add complete game loop: training, revenue, market, offline catch-up

- Model training system: training jobs produce TrainedModels with
  calculated capabilities based on compute, data, and research
- Market system: organic API demand and consumer subscriptions now
  generate real revenue from deployed models
- Talent system: salary costs calculated from department headcount
- Toast notification system for game events (training complete, etc.)
- Offline catch-up: progress bar + summary screen when returning
- Market page: pricing controls for API and subscription products
- Finance page: income statement, cash charts, funding history
- Tick processor now runs all 7 systems in correct dependency order

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

apps/web/src/components/common/ToastContainer.tsx

@@ -0,0 +1,83 @@
+import { useEffect, useState } from 'react';
+import { X, CheckCircle, AlertTriangle, Info, AlertCircle } from 'lucide-react';
+import { useGameStore, type GameNotification } from '@/store';
+
+interface Toast extends GameNotification {
+  exiting: boolean;
+}
+
+export function ToastContainer() {
+  const notifications = useGameStore((s) => s.notifications);
+  const dismissNotification = useGameStore((s) => s.dismissNotification);
+  const [toasts, setToasts] = useState<Toast[]>([]);
+  const [seen, setSeen] = useState(new Set<string>());
+
+  useEffect(() => {
+    const newNotifs = notifications.filter(n => !n.read && !seen.has(n.id));
+    if (newNotifs.length === 0) return;
+
+    setSeen(prev => {
+      const next = new Set(prev);
+      for (const n of newNotifs) next.add(n.id);
+      return next;
+    });
+
+    setToasts(prev => [
+      ...newNotifs.map(n => ({ ...n, exiting: false })),
+      ...prev,
+    ].slice(0, 5));
+  }, [notifications, seen]);
+
+  useEffect(() => {
+    if (toasts.length === 0) return;
+    const timer = setTimeout(() => {
+      setToasts(prev => {
+        if (prev.length === 0) return prev;
+        const last = prev[prev.length - 1];
+        dismissNotification(last.id);
+        return prev.slice(0, -1);
+      });
+    }, 4000);
+    return () => clearTimeout(timer);
+  }, [toasts, dismissNotification]);
+
+  if (toasts.length === 0) return null;
+
+  return (
+    <div className="fixed top-16 right-4 z-50 flex flex-col gap-2 w-80">
+      {toasts.map((toast) => (
+        <div
+          key={toast.id}
+          className={`bg-surface-800 border rounded-lg p-3 shadow-lg transition-all duration-300 ${
+            toast.type === 'success' ? 'border-success/50' :
+            toast.type === 'warning' ? 'border-warning/50' :
+            toast.type === 'danger' ? 'border-danger/50' :
+            'border-surface-600'
+          }`}
+        >
+          <div className="flex items-start gap-2">
+            <div className="mt-0.5">
+              {toast.type === 'success' && <CheckCircle size={16} className="text-success" />}
+              {toast.type === 'warning' && <AlertTriangle size={16} className="text-warning" />}
+              {toast.type === 'danger' && <AlertCircle size={16} className="text-danger" />}
+              {toast.type === 'info' && <Info size={16} className="text-accent-light" />}
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="text-sm font-medium">{toast.title}</div>
+              <div className="text-xs text-surface-400">{toast.message}</div>
+            </div>
+            <button
+              onClick={() => {
+                dismissNotification(toast.id);
+                setToasts(prev => prev.filter(t => t.id !== toast.id));
+              }}
+              className="text-surface-500 hover:text-surface-300"
+            >
+              <X size={14} />
+            </button>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

apps/web/src/components/game/OfflineCatchUp.tsx

@@ -0,0 +1,121 @@
+import { useState, useEffect, useRef } from 'react';
+import { formatMoney, formatDuration, formatNumber, MAX_OFFLINE_TICKS, TICK_INTERVAL_MS } from '@ai-tycoon/shared';
+import { GameEngine } from '@ai-tycoon/game-engine';
+import { useGameStore } from '@/store';
+
+interface OfflineResult {
+  ticksProcessed: number;
+  revenue: number;
+  expenses: number;
+  duration: number;
+}
+
+export function OfflineCatchUp({ missedTicks, onComplete }: { missedTicks: number; onComplete: () => void }) {
+  const [progress, setProgress] = useState(0);
+  const [result, setResult] = useState<OfflineResult | null>(null);
+  const processingRef = useRef(false);
+
+  useEffect(() => {
+    if (processingRef.current) return;
+    processingRef.current = true;
+
+    const capped = Math.min(missedTicks, MAX_OFFLINE_TICKS);
+    const batchSize = 100;
+    let processed = 0;
+    let totalRevenue = 0;
+    let totalExpenses = 0;
+
+    const engine = new GameEngine({
+      getState: () => {
+        const s = useGameStore.getState();
+        return {
+          meta: s.meta, economy: s.economy, infrastructure: s.infrastructure,
+          compute: s.compute, research: s.research, models: s.models,
+          market: s.market, competitors: s.competitors, talent: s.talent,
+          data: s.data, reputation: s.reputation, events: s.events,
+          achievements: s.achievements,
+        };
+      },
+      setState: (partial) => useGameStore.getState().updateState(partial),
+    });
+
+    function processBatch() {
+      const end = Math.min(processed + batchSize, capped);
+      const batchResult = engine.processOfflineTicks(end - processed);
+      totalRevenue += batchResult.revenue;
+      totalExpenses += batchResult.expenses;
+      processed = end;
+      setProgress(processed / capped);
+
+      if (processed < capped) {
+        requestAnimationFrame(processBatch);
+      } else {
+        setResult({
+          ticksProcessed: processed,
+          revenue: totalRevenue,
+          expenses: totalExpenses,
+          duration: missedTicks,
+        });
+      }
+    }
+
+    requestAnimationFrame(processBatch);
+  }, [missedTicks]);
+
+  if (result) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-surface-950">
+        <div className="max-w-md w-full bg-surface-900 border border-surface-700 rounded-xl p-6 mx-4">
+          <h2 className="text-xl font-bold mb-4">Welcome Back!</h2>
+          <p className="text-sm text-surface-400 mb-4">
+            You were away for {formatDuration(result.duration)}. Here's what happened:
+          </p>
+          <div className="space-y-2 mb-6">
+            <div className="flex justify-between bg-surface-800 rounded-lg p-3">
+              <span className="text-sm text-surface-300">Revenue earned</span>
+              <span className="text-sm font-mono text-success">+{formatMoney(result.revenue)}</span>
+            </div>
+            <div className="flex justify-between bg-surface-800 rounded-lg p-3">
+              <span className="text-sm text-surface-300">Expenses</span>
+              <span className="text-sm font-mono text-danger">-{formatMoney(result.expenses)}</span>
+            </div>
+            <div className="flex justify-between bg-surface-800 rounded-lg p-3">
+              <span className="text-sm text-surface-300">Net</span>
+              <span className={`text-sm font-mono ${result.revenue - result.expenses >= 0 ? 'text-success' : 'text-danger'}`}>
+                {formatMoney(result.revenue - result.expenses)}
+              </span>
+            </div>
+            <div className="flex justify-between bg-surface-800 rounded-lg p-3">
+              <span className="text-sm text-surface-300">Time simulated</span>
+              <span className="text-sm font-mono">{formatNumber(result.ticksProcessed)} ticks</span>
+            </div>
+          </div>
+          <button
+            onClick={onComplete}
+            className="w-full bg-accent hover:bg-accent-dark text-white font-semibold py-3 rounded-lg transition-colors"
+          >
+            Continue
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-surface-950">
+      <div className="max-w-md w-full mx-4 text-center">
+        <h2 className="text-xl font-bold mb-2">Catching up...</h2>
+        <p className="text-sm text-surface-400 mb-4">
+          Simulating {formatNumber(Math.min(missedTicks, MAX_OFFLINE_TICKS))} ticks
+        </p>
+        <div className="h-2 bg-surface-800 rounded-full overflow-hidden mb-2">
+          <div
+            className="h-full bg-accent rounded-full transition-all duration-100"
+            style={{ width: `${progress * 100}%` }}
+          />
+        </div>
+        <span className="text-xs text-surface-500">{Math.floor(progress * 100)}%</span>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/layout/MainLayout.tsx

@@ -1,10 +1,13 @@
 import { Sidebar } from './Sidebar';
 import { TopBar } from './TopBar';
+import { ToastContainer } from '@/components/common/ToastContainer';
 import { useGameStore } from '@/store';
 import { DashboardPage } from '@/pages/DashboardPage';
 import { InfrastructurePage } from '@/pages/InfrastructurePage';
 import { ModelsPage } from '@/pages/ModelsPage';
 import { SettingsPage } from '@/pages/SettingsPage';
+import { MarketPage } from '@/pages/MarketPage';
+import { FinancePage } from '@/pages/FinancePage';
 
 export function MainLayout() {
   const activePage = useGameStore((s) => s.activePage);
@@ -18,6 +21,7 @@ export function MainLayout() {
           <PageRouter page={activePage} />
         </main>
       </div>
+      <ToastContainer />
     </div>
   );
 }
@@ -27,6 +31,8 @@ function PageRouter({ page }: { page: string }) {
     case 'dashboard': return <DashboardPage />;
     case 'infrastructure': return <InfrastructurePage />;
     case 'models': return <ModelsPage />;
+    case 'market': return <MarketPage />;
+    case 'finance': return <FinancePage />;
     case 'settings': return <SettingsPage />;
     default: return <PlaceholderPage name={page} />;
   }