feat(planner)!: module auto-fill becomes suggest + explicit apply

Ambient auto-fill re-picked modules on every solve, so a plan could
rearrange itself behind the player's back: research unlocking a better
tier silently re-tooled rows, and counts drifting across a whole-building
boundary flapped fills while editing goals. Modules map to machines you
physically filled — the plan shouldn't change them uninvited.

Now the solve only ever uses the doc's stored picks. Each solve computes
a per-row SUGGESTED fill (same direct algorithm: prod where allowed,
else fewest speed modules to the smallest whole building count, rest
efficiency, sized against the module-less baseline with beacon/TURD
speed included) and returns it without applying:

- rows whose stored fill differs show a sparkle hint — click applies it
  as ordinary stored picks (gate the ambient hint in Settings)
- the modules dialog previews the suggestion with its own apply button
- the block toolbar applies every suggestion at once, confirming when
  that would overwrite rows that already have modules
- new rows start empty; the "A auto-managed" state is gone
- the assistant's drafts adopt the suggestions as explicit picks

BREAKING CHANGE: modules are no longer applied automatically. Rows that
relied on ambient auto-fill show empty fills (with the hint) until
applied — the block toolbar's sparkle button restores them in one click.
The `autofill` setting now only controls hint visibility.

Author: ApocDev

app/e2e/mut/module-autofill.e2e.ts

@@ -0,0 +1,51 @@
+import { expect, test } from "@playwright/test";
+import { addGoal, createBlock } from "./helpers";
+
+/**
+ * Module auto-fill as suggestion + explicit apply: the solve computes a
+ * suggested fill per row (prod where allowed, else speed→floor→efficiency) but
+ * NEVER applies it. A fresh row starts empty, shows the ✨ hint and the
+ * toolbar's whole-block apply; clicking the hint bakes the suggestion into the
+ * doc as ordinary stored picks, after which both affordances disappear.
+ *
+ * Uses "Coal gas from coal" (distilator, 1 slot, allow_productivity) — the
+ * suggestion is a productivity fill as long as any prod module is unlocked in
+ * the seeded project's research horizon.
+ */
+test("module auto-fill: fresh row suggests, hint click applies, affordances clear", async ({
+  page,
+}) => {
+  await createBlock(page);
+  await addGoal(page, "coal gas", "Coal gas");
+  await page.locator('button[title^="click to add a recipe that makes this goal"]').click();
+  const picker = page.getByRole("dialog", { name: "Recipes that make Coal gas" });
+  await picker.getByRole("button", { name: "Coal gas from coal" }).click();
+  await expect(picker).toBeHidden();
+
+  // fresh row: EMPTY chip (nothing auto-applied) + the suggestion affordances
+  const emptyChip = page.locator('button[title*="click to configure"]');
+  const hint = page.locator('button[title^="better modules available"]');
+  const blockFill = page.locator('button[title^="Auto-fill modules"]');
+  await expect(emptyChip).toHaveCount(1);
+  await expect(hint).toHaveCount(1);
+  await expect(blockFill).toBeVisible();
+  await expect(blockFill).toContainText("1"); // one row with a differing suggestion
+
+  // the modules dialog previews the same suggestion with its own apply button
+  await emptyChip.click();
+  const modal = page.getByRole("dialog", { name: /^Modules — / });
+  await expect(modal).toBeVisible();
+  await expect(modal.getByText("suggested")).toBeVisible();
+  await expect(modal.getByRole("button", { name: "apply" })).toBeVisible();
+  await page.keyboard.press("Escape");
+  await expect(modal).toBeHidden();
+
+  // clicking the hint applies the fill as stored picks…
+  await hint.click();
+  const loadoutChip = page.locator("button.bg-muted\\/50.text-success");
+  await expect(loadoutChip).toHaveCount(1);
+  // …and the row now matches its suggestion, so hint + toolbar apply vanish
+  await expect(hint).toHaveCount(0);
+  await expect(blockFill).toHaveCount(0);
+  await expect(emptyChip).toHaveCount(0);
+});

