fix(block): distinguish consume goals from imports

Author: ApocDev

app/e2e/mut/goal-rates.e2e.ts

@@ -1,7 +1,18 @@
 import { DatabaseSync } from "node:sqlite";
-import { expect, test } from "@playwright/test";
+import { expect, type Page, test } from "@playwright/test";
 import { activeProjectDbFile, expectUndoTop, goto, uniqueName } from "./helpers";
 
+async function dismissDataDriftPrompt(page: Page) {
+  const ignore = page.getByRole("button", { name: "Ignore for now" });
+  try {
+    await expect(ignore).toBeVisible({ timeout: 2_000 });
+    await ignore.click();
+  } catch {
+    // The prompt only appears when the copied project data differs from the
+    // currently installed mods. Most test runs have no drift to dismiss.
+  }
+}
+
 test("a secondary goal accepts and persists a negative consume rate", async ({ page }) => {
   // Block 38's shape: Tar remains the primary sink while Shale oil is added as
   // another goal and changed from the default production rate to consumption.
@@ -25,6 +36,7 @@ test("a secondary goal accepts and persists a negative consume rate", async ({ p
   }
 
   await goto(page, `/block/${id}`);
+  await dismissDataDriftPrompt(page);
   await page.getByRole("button", { name: "1", exact: true }).click();
   const input = page.locator("input:focus");
   await input.fill("-2.5");
@@ -49,3 +61,31 @@ test("a secondary goal accepts and persists a negative consume rate", async ({ p
     saved.close();
   }
 });
+
+test("a consume goal is not repeated in the Block balance imports", async ({ page }) => {
+  const data = {
+    recipes: ["burn-fluid-kerosene"],
+    goals: [
+      { name: "water", rate: -1 },
+      { name: "kerosene", rate: -5 },
+    ],
+  };
+  const db = new DatabaseSync(activeProjectDbFile());
+  let id: number;
+  try {
+    db.exec("PRAGMA busy_timeout = 5000");
+    const inserted = db
+      .prepare("INSERT INTO blocks (name, data) VALUES (?, ?)")
+      .run(uniqueName("Kerosene sink"), JSON.stringify(data));
+    id = Number(inserted.lastInsertRowid);
+  } finally {
+    db.close();
+  }
+
+  await goto(page, `/block/${id}`);
+  await dismissDataDriftPrompt(page);
+  await expect(page.getByRole("button", { name: /^Kerosene 5\/s · target/ })).toBeVisible();
+  await expect(
+    page.getByRole("button", { name: /^Kerosene 5\/s · (craftable|raw input)/ }),
+  ).toBeHidden();
+});

app/src/components/block/balance-card.tsx

@@ -61,6 +61,8 @@ export function BalanceCard({
   const supplyPriority = useStore(doc.store, (s) => s.supplyPriority ?? 0);
   const supplyPriorities = useStore(doc.store, (s) => s.supplyPriorities ?? {});
   const spoilables = useSpoilables();
+  const showImports = !!res && (res.displayImports.length > 0 || res.displayExports.length === 0);
+  const showExports = !!res?.displayExports.length;
   // One mixed loop candidate: every solid item touching a belt in this block —
   // imports, exports, AND internal row-to-row flows all ride the same loop in
   // the "everything on one belt" pattern. A good's belt rate is
@@ -302,89 +304,91 @@ export function BalanceCard({
             </div>
           )}
           <div
-            className={`grid gap-4 p-3 ${res?.displayExports.length ? "grid-cols-2" : "grid-cols-1"}`}
+            className={`grid gap-4 p-3 ${showImports && showExports ? "grid-cols-2" : "grid-cols-1"}`}
           >
-            <div>
-              <div className="mb-1 text-sm font-semibold text-warning">Imports</div>
-              <div className="flex flex-wrap gap-x-3 gap-y-2">
-                {res?.imports.length ? (
-                  res.imports.map((f) => (
-                    <span key={f.name} className="group flex flex-col items-start gap-1.5">
-                      <span className="inline-flex items-center gap-1.5">
-                        <ItemChip
-                          name={f.name}
-                          kind={f.kind}
-                          display={res.display?.[f.name]}
-                          rate={f.rate}
-                          link="import"
-                          craftable={producible.has(f.name)}
-                          fuel={fuelSet.has(f.name)}
-                          onClick={() => onMakeFor(f.name)}
-                          onContext={(e) =>
-                            onCtxMenu(e, { name: f.name, kind: f.kind, link: "import" })
-                          }
-                        />
-                        {/* Locked-as-block-driver state (set via right-click → "Size block by this
+            {showImports && (
+              <div>
+                <div className="mb-1 text-sm font-semibold text-warning">Imports</div>
+                <div className="flex flex-wrap gap-x-3 gap-y-2">
+                  {res.displayImports.length ? (
+                    res.displayImports.map((f) => (
+                      <span key={f.name} className="group flex flex-col items-start gap-1.5">
+                        <span className="inline-flex items-center gap-1.5">
+                          <ItemChip
+                            name={f.name}
+                            kind={f.kind}
+                            display={res.display?.[f.name]}
+                            rate={f.rate}
+                            link="import"
+                            craftable={producible.has(f.name)}
+                            fuel={fuelSet.has(f.name)}
+                            onClick={() => onMakeFor(f.name)}
+                            onContext={(e) =>
+                              onCtxMenu(e, { name: f.name, kind: f.kind, link: "import" })
+                            }
+                          />
+                          {/* Locked-as-block-driver state (set via right-click → "Size block by this
                             input"): edit its rate inline + an unlock control. The toggle itself
                             lives in the context menu, so non-locked rows stay uncluttered. */}
-                        {/* the block imports this while an in-block recipe
+                          {/* the block imports this while an in-block recipe
                             produces it — usually the import-instead-of-make
                             trap (block 27); one click claims it in-block */}
-                        {res.importedProducible?.includes(f.name) && (
-                          <button
-                            title="an enabled recipe in this block produces this good, but the plan imports it. Click to mark it made in-block (production must cover consumption)."
-                            onClick={() => {
-                              doc.markMade(f.name);
-                              doc.note(`Mark "${res.display?.[f.name] ?? f.name}" made in-block`);
-                            }}
-                            className="bg-warning/25 px-1.5 py-0.5 text-sm text-warning hover:brightness-110"
-                          >
-                            made here? · make in-block
-                          </button>
-                        )}
-                        {lockedInput === f.name && (
-                          <>
-                            <Tooltip content="locked rate — the block is sized to consume this much of this input">
-                              <Input
-                                type="number"
-                                value={lockedRate}
-                                step="0.01"
-                                min="0"
-                                autoFocus
-                                onChange={(e) => onLockedRateChange(Number(e.target.value) || 0)}
-                                className="h-7 w-16 border-info/60 px-1"
-                              />
-                            </Tooltip>
-                            <Button
-                              variant="ghost"
-                              size="icon-xs"
-                              onClick={onUnlock}
-                              title="unlock — the Goal rate is editable again"
-                              className="text-info"
+                          {res.importedProducible?.includes(f.name) && (
+                            <button
+                              title="an enabled recipe in this block produces this good, but the plan imports it. Click to mark it made in-block (production must cover consumption)."
+                              onClick={() => {
+                                doc.markMade(f.name);
+                                doc.note(`Mark "${res.display?.[f.name] ?? f.name}" made in-block`);
+                              }}
+                              className="bg-warning/25 px-1.5 py-0.5 text-sm text-warning hover:brightness-110"
                             >
-                              <Lock className="size-3.5" />
-                            </Button>
-                          </>
+                              made here? · make in-block
+                            </button>
+                          )}
+                          {lockedInput === f.name && (
+                            <>
+                              <Tooltip content="locked rate — the block is sized to consume this much of this input">
+                                <Input
+                                  type="number"
+                                  value={lockedRate}
+                                  step="0.01"
+                                  min="0"
+                                  autoFocus
+                                  onChange={(e) => onLockedRateChange(Number(e.target.value) || 0)}
+                                  className="h-7 w-16 border-info/60 px-1"
+                                />
+                              </Tooltip>
+                              <Button
+                                variant="ghost"
+                                size="icon-xs"
+                                onClick={onUnlock}
+                                title="unlock — the Goal rate is editable again"
+                                className="text-info"
+                              >
+                                <Lock className="size-3.5" />
+                              </Button>
+                            </>
+                          )}
+                        </span>
+                        {logi.resolved && f.kind === "item" && (
+                          <LogiTag
+                            resolved={logi.resolved}
+                            rate={f.rate}
+                            machineCount={0}
+                            showBelts={logi.showBelts}
+                            showInserters={logi.showInserters}
+                            launch={logi.launchInfo(f.name, f.rate)}
+                          />
                         )}
                       </span>
-                      {logi.resolved && f.kind === "item" && (
-                        <LogiTag
-                          resolved={logi.resolved}
-                          rate={f.rate}
-                          machineCount={0}
-                          showBelts={logi.showBelts}
-                          showInserters={logi.showInserters}
-                          launch={logi.launchInfo(f.name, f.rate)}
-                        />
-                      )}
-                    </span>
-                  ))
-                ) : (
-                  <span className="text-sm text-muted-foreground">none</span>
-                )}
+                    ))
+                  ) : (
+                    <span className="text-sm text-muted-foreground">none</span>
+                  )}
+                </div>
               </div>
-            </div>
-            {!!res?.displayExports.length && (
+            )}
+            {showExports && (
               <div>
                 <div className="mb-1 text-sm font-semibold text-surplus">Exports</div>
                 <div className="flex flex-wrap gap-x-3 gap-y-2">

app/src/routes/block.$id.tsx

@@ -674,6 +674,7 @@ function Block({ blockId }: { blockId: number }) {
   // goal, an unmade input (import), a surplus (export), or balanced in-block.
   const importSet = new Set(res?.imports.map((f) => f.name));
   const exportSet = new Set(res?.displayExports.map((f) => f.name));
+  const goalSet = new Set(goalNames);
   // good → kind (item|fluid), gathered from every flow/recipe in the solve so goal
   // icons render correctly even for fluid goals (the target isn't in imports/exports).
   const kindMap = new Map<string, string>();
@@ -719,7 +720,7 @@ function Block({ blockId }: { blockId: number }) {
   const producible = new Set(res?.producible ?? []); // imports a recipe could make in-block
   const fuelSet = new Set(res?.fuelItems ?? []); // items consumed as fuel (folded into the balance)
   const linkOf = (name: string): ItemLink =>
-    name === target
+    goalSet.has(name)
       ? "target"
       : importSet.has(name)
         ? "import"

app/src/server/block-compute.server.ts

@@ -1052,6 +1052,13 @@ export async function computeBlock(rawData: SolveInput) {
     const rate = flow.rate - (incidentalGoalRates.get(flow.name) ?? 0);
     return rate > EPS ? [{ ...flow, rate }] : [];
   });
+  // A negative goal is itself the block's visible consume/import contract. Keep
+  // the canonical import in `imports` for factory projections and flow math,
+  // but do not repeat the same good in the editor's Imports list.
+  const negativeGoalNames = new Set(
+    data.goals.filter((goal) => goal.rate < 0).map((goal) => goal.name),
+  );
+  const displayImports = imports.filter((flow) => !negativeGoalNames.has(flow.name));
   const fuelItems = [...fuelTotals.keys()]; // for the 🔥 tag in the UI
   const burntItems = [...burntTotals.keys()]; // ash / depleted cells from burning
 
@@ -1194,6 +1201,7 @@ export async function computeBlock(rawData: SolveInput) {
   return {
     ...result,
     imports,
+    displayImports,
     exports,
     displayExports,
     rows,

app/src/server/block-compute.test.ts

@@ -941,6 +941,7 @@ describe("fluid-fuel supplier designation (#115)", () => {
     const res = await computeBlock(input);
     expect(res.status).toBe("solved");
     expect(res.imports.find((f) => f.name === "kerosene")?.rate).toBeCloseTo(5);
+    expect(res.displayImports.find((f) => f.name === "kerosene")).toBeUndefined();
     const flows = boundaryFlows(goalFlows(input), res);
     const kero = flows.filter((f) => f.item === "kerosene");
     expect(kero).toEqual([{ item: "kerosene", kind: "fluid", role: "import", rate: 5 }]); // exactly one

docs/development/solver.md

@@ -56,6 +56,10 @@ A negative goal represents a sink and becomes a net-consumption ceiling. Interna
 rates are per second. The editor's seconds/minutes/hours unit changes input and display
 only.
 
+The solved good remains a canonical import for factory projections and flow graphs. In the
+block editor it is already represented by the negative goal, so `displayImports` removes it
+from the Block balance Imports list rather than rendering the same contract twice.
+
 A stock goal stores an amount and replenishment window. The compute layer converts it to
 `amount / window` for solving, then tags its persisted factory flow as stock replenishment
 rather than continuous output.

docs/guide/blocks.md

@@ -30,6 +30,9 @@ Right-click a goal and select **Keep in stock instead (buffer, not throughput)**
 intent is to refill a quantity over time rather than sustain a continuous rate. Stock-only
 production appears separately in Factory.
 
+A negative goal is already the block's visible import contract, so Block balance does not
+repeat that good under **Imports**. Other ingredients the block needs still appear there.
+
 ## Add recipes
 
 Select a positive goal icon to open **Recipes that make _goal_**. A negative consume goal