@crouton-kit/crouter 0.3.32 → 0.3.34

package/dist/builtin-views/settings/core.mjs

@@ -0,0 +1,397 @@
+// @ts-check
+/**
+ * Model ladders settings — portable core for the `settings` view.
+ *
+ * Reads/writes go through crtr commands (`sys config get` / `sys config set`)
+ * so both targets use the existing /__crtr/source bridge.
+ *
+ * @module settings/core
+ */
+
+/** @typedef {import('../../core/view/contract.js').SourceError} SourceError */
+/** @typedef {import('../../core/view/contract.js').IntentCtx<SettingsState>} Ctx */
+/** @typedef {import('../../types.js').ModelLaddersConfig} ModelLaddersConfig */
+/** @typedef {import('../../types.js').ModelStrength} ModelStrength */
+/** @typedef {import('../../types.js').ModelProvider} ModelProvider */
+
+const USER_SCOPE = 'user';
+const STRENGTHS = ['ultra', 'strong', 'medium', 'light'];
+/** @type {Record<ModelStrength, ModelProvider>} */
+const DEFAULT_MATRIX_SELECTION = { ultra: 'anthropic', strong: 'anthropic', medium: 'anthropic', light: 'anthropic' };
+
+/** @template T @param {T} data @returns {{ok:true, data:T}} */
+function ok(data) { return { ok: true, data }; }
+/** @param {SourceError} error @returns {{ok:false, error:SourceError}} */
+function fail(error) { return { ok: false, error }; }
+
+/** @param {unknown} v @returns {string} */
+function str(v) { return v == null ? '' : String(v); }
+
+/** @param {string} msg @param {SourceError['display']['level']} [level='error'] @returns {SourceError} */
+function settingsError(msg, level = 'error') {
+  return {
+    kind: 'settings-config',
+    display: {
+      headline: 'Settings unavailable',
+      explanation: msg,
+      nextStep: 'Press g to retry.',
+      level,
+      blocking: level === 'error',
+    },
+  };
+}
+
+/** @param {string} key @returns {import('../../core/view/contract.js').Source<unknown>} */
+function makeConfigGetSource(key) {
+  return {
+    id: `config-get-${key}`,
+    request: () => ({ kind: 'exec', bin: 'crtr', args: ['sys', 'config', 'get', key, '--scope', USER_SCOPE, '--json'] }),
+    parse: (raw) => {
+      if (!raw.ok || raw.exitCode !== 0) return fail(settingsError(str(raw.stderr || raw.stdout || `crtr sys config get ${key} failed`)));
+      let data;
+      try {
+        data = JSON.parse(String(raw.stdout || '').trim() || '{}');
+      } catch {
+        return fail(settingsError(`could not parse crtr sys config get ${key} output as JSON`));
+      }
+      if (!data || typeof data !== 'object' || !('value' in data)) {
+        return fail(settingsError(`unexpected response from crtr sys config get ${key}`));
+      }
+      return ok(/** @type {unknown} */ (data).value);
+    },
+  };
+}
+
+/** @param {string} key @param {string} value @returns {import('../../core/view/contract.js').Command<unknown>} */
+function makeConfigSetCommand(key, value) {
+  return {
+    id: `config-set-${key}`,
+    request: () => ({ kind: 'exec', bin: 'crtr', args: ['sys', 'config', 'set', key, '--value', value, '--scope', USER_SCOPE, '--json'] }),
+    parse: (raw) => {
+      if (!raw.ok || raw.exitCode !== 0) return fail(settingsError(str(raw.stderr || raw.stdout || `crtr sys config set ${key} failed`), 'error'));
+      let data;
+      try {
+        data = JSON.parse(String(raw.stdout || '').trim() || '{}');
+      } catch {
+        return fail(settingsError(`could not parse crtr sys config set ${key} output as JSON`));
+      }
+      if (!data || typeof data !== 'object' || !('value' in data)) {
+        return fail(settingsError(`unexpected response from crtr sys config set ${key}`));
+      }
+      return ok(/** @type {unknown} */ (data).value);
+    },
+  };
+}
+
+/** @typedef {{ kind:'defaultProvider' } | { kind:'matrix'; strength:ModelStrength } | { kind:'persona'; persona:string } | { kind:'addPersona' }} Row */
+
+/** @typedef {Object} EditState
+ * @property {'defaultProvider'|'matrixCell'|'personaStrength'|'personaNew'} kind
+ * @property {string} draft
+ * @property {string} value
+ * @property {string} label
+ * @property {ModelStrength} [strength]
+ * @property {ModelProvider} [provider]
+ * @property {string} [persona]
+ */
+
+/** @typedef {Object} SettingsState
+ * @property {ModelLaddersConfig|null} modelLadders
+ * @property {Record<string, ModelStrength>} personaStrengths
+ * @property {Record<ModelStrength, ModelProvider>} matrixSelection
+ * @property {number} cursor
+ * @property {number} scroll
+ * @property {number} lastFetch
+ * @property {SourceError|null} sourceError
+ * @property {EditState|null} edit
+ */
+
+/** @param {SettingsState} state @returns {Row[]} */
+export function buildRows(state) {
+  if (!state.modelLadders) return [];
+  const rows = [{ kind: 'defaultProvider' }];
+  for (const strength of STRENGTHS) rows.push({ kind: 'matrix', strength });
+  for (const persona of Object.keys(state.personaStrengths).sort((a, b) => a.localeCompare(b))) rows.push({ kind: 'persona', persona });
+  rows.push({ kind: 'addPersona' });
+  return rows;
+}
+
+/** @param {SettingsState} state @returns {number} */
+function cursorClamp(state) {
+  const rows = buildRows(state);
+  return rows.length === 0 ? 0 : Math.min(state.cursor, rows.length - 1);
+}
+
+/** @param {SettingsState} state @returns {Row|undefined} */
+function currentRow(state) {
+  return buildRows(state)[cursorClamp(state)];
+}
+
+/** @param {SettingsState} state @param {Row|undefined} row @returns {string} */
+export function settingsRowLabel(state, row) {
+  if (!row) return '';
+  if (row.kind === 'defaultProvider') return 'Default provider';
+  if (row.kind === 'matrix') return `${row.strength} strength`;
+  if (row.kind === 'persona') return row.persona;
+  return 'Add persona strength';
+}
+
+/** @param {string} draft @returns {ModelStrength | null} */
+function parseStrength(draft) {
+  const s = draft.trim();
+  return s === 'ultra' || s === 'strong' || s === 'medium' || s === 'light' ? s : null;
+}
+
+/** @param {string} draft @returns {{persona:string, strength:ModelStrength}|null} */
+function parsePersonaPair(draft) {
+  const s = draft.trim();
+  if (!s) return null;
+  const eq = s.indexOf('=');
+  if (eq > 0) {
+    const persona = s.slice(0, eq).trim();
+    const strength = parseStrength(s.slice(eq + 1));
+    return persona && strength ? { persona, strength } : null;
+  }
+  const parts = s.split(/\s+/).filter(Boolean);
+  if (parts.length >= 2) {
+    const strength = parseStrength(parts[parts.length - 1] || '');
+    const persona = parts.slice(0, -1).join(' ').trim();
+    return persona && strength ? { persona, strength } : null;
+  }
+  return null;
+}
+
+/** @param {SettingsState} state @param {Row} row @returns {{ kind:'defaultProvider'|'matrixCell'|'personaStrength'|'personaNew', draft:string, value:string, label:string, strength?:ModelStrength, provider?:ModelProvider, persona?:string }} */
+export function settingsTargetForRow(state, row) {
+  if (row.kind === 'defaultProvider') {
+    return { kind: 'defaultProvider', draft: '', value: state.modelLadders?.defaultProvider ?? 'anthropic', label: 'default provider' };
+  }
+  if (row.kind === 'matrix') {
+    const provider = state.matrixSelection[row.strength] ?? DEFAULT_MATRIX_SELECTION[row.strength];
+    return {
+      kind: 'matrixCell',
+      strength: row.strength,
+      provider,
+      draft: '',
+      value: state.modelLadders?.[provider]?.[row.strength] ?? '',
+      label: `${provider} / ${row.strength}`,
+    };
+  }
+  if (row.kind === 'persona') {
+    return { kind: 'personaStrength', persona: row.persona, draft: '', value: state.personaStrengths[row.persona] ?? 'strong', label: row.persona };
+  }
+  return { kind: 'personaNew', draft: '', value: '', label: 'new persona strength' };
+}
+
+/** @param {Ctx} ctx @returns {Promise<{ok:true, data:{ladders: ModelLaddersConfig, personaStrengths: Record<string, ModelStrength>}} | {ok:false, error:SourceError}>} */
+async function loadConfig(ctx) {
+  const [ladders, personaStrengths] = await Promise.all([
+    ctx.resolve(makeConfigGetSource('modelLadders')),
+    ctx.resolve(makeConfigGetSource('personaStrengths')),
+  ]);
+  if (!ladders.ok) return ladders;
+  if (!personaStrengths.ok) return personaStrengths;
+  return ok({ ladders: /** @type {ModelLaddersConfig} */ (ladders.data), personaStrengths: /** @type {Record<string, ModelStrength>} */ (personaStrengths.data) });
+}
+
+/** @param {Ctx} ctx @param {string} msg @param {SourceError['display']['level']} [level='error'] */
+function setBanner(ctx, msg, level = 'error') {
+  if (level === 'info') ctx.signal.setStatus(msg);
+  else ctx.signal.setBanner(msg, level);
+}
+
+/** @typedef {{ kind:'defaultProvider'|'matrixCell'|'personaStrength'|'personaNew', value:string, strength?:ModelStrength, provider?:ModelProvider, persona?:string }} PersistTarget */
+
+/** Validate a target, write it via `crtr sys config set`, fold the result into
+ *  local state, and re-pull. Shared by submitEdit (text fields) and applyValue
+ *  (one-click enum chips on web). Returns false on validation/transport failure
+ *  (a banner is already set). @param {Ctx} ctx @param {PersistTarget} target */
+async function persist(ctx, target) {
+  const value = String(target.value ?? '').trim();
+  if (target.kind === 'defaultProvider') {
+    if (value !== 'anthropic' && value !== 'openai') { setBanner(ctx, 'default provider must be anthropic or openai', 'action'); return false; }
+  } else if (target.kind === 'matrixCell') {
+    if (!value) { setBanner(ctx, 'model id cannot be empty', 'action'); return false; }
+  } else if (target.kind === 'personaStrength') {
+    if (!parseStrength(value)) { setBanner(ctx, 'persona strength must be ultra, strong, medium, or light', 'action'); return false; }
+  } else if (target.kind === 'personaNew') {
+    if (!parsePersonaPair(value)) { setBanner(ctx, 'use "kind strength" or "kind=strength"', 'action'); return false; }
+  }
+
+  ctx.signal.setStatus('Saving…');
+  let key = '';
+  let writeValue = '';
+  if (target.kind === 'defaultProvider') { key = 'modelLadders.defaultProvider'; writeValue = value; }
+  else if (target.kind === 'matrixCell') { key = `modelLadders.${target.provider}.${target.strength}`; writeValue = value; }
+  else if (target.kind === 'personaStrength') { key = `personaStrengths.${target.persona}`; writeValue = value; }
+  else {
+    const pair = parsePersonaPair(value);
+    if (!pair) return false;
+    key = `personaStrengths.${pair.persona}`;
+    writeValue = pair.strength;
+  }
+
+  const r = await ctx.execute(makeConfigSetCommand(key, writeValue));
+  if (!r.ok) {
+    setBanner(ctx, r.error.display.explanation || r.error.display.headline, r.error.display.level);
+    ctx.signal.setStatus(null);
+    return false;
+  }
+  ctx.set((s) => {
+    const next = { ...s, edit: null };
+    if (target.kind === 'defaultProvider' && next.modelLadders) next.modelLadders = { ...next.modelLadders, defaultProvider: value };
+    if (target.kind === 'matrixCell' && next.modelLadders) next.modelLadders = { ...next.modelLadders, [target.provider]: { ...next.modelLadders[target.provider], [target.strength]: value } };
+    if (target.kind === 'personaStrength') next.personaStrengths = { ...next.personaStrengths, [target.persona]: /** @type {ModelStrength} */ (value) };
+    if (target.kind === 'personaNew') {
+      const pair = parsePersonaPair(value);
+      if (pair) next.personaStrengths = { ...next.personaStrengths, [pair.persona]: pair.strength };
+    }
+    return next;
+  });
+  ctx.signal.setStatus('Saved');
+  await ctx.dispatch('refresh');
+  return true;
+}
+
+/** @type {import('../../core/view/contract.js').ViewCore<SettingsState>} */
+const core = {
+  manifest: {
+    id: 'settings',
+    title: 'Model Ladders',
+    subtitle: 'provider × strength matrix and persona strengths',
+    description: 'edit model ladders and personaStrengths through crtr commands',
+  },
+
+  init() {
+    return {
+      modelLadders: null,
+      personaStrengths: {},
+      matrixSelection: { ...DEFAULT_MATRIX_SELECTION },
+      cursor: 0,
+      scroll: 0,
+      lastFetch: 0,
+      sourceError: null,
+      edit: null,
+    };
+  },
+
+  sources: {
+    modelLadders: makeConfigGetSource('modelLadders'),
+    personaStrengths: makeConfigGetSource('personaStrengths'),
+  },
+
+  intents: {
+    async refresh(ctx) {
+      ctx.signal.setStatus('Loading settings…');
+      const r = await loadConfig(ctx);
+      if (!r.ok) {
+        if (ctx.state.lastFetch === 0 || ctx.state.modelLadders === null) {
+          ctx.set((s) => ({ ...s, sourceError: r.error, lastFetch: Date.now() }));
+        } else {
+          setBanner(ctx, r.error.display.explanation || r.error.display.headline, r.error.display.level);
+        }
+        ctx.signal.setStatus(null);
+        return;
+      }
+      ctx.set((s) => {
+        const next = {
+          ...s,
+          modelLadders: r.data.ladders,
+          personaStrengths: r.data.personaStrengths,
+          sourceError: null,
+          lastFetch: Date.now(),
+        };
+        return { ...next, cursor: Math.min(next.cursor, Math.max(0, buildRows(next).length - 1)) };
+      });
+      ctx.signal.clearBanner();
+      ctx.signal.setStatus(null);
+    },
+
+    cursorDown: (ctx) => ctx.set((s) => ({ ...s, cursor: Math.min(Math.max(0, buildRows(s).length - 1), s.cursor + 1) })),
+    cursorUp: (ctx) => ctx.set((s) => ({ ...s, cursor: Math.max(0, s.cursor - 1) })),
+
+    matrixLeft: (ctx) => ctx.set((s) => {
+      const row = currentRow(s);
+      if (!row || row.kind !== 'matrix') return s;
+      return { ...s, matrixSelection: { ...s.matrixSelection, [row.strength]: 'anthropic' } };
+    }),
+    matrixRight: (ctx) => ctx.set((s) => {
+      const row = currentRow(s);
+      if (!row || row.kind !== 'matrix') return s;
+      return { ...s, matrixSelection: { ...s.matrixSelection, [row.strength]: 'openai' } };
+    }),
+
+    beginEdit: (ctx) => ctx.set((s) => {
+      const row = currentRow(s);
+      if (!row || s.modelLadders === null) return s;
+      const target = settingsTargetForRow(s, row);
+      return { ...s, edit: { ...target } };
+    }),
+
+    // Open the editor for a SPECIFIC target named by the click (web mouse path),
+    // prefilling the draft with the current value so it edits in place. Unlike
+    // beginEdit it does not depend on cursor / matrixSelection.
+    beginEditFor: (ctx, payload) => ctx.set((s) => {
+      if (s.modelLadders === null) return s;
+      const p = payload && typeof payload === 'object' ? /** @type {Record<string, unknown>} */ (payload) : {};
+      if (p.kind === 'matrix' && typeof p.strength === 'string') {
+        const provider = p.provider === 'openai' ? 'openai' : 'anthropic';
+        const cur = s.modelLadders?.[provider]?.[/** @type {ModelStrength} */ (p.strength)] ?? '';
+        return { ...s, edit: { kind: 'matrixCell', strength: /** @type {ModelStrength} */ (p.strength), provider, draft: cur, value: cur, label: `${provider} / ${p.strength}` } };
+      }
+      if (p.kind === 'defaultProvider') {
+        const cur = s.modelLadders.defaultProvider ?? 'anthropic';
+        return { ...s, edit: { kind: 'defaultProvider', draft: cur, value: cur, label: 'default provider' } };
+      }
+      if (p.kind === 'persona' && typeof p.persona === 'string') {
+        const cur = s.personaStrengths[p.persona] ?? 'strong';
+        return { ...s, edit: { kind: 'personaStrength', persona: p.persona, draft: cur, value: cur, label: p.persona } };
+      }
+      return { ...s, edit: { kind: 'personaNew', draft: '', value: '', label: 'new persona strength' } };
+    }),
+
+    setDraft: (ctx, draft) => ctx.set((s) => (s.edit ? { ...s, edit: { ...s.edit, draft: typeof draft === 'string' ? draft : '' } } : s)),
+
+    cancelEdit: (ctx) => ctx.set((s) => (s.edit ? { ...s, edit: null } : s)),
+
+    async submitEdit(ctx) {
+      const edit = ctx.state.edit;
+      if (!edit) return;
+      await persist(ctx, { kind: edit.kind, value: edit.draft, strength: edit.strength, provider: edit.provider, persona: edit.persona });
+    },
+
+    // One-click save for enum fields (web chips): no editor round-trip. Payload
+    // is a fully-specified PersistTarget.
+    async applyValue(ctx, payload) {
+      const p = payload && typeof payload === 'object' ? /** @type {PersistTarget} */ (payload) : null;
+      if (!p || ctx.state.modelLadders === null) return;
+      await persist(ctx, p);
+    },
+
+    jumpAddPersona: (ctx) => ctx.set((s) => ({ ...s, cursor: Math.max(0, buildRows(s).length - 1) })),
+
+    selectRow: (ctx, payload) => ctx.set((s) => {
+      const p = payload && typeof payload === 'object' ? /** @type {Record<string, unknown>} */ (payload) : {};
+      const rows = buildRows(s);
+      const target = rows.findIndex((row) => {
+        if (row.kind === 'defaultProvider' && p.kind === 'defaultProvider') return true;
+        if (row.kind === 'matrix' && p.kind === 'matrix' && p.strength === row.strength) return true;
+        if (row.kind === 'persona' && p.kind === 'persona' && p.persona === row.persona) return true;
+        if (row.kind === 'addPersona' && p.kind === 'addPersona') return true;
+        return false;
+      });
+      if (target < 0) return s;
+      if (p.kind === 'matrix' && (p.provider === 'anthropic' || p.provider === 'openai') && typeof p.strength === 'string') {
+        return { ...s, cursor: target, matrixSelection: { ...s.matrixSelection, [/** @type {ModelStrength} */ (p.strength)]: /** @type {ModelProvider} */ (p.provider) } };
+      }
+      return { ...s, cursor: target };
+    }),
+
+    quit: (ctx) => ctx.signal.quit(),
+  },
+};
+
+export const configGetSource = makeConfigGetSource;
+export const configSetCommand = makeConfigSetCommand;
+
+export default core;