app/e2e/mut/module-presets.e2e.ts

@@ -16,17 +16,6 @@ test("module template: save → set default → auto-applies to a new compatible
 }) => {
   const presetName = uniqueName("Prod everywhere");
 
-  // Module auto-fill (on by default) would give the fresh row a loadout of its
-  // own — switch it off so this spec exercises the empty → hand-configured →
-  // preset path. The scratch data dir is reseeded per run, so no restore needed.
-  await page.goto("/settings");
-  const autofill = page.getByRole("checkbox", { name: "auto-fill modules" });
-  await expect(autofill).toBeVisible();
-  if (await autofill.isChecked()) {
-    await autofill.click();
-    await expect(autofill).not.toBeChecked();
-  }
-
   // ── block 1: configure a loadout by hand and save it as a default template ──
   await createBlock(page);
   await addGoal(page, "coal gas", "Coal gas");
@@ -35,7 +24,7 @@ test("module template: save → set default → auto-applies to a new compatible
   await picker.getByRole("button", { name: "Coal gas from coal" }).click();
   await expect(picker).toBeHidden();
 
-  // the fresh row has no loadout (auto-fill is off) — open the modules dialog
+  // the fresh row has no loadout (auto-fill only SUGGESTS) — open the modules dialog
   const emptyChip = page.locator(
     'button[title*="click to configure"], button[title*="click to override"]',
   );

app/src/components/block/block-toolbar.tsx

@@ -8,6 +8,7 @@ import {
   Hammer,
   History,
   Power,
+  Sparkles,
   Star,
 } from "lucide-react";
 import { Badge } from "#/components/ui/badge.tsx";
@@ -43,6 +44,7 @@ export function BlockToolbar({
   blockEnabled,
   onToggleEnabled,
   onCopySetup,
+  autoFill,
   onExport,
   onOpenHistory,
   showInGame,
@@ -60,6 +62,8 @@ export function BlockToolbar({
   blockEnabled: boolean;
   onToggleEnabled: () => void;
   onCopySetup: () => void;
+  /** whole-block module auto-fill: rows with a differing suggested fill + apply */
+  autoFill: { count: number; onApply: () => void };
   /** download this block as a shareable JSON file (#82) */
   onExport: () => void;
   /** open the snapshot-history drawer (#85) */
@@ -126,6 +130,17 @@ export function BlockToolbar({
       >
         <Copy className="size-4" />
       </Button>
+      {autoFill.count > 0 && (
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={autoFill.onApply}
+          title={`Auto-fill modules — apply the suggested fill (prod where allowed, else speed to the whole-machine floor, rest efficiency) to ${autoFill.count} row${autoFill.count === 1 ? "" : "s"}`}
+          className="text-info"
+        >
+          <Sparkles className="size-4" /> {autoFill.count}
+        </Button>
+      )}
       <Button
         variant="outline"
         size="icon-sm"

app/src/components/block/doc-store.ts

@@ -334,8 +334,10 @@ export function createBlockDocStore() {
         modules: { ...s.modules, [recipe]: modules },
         beacons: { ...s.beacons, [recipe]: beacons },
       })),
-    // "reset to auto" deletes the key — an explicit [] would mean "no modules"
-    resetModules: (recipe: string) => edit((s) => ({ modules: withoutKey(s.modules, recipe) })),
+    /** Apply auto-fill suggestions (hint click / whole-block button) as ordinary
+     * stored picks — modules only; beacon configs stay as they are. */
+    applyModuleFills: (fills: Record<string, string[]>) =>
+      edit((s) => ({ modules: { ...s.modules, ...fills } })),
 
     /* ── made marks & pins (#91) ── */
     /** Adopt the server-derived made set for a legacy doc — NOT a user edit

app/src/components/block/recipe-grid.tsx

@@ -226,6 +226,7 @@ export function RecipeGrid({
                 producible={producible}
                 logi={logi}
                 open={open}
+                moduleHints={!!res?.moduleHints}
                 highlight={focusRecipe === name}
                 tempWarnings={rowTempWarnings(
                   res?.tempWarnings,

app/src/components/block/recipe-row.tsx

@@ -7,6 +7,7 @@ import {
   Flame,
   GripVertical,
   Power,
+  Sparkles,
   Timer,
   X,
   Zap,
@@ -40,6 +41,8 @@ export type RowOverlayOpeners = {
   machinePicker: (recipe: string) => void;
   fuelPicker: (recipe: string) => void;
   modulesPicker: (recipe: string) => void;
+  /** apply the row's suggested module fill (the ✨ hint) as its stored picks */
+  applyModuleFill: (recipe: string) => void;
 };
 
 /** One live recipe row of the grid: name + solved rate, machine/fuel/module
@@ -62,6 +65,7 @@ export function RecipeRow({
   open,
   tempWarnings,
   highlight,
+  moduleHints,
 }: {
   doc: BlockDocStore;
   name: string;
@@ -85,6 +89,8 @@ export function RecipeRow({
   tempWarnings: { ingredient: Map<string, ChipTempWarning>; product: Map<string, ChipTempWarning> };
   /** briefly ring + scroll this row into view — set when a flow node targets it (#101) */
   highlight?: boolean;
+  /** show the ambient ✨ suggestion hint (Settings toggle; apply paths always work) */
+  moduleHints?: boolean;
 }) {
   const rowPin = useStore(doc.store, (s) =>
     s.pins.find((p) => p.kind !== "share" && p.recipe === name),
@@ -285,9 +291,18 @@ export function RecipeRow({
                   beacons={row.beacons}
                   slots={row.machine.moduleSlots ?? 0}
                   effects={row.effects}
-                  auto={row.autoModules}
                   onClick={() => open.modulesPicker(name)}
                 />
+                {/* auto-fill hint: a better fill exists — click applies it */}
+                {moduleHints && row.suggestedModules && (
+                  <button
+                    onClick={() => open.applyModuleFill(name)}
+                    title="better modules available — click to apply the suggested fill (open the modules dialog to preview it)"
+                    className="flex items-center px-1 py-1 text-info hover:bg-accent"
+                  >
+                    <Sparkles className="size-3.5" />
+                  </button>
+                )}
                 {/* TURD: hidden modules the selected upgrades insert (no slot cost) */}
                 {row.turdModules.length > 0 && (
                   <Link

app/src/lib/modules-modal.tsx

@@ -1,6 +1,6 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useMemo, useState } from "react";
-import { Ban, Minus, Plus, RotateCcw, SquarePlus, Star, X } from "lucide-react";
+import { Ban, Minus, Plus, Sparkles, SquarePlus, Star, X } from "lucide-react";
 import {
   deleteModulePresetFn,
   moduleInfoFn,
@@ -68,14 +68,12 @@ export function ModulesChip({
   beacons,
   slots,
   effects,
-  auto,
   onClick,
 }: {
   modules: string[];
   beacons: BeaconConfig[];
   slots: number;
   effects?: RowEffects;
-  auto?: boolean;
   onClick: () => void;
 }) {
   if (slots <= 0 && !beacons.length && !modules.length) return null;
@@ -88,13 +86,7 @@ export function ModulesChip({
       onClick={onClick}
       // Empty state keeps a plain caption; a configured loadout shows the rich
       // ModuleLoadoutCard hover (below) instead of a flat "+X% speed" title.
-      title={
-        empty
-          ? auto
-            ? "auto-managed — no module helps here · click to override"
-            : "no modules — click to configure"
-          : undefined
-      }
+      title={empty ? "no modules — click to configure" : undefined}
       // Raw button on purpose: a compact icon-tile chip living inside a dense
       // grid cell — the Button primitive's h-8 box would break the row density.
       className={`flex items-center gap-1 px-1.5 py-1 text-sm hover:bg-accent ${
@@ -104,7 +96,6 @@ export function ModulesChip({
       }`}
     >
       {empty && <SquarePlus className="size-4" />}
-      {auto && <span className="text-sm text-info">A</span>}
       {grouped.map(([n, c]) => (
         <span key={n} className="flex items-center">
           <Icon kind="item" name={n} size="sm" noHover />
@@ -124,7 +115,7 @@ export function ModulesChip({
   if (empty) return button;
   return (
     <CursorHover
-      card={<ModuleLoadoutCard modules={modules} beacons={beacons} effects={effects} auto={auto} />}
+      card={<ModuleLoadoutCard modules={modules} beacons={beacons} effects={effects} />}
       z={70}
     >
       {button}
@@ -152,12 +143,10 @@ function ModuleLoadoutCard({
   modules,
   beacons,
   effects,
-  auto,
 }: {
   modules: string[];
   beacons: BeaconConfig[];
   effects?: RowEffects;
-  auto?: boolean;
 }) {
   const names = useMemo(
     () => [...new Set([...modules, ...beacons.flatMap((b) => b.modules)])],
@@ -178,10 +167,7 @@ function ModuleLoadoutCard({
   if (effects?.consumption) total.push(`${pct(effects.consumption)} energy`);
   return (
     <div className="w-72 border border-border bg-popover p-3 text-sm text-popover-foreground shadow-xl">
-      <div className="flex items-center gap-2 font-semibold">
-        Module loadout
-        {auto && <span className="bg-info/15 px-1 text-xs font-normal text-info">auto</span>}
-      </div>
+      <div className="flex items-center gap-2 font-semibold">Module loadout</div>
       {total.length > 0 && (
         <div className="mt-0.5 flex flex-wrap gap-x-3 text-muted-foreground">
           {total.map((t) => (
@@ -427,9 +413,8 @@ export function ModulesModal({
   modules,
   beacons,
   effects,
-  auto,
+  suggested,
   onChange,
-  onReset,
   onClose,
 }: {
   recipe: string;
@@ -438,9 +423,9 @@ export function ModulesModal({
   modules: string[];
   beacons: BeaconConfig[];
   effects?: RowEffects;
-  auto?: boolean;
+  /** the auto-fill algorithm's pick, when it differs from the current fill */
+  suggested?: string[];
   onChange: (modules: string[], beacons: BeaconConfig[]) => void;
-  onReset?: () => void;
   onClose: () => void;
 }) {
   const qc = useQueryClient();
@@ -541,27 +526,33 @@ export function ModulesModal({
                 )}
               </div>
 
-              {/* auto-fill state */}
-              {(auto || onReset) && (
-                <div className="flex items-center gap-2 text-sm">
-                  {auto ? (
-                    <span className="text-info" title="chosen by the module auto-fill">
-                      A auto-managed{modules.length === 0 ? " — no module helps here" : ""} — any
-                      edit takes manual control
+              {/* auto-fill suggestion: what the algorithm would pick (prod where
+                  allowed, else speed to the whole-count floor, rest efficiency) */}
+              {suggested && (
+                <div className="flex flex-wrap items-center gap-2 text-sm">
+                  <span
+                    className="flex items-center gap-1 text-info"
+                    title="the auto-fill pick for this row's current building count and beacons"
+                  >
+                    <Sparkles className="size-3.5" /> suggested
+                  </span>
+                  {[
+                    ...suggested
+                      .reduce((m, n) => m.set(n, (m.get(n) ?? 0) + 1), new Map<string, number>())
+                      .entries(),
+                  ].map(([n, c]) => (
+                    <span key={n} className="flex items-center">
+                      <Icon kind="item" name={n} size="sm" />
+                      {c > 1 && <span className="text-sm">×{c}</span>}
                     </span>
-                  ) : (
-                    onReset && (
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={onReset}
-                        className="border-dashed text-muted-foreground"
-                        title="drop the manual config and let auto-fill choose again"
-                      >
-                        <RotateCcw className="size-3.5" /> reset to auto
-                      </Button>
-                    )
-                  )}
+                  ))}
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => onChange(suggested.slice(0, slots), beacons)}
+                  >
+                    apply
+                  </Button>
                 </div>
               )}