diff --git a/README.md b/README.md
index c4ea78f18..3c6c4cc97 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@ ASAPPlanner turns SQL, PromQL, and MetricsQL query workloads into legal candidat
 
 - New to the repository? Read the [planner pipeline](docs/design_docs/concepts/planner-pipeline.md), then the [glossary](docs/design_docs/concepts/glossary.md).
 - Want to run a query? Follow [Run and inspect a query](docs/user_guide_docs/run-a-query.md).
-- Want to see how a workload is planned, stage by stage? Use the [Stage Viewer](docs/user_guide_docs/stage-viewer.md).
+- Want to see how a workload is planned, stage by stage? Use the [Plan Viewer](docs/user_guide_docs/plan-viewer.md).
 - Embedding Planner? Use the [library API guide](docs/develop_docs/library-api.md).
 - Extending Planner? Read the [planning stages design](docs/design_docs/proposals/planner-layering.md), then the [ASAP-aware mapping architecture](docs/develop_docs/asap-aware-mapping-architecture.md), which maps each stage to its code, then [extend ASAP-aware mapping](docs/develop_docs/extend-asap-aware-mapping.md).
 - Evaluating a design? Browse the [design documentation](docs/design_docs/README.md), [developer documentation](docs/develop_docs/README.md), and [user guides](docs/user_guide_docs/README.md).
diff --git a/crates/devtools/src/bin/asap_planner.rs b/crates/devtools/src/bin/asap_planner.rs
index c527319a6..37068f8f4 100644
--- a/crates/devtools/src/bin/asap_planner.rs
+++ b/crates/devtools/src/bin/asap_planner.rs
@@ -8,7 +8,7 @@
 // `--run-until` (`stage0`, `stage1_pass1`, `stage1_pass2`, `stage2` or
 // `stage3`) and writes each stage's output, as text (`--format text`, the default;
 // `asap_devtools::planning_stages_text`) or as an `asap-stage-pipeline/v2`
-// document for the Stage Viewer (`--format json`), to `--out` or standard
+// document for the Plan Viewer (`--format json`), to `--out` or standard
 // output. The text is terse by default (a legend per stage, folded θ
 // variants, producer ids per input, pruned counts per cause); `--verbose`
 // prints every candidate, edge with its reason, group's properties and
diff --git a/docs/README.md b/docs/README.md
index 4ef582c9b..49c2dcfd4 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -11,7 +11,7 @@ Choose the path that matches what you need to do.
 
 ## Run or inspect a query
 
-Follow [Run and inspect a query](user_guide_docs/run-a-query.md). To see how the planner plans a workload stage by stage, and why it selects its plan, use [the Stage Viewer](user_guide_docs/stage-viewer.md).
+Follow [Run and inspect a query](user_guide_docs/run-a-query.md). To see how the planner plans a workload stage by stage, and why it selects its plan, use [the Plan Viewer](user_guide_docs/plan-viewer.md).
 
 ## Embed the library
 
diff --git a/docs/design_docs/architecture/README.md b/docs/design_docs/architecture/README.md
index a521d7e3f..a7b556916 100644
--- a/docs/design_docs/architecture/README.md
+++ b/docs/design_docs/architecture/README.md
@@ -51,7 +51,7 @@ target.
 | Plan selection | `stage3-plan-selection` | Stage 3: accuracy and latency checks, costing and selection; the planning models and the Stage 1 to Stage 3 driver |
 | Planner facade | `planner` | `e2e_plan`: Stage 0 followed by Stages 1–3 |
 | Executor | `executor` | Stage 4: runs a `PhysicalASAPDAG` over `asap_sketchlib` summaries; no stage crate depends on it |
-| Developer inspection | `devtools` | `asap_planner` and the Stage Viewer documents, corpus coverage tools |
+| Developer inspection | `devtools` | `asap_planner` and the Plan Viewer documents, corpus coverage tools |
 | End-to-end validation | `integration-tests` | Verify behavior across frontends, stages and execution |
 
 ## Inputs and outputs
diff --git a/docs/design_docs/architecture/input-output-workflow.md b/docs/design_docs/architecture/input-output-workflow.md
index a148a9425..da5a8e08e 100644
--- a/docs/design_docs/architecture/input-output-workflow.md
+++ b/docs/design_docs/architecture/input-output-workflow.md
@@ -304,7 +304,7 @@ PlanningWorkload + frontend dependencies + PlanningModels
 |---|---|---|
 | Plan a workload end to end | `asap_planner::e2e_plan` | `PlanOutput` |
 | Plan already-lowered roots and inspect every stage | `asap_planner::run_planning` | `PlanningRun`, whose `selection` is the `Selection` |
-| Inspect a workload's stages as a document | `asap_planner` (devtools) | The stage document the [Stage Viewer](../../user_guide_docs/stage-viewer.md) shows |
+| Inspect a workload's stages as a document | `asap_planner` (devtools) | The stage document the [Plan Viewer](../../user_guide_docs/plan-viewer.md) shows |
 
 The integration associates each lowered root, by its position, with its
 workload entry (accuracy target, latency bound, recurrence). See the
diff --git a/docs/design_docs/proposals/planner-layering-example2-acceptance.md b/docs/design_docs/proposals/planner-layering-example2-acceptance.md
index 5c1d0dec8..454736fce 100644
--- a/docs/design_docs/proposals/planner-layering-example2-acceptance.md
+++ b/docs/design_docs/proposals/planner-layering-example2-acceptance.md
@@ -159,5 +159,5 @@ strictest size.
 is the `flows` table of `tools/dag-viewer/workloads/planner-layering/tables.json`,
 plans the SQL workload with the `flows(ts, src_ip)` catalog (with
 `--ignore-accuracy-guarantees`, none of the plans below is rejected for its
-guarantee). The stage viewer has no tab for it; open the
+guarantee). The plan viewer has no tab for it; open the
 document with **Open stage document…**.
diff --git a/docs/develop_docs/extend-asap-aware-mapping.md b/docs/develop_docs/extend-asap-aware-mapping.md
index 43248f3e4..306493991 100644
--- a/docs/develop_docs/extend-asap-aware-mapping.md
+++ b/docs/develop_docs/extend-asap-aware-mapping.md
@@ -105,7 +105,7 @@ tests in `planner_layering_example4.rs`.
   a stage function takes only the field it reads (Stage 2 takes
   `query_time_results_retained: bool`, not the whole struct).
 - Expose it in `asap_planner` and in the
-  [Stage Viewer guide](../user_guide_docs/stage-viewer.md).
+  [Plan Viewer guide](../user_guide_docs/plan-viewer.md).
 
 Tests: a Stage 3 unit test that the check rejects exactly the candidates it
 should, and a `crates/devtools/tests/asap_planner.rs` test for the flag.
diff --git a/docs/develop_docs/library-api.md b/docs/develop_docs/library-api.md
index ef3f59c66..259342ea6 100644
--- a/docs/develop_docs/library-api.md
+++ b/docs/develop_docs/library-api.md
@@ -295,7 +295,7 @@ let models = PlanningModels::builtin().with_cost_inputs(&settings);
 
 The `asap_planner` devtool runs the same stages and writes every stage's
 output as text or, with `--format json`, as one JSON document; see the
-[Stage Viewer guide](../user_guide_docs/stage-viewer.md).
+[Plan Viewer guide](../user_guide_docs/plan-viewer.md).
 
 ## Workload inputs and defaults
 
diff --git a/docs/develop_docs/replacement-explanations.md b/docs/develop_docs/replacement-explanations.md
index 93e69f094..0d29527bd 100644
--- a/docs/develop_docs/replacement-explanations.md
+++ b/docs/develop_docs/replacement-explanations.md
@@ -5,7 +5,7 @@
 > and why each candidate was pruned or rejected, is now in the stages'
 > output: Pass 1's pruned candidates with their `PruneReason`, Stage 2's
 > pruned candidates, and Stage 3's `Rejection` reasons, all written by
-> `asap_planner` (see the [Stage Viewer guide](../user_guide_docs/stage-viewer.md)).
+> `asap_planner` (see the [Plan Viewer guide](../user_guide_docs/plan-viewer.md)).
 
 ASAP-aware mapping should make its discovered opportunities visible to users and other components.
 
diff --git a/docs/user_guide_docs/README.md b/docs/user_guide_docs/README.md
index 4cee670dd..841b9f765 100644
--- a/docs/user_guide_docs/README.md
+++ b/docs/user_guide_docs/README.md
@@ -5,4 +5,4 @@ result.
 
 - [Run and inspect a query](run-a-query.md)
 - [Plan a workload with asap_planner](asap-planner.md)
-- [See how ASAPPlanner plans a workload: the Stage Viewer](stage-viewer.md)
+- [See how ASAPPlanner plans a workload: the Plan Viewer](plan-viewer.md)
diff --git a/docs/user_guide_docs/asap-planner.md b/docs/user_guide_docs/asap-planner.md
index 1eb1e2234..36990ced3 100644
--- a/docs/user_guide_docs/asap-planner.md
+++ b/docs/user_guide_docs/asap-planner.md
@@ -2,7 +2,7 @@
 
 `asap_planner` runs the planner's stages on a workload, up to the stage you
 choose, and prints what each stage produced: as text, or as a JSON document
-for the [Stage Viewer](stage-viewer.md). It reports candidates, selection,
+for the [Plan Viewer](plan-viewer.md). It reports candidates, selection,
 modeled costs and accuracy checks; it does not deploy or execute the plan.
 
 ## Build and run
@@ -100,7 +100,7 @@ SQL examples. To try a single query, write a one-query workload file.
 ## Inspect the result
 
 With `--format json`, open the document in the
-[Stage Viewer](stage-viewer.md), or read Stage 3 directly:
+[Plan Viewer](plan-viewer.md), or read Stage 3 directly:
 
 ```sh
 cargo run --release -p asap-devtools --bin asap_planner -- \
diff --git a/docs/user_guide_docs/stage-viewer.md b/docs/user_guide_docs/plan-viewer.md
similarity index 97%
rename from docs/user_guide_docs/stage-viewer.md
rename to docs/user_guide_docs/plan-viewer.md
index 2d915fba7..5a1c47535 100644
--- a/docs/user_guide_docs/stage-viewer.md
+++ b/docs/user_guide_docs/plan-viewer.md
@@ -1,6 +1,6 @@
-# See how ASAPPlanner plans a workload: the Stage Viewer
+# See how ASAPPlanner plans a workload: the Plan Viewer
 
-The Stage Viewer is a web page that shows what ASAPPlanner does with one
+The Plan Viewer is a web page that shows what ASAPPlanner does with one
 workload at each
 [planning stage](../design_docs/proposals/planner-layering.md#asapplanner-system-overview-planning-stages),
 and which plan it selects. It reads one JSON document per workload, written
diff --git a/docs/user_guide_docs/run-a-query.md b/docs/user_guide_docs/run-a-query.md
index c1c19059c..085330f91 100644
--- a/docs/user_guide_docs/run-a-query.md
+++ b/docs/user_guide_docs/run-a-query.md
@@ -14,7 +14,7 @@ tool on first use.
 
 | Command (`cargo run -p asap-devtools --bin … -- …`) | Input / options | Result |
 | --- | --- | --- |
-| `asap_planner --workload <file> --run-until <stage>` | `PlanningWorkload` JSON files | Runs the planner's stages up to `<stage>` and prints each stage's output as text, or with `--format json` as the document the [Stage Viewer](stage-viewer.md) shows |
+| `asap_planner --workload <file> --run-until <stage>` | `PlanningWorkload` JSON files | Runs the planner's stages up to `<stage>` and prints each stage's output as text, or with `--format json` as the document the [Plan Viewer](plan-viewer.md) shows |
 | `convert_rqe_atomic_costs <rqe_atomic_costs.json> <out.json>` | sketch-bench's per-operation cost table | Writes a measured table to set as `measured_operation_costs` in an `asap_planner --cost-inputs` file; skipped rows are listed on stderr |
 | `analyze_corpora --corpora --sample-interval-ms 1000 --out-dir <dir>` | Repository PromQL corpora, output directory | Writes successful/error IR dumps and summary reports |
 | `analyze_corpora --sql-corpora --out-dir <dir>` | Repository SQL corpora, output directory | Writes SQL corpus reports |
@@ -49,7 +49,7 @@ the selected physical candidates, the plan's `cost_per_second` with each
 node's charge, each query's accepted accuracy, and the search status
 (`Optimal` when the plan is proven the cheapest). For this example the
 selected plan is exact for both queries. Add `--format json --out plan.json`
-and open the document in the [Stage Viewer](stage-viewer.md) to see every
+and open the document in the [Plan Viewer](plan-viewer.md) to see every
 stage.
 
 ## Inspect a query's logical DAG
diff --git a/tools/dag-viewer/README.md b/tools/dag-viewer/README.md
index d4a7f207b..a13f906e7 100644
--- a/tools/dag-viewer/README.md
+++ b/tools/dag-viewer/README.md
@@ -1,4 +1,4 @@
-# ASAPPlanner Stage Viewer
+# ASAPPlanner Plan Viewer
 
 A browser view of what the planner does with one workload, read from an
 `asap-stage-pipeline/v2` document written by the `asap_planner` devtool
@@ -31,24 +31,27 @@ To run it, see [RUNNING.md](RUNNING.md).
   (deployment capabilities, cost model, accuracy guarantees). Without the
   server, the rows say they need it. `#workload-sets` in the URL opens the
   section.
