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/pages/FinancePage.tsx

@@ -0,0 +1,151 @@
+import { useGameStore } from '@/store';
+import { formatMoney, formatPercent } from '@ai-tycoon/shared';
+import { TrendingUp, TrendingDown, DollarSign, PiggyBank, BarChart3 } from 'lucide-react';
+import { AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer, BarChart, Bar, CartesianGrid } from 'recharts';
+
+export function FinancePage() {
+  const money = useGameStore((s) => s.economy.money);
+  const revenuePerTick = useGameStore((s) => s.economy.revenuePerTick);
+  const expensesPerTick = useGameStore((s) => s.economy.expensesPerTick);
+  const totalRevenue = useGameStore((s) => s.economy.totalRevenue);
+  const totalExpenses = useGameStore((s) => s.economy.totalExpenses);
+  const funding = useGameStore((s) => s.economy.funding);
+  const history = useGameStore((s) => s.economy.financialHistory);
+  const infrastructure = useGameStore((s) => s.infrastructure);
+  const talent = useGameStore((s) => s.talent);
+
+  const netIncome = revenuePerTick - expensesPerTick;
+  const burnRate = expensesPerTick > revenuePerTick ? expensesPerTick - revenuePerTick : 0;
+  const runway = burnRate > 0 ? money / burnRate : Infinity;
+
+  const infraCosts = infrastructure.dataCenters.reduce(
+    (s, dc) => s + dc.energyCostPerTick + dc.maintenanceCostPerTick, 0,
+  );
+  const talentCosts = talent.totalSalaryPerTick;
+
+  return (
+    <div className="space-y-6">
+      <h2 className="text-2xl font-bold">Finance</h2>
+
+      <div className="grid grid-cols-4 gap-4">
+        <FinanceCard icon={DollarSign} label="Cash" value={formatMoney(money)} color="text-green-400" />
+        <FinanceCard
+          icon={TrendingUp}
+          label="Net Income/s"
+          value={formatMoney(netIncome)}
+          color={netIncome >= 0 ? 'text-green-400' : 'text-red-400'}
+        />
+        <FinanceCard icon={PiggyBank} label="Valuation" value={formatMoney(funding.valuation)} color="text-purple-400" />
+        <FinanceCard
+          icon={BarChart3}
+          label="Runway"
+          value={runway === Infinity ? 'Infinite' : `${Math.floor(runway / 3600)}h`}
+          color={runway < 3600 ? 'text-red-400' : 'text-blue-400'}
+        />
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div className="bg-surface-900 border border-surface-700 rounded-xl p-4">
+          <h3 className="text-sm font-medium text-surface-400 mb-4">Cash Over Time</h3>
+          {history.length > 1 ? (
+            <ResponsiveContainer width="100%" height={200}>
+              <AreaChart data={history}>
+                <defs>
+                  <linearGradient id="cashGrad" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="0%" stopColor="#6366f1" stopOpacity={0.3} />
+                    <stop offset="100%" stopColor="#6366f1" stopOpacity={0} />
+                  </linearGradient>
+                </defs>
+                <XAxis dataKey="tick" hide />
+                <YAxis hide />
+                <Tooltip
+                  contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: '8px' }}
+                  formatter={(v: number) => [formatMoney(v)]}
+                />
+                <Area type="monotone" dataKey="money" stroke="#6366f1" fill="url(#cashGrad)" />
+              </AreaChart>
+            </ResponsiveContainer>
+          ) : (
+            <div className="h-[200px] flex items-center justify-center text-surface-500 text-sm">
+              Data will appear as time passes
+            </div>
+          )}
+        </div>
+
+        <div className="bg-surface-900 border border-surface-700 rounded-xl p-4">
+          <h3 className="text-sm font-medium text-surface-400 mb-4">Income Statement (per second)</h3>
+          <div className="space-y-3">
+            <div className="flex justify-between text-sm">
+              <span className="text-surface-300">Revenue</span>
+              <span className="font-mono text-success">{formatMoney(revenuePerTick)}</span>
+            </div>
+            <div className="border-t border-surface-700" />
+            <div className="flex justify-between text-sm">
+              <span className="text-surface-400 pl-4">Infrastructure</span>
+              <span className="font-mono text-danger">-{formatMoney(infraCosts)}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-surface-400 pl-4">Talent</span>
+              <span className="font-mono text-danger">-{formatMoney(talentCosts)}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-surface-400 pl-4">Total Expenses</span>
+              <span className="font-mono text-danger">-{formatMoney(expensesPerTick)}</span>
+            </div>
+            <div className="border-t border-surface-700" />
+            <div className="flex justify-between text-sm font-semibold">
+              <span>Net Income</span>
+              <span className={`font-mono ${netIncome >= 0 ? 'text-success' : 'text-danger'}`}>
+                {formatMoney(netIncome)}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-surface-900 border border-surface-700 rounded-xl p-4">
+        <h3 className="text-sm font-medium text-surface-400 mb-3">Funding History</h3>
+        <div className="flex items-center gap-4 mb-3">
+          <div className="text-sm">
+            Founder Equity: <span className="font-mono font-semibold">{formatPercent(funding.founderEquity)}</span>
+          </div>
+          <div className="text-sm">
+            Total Raised: <span className="font-mono font-semibold">{formatMoney(funding.totalRaised)}</span>
+          </div>
+        </div>
+        {funding.completedRounds.length === 0 ? (
+          <p className="text-sm text-surface-500">No funding rounds completed yet.</p>
+        ) : (
+          <div className="space-y-2">
+            {funding.completedRounds.map((round, i) => (
+              <div key={i} className="bg-surface-800 rounded-lg p-3 flex items-center justify-between">
+                <span className="text-sm font-medium capitalize">{round.type}</span>
+                <div className="flex items-center gap-4 text-sm">
+                  <span className="font-mono text-success">{formatMoney(round.amount)}</span>
+                  <span className="text-surface-400">{formatPercent(round.dilution)} dilution</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function FinanceCard({ icon: Icon, label, value, color }: {
+  icon: typeof DollarSign;
+  label: string;
+  value: string;
+  color: string;
+}) {
+  return (
+    <div className="bg-surface-900 border border-surface-700 rounded-xl p-4">
+      <div className="flex items-center gap-2 mb-2">
+        <Icon size={16} className={color} />
+        <span className="text-xs text-surface-400 uppercase">{label}</span>
+      </div>
+      <div className="text-xl font-bold font-mono">{value}</div>
+    </div>
+  );
+}