package/dist/builtin-views/settings/text.mjs

@@ -0,0 +1,40 @@
+// @ts-check
+/**
+ * Model ladders settings — text presenter for the `settings` view.
+ *
+ * @module settings/text
+ */
+
+import { buildRows } from './core.mjs';
+
+/** @typedef {import('./core.mjs').SettingsState} SettingsState */
+
+/** @param {SettingsState} state @param {import('../../core/view/contract.js').DumpContext} [ctx] @returns {string} */
+export function dump(state, ctx) {
+  const lines = ['Model ladders'];
+  if (ctx && ctx.banner) lines.push('', `[${ctx.banner.level}] ${ctx.banner.msg}`);
+  else if (state.sourceError) lines.push('', `[${state.sourceError.display.level}] ${state.sourceError.display.explanation}`);
+  lines.push('', 'Provider × strength matrix', '');
+  if (state.sourceError && state.modelLadders === null) {
+    const d = state.sourceError.display;
+    return ['Model ladders', '', `[${d.level}] ${d.headline}`, d.explanation, d.nextStep].filter(Boolean).join('\n');
+  }
+  if (state.modelLadders === null) return lines.concat(['(loading…)']).join('\n');
+  for (const row of buildRows(state)) {
+    if (row.kind === 'defaultProvider') {
+      lines.push(`default provider: ${state.modelLadders.defaultProvider ?? 'anthropic'}`);
+      continue;
+    }
+    if (row.kind === 'matrix') {
+      const provider = state.matrixSelection[row.strength] ?? 'anthropic';
+      lines.push(`${row.strength}: anthropic=${state.modelLadders.anthropic?.[row.strength] ?? '—'} | openai=${state.modelLadders.openai?.[row.strength] ?? '—'}${provider ? ` [selected ${provider}]` : ''}`);
+      continue;
+    }
+    if (row.kind === 'persona') {
+      lines.push(`${row.persona}: ${state.personaStrengths[row.persona] ?? 'strong'}`);
+      continue;
+    }
+    lines.push('+ add persona strength');
+  }
+  return lines.join('\n');
+}