-- **Query workload** with each query's accuracy, latency, recurrence,
-  predictability and range evaluation, and a line that counts the
-  candidates at each stage: the Pass 2 memo's logical candidates and how
+- **Planner inputs** (blue bar), what the planner was given:
+  - **Query workload** with each query's accuracy (`error metric not set` when
+    the workload names no error metric), latency, recurrence,
+    predictability and range evaluation;
+  - **Data workload**: the arrival and one row per declared source with
+    exactly the facts it declares (series count, metric type, non-negative
+    values, sample interval, stream norms, distinct bound, distinct values
+    per label, distinct values per label set) and the queries whose text
+    names it;
+  - **Deployment and planner settings**: the deployment capabilities (raw
+    data and query-time results retained or not, the summaries it
+    supports), whether accuracy guarantees were enforced or ignored, and
+    the cost model Stage 3 priced the plan with (`cost.source`).
+- **Planner output** (green bar), everything below: a line that counts the
+  candidates at each stage (the Pass 2 memo's logical candidates and how
   many Pass 2 pruned, the physical candidates and how many Stage 2 and
-  Stage 3 pruned, and whether a plan was selected.
-- **Data workload** beside it: the arrival and one row per declared source
-  with exactly the facts it declares (series count, metric type,
-  non-negative values, sample interval, stream norms, distinct bound,
-  distinct values per label, distinct values per label set) and the queries
-  whose text names it, plus the deployment capabilities the run planned
-  with.
-- **Stage 3 · plan selection**: one row, the selected plan with its cost
-  per second and the accuracy Stage 3 accepted per query, or why no plan
-  was selected. The header says why Stage 1 or Stage 2 failed when it did,
-  shows the selection's warnings, says whether accuracy guarantees were
-  enforced or ignored, and names the search with its MILP's size and times.
-- **Two lanes**, stacked top to bottom so each is as wide as the page:
-  Stage 0 and Stage 3's plan, with each plan node's timing (also its fill:
+  Stage 3 pruned) and a line with Stage 3's outcome (plan selected, or why
+  not), why Stage 1 or Stage 2 failed when it did, the selection's
+  warnings, and the search with its MILP's size and times.
+- **Two lanes**, each as wide as the page: **Input**, the queries as one
+  logical DAG (Stage 0's output, drawn with the inputs), and Stage 3's plan, with each plan node's timing (also its fill:
   green at ingestion time, orange at query time) and Stage 3 cost (`× n`
   when a node that is not materialized is computed once per consumer).
   Each lane is the whole workload's DAG, so a node shared by several queries
@@ -68,13 +71,27 @@ To run it, see [RUNNING.md](RUNNING.md).
   is not installable says why instead. Clicking a row selects its node in
   the plan lane.
 - **Memo**: the memo after each planner step, one tab per step (`Stage 0`,
-  `Stage 1, Pass 1`, `Stage 1, Pass 2`), opening on the last. Each memo
+  `Stage 1 · Pass 1`, `Stage 1 · Pass 2`), opening on the last. Each memo
   group is a box `G<id> · <label>` with its candidate count (and how many
   Pass 2 pruned) and the queries it is the root of; its candidates sit
   inside it, bordered by origin, marked `✚ new` when the step added them
-  and `✗ pruned` (dashed) when Pass 2 pruned them. A group with more than
-  12 candidates is drawn as one node per origin with its count; clicking a
-  count lists them. Each candidate box shows its parameters θ. On the last
+  and `✗ pruned` (dashed) when Pass 2 pruned them; those (and a group left
+  with none) are hidden until **show pruned candidates** is ticked; on the
+  last tab, **selected plan only** leaves just the candidates the plan uses
+  and their groups. A group with more than
+  12 candidates is split into counts by its first dimension that varies:
+  origin, sketch family, each θ field (e.g. `k`, `depth`, `width`), then
+  tumbling-window width. Clicking a count drills into it, splitting again
+  until at most 12 remain, which are then drawn one by one; the group's
+  label shows the path (`origin=Pass1 › depth=5`), clicking the group goes
+  back one level, and the group's details offer the other varying
+  dimensions to split by instead. An arrow goes from a candidate (or count) to
+  each group it reads, or once from the group when all its candidates read the
+  same groups; a line above the drawing says how to read it. Each candidate box shows its parameters θ and, on the Pass 2 tab with **show Stage 2 variants** ticked (the default), a grid of
+  its Stage 2 physical variants: rows by timing (ingest, query), columns by
+  lifetime (not kept, one run, across runs), filled green or orange when one
+  is there, crossed when Stage 2 pruned it, outlined dark when the plan uses
+  it; the candidate's details show the same grid with the `C<id>`s. On the last
   tab the selected plan's candidates are filled green with `✓ selected` (a
   group may have several, one per execution context). Clicking a group
   shows its operator, children, parents, queries, its candidates with θ,
@@ -89,6 +106,10 @@ To run it, see [RUNNING.md](RUNNING.md).
   physical edges per input (`✓ C<producer>`, or `✗ C<producer>: α^phys =
   0: …`; `selected` when the plan uses it), and the physical candidates of
   it Stage 2 and Stage 3 pruned.
+- **Theme**: light by default; **Dark theme** (top right) switches it and is remembered
+  in the browser.
+- **Zoom**: each graph has `+`, `−` and `⌂` (fit the whole graph) buttons
+  in its top right corner; a small graph is drawn at most at 1.3×.
 - **Details**: click a node for its operator, the queries reaching it,
   timing, lifetime, output schema, guarantee and Stage 3 cost; click
   an edge for its schema and data state.
diff --git a/tools/dag-viewer/app.js b/tools/dag-viewer/app.js
index d7024702b..e3503d5b2 100644
--- a/tools/dag-viewer/app.js
+++ b/tools/dag-viewer/app.js
@@ -1,4 +1,4 @@
-// ASAPPlanner Stage Viewer: an asap-stage-pipeline/v2 document as Stage 3's
+// ASAPPlanner Plan Viewer: an asap-stage-pipeline/v2 document as Stage 3's
 // outcome (the selected plan or its error) beside two DAG lanes stacked top
 // to bottom (Stage 0, then Stage 3's plan), details below. Each lane shows
 // the whole workload. Document checks, the plan row and node labels live in
@@ -61,6 +61,7 @@
     // A tap on the background clears a node's highlight back to the query's.
     cy.on('tap', (e) => { if (e.target === cy || typeof e.target.isNode !== 'function') dim(i, queryKeep(i)); });
     cys[i] = cy;
+    fitGraph(cy);
     dim(i, queryKeep(i));
   }
 
@@ -139,16 +140,6 @@
     return cost.cost_per_second === null ? 'no cost (cost model 3)' : `cost <b>${fmtCost(cost.cost_per_second)}</b> per second`;
   }
 
-  // Stage 3's outcome: one row for the selected plan or selection's error.
-  function renderPlanRow() {
-    const row = selectedPlanRow(doc);
-    $('rank').innerHTML = row ? `<li><div class="row">
-        <span class="pid">plan</span><span class="plabel">${row.status === 'selected' ? 'the selected plan' : 'no plan selected'}</span>
-        <span class="ptotal">${row.total === null ? '—' : fmtCost(row.total)}</span>
-        <span class="pstatus">${row.status === 'selected' ? '<span class="chip selected">✓ selected</span>' : `<span class="chip invalid">no plan</span><span>${esc(row.reason)}</span>`}` +
-        `${row.accepted ? `<span class="accepted">${esc(row.accepted)}</span>` : ''}</span></div></li>` : '<li class="status">Stage 3 did not run.</li>';
-  }
-
   // Draw Stage 3's plan in lane 1 with its node costs, or say why there is none.
   function renderPlan() {
     const stage3 = doc.stage3_plan_selection;
@@ -191,12 +182,14 @@
       return `<div class="query"><span class="qid">${esc(q.id)} · ${esc(q.language)}</span><code>${esc(q.text)}</code>${req ? `<span class="req">${esc(req)}</span>` : ''}</div>`;
     }).join('');
     $('counts').textContent = candidateCountsText(doc);
-    $('rank-meta').textContent = [planHeader(doc), accuracyGuaranteesText(doc), searchText(doc)].filter(Boolean).join(' · ');
+    // Stage 3's outcome, failures and warnings, and how it searched.
+    const stage3 = doc.stage3_plan_selection;
+    $('outcome').textContent = [stage3.plan ? 'plan selected' : `no plan selected${stage3.error ? `: ${stage3.error}` : ''}`,
+      planHeader(doc), searchText(doc)].filter(Boolean).join(' · ');
     renderDataWorkload();
 
     render(0, doc.stage0_query_language_frontends.dag, false, null);
     $('lane0-meta').innerHTML = `${doc.stage0_query_language_frontends.dag.nodes.length} nodes · roots for ${queryIds.map((q) => `<b>${esc(q)}</b>`).join(', ')}`;
-    renderPlanRow();
     renderPlan();
     renderMaterializedViews();
     if (window.MemoView) window.MemoView.show(doc, queryIds);
@@ -207,16 +200,15 @@
   // The run's data workload beside the queries: one row per source with the
   // facts it declares, and the queries whose text names it.
   function renderDataWorkload() {
+    $('deployment').innerHTML = settingsRows(doc).map(([k, v]) => `<dt>${esc(k)}</dt><dd>${esc(v)}</dd>`).join('');
     const dataWorkload = doc.workload.data_workload;
     if (!dataWorkload) {
       $('dataArrival').textContent = '';
-      $('deployment').textContent = doc.deployment_capabilities ? `Deployment: ${deploymentText(doc.deployment_capabilities)}` : '';
       $('dataSources').innerHTML = '<span class="status">The document declares no data workload.</span>';
       return;
     }
     const view = dataWorkloadView(dataWorkload, doc.workload.queries);
     $('dataArrival').textContent = `arrival: ${view.arrival}`;
-    $('deployment').textContent = doc.deployment_capabilities ? `Deployment: ${deploymentText(doc.deployment_capabilities)}` : '';
     $('dataSources').innerHTML = view.rows.length
       ? table(['source', 'series', 'type', 'non-negative', 'sample interval', 'stream norms', 'distinct bound', 'distinct values per label', 'distinct values per label set', 'read by'],
         view.rows.map((r) => `<tr><td>${esc(r.name)}</td><td>${esc(r.series)}</td><td>${esc(r.type)}</td><td>${esc(r.nonNegative)}</td><td>${esc(r.sampleInterval)}</td><td>${esc(r.streamNorms)}</td><td>${esc(r.maxDistinct)}</td><td class="wrap">${esc(r.distinctValuesPerLabel)}</td><td class="wrap">${esc(r.distinctValuesPerLabelSet)}</td><td class="wrap">${esc(r.readBy.join(', ') || '—')}</td></tr>`).join(''))
@@ -343,9 +335,26 @@
   $('queryPick').addEventListener('change', (e) => highlightQuery(e.target.value));
   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', restyle);
   new MutationObserver(restyle).observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+  // Light unless the viewer picked dark (remembered per browser).
+  const setTheme = (dark) => {
+    document.documentElement.dataset.theme = dark ? 'dark' : 'light';
+    $('themeToggle').setAttribute('aria-pressed', String(dark));
+    try { localStorage.setItem('dagViewerTheme', dark ? 'dark' : 'light'); } catch (e) { /* storage blocked */ }
+  };
+  try { if (localStorage.getItem('dagViewerTheme') === 'dark') setTheme(true); } catch (e) { /* storage blocked */ }
+  $('themeToggle').addEventListener('click', () => setTheme(document.documentElement.dataset.theme !== 'dark'));
   $('details').innerHTML = HINT;
 
-  window.StageViewer = { planWorkload };
+  // Zoom in, zoom out and fit buttons over each graph.
+  const graphOf = { cy0: () => cys[0], cy1: () => cys[1], cyMemo: () => window.MemoView && window.MemoView.graph() };
+  document.querySelectorAll('.zoom').forEach((bar) => bar.querySelectorAll('button').forEach((b) => b.addEventListener('click', () => {
+    const cy = graphOf[bar.dataset.for]();
+    if (!cy) return;
+    if (b.dataset.zoom === 'fit') { fitGraph(cy); return; }
+    cy.zoom({ level: cy.zoom() * (b.dataset.zoom === 'in' ? 1.3 : 1 / 1.3), renderedPosition: { x: cy.width() / 2, y: cy.height() / 2 } });
+  })));
+
+  window.PlanViewer = { planWorkload };
 
   // `?doc=<path>` opens one document; otherwise the examples listed in
   // examples.json, starting from `#<id>` or the first.
diff --git a/tools/dag-viewer/index.html b/tools/dag-viewer/index.html
index 54d02d8f0..09c82155e 100644
--- a/tools/dag-viewer/index.html
+++ b/tools/dag-viewer/index.html
@@ -1,9 +1,9 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-theme="light">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
-<title>ASAPPlanner Stage Viewer</title>
+<title>ASAPPlanner Plan Viewer</title>
 <style>
 :root {
   --bg: #f3f4f7;
@@ -63,19 +63,19 @@
 .accepted { color: var(--muted); font-size: 12px; }
 .stages { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--muted); font-size: 12.5px; }
 .stages b { color: var(--fg); font-family: var(--font-mono); font-weight: 500; }
-.main { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
+.io { display: grid; gap: 12px; min-width: 0; border-left: 4px solid var(--line); padding-left: 14px; }
+.io.inputs { border-left-color: var(--accent); }
+.io.outputs { border-left-color: var(--ok); }
+.io-title { font-family: var(--font-display); font-weight: 600; font-size: 19px; margin: 0; }
+.io-title small { font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--muted); margin-left: 8px; }
+.settings { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; padding: 10px 12px; margin: 0; font-size: 13px; }
+.settings dt { color: var(--muted); }
+.settings dd { margin: 0; overflow-wrap: anywhere; }
 .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
 .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
 .eyebrow { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; font-size: 12px; color: var(--muted); }
 .panel-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin: 0; }
