feat: add delta TD/s preview to upgrade hover tooltip

- Extend GeneratorTooltipData with deltaTdPerSecond and milestoneWillCross
- Compute delta accounting for milestone threshold crossings
- Display "+X TD/s" next-purchase line in GeneratorTooltipContent with
  neon green glow (yellow when a milestone will be crossed)
- Suppress redundant next-milestone row when milestone will trigger on
  next purchase (the crossing callout already conveys the info)
- Add tests for delta values including milestone-crossing boundaries

Author: 4sh-dev

src/components/upgrades/GeneratorTooltipContent.tsx

@@ -23,6 +23,8 @@ export function GeneratorTooltipContent({
     percentOfTotal,
     nextMilestoneOwned,
     nextMilestoneMultiplier,
+    deltaTdPerSecond,
+    milestoneWillCross,
   } = computeGeneratorTooltipData(upgrade, owned, allOwned);
 
   const hasMultiplier = milestoneMultiplier > 1 || synergyMultiplier > 1;
@@ -91,7 +93,34 @@ export function GeneratorTooltipContent({
         </Box>
       )}
 
-      {nextMilestoneOwned !== null && (
+      <Divider />
+
+      <Group justify="space-between">
+        <Text size="xs" c="dimmed" ff="monospace">
+          Next purchase adds
+        </Text>
+        <Text
+          size="xs"
+          c={milestoneWillCross ? "yellow" : "green"}
+          fw={700}
+          ff="monospace"
+          style={{
+            textShadow: milestoneWillCross
+              ? "0 0 6px var(--mantine-color-yellow-5)"
+              : "0 0 6px #39ff14",
+          }}
+        >
+          +{formatNumber(deltaTdPerSecond)} TD/s
+        </Text>
+      </Group>
+
+      {milestoneWillCross && (
+        <Text size="xs" c="yellow" ff="monospace">
+          🏆 Milestone! All units ×{nextMilestoneMultiplier}
+        </Text>
+      )}
+
+      {!milestoneWillCross && nextMilestoneOwned !== null && (
         <>
           <Divider />
           <Text size="xs" c="yellow" ff="monospace">

src/components/upgrades/tooltipHelpers.test.ts

@@ -87,7 +87,7 @@ describe("computeGeneratorTooltipData", () => {
   it("returns correct name and icon", () => {
     const data = computeGeneratorTooltipData(neuralNotepad, 0, {});
     expect(data.name).toBe("Neural Notepad");
-    expect(data.icon).toBe("\uD83D\uDCDD");
+    expect(data.icon).toBe("📝");
   });
 
   it("effectiveTdPerUnit equals baseTdPerUnit when no multipliers apply", () => {
@@ -104,4 +104,85 @@ describe("computeGeneratorTooltipData", () => {
       data.effectiveTdPerUnit * data.owned,
     );
   });
+
+  // ── Delta TD/s tests ──────────────────────────────────────────────────────
+
+  describe("deltaTdPerSecond", () => {
+    it("equals baseTdPerSecond for the first unit (0 → 1)", () => {
+      // 0 owned → 1 owned, no milestone yet: delta = 0.2 * 1 * 1 - 0 = 0.2
+      const data = computeGeneratorTooltipData(neuralNotepad, 0, {});
+      expect(data.deltaTdPerSecond).toBeCloseTo(0.2);
+      expect(data.milestoneWillCross).toBe(false);
+    });
+
+    it("equals baseTdPerSecond for a mid-range unit with no milestone (5 → 6)", () => {
+      // No milestone active (owned < 10): delta = base * 6 * 1 - base * 5 * 1 = base
+      const allOwned = { "neural-notepad": 5 };
+      const data = computeGeneratorTooltipData(neuralNotepad, 5, allOwned);
+      expect(data.deltaTdPerSecond).toBeCloseTo(0.2);
+      expect(data.milestoneWillCross).toBe(false);
+    });
+
+    it("accounts for milestone crossing when buying the 10th unit (9 → 10)", () => {
+      // Buying the 10th unit crosses the x1.5 milestone.
+      // Current:   0.2 * 9  * 1   = 1.8
+      // Future:    0.2 * 10 * 1.5 = 3.0
+      // Delta: 3.0 - 1.8 = 1.2
+      const allOwned = { "neural-notepad": 9 };
+      const data = computeGeneratorTooltipData(neuralNotepad, 9, allOwned);
+      expect(data.deltaTdPerSecond).toBeCloseTo(1.2);
+      expect(data.milestoneWillCross).toBe(true);
+    });
+
+    it("accounts for milestone crossing when buying the 25th unit (24 → 25)", () => {
+      // Buying the 25th unit crosses the x2 milestone.
+      // Current:   0.2 * 24 * 1.5 = 7.2
+      // Future:    0.2 * 25 * 2   = 10.0
+      // Delta: 10.0 - 7.2 = 2.8
+      const allOwned = { "neural-notepad": 24 };
+      const data = computeGeneratorTooltipData(neuralNotepad, 24, allOwned);
+      expect(data.deltaTdPerSecond).toBeCloseTo(2.8);
+      expect(data.milestoneWillCross).toBe(true);
+    });
+
+    it("accounts for milestone crossing when buying the 50th unit (49 → 50)", () => {
+      // Buying the 50th unit crosses the x3 milestone.
+      // Current:   0.2 * 49 * 2 = 19.6
+      // Future:    0.2 * 50 * 3 = 30.0
+      // Delta: 30.0 - 19.6 = 10.4
+      const allOwned = { "neural-notepad": 49 };
+      const data = computeGeneratorTooltipData(neuralNotepad, 49, allOwned);
+      expect(data.deltaTdPerSecond).toBeCloseTo(10.4);
+      expect(data.milestoneWillCross).toBe(true);
+    });
+
+    it("applies normal delta after milestone (owned=10, 10 → 11)", () => {
+      // x1.5 milestone active, no crossing.
+      // Current:   0.2 * 10 * 1.5 = 3.0
+      // Future:    0.2 * 11 * 1.5 = 3.3
+      // Delta: 0.3
+      const allOwned = { "neural-notepad": 10 };
+      const data = computeGeneratorTooltipData(neuralNotepad, 10, allOwned);
+      expect(data.deltaTdPerSecond).toBeCloseTo(0.3);
+      expect(data.milestoneWillCross).toBe(false);
+    });
+
+    it("applies normal delta at max milestone (owned=100, 100 → 101)", () => {
+      // x6 milestone active, no further milestones.
+      // Current:   0.2 * 100 * 6 = 120.0
+      // Future:    0.2 * 101 * 6 = 121.2
+      // Delta: 1.2
+      const allOwned = { "neural-notepad": 100 };
+      const data = computeGeneratorTooltipData(neuralNotepad, 100, allOwned);
+      expect(data.deltaTdPerSecond).toBeCloseTo(1.2);
+      expect(data.milestoneWillCross).toBe(false);
+    });
+
+    it("milestoneWillCross is false well before a threshold", () => {
+      const data = computeGeneratorTooltipData(neuralNotepad, 7, {
+        "neural-notepad": 7,
+      });
+      expect(data.milestoneWillCross).toBe(false);
+    });
+  });
 });

src/components/upgrades/tooltipHelpers.ts

@@ -21,6 +21,10 @@ export interface GeneratorTooltipData {
   nextMilestoneOwned: number | null;
   nextMilestoneMultiplier: number | null;
   nextMilestoneLabel: string | null;
+  /** TD/s gained by purchasing one more unit (accounts for milestone crossing). */
+  deltaTdPerSecond: number;
+  /** True when buying the next unit crosses a milestone threshold. */
+  milestoneWillCross: boolean;
 }
 
 /**
@@ -51,6 +55,18 @@ export function computeGeneratorTooltipData(
 
   const nextThreshold = MILESTONE_THRESHOLDS[milestoneLevel] ?? null;
 
+  // Delta: TD/s gained by purchasing one more unit.
+  // Milestone crossing is handled correctly: if owned+1 hits a threshold,
+  // ALL existing units benefit from the new multiplier too.
+  const newOwned = owned + 1;
+  const newAllOwned = { ...allOwned, [upgrade.id]: newOwned };
+  const newMilestoneMultiplier = getMilestoneMultiplier(newOwned);
+  const newSynergyMultiplier = getSynergyMultiplier(upgrade.id, newAllOwned);
+  const futureTdForGenerator =
+    upgrade.baseTdPerSecond * newOwned * newMilestoneMultiplier * newSynergyMultiplier;
+  const deltaTdPerSecond = futureTdForGenerator - totalTdForGenerator;
+  const milestoneWillCross = getMilestoneLevel(newOwned) > milestoneLevel;
+
   return {
     name: upgrade.name,
     icon: upgrade.icon,
@@ -64,5 +80,7 @@ export function computeGeneratorTooltipData(
     nextMilestoneOwned: nextThreshold?.owned ?? null,
     nextMilestoneMultiplier: nextThreshold?.multiplier ?? null,
     nextMilestoneLabel: nextThreshold?.label ?? null,
+    deltaTdPerSecond,
+    milestoneWillCross,
   };
 }