fix(app): clarify generator output and availability

Author: ApocDev

app/e2e/mut/count-pin.e2e.ts

@@ -1,5 +1,12 @@
+import { DatabaseSync } from "node:sqlite";
 import { expect, test } from "@playwright/test";
-import { addGoal, createBlock } from "./helpers";
+import {
+  activeProjectDbFile,
+  addGoal,
+  createBlock,
+  goto,
+  uniqueName,
+} from "./helpers";
 
 /**
  * Inline building-count pin (#121): a recipe row's building count is click-to-
@@ -38,3 +45,99 @@ test("building count: click to fix, tint shows fixed, clear to unpin", async ({
   await expect(page.locator('button[title="click to fix the building count"]')).toBeVisible();
   await expect(page.locator('button[title^="fixed at"]')).toHaveCount(0);
 });
+
+test("variable generator shows its average and min-max output", async ({ page }) => {
+  const db = new DatabaseSync(activeProjectDbFile());
+  db.exec("PRAGMA busy_timeout = 5000");
+  const product = db
+    .prepare(
+      `SELECT amount, amount_min, amount_max FROM recipe_products
+       WHERE recipe = 'generate-multiblade-turbine-mk01' AND name = 'pyops-electricity'`,
+    )
+    .get() as { amount: number; amount_min: number | null; amount_max: number | null };
+  let id: number;
+  try {
+    db.prepare(
+      `UPDATE recipe_products SET amount = 1.2, amount_min = 0.4, amount_max = 2
+       WHERE recipe = 'generate-multiblade-turbine-mk01' AND name = 'pyops-electricity'`,
+    ).run();
+    const data = {
+      recipes: [
+        "generate-steam-engine-250",
+        "boil-steam-250",
+        "generate-multiblade-turbine-mk01",
+      ],
+      made: ["steam"],
+      pins: [{ kind: "count", recipe: "generate-multiblade-turbine-mk01", count: 40 }],
+      machines: {
+        "generate-steam-engine-250": "steam-engine",
+        "boil-steam-250": "boiler",
+        "generate-multiblade-turbine-mk01": "multiblade-turbine-mk01",
+      },
+      fuels: { "boil-steam-250": "raw-coal" },
+      goals: [{ name: "pyops-electricity", rate: 50 }],
+    };
+    const inserted = db
+      .prepare("INSERT INTO blocks (name, data) VALUES (?, ?)")
+      .run(uniqueName("Variable power"), JSON.stringify(data));
+    id = Number(inserted.lastInsertRowid);
+  } finally {
+    db.close();
+  }
+
+  try {
+    await goto(page, `/block/${id}`);
+    const ignore = page.getByRole("button", { name: "Ignore for now" });
+    if (await ignore.isVisible()) await ignore.click();
+    await expect(page.locator('[data-rate-range="variable"]')).toHaveText(
+      "48 MW avg · 16 MW–80 MW",
+    );
+  } finally {
+    const cleanup = new DatabaseSync(activeProjectDbFile());
+    try {
+      cleanup.exec("PRAGMA busy_timeout = 5000");
+      cleanup
+        .prepare(
+          `UPDATE recipe_products SET amount = ?, amount_min = ?, amount_max = ?
+           WHERE recipe = 'generate-multiblade-turbine-mk01' AND name = 'pyops-electricity'`,
+        )
+        .run(product.amount, product.amount_min, product.amount_max);
+      cleanup.prepare("DELETE FROM blocks WHERE id = ?").run(id);
+    } finally {
+      cleanup.close();
+    }
+  }
+});
+
+test("recipe picker groups unlocked choices and disables locked buildings", async ({ page }) => {
+  await createBlock(page);
+  await page.locator('button[title="add a goal product"]').click();
+  const goalDialog = page.getByRole("dialog", { name: "Add a goal product" });
+  await goalDialog.getByPlaceholder("search an item or fluid…").fill("pyops electricity");
+  await goalDialog.getByRole("button", { name: "Electricity (MJ)", exact: true }).click();
+  await expect(goalDialog).toBeHidden();
+  await page.locator('button[aria-label^="add a recipe that makes "]').click();
+
+  const picker = page.getByRole("dialog", { name: "Recipes that make Electricity (MJ)" });
+  const unlocked = picker.getByText("Unlocked now", { exact: true });
+  const locked = picker.getByText("Locked or unavailable", { exact: true });
+  await expect(unlocked).toBeVisible();
+  await expect(locked).toBeVisible();
+  expect((await unlocked.boundingBox())!.y).toBeLessThan((await locked.boundingBox())!.y);
+
+  const steam = picker.getByRole("button", { name: /Steam engine power \(150°\)/ });
+  await expect(steam).toHaveAttribute("aria-disabled", "false");
+  await expect(steam).toContainText("unlocked now · Steam engine");
+
+  const solar = picker.getByRole("button", { name: /Solar panel power \(peak\)/ });
+  await expect(solar).toHaveAttribute("aria-disabled", "true");
+  await expect(solar).toContainText("building locked · Solar panel · needs Solar energy");
+  await solar.click({ force: true });
+  await expect(picker).toBeVisible();
+
+  // Py's `-blank` runtime entity uses the same localized name and output. It is
+  // an alternate state of this building, not a second recipe choice.
+  await expect(
+    picker.getByText('Multiblade "fish" turbine power (average)', { exact: true }),
+  ).toHaveCount(1);
+});

app/e2e/mut/extract-recipe.e2e.ts

@@ -7,7 +7,7 @@ test("extract a recipe row into a dedicated block from the row icon menu", async
 
   await page.locator('button[aria-label^="add a recipe that makes "]').click();
   const platePicker = page.getByRole("dialog", { name: /Recipes that make/ });
-  await platePicker.getByRole("button", { name: /Iron plate/ }).first().click();
+  await platePicker.locator('[data-recipe-candidate="iron-plate"]').click();
   await expect(platePicker).toBeHidden();
 
   await page.getByRole("button", { name: /^Iron ore.*(raw input|craftable)/ }).first().click();

app/e2e/mut/fluid-fuel.e2e.ts

@@ -1,5 +1,13 @@
 import { expect, test } from "@playwright/test";
-import { addGoal, blockNameInput, createBlock, expectUndoTop, goto, uniqueName } from "./helpers";
+import {
+  addGoal,
+  blockNameInput,
+  createBlock,
+  expectUndoTop,
+  goto,
+  setPlanningHorizon,
+  uniqueName,
+} from "./helpers";
 
 /**
  * Fungible fluid fuel (#25): a machine whose energy source burns UNFILTERED
@@ -9,13 +17,15 @@ import { addGoal, blockNameInput, createBlock, expectUndoTop, goto, uniqueName }
  * per-row fluid pick like the old behavior (which defaulted to petroleum-gas).
  */
 test("a fluid-burning drill demands the Fluid fuel pool, not a picked fluid", async ({ page }) => {
+  await goto(page, "/settings");
+  await setPlanningHorizon(page, "Future");
   await createBlock(page);
   await addGoal(page, "antimony ore", "Antimony ore");
 
   // several recipes make Antimony ore → the picker opens; take the drill's one
   await page.locator('button[aria-label^="add a recipe that makes "]').click();
   const picker = page.getByRole("dialog", { name: /Recipes that make/ });
-  await picker.getByRole("button", { name: /Mine Antimony field/ }).click();
+  await picker.locator('[data-recipe-candidate="mine-antimonium"]').click();
   await expect(picker).toBeHidden();
   await expect(page.getByText("Mine Antimony field")).toBeVisible();
 
@@ -33,6 +43,7 @@ test("a fluid-burning drill demands the Fluid fuel pool, not a picked fluid", as
   await expect(page.getByLabel(/^Fluid fuel \(MJ\) \S+ [MkG]?W/).first()).toBeVisible();
   // the pre-#25 behavior defaulted fluid burners to a petroleum-gas import — gone
   await expect(page.getByLabel(/^Petroleum gas/)).toHaveCount(0);
+  await setPlanningHorizon(page, "Now");
 });
 
 /**

app/e2e/mut/helpers.ts

@@ -112,6 +112,22 @@ export function goalRateButton(page: Page) {
   return page.locator('button[title^="click to edit the goal rate"]');
 }
 
+/** Change the global planning horizon through the same header dialog a player
+ * uses. Advanced-recipe specs opt into Future explicitly now that locked recipe
+ * picker rows are intentionally disabled in Now mode. */
+export async function setPlanningHorizon(
+  page: Page,
+  mode: "Now" | "Future" | "Up to target",
+): Promise<void> {
+  await page.getByRole("button", { name: /^Horizon:/ }).click();
+  const dialog = page.getByRole("dialog", { name: "Planning horizon" });
+  const choice = dialog.getByRole("button", { name: mode, exact: true });
+  await choice.click();
+  await expect(choice).toHaveAttribute("aria-pressed", "true");
+  await page.keyboard.press("Escape");
+  await expect(dialog).toBeHidden();
+}
+
 /** Click the goal rate, type a new value, commit with Enter. */
 export async function setGoalRate(page: Page, value: string): Promise<void> {
   await goalRateButton(page).click();

app/e2e/mut/made-links.e2e.ts

@@ -21,7 +21,7 @@ test("marking an import made without a producer keeps it a silent import", async
 
   await page.locator('button[aria-label^="add a recipe that makes "]').click();
   const platePicker = page.getByRole("dialog", { name: /Recipes that make/ });
-  await platePicker.getByRole("button", { name: /Iron plate/ }).first().click();
+  await platePicker.locator('[data-recipe-candidate="iron-plate"]').click();
   await expect(platePicker).toBeHidden();
 
   const oreImport = page.getByRole("button", { name: /^Iron ore.*(raw input|craftable)/ }).first();

app/e2e/mut/subblock.e2e.ts

@@ -21,7 +21,7 @@ test("promote a sub-block to a composed module, edit its goal, and persist", asy
   // add the plate producer (self-links the goal)
   await page.locator('button[aria-label^="add a recipe that makes "]').click();
   const platePicker = page.getByRole("dialog", { name: /Recipes that make/ });
-  await platePicker.getByRole("button", { name: /Iron plate/ }).first().click();
+  await platePicker.locator('[data-recipe-candidate="iron-plate"]').click();
   await expect(platePicker).toBeHidden();
 
   // add an iron-ore producer, so the block has a two-recipe chain to fold

app/e2e/mut/sushi.e2e.ts

@@ -13,7 +13,7 @@ test("sushi planner sizes one mixed loop for the block's flows", async ({ page }
   // plate recipe, then a producer for its ore ingredient → ore becomes internal
   await page.locator('button[aria-label^="add a recipe that makes "]').click();
   const platePicker = page.getByRole("dialog", { name: /Recipes that make/ });
-  await platePicker.getByRole("button", { name: /Iron plate/ }).first().click();
+  await platePicker.locator('[data-recipe-candidate="iron-plate"]').click();
   await expect(platePicker).toBeHidden();
   await page.getByRole("button", { name: /^Iron ore.*(raw input|craftable)/ }).first().click();
   const orePicker = page.getByRole("dialog", { name: /Recipes that make/ });

app/src/components/block/item-chip.test.tsx

@@ -11,6 +11,24 @@ vi.mock("#/server/factorio", () => ({
 }));
 
 describe("ItemChip spoil time", () => {
+  it("shows average, minimum, and maximum for variable power generation", () => {
+    const { getByRole, getByText } = render(
+      <ItemChip
+        name="pyops-electricity"
+        kind="fluid"
+        display="Electricity (MJ)"
+        rate={48}
+        rateMin={16}
+        rateMax={80}
+        link="target"
+        onClick={() => {}}
+      />,
+    );
+
+    expect(getByText("48 MW avg · 16 MW–80 MW").getAttribute("data-rate-range")).toBe("variable");
+    expect(getByRole("button").getAttribute("aria-label")).toContain("48 MW avg · 16 MW–80 MW");
+  });
+
   it("shows the product's spoil time and includes it in the accessible label", () => {
     const { getByRole, getByText } = render(
       <ItemChip

app/src/components/block/item-chip.tsx

@@ -25,6 +25,8 @@ export function ItemChip({
   kind,
   display,
   rate,
+  rateMin,
+  rateMax,
   temp,
   spoilTicks,
   link,
@@ -38,6 +40,9 @@ export function ItemChip({
   kind: string;
   display?: string | null;
   rate?: number;
+  /** Variable energy production range; `rate` is the planner average. */
+  rateMin?: number;
+  rateMax?: number;
   /** temperature label for fluids ("125°", "≤101°") — shown after the rate */
   temp?: string | null;
   /** visible spoil time for a product; ingredient chips leave this unset */
@@ -58,6 +63,19 @@ export function ItemChip({
       ? "raw input — supply externally"
       : link;
   const spoilTime = spoilTicks != null ? fmtSpoilTime(spoilTicks) : null;
+  const variableRate =
+    rate != null &&
+    rateMin != null &&
+    rateMax != null &&
+    (Math.abs(rateMin - rate) > 1e-9 || Math.abs(rateMax - rate) > 1e-9);
+  const displayedRate =
+    rate == null
+      ? ""
+      : variableRate
+        ? `${rateLabel(name, rate)} avg · ${rateLabel(name, rateMin)}–${rateLabel(name, rateMax)}`
+        : rateLabel(name, rate);
+  const accessibleRate =
+    rate == null ? "" : variableRate ? displayedRate : rateLabel(name, rate, { perSec: true });
   return (
     <span className="inline-flex items-center gap-1">
       <ItemHover
@@ -74,7 +92,7 @@ export function ItemChip({
             e.preventDefault();
             onContext(e);
           }}
-          aria-label={`${display ?? name}${rate != null ? ` ${rateLabel(name, rate, { perSec: true })}` : ""}${spoilTime ? ` · spoils in ${spoilTime}` : ""}${incidental ? " · includes estimated incidental spoilage" : ""} · ${why}`}
+          aria-label={`${display ?? name}${accessibleRate ? ` ${accessibleRate}` : ""}${spoilTime ? ` · spoils in ${spoilTime}` : ""}${incidental ? " · includes estimated incidental spoilage" : ""} · ${why}`}
           className={`flex items-center gap-1 px-1.5 py-1 text-sm hover:brightness-95 ${cls}`}
         >
           <span className="relative flex">
@@ -87,7 +105,9 @@ export function ItemChip({
               />
             )}
           </span>
-          {rate != null && <span>{rateLabel(name, rate)}</span>}
+          {rate != null && (
+            <span data-rate-range={variableRate ? "variable" : undefined}>{displayedRate}</span>
+          )}
           {incidental && (
             <span
               data-incidental-spoilage