@gonrocca/nodd 0.3.0 → 0.4.0

package/extensions/nodd-models.test.ts

@@ -1,5 +1,8 @@
 import { test } from "node:test";
 import assert from "node:assert/strict";
+import { mkdirSync, mkdtempSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
 import { readFileSync } from "node:fs";
 import { MECHANISM_PLACEHOLDER } from "../src/models/slots.ts";
 import register, { runModelsCommand, type ConfigIo } from "./nodd-models.ts";
@@ -164,6 +167,73 @@ test("quitting the picker produces zero writes; saving writes once", async () =>
   assert.equal(saveIo.writes[0].unrelated, true, "the picker's save preserves unrelated keys");
 });
 
+test("the handler opens the picker on the saved profiles, not on an empty menu", async () => {
+  // The host built the picker from `models` and `groups` only, so the profiles
+  // on disk never reached it: a user with six saved profiles opened
+  // /nodd-models and the menu offered to create the first one.
+  const commands = new Map<string, any>();
+  register({ registerCommand: (name: string, options: unknown) => commands.set(name, options) } as never);
+
+  const config = {
+    models: { implement: "cliproxy/personal/claude-opus-5" },
+    thinking: { implement: "high" },
+    profiles: {
+      rapido: { models: { implement: "cliproxy/ds/deepseek-flash" }, thinking: { implement: "low" } },
+      lento: { models: { implement: "cliproxy/personal/claude-opus-5" }, thinking: { implement: "high" } },
+    },
+    activeProfile: "rapido",
+  };
+
+  const home = mkdtempSync(join(tmpdir(), "nodd-models-"));
+  mkdirSync(join(home, ".pi"), { recursive: true });
+  writeFileSync(join(home, ".pi", "nodd.json"), JSON.stringify(config));
+  const previousHome = process.env.HOME;
+  process.env.HOME = home;
+
+  let rendered: string[] = [];
+  try {
+    await commands.get("nodd-models").handler("", {
+      ui: {
+        notify() {},
+        // Stand in for pi's custom-UI host: build the component, render it, and
+        // quit without saving.
+        async custom(build: any) {
+          let result: unknown;
+          const component = build({ requestRender() {} }, {}, {}, (r: unknown) => { result = r; });
+          rendered = component.render(80);
+          component.handleInput?.("q");
+          return result ?? { type: "quit" };
+        },
+      },
+      modelRegistry: { getAll: () => [{ provider: "cliproxy", id: "personal/claude-opus-5" }] },
+    } as never);
+  } finally {
+    if (previousHome === undefined) delete process.env.HOME;
+    else process.env.HOME = previousHome;
+  }
+
+  const screen = rendered.join("\n");
+  assert.match(screen, /rapido/, "a saved profile is on the opening screen");
+  assert.match(screen, /lento/, "and so is the other one");
+  assert.doesNotMatch(screen, /modelos sin perfil/, "with profiles saved, the menu is not the no-profile one");
+});
+
+test("the picker input carries the profiles and the active one", () => {
+  const input = register.pickerInput(
+    {
+      models: { implement: "cliproxy/personal/claude-opus-5" },
+      thinking: { implement: "high" },
+      profiles: { rapido: { models: { implement: "cliproxy/ds/deepseek-flash" } } },
+      activeProfile: "rapido",
+    },
+    new Map([["cliproxy", ["personal/claude-opus-5"]]]),
+  );
+
+  assert.deepEqual(Object.keys(input.profiles), ["rapido"], "saved profiles reach the picker");
+  assert.equal(input.activeProfile, "rapido", "and so does the active one");
+  assert.deepEqual(input.thinking, { implement: "high" }, "and the levels, so editing does not wipe them");
+});
+
 test("the command is registered with pi under its own name", () => {
   const commands = new Map<string, unknown>();
   register({ registerCommand: (name: string, options: unknown) => commands.set(name, options) } as never);

package/extensions/nodd-models.ts

@@ -24,8 +24,8 @@ import { mergeConfig, noddConfigPath } from "../src/config.ts";
 import { SLOT_ROWS } from "../src/models/slots.ts";
 import { assignmentPatch, groupByProvider, parseAssignment, validateAssignment, type RegistryModel } from "../src/models/assign.ts";
 import { applyProfileCommand, isValidProfileName, mirrorToActiveProfile, readActiveProfile, readProfiles, type Profile } from "../src/models/profiles.ts";
-import { back, createPickerState, decodeKey, enter, navigate, pickerTitle, submitText, type EnterResult, type PickerState } from "../src/models/picker.ts";
-import { fitRows, truncateToWidth, usableRows, windowRows } from "../src/models/layout.ts";
+import { back, createPickerState, decodeKey, enter, navigate, pickerTitle, previewRows, submitText, type EnterResult, type PickerState } from "../src/models/picker.ts";
+import { fitRows, sideBySide, truncateToWidth, usableRows, windowRows } from "../src/models/layout.ts";
 import { isThinkingLevel, type SlotThinking } from "../src/models/thinking.ts";
 
 export type ConfigIo = {
@@ -211,7 +211,7 @@ function createComponent(
   let buffer: string | null = null;
 
   function render(width: number): string[] {
-    const inner = Math.max(20, width - 2);
+    const inner = Math.max(20, width - 4);
     // pi hands the component its width but not its height, so the height comes
     // from the terminal itself, minus what pi's own chrome takes.
     const maxRows = usableRows(process.stdout?.rows);
@@ -226,19 +226,24 @@ function createComponent(
       );
     }
 
-    // Reserve the header and footer, then window the list around the cursor so
-    // a long list scrolls instead of overflowing the terminal.
-    const capacity = Math.max(1, maxRows - head.length - 2);
+    // Reserve the header, footer and the two frame lines, then window the list
+    // around the cursor so a long list scrolls instead of overflowing.
+    const capacity = Math.max(1, maxRows - head.length - 4);
     const win = windowRows(state.entries.length, state.cursor, capacity);
     const rows = state.entries.slice(win.start, win.end).map((entry, index) => {
       const selected = win.start + index === state.cursor;
-      return truncateToWidth(`${selected ? "❯ " : "  "}${entry.label}`, inner);
+      return { text: `${selected ? "❯ " : "  "}${entry.label}` };
     });
 
-    return fitRows(
-      [...head, ...rows, "", truncateToWidth("↑↓ mover · enter elegir · esc volver · q salir", inner)],
-      maxRows,
-    );
+    const menu = [
+      ...head.map((text) => ({ text })),
+      ...rows,
+      { text: "" },
+      { text: "↑↓ mover · enter elegir · esc volver · q salir" },
+    ];
+    // The preview is empty until a profile exists, and `sideBySide` drops the
+    // second panel for an empty preview or a narrow terminal.
+    return fitRows(sideBySide(menu, previewRows(state), width), maxRows);
   }
 
   /** Apply an `EnterResult` — re-render on `state`, close on `save`/`quit`. */
@@ -334,8 +339,12 @@ function register(pi?: PiApi): void {
         // deterministic text path, which is the whole command in a headless run.
         if (args.trim() === "" && typeof ctx?.ui?.custom === "function") {
           const groups = groupsFrom(ctx.modelRegistry);
+          // Everything the picker needs, including the saved profiles and the
+          // active one. Passing only the models opened the picker as though
+          // nothing had ever been saved.
+          const input = pickerInput(io.readConfig(), groups);
           const result = await ctx.ui.custom<EnterResult>((tui, _theme, _keys, done) =>
-            createComponent({ models: currentModels(io.readConfig()), groups }, done, () => tui.requestRender()),
+            createComponent(input, done, () => tui.requestRender()),
           );
           runPicker(result, io);
           notify?.(result.type === "save" ? "nodd · modelos guardados" : "nodd · sin cambios", "info");
@@ -352,5 +361,6 @@ function register(pi?: PiApi): void {
 
 register.runPicker = runPicker;
 register.createComponent = createComponent;
+register.pickerInput = pickerInput;
 
 export default register;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gonrocca/nodd",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Non-negotiable Organic Driven Development — the ODD protocol as runtime mechanism for pi: blocking gates, observed evidence, and promotion to /forge.",
   "type": "module",
   "keywords": [

package/src/models/assign.test.ts

@@ -123,3 +123,49 @@ test("a bare model resolved to one provider is written qualified", () => {
   const patch = assignmentPatch({}, { slot: "implement", provider: "openai-codex", model: "gpt-5-codex" });
   assert.deepEqual(patch, { models: { implement: "openai-codex/gpt-5-codex" } });
 });
+
+test("a provider whose ids carry a prefix is browsable by prefix", () => {
+  // cliproxy fronts several subscription pools and encodes the pool in the id:
+  // `personal/claude-opus-5`, `ds/deepseek-flash`. Grouping by provider alone
+  // put 166 models behind one row, which is not a menu anyone can use.
+  const groups = groupByProvider([
+    { provider: "cliproxy", id: "personal/claude-opus-5" },
+    { provider: "cliproxy", id: "personal/claude-sonnet-5" },
+    { provider: "cliproxy", id: "ds/deepseek-flash" },
+    { provider: "cliproxy", id: "glm-5.2" },
+    { provider: "anthropic", id: "claude-opus-4-1" },
+  ]);
+
+  assert.deepEqual(
+    [...groups.keys()].sort(),
+    ["anthropic", "cliproxy/ds", "cliproxy/personal", "cliproxy"].sort(),
+    "each prefix is its own browsable group; unprefixed ids stay under the provider",
+  );
+  assert.deepEqual(groups.get("cliproxy/personal"), ["personal/claude-opus-5", "personal/claude-sonnet-5"]);
+  assert.deepEqual(groups.get("cliproxy"), ["glm-5.2"], "only the unprefixed ids remain directly under it");
+});
+
+test("assigning through a prefixed group writes the provider, not the prefix", () => {
+  // The group is a browsing device. What reaches the agent frontmatter must be
+  // the real `provider/id`, or pi cannot resolve it.
+  const groups = groupByProvider([{ provider: "cliproxy", id: "personal/claude-opus-5" }]);
+  const assignment = parseAssignment("implement=cliproxy/personal/claude-opus-5");
+
+  assert.deepEqual(assignment, { slot: "implement", provider: "cliproxy", model: "personal/claude-opus-5" });
+  assert.deepEqual(validateAssignment(assignment!, groups), { ok: true, provider: "cliproxy" });
+});
+
+test("the unknown-provider message names providers, not browsing keys", () => {
+  // `cliproxy/ds` is a menu grouping, not something you can type as a provider:
+  // offering it as a valid value would send the user to an assignment that
+  // cannot resolve.
+  const groups = groupByProvider([
+    { provider: "cliproxy", id: "personal/claude-opus-5" },
+    { provider: "cliproxy", id: "ds/deepseek-flash" },
+    { provider: "anthropic", id: "claude-opus-4-1" },
+  ]);
+  const result = validateAssignment(parseAssignment("implement=nope/x")!, groups);
+
+  assert.equal(result.ok, false);
+  assert.match(result.message, /Usá uno de: anthropic, cliproxy$/, "the real providers, deduped");
+});

package/src/models/assign.ts

@@ -31,12 +31,31 @@ export type Validation =
   | { ok: true; provider: string | null }
   | { ok: false; message: string };
 
+/**
+ * Group the registry into browsable menus.
+ *
+ * Normally one group per provider. But a provider that fronts several pools
+ * encodes the pool in the id — cliproxy serves `personal/claude-opus-5`,
+ * `ds/deepseek-flash`, `wibond/...` — and grouping by provider alone puts every
+ * one of them behind a single row: measured against a live cliproxy, 166 models
+ * in one flat list. Those ids are split one level deeper into `provider/prefix`
+ * groups, so the pools are what you actually browse.
+ *
+ * The group key is a browsing device only. The id inside each group stays whole
+ * (`personal/claude-opus-5`), because that is what pi has to resolve.
+ */
 export function groupByProvider(models: RegistryModel[]): Map<string, string[]> {
   const groups = new Map<string, string[]>();
   for (const model of models) {
-    const existing = groups.get(model.provider);
+    const slash = model.id.indexOf("/");
+    // An id that begins or ends with the slash has no usable prefix; it is kept
+    // whole under its provider rather than producing an empty group.
+    const key = slash > 0 && slash < model.id.length - 1
+      ? `${model.provider}/${model.id.slice(0, slash)}`
+      : model.provider;
+    const existing = groups.get(key);
     if (existing) existing.push(model.id);
-    else groups.set(model.provider, [model.id]);
+    else groups.set(key, [model.id]);
   }
   return groups;
 }
@@ -56,8 +75,34 @@ export function parseAssignment(text: string): Assignment | null {
   return { slot, provider, model };
 }
 
+/** The real provider names, with the browsing prefixes folded back off. */
+function providerNames(groups: Map<string, string[]>): string[] {
+  const names = new Set<string>();
+  for (const key of groups.keys()) {
+    const slash = key.indexOf("/");
+    names.add(slash > 0 ? key.slice(0, slash) : key);
+  }
+  return [...names].sort();
+}
+
+/** Every id reachable under a provider, across all of its prefixed groups. */
+function idsForProvider(groups: Map<string, string[]>, provider: string): string[] | undefined {
+  const ids: string[] = [];
+  for (const [key, group] of groups) {
+    if (key === provider || key.startsWith(`${provider}/`)) ids.push(...group);
+  }
+  return ids.length > 0 ? ids : undefined;
+}
+
+/** The providers owning a model id, with the browsing prefix stripped back off. */
 function providersOwning(groups: Map<string, string[]>, model: string): string[] {
-  return [...groups.entries()].filter(([, ids]) => ids.includes(model)).map(([provider]) => provider);
+  const owners = new Set<string>();
+  for (const [key, ids] of groups) {
+    if (!ids.includes(model)) continue;
+    const slash = key.indexOf("/");
+    owners.add(slash > 0 ? key.slice(0, slash) : key);
+  }
+  return [...owners];
 }
 
 function suggest(groups: Map<string, string[]>, model: string): string[] {
@@ -89,11 +134,13 @@ export function validateAssignment(assignment: Assignment, groups: Map<string, s
   if (groups.size === 0) return { ok: true, provider: assignment.provider };
 
   if (assignment.provider) {
-    const ids = groups.get(assignment.provider);
+    // The group keys are browsing devices (`cliproxy/personal`), so a provider
+    // owns every group it prefixes, not just the one bearing its exact name.
+    const ids = idsForProvider(groups, assignment.provider);
     if (!ids) {
       return {
         ok: false,
-        message: `provider desconocido: ${assignment.provider}. Usá uno de: ${[...groups.keys()].sort().join(", ")}`,
+        message: `provider desconocido: ${assignment.provider}. Usá uno de: ${providerNames(groups).join(", ")}`,
       };
     }
     if (!ids.includes(assignment.model)) {

package/src/models/layout.test.ts

@@ -3,7 +3,9 @@ import assert from "node:assert/strict";
 import { readFileSync } from "node:fs";
 import {
   fitRows,
+  frameBox,
   padToWidth,
+  sideBySide,
   stripAnsi,
   truncateToWidth,
   usableRows,
@@ -120,3 +122,46 @@ test("the layout helpers import nothing at all", () => {
     .join("\n");
   assert.ok(!/^import /m.test(source), "the layout must stay dependency-free: no node:*, no pi, no TUI");
 });
+
+// ---------------------------------------------------------------------------
+// The boxed two-panel layout
+// ---------------------------------------------------------------------------
+
+test("frameBox draws four sides and pads every row to the same width", () => {
+  const out = frameBox([{ text: "uno" }, { text: "" }, { text: "dos" }], 20);
+
+  assert.equal(out.length, 5, "top, three rows, bottom");
+  assert.ok(out[0].startsWith("┌") && out[0].endsWith("┐"));
+  assert.ok(out[4].startsWith("└") && out[4].endsWith("┘"));
+  for (const line of out) {
+    assert.equal(visibleWidth(line), 20, `every line is the box width: ${JSON.stringify(line)}`);
+  }
+  assert.ok(out[1].startsWith("│ uno") && out[1].endsWith("│"));
+});
+
+test("frameBox truncates on display cells, so the closing edge never moves", () => {
+  const out = frameBox([{ text: "una fila larguísima que no entra de ningún modo" }], 20);
+  assert.equal(visibleWidth(out[1]), 20);
+  assert.ok(out[1].endsWith("│"), "the right edge survives the cut");
+});
+
+test("below the split width only the menu is rendered", () => {
+  const menu = [{ text: "menu" }];
+  const preview = [{ text: "preview" }];
+  const narrow = sideBySide(menu, preview, 40);
+
+  assert.ok(narrow.every((line) => !line.includes("preview")), "no room: the preview is dropped, not squeezed");
+  assert.ok(narrow.some((line) => line.includes("menu")));
+});
+
+test("side by side, both panels are framed and equally tall", () => {
+  const out = sideBySide([{ text: "a" }, { text: "b" }, { text: "c" }], [{ text: "p" }], 100);
+
+  assert.ok(out.every((line) => visibleWidth(line) <= 100), "the pair never exceeds the terminal");
+  const joined = out.join("\n");
+  assert.ok(joined.includes("a") && joined.includes("p"), "both panels are present");
+  // Five rows: the taller panel is three rows plus its two frame lines, and the
+  // shorter one is padded to match rather than leaving a ragged edge.
+  assert.equal(out.length, 5);
+  for (const line of out) assert.equal(visibleWidth(line), visibleWidth(out[0]), "rows are flush");
+});

package/src/models/layout.ts

@@ -185,3 +185,72 @@ export function fitRows(lines: readonly string[], maxRows: number): string[] {
   if (maxRows <= 0) return [];
   return lines.length <= maxRows ? [...lines] : lines.slice(0, maxRows);
 }
+
+// ---------------------------------------------------------------------------
+// The boxed two-panel layout
+// ---------------------------------------------------------------------------
+
+/** One content row of a panel: plain text, measured before any colour runs. */
+export type BoxRow = { text: string };
+
+/** Below this width a frame cannot be drawn; the rows are returned bare. */
+export const MIN_BOX_WIDTH = 10;
+/** Below this terminal width the preview panel is dropped, never squeezed. */
+export const MIN_SPLIT_WIDTH = 76;
+/** The menu never shrinks past this, so profile names stay readable. */
+const MIN_MENU_WIDTH = 30;
+/** Nor does it take more than this share when both panels compete. */
+const MAX_MENU_SHARE = 0.62;
+
+/**
+ * Wrap rows in a four-sided box of the given outer width.
+ *
+ * Every row is sized on its plain text to `width - 4` (two `│` columns plus a
+ * space of padding each side) and measured in display cells, so a wide glyph
+ * can never push the closing edge off the line.
+ */
+export function frameBox(rows: readonly BoxRow[], width: number): string[] {
+  if (width < MIN_BOX_WIDTH) return rows.map((row) => truncateToWidth(row.text, Math.max(0, width)));
+  const horizontal = "─".repeat(width - 2);
+  return [
+    `┌${horizontal}┐`,
+    ...rows.map((row) => `│ ${padToWidth(row.text, width - 4)} │`),
+    `└${horizontal}┘`,
+  ];
+}
+
+/** The widest row of a block, in display cells. */
+function contentWidth(rows: readonly BoxRow[]): number {
+  let max = 0;
+  for (const row of rows) max = Math.max(max, visibleWidth(row.text));
+  return max;
+}
+
+/**
+ * Two framed panels side by side, padded to equal height.
+ *
+ * Under {@link MIN_SPLIT_WIDTH}, or with nothing to preview, only the menu is
+ * returned: a preview crushed into a handful of columns is worse than none.
+ */
+export function sideBySide(menu: readonly BoxRow[], preview: readonly BoxRow[], width: number): string[] {
+  if (width < MIN_SPLIT_WIDTH || preview.length === 0) {
+    return frameBox(menu, Math.min(width, Math.max(MIN_BOX_WIDTH, contentWidth(menu) + 4)));
+  }
+
+  const gap = 1;
+  const menuWidth = Math.max(
+    MIN_MENU_WIDTH,
+    Math.min(contentWidth(menu) + 4, Math.floor(width * MAX_MENU_SHARE)),
+  );
+  const previewWidth = Math.max(MIN_BOX_WIDTH, width - menuWidth - gap);
+
+  // Pad to a common height first: framing a short panel and padding afterwards
+  // would leave its bottom border floating mid-block.
+  const height = Math.max(menu.length, preview.length);
+  const pad = (rows: readonly BoxRow[]): BoxRow[] =>
+    rows.length >= height ? [...rows] : [...rows, ...Array.from({ length: height - rows.length }, () => ({ text: "" }))];
+
+  const left = frameBox(pad(menu), menuWidth);
+  const right = frameBox(pad(preview), previewWidth);
+  return left.map((line, index) => `${line}${" ".repeat(gap)}${right[index] ?? ""}`);
+}

package/src/models/picker.test.ts

@@ -10,6 +10,7 @@ import {
   enter,
   navigate,
   pickerTitle,
+  previewRows,
   rebuildEntries,
   submitText,
   type PickerState,
@@ -529,3 +530,45 @@ test("no transition writes: every one returns state the caller may discard", ()
   const source = readFileSync(new URL("./picker.ts", import.meta.url), "utf8");
   assert.ok(!/writeFileSync|readFileSync/.test(source), "the state machine performs no IO");
 });
+
+// ---------------------------------------------------------------------------
+// The preview panel
+// ---------------------------------------------------------------------------
+
+test("the preview shows the profile under the cursor, model and level per slot", () => {
+  const state = createPickerState({
+    models: {},
+    thinking: {},
+    groups: new Map(),
+    profiles: {
+      rapido: {
+        models: { implement: "cliproxy/ds/deepseek-v4-pro", explore: "cliproxy/ds/deepseek-flash" },
+        thinking: { implement: "high", explore: "low" },
+      },
+      lento: { models: { implement: "cliproxy/personal/claude-opus-5" }, thinking: { implement: "xhigh" } },
+    },
+    activeProfile: "rapido",
+  });
+
+  // The menu is alphabetical, so the cursor opens on `lento`; one row down is
+  // `rapido`, and the preview follows the cursor rather than the active profile.
+  const rows = previewRows(navigate(state, 1)).map((row) => row.text);
+  assert.match(rows[0], /vista previa · rapido \(activo\)/, "the profile under the cursor is named");
+  assert.ok(rows.some((r) => /implement\s+→ cliproxy\/ds\/deepseek-v4-pro · high/.test(r)), rows.join("\n"));
+  assert.ok(rows.some((r) => /explore\s+→ cliproxy\/ds\/deepseek-flash · low/.test(r)), rows.join("\n"));
+  assert.ok(rows.some((r) => r.includes("proveedores: cliproxy")), "the providers are summarised");
+});
+
+test("the preview marks mechanism steps rather than pretending they take a model", () => {
+  const state = createPickerState({
+    models: {}, thinking: {}, groups: new Map(),
+    profiles: { p: { models: {}, thinking: {} } }, activeProfile: "p",
+  });
+  const rows = previewRows(state).map((row) => row.text);
+  assert.ok(rows.some((r) => r.includes("authorize") && r.includes(MECHANISM_PLACEHOLDER)), rows.join("\n"));
+});
+
+test("with no profile at all there is nothing to preview", () => {
+  const state = createPickerState({ models: {}, thinking: {}, groups: new Map(), profiles: {}, activeProfile: null });
+  assert.deepEqual(previewRows(state), [], "an empty preview is what suppresses the second panel");
+});

package/src/models/picker.ts

@@ -22,7 +22,7 @@
 // Forge's autotune screen is deliberately absent: autotune is a forge feature and
 // NODD has no learning loop to configure.
 
-import { SLOT_ROWS, isMechanismSlot } from "./slots.ts";
+import { MECHANISM_PLACEHOLDER, SLOT_ROWS, isMechanismSlot } from "./slots.ts";
 import { THINKING_LEVELS, type SlotThinking, type ThinkingLevel } from "./thinking.ts";
 import { isValidProfileName, type Profile } from "./profiles.ts";
 
@@ -675,3 +675,67 @@ function submitProfileName(
       : `perfil «${name}» creado — elegí los modelos (activar es aparte)`,
   });
 }
+
+// ---------------------------------------------------------------------------
+// The preview panel
+// ---------------------------------------------------------------------------
+
+/** One row of the preview panel. */
+export type PreviewRow = { text: string };
+
+/** The profile the preview should show, or null when there is nothing to show. */
+function previewTarget(state: PickerState): { name: string; profile: Profile } | null {
+  if (state.screen === "profile-actions" && state.drillProfile) {
+    const profile = state.edits.profiles[state.drillProfile];
+    return profile ? { name: state.drillProfile, profile } : null;
+  }
+  if (state.screen !== "main") return null;
+
+  // On the menu the cursor drives the preview, so arrowing down the list shows
+  // each profile in turn. Off a profile row it falls back to the active one.
+  const entry = state.entries[state.cursor];
+  const name = entry?.kind === "profile"
+    ? entry.value
+    : state.edits.activeProfile ?? Object.keys(state.edits.profiles).sort()[0];
+  if (!name) return null;
+  const profile = state.edits.profiles[name];
+  return profile ? { name, profile } : null;
+}
+
+/**
+ * The preview rows: every canonical step with its model and thinking level.
+ *
+ * Empty when there is no profile to show, which is what suppresses the second
+ * panel rather than drawing an empty box.
+ */
+export function previewRows(state: PickerState): PreviewRow[] {
+  const target = previewTarget(state);
+  if (!target) return [];
+
+  const { name, profile } = target;
+  const active = name === state.edits.activeProfile ? " (activo)" : "";
+  const rows: PreviewRow[] = [{ text: `vista previa · ${name}${active}` }, { text: "" }];
+
+  const width = Math.max(...SLOT_ROWS.map((row) => row.id.length));
+  const providers = new Set<string>();
+  for (const row of SLOT_ROWS) {
+    const label = row.id.padEnd(width);
+    if (isMechanismSlot(row.id)) {
+      rows.push({ text: `${label}   ${MECHANISM_PLACEHOLDER}` });
+      continue;
+    }
+    const model = profile.models?.[row.id];
+    if (!model) {
+      rows.push({ text: `${label} → sin asignar` });
+      continue;
+    }
+    const slash = model.indexOf("/");
+    if (slash > 0) providers.add(model.slice(0, slash));
+    const level = profile.thinking?.[row.id];
+    rows.push({ text: `${label} → ${model}${level ? ` · ${level}` : ""}` });
+  }
+
+  rows.push({ text: "" });
+  rows.push({ text: `proveedores: ${providers.size > 0 ? [...providers].sort().join(", ") : "por defecto"}` });
+  return rows;
+}