catherd-cli 0.2.0 → 1.0.0

package/src/entry/tui/views/runs.tsx

@@ -0,0 +1,281 @@
+import { useApp, useBack, useNow } from "../providers/app.tsx";
+import { usePoll, useData } from "../providers/data.tsx";
+import { useCommandLayer } from "../providers/keymap.tsx";
+import { errorToast } from "../providers/toast.tsx";
+import { useUi } from "../providers/theme.tsx";
+import { isArmed } from "../state.ts";
+import { ago, clock, shortRung } from "../text.ts";
+import { glyph, mascot, type Token } from "../theme.ts";
+import { Line, type Part } from "../widgets/line.tsx";
+import { List, type ListItem, useSelected } from "../widgets/list.tsx";
+import type { RunDetail } from "../effects.ts";
+import { runParts } from "./status.tsx";
+
+/** How often an open run is read again, unless paused. */
+export const RUN_EVERY_MS = 1_000;
+
+/** `[██████░░░░] 52% · 31/60 min`, green below 80 %, amber below 100 %, red at 100 % (spec §4.6). */
+function budgetParts(d: RunDetail, width: number, plain: boolean): Part[] {
+  const b = d.summary.budget;
+  if (!b) return [{ text: "no budget cap", tone: "muted" }];
+  const cells = Math.max(10, Math.min(30, width - 40));
+  const full = Math.min(cells, Math.round(b.fraction * cells));
+  const tone: Token = b.fraction >= 1 ? "error" : b.fraction >= 0.8 ? "warning" : "success";
+  const caps = [
+    b.minutes ? `${Math.round(b.minutes.spent)}/${b.minutes.cap} min` : "",
+    b.tokens ? `${b.tokens.spent}/${b.tokens.cap} tokens` : "",
+    b.usd ? `$${b.usd.spent.toFixed(2)}/$${b.usd.cap.toFixed(2)}` : "",
+  ].filter(Boolean);
+  return [
+    { text: "[" },
+    { text: glyph("full", plain).repeat(full), tone },
+    { text: glyph("empty", plain).repeat(cells - full), tone: "muted" },
+    { text: `] ${Math.round(b.fraction * 100)}%`, tone },
+    { text: ` · ${caps.join(" · ")}`, tone: "muted" },
+  ];
+}
+
+/**
+ * The selected row, where moving the cursor takes back a first ctrl+d (Ruling 3: moving or esc disarms),
+ * as the dialog list does.
+ */
+function useSelection(): [string | null, (key: string) => void, () => string | null] {
+  const app = useApp();
+  const sel = useSelected();
+  const select = (key: string) => {
+    if (key !== sel.current() && app.getState().armed) app.dispatch({ type: "disarm" });
+    sel.select(key);
+  };
+  return [sel.selected, select, sel.current];
+}
+
+function RunList(props: { width: number; height: number }) {
+  const app = useApp();
+  const data = useData();
+  const ui = useUi();
+  const now = useNow(1_000);
+  const [selected, setSelected, selectedNow] = useSelection();
+  const rows = data.runs.value?.rows ?? [];
+  useCommandLayer("row.runs", {
+    "runs.open": () => {
+      const id = selectedNow();
+      if (id) app.dispatch({ type: "run", id });
+    },
+  });
+  const updated = app.state.paused
+    ? "paused"
+    : data.runs.at !== null
+      ? `updated ${ago(now - data.runs.at)}`
+      : "";
+  const items: ListItem[] = rows.map((r) => ({
+    key: r.id,
+    selectable: true,
+    render: (sel, w) => (
+      <Line width={w} selected={sel} parts={[{ text: " " }, ...runParts(r, now, ui.plain)]} />
+    ),
+  }));
+  const warnings = data.runs.value?.warnings ?? [];
+  // a failed read says so, whether rows from an earlier good read are shown, none were, or none exist
+  const failed = data.runs.error;
+  const failure = failed ? (
+    <Line
+      width={props.width}
+      parts={[{ text: ` ${glyph("fail", ui.plain)} could not read the runs: ${failed}`, tone: "error" }]}
+    />
+  ) : null;
+  if (rows.length === 0 && data.runs.value) {
+    const art = mascot("waiting");
+    return (
+      <box flexDirection="column" width={props.width} height={props.height} paddingTop={failed ? 1 : 2}>
+        {failure}
+        {art.map((l) => (
+          <Line key={l} width={props.width} parts={[{ text: `   ${l}`, tone: "muted" }]} />
+        ))}
+        <Line
+          width={props.width}
+          parts={[
+            { text: "   No runs yet. Start one in Claude Code: /catherd <what to build>", tone: "muted" },
+          ]}
+        />
+      </box>
+    );
+  }
+  return (
+    <box flexDirection="column" width={props.width} height={props.height}>
+      <Line
+        width={props.width}
+        parts={[
+          { text: " RUNS", bold: true },
+          { text: `  ${updated}`, tone: app.state.paused ? "warning" : "muted" },
+        ]}
+      />
+      {failure}
+      <List
+        items={items}
+        selected={selected}
+        onSelect={setSelected}
+        width={props.width}
+        height={props.height - 1 - (failed ? 1 : 0) - Math.min(2, warnings.length)}
+        filter={null}
+        empty={failed ? "no runs read yet" : "reading runs…"}
+      />
+      {warnings.slice(0, 2).map((w) => (
+        <Line
+          key={w}
+          width={props.width}
+          parts={[{ text: ` ${glyph("warn", ui.plain)} ${w}`, tone: "warning" }]}
+        />
+      ))}
+    </box>
+  );
+}
+
+function RunView(props: { id: string; width: number; height: number }) {
+  const app = useApp();
+  const ui = useUi();
+  const now = useNow(1_000);
+  const [selected, setSelected, selectedNow] = useSelection();
+  const polled = usePoll(() => app.effects.run(props.id), RUN_EVERY_MS, {
+    paused: app.state.paused,
+    key: props.id,
+  });
+  useBack(true, "view", () => app.dispatch({ type: "run", id: null }));
+  const d = polled.value;
+  const laneOf = (key: string | null) => (key?.startsWith("lane:") ? key.slice("lane:".length) : null);
+  useCommandLayer("row.runs", {
+    "runs.cancel": () => {
+      const lane = laneOf(selectedNow());
+      if (!lane) return;
+      const t = app.clock.now();
+      if (!isArmed(app.getState(), "cancel", lane, t))
+        return app.dispatch({ type: "arm", what: "cancel", target: lane, at: t });
+      app.dispatch({ type: "disarm" });
+      void app.effects.cancel(props.id, lane).then(
+        (msg) => {
+          app.toast({ variant: "success", message: msg });
+          polled.refresh();
+        },
+        (e: unknown) => app.toast(errorToast(e)),
+      );
+    },
+  });
+  if (!d)
+    return (
+      <Line
+        width={props.width}
+        parts={[
+          {
+            text: polled.error ? ` ${polled.error}` : " reading the run…",
+            tone: polled.error ? "error" : "muted",
+          },
+        ]}
+      />
+    );
+  const s = d.summary;
+  const items: ListItem[] = [];
+  const text = (key: string, parts: Part[]) =>
+    items.push({ key, selectable: false, render: (_sel, w) => <Line width={w} parts={parts} /> });
+  const heading = (key: string, label: string) => text(key, [{ text: ` ${label}`, bold: true }]);
+  heading("h:live", "LIVE");
+  if (s.live.length === 0) text("live:none", [{ text: "   no role is running", tone: "muted" }]);
+  for (const l of s.live) {
+    const armed = isArmed(app.state, "cancel", l.name, app.clock.now());
+    items.push({
+      key: `lane:${l.name}`,
+      selectable: true,
+      render: (sel, w) => (
+        <Line
+          width={w}
+          selected={sel}
+          parts={[
+            { text: `   ${glyph(l.state === "running" ? "live" : "waiting", ui.plain)} `, tone: "info" },
+            { text: l.name.padEnd(16), bold: true },
+            { text: shortRung(l.rung).padEnd(20) },
+            { text: clock(l.secs).padEnd(8) },
+            armed
+              ? { text: "press ctrl+d again to cancel", tone: "warning" }
+              : { text: l.state, tone: "muted" },
+          ]}
+        />
+      ),
+    });
+  }
+  if (d.climbs.length) heading("h:climbs", "CLIMBS");
+  d.climbs.forEach((c, i) =>
+    text(`climb:${i}`, [
+      { text: `   ${c.lane.padEnd(8)} ` },
+      { text: `${shortRung(c.from)} ${glyph("arrow", ui.plain)} ${shortRung(c.to)}` },
+      { text: `  ${c.reason}${c.env ? " (environment)" : ""}`, tone: "muted" },
+    ]),
+  );
+  if (d.decisions.length) heading("h:routes", "ROUTES");
+  d.decisions.forEach((r, i) =>
+    text(`route:${i}`, [
+      { text: `   ${r.lane.padEnd(8)} ${r.role.padEnd(10)}` },
+      { text: `${r.source.padEnd(8)}`, tone: r.source === "jev" ? "info" : "muted" },
+      { text: `${r.kind ?? "-"}/${r.difficulty ?? "-"}  `, tone: "muted" },
+      { text: shortRung(r.rung) },
+    ]),
+  );
+  if (s.milestones.length) heading("h:landed", "LANDED");
+  s.milestones.forEach((m, i) =>
+    text(`landed:${i}`, [{ text: `   ${glyph("ok", ui.plain)} `, tone: "success" }, { text: m }]),
+  );
+  if (s.stateTail.length) heading("h:next", "STATE");
+  s.stateTail.forEach((l, i) => text(`state:${i}`, [{ text: `   ${l}`, tone: "muted" }]));
+  const updated = app.state.paused ? "paused" : polled.at !== null ? `updated ${ago(now - polled.at)}` : "";
+  const t = s.totals;
+  return (
+    <box flexDirection="column" width={props.width} height={props.height}>
+      <Line
+        width={props.width}
+        parts={[
+          { text: ` ${s.title}`, bold: true },
+          { text: `  ${s.repo} · started ${ago(now - Date.parse(s.createdAt))} · `, tone: "muted" },
+          { text: updated, tone: app.state.paused ? "warning" : "muted" },
+          {
+            text: polled.error ? ` · ${glyph("fail", ui.plain)} could not read the run: ${polled.error}` : "",
+            tone: "error",
+          },
+        ]}
+      />
+      <Line width={props.width} parts={[{ text: " budget " }, ...budgetParts(d, props.width, ui.plain)]} />
+      <Line
+        width={props.width}
+        parts={[
+          {
+            text: ` ${t.runs} role runs, ${t.ok} ok · ${(t.tokens.input / 1000).toFixed(0)}k in · ${(t.tokens.output / 1000).toFixed(0)}k out · $${t.costUsd.toFixed(2)}`,
+            tone: "muted",
+          },
+        ]}
+      />
+      <List
+        items={items}
+        selected={selected}
+        onSelect={setSelected}
+        width={props.width}
+        height={props.height - 3}
+        filter={null}
+        empty=""
+      />
+    </box>
+  );
+}
+
+/** Spec §9.1 tab 3: the run list; enter opens a run (live lanes, climbs, routes, budget, landed); p pauses. */
+export function RunsView(props: { width: number; height: number }) {
+  const app = useApp();
+  const data = useData();
+  useCommandLayer("tab.runs", {
+    "runs.refresh": () => data.runs.refresh(),
+    "runs.pause": () => {
+      app.dispatch({ type: "pause" });
+      app.toast({ variant: "info", message: app.getState().paused ? "Updates paused" : "Updates resumed" });
+    },
+  });
+  return app.state.run ? (
+    <RunView id={app.state.run} width={props.width} height={props.height} />
+  ) : (
+    <RunList width={props.width} height={props.height} />
+  );
+}