-.rank-panel { position: sticky; top: 12px; }
-.rank { list-style: none; margin: 0; padding: 6px; max-height: calc(100vh - 120px); overflow-y: auto; display: grid; gap: 4px; }
-.rank .row { border-radius: 8px; padding: 8px 10px; display: grid; grid-template-columns: max-content minmax(0,1fr) auto; gap: 2px 8px; align-items: baseline; }
 select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
-.pid { font-family: var(--font-mono); font-weight: 500; white-space: nowrap; }
-.plabel { min-width: 0; overflow-wrap: anywhere; }
-.ptotal { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
-.pstatus { grid-column: 2 / 4; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
 .chip { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
 .chip.selected { color: var(--ok); background: var(--ok-soft); }
 .chip.invalid { color: var(--bad); background: var(--bad-soft); }
@@ -86,6 +86,10 @@
 .lane-meta { padding: 6px 12px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); min-height: 30px; overflow-wrap: anywhere; }
 .lane-meta b { color: var(--fg); font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
 .cy { height: 560px; width: 100%; }
+.how-to ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 2px; }
+.how-to b { font-family: var(--font-body); font-weight: 600; }
+.zoom { position: relative; height: 0; z-index: 2; display: flex; justify-content: flex-end; gap: 4px; padding-right: 8px; }
+.zoom .btn { margin-top: 8px; width: 30px; height: 28px; padding: 0; }
 .legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); padding: 2px 2px; }
 .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 5px; border: 1.5px solid; }
 .details { padding: 12px; display: grid; gap: 10px; }
@@ -108,16 +112,20 @@
 .status { color: var(--muted); }
 .error { color: var(--bad); }
 footer { color: var(--muted); font-size: 12px; max-width: 100ch; }
-@media (max-width: 820px) { .main { grid-template-columns: minmax(0, 1fr); } .rank-panel { position: static; } .rank { max-height: 340px; } .cy { height: 460px; } }
+@media (max-width: 820px) { .cy { height: 460px; } }
 @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
+.physical-grid { border-collapse: collapse; margin: 4px 0 8px; font-size: 12px; }
+.physical-grid th, .physical-grid td { border: 1px solid var(--line); padding: 2px 6px; text-align: left; font-weight: 500; }
+.physical-grid td.ingestion_time { background: var(--time-ingest); }
+.physical-grid td.query_time { background: var(--time-query); }
+.physical-grid td.selected { outline: 2px solid var(--ok); outline-offset: -2px; }
+.title-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
 .toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
 .btn { font: inherit; font-size: 13px; padding: 5px 11px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); cursor: pointer; }
 .btn:hover { background: var(--panel-2); }
 .btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
 .drop-active { outline: 2px dashed var(--accent); outline-offset: -8px; }
 .hint-inline { color: var(--muted); font-size: 12px; }
-.workload-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 12px; align-items: start; }
-@media (max-width: 1100px) { .workload-row { grid-template-columns: minmax(0, 1fr); } }
 .table-wrap { overflow-x: auto; padding: 6px 12px 10px; }
 td.wrap, th.wrap { display: table-cell; max-width: none; margin: 0; padding: 4px 12px 4px 0; white-space: normal; overflow-wrap: anywhere; min-width: 12ch; }
 tr.clickable { cursor: pointer; }
@@ -131,7 +139,8 @@
 <body>
 <div class="wrap">
   <header>
-    <h1>ASAPPlanner Stage Viewer</h1>
+    <div class="title-row"><h1>ASAPPlanner Plan Viewer</h1>
+      <button class="btn" id="themeToggle" type="button" aria-pressed="false">Dark theme</button></div>
     <p class="lede">The planner's stages for one workload: the query-language frontends lower the queries into one logical DAG (Stage 0), Pass 1 and Pass 2 propose logical ASAP candidates in a memo and Pass 2 prunes those no consumer can use (Stage 1), each remaining candidate becomes physical candidates (Stage 2), and Stage 3 selects the cheapest plan from them.</p>
     <nav class="tabs" id="tabs" aria-label="Example"></nav>
     <div class="toolbar">
@@ -148,39 +157,41 @@ <h1>ASAPPlanner Stage Viewer</h1>
       <div class="table-wrap" id="setTable"></div>
     </section>
     <p class="story" id="story"></p>
-    <div class="workload-row">
-      <div style="display:grid; gap:6px; min-width:0">
-        <div class="eyebrow">Query workload</div>
-        <div class="queries" id="queries"><span class="status">Pick an example or a workload set, or open a stage document or a workload.</span></div>
-      </div>
-      <section class="panel" aria-labelledby="data-title">
-        <div class="panel-head"><h2 id="data-title">Data workload</h2><span class="eyebrow" id="dataArrival"></span></div>
-        <div class="lane-meta" id="deployment"></div>
-        <div class="table-wrap" id="dataSources"><span class="status">The document declares no data workload.</span></div>
-      </section>
-    </div>
-    <div class="stages" id="counts"></div>
   </header>
 
-  <div class="main">
-    <section class="panel rank-panel" aria-labelledby="rank-title">
-      <div class="panel-head"><h2 id="rank-title">Stage 3 · plan selection</h2></div>
-      <div class="lane-meta" id="rank-meta"></div>
-      <ol class="rank" id="rank"></ol>
+  <section class="io inputs" aria-labelledby="inputs-title">
+    <h2 class="io-title" id="inputs-title">Planner inputs<small>what the planner was given</small></h2>
+    <div style="display:grid; gap:6px; min-width:0">
+      <div class="eyebrow">Query workload</div>
+      <div class="queries" id="queries"><span class="status">Pick an example or a workload set, or open a stage document or a workload.</span></div>
+    </div>
+    <section class="panel lane" aria-labelledby="lane0-title">
+      <div class="panel-head"><div><div class="eyebrow">the queries as one logical DAG</div><h2 id="lane0-title">Input</h2></div></div>
+      <div class="lane-meta" id="lane0-meta"></div>
+      <div class="zoom" data-for="cy0"><button type="button" class="btn" data-zoom="in" aria-label="Zoom in">+</button><button type="button" class="btn" data-zoom="out" aria-label="Zoom out">−</button><button type="button" class="btn" data-zoom="fit" aria-label="Fit the whole graph">⌂</button></div>
+      <div class="cy" id="cy0"></div>
     </section>
+    <section class="panel" aria-labelledby="data-title">
+      <div class="panel-head"><h2 id="data-title">Data workload</h2><span class="eyebrow" id="dataArrival"></span></div>
+      <div class="table-wrap" id="dataSources"><span class="status">The document declares no data workload.</span></div>
+    </section>
+    <section class="panel" aria-labelledby="deployment-title">
+      <div class="panel-head"><h2 id="deployment-title">Deployment and planner settings</h2></div>
+      <dl class="settings" id="deployment"></dl>
+    </section>
+  </section>
 
-    <div style="display:grid; gap:12px; min-width:0">
+  <section class="io outputs" aria-labelledby="outputs-title">
+    <h2 class="io-title" id="outputs-title">Planner output<small>what the planner produced from those inputs</small></h2>
+    <div class="stages" id="counts"></div>
+    <div class="stages" id="outcome"></div>
       <div class="toolbar"><label><span class="eyebrow">highlight query</span> <select id="queryPick" aria-label="Highlight one query's path"></select></label>
         <span class="hint-inline">Dims what the query's root does not reach. Click a node to highlight what it reads and what reads it, the background to clear.</span></div>
       <div class="lanes">
-        <section class="panel lane" aria-labelledby="lane0-title">
-          <div class="panel-head"><div><div class="eyebrow">Stage 0</div><h2 id="lane0-title">Query-language frontends</h2></div></div>
-          <div class="lane-meta" id="lane0-meta"></div>
-          <div class="cy" id="cy0"></div>
-        </section>
         <section class="panel lane" aria-labelledby="lane1-title">
           <div class="panel-head"><div><div class="eyebrow">Stage 3 · physical DAG with its costs</div><h2 id="lane1-title">Selected plan</h2></div></div>
           <div class="lane-meta" id="lane1-meta"></div>
+          <div class="zoom" data-for="cy1"><button type="button" class="btn" data-zoom="in" aria-label="Zoom in">+</button><button type="button" class="btn" data-zoom="out" aria-label="Zoom out">−</button><button type="button" class="btn" data-zoom="fit" aria-label="Fit the whole graph">⌂</button></div>
           <div class="cy" id="cy1"></div>
         </section>
         <section class="panel" aria-labelledby="views-title">
@@ -190,8 +201,22 @@ <h1>ASAPPlanner Stage Viewer</h1>
         </section>
         <section class="panel lane" id="memoView" aria-labelledby="memoView-title" hidden>
           <div class="panel-head"><div><div class="eyebrow">Stage 0 and Stage 1 · memo after each step, with the edges and pruned candidates of each stage</div><h2 id="memoView-title">Memo</h2></div>
-            <nav class="tabs" id="memoTabs" aria-label="Memo step"></nav></div>
+            <div class="toolbar"><nav class="tabs" id="memoTabs" aria-label="Memo step"></nav>
+              <label class="status"><input type="checkbox" id="memoShowPruned" /> show pruned candidates</label>
+              <label class="status"><input type="checkbox" id="memoShowPhysical" checked /> show Stage 2 variants</label>
+              <label class="status" title="Last tab only: the groups and candidates the selected plan uses"><input type="checkbox" id="memoPlanOnly" /> selected plan only</label></div></div>
           <div class="lane-meta" id="memoView-meta"></div>
+          <div class="lane-meta how-to">
+            <b>How to read it</b>
+            <ul>
+              <li><b>Big box</b> (a group): one intermediate result, e.g. "the p50 of the last 10 minutes".</li>
+              <li><b>Small boxes inside</b> (candidates): different ways to compute that same result. Border colour shows which rule added it.</li>
+              <li><b>Arrow</b>: the candidate reads its input from the group it points to.</li>
+              <li><b>Green</b>: the selected plan uses it. <b>Red dashed</b>: pruned (shown only with "show pruned candidates").</li>
+              <li><b>Small grid</b> (Pass 2 tab): how Stage 2 can run the candidate. Rows: computed at ingest or at query time. Columns: result not kept, kept for one query run, kept across runs. Filled = possible, crossed = ruled out, dark outline = used by the plan.</li>
+            </ul>
+          </div>
+          <div class="zoom" data-for="cyMemo"><button type="button" class="btn" data-zoom="in" aria-label="Zoom in">+</button><button type="button" class="btn" data-zoom="out" aria-label="Zoom out">−</button><button type="button" class="btn" data-zoom="fit" aria-label="Fit the whole graph">⌂</button></div>
           <div class="cy" id="cyMemo"></div>
         </section>
       </div>
@@ -208,8 +233,7 @@ <h1>ASAPPlanner Stage Viewer</h1>
         <div class="panel-head"><h2 id="details-title">Details</h2><span class="eyebrow">click a node or edge</span></div>
         <div class="details" id="details"></div>
       </section>
-    </div>
-  </div>
+  </section>
 
   <footer>Documents are written by the <code>asap_planner</code> devtool (<code>asap-stage-pipeline/v2</code>). Statistics in the examples are illustrative, so only the relative costs within an example are meaningful.</footer>
 </div>
diff --git a/tools/dag-viewer/memo.js b/tools/dag-viewer/memo.js
index 11d692856..267dc40d0 100644
--- a/tools/dag-viewer/memo.js
+++ b/tools/dag-viewer/memo.js
@@ -1,4 +1,4 @@
-// The Memo view of the Stage Viewer: the document's optional `memo` section
+// The Memo view of the Plan Viewer: the document's optional `memo` section
 // (written by `asap_planner`) drawn after each memo step, one tab per
 // step. Each memo group is a box holding its candidates; an edge goes from
 // a candidate to each input group it reads. The functions up to
@@ -31,6 +31,9 @@
 
 // Memo steps in pipeline order; a step production does not run is omitted.
 const MEMO_STEPS = ['stage0', 'pass1', 'pass2'];
+// Each step's name in the viewer (the document's titles are longer).
+const MEMO_STEP_NAMES = { stage0: 'Stage 0', pass1: 'Stage 1 · Pass 1', pass2: 'Stage 1 · Pass 2' };
+const memoStepName = (step) => MEMO_STEP_NAMES[step.step] || step.title;
 
 // `OriginOfCandidateForMemoGroup` (snake_case in the document), its Rust name, and the
 // border color of its candidates (mid tones, readable in both themes).
@@ -128,6 +131,62 @@ function memoPhysicalCandidates(doc, group, index) {
     }));
 }
 
