heartcode 0.1.12 → 0.1.14

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 What changed in each version of HeartCode, newest first.
 
+## 0.1.14 (2026-10-30)
+
+- Settings page, Providers & models: one full-width list. Tick models (or a whole provider, or
+  everything shown) and add them to your list or take them off it at once; a click on one still
+  adds or removes it. Each provider is one line; its model list switch, the models added by name
+  and Delete are in its Edit dialog. Your list is a button to the Your models page, which now has
+  what to do when a model fails.
+
+## 0.1.13 (2026-10-30)
+
+- Settings no longer go back by themselves: a save writes only what changed, so another HeartCode
+  or settings page with an older copy doesn't undo your change (and keys HeartCode doesn't know stay).
+- A settings change reaches every HeartCode running on the same settings at once, mid-task too: the
+  model order, prompts and HEARTCODE.md, hooks, skills, MCP servers. Open settings pages update by themselves.
+- `--temp` runs going on at once share one throwaway folder: a change in one reaches the others,
+  never your real settings. Ctrl+C now cleans it up too.
+- Settings page: nothing is kept in the browser (the provider ranking, sorts and folds are in
+  ~/.heart); Save order is always there; Invert selection on Your models.
+
 ## 0.1.12 (2026-10-30)
 
 - `auto` is the name for your model list (#1, then the next when one fails); `default` still works.

package/SKILL.md

@@ -77,9 +77,10 @@ image, one that can't call tools gets the tool calls as text.
 
 `--provider <name>` and `-u <url>` (a server for this run) also mean one model, alone.
 
-A run picks up settings the user changes meanwhile (`heart settings`, or `~/.heart` by hand)
-without being restarted: a new model order from its next request, MCP servers and skills from its
-next message.
+A run picks up settings the user changes meanwhile (`heart settings`, another HeartCode, or
+`~/.heart` by hand) without being restarted, from its next request: the model order, prompts,
+hooks, skills, MCP servers. `--temp` runs share one throwaway folder, so a change in one reaches the
+other `--temp` runs going on, never the real ones.
 
 `heart` is installed by `npm start` in the HeartCode folder. `heartcode` is the same command.
 Needs Node.js 20 or newer. No providers? See "Setting up a model" below.
@@ -133,7 +134,7 @@ can't switch the model you chose.
 | Everything (edits and commands) | `--permission-mode all` (the default unless the user set another) |
 | Changes kept apart from the user's files | `--worktree=<name>` (in a git repo): it works in `.heartcode/worktrees/<name>` on the branch `heartcode/<name>`; kept if anything changed (merge it from there), removed if nothing did |
 | A cap on how long it works | `--max-turns 30` (model steps), `--max-retries 3` (a failing provider) |
-| Nothing written to the user's `~/.heart` (sessions, logs, settings) | `--temp` |
+| Nothing written to the user's `~/.heart` (sessions, logs, settings) | `--temp` (a throwaway copy, shared by the `--temp` runs going on at once) |
 
 Tool names: HeartCode's own (`read_file`, `edit_file`, `write_file`, `run_command`, `search`,
 `list_files`, `web_fetch`, `web_search`…) or Claude Code's (`Read`, `Edit`, `Write`, `Bash`,

package/bin/heart.js

@@ -4,9 +4,10 @@
 //   heart .                   this folder
 //   heart ~/code/my-app       that folder (a folder: a file is an error)
 //   heart ~/code/my-app "fix the failing test" -m …   then anything heartcode takes (heart --help)
-//   heart --temp …            a throwaway ~/.heart: only your config.json (providers, keys), the
-//                             models' test results and prices copied in; deleted when HeartCode
-//                             quits; your own is never written to
+//   heart --temp …            a throwaway ~/.heart, shared by the --temp runs going on at once:
+//                             your config.json (providers, keys), the models' test results and
+//                             prices copied in; deleted when the last of them quits; your own is
+//                             never written to
 // Logs, when they're switched on (the settings page: Logging): each run's log in
 // ~/.heart/logs/runs/<day-month-year-hour-min-sec>/, a file per tab ("log": true in config.json);
 // each request to a model in ~/.heart/logs/requests/<same>/, a file per request ("logRequests").
@@ -30,15 +31,36 @@ const stamp = (() => {
   return `${d.getDate()}-${d.getMonth() + 1}-${d.getFullYear()}-${d.getHours()}-${d.getMinutes()}-${d.getSeconds()}`.replace(/\b(\d)\b/g, '0$1')
 })()
 
-// --temp: HeartCode's folder is a new one in the system's temp folder
+// --temp: HeartCode's folder is one in the system's temp folder, shared by every --temp run going
+// on at the same time (a setting changed in one reaches the others, as ~/.heart's do for the real
+// ones). The first one makes it, the last one to quit deletes it. Each run's pid is a file in
+// .runs/ (a run that crashed leaves one: its process is gone, so it doesn't count).
 const temp = args.includes('--temp')
 if (temp) {
   args.splice(args.indexOf('--temp'), 1)
-  const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'heart-temp-'))
-  // your providers and keys; what HeartCode learned about each model and prices (or it tests them again)
-  for (const f of ['config.json', 'models', 'prices.json']) if (fs.existsSync(path.join(realHome, f))) fs.cpSync(path.join(realHome, f), path.join(dir, f), { recursive: true })
+  const dir = path.join(os.tmpdir(), `heart-temp-${os.userInfo().username}`)
+  const runs = path.join(dir, '.runs')
+  const alive = (pid) => {
+    try {
+      return process.kill(Number(pid), 0), true
+    } catch (e) {
+      return e.code === 'EPERM'
+    }
+  }
+  const others = () => (fs.existsSync(runs) ? fs.readdirSync(runs).filter((pid) => Number(pid) !== process.pid && (alive(pid) || (fs.rmSync(path.join(runs, pid), { force: true }), false))) : [])
+  if (!others().length) {
+    fs.rmSync(dir, { recursive: true, force: true }) // left by a crashed run: from your settings again
+    fs.mkdirSync(runs, { recursive: true })
+    // your providers and keys; what HeartCode learned about each model and prices (or it tests them again)
+    for (const f of ['config.json', 'models', 'prices.json']) if (fs.existsSync(path.join(realHome, f))) fs.cpSync(path.join(realHome, f), path.join(dir, f), { recursive: true })
+  }
+  fs.writeFileSync(path.join(runs, String(process.pid)), '')
   process.env.HEART_HOME = dir
-  process.on('exit', () => fs.rmSync(dir, { recursive: true, force: true }))
+  process.on('exit', () => {
+    fs.rmSync(path.join(runs, String(process.pid)), { force: true })
+    if (!others().length) fs.rmSync(dir, { recursive: true, force: true })
+  })
+  process.once('SIGINT', () => process.exit(130)) // Ctrl+C (heart settings, -p): through 'exit', so the folder goes too
 }
 
 // a folder first: HeartCode opens it (subcommands and options go straight through)

package/bin/heartcode.js

@@ -2,7 +2,7 @@
 import path from 'node:path'
 import { parseArgs } from 'node:util'
 import { Client } from '../src/client.js'
-import { loadConfig, saveConfig, readJson, writeJson, providerName, CONFIG_FILE, HOME, AUTO_MODEL, isAuto, parseModel, VERSION } from '../src/config.js'
+import { loadConfig, saveConfig, readJson, writeJson, providerName, CONFIG_FILE, HOME, AUTO_MODEL, isAuto, parseModel, takeIn, whatOf, VERSION } from '../src/config.js'
 import { probe, loadProfile, strategy, describe, profilePath, profileFrom } from '../src/probe.js'
 import { learnFromUsage, LIMIT_MS } from '../src/context.js'
 import { Session, transcript } from '../src/agent.js'
@@ -26,6 +26,7 @@ import { createWorktree, worktreeState, removeWorktree } from '../src/worktree.j
 import { runAcp } from '../src/acp.js'
 import { Tabs } from '../src/tabs.js'
 import { startSettings } from '../src/settings.js'
+import { loadHooks } from '../src/hooks.js'
 import { RESETS, reset, resetPaths, resetCode } from '../src/reset.js'
 
 const LOCAL_SERVERS = ['http://localhost:11434/v1', 'http://localhost:1234/v1', 'http://localhost:8080/v1']
@@ -55,8 +56,9 @@ ${c.bold('options')}
       --ask              ask before every edit and command, this run
       --hide-thinking    collapse the model's thinking to one line
   -C, --cwd <dir>        project folder (default: current folder)
-      --temp             a throwaway settings folder for this run (your providers, model tests
-                         and prices copied in; deleted after); ~/.heart isn't touched
+      --temp             a throwaway settings folder (your providers, model tests and prices
+                         copied in), shared by the --temp runs going on at once and deleted
+                         after the last; ~/.heart isn't touched
       --context <n>      context window size in tokens
       --force            re-run the probe
       --save             keep the given -u/-m/--api-key/... in ${CONFIG_FILE}
@@ -179,12 +181,15 @@ class App {
     return mcp
   }
 