package/src/entry/tui/views/save-dialog.tsx

@@ -0,0 +1,332 @@
+import { useRenderer, useTerminalDimensions } from "@opentui/react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
+import { errorMessage } from "../../../domain/errors.ts";
+import {
+  applyPatch,
+  type Change,
+  diffProfiles,
+  type ProfileDoc,
+  patchBetween,
+  resolveProfile,
+} from "../../../domain/profile.ts";
+import type { Validation } from "../../../domain/profile-rules.ts";
+import type { Effects } from "../effects.ts";
+import { useApp } from "../providers/app.tsx";
+import { useData, useLoad } from "../providers/data.tsx";
+import { useCommandLayer } from "../providers/keymap.tsx";
+import { useUi } from "../providers/theme.tsx";
+import { withStaged } from "../profile-tree.ts";
+import { type Dialog as DialogState, type Draft, isSaving } from "../state.ts";
+import { wrap } from "../text.ts";
+import { glyph } from "../theme.ts";
+import { Buttons } from "../widgets/dialog-confirm.tsx";
+import { Dialog, dialogRows } from "../widgets/dialog.tsx";
+import { Line, type Part } from "../widgets/line.tsx";
+
+type Save = Extract<DialogState, { kind: "save" }>;
+
+/** Said when a Save found the file changed since the dialog showed what saving would do. */
+const CHANGED_ON_DISK = "the profile changed on disk — check the changes and choose again";
+
+const show = (v: unknown): string =>
+  v === null || v === undefined ? "none" : Array.isArray(v) ? v.join(", ") : String(v);
+
+/** What saving a draft would do: the changed fields, staged treat-likes, issues, and agent changes. */
+export interface SavePreview {
+  changes: Change[];
+  treatLikes: [string, string][];
+  validation: Validation;
+  agentsAdded: string[];
+  agentsRemoved: string[];
+}
+
+/**
+ * The save is a patch over the file as it is when it is written (Ruling 7), so the preview applies the
+ * draft's patch to the file as it is now, not to the copy the draft began from.
+ */
+function previewSave(
+  d: Draft,
+  fx: Pick<Effects, "catalog" | "validate" | "agents" | "readProfile">,
+  now: ProfileDoc = fx.readProfile(d.name),
+): SavePreview {
+  const before = resolveProfile(now, d.name);
+  const after = resolveProfile(applyPatch(now, patchBetween(d.base, d.doc)), d.name);
+  const { catalog } = fx.catalog(after.billing);
+  const a = new Set(fx.agents(before));
+  const b = new Set(fx.agents(after));
+  return {
+    changes: diffProfiles(before, after),
+    treatLikes: Object.entries(d.treatLikes),
+    validation: fx.validate(after, withStaged(catalog, d.treatLikes)),
+    agentsAdded: [...b].filter((x) => !a.has(x)),
+    agentsRemoved: [...a].filter((x) => !b.has(x)),
+  };
+}
+
+/** A block of the save dialog: heading lines, then items of one or more lines each. */
+interface Section {
+  head: Part[][];
+  items: Part[][][];
+  /**
+   * How long the section holds on when rows run short (spec §9.2, Ruling 8):
+   * "filler" (changes, warnings, agent files) loses items first, then goes whole;
+   * "note" (what applies when) goes whole, never in part;
+   * "error" (validation errors) loses items only after both, and keeps its first;
+   * "failure" (why the last save failed) is never cut.
+   */
+  hold: "filler" | "note" | "error" | "failure";
+  /** the line that ends a cut section; "… and N more" when unset */
+  more?: (n: number) => string;
+}
+
+const HOLD = { filler: 0, note: 1, error: 2, failure: 3 } as const;
+
+/**
+ * The sections' lines in at most `rows` lines. Empty sections are left out. Over budget, in turn:
+ * the longest filler section loses its last item (a cut section ends with one muted "… and N more"
+ * line); filler and note sections go whole, the least-held first; error sections lose items down
+ * to their first; last, lines come off the end of every section but the failure, then the failure.
+ */
+export function fitSections(sections: Section[], rows: number): Part[][] {
+  const shown = sections.filter((s) => s.items.length > 0);
+  const keep = shown.map((s) => s.items.length);
+  const gone = shown.map(() => false);
+  const size = (i: number) => {
+    if (gone[i]) return 0;
+    const s = shown[i]!;
+    const body = s.items.slice(0, keep[i]).reduce((n, it) => n + it.length, 0);
+    return s.head.length + body + (keep[i]! < s.items.length ? 1 : 0);
+  };
+  const total = () => shown.reduce((n, _, i) => n + size(i), 0);
+  /** the largest live section `ok` accepts, or -1 */
+  const largest = (ok: (s: Section, i: number) => boolean) => {
+    let at = -1;
+    for (const [i, s] of shown.entries()) if (!gone[i] && ok(s, i) && (at < 0 || size(i) > size(at))) at = i;
+    return at;
+  };
+  for (let at; total() > rows && (at = largest((s, i) => s.hold === "filler" && keep[i]! > 0)) >= 0;)
+    keep[at]! -= 1;
+  for (const hold of ["filler", "note"] as const)
+    for (let at; total() > rows && (at = largest((s) => s.hold === hold)) >= 0;) gone[at] = true;
+  for (let at; total() > rows && (at = largest((s, i) => s.hold === "error" && keep[i]! > 1)) >= 0;)
+    keep[at]! -= 1;
+  const lines = shown.map((s, i) => {
+    if (gone[i]) return [];
+    const more = s.items.length - keep[i]!;
+    const tail = s.more?.(more) ?? `… and ${more} more`;
+    return [
+      ...s.head,
+      ...s.items.slice(0, keep[i]).flat(),
+      ...(more > 0 ? [[{ text: tail, tone: "muted" as const }]] : []),
+    ];
+  });
+  // still over: the blank lines between sections go, then lines come off the end of the least-held
+  // sections, the failure last
+  let over = lines.reduce((n, l) => n + l.length, 0) - Math.max(0, rows);
+  const order = shown.map((_, i) => i).sort((x, y) => HOLD[shown[x]!.hold] - HOLD[shown[y]!.hold]);
+  for (const i of order)
+    while (over > 0 && lines[i]![0]?.length === 0 && shown[i]!.head.length > 0 && !gone[i]) {
+      lines[i]!.shift();
+      over -= 1;
+    }
+  for (const i of order) {
+    const off = Math.min(over, lines[i]!.length);
+    lines[i]!.splice(lines[i]!.length - off, off);
+    over -= off;
+  }
+  return lines.flat();
+}
+
+/**
+ * Spec §9.2: ctrl+s opens this, never enter. It shows the diff, the agent-file changes and what applies
+ * when, with Save, Save & make active and Cancel; errors leave only Cancel.
+ */
+export function SaveDialog(props: { dialog: Save }) {
+  const app = useApp();
+  const data = useData();
+  const ui = useUi();
+  const dims = useTerminalDimensions();
+  const renderer = useRenderer();
+  const name = props.dialog.purpose.name;
+  const draft = app.state.drafts[name];
+  // the preview reads the catalog and agent files: off the render path, so a read that throws is shown
+  // here as the reason nothing can be saved, not as a broken screen
+  const key = draft ? JSON.stringify([draft.doc, draft.treatLikes]) : "";
+  const loaded = useLoad(() => (draft ? previewSave(draft, app.effects) : null), key);
+  // a Save re-reads the file: when that changed what saving would do, the dialog shows the new preview
+  // in place of the loaded one and asks again (another process may have written the profile meanwhile)
+  const [fresh, setFresh] = useState<{ key: string; value: SavePreview | null; error: string | null } | null>(
+    null,
+  );
+  const shown = fresh?.key === key ? fresh : loaded;
+  const preview = shown.value;
+  const error = shown.error;
+  // what the dialog shows now, for keys in one burst
+  const shownRef = useRef<SavePreview | null>(preview);
+  shownRef.current = preview;
+  // set when a Save replaces the preview, cleared by the first frame drawn to the terminal after the
+  // commit that holds the new one: a Save between the two (a later key in the same burst) would answer a
+  // preview nobody has seen. React may commit between two keys of one burst, so a commit is not enough.
+  const unseenRef = useRef(false);
+  useEffect(() => {
+    if (!unseenRef.current) return;
+    const seen = () => {
+      unseenRef.current = false;
+    };
+    renderer.once("frame", seen);
+    renderer.requestRender();
+    return () => {
+      renderer.off("frame", seen);
+    };
+  }, [fresh, renderer]);
+  const [changed, setChanged] = useState(false);
+  /** reads the file again; a preview other than the shown one replaces it and asks again (false) */
+  const recheck = (): { same: boolean; now: ProfileDoc | null } => {
+    const d = app.getState().drafts[name];
+    let doc: ProfileDoc | null = null;
+    let now: SavePreview | null = null;
+    let failed: string | null = null;
+    try {
+      doc = d ? app.effects.readProfile(name) : null;
+      now = d && doc ? previewSave(d, app.effects, doc) : null;
+    } catch (e) {
+      failed = errorMessage(e);
+    }
+    if (failed === null && JSON.stringify(now) === JSON.stringify(shownRef.current))
+      return { same: true, now: doc };
+    shownRef.current = now;
+    unseenRef.current = true;
+    setFresh({ key, value: now, error: failed });
+    setChanged(true);
+    return { same: false, now: doc };
+  };
+  const blocked = error !== null || (preview?.validation.errors.length ?? 0) > 0;
+  // spec §9.2's order: Save / Save & make active / Cancel; errors leave only Cancel
+  const labels = blocked ? ["Cancel"] : ["Save", "Save & make active", "Cancel"];
+  const [focused, setFocusedState] = useState(0);
+  // keys in one burst read the focus as it is now, not as it was drawn
+  const focusedRef = useRef(0);
+  const setFocused = (f: number) => {
+    focusedRef.current = f;
+    setFocusedState(f);
+  };
+  useCommandLayer("dialog", {
+    "dialog.left": () => setFocused(Math.max(0, focusedRef.current - 1)),
+    "dialog.right": () => setFocused(Math.min(labels.length - 1, focusedRef.current + 1)),
+    "dialog.submit": () => {
+      // a save that is writing takes no answer
+      if (isSaving(app.getState())) return;
+      const label = labels[Math.min(focusedRef.current, labels.length - 1)];
+      // nothing is saved before its diff has been shown
+      if (label !== "Cancel" && (!shownRef.current || unseenRef.current)) return;
+      if (label === "Cancel") return app.dispatch({ type: "close" });
+      // only the save the dialog shows is made: the file is read again now, and a different preview
+      // replaces the shown one and asks again instead of saving
+      const { same, now } = recheck();
+      if (!same || !now) return;
+      // the save writes only over the file this preview read: one changed while it writes (another
+      // process, while a treat-like waits for the catalog lock) is refused, and the dialog asks again
+      const extra = {
+        shown: now,
+        // the notice shows even when the change is one this preview does not show (another field)
+        changed: () => {
+          if (recheck().same) setChanged(true);
+        },
+      };
+      app.answer(label === "Save" ? "save" : "activate", extra);
+    },
+  });
+  const rows = (inner: number): ReactNode[] => {
+    const out: ReactNode[] = [];
+    const line = (key: string, parts: Part[]) => out.push(<Line key={key} width={inner} parts={parts} />);
+    if (error !== null) {
+      wrap(`Cannot show what saving would do: ${error}`, inner).forEach((t, i) =>
+        line(`fail${i}`, [{ text: t, tone: "error" }]),
+      );
+      line("gap", []);
+      out.push(<Buttons key="buttons" labels={labels} focused={0} width={inner} />);
+      return out;
+    }
+    if (!preview) {
+      line("gone", [{ text: draft ? "reading…" : "Nothing to save.", tone: "muted" }]);
+      return out;
+    }
+    const repo = data.profiles.value?.repo;
+    const text = (t: string, tone: Part["tone"]): Part[][] => wrap(t, inner).map((l) => [{ text: l, tone }]);
+    const sections: Section[] = [
+      {
+        head: [],
+        hold: "filler",
+        items: [
+          ...preview.changes.map((c): Part[][] => [
+            [
+              { text: `${c.path}  ` },
+              { text: show(c.before), tone: "diffDel" },
+              { text: ` ${glyph("arrow", ui.plain)} ` },
+              { text: show(c.after), tone: "diffAdd" },
+            ],
+          ]),
+          ...preview.treatLikes.map(([rung, like]): Part[][] => [
+            [{ text: `treat ${rung} like ` }, { text: like, tone: "diffAdd" }],
+          ]),
+        ],
+      },
+      {
+        head: [[]],
+        hold: "error",
+        more: (n) => `… and ${n} more ${n === 1 ? "error" : "errors"}`,
+        items: preview.validation.errors.map((e) =>
+          text(`${glyph("fail", ui.plain)} ${e.path}: ${e.message}`, "error"),
+        ),
+      },
+      {
+        // warnings follow the errors in one block
+        head: preview.validation.errors.length ? [] : [[]],
+        hold: "filler",
+        more: (n) => `… and ${n} more ${n === 1 ? "warning" : "warnings"}`,
+        items: preview.validation.warnings.map((w) =>
+          text(`${glyph("warn", ui.plain)} ${w.path}: ${w.message}`, "warning"),
+        ),
+      },
+      {
+        head: [[], [{ text: "Agent files", bold: true }]],
+        hold: "filler",
+        items: [
+          ...preview.agentsAdded.map((a): Part[][] => [[{ text: `+ ${a}`, tone: "diffAdd" }]]),
+          ...preview.agentsRemoved.map((a): Part[][] => [[{ text: `- ${a}`, tone: "diffDel" }]]),
+        ],
+      },
+      {
+        head: [[]],
+        hold: "note",
+        items: [
+          text(
+            "Applies to: native Claude agents in new Claude Code sessions; codex, claude-code and opencode from the next dispatch.",
+            "muted",
+          ),
+          // inside a bound repo, making a profile active binds the repo to it (the button keeps §9.2's label)
+          ...(repo ? [text(`Save & make active binds ${repo} to ${name}.`, "muted")] : []),
+        ],
+      },
+      { head: [[]], hold: "failure", items: props.dialog.error ? [text(props.dialog.error, "error")] : [] },
+    ];
+    // the gap and the buttons always fit: every section shares what is left of the panel
+    const notice =
+      changed && !props.dialog.saving ? wrap(`${glyph("warn", ui.plain)} ${CHANGED_ON_DISK}`, inner) : [];
+    fitSections(sections, dialogRows(dims.height) - 2 - notice.length).forEach((p, i) => line(`r${i}`, p));
+    line("gap5", []);
+    notice.forEach((t, i) => line(`changed${i}`, [{ text: t, tone: "warning" }]));
+    if (props.dialog.saving) line("saving", [{ text: "saving…", tone: "muted" }]);
+    else
+      out.push(
+        <Buttons
+          key="buttons"
+          labels={labels}
+          focused={Math.min(focused, labels.length - 1)}
+          width={inner}
+        />,
+      );
+    return out;
+  };
+  return <Dialog title={`Save profile ${name}`} size="large" rows={rows} />;
+}