+// Stage 2's physical variants of candidate `index` of memo group `group`
+// as a grid: rows by timing (MEMO_TIMINGS), columns by lifetime kind
+// (MEMO_LIFETIMES); each cell `{ ids, pruned, selected }`: the physical
+// candidates there, whether Stage 2 pruned one there, and whether the plan
+// uses one there (a physical edge into or out of it is selected). Null
+// without a Stage 2 section.
+const MEMO_TIMINGS = [['ingestion_time', 'ingest'], ['query_time', 'query']];
+const MEMO_LIFETIMES = [['None', 'not kept'], ['OneEvaluation', 'one run'], ['AcrossEvaluations', 'across runs']];
+function memoPhysicalGrid(doc, group, index) {
+  const stage2 = doc.stage2_physical_asap_optimization;
+  if (!stage2 || !stage2.physical_candidates) return null;
+  const all = stage2.physical_candidates;
+  const used = new Set(all.flatMap((c) => c.inputs.flatMap((input) => input.edges.filter((e) => e.selected).flatMap((e) => [e.producer, c.id]))));
+  const cell = (properties) => {
+    const lifetime = typeof properties.lifetime === 'string' ? properties.lifetime : Object.keys(properties.lifetime)[0];
+    return [MEMO_TIMINGS.findIndex(([t]) => t === properties.timing), MEMO_LIFETIMES.findIndex(([l]) => l === lifetime)];
+  };
+  const grid = MEMO_TIMINGS.map(() => MEMO_LIFETIMES.map(() => ({ ids: [], pruned: false, selected: false })));
+  const at = ([row, column]) => (row >= 0 && column >= 0 ? grid[row][column] : null);
+  all.filter((c) => c.group === group && c.index_in_group === index).forEach((c) => {
+    const g = at(cell(c.properties));
+    if (g) { g.ids.push(c.id); g.selected = g.selected || used.has(c.id); }
+  });
+  (stage2.pruned_candidates || []).filter((c) => c.group === group && c.index_in_group === index).forEach((c) => {
+    const g = at(cell(c.properties));
+    if (g) g.pruned = true;
+  });
+  return grid;
+}
+
+// `grid` (memoPhysicalGrid) as an SVG data URI for a candidate node: a
+// filled cell when a physical variant is there (green at ingestion time,
+// orange at query time), a crossed grey one when Stage 2 pruned it, an
+// empty one when there is none, a dark outline when the plan uses it.
+const MEMO_GRID = { width: 158, height: 26 };
+function memoGridImage(grid) {
+  const cw = 34;
+  const ch = 10;
+  const x0 = 44;
+  const fills = ['#62b98c', '#eb9f4a'];
+  const parts = [];
+  grid.forEach((row, r) => {
+    const y = 2 + r * (ch + 3);
+    parts.push(`<text x="0" y="${y + 8}" font-family="monospace" font-size="8" fill="#6b7280">${MEMO_TIMINGS[r][1]}</text>`);
+    row.forEach((c, k) => {
+      const x = x0 + k * (cw + 3);
+      const fill = c.ids.length ? fills[r] : c.pruned ? '#c9ccd3' : 'none';
+      const stroke = c.selected ? '#14532d' : '#9aa1b2';
+      parts.push(`<rect x="${x}" y="${y}" width="${cw}" height="${ch}" rx="2" fill="${fill}" stroke="${stroke}" stroke-width="${c.selected ? 2.2 : 0.8}"/>`);
+      if (c.pruned && !c.ids.length) parts.push(`<path d="M${x + 3} ${y + 2}L${x + cw - 3} ${y + ch - 2}M${x + cw - 3} ${y + 2}L${x + 3} ${y + ch - 2}" stroke="#6b7280" stroke-width="1"/>`);
+    });
+  });
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${MEMO_GRID.width}" height="${MEMO_GRID.height}">${parts.join('')}</svg>`;
+  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+}
+
 // The checks of `memo.steps` and `memo.selected_candidates` against the
 // format above, as messages ([] when it holds or the document has no
 // memo). `queryCount` is the workload's query count.
