Add floating dev/debug menu for QA testing (Ctrl+D)

Four-tab panel with resource manipulation, time controls, state inspection, and event triggers to accelerate testing across all game systems. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-24 23:43:41 -04:00
parent c799f2e359
commit 9c49a10b31
7 changed files with 738 additions and 0 deletions
@@ -0,0 +1,108 @@
+import { useGameStore } from '@/store';
+import { formatMoney, formatNumber, formatFlops, formatPercent } from '@ai-tycoon/shared';
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="mb-3">
+      <div className="text-[10px] uppercase tracking-wider text-surface-500 mb-1 font-semibold">{title}</div>
+      <div className="grid grid-cols-2 gap-x-4 gap-y-0.5">{children}</div>
+    </div>
+  );
+}
+
+function Stat({ label, value }: { label: string; value: string | number }) {
+  return (
+    <>
+      <span className="text-xs text-surface-400">{label}</span>
+      <span className="text-xs font-mono text-surface-100 text-right">{value}</span>
+    </>
+  );
+}
+
+export function StateInspectionTab() {
+  const meta = useGameStore((s) => s.meta);
+  const economy = useGameStore((s) => s.economy);
+  const compute = useGameStore((s) => s.compute);
+  const market = useGameStore((s) => s.market);
+  const infrastructure = useGameStore((s) => s.infrastructure);
+  const reputation = useGameStore((s) => s.reputation);
+  const research = useGameStore((s) => s.research);
+  const models = useGameStore((s) => s.models);
+
+  const totalFailedRacks = infrastructure.clusters.reduce((sum, cl) =>
+    sum + cl.campuses.reduce((s2, ca) =>
+      s2 + ca.dataCenters.reduce((s3, dc) => s3 + dc.computeRacksFailed, 0), 0), 0);
+
+  const totalOnlineRacks = infrastructure.clusters.reduce((sum, cl) =>
+    sum + cl.campuses.reduce((s2, ca) =>
+      s2 + ca.dataCenters.reduce((s3, dc) => s3 + dc.computeRacksOnline, 0), 0), 0);
+
+  const pipelineRacks = infrastructure.clusters.reduce((sum, cl) =>
+    sum + cl.campuses.reduce((s2, ca) =>
+      s2 + ca.dataCenters.reduce((s3, dc) =>
+        s3 + dc.deploymentCohorts.reduce((s4, co) => s4 + co.count, 0), 0), 0), 0);
+
+  return (
+    <div className="space-y-1">
+      <Section title="Meta">
+        <Stat label="Era" value={meta.currentEra} />
+        <Stat label="Tick" value={formatNumber(meta.tickCount)} />
+        <Stat label="Speed" value={`${meta.gameSpeed}x`} />
+        <Stat label="Paused" value={meta.isPaused ? 'Yes' : 'No'} />
+      </Section>
+
+      <Section title="Economy">
+        <Stat label="Money" value={formatMoney(economy.money)} />
+        <Stat label="Revenue/tick" value={formatMoney(economy.revenuePerTick)} />
+        <Stat label="Expenses/tick" value={formatMoney(economy.expensesPerTick)} />
+        <Stat label="Total Revenue" value={formatMoney(economy.totalRevenue)} />
+        <Stat label="Valuation" value={formatMoney(economy.funding.valuation)} />
+        <Stat label="Equity" value={formatPercent(economy.funding.founderEquity)} />
+      </Section>
+
+      <Section title="Compute">
+        <Stat label="Total FLOPS" value={formatFlops(compute.totalFlops)} />
+        <Stat label="Utilization" value={formatPercent(compute.inferenceUtilization)} />
+        <Stat label="Training" value={formatPercent(compute.trainingAllocation)} />
+        <Stat label="Inference" value={formatPercent(compute.inferenceAllocation)} />
+        <Stat label="Capacity" value={`${formatNumber(compute.tokensPerSecondCapacity)} tok/s`} />
+        <Stat label="Demand" value={`${formatNumber(compute.tokensPerSecondDemand)} tok/s`} />
+      </Section>
+
+      <Section title="Market">
+        <Stat label="Subscribers" value={formatNumber(market.consumers.totalSubscribers)} />
+        <Stat label="Satisfaction" value={formatPercent(market.consumers.satisfaction)} />
+        <Stat label="Growth/tick" value={market.consumers.growthRatePerTick.toFixed(4)} />
+        <Stat label="Churn/tick" value={market.consumers.churnRatePerTick.toFixed(4)} />
+        <Stat label="Contracts" value={market.enterprise.activeContracts.length} />
+        <Stat label="API tok/tick" value={formatNumber(market.enterprise.totalApiCallsPerTick)} />
+      </Section>
+
+      <Section title="Infrastructure">
+        <Stat label="Clusters" value={infrastructure.clusters.length} />
+        <Stat label="Data Centers" value={infrastructure.totalDataCenterCount} />
+        <Stat label="Racks Online" value={totalOnlineRacks} />
+        <Stat label="Racks Failed" value={totalFailedRacks} />
+        <Stat label="In Pipeline" value={pipelineRacks} />
+        <Stat label="Total FLOPS" value={formatFlops(infrastructure.totalFlops)} />
+      </Section>
+
+      <Section title="Reputation">
+        <Stat label="Score" value={reputation.score} />
+        <Stat label="Safety" value={reputation.safetyRecord} />
+        <Stat label="Public" value={reputation.publicPerception} />
+        <Stat label="Employee" value={reputation.employeeSatisfaction.toFixed(1)} />
+        <Stat label="Regulatory" value={reputation.regulatoryStanding.toFixed(1)} />
+      </Section>
+
+      <Section title="Research & Models">
+        <Stat label="Completed" value={research.completedResearch.length} />
+        <Stat label="Points" value={research.researchPoints.toFixed(1)} />
+        <Stat label="Active" value={research.activeResearch?.researchId ?? 'None'} />
+        <Stat label="Models" value={models.trainedModels.length} />
+        <Stat label="Training" value={models.activeTraining?.modelName ?? 'None'} />
+        <Stat label="Deployed" value={models.trainedModels.filter(m => m.isDeployed).length} />
+      </Section>
+    </div>
+  );
+}