diff --git a/src/components/GeneratorCpsBreakdown.tsx b/src/components/GeneratorCpsBreakdown.tsx
new file mode 100644
index 0000000..4fb3157
--- /dev/null
+++ b/src/components/GeneratorCpsBreakdown.tsx
@@ -0,0 +1,256 @@
+import { Badge, Group, Stack, Text } from "@mantine/core";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { UPGRADES } from "../data/upgrades";
+import { computeAllGeneratorsCps } from "../engine/upgradeEngine";
+import { useGameStore } from "../store";
+import { formatNumber } from "../utils/formatNumber";
+
+/** Number of 1-second buckets for the rolling click average. */
+const CLICK_BUFFER_SIZE = 10;
+
+/**
+ * Hook that tracks a rolling 10-second average of TD earned from clicks.
+ * Uses a circular buffer of 1-second buckets updated via Zustand subscription.
+ */
+function useRollingClickAverage(): number {
+  const bucketsRef = useRef<number[]>(new Array(CLICK_BUFFER_SIZE).fill(0));
+  const currentIndexRef = useRef(0);
+  const lastTickRef = useRef(Math.floor(Date.now() / 1000));
+  const [average, setAverage] = useState(0);
+
+  const advanceBuckets = useCallback(() => {
+    const now = Math.floor(Date.now() / 1000);
+    const elapsed = now - lastTickRef.current;
+    if (elapsed > 0) {
+      const steps = Math.min(elapsed, CLICK_BUFFER_SIZE);
+      for (let i = 0; i < steps; i++) {
+        currentIndexRef.current =
+          (currentIndexRef.current + 1) % CLICK_BUFFER_SIZE;
+        bucketsRef.current[currentIndexRef.current] = 0;
+      }
+      lastTickRef.current = now;
+    }
+  }, []);
+
+  // Subscribe to totalClicks changes to detect click events
+  useEffect(() => {
+    let prevClicks = useGameStore.getState().totalClicks;
+    let prevTd = useGameStore.getState().trainingData;
+
+    const unsub = useGameStore.subscribe((state) => {
+      const newClicks = state.totalClicks;
+      if (newClicks > prevClicks) {
+        advanceBuckets();
+        // Estimate TD earned from this click as the delta in trainingData
+        const tdDelta = state.trainingData.sub(prevTd).toNumber();
+        // Only count positive deltas that coincide with click increments
+        if (tdDelta > 0) {
+          bucketsRef.current[currentIndexRef.current] += tdDelta;
+        }
+      }
+      prevClicks = newClicks;
+      prevTd = state.trainingData;
+    });
+
+    return unsub;
+  }, [advanceBuckets]);
+
+  // Recalculate average every second
+  useEffect(() => {
+    const interval = setInterval(() => {
+      advanceBuckets();
+      const sum = bucketsRef.current.reduce((a, b) => a + b, 0);
+      setAverage(sum / CLICK_BUFFER_SIZE);
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [advanceBuckets]);
+
+  return average;
+}
+
+/**
+ * Renders a compact per-generator CPS breakdown table.
+ * Only generators with at least 1 owned unit are shown.
+ * Values update reactively whenever upgradeOwned changes.
+ */
+export function GeneratorCpsBreakdown() {
+  const upgradeOwned = useGameStore((s) => s.upgradeOwned);
+
+  const rows = useMemo(
+    () => computeAllGeneratorsCps(UPGRADES, upgradeOwned),
+    [upgradeOwned],
+  );
+
+  const activeRows = rows.filter((r) => r.owned > 0);
+
+  const grandTotalCps = useMemo(
+    () => activeRows.reduce((sum, r) => sum + r.totalCps, 0),
+    [activeRows],
+  );
+
+  const clickAverage = useRollingClickAverage();
+
+  if (activeRows.length === 0) {
+    return (
+      <Text size="xs" c="dimmed" ff="monospace" ta="center" py="xs">
+        No generators owned yet.
+      </Text>
+    );
+  }
+
+  return (
+    <Stack gap={3}>
+      {/* Column headers */}
+      <Group
+        justify="space-between"
+        wrap="nowrap"
+        gap="xs"
+        pb={2}
+        style={{ borderBottom: "1px solid var(--mantine-color-dark-4)" }}
+      >
+        <Text size="xs" c="dimmed" ff="monospace" fw={700} style={{ flex: 1 }}>
+          Generator
+        </Text>
+        <Text
+          size="xs"
+          c="dimmed"
+          ff="monospace"
+          fw={700}
+          style={{ flexShrink: 0, minWidth: 70, textAlign: "right" }}
+        >
+          CPS
+        </Text>
+        <Text
+          size="xs"
+          c="dimmed"
+          ff="monospace"
+          fw={700}
+          style={{ flexShrink: 0, minWidth: 42, textAlign: "right" }}
+        >
+          Share
+        </Text>
+      </Group>
+
+      {activeRows.map((row) => (
+        <Stack key={row.id} gap={0}>
+          <Group justify="space-between" wrap="nowrap" gap="xs" align="center">
+            {/* Icon + name + owned badge */}
+            <Group gap={4} wrap="nowrap" style={{ flex: 1, minWidth: 0 }}>
+              <Text
+                size="xs"
+                ff="monospace"
+                style={{ flexShrink: 0, lineHeight: 1 }}
+                aria-hidden="true"
+              >
+                {row.icon}
+              </Text>
+              <Text
+                size="xs"
+                ff="monospace"
+                truncate
+                title={row.name}
+                style={{ flex: 1, minWidth: 0 }}
+              >
+                {row.name}
+              </Text>
+              <Badge
+                size="xs"
+                variant="light"
+                color="gray"
+                style={{ flexShrink: 0 }}
+                title={`${row.owned} owned`}
+              >
+                ×{row.owned}
+              </Badge>
+            </Group>
+
+            {/* Total CPS */}
+            <Text
+              size="xs"
+              ff="monospace"
+              c="green"
+              style={{ flexShrink: 0, minWidth: 70, textAlign: "right" }}
+              title={`${row.totalCps} TD/s`}
+            >
+              {formatNumber(row.totalCps)}/s
+            </Text>
+
+            {/* Percentage share */}
+            <Badge
+              size="xs"
+              variant="light"
+              color="cyan"
+              style={{ flexShrink: 0, minWidth: 42, textAlign: "center" }}
+              title={`${row.percentOfTotal.toFixed(2)}% of total CPS`}
+            >
+              {row.percentOfTotal.toFixed(1)}%
+            </Badge>
+          </Group>
+
+          {/* Next milestone hint */}
+          {row.nextMilestone && (
+            <Text
+              size="xs"
+              ff="monospace"
+              c="dimmed"
+              pl={20}
+              style={{ lineHeight: 1.3 }}
+              title={`${row.nextMilestone.label} bonus at ${row.nextMilestone.threshold} owned`}
+            >
+              Next ×{row.nextMilestone.multiplier} at{" "}
+              {row.nextMilestone.threshold} owned
+            </Text>
+          )}
+        </Stack>
+      ))}
+
+      {/* Summary footer */}
+      <Group
+        justify="space-between"
+        wrap="nowrap"
+        gap="xs"
+        pt={4}
+        style={{ borderTop: "1px solid var(--mantine-color-dark-4)" }}
+      >
+        <Text size="xs" ff="monospace" fw={700} c="teal" style={{ flex: 1 }}>
+          Total
+        </Text>
+        <Text
+          size="xs"
+          ff="monospace"
+          fw={700}
+          c="green"
+          style={{ flexShrink: 0, minWidth: 70, textAlign: "right" }}
+          title={`${grandTotalCps} TD/s from generators`}
+        >
+          {formatNumber(grandTotalCps)}/s
+        </Text>
+        <Badge
+          size="xs"
+          variant="light"
+          color="cyan"
+          style={{ flexShrink: 0, minWidth: 42, textAlign: "center" }}
+        >
+          100%
+        </Badge>
+      </Group>
+
+      {/* Rolling click average */}
+      <Group justify="space-between" wrap="nowrap" gap="xs">
+        <Text size="xs" ff="monospace" c="dimmed" style={{ flex: 1 }}>
+          Click avg (10s)
+        </Text>
+        <Text
+          size="xs"
+          ff="monospace"
+          c="yellow"
+          style={{ flexShrink: 0, minWidth: 70, textAlign: "right" }}
+          title="Rolling 10-second average TD earned from clicks"
+        >
+          {formatNumber(clickAverage)}/s
+        </Text>
+        <div style={{ flexShrink: 0, minWidth: 42 }} />
+      </Group>
+    </Stack>
+  );
+}
diff --git a/src/components/UpgradesSidebar.tsx b/src/components/UpgradesSidebar.tsx
index 7128b1d..6aedc53 100644
--- a/src/components/UpgradesSidebar.tsx
+++ b/src/components/UpgradesSidebar.tsx
@@ -19,6 +19,7 @@ import { useGameStore } from "../store";
 import type { BuyMode } from "../store/settingsStore";
 import { useSettingsStore } from "../store/settingsStore";
 import { D } from "../utils/decimal";
+import { GeneratorCpsBreakdown } from "./GeneratorCpsBreakdown";
 import { ClickUpgradeCard } from "./upgrades/ClickUpgradeCard";
 import { UpgradeCard } from "./upgrades/UpgradeCard";
 
@@ -29,18 +30,18 @@ interface TierConfig {
 }
 
 const TIER_CONFIG: readonly TierConfig[] = [
-  { tier: "garage-lab", label: "🔬 Garage Lab", unlockStage: 0 },
-  { tier: "startup", label: "🚀 Startup", unlockStage: 0 },
-  { tier: "scale-up", label: "🏗️ Scale-Up", unlockStage: 2 },
-  { tier: "mega-corp", label: "🏢 Mega Corp", unlockStage: 3 },
-  { tier: "transcendence", label: "✨ Transcendence", unlockStage: 4 },
+  { tier: "garage-lab", label: "\uD83D\uDD2C Garage Lab", unlockStage: 0 },
+  { tier: "startup", label: "\uD83D\uDE80 Startup", unlockStage: 0 },
+  { tier: "scale-up", label: "\uD83C\uDFD7\uFE0F Scale-Up", unlockStage: 2 },
+  { tier: "mega-corp", label: "\uD83C\uDFE2 Mega Corp", unlockStage: 3 },
+  { tier: "transcendence", label: "\u2728 Transcendence", unlockStage: 4 },
 ];
 
 const BUY_MODES: readonly { mode: BuyMode; label: string; shortcut: string }[] =
   [
-    { mode: 1, label: "×1", shortcut: "1" },
-    { mode: 10, label: "×10", shortcut: "2" },
-    { mode: 100, label: "×100", shortcut: "3" },
+    { mode: 1, label: "\u00d71", shortcut: "1" },
+    { mode: 10, label: "\u00d710", shortcut: "2" },
+    { mode: 100, label: "\u00d7100", shortcut: "3" },
     { mode: "max", label: "Max", shortcut: "4" },
   ];
 
@@ -81,7 +82,7 @@ function CategoryHeader({
             transition: "transform 200ms ease",
           }}
         >
-          ▼
+          \u25bc
         </Text>
       </Group>
     </UnstyledButton>
@@ -136,6 +137,7 @@ export function UpgradesSidebar() {
       "scale-up": true,
       "mega-corp": true,
       transcendence: true,
+      "production-breakdown": true,
     },
   );
 
@@ -172,6 +174,11 @@ export function UpgradesSidebar() {
   const hasAnyUpgrades =
     visibleClickUpgrades.length > 0 || visibleTiers.length > 0;
 
+  // Count of owned generators for the breakdown header badge
+  const ownedGeneratorCount = UPGRADES.filter(
+    (u) => (upgradeOwned[u.id] ?? 0) > 0,
+  ).length;
+
   return (
     <aside aria-label="Upgrades" className="sidebar-upgrades">
       <Stack
@@ -212,7 +219,7 @@ export function UpgradesSidebar() {
               {visibleClickUpgrades.length > 0 && (
                 <div>
                   <CategoryHeader
-                    label="🖱️ Click Boosters"
+                    label="\uD83D\uDDB1\uFE0F Click Boosters"
                     count={visibleClickUpgrades.length}
                     open={openCategories["click-boosters"] ?? true}
                     onToggle={() => toggle("click-boosters")}
@@ -281,6 +288,25 @@ export function UpgradesSidebar() {
                   </div>
                 );
               })}
+
+              {/* Production Breakdown section — live CPS share per generator */}
+              <div>
+                <CategoryHeader
+                  label="\uD83D\uDCCA Production Breakdown"
+                  count={ownedGeneratorCount}
+                  open={openCategories["production-breakdown"] ?? true}
+                  onToggle={() => toggle("production-breakdown")}
+                  color="teal"
+                />
+                <Collapse
+                  in={openCategories["production-breakdown"] ?? true}
+                  transitionDuration={200}
+                >
+                  <div style={{ marginTop: 4, paddingBottom: 4 }}>
+                    <GeneratorCpsBreakdown />
+                  </div>
+                </Collapse>
+              </div>
             </Stack>
           </ScrollArea>
         </Stack>
diff --git a/src/components/index.ts b/src/components/index.ts
index 406b78a..3468847 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -3,6 +3,7 @@ export { BonusesSidebar } from "./BonusesSidebar";
 export { CrtOverlay } from "./CrtOverlay";
 export { FloatingParticles } from "./FloatingParticles";
 export { GameLayout } from "./GameLayout";
+export { GeneratorCpsBreakdown } from "./GeneratorCpsBreakdown";
 export { OfflineProgressModal } from "./OfflineProgressModal";
 export { PetDisplay } from "./PetDisplay";
 export { RebirthModal } from "./RebirthModal";
diff --git a/src/engine/milestoneEngine.test.ts b/src/engine/milestoneEngine.test.ts
index 3fe5347..1d1244a 100644
--- a/src/engine/milestoneEngine.test.ts
+++ b/src/engine/milestoneEngine.test.ts
@@ -3,6 +3,7 @@ import {
   checkMilestones,
   getMilestoneLevel,
   getMilestoneMultiplier,
+  getNextMilestone,
 } from "./milestoneEngine";
 
 describe("getMilestoneLevel", () => {
@@ -92,6 +93,46 @@ describe("getMilestoneMultiplier", () => {
   });
 });
 
+describe("getNextMilestone", () => {
+  it("returns threshold 10 when owned is 0", () => {
+    const result = getNextMilestone(0);
+    expect(result).toEqual({ threshold: 10, multiplier: 1.5, label: "+50%" });
+  });
+
+  it("returns threshold 10 when owned is 5", () => {
+    const result = getNextMilestone(5);
+    expect(result).toEqual({ threshold: 10, multiplier: 1.5, label: "+50%" });
+  });
+
+  it("returns threshold 25 when owned is exactly 10", () => {
+    const result = getNextMilestone(10);
+    expect(result).toEqual({ threshold: 25, multiplier: 2, label: "+100%" });
+  });
+
+  it("returns threshold 25 when owned is 15", () => {
+    const result = getNextMilestone(15);
+    expect(result).toEqual({ threshold: 25, multiplier: 2, label: "+100%" });
+  });
+
+  it("returns threshold 50 when owned is 25", () => {
+    const result = getNextMilestone(25);
+    expect(result).toEqual({ threshold: 50, multiplier: 3, label: "+200%" });
+  });
+
+  it("returns threshold 100 when owned is 50", () => {
+    const result = getNextMilestone(50);
+    expect(result).toEqual({ threshold: 100, multiplier: 6, label: "+500%" });
+  });
+
+  it("returns null when owned is 100 (all milestones reached)", () => {
+    expect(getNextMilestone(100)).toBeNull();
+  });
+
+  it("returns null when owned exceeds 100", () => {
+    expect(getNextMilestone(200)).toBeNull();
+  });
+});
+
 describe("checkMilestones", () => {
   it("returns empty when no threshold is crossed", () => {
     expect(checkMilestones(0, 999, new Set())).toEqual([]);
diff --git a/src/engine/milestoneEngine.ts b/src/engine/milestoneEngine.ts
index f5acb77..7d3dd22 100644
--- a/src/engine/milestoneEngine.ts
+++ b/src/engine/milestoneEngine.ts
@@ -25,6 +25,21 @@ export function getMilestoneMultiplier(owned: number): number {
   return MILESTONE_THRESHOLDS[level - 1].multiplier;
 }
 
+/**
+ * Returns the next milestone threshold the player has not yet reached,
+ * or `null` if all milestones (10/25/50/100) have been passed.
+ */
+export function getNextMilestone(
+  owned: number,
+): { threshold: number; multiplier: number; label: string } | null {
+  for (const m of MILESTONE_THRESHOLDS) {
+    if (owned < m.owned) {
+      return { threshold: m.owned, multiplier: m.multiplier, label: m.label };
+    }
+  }
+  return null;
+}
+
 /**
  * TD-earned milestone thresholds. When total TD earned crosses one of these
  * values the UI triggers a celebration event and records it in crossedMilestones.
diff --git a/src/engine/upgradeEngine.test.ts b/src/engine/upgradeEngine.test.ts
index 04eb67e..8e25da6 100644
--- a/src/engine/upgradeEngine.test.ts
+++ b/src/engine/upgradeEngine.test.ts
@@ -3,6 +3,7 @@ import type { Booster } from "../data/boosters";
 import type { Upgrade } from "../data/upgrades";
 import {
   COST_MULTIPLIER,
+  computeAllGeneratorsCps,
   computeBoosterMultiplier,
   getBulkCost,
   getMaxAffordable,
@@ -390,3 +391,143 @@ describe("computeBoosterMultiplier", () => {
     ).toBe(1);
   });
 });
+
+describe("computeAllGeneratorsCps", () => {
+  it("returns an entry for every upgrade in the input", () => {
+    const rows = computeAllGeneratorsCps([mockUpgrade, mockUpgrade2], {});
+    expect(rows).toHaveLength(2);
+    expect(rows[0].id).toBe("test-upgrade");
+    expect(rows[1].id).toBe("test-upgrade-2");
+  });
+
+  it("returns empty array for empty upgrades list", () => {
+    expect(computeAllGeneratorsCps([], {})).toHaveLength(0);
+  });
+
+  it("rows have 0 owned, 0 totalCps, 0% when nothing purchased", () => {
+    const rows = computeAllGeneratorsCps([mockUpgrade], {});
+    expect(rows[0].owned).toBe(0);
+    expect(rows[0].totalCps).toBe(0);
+    expect(rows[0].percentOfTotal).toBe(0);
+  });
+
+  it("row carries name and icon from the upgrade definition", () => {
+    const rows = computeAllGeneratorsCps([mockUpgrade], {});
+    expect(rows[0].name).toBe("Test Upgrade");
+    expect(rows[0].icon).toBe(mockUpgrade.icon);
+  });
+
+  it("perUnitCps equals baseTdPerSecond when below first milestone (< 10)", () => {
+    const rows = computeAllGeneratorsCps([mockUpgrade], { "test-upgrade": 3 });
+    expect(rows[0].perUnitCps).toBeCloseTo(mockUpgrade.baseTdPerSecond);
+  });
+
+  it("totalCps equals perUnitCps * owned", () => {
+    const owned = { "test-upgrade": 5 };
+    const rows = computeAllGeneratorsCps([mockUpgrade], owned);
+    expect(rows[0].totalCps).toBeCloseTo(rows[0].perUnitCps * 5);
+  });
+
+  it("shows 100% for the only owned generator", () => {
+    const owned = { "test-upgrade": 4 };
+    const rows = computeAllGeneratorsCps([mockUpgrade, mockUpgrade2], owned);
+    const active = rows.find((r) => r.id === "test-upgrade")!;
+    const inactive = rows.find((r) => r.id === "test-upgrade-2")!;
+    expect(active.percentOfTotal).toBeCloseTo(100);
+    expect(inactive.percentOfTotal).toBeCloseTo(0);
+  });
+
+  it("percentages across owned generators sum to 100", () => {
+    // test-upgrade: 2 owned x 1.5 = 3 TD/s
+    // test-upgrade-2: 1 owned x 5 = 5 TD/s
+    // total = 8, shares ≈ 37.5% and 62.5%
+    const owned = { "test-upgrade": 2, "test-upgrade-2": 1 };
+    const rows = computeAllGeneratorsCps([mockUpgrade, mockUpgrade2], owned);
+    const totalPercent = rows.reduce((sum, r) => sum + r.percentOfTotal, 0);
+    expect(totalPercent).toBeCloseTo(100);
+  });
+
+  it("percentages reflect each generator's share correctly", () => {
+    const owned = { "test-upgrade": 2, "test-upgrade-2": 1 };
+    const rows = computeAllGeneratorsCps([mockUpgrade, mockUpgrade2], owned);
+    const r1 = rows.find((r) => r.id === "test-upgrade")!;
+    const r2 = rows.find((r) => r.id === "test-upgrade-2")!;
+    // 3 / 8 * 100 = 37.5 and 5 / 8 * 100 = 62.5
+    expect(r1.percentOfTotal).toBeCloseTo(37.5, 1);
+    expect(r2.percentOfTotal).toBeCloseTo(62.5, 1);
+  });
+
+  it("applies milestone multiplier (x1.5 at 10 owned) to perUnitCps", () => {
+    const owned = { "test-upgrade": 10 };
+    const rows = computeAllGeneratorsCps([mockUpgrade], owned);
+    // baseTdPerSecond 1.5 * milestone 1.5 = 2.25
+    expect(rows[0].perUnitCps).toBeCloseTo(2.25);
+    expect(rows[0].totalCps).toBeCloseTo(22.5);
+  });
+
+  it("excludes global multipliers (percentages unchanged by global bonus)", () => {
+    // Percentages are based on globalMultiplier=1 so they stay the same
+    // regardless of any idle/species/booster multipliers applied at render time.
+    const owned = { "test-upgrade": 2, "test-upgrade-2": 1 };
+    const rowsBase = computeAllGeneratorsCps(
+      [mockUpgrade, mockUpgrade2],
+      owned,
+    );
+    // There's no parameter for global multiplier by design — verify the function
+    // signature doesn't accept one, and that results are stable.
+    expect(rowsBase[0].percentOfTotal).toBeCloseTo(37.5, 1);
+  });
+
+  it("nextMilestone is {threshold:10, multiplier:1.5} when owned < 10", () => {
+    const rows = computeAllGeneratorsCps([mockUpgrade], { "test-upgrade": 5 });
+    expect(rows[0].nextMilestone).toEqual({
+      threshold: 10,
+      multiplier: 1.5,
+      label: "+50%",
+    });
+  });
+
+  it("nextMilestone is {threshold:25, multiplier:2} when owned is 10", () => {
+    const rows = computeAllGeneratorsCps([mockUpgrade], { "test-upgrade": 10 });
+    expect(rows[0].nextMilestone).toEqual({
+      threshold: 25,
+      multiplier: 2,
+      label: "+100%",
+    });
+  });
+
+  it("nextMilestone is {threshold:50, multiplier:3} when owned is 25", () => {
+    const rows = computeAllGeneratorsCps([mockUpgrade], { "test-upgrade": 25 });
+    expect(rows[0].nextMilestone).toEqual({
+      threshold: 50,
+      multiplier: 3,
+      label: "+200%",
+    });
+  });
+
+  it("nextMilestone is {threshold:100, multiplier:6} when owned is 50", () => {
+    const rows = computeAllGeneratorsCps([mockUpgrade], { "test-upgrade": 50 });
+    expect(rows[0].nextMilestone).toEqual({
+      threshold: 100,
+      multiplier: 6,
+      label: "+500%",
+    });
+  });
+
+  it("nextMilestone is null when owned >= 100", () => {
+    const rows = computeAllGeneratorsCps([mockUpgrade], {
+      "test-upgrade": 100,
+    });
+    expect(rows[0].nextMilestone).toBeNull();
+  });
+
+  it("nextMilestone is null for 0 owned (no generators owned yet)", () => {
+    const rows = computeAllGeneratorsCps([mockUpgrade], {});
+    // When owned is 0, the first milestone is at 10
+    expect(rows[0].nextMilestone).toEqual({
+      threshold: 10,
+      multiplier: 1.5,
+      label: "+50%",
+    });
+  });
+});
diff --git a/src/engine/upgradeEngine.ts b/src/engine/upgradeEngine.ts
index 36bba50..840df81 100644
--- a/src/engine/upgradeEngine.ts
+++ b/src/engine/upgradeEngine.ts
@@ -2,7 +2,7 @@ import type { DecimalSource } from "break_infinity.js";
 import type { Booster } from "../data/boosters";
 import type { Upgrade } from "../data/upgrades";
 import { D, Decimal } from "../utils/decimal";
-import { getMilestoneMultiplier } from "./milestoneEngine";
+import { getMilestoneMultiplier, getNextMilestone } from "./milestoneEngine";
 import { getSynergyMultiplier } from "./synergyEngine";
 
 export const COST_MULTIPLIER = 1.15;
@@ -93,3 +93,60 @@ export function getTotalTdPerSecond(
   }
   return total.mul(globalMultiplier).mul(boosterMultiplier);
 }
+
+/** A single row in the per-generator CPS breakdown panel. */
+export interface GeneratorCpsRow {
+  id: string;
+  name: string;
+  icon: string;
+  owned: number;
+  /** Effective CPS for a single unit (baseTdPerSecond × milestone × synergy). */
+  perUnitCps: number;
+  /** Total CPS contributed by all owned units of this generator. */
+  totalCps: number;
+  /** Share of grand total CPS (0–100). */
+  percentOfTotal: number;
+  /** Next milestone the player is approaching, or null if all milestones reached. */
+  nextMilestone: {
+    threshold: number;
+    multiplier: number;
+    label: string;
+  } | null;
+}
+
+/**
+ * Returns a CPS breakdown row for every generator in `upgrades`.
+ *
+ * Global multipliers (idle boost, species auto-gen, booster) are intentionally
+ * excluded so that percentage shares are valid regardless of which global
+ * bonuses are active — the same exclusion used by GeneratorTooltipContent.
+ */
+export function computeAllGeneratorsCps(
+  upgrades: readonly Upgrade[],
+  owned: Record<string, number>,
+): GeneratorCpsRow[] {
+  const grandTotal = getTotalTdPerSecond(upgrades, owned, 1, 1);
+  const grandTotalNum = grandTotal.toNumber();
+
+  return upgrades.map((upgrade) => {
+    const count = owned[upgrade.id] ?? 0;
+    const milestoneMultiplier = getMilestoneMultiplier(count);
+    const synergyMultiplier = getSynergyMultiplier(upgrade.id, owned);
+    const perUnitCps =
+      upgrade.baseTdPerSecond * milestoneMultiplier * synergyMultiplier;
+    const totalCps = perUnitCps * count;
+    const percentOfTotal =
+      grandTotalNum > 0 ? (totalCps / grandTotalNum) * 100 : 0;
+
+    return {
+      id: upgrade.id,
+      name: upgrade.name,
+      icon: upgrade.icon,
+      owned: count,
+      perUnitCps,
+      totalCps,
+      percentOfTotal,
+      nextMilestone: getNextMilestone(count),
+    };
+  });
+}