@@ -271,18 +330,65 @@ function memoGroupRanks(groups) {
 // Sizes of the drawing, in cytoscape pixels.
 const MEMO_ITEM = { width: 190, height: 56, gap: 10, columns: 3, pad: 12, label: 34, rowGap: 70, groupGap: 36, rowWidth: 2200 };
 
+// A candidate's dimensions as [name, value] pairs, values as text: its
+// origin, its sketch family and each θ field, and its tumbling-window width.
+// A candidate without a dimension has the value "none" for it.
+function memoCandidateDims(c) {
+  const dims = [['origin', MEMO_ORIGINS[c.origin].name]];
+  Object.entries(c.parameters || {}).forEach(([family, fields]) => {
+    dims.push(['sketch', family]);
+    if (memoIsObject(fields)) Object.entries(fields).forEach(([name, v]) => dims.push([name, compactWire(v)]));
+  });
+  const op = memoIsObject(c.operator) ? Object.values(Object.values(c.operator)[0] || {})[0] : null;
+  if (memoIsObject(op) && op.tumbling_window_width_ms != null) dims.push(['window_ms', compactWire(op.tumbling_window_width_ms)]);
+  return dims;
+}
+
+// How a group with `candidates` is drawn under `state` (`{path, next}`: the
+// [dimension, value] pairs the user drilled into, and the dimension to
+// split by next). `shown` are the candidates matching `path`; `choices` the
+// dimensions that still vary among them. While more than `collapseAbove`
+// remain and a dimension varies, they split by `dim` (`next` when it
+// varies, else the first that does) into `buckets` ([value, candidates],
+// numeric values ascending with "none" last); otherwise `dim` is null and
+// `shown` are drawn one by one.
+function memoGroupDrill(candidates, state, collapseAbove) {
+  const path = (state && state.path) || [];
+  const dimsOf = new Map(candidates.map((c) => [c.index, new Map(memoCandidateDims(c))]));
+  const valueOf = (c, dim) => dimsOf.get(c.index).get(dim) ?? 'none';
+  const shown = candidates.filter((c) => path.every(([dim, value]) => valueOf(c, dim) === value));
+  const choices = [...new Set(shown.flatMap((c) => [...dimsOf.get(c.index).keys()]))]
+    .filter((dim) => !path.some(([d]) => d === dim) && new Set(shown.map((c) => valueOf(c, dim))).size > 1);
+  if (shown.length <= collapseAbove || !choices.length) return { path, shown, choices, dim: null, buckets: [] };
+  const dim = choices.includes(state && state.next) ? state.next : choices[0];
+  const byValue = new Map();
+  shown.forEach((c) => {
+    const value = valueOf(c, dim);
+    if (!byValue.has(value)) byValue.set(value, []);
+    byValue.get(value).push(c);
+  });
+  const buckets = [...byValue];
+  const rank = (v) => (v === 'none' ? Infinity : Number(v));
+  if (buckets.every(([v]) => v === 'none' || (v !== '' && !Number.isNaN(Number(v))))) buckets.sort(([a], [b]) => rank(a) - rank(b));
+  return { path, shown, choices, dim, buckets };
+}
+
 // Step `s` of `memo` as cytoscape elements with preset positions. A group
 // is node `g<id>` (a compound node holding its candidates, or a plain box
-// when it has none, as at Stage 0); a candidate is `g<id>c<index>`; a
-// collapsed group holds one node per origin, `g<id>o<origin>`. An edge goes
-// from a candidate (or origin node, or a group without candidates) to each
-// child group it reads. Options: `expanded` (ids of large groups drawn with
-// every candidate), `collapseAbove` (default MEMO_COLLAPSE_ABOVE),
-// `queryIds` (the workload's query ids). The selected plan's candidates
-// are marked at the last step only; Pass 2's eliminated candidates are
-// marked `pruned`.
+// when it has none, as at Stage 0); a candidate is `g<id>c<index>`; a large
+// group holds one node per value of the dimension it splits by
+// (memoGroupDrill), `g<id>b<k>`. An edge goes from a candidate (or bucket
+// node, or a group without candidates) to each child group it reads; when
+// all of a group's items read the same groups, from the group instead.
+// Options: `drill` (per group id, its memoGroupDrill state),
+// `collapseAbove` (default MEMO_COLLAPSE_ABOVE), `queryIds` (the workload's
+// query ids). The selected plan's candidates are marked at the last step
+// only; Pass 2's eliminated candidates are marked `pruned`.
 function memoStepElements(memo, s, options) {
-  const { expanded = [], collapseAbove = MEMO_COLLAPSE_ABOVE, queryIds = [] } = options || {};
+  const { drill = {}, collapseAbove = MEMO_COLLAPSE_ABOVE, queryIds = [], hidePruned = false, physical = null, selectedOnly = false } = options || {};
+  // With `physical` (the document, at the Pass 2 step), each candidate shows
+  // its Stage 2 variants (memoPhysicalGrid) under its label.
+  const itemHeight = MEMO_ITEM.height + (physical ? MEMO_GRID.height + 4 : 0);
   const step = memo.steps[s];
   const last = s === memo.steps.length - 1;
   const selected = last && memo.selected_candidates ? memo.selected_candidates : {};
@@ -291,64 +397,73 @@ function memoStepElements(memo, s, options) {
   const nodes = [];
   const edges = [];
   const edgeIds = new Set();
+  // With `hidePruned`, Pass 2's pruned candidates are left out; with
+  // `selectedOnly` (last step, with a plan), every candidate the plan does
+  // not use. A group left with none is left out, with the edges into it.
+  const planOnly = selectedOnly && last && !!memo.selected_candidates;
+  const shownOf = (group) => group.candidates.filter((c) => (!hidePruned || !c.pruned)
+    && (!planOnly || (selected[String(group.id)] || []).includes(c.index)));
+  const hidden = new Set(step.groups.filter((g) => g.candidates.length && !shownOf(g).length).map((g) => g.id));
   const edge = (source, child, chosen, queries) => {
+    if (hidden.has(child)) return;
     const id = `${source}>g${child}`;
     if (edgeIds.has(id)) return;
     edgeIds.add(id);
     edges.push({ data: { id, source, target: `g${child}`, queries }, classes: chosen ? 'chosen' : '' });
   };
 
-  // Each group's items (candidates or origin counts), laid out below.
-  const boxes = step.groups.map((group) => {
+  // Each group's items (candidates or bucket counts), laid out below.
+  const boxes = step.groups.filter((group) => !hidden.has(group.id)).map((group) => {
     const chosenIndices = selected[String(group.id)] || [];
-    const collapsible = group.candidates.length > collapseAbove;
-    const collapsed = collapsible && !expanded.includes(group.id);
+    const split = memoGroupDrill(shownOf(group), drill[group.id], collapseAbove);
     const queries = group.queries;
     let items = [];
-    if (collapsed) {
-      const byOrigin = new Map();
-      group.candidates.forEach((c) => {
-        if (!byOrigin.has(c.origin)) byOrigin.set(c.origin, { added: 0, pruned: 0, children: new Set(), chosen: false, chosenChildren: [] });
-        const entry = byOrigin.get(c.origin);
-        if (c.added) entry.added += 1;
-        if (c.pruned) entry.pruned += 1;
-        c.children.forEach((child) => entry.children.add(child));
-        if (chosenIndices.includes(c.index)) { entry.chosen = true; entry.chosenChildren.push(...c.children); }
-      });
-      items = Object.entries(group.candidate_count_by_origin).filter(([, count]) => count > 0).map(([origin, count]) => {
-        const entry = byOrigin.get(origin);
-        const lines = [`${count} ${MEMO_ORIGINS[origin].name}`];
-        const notes = [entry.added ? `✚ ${entry.added} new` : '', entry.pruned ? `✗ ${entry.pruned} pruned` : '', entry.chosen ? '✓ selected' : ''].filter(Boolean);
+    if (split.dim) {
+      items = split.buckets.map(([value, cs], k) => {
+        const chosen = cs.filter((c) => chosenIndices.includes(c.index));
+        const added = cs.filter((c) => c.added).length;
+        const pruned = cs.filter((c) => c.pruned).length;
+        const origins = new Set(cs.map((c) => c.origin));
+        const lines = [split.dim === 'origin' ? `${cs.length} ${value}` : `${cs.length} · ${split.dim}=${value}`];
+        const notes = [added ? `✚ ${added} new` : '', pruned ? `✗ ${pruned} pruned` : '', chosen.length ? '✓ selected' : ''].filter(Boolean);
         lines.push(notes.length ? notes.join(' · ') : 'click to expand');
         return {
-          data: { id: `g${group.id}o${origin}`, kind: 'origin', groupId: group.id, origin, count, color: MEMO_ORIGINS[origin].color,
-            label: lines.join('\n'), queries, w: MEMO_ITEM.width, h: MEMO_ITEM.height },
-          classes: ['memoItem', entry.chosen ? 'chosen' : '', entry.added ? 'added' : ''].filter(Boolean).join(' '),
-          children: [...entry.children], chosenChildren: entry.chosenChildren, chosen: entry.chosen,
+          data: { id: `g${group.id}b${k}`, kind: 'bucket', groupId: group.id, dim: split.dim, value, count: cs.length,
+            color: origins.size === 1 ? MEMO_ORIGINS[cs[0].origin].color : '#848b98',
+            label: lines.join('\n'), queries, w: MEMO_ITEM.width, h: itemHeight },
+          classes: ['memoItem', chosen.length ? 'chosen' : '', added ? 'added' : ''].filter(Boolean).join(' '),
+          children: [...new Set(cs.flatMap((c) => c.children))], chosenChildren: chosen.flatMap((c) => c.children), chosen: chosen.length > 0,
         };
       });
     } else {
-      items = group.candidates.map((c) => {
+      items = split.shown.map((c) => {
         const chosen = chosenIndices.includes(c.index);
         const notes = [MEMO_ORIGINS[c.origin].name, c.added ? '✚ new' : '', c.pruned ? '✗ pruned' : '', chosen ? '✓ selected' : ''].filter(Boolean);
+        // Drilled in, the full θ would clip; show what tells the shown candidates apart.
+        const dims = new Map(memoCandidateDims(c));
+        const theta = split.path.length && split.choices.length
+          ? `θ ${split.choices.map((dim) => `${dim}=${dims.get(dim) ?? 'none'}`).join(', ')}` : memoParametersText(c.parameters);
+        const grid = physical && !c.pruned ? memoPhysicalGrid(physical, group.id, c.index) : null;
         return {
-          data: { id: `g${group.id}c${c.index}`, kind: 'candidate', groupId: group.id, index: c.index, origin: c.origin, color: MEMO_ORIGINS[c.origin].color,
-            label: `${memoClip(`#${c.index} ${c.label}`, 30)}\n${memoClip(memoParametersText(c.parameters) || '—', 30)}\n${memoClip(notes.join(' · '), 30)}`, queries, w: MEMO_ITEM.width, h: MEMO_ITEM.height },
-          classes: ['memoItem', chosen ? 'chosen' : '', c.added ? 'added' : '', c.pruned ? 'pruned' : ''].filter(Boolean).join(' '),
+          data: Object.assign({ id: `g${group.id}c${c.index}`, kind: 'candidate', groupId: group.id, index: c.index, origin: c.origin, color: MEMO_ORIGINS[c.origin].color,
+            label: `${memoClip(`#${c.index} ${c.label}`, 30)}\n${memoClip(theta || '—', 30)}\n${memoClip(notes.join(' · '), 30)}`, queries, w: MEMO_ITEM.width, h: itemHeight },
+          grid ? { grid: memoGridImage(grid) } : {}),
+          classes: ['memoItem', chosen ? 'chosen' : '', c.added ? 'added' : '', c.pruned ? 'pruned' : '', grid ? 'withGrid' : ''].filter(Boolean).join(' '),
           children: c.children, chosenChildren: chosen ? c.children : [], chosen,
         };
       });
     }
     const pruned = group.candidates.filter((c) => c.pruned).length;
-    const count = `${group.candidate_count} candidate${group.candidate_count === 1 ? '' : 's'}${pruned ? ` (${pruned} pruned by Pass 2)` : ''}`;
+    const count = `${group.candidate_count} candidate${group.candidate_count === 1 ? '' : 's'}${pruned ? ` (${pruned} pruned by Pass 2${hidePruned ? ', hidden' : ''})` : ''}`;
     const roots = group.roots_of.length ? ` · root of ${group.roots_of.map(queryName).join(', ')}` : '';
-    const toggle = collapsible ? (collapsed ? ' · click a count to expand' : ' · click the group to collapse') : '';
-    const label = `G${group.id} · ${memoClip(group.label, 40)}\n${step.step !== 'stage0' ? count : 'no candidates yet'}${roots}${toggle}`;
+    const where = split.path.length ? `\n${split.path.map(([dim, value]) => `${dim}=${value}`).join(' › ')} (${split.shown.length})` : '';
+    const toggle = (split.dim ? ' · click a count to expand' : '') + (split.path.length ? ' · click the group to go back' : '');
+    const label = `G${group.id} · ${memoClip(group.label, 40)}\n${step.step !== 'stage0' ? count : 'no candidates yet'}${roots}${toggle}${where}`;
     const columns = Math.min(Math.max(items.length, 1), MEMO_ITEM.columns);
     const rows = Math.max(1, Math.ceil(items.length / MEMO_ITEM.columns));
     const width = items.length ? columns * MEMO_ITEM.width + (columns - 1) * MEMO_ITEM.gap + 2 * MEMO_ITEM.pad : 230;
-    const height = items.length ? rows * MEMO_ITEM.height + (rows - 1) * MEMO_ITEM.gap + 2 * MEMO_ITEM.pad + MEMO_ITEM.label : 56;
-    return { group, items, label, width, height, collapsible, collapsed, queries };
+    const height = items.length ? rows * itemHeight + (rows - 1) * MEMO_ITEM.gap + 2 * MEMO_ITEM.pad + MEMO_ITEM.label + (where ? 14 : 0) : 56;
+    return { group, items, label, width, height, drilled: split.path.length > 0, queries };
   });
 
   // Rank rows, highest rank on top; a rank wider than the row width wraps.
@@ -387,8 +502,10 @@ function memoStepElements(memo, s, options) {
 
   boxes.forEach((box) => {
     const { group, items } = box;
+    const key = (item) => [...new Set(item.children)].sort().join(',');
+    const shared = items.every((item) => key(item) === key(items[0]));
     const data = { id: `g${group.id}`, kind: 'group', groupId: group.id, label: box.label, queries: box.queries,
-      collapsible: box.collapsible, collapsed: box.collapsed, w: box.width, h: box.height };
+      drilled: box.drilled, w: box.width, h: box.height };
     const chosenGroup = Object.prototype.hasOwnProperty.call(selected, String(group.id));
     const node = { data, classes: ['memoGroup', items.length ? 'compound' : '', chosenGroup ? 'chosenGroup' : ''].filter(Boolean).join(' ') };
     if (!items.length) node.position = { x: box.x + box.width / 2, y: box.y + box.height / 2 };
@@ -400,14 +517,16 @@ function memoStepElements(memo, s, options) {
         data: Object.assign({ parent: `g${group.id}` }, item.data), classes: item.classes,
         position: {
           x: box.x + MEMO_ITEM.pad + column * (MEMO_ITEM.width + MEMO_ITEM.gap) + MEMO_ITEM.width / 2,
-          y: box.y + MEMO_ITEM.label + MEMO_ITEM.pad + row * (MEMO_ITEM.height + MEMO_ITEM.gap) + MEMO_ITEM.height / 2,
+          y: box.y + MEMO_ITEM.label + MEMO_ITEM.pad + row * (itemHeight + MEMO_ITEM.gap) + itemHeight / 2,
         },
       });
       // Only the selected candidate's own edges are marked, not those of
-      // the other candidates sharing its origin count.
-      item.children.forEach((child) => edge(item.data.id, child, item.chosenChildren.includes(child), box.queries));
+      // the other candidates sharing its bucket.
+      if (!shared) item.children.forEach((child) => edge(item.data.id, child, item.chosenChildren.includes(child), box.queries));
     });
-    if (!items.length) group.children.forEach((child) => edge(`g${group.id}`, child, false, box.queries));
+    // When every item reads the same groups, one edge per child from the group says it all.
+    if (shared) (items.length ? items[0].children : group.children)
+      .forEach((child) => edge(`g${group.id}`, child, items.some((i) => i.chosenChildren.includes(child)), box.queries));
   });
   return nodes.concat(edges);
 }
@@ -441,8 +560,8 @@ function memoViewController() {
   let cy = null;
   let elements = [];
   let highlighted = '';
-  // Per step, the large groups the user expanded.
-  let expanded = [];
+  // Per step, per group id, its memoGroupDrill state.
+  let drill = [];
 
   function style() {
     return [
@@ -454,6 +573,10 @@ function memoViewController() {
       { selector: 'node.compound', style: { 'text-valign': 'top', 'text-halign': 'center', padding: 12 } },
       { selector: 'node.chosenGroup', style: { 'border-color': tok('--ok'), 'border-width': 2.5 } },
       { selector: 'node.memoItem', style: { 'border-color': 'data(color)', 'border-width': 3 } },
+      { selector: 'node.withGrid', style: {
+          'background-image': 'data(grid)', 'background-fit': 'none', 'background-clip': 'none',
+          'background-width': MEMO_GRID.width, 'background-height': MEMO_GRID.height,
+          'background-position-x': '50%', 'background-position-y': '94%', 'text-margin-y': -(MEMO_GRID.height + 4) / 2 } },
       { selector: 'node.added', style: { 'border-style': 'double', 'border-width': 5 } },
       { selector: 'node.chosen', style: { 'background-color': tok('--ok-soft') } },
       { selector: 'node.pruned', style: { 'background-color': tok('--bad-soft'), 'border-style': 'dashed' } },
@@ -466,25 +589,28 @@ function memoViewController() {
 
   function draw() {
     if (cy) { cy.destroy(); cy = null; }
-    elements = memoStepElements(memo, stepIndex, { expanded: expanded[stepIndex], queryIds });
+    elements = memoStepElements(memo, stepIndex, { drill: drill[stepIndex], queryIds, hidePruned: !($('memoShowPruned') || {}).checked,
+      physical: memo.steps[stepIndex].step === 'pass2' && doc.stage2_physical_asap_optimization && ($('memoShowPhysical') || {}).checked ? doc : null,
+      selectedOnly: !!($('memoPlanOnly') || {}).checked });
     cy = cytoscape({
       container: $('cyMemo'), elements, style: style(), layout: { name: 'preset', fit: true, padding: 16 },
       wheelSensitivity: 0.25, minZoom: 0.05, maxZoom: 2.5, boxSelectionEnabled: false,
     });
+    fitGraph(cy);
     cy.on('tap', 'node', (e) => tap(e.target.data()));
     cy.on('tap', (e) => { if (e.target === cy || typeof e.target.isNode !== 'function') $('details').innerHTML = HINT; });
     dim();
     const step = memo.steps[stepIndex];
     const selected = memo.selected_candidates;
     const last = stepIndex === memo.steps.length - 1;
-    $('memoView-meta').innerHTML = `<b>${esc(step.title)}</b> · ${esc(memoStepText(memo, stepIndex))}`
+    $('memoView-meta').innerHTML = `<b>${esc(memoStepName(step))}</b> · ${esc(memoStepText(memo, stepIndex))}`
       + (last ? (selected ? ` · selected plan's candidates highlighted (${Object.keys(selected).length} groups)` : ' · no plan selected')
         : ' · the selected plan\'s candidates are shown on the last tab');
-    $('memoTabs').innerHTML = memo.steps.map((st, i) => `<button type="button" data-step="${i}" aria-pressed="${i === stepIndex}">${esc(st.title)}</button>`).join('');
+    $('memoTabs').innerHTML = memo.steps.map((st, i) => `<button type="button" data-step="${i}" aria-pressed="${i === stepIndex}">${esc(memoStepName(st))}</button>`).join('');
     $('memoTabs').querySelectorAll('button').forEach((b) => b.addEventListener('click', () => selectStep(Number(b.dataset.step))));
   }
 
-  const HINT = '<p class="hint">Click a memo candidate to see its properties, its logical edges (Pass 2 tab) and its physical candidates; click a count to expand its group.</p>';
+  const HINT = '<p class="hint">Click a memo candidate to see its properties, its logical edges (Pass 2 tab) and its physical candidates; click a count to split its group further, and the group to go back.</p>';
 
   function dim() {
     if (!cy || !cy.batch) return;
@@ -498,10 +624,19 @@ function memoViewController() {
   const groupList = (ids) => (ids.length ? ids.map((id) => `G${id}`).join(', ') : 'none');
   const queryList = (ids) => (ids.length ? ids.map((q) => queryIds[q] || `query #${q + 1}`).join(', ') : 'none');
 
+  const drillOf = (id) => drill[stepIndex][id] || { path: [], next: null };
+  // Sets group `id`'s drill state, redraws and shows the group.
+  function setDrill(id, state) {
+    drill[stepIndex] = { ...drill[stepIndex], [id]: state };
+    draw();
+    showGroup(groupOf(id));
+  }
+
   function tap(d) {
     const group = groupOf(d.groupId);
-    if (d.kind === 'origin') { expanded[stepIndex] = [...expanded[stepIndex], d.groupId]; draw(); showGroup(group); return; }
-    if (d.kind === 'group' && d.collapsible && !d.collapsed) { expanded[stepIndex] = expanded[stepIndex].filter((id) => id !== d.groupId); draw(); showGroup(group); return; }
+    const state = drillOf(d.groupId);
+    if (d.kind === 'bucket') { setDrill(d.groupId, { path: [...state.path, [d.dim, d.value]], next: null }); return; }
+    if (d.kind === 'group' && d.drilled) { setDrill(d.groupId, { path: state.path.slice(0, -1), next: null }); return; }
     if (d.kind === 'candidate') showCandidate(group, group.candidates.find((c) => c.index === d.index));
     else showGroup(group);
   }
@@ -528,10 +663,20 @@ function memoViewController() {
 
   const section = (title, items) => (items.length ? `<div class="eyebrow">${esc(title)}</div>${list(items)}` : '');
 
+  // While the group is split into counts, a button per dimension that still
+  // varies, to split by it instead.
+  function splitButtons(group) {
+    const state = drillOf(group.id);
+    const split = memoGroupDrill(group.candidates, state, MEMO_COLLAPSE_ABOVE);
+    if (!split.dim) return '';
+    const buttons = split.choices.map((dim) => `<button type="button" class="btn" data-dim="${esc(dim)}" aria-pressed="${dim === split.dim}">${esc(dim)}</button>`).join(' ');
+    return `<div class="eyebrow">split by</div><div class="memo-split">${buttons}</div>`;
+  }
+
   function showGroup(group) {
     const origins = Object.entries(group.candidate_count_by_origin).map(([o, n]) => `${n} ${MEMO_ORIGINS[o].name}`).join(', ');
     const pruned = memoPrunedLines(doc, group.id);
-    $('details').innerHTML = `<h3>Memo group G${esc(group.id)} <span class="eyebrow">${esc(memo.steps[stepIndex].title)}</span></h3>${kv([
+    $('details').innerHTML = `<h3>Memo group G${esc(group.id)} <span class="eyebrow">${esc(memoStepName(memo.steps[stepIndex]))}</span></h3>${splitButtons(group)}${kv([
       ['label', group.label], ['operator', stageNodeLines(group.operator).join(' · ')],
       ['reads', groupList(group.children)], ['read by', groupList(group.parents)],
       ['queries reaching it', queryList(group.queries)], ['root of', queryList(group.roots_of)],
@@ -543,6 +688,9 @@ function memoViewController() {
     ])}${list(group.candidates.map(candidateLine))}
       ${section('pruned by Pass 2', pruned.pass2)}${section('pruned by Stage 2', pruned.stage2)}${section('pruned by Stage 3', pruned.stage3)}
       <details><summary>Group operator (JSON)</summary><pre>${esc(JSON.stringify(group.operator, null, 2))}</pre></details>`;
+    $('details').querySelectorAll('.memo-split button').forEach((b) => b.addEventListener('click', () => {
+      setDrill(group.id, { ...drillOf(group.id), next: b.dataset.dim });
+    }));
   }
 
   // At the Pass 2 step (the memo Stage 2 expands): why Pass 2 pruned the
@@ -554,10 +702,12 @@ function memoViewController() {
     const pass2 = memo.steps[stepIndex].step === 'pass2';
     const edgeLists = (inputs) => inputs.map((input) => `<div class="eyebrow">${esc(input.title)}</div>${list(input.edges) || '<div class="hint">no edge</div>'}`).join('');
     const physical = pass2 ? memoPhysicalCandidates(doc, group.id, candidate.index) : [];
+    const grid = pass2 && !candidate.pruned ? memoPhysicalGrid(doc, group.id, candidate.index) : null;
+    const gridHtml = grid ? `<table class="physical-grid"><tr><th></th>${MEMO_LIFETIMES.map(([, name]) => `<th>${name}</th>`).join('')}</tr>${grid.map((row, r) => `<tr><th>${MEMO_TIMINGS[r][1]}</th>${row.map((c) => `<td class="${[c.ids.length ? MEMO_TIMINGS[r][0] : '', c.selected ? 'selected' : ''].join(' ')}">${c.ids.map((id) => `C${id}`).join(' ')}${c.pruned ? ' ✗ pruned' : ''}${c.selected ? ' ✓' : ''}</td>`).join('')}</tr>`).join('')}</table>` : '';
     const physicalHtml = physical.map((p) => `<div><b>${esc(p.title)}</b>${edgeLists(p.inputs)}</div>`).join('');
     const ofCandidate = (lines) => lines.filter((line) => line.startsWith(`#${candidate.index} `));
     const pruned = memoPrunedLines(doc, group.id);
-    $('details').innerHTML = `<h3>Candidate #${esc(candidate.index)} of G${esc(group.id)} <span class="eyebrow">${esc(memo.steps[stepIndex].title)}</span></h3>${kv([
+    $('details').innerHTML = `<h3>Candidate #${esc(candidate.index)} of G${esc(group.id)} <span class="eyebrow">${esc(memoStepName(memo.steps[stepIndex]))}</span></h3>${kv([
       ['label', candidate.label], ['origin', MEMO_ORIGINS[candidate.origin].name],
       ['added at this step', candidate.added ? 'yes' : 'no'],
       ['parameters θ', memoParametersText(candidate.parameters) || 'none'],
@@ -567,11 +717,13 @@ function memoViewController() {
       ['selected plan', selected ? 'used by the selected plan' : 'no'],
     ])}${section('why Pass 2 pruned it', memoPass2Causes(doc, group.id, candidate.index))}
       ${pass2 && candidate.inputs.length ? `<div class="eyebrow">logical edges (α^log)</div>${edgeLists(memoLogicalEdges(candidate))}` : ''}
-      <div class="eyebrow">physical candidates (Stage 2) and their edges (α^phys)</div>${physicalHtml || `<div class="hint">${pass2 ? 'none' : 'none (shown on the Pass 2 tab)'}</div>`}
+      <div class="eyebrow">physical candidates (Stage 2) and their edges (α^phys)</div>${gridHtml}${physicalHtml || `<div class="hint">${pass2 ? 'none' : 'none (shown on the Pass 2 tab)'}</div>`}
       ${section('pruned by Stage 2', ofCandidate(pruned.stage2))}${section('pruned by Stage 3', ofCandidate(pruned.stage3))}
       <details><summary>Candidate operator (JSON)</summary><pre>${esc(JSON.stringify(candidate.operator, null, 2))}</pre></details>`;
   }
 
+  ['memoShowPruned', 'memoShowPhysical', 'memoPlanOnly'].forEach((id) => { if (typeof document !== 'undefined' && $(id)) $(id).addEventListener('change', () => { if (memo) draw(); }); });
+
   function selectStep(i) {
     stepIndex = i;
     draw();
@@ -585,7 +737,7 @@ function memoViewController() {
     highlighted = '';
     $('memoView').hidden = !memo;
     if (!memo) { $('memoTabs').innerHTML = ''; $('memoView-meta').textContent = ''; return; }
-    expanded = memo.steps.map(() => []);
+    drill = memo.steps.map(() => ({}));
     // The last step first: it is the memo the selected plan was chosen from.
     selectStep(memo.steps.length - 1);
   }
@@ -593,7 +745,7 @@ function memoViewController() {
   function highlightQuery(id) { highlighted = id; dim(); }
   function restyle() { if (cy) cy.style(style()); }
 
-  return { show, highlightQuery, restyle, selectStep };
+  return { show, highlightQuery, restyle, selectStep, graph: () => cy };
 }
 
 if (typeof window !== 'undefined' && typeof document !== 'undefined' && document.getElementById) window.MemoView = memoViewController();
diff --git a/tools/dag-viewer/memo.test.mjs b/tools/dag-viewer/memo.test.mjs
index 102baa17e..411c77ffb 100644
--- a/tools/dag-viewer/memo.test.mjs
+++ b/tools/dag-viewer/memo.test.mjs
@@ -104,6 +104,8 @@ test('each candidate sits inside its group, colored by origin, with θ, and an e
   assert.equal(call('memoClip', 'abcdef', 4), 'abc…');
   assert.ok(byId(elements, 'g3c5>g1'));
   assert.ok(byId(elements, 'g3c7>g6'));
+  // G5's three candidates all read G0: one edge, from the group.
+  assert.deepEqual(edgesOf(elements).filter((e) => e.data.source.startsWith('g5')).map((e) => e.data.id), ['g5>g0']);
   const cy = cytoscape(elements);
   assert.equal(cy.getElementById('g3').children().length, 8);
   assert.equal(cy.edges().length, edgesOf(elements).length);
@@ -118,18 +120,61 @@ test("Pass 2's pruned candidates are marked and counted on their group", () => {
   assert.ok(!call('memoStepElements', fixture(), 1, {}).some((e) => /pruned/.test(e.classes || '')));
 });
 
-test('a large group collapses to one count per origin and expands on request', () => {
+test('selected plan only leaves the plan\'s candidates and their groups, on the last step only', () => {
+  const elements = call('memoStepElements', fixture(), PASS2, { selectedOnly: true });
+  assert.deepEqual(nodesOf(elements).map((e) => e.data.id).sort(), ['g0', 'g0c0', 'g1', 'g1c0', 'g2', 'g2c1', 'g3', 'g3c5', 'g4', 'g4c0']);
+  assert.ok(edgesOf(elements).every((e) => !/g[56]/.test(e.data.target)));
+  // Earlier steps have no plan to filter by.
+  assert.equal(call('memoStepElements', fixture(), 1, { selectedOnly: true }).length, call('memoStepElements', fixture(), 1, {}).length);
+});
+
+test('hiding pruned candidates leaves out them, groups with none left, and the edges into those groups', () => {
+  const memo = fixture();
+  memo.steps[PASS2].groups[4].candidates[0].pruned = true;
+  const elements = call('memoStepElements', memo, PASS2, { hidePruned: true });
+  assert.deepEqual(nodesOf(elements).filter((e) => e.data.parent === 'g3').map((e) => e.data.id), ['g3c4', 'g3c5', 'g3c6', 'g3c7']);
+  assert.match(byId(elements, 'g3').data.label, /\(4 pruned by Pass 2, hidden\)/);
+  assert.ok(!byId(elements, 'g4') && !elements.some((e) => e.data.target === 'g4'));
+});
+
+test('a candidate\'s dimensions are its origin, sketch family, θ fields and window width', () => {
+  const step = fixture().steps[PASS2];
+  assert.deepEqual(call('memoCandidateDims', step.groups[3].candidates[5]), [['origin', 'Pass1'], ['sketch', 'Kll'], ['k', '1404']]);
+  assert.deepEqual(call('memoCandidateDims', step.groups[3].candidates[7]), [['origin', 'TumblingWindows']]);
+  assert.deepEqual(call('memoCandidateDims', step.groups[5].candidates[0]).at(-1), ['window_ms', '60000']);
+});
+
+test('a large group splits by its first varying dimension; a count drills into it', () => {
   const memo = fixture();
   const inG3 = (elements) => nodesOf(elements).filter((e) => e.data.parent === 'g3');
-  const collapsed = call('memoStepElements', memo, PASS2, { collapseAbove: 4 });
-  assert.deepEqual(inG3(collapsed).map((e) => e.data.label), ['7 Pass1\n✗ 4 pruned · ✓ selected', '1 TumblingWindows\n✚ 1 new']);
-  assert.match(byId(collapsed, 'g3').data.label, /click a count to expand/);
-  assert.match(byId(collapsed, 'g3opass1').classes, /chosen/);
-  assert.ok(byId(collapsed, 'g3otumbling_windows>g6'));
-  const open = call('memoStepElements', memo, PASS2, { collapseAbove: 4, expanded: [3] });
-  assert.equal(inG3(open).length, 8);
-  assert.match(byId(open, 'g3').data.label, /click the group to collapse/);
-  assert.equal(cytoscape(open).getElementById('g3').children().length, 8);
+  const split = call('memoStepElements', memo, PASS2, { collapseAbove: 4 });
+  assert.deepEqual(inG3(split).map((e) => e.data.label), ['7 Pass1\n✗ 4 pruned · ✓ selected', '1 TumblingWindows\n✚ 1 new']);
+  assert.match(byId(split, 'g3').data.label, /click a count to expand/);
+  assert.match(byId(split, 'g3b0').classes, /chosen/);
+  assert.ok(byId(split, 'g3b1>g6'));
+  // Pass1's 7 candidates still exceed 4, so they split by the next varying dimension, k.
+  const pass1 = [['origin', 'Pass1']];
+  const deeper = call('memoStepElements', memo, PASS2, { collapseAbove: 4, drill: { 3: { path: pass1 } } });
+  assert.deepEqual(inG3(deeper).map((e) => e.data.label.split('\n')[0]),
+    ['1 · k=26', '1 · k=52', '1 · k=132', '1 · k=269', '1 · k=547', '1 · k=1404', '1 · k=2863']);
+  assert.match(byId(deeper, 'g3').data.label, /click the group to go back\norigin=Pass1 \(7\)/);
+  // With room for all 7, the drilled group shows Pass1's candidates themselves.
+  const open = call('memoStepElements', memo, PASS2, { collapseAbove: 7, drill: { 3: { path: pass1 } } });
+  assert.deepEqual(inG3(open).map((e) => e.data.id), ['g3c0', 'g3c1', 'g3c2', 'g3c3', 'g3c4', 'g3c5', 'g3c6']);
+  assert.equal(cytoscape(open).getElementById('g3').children().length, 7);
+  // Drilled in, a candidate shows the dimensions that still tell the shown ones apart.
+  assert.equal(byId(open, 'g3c5').data.label.split('\n')[1], 'θ k=1404');
+});
+
+test('a group splits by the dimension chosen next; a candidate without it counts as "none", last', () => {
+  const g3 = fixture().steps[PASS2].groups[3];
+  const split = call('memoGroupDrill', g3.candidates, { path: [], next: 'k' }, 4);
+  assert.equal(split.dim, 'k');
+  assert.deepEqual(split.choices, ['origin', 'sketch', 'k']);
+  assert.deepEqual(split.buckets.map(([value, cs]) => [value, cs.length]),
+    [['26', 1], ['52', 1], ['132', 1], ['269', 1], ['547', 1], ['1404', 1], ['2863', 1], ['none', 1]]);
+  // A `next` that no longer varies falls back to the first that does.
+  assert.equal(call('memoGroupDrill', g3.candidates, { path: [['origin', 'Pass1']], next: 'origin' }, 4).dim, 'k');
 });
 
 test('the selected candidates are highlighted on the last step only', () => {
@@ -143,13 +188,13 @@ test('the selected candidates are highlighted on the last step only', () => {
   assert.ok(!call('memoStepElements', memo, PASS2, {}).some((e) => /chosen/.test(e.classes || '')));
 });
 
-test('a collapsed count marks only the selected candidate\'s edges', () => {
+test('a count marks only the selected candidate\'s edges', () => {
   const memo = fixture();
   // Another Pass1 candidate of G3 reads G6 instead of G1.
   memo.steps[PASS2].groups[3].candidates[6].children = [6];
   const elements = call('memoStepElements', memo, PASS2, { collapseAbove: 4 });
-  assert.match(byId(elements, 'g3opass1>g1').classes, /chosen/);
-  assert.equal(byId(elements, 'g3opass1>g6').classes, '');
+  assert.match(byId(elements, 'g3b0>g1').classes, /chosen/);
+  assert.equal(byId(elements, 'g3b0>g6').classes, '');
 });
 
 test('highlighting a query dims the groups it does not reach', () => {
@@ -178,6 +223,21 @@ test("Pass 2's logical edges into a candidate: each producer of the input group,
   assert.equal(input.edges[5], '✓ #5');
 });
 
+test("a candidate's physical variants as a timing × lifetime grid: which exist, which Stage 2 pruned, which the plan uses", () => {
+  const cell = (ids, pruned, selected) => ({ ids, pruned, selected });
+  const none = cell([], false, false);
+  assert.deepEqual(call('memoPhysicalGrid', fixtureDoc(), 3, 5), [[none, none, none], [cell([12], false, true), cell([13], false, false), cell([], true, false)]]);
+  // The Scan: both timings; the plan reads it at query time, not kept.
+  assert.deepEqual(call('memoPhysicalGrid', fixtureDoc(), 0, 0), [[cell([2], false, false), none, cell([3], false, false)], [cell([0], false, true), cell([1], false, false), cell([], true, false)]]);
+  assert.equal(call('memoPhysicalGrid', { memo: fixture() }, 0, 0), null);
+  // Drawn under each kept candidate's label with `physical`, not under a pruned one.
+  const elements = call('memoStepElements', fixture(), PASS2, { physical: fixtureDoc() });
+  assert.match(byId(elements, 'g3c5').data.grid, /^data:image\/svg\+xml;utf8,/);
+  assert.match(byId(elements, 'g3c5').classes, /withGrid/);
+  assert.equal(byId(elements, 'g3c0').data.grid, undefined);
+  assert.ok(byId(elements, 'g3c5').data.h > byId(call('memoStepElements', fixture(), PASS2, {}), 'g3c5').data.h);
+});
+
 test("a candidate's physical candidates list each input's physical edges with α^phys, the selected one marked", () => {
   const doc = fixtureDoc();
   const physical = call('memoPhysicalCandidates', doc, 4, 0);
diff --git a/tools/dag-viewer/server.py b/tools/dag-viewer/server.py
index 59c8a38fa..949490b0a 100644
--- a/tools/dag-viewer/server.py
+++ b/tools/dag-viewer/server.py
@@ -1,5 +1,5 @@
 #!/usr/bin/env python3
-"""Local server for the ASAPPlanner Stage Viewer: serves the page, writes the
+"""Local server for the ASAPPlanner Plan Viewer: serves the page, writes the
 example documents, and plans PlanningWorkload files with
 `asap_planner --run-until stage3 --format json`."""
 
@@ -252,7 +252,7 @@ def main() -> None:
         parser.error(f"{BINARY} does not exist; start without --skip-build")
     write_examples(args.regenerate)
     server = ThreadingHTTPServer((args.host, args.port), Handler)
-    print(f"ASAPPlanner Stage Viewer: http://{args.host}:{args.port}")
+    print(f"ASAPPlanner Plan Viewer: http://{args.host}:{args.port}")
     try:
         server.serve_forever()
     except KeyboardInterrupt:
diff --git a/tools/dag-viewer/stages.js b/tools/dag-viewer/stages.js
index 0e506c6b3..d58d61ec5 100644
--- a/tools/dag-viewer/stages.js
+++ b/tools/dag-viewer/stages.js
@@ -1,4 +1,4 @@
-// DOM-free logic of the Stage Viewer: checking an `asap-stage-pipeline/v2`
+// DOM-free logic of the Plan Viewer: checking an `asap-stage-pipeline/v2`
 // document (written by the `asap_planner` devtool), the selected plan's row,
 // and each drawn DAG (Stage 0's and Stage 3's plan) as cytoscape elements
 // with readable labels.
@@ -289,7 +289,7 @@ function validateStagePipeline(doc) {
 
 // A query's accuracy target (`AccuracyTarget` JSON: `accuracy_metric`,
 // `max_error`, `failure_probability`, `accuracy_scope`) as one line, e.g. "ε=0.01, δ=0.001
-// (rank)", "ε=0.01 (metric not set; default relative)" or "ε=0.05, δ=0.05
+// (rank)", "ε=0.01 (error metric not set; default relative)" or "ε=0.05, δ=0.05
 // (relative; groups ≥ 5% of records)"; "exact" for zero error with
 // certainty; "" for a malformed target. `defaultMetric` is the query's default
 // metric the document shows for a target without one. The scope is shown
@@ -299,7 +299,7 @@ function accuracyText(target, defaultMetric) {
   if (target.max_error === 0 && target.failure_probability === 0) return 'exact';
   const delta = target.failure_probability !== undefined && target.failure_probability !== null
     ? `, δ=${target.failure_probability}` : '';
-  const metric = target.accuracy_metric || `metric not set${defaultMetric ? `; default ${defaultMetric}` : ''}`;
+  const metric = target.accuracy_metric || `error metric not set${defaultMetric ? `; default ${defaultMetric}` : ''}`;
   const scope = scopeText(target.accuracy_scope);
   return `ε=${target.max_error}${delta} (${metric}${scope ? `; ${scope}` : ''})`;
 }
@@ -322,19 +322,7 @@ function acceptedText(queries) {
   return parts.length ? parts.join('; ') : null;
 }
 
-// Stage 3's outcome as the plan list's one row: the selected plan with its
-// cost per second (null when not costed or under cost model 3) and the
-// accuracy it accepted, or selection's error; null when Stage 3 did not run.
-function selectedPlanRow(doc) {
-  const stage3 = doc.stage3_plan_selection || {};
-  if (stage3.plan) {
-    return { status: 'selected', total: stage3.cost ? stage3.cost.cost_per_second : null, accepted: acceptedText(stage3.accepted_accuracy_per_query), reason: null };
-  }
-  if (stage3.error) return { status: 'no plan', total: null, accepted: null, reason: stage3.error };
-  return null;
-}
-
-// The plan list's header: why Stage 1 (Pass 1 or Pass 2) or Stage 2 failed,
+// The outcome line's failures and warnings: why Stage 1 (Pass 1 or Pass 2) or Stage 2 failed,
 // why selection failed, and the selection's warnings (e.g. a very large
 // peak memory with no declared memory capacity); "" when there is none.
 function planHeader(doc) {
@@ -362,16 +350,8 @@ function candidateCountsText(doc) {
     + ` → ${(doc.stage3_plan_selection || {}).plan ? 'plan selected' : 'no plan selected'}`;
 }
 
-// Whether Stage 3 checked accuracy guarantees (`accuracy_guarantees`), for
-// the plan list's header; "" for a document that does not say.
+// Whether Stage 3 checked accuracy guarantees (`accuracy_guarantees`).
 const ACCURACY_GUARANTEE_MODES = ['ignored', 'enforced'];
-function accuracyGuaranteesText(doc) {
-  return {
-    ignored: 'accuracy guarantees ignored: every output accepted, candidates compared on cost alone',
-    enforced: 'accuracy guarantees enforced',
-  }[doc.accuracy_guarantees] || '';
-}
-
 // The search behind the document and the size and times of Stage 3's
 // selection MILP, for the plan list's header, e.g. "candidate-connection
 // search · MILP 88 variables, 126 constraints · construction 1 ms, solve
@@ -743,18 +723,22 @@ function usageText(usage) {
     `${n(usage.peak_cpu_cores)} peak cores`].concat(latency ? [`latency ${latency}`] : []).join(' · ');
 }
 
-// The run's deployment capabilities (`DeploymentCapabilities` JSON) as one
-// line: "raw data not retained · query-time results not retained · every
-// summary the planner builds".
-function deploymentText(capabilities) {
-  if (!capabilities || typeof capabilities !== 'object') return '';
-  const summaries = Array.isArray(capabilities.supported_summaries)
-    ? `summaries: ${capabilities.supported_summaries.map((s) => `${s.family} (${(s.readouts || []).join(', ')})`).join(', ')}`
-    : 'every summary the planner builds';
-  return [capabilities.raw_data_retained === false ? 'raw data not retained' : 'raw data retained',
-    capabilities.query_time_results_retained ? 'query-time results retained' : 'query-time results not retained', summaries].join(' · ');
+// The planner's inputs besides the workload, as [name, value] rows: the
+// deployment's capabilities, whether Stage 3 enforced accuracy guarantees,
+// and the cost model Stage 3 priced the plan with.
+function settingsRows(doc) {
+  const c = doc.deployment_capabilities;
+  const cost = (doc.stage3_plan_selection || {}).cost;
+  const rows = c ? [
+    ['raw data', c.raw_data_retained === false ? 'not retained' : 'retained'],
+    ['query-time results', c.query_time_results_retained ? 'retained' : 'not retained'],
+    ['summaries', Array.isArray(c.supported_summaries)
+      ? c.supported_summaries.map((x) => `${x.summary_type} (${(x.readouts || []).join(', ')})`).join(', ') : 'every summary the planner builds'],
+  ] : [['deployment', 'not recorded']];
+  rows.push(['accuracy guarantees', { ignored: 'ignored: every output accepted, candidates compared on cost alone', enforced: 'enforced' }[doc.accuracy_guarantees] || 'not recorded']);
+  rows.push(['cost model', cost && cost.source ? cost.source : 'not recorded (no plan was costed)']);
+  return rows;
 }
-
 // The queries of a `PlanningWorkload` JSON, batch then repeating (the
 // planner's entry order): each query's text, how often it runs and its
 // accuracy target as text.
@@ -780,3 +764,11 @@ function planningWorkloadQueries(workload) {
 function isPlanningWorkload(value) {
   return !!value && typeof value === 'object' && !isStagePipelineDocument(value) && !!value.query_workload && typeof value.query_workload === 'object';
 }
+
+// Fits graph `cy` in its box, at most at 1.3× so that a small graph is not
+// blown up; the zoom buttons' home and the first drawing use it.
+function fitGraph(cy) {
+  if (!cy || typeof cy.fit !== 'function') return;
+  cy.fit(undefined, 16);
+  if (cy.zoom() > 1.3) { cy.zoom(1.3); cy.center(); }
+}
diff --git a/tools/dag-viewer/stages.test.mjs b/tools/dag-viewer/stages.test.mjs
index cbd4faf3d..abd9e00b9 100644
--- a/tools/dag-viewer/stages.test.mjs
+++ b/tools/dag-viewer/stages.test.mjs
@@ -79,17 +79,6 @@ test('summary types read as their algorithm or exact kind', () => {
   assert.deepEqual(call('stageNodeLines', chain, null), ['SummaryTumblingWindowChain', 'summary: Kll', 'tumbling windows of 24 h', 'per series']);
 });
 
-test('the plan row shows the plan\'s cost and accepted accuracy, or selection\'s error', () => {
-  const doc = fixture();
-  assert.deepEqual(call('selectedPlanRow', doc), {
-    status: 'selected', total: doc.stage3_plan_selection.cost.cost_per_second, accepted: 'q1: accepted rank (Kll)', reason: null,
-  });
-  doc.stage3_plan_selection = { plan: null, error: 'plan selection: no valid candidate', materialized_views: [] };
-  assert.deepEqual(call('selectedPlanRow', doc), { status: 'no plan', total: null, accepted: null, reason: 'plan selection: no valid candidate' });
-  assert.deepEqual(call('validateStagePipeline', doc), []);
-  assert.equal(call('selectedPlanRow', call('fillStagesNotRun', { stage3_plan_selection: null })), null);
-});
-
 test('the header shows why a stage failed and the selection\'s warnings', () => {
   assert.equal(call('planHeader', fixture()), '');
   const failed = {
diff --git a/tools/dag-viewer/test_viewer.py b/tools/dag-viewer/test_viewer.py
index 34116bc47..cde68379c 100644
--- a/tools/dag-viewer/test_viewer.py
+++ b/tools/dag-viewer/test_viewer.py
@@ -1,4 +1,4 @@
-"""Tests for the ASAPPlanner Stage Viewer: the stage-document functions in
+"""Tests for the ASAPPlanner Plan Viewer: the stage-document functions in
 stages.js and the page itself (app.js) run in V8 through py_mini_racer with
 a stub DOM, plus the page's files and the example list.
 
@@ -262,30 +262,22 @@ def setUp(self):
         self.js = stages_js()
         self.doc = example1()
 
-    def test_the_selected_plan_row_shows_its_cost_and_accepted_accuracy(self):
-        """The row shows the plan's cost per second and what Stage 3 accepted per query."""
-        row = self.js.call("selectedPlanRow", self.doc)
-        self.assertEqual(row, {"status": "selected", "total": self.doc["stage3_plan_selection"]["cost"]["cost_per_second"],
-                               "accepted": "q1: accepted exact; q2: accepted exact", "reason": None})
-
-    def test_a_failed_selection_row_shows_the_error(self):
-        """Without a plan the row shows selection's error, as does the header."""
+    def test_a_failed_selection_shows_the_error(self):
+        """Without a plan the outcome line shows selection's error."""
         self.doc["stage3_plan_selection"] = {"plan": None, "error": "no data workload", "materialized_views": []}
-        self.assertEqual(self.js.call("selectedPlanRow", self.doc),
-                         {"status": "no plan", "total": None, "accepted": None, "reason": "no data workload"})
         self.assertEqual(self.js.call("planHeader", self.doc), "selection failed: no data workload")
 
     def test_accuracy_text_reads_the_target_json(self):
         """An accuracy target reads as its ε, δ, metric and scope."""
         text = lambda target: self.js.call("accuracyText", target)
         self.assertEqual(text({"max_error": 0.0, "failure_probability": 0.0, "accuracy_scope": "whole_result"}), "exact")
-        self.assertEqual(text({"max_error": 0.01, "accuracy_scope": "whole_result"}), "ε=0.01 (metric not set)")
+        self.assertEqual(text({"max_error": 0.01, "accuracy_scope": "whole_result"}), "ε=0.01 (error metric not set)")
         self.assertEqual(text({"accuracy_metric": "rank", "max_error": 0.01, "failure_probability": 0.001, "accuracy_scope": "whole_result"}), "ε=0.01, δ=0.001 (rank)")
-        self.assertEqual(self.js.call("accuracyText", {"max_error": 0.01}, "relative"), "ε=0.01 (metric not set; default relative)")
+        self.assertEqual(self.js.call("accuracyText", {"max_error": 0.01}, "relative"), "ε=0.01 (error metric not set; default relative)")
         self.assertEqual(text(None), "")
         self.assertEqual(text({"accuracy_metric": "relative", "max_error": 0.05, "failure_probability": 0.05, "accuracy_scope": "per_value"}), "ε=0.05, δ=0.05 (relative; per value)")
         self.assertEqual(text({"accuracy_metric": "relative", "max_error": 0.05, "failure_probability": 0.05, "accuracy_scope": {"groups_with_record_share_at_least": 0.05}}), "ε=0.05, δ=0.05 (relative; groups ≥ 5% of records)")
-        self.assertEqual(text({"max_error": 0.05, "accuracy_scope": {"groups_with_record_share_at_least": 0.01}}), "ε=0.05 (metric not set; groups ≥ 1% of records)")
+        self.assertEqual(text({"max_error": 0.05, "accuracy_scope": {"groups_with_record_share_at_least": 0.01}}), "ε=0.05 (error metric not set; groups ≥ 1% of records)")
 
     def test_counts_line_counts_each_stages_candidates(self):
         """The counts line counts the Pass 2 memo's candidates, the physical
@@ -432,15 +424,16 @@ def test_document_is_valid_and_holds_one_plan_for_both_queries(self):
         self.assertEqual(len(self.doc["stage3_plan_selection"]["plan"]["roots"]), 2)
 
     def test_guarantees_are_enforced_by_default_and_the_header_says_which(self):
-        """The header says whether the run enforced accuracy guarantees
+        """The settings say whether the run enforced accuracy guarantees
         (the default) or ignored them."""
+        guarantees = lambda doc: dict(self.js.call("settingsRows", doc))["accuracy guarantees"]
         self.assertEqual(self.doc["accuracy_guarantees"], "enforced")
-        self.assertEqual(self.js.call("accuracyGuaranteesText", self.doc), "accuracy guarantees enforced")
+        self.assertEqual(guarantees(self.doc), "enforced")
         ignored = planned(promql_workload(["sum(rate(a[1m]))", "topk(5, rate(b[1m]))"], ["a", "b"]), ignore_accuracy_guarantees=True)
         self.assertEqual(ignored["accuracy_guarantees"], "ignored")
         self.assertEqual(self.js.call("validateStagePipeline", ignored), [])
-        self.assertTrue(self.js.call("accuracyGuaranteesText", ignored).startswith("accuracy guarantees ignored"))
-        self.assertEqual(self.js.call("accuracyGuaranteesText", {}), "")
+        self.assertTrue(guarantees(ignored).startswith("ignored"))
+        self.assertEqual(guarantees({}), "not recorded")
 
     def test_header_names_the_search_and_its_milp(self):
         """The header names the candidate-connection search and its MILP's
@@ -546,8 +539,12 @@ def test_usage_and_deployment_lines(self):
         """The usage and deployment lines read the plan's cost and capabilities."""
         cost = self.doc["stage3_plan_selection"]["cost"]
         self.assertIn("peak cores", self.js.call("usageText", cost["usage"]))
-        self.assertEqual(self.js.call("deploymentText", NO_RAW_DATA), "raw data not retained · query-time results not retained · every summary the planner builds")
-        self.assertTrue(self.js.call("deploymentText", self.doc["deployment_capabilities"]).startswith("raw data retained · "))
+        no_raw = dict(self.js.call("settingsRows", {"deployment_capabilities": NO_RAW_DATA}))
+        self.assertEqual([no_raw["raw data"], no_raw["query-time results"], no_raw["summaries"]], ["not retained", "not retained", "every summary the planner builds"])
+        rows = dict(self.js.call("settingsRows", self.doc))
+        self.assertEqual(rows["raw data"], "retained")
+        self.assertTrue(rows["summaries"].startswith("Cms (Total), "))
+        self.assertEqual(rows["cost model"], cost["source"])
 
     def test_planning_workload_queries_read_the_workload_json(self):
         """A PlanningWorkload is recognised and its queries listed."""
@@ -694,7 +691,7 @@ def test_no_stage_documents_are_committed(self):
     __on: {}, addEventListener(type, fn) { this.__on[type] = fn; }, setAttribute() {}, click() {}, querySelectorAll() { return []; } };
   return __els[id];
 }
-var document = { getElementById: __el, documentElement: {}, body: { classList: { add() {}, remove() {} } }, addEventListener() {} };
+var document = { getElementById: __el, querySelectorAll() { return []; }, documentElement: {}, body: { classList: { add() {}, remove() {} } }, addEventListener() {} };
 var window = { matchMedia() { return { addEventListener() {} }; } };
 var location = { hash: '', search: '', pathname: '/' };
 var history = { replaceState(a, b, h) { location.hash = h; } };
@@ -753,14 +750,13 @@ def test_doc_parameter_opens_one_document_with_stage0_and_the_plan(self):
         row with its cost and accepted accuracy, the counts and the header."""
         js = self.page("?doc=examples/e1.json", {"examples/e1.json": json.dumps(example1())})
         self.assertIn("Candidates per stage", js.eval("__els.counts.textContent"))
-        self.assertIn("✓ selected", self.text(js, "rank"))
-        self.assertIn("accepted exact", self.text(js, "rank"))
         lane = self.text(js, "lane1-meta")
         self.assertRegex(lane, r"^\d+ nodes · cost [\d.]+ per second · q1: accepted exact")
         self.assertIn("Stage 3 usage: CPU", lane)
-        rank_meta = js.eval("__els['rank-meta'].textContent")
-        self.assertIn("accuracy guarantees enforced", rank_meta)
-        self.assertIn("candidate-connection search · MILP", rank_meta)
+        outcome = js.eval("__els.outcome.textContent")
+        self.assertTrue(outcome.startswith("plan selected · "))
+        self.assertIn("candidate-connection search · MILP", outcome)
+        self.assertIn("accuracy guaranteesenforced", self.text(js, "deployment"))
         self.assertEqual(len(lane_nodes(self.ev(js, "__rendered.cy1"))), len(example1()["stage3_plan_selection"]["plan"]["nodes"]))
         self.assertGreater(len(self.ev(js, "__rendered.cy0")), 0)
 
@@ -770,9 +766,8 @@ def test_a_failed_selection_shows_stage0_and_the_error(self):
         doc = example1()
         doc["stage3_plan_selection"] = {"plan": None, "error": "no valid candidate", "materialized_views": []}
         js = self.page("?doc=d.json", {"d.json": json.dumps(doc)})
-        self.assertIn("no planno valid candidate", self.text(js, "rank"))
         self.assertEqual(js.eval("__els['lane1-meta'].textContent"), "no plan: no valid candidate")
-        self.assertIn("selection failed: no valid candidate", js.eval("__els['rank-meta'].textContent"))
+        self.assertTrue(js.eval("__els.outcome.textContent").startswith("no plan selected: no valid candidate"))
         self.assertFalse(js.eval("'cy1' in __rendered"))
         self.assertGreater(len(self.ev(js, "__rendered.cy0")), 0)
         self.assertEqual(js.eval("__els['views-meta'].textContent"), "no plan selected")
@@ -781,7 +776,7 @@ def test_a_stage1_failure_shows_stage0_and_the_error(self):
         """A Stage 1 failure still draws Stage 0 and shows the error."""
         doc = planned(json.loads(EXAMPLE3A.read_text()), NO_RAW_DATA)
         js = self.page("?doc=d.json", {"d.json": json.dumps(doc)})
-        self.assertIn("Stage 1 failed: deployment capabilities", js.eval("__els['rank-meta'].textContent"))
+        self.assertIn("Stage 1 failed: deployment capabilities", js.eval("__els.outcome.textContent"))
         self.assertGreater(len(self.ev(js, "__rendered.cy0")), 0)
 
     def test_examples_become_tabs_and_the_hash_picks_one(self):
@@ -808,7 +803,7 @@ def test_a_document_fills_the_data_workload_and_says_why_the_plan_has_no_views(s
         js = self.page("?doc=s.json", {"s.json": json.dumps(doc)})
         self.assertIn("q1, q2", self.text(js, "dataSources"))
         self.assertIn("ingesting", js.eval("__els.dataArrival.textContent"))
-        self.assertIn("raw data retained", js.eval("__els.deployment.textContent"))
+        self.assertIn("raw dataretained", self.text(js, "deployment"))
         self.assertIn("every 10 s · predictable", self.text(js, "queries"))
         self.assertIn(f"no installable plan: {doc['stage3_plan_selection']['materialized_views_error']}", self.text(js, "views-meta"))
 
@@ -854,9 +849,20 @@ def test_an_invalid_document_shows_an_error(self):
         js = self.page("?doc=bad.json", {"bad.json": json.dumps({"format": "nope"})})
         self.assertIn("Could not load", js.eval("__els.queries.innerHTML"))
 
-    def memo_page(self, doc=None):
-        """The p90 fixture document (or `doc`) on the page."""
-        return self.page("?doc=m.json", {"m.json": json.dumps(doc or p90_kll())})
+    def memo_page(self, doc=None, show_pruned=True):
+        """The p90 fixture document (or `doc`) on the page, with Pass 2's
+        pruned candidates shown unless `show_pruned` is false."""
+        js = self.page("?doc=m.json", {"m.json": json.dumps(doc or p90_kll())})
+        if show_pruned:
+            js.eval("__els.memoShowPruned.checked = true; __els.memoShowPruned.__on.change()")
+        return js
+
+    def test_the_memo_view_hides_pruned_candidates_until_asked(self):
+        """Pass 2's pruned candidates are hidden until the box is ticked."""
+        js = self.memo_page(show_pruned=False)
+        self.assertEqual(self.memo_ids(js, "g3"), ["g3c4", "g3c5", "g3c6", "g3c7"])
+        js.eval("__els.memoShowPruned.checked = true; __els.memoShowPruned.__on.change()")
+        self.assertEqual(len(self.memo_ids(js, "g3")), 8)
 
     def tap_memo(self, js, element_id):
         js.eval(f"__taps['cyMemo node']({{ target: {{ data() {{ return __rendered.cyMemo.find((e) => e.data.id === {json.dumps(element_id)}).data; }} }} }})")
@@ -871,14 +877,14 @@ def test_a_document_without_a_memo_hides_the_memo_view(self):
         js = self.page("?doc=e1.json", {"e1.json": json.dumps(doc)})
         self.assertTrue(js.eval("__els.memoView.hidden"))
         self.assertFalse(js.eval("'cyMemo' in __rendered"))
-        self.assertIn("✓ selected", self.text(js, "rank"))
+        self.assertTrue(js.eval("__els.outcome.textContent").startswith("plan selected"))
 
     def test_the_memo_view_has_a_tab_per_step_and_opens_on_the_last(self):
         """The memo view has a tab per step and opens on the last."""
         js = self.memo_page()
         self.assertFalse(js.eval("__els.memoView.hidden"))
         tabs = js.eval("__els.memoTabs.innerHTML")
-        self.assertEqual(re.findall(r">([^<]+)</button>", tabs), ["Stage 0, the frontends' DAG hash-consed", "Stage 1, Pass 1", "Stage 1, Pass 2"])
+        self.assertEqual(re.findall(r">([^<]+)</button>", tabs), ["Stage 0", "Stage 1 · Pass 1", "Stage 1 · Pass 2"])
         self.assertIn('data-step="2" aria-pressed="true"', tabs)
         meta = self.text(js, "memoView-meta")
         self.assertIn("7 groups (+2) · 17 candidates (+5)", meta)
@@ -889,19 +895,28 @@ def test_the_memo_view_has_a_tab_per_step_and_opens_on_the_last(self):
         self.assertIn("3 groups · 0 candidates", self.text(js, "memoView-meta"))
         self.assertIn("shown on the last tab", self.text(js, "memoView-meta"))
 
-    def test_tapping_a_count_expands_its_group_and_the_group_collapses_it(self):
-        """Tapping an origin count expands its group; tapping the group collapses it."""
+    def test_tapping_counts_drills_down_to_candidates_and_the_group_goes_back(self):
+        """Tapping a count drills into it until the group shows candidates
+        (at most 12); the details offer the dimensions to split by; tapping
+        the group goes back one level at a time."""
         doc = example1()
         js = self.memo_page(doc)
         pass2 = doc["memo"]["steps"][-1]
         big = next(g for g in pass2["groups"] if g["candidate_count"] > 12)
-        counts = self.memo_ids(js, f"g{big['id']}")
-        self.assertEqual(len(counts), len([n for n in big["candidate_count_by_origin"].values() if n]))
-        self.tap_memo(js, counts[0])
-        self.assertEqual(len(self.memo_ids(js, f"g{big['id']}")), big["candidate_count"])
+        group = f"g{big['id']}"
+        levels = [self.memo_ids(js, group)]
+        self.assertTrue(all("b" in i for i in levels[0]))
+        self.tap_memo(js, group)
+        self.assertIn('data-dim="', js.eval("__els.details.innerHTML"))
+        while "b" in levels[-1][0]:
+            self.tap_memo(js, levels[-1][0])
+            levels.append(self.memo_ids(js, group))
+        self.assertTrue(all("c" in i for i in levels[-1]))
+        self.assertLessEqual(len(levels[-1]), 12)
         self.assertIn(f"Memo group G{big['id']}", self.text(js, "details"))
-        self.tap_memo(js, f"g{big['id']}")
-        self.assertEqual(self.memo_ids(js, f"g{big['id']}"), counts)
+        for level in reversed(levels[:-1]):
+            self.tap_memo(js, group)
+            self.assertEqual(self.memo_ids(js, group), level)
 
     def test_tapping_a_candidate_lists_its_logical_edges_and_physical_candidates(self):
         """Tapping a memo candidate shows its θ and required accuracy, its
diff --git a/tools/dag-viewer/workload-sets.js b/tools/dag-viewer/workload-sets.js
index 28bf710da..21ae735a8 100644
--- a/tools/dag-viewer/workload-sets.js
+++ b/tools/dag-viewer/workload-sets.js
@@ -77,7 +77,7 @@
     }
     $('setsServer').textContent = `planning ${entry.id}…`;
     sqlTables(entry.file, workload)
-      .then((tables) => window.StageViewer.planWorkload(workload, set.deployment_capabilities || null, source, story, set.cost_model || null, set.accuracy_guarantees || null, tables))
+      .then((tables) => window.PlanViewer.planWorkload(workload, set.deployment_capabilities || null, source, story, set.cost_model || null, set.accuracy_guarantees || null, tables))
       .then(() => { $('setsServer').textContent = 'planned by the local server'; })
       .catch((err) => { $('setsServer').textContent = `the server could not plan ${entry.id}: ${err.message}`; });
   }