heartcode 0.1.12 → 0.1.13

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 What changed in each version of HeartCode, newest first.
 
+## 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.13",
   "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

@@ -262,7 +262,7 @@
   /* 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; }
@@ -930,36 +930,21 @@ 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 {}
   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,9 +957,10 @@ 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())
+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())
+$('fold-all').onclick = () => (settle(), S?.providers.forEach((p) => FOLDED.add(p.name)), folds())
+$('unfold-all').onclick = () => (settle(), FOLDED.clear(), folds())
 // 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
@@ -1491,21 +1477,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 +1504,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 +1564,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,9 +1603,10 @@ 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),
     order.length
@@ -1992,9 +1960,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 +1991,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 +2001,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

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