-  // After a skill or MCP server was saved or deleted (by the director or /import).
-  reload(kind) {
+  // After a skill or MCP server was saved or deleted (the settings page, the director, /import):
+  // from the next tool call. The old servers are stopped once the message in progress is done
+  // (busy), so a call to one of them finishes.
+  reload(kind, busy = false) {
     if (kind === 'skill') this.skills = loadSkills(this.root)
     if (kind === 'mcp') {
-      this.mcp.dispose()
+      const old = this.mcp
       this.mcp = this.newMcp()
+      busy ? this.later.push(() => old.dispose()) : old.dispose()
     }
     if (this.s) Object.assign(this.s, { skills: this.skills, mcp: this.mcp })
   }
@@ -852,13 +857,13 @@ function openBrowser(url) {
   spawnSync(cmd, args, { stdio: 'ignore' })
 }
 
-// A change on the settings page (in cfg, saved), brought into every open tab and run (also -p and
-// ACP): right away, the model list too (the running task's next request goes to the new #1); MCP
-// servers and skills after the reply in progress.
+// A change of the settings (the settings page, another HeartCode on the same folder, a hand), brought
+// into every open tab and run (also -p and ACP) right away: the running task's next request has it
+// (the model list's #1, the prompts, hooks, skills, MCP servers…).
 function applySettings(apps, cfg, what) {
   const before = themeCodes()
   if (what === 'theme' || what === 'setting:theme') setTheme(cfg.theme)
-  if (what === 'prompts') reloadPrompts() // from each tab's next message
+  if (what === 'prompts') reloadPrompts()
   if (['setting:log', 'setting:logRequests', 'setting:logDetail'].includes(what)) useRequestLog(cfg) // the run's log and the requests', on or off now
   if (what === 'setting:logDays') pruneLogs(logDays(cfg))
   settingsSeen(what) // the watcher (watchSettings) mustn't take it in a second time
@@ -888,7 +893,9 @@ function applySettings(apps, cfg, what) {
     // the window size, or a model set up or measured on the page: the model in use takes it again
     // from its profile now (it saves its profile as it learns, so it mustn't keep the old one)
     if ((what === 'setting:context' || what === 'profile') && app.s) app.s.client.onUse?.({ provider: app.s.client.provider, model: app.s.client.model })
-    if (what === 'mcp' || what === 'skill') now(() => app.reload(what))
+    if (what === 'mcp' || what === 'skill') app.reload(what, busy)
+    if (what === 'prompts' && app.s) app.s.refreshSystem = true // the system prompt, again before the next request
+    if (what === 'hooks' && app.s && app.s.hooks !== false) app.s.hooks = loadHooks(app.root)
     if (what === 'keys') ui.keys = { ...DEFAULT_KEYS, ...loadKeys() }
     if (what === 'theme' || what === 'setting:theme') ui.recolor(before, themeCodes())
     else ui.render()
@@ -897,10 +904,10 @@ function applySettings(apps, cfg, what) {
 }
 
 // Changes saved by another HeartCode, or \`heart settings\` in another terminal, while this one runs:
-// taken in as the page's own are (applySettings). config.json is compared key by key with what it
-// was (so a model given for this run with -m stays unless the list's #1 changes); the other files
-// by their size and time, and only when this run didn't just apply them itself.
-const WATCHED = { 'mcp.json': 'mcp', 'keybindings.json': 'keys', 'theme.json': 'theme', models: 'profile', prompts: 'prompts', skills: 'skill' }
+// taken in as the page's own are (applySettings). config.json: the keys others changed (takeIn; a
+// model given for this run with -m stays unless the list's #1 changes); the other files by their
+// size and time, and only when this run didn't just apply them itself.
+const WATCHED = { 'mcp.json': 'mcp', 'hooks.json': 'hooks', 'keybindings.json': 'keys', 'theme.json': 'theme', models: 'profile', prompts: 'prompts', 'HEARTCODE.md': 'prompts', skills: 'skill' }
 const seenStamp = {}
 const stampOf = (p) => {
   try {
@@ -915,21 +922,9 @@ function settingsSeen(what) {
   for (const [name, w] of Object.entries(WATCHED)) if (w === what || (what === 'setting:theme' && w === 'theme')) seenStamp[name] = stampOf(path.join(HOME, name))
 }
 function watchSettings(apps, cfg) {
-  const same = (a, b) => JSON.stringify(a) === JSON.stringify(b)
-  let last = readJson(CONFIG_FILE, {})
   for (const name of Object.keys(WATCHED)) seenStamp[name] = stampOf(path.join(HOME, name))
   const configChanged = () => {
-    const now = readJson(CONFIG_FILE, null)
-    if (!now) return
-    const keys = [...new Set([...Object.keys(now), ...Object.keys(last)])].filter((k) => !same(now[k], last[k]))
-    last = now
-    const whats = new Set()
-    for (const k of keys) {
-      const value = k === 'providers' ? { ...now.providers, ...(cfg.adhoc && { [cfg.adhoc]: cfg.providers[cfg.adhoc] }) } : now[k]
-      if (same(value, cfg[k])) continue
-      value === undefined ? delete cfg[k] : (cfg[k] = value)
-      whats.add(['provider', 'model', 'providers'].includes(k) ? 'model' : k === 'rotation' ? 'setting:rotation' : `setting:${k}`)
-    }
+    const whats = new Set(takeIn(cfg).map(whatOf))
     for (const what of whats) applySettings(apps(), cfg, what)
     if (whats.size) log('settings', `taken in from config.json: ${[...whats].join(', ')}`)
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "heartcode",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "description": "A coding CLI for any local or OpenAI-compatible model, including small models without tool calling.",
   "keywords": [
     "ai",

package/src/agent.js

@@ -669,6 +669,9 @@ async function runNative(s, task, images, signal) {
     const stream = strat.toolsStream
     // A long tool call (a whole file) streams in silently: say what's being written.
     const onToolDelta = (name, args) => ui.spinner(`${name === 'run_command' ? 'preparing a command' : `writing ${/"path"\s*:\s*"([^"]+)"/.exec(args)?.[1] ?? name}`} · ${args.length >= 1000 ? `${(args.length / 1000).toFixed(1)}k` : args.length} chars`)
+    // the prompts or HEARTCODE.md changed meanwhile (applySettings): the system prompt again, now
+    if (s.refreshSystem && (s.messages[0]?.role === 'system' || strat.mergeSystem)) s.messages[0] = { ...s.messages[0], content: SYSTEM(s) }
+    s.refreshSystem = false
     const res = await client.chat({ messages: s.messages, tools, stream }, { signal, onToken: out.text, onReasoning: out.think, onToolDelta })
     ui.stopSpin()
     if (!stream) {

package/src/config.js

@@ -112,14 +112,60 @@ export function loadConfig(flags = {}) {
   }
   const model = flags.model || process.env.HEART_MODEL
   if (model && !isAuto(model)) Object.assign(cfg, parseModel(model, cfg.providers, cfg.provider), { fixed: true })
+  synced(cfg, readJson(CONFIG_FILE, {}))
   return cfg
 }
 
-export function saveConfig(cfg) {
+// What a cfg stands for in config.json (the run-only provider and model left out).
+function saved(cfg) {
   const providers = byName(cfg.providers)
   if (cfg.adhoc) delete providers[cfg.adhoc]
   const keep = cfg.adhoc && cfg.provider === cfg.adhoc ? fromFile() : null // the run-only provider isn't saved as current
   const out = { providers, provider: keep ? keep.provider : cfg.provider, model: keep ? keep.model : cfg.model }
   for (const k of SETTINGS) if (cfg[k] !== undefined) out[k] = cfg[k]
-  writeJson(CONFIG_FILE, out)
+  return JSON.parse(JSON.stringify(out))
+}
+
+// Several HeartCodes (and the settings page in each) keep a copy of the settings. A save writes only
+// what this one changed since it last read or wrote the file, onto the file as it is now, and
+// takeIn brings in what the others changed: no copy undoes another's change with an old value.
+// file: config.json as last read or written here; mine: what this run's cfg stood for then (a -m
+// model for this run is no change of its own, so a save doesn't write it as #1).
+let file = null
+let mine = null
+const same = (a, b) => JSON.stringify(a) === JSON.stringify(b)
+const keysOf = (...objs) => [...new Set(objs.flatMap((o) => Object.keys(o ?? {})))]
+const synced = (cfg, disk) => ((file = disk), (mine = saved(cfg)))
+
+export function saveConfig(cfg) {
+  const out = saved(cfg)
+  const was = mine ?? {}
+  const disk = readJson(CONFIG_FILE, {})
+  for (const k of keysOf(out, was)) {
+    if (k === 'providers') {
+      // provider by provider: a key changed here and a provider added elsewhere both stay
+      const ps = { ...disk.providers }
+      for (const n of keysOf(out.providers, was.providers)) if (!same(out.providers?.[n], was.providers?.[n])) out.providers?.[n] === undefined ? delete ps[n] : (ps[n] = out.providers[n])
+      disk.providers = byName(ps)
+    } else if (!same(out[k], was[k])) out[k] === undefined ? delete disk[k] : (disk[k] = out[k])
+  }
+  writeJson(CONFIG_FILE, disk)
+  synced(cfg, disk)
+}
+
+// What others changed in config.json since this run last read or wrote it, into cfg (the run-only
+// provider stays). The keys that changed: a running HeartCode applies them (the model list…).
+// what a changed key of config.json means to a running HeartCode (applySettings)
+export const whatOf = (k) => (['provider', 'model', 'providers'].includes(k) ? 'model' : k === 'rotation' ? 'setting:rotation' : `setting:${k}`)
+export function takeIn(cfg) {
+  const disk = readJson(CONFIG_FILE, null)
+  if (!disk || same(disk, file)) return []
+  const keys = keysOf(disk, file).filter((k) => (k === 'providers' || k === 'provider' || k === 'model' || SETTINGS.includes(k)) && !same(disk[k], file?.[k]))
+  for (const k of keys) {
+    const value = k === 'providers' ? { ...byName(disk.providers), ...(cfg.adhoc && { [cfg.adhoc]: cfg.providers[cfg.adhoc] }) } : disk[k]
+    value === undefined ? delete cfg[k] : (cfg[k] = value)
+  }
+  file = disk
+  mine = saved(cfg)
+  return keys
 }

package/src/settings.html

@@ -147,29 +147,29 @@
   .preset span { color: var(--muted); font-size: 12px; }
   .preset.on { border-color: var(--accent); background: var(--accent-soft); }
 
-  /* Providers & models: every provider's models on the left (pick one), yours in order on the right;
-     both fill the screen's height and scroll inside */
-  .work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; } /* the catalog and your models, half and half */
-  .work > .card { padding: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
-  .cat-top { padding: 14px 16px 12px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
-  .cat-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
-  .cat-row input { flex: 1; min-width: 160px; }
-  .cat-row select { flex: none; width: auto; padding-right: 30px; }
-  .cat-row button { flex: none; height: 28px; }
-  .cat-row button.ghost { padding: 3px 8px; }
-  .cat-row button.ghost:hover:not(:disabled) { color: var(--text); border-color: transparent; }
-  .cat-group { display: flex; align-items: center; gap: 6px; }
-  .cat-group.end { margin-left: auto; }
+  /* Providers & models: every provider's models in one list, full width; it fills the screen's height and scrolls inside */
+  .head-actions { display: flex; gap: 8px; align-items: center; }
+  .work { display: flex; flex-direction: column; }
+  .work > .card { flex: 1; padding: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
+  .cat-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
+  .cat-top input[type=search] { flex: 1; min-width: 140px; }
+  .cat-top select { flex: none; width: auto; padding-right: 30px; }
+  .cat-top button { flex: none; }
+  .cat-top button.ghost:hover:not(:disabled) { color: var(--text); border-color: transparent; }
+  .cat-top input[type=checkbox], .prov-h .pick-all, .mwrap .pick { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
+  /* what to do with the ticked models: at the bottom of the list, only while some are ticked */
+  .picks { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--accent-soft); font-size: 13px; }
+  .picks .n { font-weight: 600; margin-right: auto; }
   .prov-h { cursor: pointer; }
-  .prov-h .fold { border: 0; background: none; color: var(--muted); padding: 2px 4px; font-size: 16px; line-height: 1; transition: transform .15s; align-self: flex-start; margin-top: 1px; }
+  .prov-h .fold { border: 0; background: none; color: var(--muted); padding: 2px 4px; font-size: 16px; line-height: 1; transition: transform .15s; }
   .prov-h .fold:hover { color: var(--text); }
   section.collapsed .prov-h .fold { transform: rotate(-90deg); }
   section.collapsed > :not(.prov-h) { display: none; } /* folded: just its header */
   .cat-list { flex: 1; overflow-y: auto; }
-  .prov-h { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; background: var(--panel2); border-bottom: 1px solid var(--line); }
-  .prov-h .who { flex: 1; min-width: 200px; }
+  .prov-h { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--panel2); border-bottom: 1px solid var(--line); }
+  .prov-h .who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; }
   .prov-h .name { font-weight: 700; font-size: 15px; }
-  .prov-h .meta { font-size: 12px; color: var(--muted); }
+  .prov-h .meta { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
   .prov-h .meta .mono { font-size: 12px; }
   .rows { display: flex; flex-direction: column; } /* one model per line, A to Z */
   .mrow { break-inside: avoid; display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 16px; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; min-width: 0; }
@@ -185,11 +185,9 @@
   .mwrap { display: flex; break-inside: avoid; border-bottom: 1px solid var(--line); }
   .mwrap .mrow { border-bottom: 0; }
   .mwrap .forget { border: 0; background: none; color: var(--faint); padding: 0 12px; }
+  .mwrap { padding-left: 16px; align-items: center; }
+  .mwrap .pick + .mrow { padding-left: 12px; }
   .mwrap .forget:hover { color: var(--err); }
-  .cat-top .listsw { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); white-space: nowrap; margin-right: 6px; }
-  .cat-top .listsw .sw { margin-top: 0; }
-  .prov-h .listsw { margin-top: 8px; width: fit-content; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; }
-  .prov-h .listsw .sw { margin-top: 0; }
   .log-opts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
   .log-opts .opt { border-bottom: 0; padding-bottom: 0; }
   @media (max-width: 860px) { .log-opts { grid-template-columns: 1fr; } }
@@ -219,8 +217,6 @@
   .req-detail h3 { font-size: 14px; margin: 16px 0 4px; }
   @media (max-width: 860px) { .reqs { grid-template-columns: 1fr; } .req-list { border-right: 0; max-height: 50vh; } }
   .cat-note { padding: 12px 16px; color: var(--muted); font-size: 12.5px; }
-  .byname { display: flex; gap: 8px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); }
-  .byname input { height: 32px; font-family: var(--mono); font-size: 12.5px; }
   /* one line: what models.dev says (cut short, all of it on hover), its buttons on the right */
   .olist .test { font-size: 12px; color: var(--faint); display: flex; align-items: center; gap: 6px; min-width: 0; }
   .olist .test .msg { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
@@ -262,13 +258,18 @@
   /* Your models: a table, one row a model */
   .mt-card { padding: 0; }
   .mt-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--line); min-height: 58px; }
-  .mt-top .sorts { flex: 1; min-width: 0; color: var(--muted); font-size: 13px; }
+  .mt-top .sorts { flex: 1 1 320px; min-width: 0; color: var(--muted); font-size: 13px; } /* too narrow beside the buttons: a line of its own */
   .mt-top .chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--brand); background: var(--brand-soft); border-radius: 999px; padding: 1px 4px 1px 9px; margin: 2px 4px 2px 0; color: var(--text); font-size: 12.5px; }
   .mt-top .chip button { border: 0; background: none; padding: 0 4px; font-size: 12px; color: var(--muted); }
   .mt-scroll { overflow-x: auto; }
   .mt { min-width: 1116px; }
   .mt-h input[type=checkbox], .mtable input[type=checkbox] { width: 15px; height: 15px; margin: 0; accent-color: var(--brand); cursor: pointer; }
   .mtable li.picked { background: var(--brand-soft); }
+  .mt-rules { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 28px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
+  .mt-rules .rule { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
+  .mt-rules select { width: auto; height: 32px; padding: 4px 30px 4px 10px; }
+  .mt-rules input { width: 64px; height: 32px; }
+  .mt-rules .hint { flex-basis: 100%; margin: 0; }
   .mt-outcomes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
   .mt-outcomes > span:first-child { margin-right: 4px; }
   /* a test result: what it was and how many (a click selects them), and ↻ to test them again */
@@ -430,26 +431,23 @@
     <!-- Providers & models -->
     <section class="page" id="page-providers">
       <div class="head">
-        <div><h1>Providers &amp; models</h1><p class="lead">A provider is a service with models (OpenRouter, Groq, Ollama on this machine…). Add one, then choose which of its models HeartCode uses.</p></div>
-        <button class="primary" id="p-open">+ Add a provider</button>
+        <div><h1>Providers &amp; models</h1><p class="lead">Click a model to add it to your list, or tick several and add them at once. HeartCode uses your list in order: #1, then the next when one fails.</p></div>
+        <div class="head-actions"><button id="p-mine" type="button"></button><button class="primary" id="p-open">+ Add a provider</button></div>
       </div>
       <div class="steps" id="steps"></div>
-      <div class="stack">
-          <div class="work" id="p-work" hidden>
-            <div class="card catalog">
-              <div class="cat-top">
-                <div class="cat-row"><input type="search" id="m-search" placeholder="Search all models…"><select id="m-sort" aria-label="sort the models"><option value="name">Sort by name</option><option value="price">Sort by price</option></select></div>
-                <div class="cat-row">
-                  <div class="cat-group"><span class="listsw" id="lists-all" title="load every provider's model list, or none"></span>
-                  <button class="small ghost" id="fold-all" type="button">Collapse all</button><button class="small ghost" id="unfold-all" type="button">Expand all</button></div>
-                  <div class="cat-group end"><button class="small" id="dev-all" type="button" title="ask models.dev what each listed model can do: tool calls, context, thinking, images">Get from models.dev</button><button class="small" id="add-all" type="button" title="add every model shown here (only the matches when searching) to your list">Add all</button></div>
-                </div>
-              </div>
-              <div class="job-slot" data-where="catalog"></div>
-              <div class="cat-list" id="p-list"></div>
-            </div>
-            <div class="card mine" id="inuse"></div>
+      <div class="work" id="p-work" hidden>
+        <div class="card catalog">
+          <div class="cat-top">
+            <input type="checkbox" id="pick-shown" aria-label="select every model shown">
+            <input type="search" id="m-search" placeholder="Search all models…">
+            <select id="m-sort" aria-label="sort the models"><option value="name">Sort by name</option><option value="price">Sort by price</option></select>
+            <button class="small ghost" id="fold-all" type="button">Collapse all</button>
+            <button class="small" id="dev-all" type="button" title="ask models.dev what each listed model can do: tool calls, context, thinking, images">Get from models.dev</button>
           </div>
+          <div class="job-slot" data-where="catalog"></div>
+          <div class="cat-list" id="p-list"></div>
+          <div class="picks" id="picks" hidden></div>
+        </div>
       </div>
     </section>
 
@@ -607,7 +605,11 @@
   <label class="f" for="p-key">API key <span class="muted" id="p-keynote" style="font-weight:normal"></span></label>
   <input type="password" id="p-key" autocomplete="off" placeholder="paste it here (none for a server on this machine, like Ollama)">
   <div class="hint">Kept in config.json on this machine. This page only shows its first and last characters.</div>
-  <div class="actions"><button id="p-cancel">Cancel</button><button class="primary" id="p-save">Add provider</button></div>
+  <div id="p-more" hidden>
+    <label class="opt" style="margin-top:16px"><div class="t"><b>Load its model list</b><span>On: its models are asked from the provider. Off: never asked; only the models you add by name show (type one's exact name in the search).</span></div><span class="sw"><input type="checkbox" id="p-list-on"><i></i></span></label>
+    <div class="actions" id="p-added"></div>
+  </div>
+  <div class="actions"><button class="danger" id="p-delete" hidden>Delete provider</button><span class="spacer"></span><button id="p-cancel">Cancel</button><button class="primary" id="p-save">Add provider</button></div>
 </dialog>
 <dialog id="c-form" aria-labelledby="c-title">
   <h2 id="c-title">Add a server</h2>
@@ -654,7 +656,7 @@ function toast(text, err = false) {
 }
 // What's running (a test, lists loading, models.dev), shown at the top of the panels it's about
 // while it runs: job(id, { what, where, done, total, detail, stop }) to show or update it (no total:
-// a bar that just moves), job(id) when it's over. where: the panels ('catalog', 'mine', 'table').
+// a bar that just moves), job(id) when it's over. where: the panels ('catalog', 'table').
 // Updated in place, so nothing jumps while it counts.
 const JOBS = new Map()
 function job(id, state) {
@@ -901,11 +903,25 @@ function openForm(p = null) {
   $('p-key').placeholder = p?.key ? 'empty: keep the key it has' : 'paste it here (none for a server on this machine, like Ollama)'
   $('p-keynote').textContent = p?.key ? `(now ${p.key})` : ''
   $('p-save').textContent = p ? 'Save changes' : 'Add provider'
+  // editing: what used to crowd its header
+  $('p-more').hidden = $('p-delete').hidden = !p
+  $('presets').hidden = Boolean(p)
+  $('p-form').querySelector('.sub').hidden = Boolean(p)
+  if (p) {
+    $('p-list-on').checked = p.list
+    put($('p-added'), p.added.length ? [h('span', { className: 'muted', style: 'font-size:13px', textContent: `${p.added.length} model${p.added.length === 1 ? '' : 's'} you added by name` }), h('button', { className: 'small danger', textContent: 'Forget them', onclick: () => ($('p-form').close(), clearAdded(p)) })] : [])
+  }
   drawPresets()
   $('p-form').showModal()
   ;(p ? $('p-url') : $('p-name')).focus()
 }
 const closeForm = () => $('p-form').close()
+$('p-delete').onclick = () => {
+  const p = editing
+  if (!p || !confirm(`Delete the provider "${p.name}"? Its models leave your list too.`)) return
+  closeForm()
+  act('/api/provider/delete', { name: p.name }, `deleted ${p.name}`)
+}
 $('p-form').onclose = () => (editing = null)
 $('p-open').onclick = () => openForm()
 $('p-cancel').onclick = closeForm
@@ -917,6 +933,7 @@ $('p-save').onclick = async () => {
   if (!r) return
   const added = r.providers.find((p) => p.name === name.toLowerCase().replace(/[^a-z0-9_-]+/g, '-').replace(/^-+|-+$/g, ''))
   if (!added) return
+  if (was && $('p-list-on').checked !== was.list) await act('/api/provider/list', { name: added.name, on: $('p-list-on').checked }) // its list switched on or off
   if (was) delete MODELS[was.name]
   loadModels(added.name, true) // a new one, or a new URL or key: its models (again)
   toast(was ? `saved ${added.name}` : `added ${added.name}: its models are loading`)
@@ -930,36 +947,22 @@ for (const id of ['p-name', 'p-url', 'p-key']) $(id).addEventListener('keydown',
 const byName = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' }).compare // one collator: thousands of names sort fast
 let modelQuery = ''
 // the models under each provider: by name, or by what its list says they cost (cheapest first; no price: last)
-let catSort = (() => {
-  try {
-    return localStorage.getItem('heart.catSort') === 'price' ? 'price' : 'name'
-  } catch {
-    return 'name'
-  }
-})()
-$('m-sort').value = catSort
+// The page's own choices (sorts, folds, the provider ranking), kept in ~/.heart (the browser's
+// storage isn't: the page's address has a new port each time)
+const savePref = (key, value) => api('/api/prefs', { key, value }).catch((e) => toast(`not kept: ${e.message}`, true))
+let catSort = 'name'
 $('m-sort').onchange = (e) => {
   catSort = e.target.value
-  try {
-    localStorage.setItem('heart.catSort', catSort)
-  } catch {}
+  savePref('catSort', catSort)
   if (S) drawProviders(S)
 }
 const costOf = (d) => (d?.price ? (d.price.input ?? 0) + (d.price.output ?? 0) : Infinity)
-// Providers folded on the page (the browser remembers them). Typing a search opens them all, until
-// you fold or unfold one (or all) again.
+// Providers folded on the page (kept: savePref). Typing a search opens them all, until you fold or
+// unfold one (or all) again.
 let searchOpen = false
-const FOLDED = new Set((() => {
-  try {
-    return JSON.parse(localStorage.getItem('heart.folded') ?? '[]')
-  } catch {
-    return []
-  }
-})())
+const FOLDED = new Set()
 function applyFolds() {
-  try {
-    localStorage.setItem('heart.folded', JSON.stringify([...FOLDED]))
-  } catch {}
+  $('fold-all').textContent = allFolded() ? 'Expand all' : 'Collapse all'
   for (const sec of $('p-list').querySelectorAll('section[data-provider]')) {
     const folded = FOLDED.has(sec.dataset.provider) && !(searchOpen && modelQuery.trim())
     sec.classList.toggle('collapsed', folded)
@@ -972,18 +975,16 @@ function settle() {
   if (searchOpen && modelQuery.trim()) for (const sec of $('p-list').querySelectorAll('section[data-provider]')) FOLDED.delete(sec.dataset.provider)
   searchOpen = false
 }
-const fold = (name) => (settle(), FOLDED.has(name) ? FOLDED.delete(name) : FOLDED.add(name), applyFolds())
-$('fold-all').onclick = () => (settle(), S?.providers.forEach((p) => FOLDED.add(p.name)), applyFolds())
-$('unfold-all').onclick = () => (settle(), FOLDED.clear(), applyFolds())
-// every model shown on the left (the search's matches, when searching) added to the end of your list
-$('add-all').onclick = () => {
-  if (!S) return
-  const seen = new Set(S.order.map(keyOf))
-  const add = CATALOG.flatMap(({ provider, ids }) => ids.map((model) => ({ provider, model }))).filter((t) => !seen.has(keyOf(t)) && seen.add(keyOf(t)))
-  if (!add.length) return toast(modelQuery.trim() ? 'every match is in your list already' : 'every model shown is in your list already')
-  if (!confirm(`Add ${add.length} model${add.length === 1 ? '' : 's'} to your list${modelQuery.trim() ? ` (the ones matching "${modelQuery.trim()}")` : ''}?`)) return
-  saveOrder([...S.order, ...add], `${add.length} added: your list has ${S.order.length + add.length} models`)
+const folds = () => (applyFolds(), savePref('folded', [...FOLDED])) // a fold changed: shown and kept
+const fold = (name) => (settle(), FOLDED.has(name) ? FOLDED.delete(name) : FOLDED.add(name), folds())
+// one button: collapse them all, or (all collapsed) expand them all
+const allFolded = () => Boolean(S?.providers.length) && S.providers.every((p) => FOLDED.has(p.name))
+$('fold-all').onclick = () => (settle(), allFolded() ? FOLDED.clear() : S?.providers.forEach((p) => FOLDED.add(p.name)), folds())
+$('pick-shown').onchange = (e) => {
+  for (const [provider, ids] of SHOWN) for (const id of ids) e.target.checked ? pickedOf(provider).add(id) : PICKED_CAT.get(provider)?.delete(id)
+  drawPicks()
 }
+$('p-mine').onclick = () => (location.hash = 'models')
 // models.dev fetched again (your models' profiles too), then every listed provider's models with it
 $('dev-all').onclick = async () => {
   if (!(await lookUp())) return
@@ -994,21 +995,8 @@ $('m-search').oninput = (e) => ((modelQuery = e.target.value), (searchOpen = tru
 // list and its own test), and what a click does. Shown on hover and on keyboard focus.
 const kTok = (n) => (n >= 1e6 ? `${Math.round(n / 1e5) / 10}M` : n >= 1000 ? `${Math.round(n / 1000)}k` : String(n))
 const usd = (x) => (x === 0 ? 'free' : `$${x < 0.01 ? x.toFixed(4) : x < 1 ? x.toFixed(3).replace(/0$/, '') : x.toFixed(2)}`)
-// What a model is, under it in your list, in the two lines its card keeps for it (at most two
-// lines of text, its button on the right): where that comes from, and Edit (or Set it up, for one
-// models.dev doesn't know). Replaced in place when it changes (streamed).
+// where what a model can do comes from (the Your models table)
 const FROM = { 'models.dev': 'from models.dev', you: 'set by you', tested: 'tested' }
-function testLine(t) {
-  const x = t.tested
-  const edit = (label) => h('button', { className: 'small', textContent: label, onclick: (e) => (e.stopPropagation(), openSetup(t)) })
-  const [cls, text, action] =
-    !x ? ['none', 'looking it up in models.dev…', null]
-      : x.source === 'assumed' ? ['warn', 'not in models.dev', edit('Set up')] // its Retry: on the Your models page, and Refresh from models.dev
-      : ['ok', `✓ ${testedText(x)} · ${Object.keys(x.set ?? {}).length ? 'yours' : FROM[x.source]}`, edit('Edit')]
-  const about = x?.source === 'assumed' ? "not in models.dev: Retry, or set up what it can do" : text
-  return h('div', { className: 'test ' + cls }, h('span', { className: 'msg', textContent: text, title: about }), action)
-}
-
 // Test: one short message to the model, to see that it really answers (the key, access to it, its
 // name, the server). The result stays under it until the page is reloaded.
 const TRIES = {} // "provider/model" → { going } | { ok, ms, reply, at } | { ok: false, status, error, at } (from the server)
@@ -1091,7 +1079,7 @@ function showRun(run) {
     if (run?.over) toast(`${run.stopping ? `stopped after ${run.done} of ${run.total}: ` : ''}${run.good} of ${run.done} work${run.good === run.done ? '' : `; ${run.done - run.good} don't (Works? says why, on hover)`}`, run.good < run.done)
   } else
     job('test-all', {
-      where: ['table', 'mine'],
+      where: ['table'],
       what: run.stopping ? 'Stopping the tests…' : `Testing ${run.some ? '' : 'your '}${run.total} model${run.total === 1 ? '' : 's'}${run.each > 1 ? ` · ${run.each} at a time per provider` : ''}`,
       done: run.done, total: run.total, stopping: run.stopping,
       detail: [h('span', { className: 'ok', textContent: `✓ ${run.good} work` }), ' · ', h('span', { className: 'bad', textContent: `✗ ${run.done - run.good} don't` }), run.busy.length ? ` · now: ${run.busy.join(', ')}` : '', Object.keys(run.paused ?? {}).length ? ` · paused (busy, 429): ${Object.entries(run.paused).map(([p, secs]) => `${p} ${secs}s`).join(', ')}` : ''],
@@ -1103,7 +1091,7 @@ function showRun(run) {
 // models.dev looked up again: one model (its Retry), or all of yours (Refresh from models.dev)
 const retry = (t) => h('button', { className: 'small', textContent: 'Retry', title: 'look it up in models.dev again', onclick: (e) => (e.stopPropagation(), lookUp(t)) })
 async function lookUp(t) {
-  job('models.dev', { where: ['catalog', 'mine', 'table'], what: t ? `Looking up ${t.model} in models.dev` : 'Asking models.dev about your models', detail: 'context, tool calls, thinking, images' })
+  job('models.dev', { where: ['catalog', 'table'], what: t ? `Looking up ${t.model} in models.dev` : 'Asking models.dev about your models', detail: 'context, tool calls, thinking, images' })
   const r = await act('/api/models-dev', t ? { provider: t.provider, model: t.model } : {})
   job('models.dev')
   if (r) toast(t ? (r.found ? `${t.model}: found in models.dev` : `${t.model}: still not in models.dev`) : `models.dev: ${r.found} of ${r.of} found`)
@@ -1193,73 +1181,21 @@ function drawProviders(s) {
   // the steps: always on the page (nothing jumps when one is done), ticked off as you go
   put($('steps'), [
     ['Add a provider', 'the service with your models', s.providers.length ? 'done' : 'now'],
-    ['Choose a model', 'click one in the list', order.length ? 'done' : s.providers.length ? 'now' : ''],
+    ['Choose models', 'click one, or tick several and add them', order.length ? 'done' : s.providers.length ? 'now' : ''],
     ['Start HeartCode', 'heart, in your project', order.length ? 'now' : ''],
   ].map(([t, d, cls], i) => h('div', { className: 'step ' + cls }, h('span', { className: 'num', textContent: cls === 'done' ? '✓' : i + 1 }), h('div', {}, h('b', { textContent: t }), d))))
+  $('steps').hidden = order.length > 0 // the first start only
   $('p-work').hidden = none
+  // your list, at the top: how many, and the way to its page (order, tests, what to do when one fails)
+  $('p-mine').hidden = !order.length
+  $('p-mine').textContent = `Your models (${order.length}) →`
+  $('p-mine').title = order.length ? `#1: ${order[0].provider} · ${order[0].model}. Open the Your models page: the order, tests, and what happens when one fails` : ''
   fillHeight()
 
-  // right: your models, in order (#1 is the one in use); drag or ↑ ↓ to reorder
-  const side = innerWidth > 860 ? 'on the left' : 'below' // where the models are (a phone: under this)
-  const save = (list, done) => saveOrder(list, done)
-  const move = (i, j) => {
-    if (i === j) return
-    const list = [...order]
-    const [t] = list.splice(i, 1)
-    list.splice(j, 0, t)
-    return save(list, list[0] !== order[0] ? `HeartCode now uses ${list[0].provider} · ${list[0].model}` : 'order saved')
-  }
-  // a row of your list (the last: where the next one goes)
-  const mineRow = (i) => {
-    if (i === order.length) return h('li', { className: 'next', textContent: `#${order.length + 1} · click a model ${side} to add it here (a fallback)` })
-    const t = order[i]
-    return h('li', {
-        className: 'in' + (i === 0 ? ' use' : ''), tabIndex: 0, 'data-key': `${t.provider}/${t.model}`, title: order.length > 1 ? 'Drag to move it (or Alt+↑ / Alt+↓)' : '',
-        onkeydown: (e) => e.altKey && (e.key === 'ArrowUp' || e.key === 'ArrowDown') && (e.preventDefault(), move(i, Math.max(0, Math.min(order.length - 1, i + (e.key === 'ArrowUp' ? -1 : 1))))),
-      },
-      h('span', { className: 'grip', textContent: '⋮⋮', title: 'drag to reorder', 'aria-hidden': 'true', style: order.length > 1 ? '' : 'visibility:hidden' }),
-      h('span', { className: 'n', textContent: `#${i + 1}`, title: i === 0 ? 'in use: the one HeartCode uses' : 'a fallback: tried, in order, when the ones above fail' }),
-      h('span', { className: 'm', textContent: t.model, title: t.model }),
-      h('span', { className: 'p' + (i === 0 ? ' use' : ''), textContent: t.provider, title: `${t.provider}${i === 0 ? ': in use' : ''}` }),
-      testLine(t),
-      h('button', { className: 'danger', textContent: '✕', title: 'take it off the list', 'aria-label': `remove ${t.model}`, onclick: () => removeMine(t.provider, t.model) }))
-  }
-  const mine = order.length ? h('ol', { className: 'olist' }) : null
-  const mineV = mine && virtual(mine, { count: order.length + 1, height: MINE_ROW, row: mineRow })
-  if (mineV) mineV.items = order.length
-  put($('inuse'),
-    h('div', { className: 'mine-top' },
-      h('div', { className: 'mine-title' },
-        h('h2', { textContent: 'Your models' }),
-        h('button', { className: 'small', textContent: 'Table', style: order.length ? '' : 'visibility:hidden', title: 'all of them in a table, to compare and sort', onclick: () => (location.hash = 'models') }),
-        h('button', { className: 'small', textContent: 'Refresh from models.dev', title: 'ask models.dev again what each model can do: context, tools, thinking, images, price', style: order.length ? '' : 'visibility:hidden', onclick: () => lookUp() }),
-        h('button', { className: 'small danger', textContent: 'Remove all', title: 'take every model off this list', style: order.length ? '' : 'visibility:hidden', onclick: () => confirm(`Take all ${order.length} model${order.length === 1 ? '' : 's'} off your list? HeartCode then has none to use until you choose one. (They stay under their providers.)`) && saveOrder([], 'all removed: no model chosen now') })),
-      h('p', { className: 'sub', style: 'margin:0', textContent: order.length > 1 ? 'HeartCode uses #1. If it fails, it tries #2, then #3… and round again. Drag to change the order.' : order.length ? `HeartCode uses this one. Click more ${side} to add fallbacks: tried, in order, when one fails.` : `The models HeartCode uses, in the order it tries them. Click one ${side} to start.` })),
-    jobSlot('mine'),
-    order.length ? h('div', { className: 'ohead' }, h('span'), h('span', { textContent: '#' }), h('span', { textContent: 'Model' }), h('span', { textContent: 'Provider' }), h('span', { textContent: 'What it can do' }), h('span')) : null,
-    order.length ? mine
-      : h('div', { className: 'mine-empty' }, h('b', { textContent: 'No model chosen yet' }), `Click a model ${side}: it becomes #1, the one HeartCode uses.`),
-    order.length > 1 ? h('div', { className: 'mine-rules' },
-      h('label', { className: 'f', for: 'r-on', textContent: 'When the one in use fails, go on to the next' }),
-      h('div', { className: 'row', style: 'gap:8px' },
-        h('select', { id: 'r-on', style: 'flex:1', onchange: (e) => save(order, 'saved', { on: e.target.value }) },
-          [['failure', 'at its first failure'], ['retries', 'after some tries of the same model (rate limits, outages)']].map(([v, t]) => h('option', { value: v, textContent: t, selected: s.rotation.on === v }))),
-        s.rotation.on === 'retries' ? h('input', { type: 'number', 'aria-label': 'tries', title: 'tries of the same model first', style: 'width:76px', min: 1, max: 20, value: s.rotation.retries, onchange: (e) => save(order, 'saved', { retries: Number(e.target.value) }) }) : null),
-      h('div', { className: 'hint', textContent: { failure: 'Any error moves on at once, to another provider\'s model first. It stops only when every model fails.', retries: 'A rate limit or outage: the same model is tried again (with a short wait) that many times first. Any other error moves on at once.' }[s.rotation.on] ?? 'Any error moves on at once, to another provider\'s model first.' }),
-      h('label', { className: 'f', for: 'r-next', textContent: 'A new message starts with' }),
-      h('select', { id: 'r-next', onchange: (e) => save(order, 'saved', { next: e.target.value }) },
-        [['first', '#1 again'], ['stay', 'the model that answered last']].map(([v, t]) => h('option', { value: v, textContent: t, selected: s.rotation.next === v })))) : null)
-
-  mineV?.draw()
-  sortable(mineV, move)
-
-  // left: every provider's models, A to Z; one click adds it (the first one becomes #1). Built
+  // every provider's models, A to Z; one click adds it (the first one becomes #1). Built
   // again only when what it lists changes (a provider, its models, the search); a change to your
   // list only updates the rows it touches (markCatalog), so the list stays where you scrolled it.
   const shape = JSON.stringify([s.providers, s.providers.map((p) => (MODELS[p.name]?.list ?? []).length + (MODELS[p.name]?.error ?? '') + ((MODELS[p.name] ?? { loading: true }).loading ? 'loading' : '')), modelQuery.trim(), catSort])
-  // every provider's list at once: on when all are
-  const allOn = s.providers.length > 0 && s.providers.every((p) => p.list)
-  put($('lists-all'), [sw({ checked: allOn, 'aria-label': "load every provider's model list", onchange: (e) => act('/api/provider/list', { on: e.target.checked }, `every provider's model list ${e.target.checked ? 'on' : 'off'}`) }), 'Load all lists'])
   if (shape !== catalogShape) (buildCatalog(s), applyFolds())
   catalogShape = shape
   markCatalog()
@@ -1272,7 +1208,6 @@ function drawProviders(s) {
 // Drag a row of a long list (virtual) to move it: it follows the pointer, the others make room, and
 // near the list's top or bottom edge it scrolls (faster nearer the edge). onMove(from, to) when
 // dropped; the list is drawn again once the order is saved (put back if saving failed).
-const MINE_ROW = 50 // your models, on the right
 const TABLE_ROW = 46 // the Your models page's table
 function sortable(v, onMove) {
   if (!v || v.items < 2) return
@@ -1406,12 +1341,56 @@ async function clearAdded(p) {
   act('/api/provider/added', { name: p.name, all: true }, `${p.name}: the models you added are forgotten`)
 }
 const CAT_ROW = 56 // a model's row on the left: its name, and what it can do under it
-let CATALOG = [] // what the left shows: [{ provider, ids }] (Add all adds these)
+// The models ticked (provider → Set of ids): kept while you search, so ones ticked for one search
+// and the next are added (or taken off) together. SHOWN: each provider's models shown now (the
+// search's matches).
+const PICKED_CAT = new Map()
+const SHOWN = new Map()
+const pickedOf = (name) => PICKED_CAT.get(name) ?? PICKED_CAT.set(name, new Set()).get(name)
+// The ticked models (every provider's) and what to do with them, on the bar over the list: all the
+// shown ones ticked (or none), added to your list, taken off it. The tick boxes drawn now (rows and
+// each provider's) follow.
+function drawPicks() {
+  if (!S) return
+  const all = [...PICKED_CAT].flatMap(([provider, ids]) => [...ids].map((model) => ({ provider, model })))
+  const shown = [...SHOWN].flatMap(([provider, ids]) => ids.map((model) => ({ provider, model })))
+  const isPicked = (t) => Boolean(PICKED_CAT.get(t.provider)?.has(t.model))
+  const toAdd = all.filter((t) => placeOf(t.provider, t.model) === undefined)
+  const toTake = all.filter((t) => placeOf(t.provider, t.model) !== undefined)
+  for (const box of $('p-list').querySelectorAll('input.pick')) box.checked = Boolean(PICKED_CAT.get(box.closest('section').dataset.provider)?.has(box.dataset.model))
+  for (const box of $('p-list').querySelectorAll('input.pick-all')) {
+    const ids = SHOWN.get(box.dataset.provider) ?? []
+    const n = ids.filter((id) => PICKED_CAT.get(box.dataset.provider)?.has(id)).length
+    box.checked = n > 0 && n === ids.length
+    box.indeterminate = n > 0 && n < ids.length
+  }
+  const top = $('pick-shown')
+  const n = shown.filter(isPicked).length
+  top.checked = n > 0 && n === shown.length
+  top.indeterminate = n > 0 && n < shown.length
+  top.disabled = !shown.length
+  top.title = top.checked ? 'unselect every model shown' : `select every model shown (${shown.length}${modelQuery.trim() ? ': the matches' : ''})`
+  const take = () => {
+    const off = new Set(toTake.map(keyOf))
+    const rest = S.order.filter((t) => !off.has(keyOf(t)))
+    if (!confirm(`Take ${toTake.length} model${toTake.length === 1 ? '' : 's'} off your list?${!rest.length ? ' None is left then: HeartCode has no model to use until you choose one.' : keyOf(rest[0]) !== keyOf(S.order[0]) ? ` HeartCode then uses ${rest[0].provider} · ${rest[0].model}.` : ''}`)) return
+    PICKED_CAT.clear()
+    saveOrder(rest, `${toTake.length} removed`)
+  }
+  const was = $('picks').hidden
+  $('picks').hidden = !all.length
+  put($('picks'),
+    h('span', { className: 'n', textContent: `${all.length} selected` }),
+    h('button', { className: 'small ghost', textContent: 'Clear', onclick: () => (PICKED_CAT.clear(), drawPicks()) }),
+    toTake.length ? h('button', { className: 'small danger', textContent: `Remove ${toTake.length} from your list`, onclick: take }) : null,
+    toAdd.length ? h('button', { className: 'small primary', textContent: `Add ${toAdd.length} to your list`, onclick: () => (PICKED_CAT.clear(), saveOrder([...S.order, ...toAdd], `${toAdd.length} added: your list has ${S.order.length + toAdd.length} models`)) }) : null)
+  if (was !== $('picks').hidden) fillHeight() // the list gives it room
+}
 function buildCatalog(s) {
-  CATALOG = []
   const q = modelQuery.trim()
   // a name no provider lists (anywhere): offered under each provider, to use it anyway
   const anyMatch = !q || s.providers.some((p) => (MODELS[p.name]?.list ?? []).some((id) => id.toLowerCase().includes(q.toLowerCase())))
+  SHOWN.clear()
   put($('p-list'), s.providers.map((p) => {
     if (!p.list) MODELS[p.name] = { list: [], details: {}, off: true } // its list switched off: never asked for
     else loadModels(p.name, MODELS[p.name]?.off)
@@ -1425,8 +1404,9 @@ function buildCatalog(s) {
         h('span', { className: 'id', title: id }, id, canCell(m.details?.[id], S.order[placeOf(p.name, id)])),
         own ? h('span', { className: 'tag', textContent: 'not in its list' }) : p.added.includes(id) ? h('span', { className: 'tag', textContent: 'added by you' }) : null,
         rowTail(p.name, id))
-    // one you added: ✕ forgets it (it leaves your list too)
-    const item = (id) => !p.added.includes(id) ? row(id) : h('div', { className: 'mwrap' }, row(id),
+    // its tick box (to add or take off several at once), and one you added: ✕ forgets it (it leaves your list too)
+    const tick = (id) => h('input', { type: 'checkbox', className: 'pick', checked: pickedOf(p.name).has(id), 'data-model': id, 'aria-label': `select ${id}`, onchange: (e) => (e.target.checked ? pickedOf(p.name).add(id) : pickedOf(p.name).delete(id), drawPicks()) })
+    const item = (id) => h('div', { className: 'mwrap' }, tick(id), row(id), !p.added.includes(id) ? null :
       h('button', { className: 'forget', textContent: '✕', title: 'forget this model', 'aria-label': `forget ${id}`, onclick: async () => {
         if (placeOf(p.name, id) !== undefined && !confirm(`Forget ${id}? It leaves your list too.`)) return
         if (placeOf(p.name, id) !== undefined) await saveOrder(S.order.filter((t) => t.provider !== p.name || t.model !== id), `${id} removed`)
@@ -1435,43 +1415,29 @@ function buildCatalog(s) {
     const typed = !anyMatch ? [row(q, true)] : []
     if (typed[0]) typed[0].dataset.typed = '1' // a name no provider lists: not part of Add all
     if (q && anyMatch && !ids.length) return null // searching: only the providers with a match
-    // a model its list leaves out (some servers don't list them all): by its exact name
-    const name = h('input', { type: 'text', placeholder: m.off ? 'List off: a model\'s exact name' : 'Custom model: its exact name', 'aria-label': `add a model to ${p.name} by name` })
-    const go = () => {
-      const id = name.value.trim()
-      if (!id) return name.focus()
-      name.value = ''
-      // only under this provider, with its others: you choose whether to use it (click it, like any)
-      if ([...(MODELS[p.name]?.list ?? []), ...p.added].includes(id)) return showRow(p.name, id, `${id} is in ${p.name}'s models already`)
-      act('/api/provider/added', { name: p.name, model: id }).then((r) => r && showRow(p.name, id, `${id} added to ${p.name}'s models: click it to use it`))
-    }
-    name.addEventListener('keydown', (e) => e.key === 'Enter' && go())
     return h('section', { 'data-provider': p.name },
       // the header folds it (a click on it, or its arrow; not on its buttons and switch)
       h('div', { className: 'prov-h', onclick: (e) => !e.target.closest('button:not(.fold), input, label, a') && fold(p.name) },
         h('button', { className: 'fold', type: 'button', textContent: '▾', 'aria-label': `fold ${p.name}`, 'aria-expanded': 'true' }),
+        ids.length ? h('input', { type: 'checkbox', className: 'pick-all', 'data-provider': p.name, 'aria-label': `select ${p.name}'s models`, title: `select all of ${p.name}'s models shown (or none)`, onchange: (e) => (ids.forEach((id) => (e.target.checked ? pickedOf(p.name).add(id) : pickedOf(p.name).delete(id))), drawPicks()) }) : null,
         h('div', { className: 'who' },
-          h('span', { className: 'name', textContent: p.name }), ' ',
-          m.off ? h('span', { className: 'tag', textContent: 'list off' }) : m.loading ? h('span', { className: 'tag', textContent: 'loading…' }) : m.error ? h('span', { className: 'tag err', textContent: "can't list its models", title: m.error }) : h('span', { className: 'tag ok', textContent: `${m.list.length} model${m.list.length === 1 ? '' : 's'}` }),
-          ' ', h('span', { className: 'tag inlist' }),
-          h('div', { className: 'meta' }, h('span', { className: 'mono', textContent: p.baseUrl }), ' · key ', h('span', { className: 'mono', textContent: p.key || 'none' })),
-          withTip(h('label', { className: 'listsw' }, sw({ checked: p.list, 'aria-label': `load ${p.name}'s model list`, onchange: (e) => act('/api/provider/list', { name: p.name, on: e.target.checked }, `${p.name}: model list ${e.target.checked ? 'on' : 'off'}`) }), 'Load its model list'),
-            () => 'On: its models are loaded from the provider. Off: never asked for; only the models you add by name show.')),
-        h('button', { className: 'small', textContent: 'Edit', onclick: () => openForm(p) }),
-        h('button', { className: 'small danger', textContent: 'Delete', onclick: () => confirm(`Delete the provider "${p.name}"? Its models leave your list too.`) && act('/api/provider/delete', { name: p.name }, `deleted ${p.name}`) })),
-      h('div', { className: 'byname' }, name, h('button', { className: 'small byname-go', textContent: 'Add', onclick: go }),
-        p.added.length ? h('button', { className: 'small danger', textContent: `Clear added (${p.added.length})`, title: `forget the ${p.added.length} model${p.added.length === 1 ? '' : 's'} you added to ${p.name} by name`, onclick: () => clearAdded(p) }) : null),
+          h('span', { className: 'name', textContent: p.name }),
+          m.off ? h('span', { className: 'tag', textContent: 'list off', title: "its list isn't loaded: type a model's exact name in the search to add it" }) : m.loading ? h('span', { className: 'tag', textContent: 'loading…' }) : m.error ? h('span', { className: 'tag err', textContent: "can't list its models", title: m.error }) : h('span', { className: 'tag ok', textContent: `${m.list.length} model${m.list.length === 1 ? '' : 's'}` }),
+          h('span', { className: 'tag inlist' }),
+          h('span', { className: 'meta mono', textContent: p.baseUrl, title: `${p.baseUrl} · key ${p.key || 'none'}` })),
+        h('button', { className: 'small', textContent: 'Edit', title: 'its address and key, its model list, delete it', onclick: () => openForm(p) })),
       // what's listed first; loading and errors under it (the models already shown stay where they are)
       typed.length ? h('div', { className: 'rows' }, typed) : null,
       (() => {
         if (!ids.length) return null
-        CATALOG.push({ provider: p.name, ids })
+        SHOWN.set(p.name, ids)
         const box = h('div', { className: 'rows' })
         box._ids = ids
         box._v = virtual(box, { count: ids.length, height: CAT_ROW, row: (i) => item(ids[i]), scroller: $('p-list') })
         return box
       })(),
-      m.error ? h('div', { className: 'cat-note', style: 'color:var(--err)' }, `can't list its models: ${shortError(m.error)} `, h('button', { className: 'small', textContent: 'Try again', onclick: () => loadModels(p.name, true) }), h('div', { className: 'muted', style: 'margin-top:4px', textContent: 'Or add a model by its exact name, above.' })) : null,
+      m.error ? h('div', { className: 'cat-note', style: 'color:var(--err)' }, `can't list its models: ${shortError(m.error)} `, h('button', { className: 'small', textContent: 'Try again', onclick: () => loadModels(p.name, true) }), h('div', { className: 'muted', style: 'margin-top:4px', textContent: "Or type a model's exact name in the search, and click it." })) : null,
+      m.off && !ids.length && !typed.length ? h('div', { className: 'cat-note', textContent: "Its list is off: type a model's exact name in the search, and click it to add it." }) : null,
       m.loading ? h('div', { className: 'cat-note', textContent: 'Loading its models…' }) : null)
   }))
 }
@@ -1491,21 +1457,9 @@ const COLS = {
   output: { label: 'Out $/M', how: 'cheap', get: (t) => t.price?.output ?? null },
   works: { label: 'Works?', get: (t) => { const r = TRIES[keyOf(t)]; return !r || r.going ? 1 : r.ok ? 2 : 0 } }, // tested and working first; not tested; not working
 }
-let SORT = (() => {
-  try {
-    return JSON.parse(localStorage.getItem('heart.sort') ?? '[]').filter((x) => COLS[x?.key])
-  } catch {
-    return []
-  }
-})()
-// your ranking of the providers, best first, kept in this browser; a provider not ranked yet comes after, A to Z
-let RANK = (() => {
-  try {
-    return JSON.parse(localStorage.getItem('heart.rank') ?? '[]').filter((x) => typeof x === 'string')
-  } catch {
-    return []
-  }
-})()
+let SORT = []
+// your ranking of the providers, best first (kept: savePref); a provider not ranked yet comes after, A to Z
+let RANK = []
 const ranked = () => {
   const names = [...new Set(S.order.map((t) => t.provider))]
   return [...RANK.filter((n) => names.includes(n)), ...names.filter((n) => !RANK.includes(n)).sort(byName)]
@@ -1530,18 +1484,14 @@ $('pr-cancel').onclick = () => $('pr').close()
 $('pr-save').onclick = () => {
   const list = [...$('pr-list').children].map((li) => li.textContent)
   RANK = [...list, ...RANK.filter((n) => !list.includes(n))] // providers not in your list now keep their place for later
-  try {
-    localStorage.setItem('heart.rank', JSON.stringify(RANK))
-  } catch {}
+  savePref('rank', RANK)
   $('pr').close()
   setSort(SORT.some((x) => x.key === 'provider') ? SORT : [{ key: 'provider', dir: 'up' }, ...SORT]) // sorted by it now
 }
 const firstDir = (key) => (COLS[key].how ? 'up' : 'down') // up: A to Z, low to high
 function setSort(next) {
   SORT = next
-  try {
-    localStorage.setItem('heart.sort', JSON.stringify(SORT))
-  } catch {}
+  savePref('sort', SORT)
   drawMine(S)
 }
 // a column's header: first click adds it (after those already sorted by), the second flips it, the third drops it
@@ -1594,13 +1544,10 @@ function drawMine(s) {
       what === 'works' ? null : h('button', { type: 'button', className: 'again', textContent: '↻', title: `Test these ${n} again`, 'aria-label': `test the ${what} ones again`, disabled: testingAll, onclick: () => tryAll(models) }))
   })
 
-  const same = view.every((t, i) => t === order[i])
   // the order you see, saved as yours; the sort then goes (your own order from here on: drag on)
   const keep = (list, moved) => {
     SORT = []
-    try {
-      localStorage.setItem('heart.sort', '[]')
-    } catch {}
+    savePref('sort', SORT)
     return saveOrder(list, list[0] !== order[0] ? `${moved ? '' : 'order saved: '}HeartCode now uses ${list[0].provider} · ${list[0].model}` : 'order saved')
   }
   // a row dragged (in the order shown, sorted or not)
@@ -1636,11 +1583,24 @@ function drawMine(s) {
       PICKED.size ? h('button', { className: 'small danger', textContent: `Remove ${PICKED.size} selected`, onclick: removePicked }) : null,
       PICKED.size ? h('button', { className: 'small', textContent: `Test ${PICKED.size} selected`, disabled: testingAll, onclick: () => tryAll(order.filter((t) => PICKED.has(keyOf(t)))) }) : null,
       PICKED.size ? h('button', { className: 'small', textContent: 'Clear selection', onclick: () => (PICKED.clear(), drawMine(S)) }) : null,
+      PICKED.size ? h('button', { className: 'small', textContent: 'Invert selection', title: 'tick the ones not ticked, untick the ones ticked', onclick: () => (view.forEach((t) => (PICKED.has(keyOf(t)) ? PICKED.delete(keyOf(t)) : PICKED.add(keyOf(t)))), (lastPicked = null), drawMine(S)) }) : null,
       order.some((t) => t.provider !== order[0].provider) ? h('button', { className: 'small', textContent: 'Provider ranking', title: 'drag your providers into order; the Provider column sorts by it', onclick: openRanking }) : null,
       SORT.length ? h('button', { className: 'small', textContent: 'Clear sort', onclick: () => setSort([]) }) : null,
-      SORT.length ? h('button', { className: 'small primary', textContent: same ? 'This is your order' : 'Use this order', disabled: same, onclick: () => keep(view) }) : null,
+      order.length > 1 ? h('button', { className: 'small primary', textContent: 'Save order', title: 'save the order shown as your model order (#1 first)', onclick: () => keep(view) }) : null,
       order.length ? h('button', { className: 'small', textContent: 'Refresh from models.dev', title: 'ask models.dev again what each model can do: context, tools, thinking, images, price', onclick: () => lookUp() }) : null,
       order.length ? h('button', { className: 'small', textContent: 'Test all', disabled: testingAll, title: 'send each a short message to see which really answer: every provider at once, a few from each (one at a time per 100 models)', onclick: () => tryAll() }) : null),
+    // when the one in use fails, and what a new message starts with
+    order.length > 1 ? h('div', { className: 'mt-rules' },
+      h('span', { className: 'rule' },
+        h('label', { for: 'r-on', textContent: 'When a model fails, go on to the next' }),
+        h('select', { id: 'r-on', onchange: (e) => saveOrder(order, 'saved', { on: e.target.value }) },
+          [['failure', 'at its first failure'], ['retries', 'after some tries of the same model']].map(([v, t]) => h('option', { value: v, textContent: t, selected: s.rotation.on === v }))),
+        s.rotation.on === 'retries' ? h('input', { type: 'number', 'aria-label': 'tries', title: 'tries of the same model first (rate limits, outages)', min: 1, max: 20, value: s.rotation.retries, onchange: (e) => saveOrder(order, 'saved', { retries: Number(e.target.value) }) }) : null),
+      h('span', { className: 'rule' },
+        h('label', { for: 'r-next', textContent: 'A new message starts with' }),
+        h('select', { id: 'r-next', onchange: (e) => saveOrder(order, 'saved', { next: e.target.value }) },
+          [['first', '#1 again'], ['stay', 'the model that answered last']].map(([v, t]) => h('option', { value: v, textContent: t, selected: s.rotation.next === v })))),
+      h('span', { className: 'hint', textContent: s.rotation.on === 'retries' ? 'A rate limit or outage: that model is tried again that many times first; any other error moves on at once.' : "Any error moves on at once, to another provider's model first." })) : null,
     order.length
       ? h('div', { className: 'mt-scroll' }, h('div', { className: 'mt' },
           jobSlot('table'),
@@ -1695,6 +1655,7 @@ function markCatalog() {
     tag.hidden = !n
     tag.textContent = `${n} in your list${S.order[0]?.provider === sec.dataset.provider ? ' · #1' : ''}`
   }
+  drawPicks()
 }
 
 function drawUsing(s) {
@@ -1992,9 +1953,20 @@ function drawFiles(s) {
 }
 
 function render(s) {
+  if (s.prefs) {
+    // the page's choices, as kept (also changed on another page: shown here too)
+    const p = s.prefs
+    catSort = p.catSort === 'price' ? 'price' : 'name'
+    $('m-sort').value = catSort
+    FOLDED.clear()
+    for (const n of Array.isArray(p.folded) ? p.folded : []) FOLDED.add(n)
+    SORT = Array.isArray(p.sort) ? p.sort.filter((x) => COLS[x?.key]) : []
+    RANK = Array.isArray(p.rank) ? p.rank.filter((x) => typeof x === 'string') : []
+  }
   S = s
   for (const [key, r] of Object.entries(TRIES)) if (!r.going && placeOf(...key.split(/\/(.*)/s)) === undefined) delete TRIES[key] // off your list: its result too
   drawProviders(s)
+  applyFolds()
   drawMine(s)
   drawUsing(s)
   drawGeneral(s)
@@ -2012,6 +1984,7 @@ if (!token) put($('page-providers'), h('h1', { textContent: 'Open the link Heart
 else {
   job('state', { where: ['page'], what: 'Loading your settings', detail: 'providers, models, logging, prompts, MCP servers, skills' })
   api('/api/state').then(render, (e) => toast(e.message, true)).finally(() => job('state'))
+
     .then(() => api('/api/tests', {}))
     .then(({ results, run }) => (Object.assign(TRIES, results), showRun(run)), (e) => toast(`the tests so far: ${e.message}`, true)) // and one going
   job('requests', { where: ['requests'], what: 'Loading the request log', detail: 'every request HeartCode logged' })
@@ -2021,6 +1994,15 @@ else {
 if (token) {
   const events = new EventSource(`/api/events?t=${token}`)
   // a request logged: at the top of the list, nothing else redrawn
+  // the settings changed (another HeartCode or page, a hand): shown at once; while a dialog is open,
+  // when it closes (what's typed in it stays)
+  let later = null
+  events.addEventListener('state', (e) => {
+    const s = JSON.parse(e.data)
+    if (!document.querySelector('dialog[open]')) return render(s)
+    later = s
+  })
+  for (const d of document.querySelectorAll('dialog')) d.addEventListener('close', () => later && !document.querySelector('dialog[open]') && (render(later), (later = null)))
   events.addEventListener('request', (e) => {
     const r = JSON.parse(e.data)
     if (page() === 'logging') drawDisk() // the logs grew
@@ -2049,7 +2031,6 @@ if (token) {
         const t = S.order[placeOf(...d.key.split(/\/(.*)/s))]
         if (!t) continue
         Object.assign(t, { tested: d.tested ?? t.tested, known: d.known ?? t.known })
-        document.querySelector(`#inuse li[data-key="${CSS.escape(d.key)}"] .test`)?.replaceWith(testLine(t))
       }
       news.clear()
       drawMine(S)

package/src/settings.js

@@ -8,7 +8,7 @@ import fs from 'node:fs'
 import path from 'node:path'
 import crypto from 'node:crypto'
 import os from 'node:os'
-import { HOME, saveConfig, readJson, writeJson, byName } from './config.js'
+import { HOME, saveConfig, readJson, writeJson, byName, takeIn, whatOf } from './config.js'
 import { DEFAULT_SERVERS } from './mcp.js'
 import { sections, BUILTIN_PROMPTS } from './prompts.js'
 import { Client } from './client.js'
@@ -102,6 +102,10 @@ const skillsDir = () => path.join(HOME, 'skills')
 // what the provider said (names, sizes, prices; not what's known from models.dev or tests, which
 // changes). Asked for again when its list is switched on or off, or the provider is changed.
 const LISTS = path.join(HOME, 'model-lists.json')
+// The page's own choices (sorts, folded providers, the provider ranking): kept here, not in the
+// browser, whose storage is per address (a new port each time)
+const PREFS = path.join(HOME, 'settings-page.json')
+const PREF_KEYS = ['catSort', 'folded', 'sort', 'rank']
 function forgetList(...names) {
   const all = readJson(LISTS, {})
   if (!names.some((n) => n in all)) return
@@ -342,11 +346,17 @@ export function startSettings({ cfg, apply = () => {}, port = 0 } = {}) {
     mcp: mcpServers(),
     prompts: prompts(),
     home: tilde(HOME),
+    prefs: readJson(PREFS, {}),
   })
 
   const routes = {
     'GET /api/state': () => state(),
     'GET /api/log-size': () => logSize(),
+    'POST /api/prefs': ({ key, value }) => {
+      if (!PREF_KEYS.includes(key)) throw new Error(`no such choice: ${key}`)
+      writeJson(PREFS, { ...readJson(PREFS, {}), [key]: value })
+      return {}
+    },
     'POST /api/clear-logs': () => ({ gone: clearLogs(), size: logSize() }),
     'POST /api/provider': async ({ name, baseUrl, apiKey, keepKey, was }) => {
       name = safeName(name)
@@ -680,6 +690,29 @@ export function startSettings({ cfg, apply = () => {}, port = 0 } = {}) {
     },
   }
 
+  // Settings changed by anyone else (another HeartCode or page on this folder, a hand): taken in, and
+  // every open page shown them at once (an event: the whole state, when it's different)
+  const SETTINGS_FILES = ['config.json', 'settings-page.json', 'mcp.json', 'hooks.json', 'keybindings.json', 'theme.json', 'format.json', 'HEARTCODE.md', 'prompts', 'skills']
+  let shown = ''
+  const pushState = () => {
+    for (const what of new Set(takeIn(cfg).map(whatOf))) changed(what)
+    const now = state()
+    const text = JSON.stringify(now)
+    if (text !== shown && listeners.size) emit('state', now)
+    shown = text
+  }
+  let pending = null
+  try {
+    const w = fs.watch(HOME, { recursive: true }, (_, f) => {
+      if (!SETTINGS_FILES.includes(String(f ?? '').split(path.sep)[0])) return
+      clearTimeout(pending)
+      pending = setTimeout(pushState, 150) // a file written in parts, several at once: one look
+    })
+    w.on('error', () => {})
+    w.unref()
+  } catch (e) {
+    log('web', `can't watch ${HOME}: ${e.message}`)
+  }
   const server = http.createServer(async (req, res) => {
     const send = (code, body, type = 'application/json') => {
       res.writeHead(code, { 'content-type': type, 'cache-control': 'no-store', 'x-content-type-options': 'nosniff', 'x-frame-options': 'DENY', 'referrer-policy': 'no-referrer' })
@@ -705,6 +738,8 @@ export function startSettings({ cfg, apply = () => {}, port = 0 } = {}) {
       }
       const route = routes[`${req.method} ${url.pathname}`]
       if (!route) return send(404, { error: 'not found' })
+      // what another HeartCode (or a hand) changed meanwhile, first: shown, and changed from, not undone
+      for (const what of new Set(takeIn(cfg).map(whatOf))) changed(what)
       let raw = ''
       for await (const ch of req) {
         raw += ch