@gonrocca/nodd 0.3.1 → 0.4.1

package/extensions/nodd-models.test.ts

@@ -279,3 +279,39 @@ test("nothing in this extension names forge's config file", () => {
   assert.ok(!source.includes(`zero${"."}json`), "NODD never opens forge's config");
   assert.ok(source.includes("nodd.json") || source.includes("noddConfigPath"), "it uses its own");
 });
+
+test("the picker offers the providers you can actually use, not the whole catalogue", () => {
+  // pi's registry carries every provider it knows how to speak to — bedrock,
+  // baseten, huggingface, cloudflare — whether or not you have credentials for
+  // any of them. Browsing all of it meant scrolling past dozens of providers
+  // that cannot answer. `getAvailable()` is pi's own answer to "which of these
+  // has configured auth", so that is what the picker lists.
+  const registry = {
+    getAll: () => [
+      { provider: "cliproxy", id: "ds/deepseek-flash" },
+      { provider: "amazon-bedrock", id: "claude-3" },
+      { provider: "huggingface", id: "meta-llama/x" },
+    ],
+    getAvailable: () => [{ provider: "cliproxy", id: "ds/deepseek-flash" }],
+  };
+
+  const groups = register.groupsFrom(registry);
+  assert.deepEqual([...groups.keys()], ["cliproxy/ds"], "only the configured provider is browsable");
+});
+
+test("with no availability information the full registry is still offered", () => {
+  // An older host, or one that cannot answer, must not leave the picker empty:
+  // showing everything beats showing nothing.
+  const groups = register.groupsFrom({ getAll: () => [{ provider: "anthropic", id: "claude-opus-4-1" }] });
+  assert.deepEqual([...groups.keys()], ["anthropic"]);
+});
+
+test("an empty availability list falls back rather than offering nothing", () => {
+  // Availability is refreshed asynchronously, so early in a session it can be
+  // legitimately empty. Trusting it blindly would show an empty provider list.
+  const groups = register.groupsFrom({
+    getAll: () => [{ provider: "anthropic", id: "claude-opus-4-1" }],
+    getAvailable: () => [],
+  });
+  assert.deepEqual([...groups.keys()], ["anthropic"], "an empty answer is not an answer");
+});

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 = {
@@ -48,13 +48,31 @@ export function fileConfigIo(path: string = noddConfigPath()): ConfigIo {
   };
 }
 
-type ModelRegistry = { getAll(): RegistryModel[] };
+type ModelRegistry = {
+  getAll(): RegistryModel[];
+  /** pi's own answer to "which providers have configured auth". */
+  getAvailable?(): RegistryModel[];
+};
 
 const USAGE =
   "uso: /nodd-models · /nodd-models <slot>=<provider>/<modelo> · /nodd-models profile [list|new <n>|save [n]|use <n>|delete <n>]";
 
+/**
+ * The models worth browsing.
+ *
+ * pi's registry lists every provider it can speak to — bedrock, baseten,
+ * huggingface — whether or not credentials exist for any of them, which buried
+ * the few usable ones under dozens that cannot answer. `getAvailable()` narrows
+ * that to the configured providers.
+ *
+ * An empty or missing answer falls back to the full registry: availability is
+ * refreshed asynchronously, so early in a session it can be legitimately empty,
+ * and an empty picker is worse than a long one.
+ */
 function groupsFrom(registry: ModelRegistry | undefined): Map<string, string[]> {
   try {
+    const available = registry?.getAvailable?.();
+    if (available && available.length > 0) return groupByProvider(available);
     const all = registry?.getAll?.();
     return all && all.length > 0 ? groupByProvider(all) : new Map();
   } catch {
@@ -211,7 +229,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 +244,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`. */
@@ -357,5 +380,6 @@ function register(pi?: PiApi): void {
 register.runPicker = runPicker;
 register.createComponent = createComponent;
 register.pickerInput = pickerInput;
+register.groupsFrom = groupsFrom;
 
 export default register;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gonrocca/nodd",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "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,58 @@ 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");
+});
+
+test("choosing through a prefixed group does not double the prefix", () => {
+  // The group key is `cliproxy/ds` and the id inside it is `ds/deepseek-v4-pro`:
+  // joining them naively produced `cliproxy/ds/ds/deepseek-v4-pro`, a model id
+  // that resolves to nothing. The key's prefix belongs to the id, not to the
+  // provider, so only the provider part may be prepended.
+  let state = open({ groups: new Map([["cliproxy/ds", ["ds/deepseek-v4-pro"]]]) });
+  state = press(state, "edit-loose");
+  state = assign(state, "implement", "cliproxy/ds", "ds/deepseek-v4-pro", "high");
+
+  assert.equal(state.edits.models.implement, "cliproxy/ds/deepseek-v4-pro");
+  assert.equal(state.edits.thinking.implement, "high");
+});

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";
 
@@ -528,9 +528,15 @@ function commitDrill(state: PickerState, level: ThinkingLevel): PickerState {
   const { drillSlot, drillProvider, drillModel } = state;
   if (drillSlot === null || drillModel === null) return state;
 
-  // No provider is a bare model id — which is what the empty-registry path
+  // `drillProvider` is a group key, and a pooled provider's key carries the
+  // pool prefix (`cliproxy/ds`) which the id already repeats
+  // (`ds/deepseek-v4-pro`). Only the provider part is prepended, or the commit
+  // doubles the prefix into an id that resolves to nothing.
+  //
+  // No provider at all is a bare model id — what the empty-registry path
   // produces, and what the command's validation accepts.
-  const qualified = drillProvider ? `${drillProvider}/${drillModel}` : drillModel;
+  const provider = drillProvider?.split("/")[0] ?? null;
+  const qualified = provider ? `${provider}/${drillModel}` : drillModel;
   return {
     ...state,
     edits: {
@@ -675,3 +681,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;
+}