package/dist/builtin-views/settings/tui.mjs

@@ -0,0 +1,95 @@
+// @ts-check
+/**
+ * Model ladders settings — TUI presenter for the `settings` view.
+ *
+ * @module settings/tui
+ */
+
+import { loadingState, notReadyState } from '../_lib/states.mjs';
+import { buildRows, settingsRowLabel, settingsTargetForRow } from './core.mjs';
+
+/** @typedef {import('./core.mjs').SettingsState} SettingsState */
+
+/** @param {SettingsState} state @returns {import('../../core/tui/draw.js').ListItemRow[]} */
+function rows(state) {
+  const out = [];
+  const dataRows = buildRows(state);
+  for (const row of dataRows) {
+    if (row.kind === 'defaultProvider') {
+      const value = state.modelLadders?.defaultProvider ?? 'anthropic';
+      out.push({ spans: [{ text: 'Default provider', style: { bold: true } }, { text: '  ' }, { text: value, style: { fg: '36' } }] });
+      continue;
+    }
+    if (row.kind === 'matrix') {
+      const selected = state.matrixSelection[row.strength] ?? 'anthropic';
+      const a = state.modelLadders?.anthropic?.[row.strength] ?? '—';
+      const o = state.modelLadders?.openai?.[row.strength] ?? '—';
+      out.push({
+        spans: [
+          { text: row.strength, style: { bold: true } },
+          { text: '  ' },
+          { text: 'anthropic: ', style: { dim: true } },
+          { text: a, style: selected === 'anthropic' ? { reverse: true, bold: true } : undefined },
+          { text: '   ' },
+          { text: 'openai: ', style: { dim: true } },
+          { text: o, style: selected === 'openai' ? { reverse: true, bold: true } : undefined },
+        ],
+      });
+      continue;
+    }
+    if (row.kind === 'persona') {
+      out.push({ spans: [{ text: row.persona, style: { bold: true } }, { text: '  →  ' }, { text: state.personaStrengths[row.persona] ?? 'strong', style: { fg: '33' } }] });
+      continue;
+    }
+    out.push({ spans: [{ text: '+ add persona strength', style: { fg: '32', bold: true } }] });
+  }
+  return out;
+}
+
+/** @param {SettingsState} state @param {import('../../core/tui/draw.js').Draw} draw @param {import('../../core/tui/draw.js').Rect} content */
+export function render(state, draw, content) {
+  if (content.width <= 0 || content.height <= 0) return;
+  if (state.sourceError && state.modelLadders === null) {
+    const d = state.sourceError.display;
+    notReadyState(draw, content, {
+      glyph: d.level === 'action' ? '⊙' : '⚠',
+      glyphFg: d.level === 'action' ? '33' : '31',
+      headline: d.headline,
+      explanation: d.explanation,
+      nextStep: d.nextStep,
+    });
+    return;
+  }
+  if (state.modelLadders === null) {
+    loadingState(draw, content, { rows: Math.min(5, content.height), label: 'Loading model ladders…' });
+    return;
+  }
+
+  const header = state.edit
+    ? `Replacing ${state.edit.label} — Enter saves, Esc cancels`
+    : 'j/k move · h/l switch matrix cell · enter edit · n add persona · g refresh';
+  draw.text(content.row, content.col, 'Model ladders', { bold: true });
+  draw.text(content.row + 1, content.col, header, { dim: true });
+  if (state.edit) {
+    draw.text(content.row + 2, content.col, `Current: ${state.edit.value || '(empty)'}`, { dim: true });
+    draw.text(content.row + 3, content.col, `Replacement: ${state.edit.draft}`, { fg: '33' });
+  }
+  const listRect = { row: content.row + (state.edit ? 4 : 3), col: content.col, width: content.width, height: Math.max(0, content.height - (state.edit ? 4 : 3)) };
+  const items = rows(state);
+  const res = draw.list(listRect, items, state.cursor, state.scroll);
+  state.scroll = res.scroll;
+}
+
+export const keymap = [
+  { keys: ['j', 'down'], intent: 'cursorDown', when: (s) => !s.edit, hint: { keys: 'j/k', label: 'move' } },
+  { keys: ['k', 'up'], intent: 'cursorUp', when: (s) => !s.edit },
+  { keys: ['h', 'left'], intent: 'matrixLeft', when: (s) => !s.edit, hint: { keys: 'h/l', label: 'switch cell' } },
+  { keys: ['l', 'right'], intent: 'matrixRight', when: (s) => !s.edit },
+  { keys: ['n'], intent: 'jumpAddPersona', when: (s) => !s.edit, hint: { keys: 'n', label: 'add persona' } },
+  { keys: ['g'], intent: 'refresh', when: (s) => !s.edit, hint: { keys: 'g', label: 'refresh' } },
+  { keys: ['q'], intent: 'quit', hint: { keys: 'q', label: 'quit' } },
+  { capture: 'setDraft', when: (s) => !!s.edit },
+  { keys: ['enter', 'return'], intent: 'submitEdit', when: (s) => !!s.edit },
+  { keys: ['enter', 'return'], intent: 'beginEdit', when: (s) => !s.edit, hint: { keys: 'enter', label: 'edit' } },
+  { keys: ['escape', 'esc'], intent: 'cancelEdit', when: (s) => !!s.edit },
+];