infinity-harness 2.3.0 → 2.4.0

package/src/ui/dashboard.ts

@@ -39,6 +39,8 @@ import { getPhaseOrder } from "../core/phases.ts";
 import { statusGlyph } from "./widget.ts";
 import { UNICODE_GLYPHS } from "./theme.ts";
 import { groupPlan, type PlanGoalGroup, type PlanSprintGroup } from "./planTree.ts";
+import { defaultDisplay, normalizeDisplay } from "./display.ts";
+import type { DisplayPolicy } from "../core/types.ts";
 
 export type DashboardState = {
   list: FeatureList;
@@ -59,6 +61,11 @@ export type DashboardState = {
   sessions?: number | null;
   /** Which goal pass this is, out of how many. */
   goalPass?: { current: number; max: number } | null;
+  /**
+   * What this reader has asked to see — the same policy the terminal widget
+   * reads, so a level turned off in one is off in the other.
+   */
+  display?: DisplayPolicy | null;
 };
 
 // ── escaping ────────────────────────────────────────────────────────────────
@@ -492,7 +499,8 @@ function depLabel(task: FlatTask, indexByKey: ReadonlyMap<string, number>): stri
  * cannot fit, so hiding four of the five plan levels here made it a worse copy
  * of the widget rather than the place you go for the full picture.
  */
-function renderSubtasks(task: FlatTask): string {
+function renderSubtasks(task: FlatTask, mode: DisplayPolicy["levels"]["subtask"], active: boolean): string {
+  if (mode === "none" || (mode === "active" && !active)) return "";
   const subs = Array.isArray(task.subtasks) ? task.subtasks : [];
   if (subs.length === 0) return "";
   const items = subs
@@ -506,7 +514,11 @@ function renderSubtasks(task: FlatTask): string {
   return `<ul class="subs">${items}</ul>`;
 }
 
-function renderTaskRow(task: FlatTask, indexByKey: ReadonlyMap<string, number>): string {
+function renderTaskRow(
+  task: FlatTask,
+  indexByKey: ReadonlyMap<string, number>,
+  display: DisplayPolicy,
+): string {
   const status = task.status;
   const cls = STATUS_CLASS[status];
   const isActive = status === "in_progress" || status === "rework";
@@ -522,9 +534,9 @@ function renderTaskRow(task: FlatTask, indexByKey: ReadonlyMap<string, number>):
       <div class="task-line">
         <span class="task-desc">${esc(task.description || task.compositeKey)}</span>
         ${difficulty}
-        ${depLabel(task, indexByKey)}
+        ${display.dependencies ? depLabel(task, indexByKey) : ""}
       </div>
-      ${renderSubtasks(task)}
+      ${renderSubtasks(task, display.levels.subtask, isActive)}
     </td>
     <td class="cell-status"><span class="pill pill-${cls}">${esc(STATUS_LABEL[status])}</span></td>
   </tr>`;
@@ -536,6 +548,7 @@ function renderFeature(
   indexByKey: ReadonlyMap<string, number>,
   sprintName: string | null,
   goalName: string | null,
+  display: DisplayPolicy,
 ): string {
   const counts = countByStatus(tasks);
   const total = tasks.length;
@@ -547,14 +560,23 @@ function renderFeature(
     feature.passes === true ? `<span class="chip chip-complete">verified</span>` : "",
   ].join("");
 
-  const body = total
-    ? `<div class="table-wrap">
+  const body = !display.levels.task
+    ? ""
+    : total
+      ? `<div class="table-wrap">
       <table class="tasks">
         <thead><tr><th scope="col" class="cell-n">#</th><th scope="col">Task</th><th scope="col" class="cell-status">Status</th></tr></thead>
-        <tbody>${tasks.map((t) => renderTaskRow(t, indexByKey)).join("")}</tbody>
+        <tbody>${tasks.map((t) => renderTaskRow(t, indexByKey, display)).join("")}</tbody>
       </table>
     </div>`
-    : `<p class="empty-inline">No tasks planned for this feature yet.</p>`;
+      : `<p class="empty-inline">No tasks planned for this feature yet.</p>`;
+
+  const criteria =
+    display.criteria && Array.isArray(feature.criteria) && feature.criteria.length
+      ? `<ul class="criteria">${feature.criteria
+          .map((c) => `<li>${esc(String(c))}</li>`)
+          .join("")}</ul>`
+      : "";
 
   return `<section class="card feature${complete ? " is-complete" : ""}">
   <div class="feature-head">
@@ -564,11 +586,12 @@ function renderFeature(
       ${chips}
     </div>
     <div class="feature-progress">
-      <span class="feature-count mono">${esc(String(counts.complete))}/${esc(String(total))}</span>
+      ${display.counts ? `<span class="feature-count mono">${esc(String(counts.complete))}/${esc(String(total))}</span>` : ""}
       ${meter(counts, total)}
     </div>
   </div>
   ${feature.description ? `<p class="feature-desc">${esc(feature.description)}</p>` : ""}
+  ${criteria}
   ${body}
 </section>`;
 }
@@ -585,9 +608,10 @@ function renderGoalGroup(
   tasksByFeature: ReadonlyMap<string, FlatTask[]>,
   indexByKey: ReadonlyMap<string, number>,
   show: { showGoal: boolean; showSprints: boolean },
+  display: DisplayPolicy,
 ): string {
   const sprints = group.sprints
-    .map((sg) => renderSprintGroup(sg, tasksByFeature, indexByKey, show.showSprints))
+    .map((sg) => renderSprintGroup(sg, tasksByFeature, indexByKey, show.showSprints, display))
     .join("");
 
   if (!show.showGoal || !group.goal) return sprints;
@@ -597,7 +621,7 @@ function renderGoalGroup(
     <span class="tier-kind">goal</span>
     <span class="tier-name">${esc(group.goal.title ?? group.goal.id ?? "")}</span>
     <span class="mono faint">${esc(group.goal.id ?? "")}</span>
-    <span class="tier-count mono">${esc(String(group.done))}/${esc(String(group.total))}</span>
+    ${display.counts ? `<span class="tier-count mono">${esc(String(group.done))}/${esc(String(group.total))}</span>` : ""}
   </summary>
   <div class="tier-body">${sprints}</div>
 </details>`;
@@ -608,10 +632,16 @@ function renderSprintGroup(
   tasksByFeature: ReadonlyMap<string, FlatTask[]>,
   indexByKey: ReadonlyMap<string, number>,
   showSprints: boolean,
+  display: DisplayPolicy,
 ): string {
-  const features = group.features
-    .map((f) => renderFeature(f, tasksByFeature.get(f.id) ?? [], indexByKey, null, null))
-    .join("");
+  const features = display.levels.feature
+    ? group.features
+        .map((f) => renderFeature(f, tasksByFeature.get(f.id) ?? [], indexByKey, null, null, display))
+        .join("")
+    : // Hiding the feature card must not hide its tasks: they move up into the
+      // sprint, which is what "hide features" has to mean on a page whose whole
+      // job is to show the plan.
+      renderLooseTasks(group.features.flatMap((f) => tasksByFeature.get(f.id) ?? []), indexByKey, display);
 
   if (!showSprints || !group.sprint) return features;
 
@@ -620,12 +650,29 @@ function renderSprintGroup(
     <span class="tier-kind">sprint</span>
     <span class="tier-name">${esc(group.sprint.name ?? group.sprint.id ?? "")}</span>
     <span class="mono faint">${esc(group.sprint.id ?? "")}</span>
-    <span class="tier-count mono">${esc(String(group.done))}/${esc(String(group.total))}</span>
+    ${display.counts ? `<span class="tier-count mono">${esc(String(group.done))}/${esc(String(group.total))}</span>` : ""}
   </summary>
   <div class="tier-body">${features}</div>
 </details>`;
 }
 
+/** Tasks with no feature card above them, for the templates that hide features. */
+function renderLooseTasks(
+  tasks: readonly FlatTask[],
+  indexByKey: ReadonlyMap<string, number>,
+  display: DisplayPolicy,
+): string {
+  if (!display.levels.task || tasks.length === 0) return "";
+  return `<section class="card feature">
+  <div class="table-wrap">
+    <table class="tasks">
+      <thead><tr><th scope="col" class="cell-n">#</th><th scope="col">Task</th><th scope="col" class="cell-status">Status</th></tr></thead>
+      <tbody>${tasks.map((t) => renderTaskRow(t, indexByKey, display)).join("")}</tbody>
+    </table>
+  </div>
+</section>`;
+}
+
 function renderEmptyPlan(phase: Phase | null): string {
   const where = phase ? `The harness is in ${esc(phase)}.` : "The harness has not started a phase yet.";
   return `<section class="card empty">
@@ -858,6 +905,11 @@ body{
 .alert-active{color:var(--t-active);background:rgba(var(--rgb-active),.10);border-color:rgba(var(--rgb-active),.28)}
 .alert-quiet{color:var(--muted);background:var(--surface-2);border-color:var(--border)}
 
+/* -- acceptance criteria -------------------------------------------------- */
+.criteria{margin:10px 0 0;padding:0 0 0 18px;color:var(--muted);font-size:13px}
+.criteria li{margin:3px 0;overflow-wrap:anywhere}
+.criteria li::marker{color:var(--t-accent)}
+
 /* -- gate ----------------------------------------------------------------- */
 .gate-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
 .gate-phase{font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;overflow-wrap:anywhere}
@@ -1134,14 +1186,21 @@ export function renderDashboard(state: DashboardState): string {
   // chips on a feature card — throws away the only structure that tells you
   // whether the run is nearly done with something or scattered across
   // everything.
+  const display = normalizeDisplay(state.display ?? defaultDisplay());
   const groups = groupPlan(list);
   const body = features.length
     ? groups
         .map((group) =>
-          renderGoalGroup(group, tasksByFeature, indexByKey, {
-            showGoal: goals.length > 0,
-            showSprints: sprints.length > 0,
-          }),
+          renderGoalGroup(
+            group,
+            tasksByFeature,
+            indexByKey,
+            {
+              showGoal: display.levels.goal && goals.length > 0,
+              showSprints: display.levels.sprint && sprints.length > 0,
+            },
+            display,
+          ),
         )
         .join("")
     : renderEmptyPlan(state.phase);
@@ -1168,14 +1227,18 @@ export function renderDashboard(state: DashboardState): string {
 <div id="app">
 <div class="page">
 ${renderMasthead(state.phase, paused, progress.percent, state.baseRevision, badges)}
-${renderGoals(goals)}
-${renderRail(state.phase, state.enabledPhases, paused)}
-${renderAlerts(counts, paused, state.retries, gate, {
-  awaitingApproval: state.awaitingApproval ?? null,
-  sessions: state.sessions ?? null,
-  goalPass: state.goalPass ?? null,
-})}
-${renderProgress(counts, progress.tasksTotal, progress.featuresDone, progress.featuresTotal)}
+${display.levels.goal ? renderGoals(goals) : ""}
+${display.rail ? renderRail(state.phase, state.enabledPhases, paused) : ""}
+${
+  display.alerts
+    ? renderAlerts(counts, paused, state.retries, gate, {
+        awaitingApproval: state.awaitingApproval ?? null,
+        sessions: state.sessions ?? null,
+        goalPass: state.goalPass ?? null,
+      })
+    : ""
+}
+${display.progress ? renderProgress(counts, progress.tasksTotal, progress.featuresDone, progress.featuresTotal) : ""}
 ${renderGate(gate)}
 ${body}
 <footer class="foot">

package/src/ui/display.ts

@@ -0,0 +1,267 @@
+/**
+ * infinity-harness — display templates: what the surfaces actually draw.
+ *
+ * The plan has five levels, and shipping all five to everyone was the wrong
+ * answer for the same reason shipping two was: two people watching the same
+ * run want different things on screen. One works in sprints and never opens a
+ * subtask. The next has no sprints at all and lives in the subtask list. A run
+ * on a forty-task plan wants the shape; a run on one feature wants the detail.
+ *
+ * So the levels are a setting, three templates cover the common shapes, and
+ * anything else is a template the person builds and names. The terminal widget
+ * and the web dashboard read the same one, so what you configure once is what
+ * you see in both.
+ *
+ * Templates live with the *person* — `~/.pi/agent/infinity-harness/` — because
+ * how you like to read a plan does not change when you change project.
+ */
+
+import type { DisplayPolicy } from "../core/types.ts";
+import { userDisplayPath } from "../core/paths.ts";
+import { readJsonSafe, writeJsonAtomic, ensureDir } from "../core/fsx.ts";
+import { dirname } from "node:path";
+
+export type DisplayTemplate = {
+  id: string;
+  name: string;
+  description: string;
+  builtIn: boolean;
+  policy: DisplayPolicy;
+  savedAt?: string;
+};
+
+/** Everything on, at a size a terminal can hold. */
+export function defaultDisplay(): DisplayPolicy {
+  return {
+    preset: "focus",
+    levels: { goal: true, sprint: true, feature: true, task: true, subtask: "active" },
+    counts: true,
+    dependencies: true,
+    rail: true,
+    progress: true,
+    alerts: true,
+    criteria: true,
+    taskWindow: 9,
+  };
+}
+
+const focus: DisplayPolicy = defaultDisplay();
+
+const everything: DisplayPolicy = {
+  ...defaultDisplay(),
+  preset: "everything",
+  levels: { goal: true, sprint: true, feature: true, task: true, subtask: "all" },
+  taskWindow: 14,
+};
+
+/**
+ * The shape of the run, without the work.
+ *
+ * For a plan too big to read: goals and sprints and features with their
+ * counts, and no tasks at all. You come here to see which branch is stuck.
+ */
+const overview: DisplayPolicy = {
+  ...defaultDisplay(),
+  preset: "overview",
+  levels: { goal: true, sprint: true, feature: true, task: false, subtask: "none" },
+  dependencies: false,
+  criteria: false,
+  taskWindow: 12,
+};
+
+/**
+ * The work, and nothing else.
+ *
+ * For someone who already knows the plan and wants the next thing to do.
+ * No grouping rows, no meters, no rail.
+ */
+const worklist: DisplayPolicy = {
+  ...defaultDisplay(),
+  preset: "worklist",
+  levels: { goal: false, sprint: false, feature: false, task: true, subtask: "active" },
+  counts: false,
+  rail: false,
+  progress: true,
+  alerts: true,
+  criteria: false,
+  taskWindow: 12,
+};
+
+export const BUILTIN_DISPLAYS: DisplayTemplate[] = [
+  {
+    id: "focus",
+    name: "focus",
+    description: "The default: every level, with subtasks on the task being worked.",
+    builtIn: true,
+    policy: focus,
+  },
+  {
+    id: "everything",
+    name: "everything",
+    description: "All five levels, every subtask on every task, and a taller window.",
+    builtIn: true,
+    policy: everything,
+  },
+  {
+    id: "overview",
+    name: "overview",
+    description: "Goals, sprints and features with their counts. No tasks — the shape, not the work.",
+    builtIn: true,
+    policy: overview,
+  },
+  {
+    id: "worklist",
+    name: "worklist",
+    description: "Tasks only. No grouping rows, no rail — for when you already know the plan.",
+    builtIn: true,
+    policy: worklist,
+  },
+];
+
+export function builtInDisplay(id: string): DisplayTemplate | null {
+  return BUILTIN_DISPLAYS.find((d) => d.id === id) ?? null;
+}
+
+// ── the saved store ─────────────────────────────────────────────────────────
+
+type SavedStore = { version: string; displays: DisplayTemplate[] };
+
+export function slugify(name: string): string {
+  return String(name ?? "")
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 48);
+}
+
+export function loadSavedDisplays(env?: NodeJS.ProcessEnv): DisplayTemplate[] {
+  const store = readJsonSafe<SavedStore | null>(userDisplayPath(env), null);
+  const list = Array.isArray(store?.displays) ? store.displays : [];
+  return list
+    .filter((d): d is DisplayTemplate => typeof d?.id === "string" && typeof d?.name === "string")
+    .map((d) => ({ ...d, builtIn: false, policy: normalizeDisplay(d.policy) }));
+}
+
+export function listDisplays(env?: NodeJS.ProcessEnv): DisplayTemplate[] {
+  return [...BUILTIN_DISPLAYS, ...loadSavedDisplays(env)];
+}
+
+export function findDisplay(id: string, env?: NodeJS.ProcessEnv): DisplayTemplate | null {
+  return listDisplays(env).find((d) => d.id === id) ?? null;
+}
+
+export type SaveResult = { ok: boolean; error: string | null; template?: DisplayTemplate };
+
+export function saveDisplay(
+  input: { name: string; description?: string; policy: DisplayPolicy },
+  env?: NodeJS.ProcessEnv,
+): SaveResult {
+  const name = String(input.name ?? "").trim();
+  if (!name) return { ok: false, error: "A template needs a name." };
+  const id = slugify(name);
+  if (!id) return { ok: false, error: `"${name}" has no letters or digits in it.` };
+  if (builtInDisplay(id)) {
+    return { ok: false, error: `"${name}" is a built-in template. Pick another name.` };
+  }
+
+  const policy = { ...normalizeDisplay(input.policy), preset: id };
+  const template: DisplayTemplate = {
+    id,
+    name,
+    description: (input.description ?? "").trim() || describeDisplay(policy),
+    builtIn: false,
+    policy,
+    savedAt: new Date().toISOString(),
+  };
+
+  const existing = loadSavedDisplays(env).filter((d) => d.id !== id);
+  const path = userDisplayPath(env);
+  try {
+    ensureDir(dirname(path));
+    writeJsonAtomic(path, { version: "1", displays: [...existing, template] } satisfies SavedStore);
+  } catch (e) {
+    return { ok: false, error: e instanceof Error ? e.message : String(e) };
+  }
+  return { ok: true, error: null, template };
+}
+
+export function deleteDisplay(id: string, env?: NodeJS.ProcessEnv): SaveResult {
+  if (builtInDisplay(id)) return { ok: false, error: "Built-in templates cannot be deleted." };
+  const remaining = loadSavedDisplays(env).filter((d) => d.id !== id);
+  const path = userDisplayPath(env);
+  try {
+    ensureDir(dirname(path));
+    writeJsonAtomic(path, { version: "1", displays: remaining } satisfies SavedStore);
+  } catch (e) {
+    return { ok: false, error: e instanceof Error ? e.message : String(e) };
+  }
+  return { ok: true, error: null };
+}
+
+// ── normalising ─────────────────────────────────────────────────────────────
+
+const SUBTASK_MODES = new Set(["none", "active", "all"]);
+
+/**
+ * Repair a policy read from disk.
+ *
+ * Every field is read on every render, in a lifecycle hook, so a hand-edited
+ * config with `levels: "yes"` in it must produce a widget rather than an
+ * exception that takes the session down.
+ */
+export function normalizeDisplay(raw: unknown): DisplayPolicy {
+  const base = defaultDisplay();
+  if (typeof raw !== "object" || raw === null) return base;
+  const r = raw as Partial<DisplayPolicy> & { levels?: Partial<DisplayPolicy["levels"]> };
+  const bool = (v: unknown, fallback: boolean): boolean => (typeof v === "boolean" ? v : fallback);
+
+  const window = typeof r.taskWindow === "number" && Number.isFinite(r.taskWindow) ? r.taskWindow : base.taskWindow;
+
+  return {
+    preset: typeof r.preset === "string" && r.preset.trim() ? r.preset.trim() : base.preset,
+    levels: {
+      goal: bool(r.levels?.goal, base.levels.goal),
+      sprint: bool(r.levels?.sprint, base.levels.sprint),
+      feature: bool(r.levels?.feature, base.levels.feature),
+      task: bool(r.levels?.task, base.levels.task),
+      subtask: SUBTASK_MODES.has(String(r.levels?.subtask))
+        ? (r.levels?.subtask as DisplayPolicy["levels"]["subtask"])
+        : base.levels.subtask,
+    },
+    counts: bool(r.counts, base.counts),
+    dependencies: bool(r.dependencies, base.dependencies),
+    rail: bool(r.rail, base.rail),
+    progress: bool(r.progress, base.progress),
+    alerts: bool(r.alerts, base.alerts),
+    criteria: bool(r.criteria, base.criteria),
+    // A window of zero is a widget with no plan in it, which nobody wants and
+    // which a typo can produce.
+    taskWindow: Math.max(3, Math.min(60, Math.round(window))),
+  };
+}
+
+/** Which template a policy currently matches, if any. */
+export function matchDisplay(policy: DisplayPolicy, env?: NodeJS.ProcessEnv): DisplayTemplate | null {
+  const same = (a: DisplayPolicy, b: DisplayPolicy): boolean =>
+    JSON.stringify({ ...normalizeDisplay(a), preset: "" }) ===
+    JSON.stringify({ ...normalizeDisplay(b), preset: "" });
+  return listDisplays(env).find((d) => same(d.policy, policy)) ?? null;
+}
+
+export function describeDisplay(policy: DisplayPolicy): string {
+  const p = normalizeDisplay(policy);
+  const on = (["goal", "sprint", "feature", "task"] as const).filter((k) => p.levels[k]);
+  const subtasks =
+    p.levels.subtask === "all" ? "all subtasks" : p.levels.subtask === "active" ? "active subtasks" : null;
+  const shown = [...on, ...(subtasks ? [subtasks] : [])];
+  return shown.length ? shown.join(" · ") : "nothing — every level is hidden";
+}
+
+/** One line for a menu row: `focus · goal · sprint · feature · task · active subtasks`. */
+export function summarizeDisplay(policy: DisplayPolicy, env?: NodeJS.ProcessEnv): string {
+  const p = normalizeDisplay(policy);
+  const named = matchDisplay(p, env);
+  const label = named ? named.name : `${p.preset} (edited)`;
+  return `${label} · ${describeDisplay(p)}`;
+}

package/src/ui/planTree.ts

@@ -55,6 +55,14 @@ export type PlanTreeOptions = {
    * goal and no sprints should not spend two rows saying so.
    */
   collapseTrivial?: boolean;
+  /**
+   * Which levels the reader has asked to see.
+   *
+   * A hidden level does not hide what is under it: turning off sprints on a
+   * plan organised into sprints must still show the features, one indent
+   * shallower, or the setting silently deletes half the plan from view.
+   */
+  levels?: Partial<Record<PlanLevel, boolean>>;
 };
 
 function taskCounts(tasks: Task[] | undefined): { done: number; total: number } {
@@ -185,35 +193,48 @@ export function buildPlanRows(
 ): PlanRow[] {
   const collapse = options.collapseTrivial !== false;
   const groups = groupPlan(list);
+  const wants = (level: PlanLevel): boolean => options.levels?.[level] !== false;
 
   // A single goal is the run's headline and the surface draws it separately.
-  const showGoals = collapse ? groups.filter((g) => g.goal !== null).length > 1 : groups.some((g) => g.goal);
-  const showSprints = groups.some((g) => g.sprints.some((sg) => sg.sprint !== null));
+  const showGoals =
+    wants("goal") &&
+    (collapse ? groups.filter((g) => g.goal !== null).length > 1 : groups.some((g) => g.goal));
+  const showSprints = wants("sprint") && groups.some((g) => g.sprints.some((sg) => sg.sprint !== null));
 
   const rows: PlanRow[] = [];
   let taskIndex = 0;
 
   const emitFeature = (feature: Feature, depth: number): void => {
     const counts = taskCounts(feature.tasks);
-    rows.push({
-      level: "feature",
-      depth,
-      id: feature.id,
-      label: feature.id,
-      title: feature.name ?? feature.id,
-      status: null,
-      done: counts.done,
-      total: counts.total,
-      criteria: Array.isArray(feature.criteria) ? feature.criteria : undefined,
-    });
+    let taskDepth = depth;
+    if (wants("feature")) {
+      rows.push({
+        level: "feature",
+        depth,
+        id: feature.id,
+        label: feature.id,
+        title: feature.name ?? feature.id,
+        status: null,
+        done: counts.done,
+        total: counts.total,
+        criteria: Array.isArray(feature.criteria) ? feature.criteria : undefined,
+      });
+    } else {
+      // Hiding the feature row must not hide its tasks — nor indent them as
+      // though the row were still there.
+      taskDepth = Math.max(0, depth - 1);
+    }
 
     for (const task of feature.tasks ?? []) {
+      // Numbered even when hidden: `← #3` has to keep meaning the same task
+      // whatever the reader has chosen to look at.
       taskIndex += 1;
+      if (!wants("task")) continue;
       const id = task.key ?? `${feature.id}/${task.id}`;
       const active = activeTaskId !== null && (id === activeTaskId || task.id === activeTaskId);
       rows.push({
         level: "task",
-        depth: depth + 1,
+        depth: taskDepth + 1,
         id,
         label: String(taskIndex),
         title: task.description ?? id,
@@ -233,8 +254,8 @@ export function buildPlanRows(
       // one, so a task that is plainly in progress counts too.
       const subs = Array.isArray(task.subtasks) ? task.subtasks : [];
       const working = task.status === "in_progress" || task.status === "rework";
-      const show = options.expandSubtasks || active || working;
-      if (show && subs.length) rows.push(...subtaskRows(task, id, depth + 2, subs));
+      const show = wants("subtask") && (options.expandSubtasks || active || working);
+      if (show && subs.length) rows.push(...subtaskRows(task, id, taskDepth + 2, subs));
     }
   };
 
@@ -255,6 +276,7 @@ export function buildPlanRows(
     }
     for (const sg of group.sprints) {
       let featureDepth = depth;
+      // Every feature row hidden means the tasks sit where the features were.
       if (showSprints && sg.sprint) {
         rows.push({
           level: "sprint",