heartcode 0.1.9 → 0.1.13

package/src/config.js

@@ -72,9 +72,22 @@ function fromFile() {
 // cfg: { providers: {name: {baseUrl, apiKey}}, provider, model, context, adhoc }
 // flags > env > ~/.heart/config.json. A URL from flags or env becomes a provider for this run
 // only (cfg.adhoc), unless saved.
-// The model name that means your list: #1, then the fallbacks when one fails (also: no model given).
-// Any other model given for a run (-m, HEART_MODEL, a URL of its own) is that model alone: fixed.
-export const DEFAULT_MODEL = 'default'
+// The model name that means your list: #1, then the next when one fails (also: no model given;
+// "default" is its old name). Any other model given for a run (-m, HEART_MODEL, a URL of its own)
+// is that model alone: fixed (--fallback-model adds others after it).
+export const AUTO_MODEL = 'auto'
+export const isAuto = (m) => m === AUTO_MODEL || m === 'default'
+
+// A model as given (-m, --fallback-model, /model): "provider/model" (as opencode writes it; split at
+// the first "/", provider names have none), the older "provider model", or a model of `current`.
+export function parseModel(v, providers, current) {
+  v = String(v).trim()
+  const spaced = /^(\S+)\s+(.+)$/.exec(v)
+  if (spaced && providers[spaced[1]]) return { provider: spaced[1], model: spaced[2] }
+  const i = v.indexOf('/')
+  if (i > 0 && providers[v.slice(0, i)]) return { provider: v.slice(0, i), model: v.slice(i + 1) }
+  return { provider: current, model: v }
+}
 
 // providers by name, A to Z: every list of them (settings page, `heart providers`, pickers) follows
 export const byName = (providers) => Object.fromEntries(Object.entries(providers ?? {}).sort(([a], [b]) => a.localeCompare(b, undefined, { sensitivity: 'base' })))
@@ -98,15 +111,61 @@ export function loadConfig(flags = {}) {
     cfg.providers[cfg.provider].apiKey = apiKey
   }
   const model = flags.model || process.env.HEART_MODEL
-  if (model && model !== DEFAULT_MODEL) Object.assign(cfg, { model, fixed: true })
+  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/guided.js

@@ -225,14 +225,8 @@ class Guided {
 
   // `answer: true` streams the reply to the user as the answer; otherwise only thinking is shown.
   // room: tokens of context to keep free for the reply (only for fitting the context; never sent).
-  async query(question, opts = {}, tries = 0) {
-    try {
-      return await this.ask1(question, opts, tries)
-    } catch (e) {
-      // too large for the model: strat.context has dropped to its limit, so the context shrinks
-      if (!e.inputLimit || tries >= 3) throw e
-      return this.query(question, opts, tries + 1)
-    }
+  query(question, opts = {}) {
+    return this.ask1(question, opts)
   }
 
   async ask1(question, { room = 32, schema, oneLine, onToken, answer, skipKey } = {}, tries = 0) {

package/src/headless.js

@@ -150,6 +150,7 @@ export async function runHeadless(app, opts) {
     said = false
     current = { ctl: new AbortController() }
     app.signal = current.ctl.signal
+    app.working = true // settings changed meanwhile: MCP servers and skills wait for the end of it
     let answer = ''
     let error = null
     try {
@@ -162,6 +163,8 @@ export async function runHeadless(app, opts) {
       log('error', error, e.stack)
     } finally {
       app.save()
+      app.working = false
+      app.afterLine?.()
     }
     const subtype = current.maxTurns ? 'error_max_turns' : error ? 'error_during_execution' : 'success' // as Claude Code names them
     current = null

package/src/settings.html

@@ -228,11 +228,15 @@
   .olist .test button { flex: none; }
   .olist .test.ok { color: var(--ok); }
   .olist .test.warn { color: var(--accent); }
-  dialog#ms { width: min(480px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); padding: 22px 24px; }
-  dialog#ms::backdrop { background: rgba(0, 0, 0, .55); }
-  dialog#ms h2 { margin: 0 0 6px; font-family: var(--mono); font-size: 15px; overflow-wrap: anywhere; }
+  dialog { width: 70vw; max-width: none; max-height: calc(100vh - 32px); overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); padding: 22px 24px; }
+  dialog::backdrop { background: rgba(0, 0, 0, .55); }
+  dialog h2 { margin: 0 0 6px; font-family: var(--mono); font-size: 15px; overflow-wrap: anywhere; }
   dialog#ms .opt:last-of-type { border-bottom: 0; }
-  dialog#ms .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
+  #pr-list { list-style: none; margin: 12px 0 0; padding: 0; counter-reset: rank; }
+  #pr-list li { counter-increment: rank; padding: 9px 12px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); cursor: grab; user-select: none; }
+  #pr-list li::before { content: counter(rank) ".  ⋮⋮  "; color: var(--muted); }
+  #pr-list li.dragging { opacity: .4; }
+  dialog .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
   .olist .test.failed { color: var(--err); }
   .olist .test.testing, .olist .test.waiting { color: var(--accent); }
   .olist .test button { padding: 0 7px; font-size: 11px; }
@@ -258,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; }
@@ -431,19 +435,6 @@
       </div>
       <div class="steps" id="steps"></div>
       <div class="stack">
-          <div class="card" id="p-form" hidden>
-            <h2 id="p-title">Add a provider</h2>
-            <p class="sub">Pick one to fill in its address, or type any OpenAI-compatible API below.</p>
-            <div class="presets" id="presets"></div>
-            <div class="row" style="margin-top:6px">
-              <div class="grow"><label class="f" for="p-name">Name</label><input type="text" id="p-name" placeholder="openrouter, groq, work…"></div>
-              <div class="grow" style="flex:2"><label class="f" for="p-url">Base URL</label><input type="text" id="p-url" placeholder="https://openrouter.ai/api/v1"></div>
-            </div>
-            <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 class="primary" id="p-save">Add provider</button><button class="ghost" id="p-cancel">Cancel</button></div>
-          </div>
           <div class="work" id="p-work" hidden>
             <div class="card catalog">
               <div class="cat-top">
@@ -565,20 +556,8 @@
 
     <!-- MCP servers -->
     <section class="page" id="page-mcp">
-      <div class="head"><div><h1>MCP servers</h1><p class="lead">Programs that give the model more tools: a browser, a database, your issue tracker. Off: HeartCode doesn't start it or offer it to the model.</p></div></div>
+      <div class="head"><div><h1>MCP servers</h1><p class="lead">Programs that give the model more tools: a browser, a database, your issue tracker. Off: HeartCode doesn't start it or offer it to the model.</p></div><button class="primary" id="c-open">+ Add a server</button></div>
       <div class="stack">
-        <div class="card">
-          <h2>Add a server</h2>
-          <p class="sub">The command that starts it on this machine, or the URL of a remote one (a sign-in page opens if it needs one).</p>
-          <div class="row">
-            <div style="width:200px"><label class="f" for="c-name">Name</label><input type="text" id="c-name" placeholder="github"></div>
-            <div><label class="f">Kind</label><div class="seg" id="c-kind">
-              <label class="on"><input type="radio" name="c-kind" value="command" checked>Command</label><label><input type="radio" name="c-kind" value="url">URL</label>
-            </div></div>
-            <div class="grow" style="flex:3"><label class="f" for="c-what" id="c-what-label">Command</label><input type="text" id="c-what" placeholder="npx -y @modelcontextprotocol/server-github"></div>
-            <button class="primary" id="c-add">Add server</button>
-          </div>
-        </div>
         <div class="card" id="c-list"></div>
         <details class="card" id="c-raw"><summary style="cursor:pointer;font-weight:600">Edit mcp.json directly</summary><p class="sub" style="margin-top:10px">For what the form doesn't have: environment variables (<span class="mono">"env"</span>), headers, and so on.</p><div id="c-file"></div></details>
       </div>
@@ -617,6 +596,40 @@
     <div class="actions"><button id="ms-cancel" type="button">Cancel</button><button class="primary" id="ms-save" type="button">Save</button></div>
   </form>
 </dialog>
+<dialog id="p-form" aria-labelledby="p-title">
+  <h2 id="p-title">Add a provider</h2>
+  <p class="sub">Pick one to fill in its address, or type any OpenAI-compatible API below.</p>
+  <div class="presets" id="presets"></div>
+  <div class="row" style="margin-top:6px">
+    <div class="grow"><label class="f" for="p-name">Name</label><input type="text" id="p-name" placeholder="openrouter, groq, work…"></div>
+    <div class="grow" style="flex:2"><label class="f" for="p-url">Base URL</label><input type="text" id="p-url" placeholder="https://openrouter.ai/api/v1"></div>
+  </div>
+  <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>
+</dialog>
+<dialog id="c-form" aria-labelledby="c-title">
+  <h2 id="c-title">Add a server</h2>
+  <p class="sub">The command that starts it on this machine, or the URL of a remote one (a sign-in page opens if it needs one).</p>
+  <div class="row">
+    <div style="width:200px"><label class="f" for="c-name">Name</label><input type="text" id="c-name" placeholder="github"></div>
+    <div><label class="f">Kind</label><div class="seg" id="c-kind">
+      <label class="on"><input type="radio" name="c-kind" value="command" checked>Command</label><label><input type="radio" name="c-kind" value="url">URL</label>
+    </div></div>
+    <div class="grow" style="flex:3"><label class="f" for="c-what" id="c-what-label">Command</label><input type="text" id="c-what" placeholder="npx -y @modelcontextprotocol/server-github"></div>
+  </div>
+  <div class="actions"><button id="c-cancel">Cancel</button><button class="primary" id="c-add">Add server</button></div>
+</dialog>
+<dialog id="k-form" aria-labelledby="k-title"></dialog>
+<dialog id="pr" aria-labelledby="pr-title">
+  <form>
+    <h2 id="pr-title">Provider ranking</h2>
+    <p class="sub">Drag the providers into order, best first. Your models are then sorted by it.</p>
+    <ol id="pr-list"></ol>
+    <div class="actions"><button id="pr-cancel" type="button">Cancel</button><button class="primary" id="pr-save" type="button">Save</button></div>
+  </form>
+</dialog>
 <div id="toast" role="status"></div>
 <div id="tip" role="tooltip"></div>
 <script>
@@ -766,7 +779,7 @@ const DRAFTS = { prompts: {}, skills: {}, files: {} }
 const SEL = { prompts: 'agent/system', skills: null, files: null }
 function masterDetail(kind, itemsEl, detailEl, groups, draw) {
   const all = groups.flatMap((g) => g.items)
-  if (!all.some((x) => x.id === SEL[kind]) && SEL[kind] !== '+new') SEL[kind] = all[0]?.id ?? null
+  if (!all.some((x) => x.id === SEL[kind])) SEL[kind] = all[0]?.id ?? null
   // the list: built when its items change; otherwise each item is updated in place (the chosen
   // one, a dot for unsaved changes, "yours"), so it stays where you scrolled it
   const inside = (x) => [h('div', { className: 't' }, DRAFTS[kind][x.id] !== undefined ? h('span', { className: 'dot', title: 'not saved' }) : null, x.title, x.badge ?? null), x.sub ? h('div', { className: 'd', textContent: x.sub }) : null]
@@ -787,7 +800,7 @@ function masterDetail(kind, itemsEl, detailEl, groups, draw) {
   }
   itemsEl.closest('.md').classList.toggle('solo', !all.length) // nothing to list: no list column
   itemsEl.closest('.md').classList.toggle('tabs', all.length > 0 && all.length <= 8) // a few: tabs on top
-  put(detailEl, draw(SEL[kind] === '+new' ? '+new' : all.find((x) => x.id === SEL[kind])))
+  put(detailEl, draw(all.find((x) => x.id === SEL[kind])))
   itemsEl.closest('.md').classList.add('fill')
   fillHeight()
 }
@@ -879,10 +892,8 @@ const useModel = (provider, model) => act('/api/model', { provider, model }, `He
 const saveOrder = (list, done, opts = {}) => act('/api/order', { list, ...opts }, done)
 
 let editing = null
-let formOpen = false
 function openForm(p = null) {
   editing = p
-  formOpen = true
   $('p-title').textContent = p ? `Edit ${p.name}` : 'Add a provider'
   $('p-name').value = p?.name ?? ''
   $('p-url').value = p?.baseUrl ?? ''
@@ -891,15 +902,11 @@ function openForm(p = null) {
   $('p-keynote').textContent = p?.key ? `(now ${p.key})` : ''
   $('p-save').textContent = p ? 'Save changes' : 'Add provider'
   drawPresets()
-  drawProviders(S)
-  $('p-form').scrollIntoView({ behavior: 'smooth', block: 'start' })
+  $('p-form').showModal()
   ;(p ? $('p-url') : $('p-name')).focus()
 }
-function closeForm() {
-  editing = null
-  formOpen = false
-  drawProviders(S)
-}
+const closeForm = () => $('p-form').close()
+$('p-form').onclose = () => (editing = null)
 $('p-open').onclick = () => openForm()
 $('p-cancel').onclick = closeForm
 $('p-save').onclick = async () => {
@@ -923,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)
@@ -965,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
@@ -1183,17 +1176,12 @@ addEventListener('scroll', () => $('tip').classList.remove('show'), true)
 function drawProviders(s) {
   const order = s.order
   const none = !s.providers.length
-  // the steps: always on the page (nothing jumps when one is done), ticked off as you go; with
-  // no provider yet, the form is open (the only way in: no other button)
+  // 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' : ''],
     ['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))))
-  const showForm = formOpen || none
-  $('p-form').hidden = !showForm
-  $('p-cancel').hidden = none // nothing to go back to
-  $('p-open').hidden = showForm
   $('p-work').hidden = none
   fillHeight()
 
@@ -1241,9 +1229,9 @@ function drawProviders(s) {
       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'], ['any', 'at any error']].map(([v, t]) => h('option', { value: v, textContent: t, selected: s.rotation.on === v }))),
+          [['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: 'A rate limit, server error, timeout or lost connection moves on at once, and so does a model it can\'t use (a wrong key, no access, "model not found"). Other errors, like a bad request, stop.', retries: 'The same model is tried again (with a short wait) that many times first.', any: 'Also errors like "model not found" or a bad request move on.' }[s.rotation.on] }),
+      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)
@@ -1479,7 +1467,7 @@ const can = (t) => ({ tools: t.tested ? t.tested.mode === 'tools' : t.known?.too
 // how: text (A to Z first), cheap (lowest first), else most first
 const COLS = {
   model: { label: 'Model', how: 'text', get: (t) => t.model },
-  provider: { label: 'Provider', how: 'text', get: (t) => t.provider },
+  provider: { label: 'Provider', how: 'rank', get: (t) => RANKED.get(t.provider) }, // by your ranking of the providers
   context: { label: 'Context', get: (t) => t.tested?.context ?? t.known?.context ?? 0 },
   abilities: { label: 'Abilities', get: (t) => Object.values(can(t)).filter(Boolean).length },
   tools: { label: 'Tools', get: (t) => can(t).tools },
@@ -1489,19 +1477,41 @@ 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 []
+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)]
+}
+// the ranking dialog: drag a provider to its place, then Save
+function openRanking() {
+  const list = $('pr-list')
+  let held = null
+  put(list, ranked().map((name) => h('li', { draggable: true, textContent: name })))
+  list.ondragstart = (e) => (held = e.target).classList.add('dragging')
+  list.ondragend = () => held?.classList.remove('dragging')
+  list.ondragover = (e) => {
+    e.preventDefault()
+    const over = e.target.closest('li')
+    if (!held || !over || over === held) return
+    const r = over.getBoundingClientRect()
+    list.insertBefore(held, e.clientY > r.top + r.height / 2 ? over.nextSibling : over)
   }
-})()
+  $('pr').showModal()
+}
+$('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
+  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
@@ -1511,7 +1521,9 @@ function clickSort(key) {
   if (at.dir === firstDir(key)) return setSort(SORT.map((x) => (x === at ? { key, dir: at.dir === 'up' ? 'down' : 'up' } : x)))
   setSort(SORT.filter((x) => x !== at))
 }
+let RANKED = new Map() // provider → its place in the ranking, for one sort
 function sorted(order) {
+  RANKED = new Map(ranked().map((n, i) => [n, i]))
   const cmp = (a, b, { key, dir }) => {
     let x = COLS[key].get(a)
     let y = COLS[key].get(b)
@@ -1523,7 +1535,7 @@ function sorted(order) {
   }
   return order.map((t, i) => ({ t, i })).sort((a, b) => SORT.reduce((r, s) => r || cmp(a.t, b.t, s), 0) || a.i - b.i).map((x) => x.t)
 }
-const dirText = (key, dir) => (key === 'works' ? (dir === 'down' ? 'working first' : 'not working first') : COLS[key].how === 'text' ? (dir === 'up' ? 'A→Z' : 'Z→A') : COLS[key].how === 'cheap' ? (dir === 'up' ? 'cheapest first' : 'priciest first') : dir === 'down' ? 'most first' : 'least first')
+const dirText = (key, dir) => (key === 'provider' ? (dir === 'up' ? 'your ranking' : 'your ranking, reversed') : key === 'works' ? (dir === 'down' ? 'working first' : 'not working first') : COLS[key].how === 'text' ? (dir === 'up' ? 'A→Z' : 'Z→A') : COLS[key].how === 'cheap' ? (dir === 'up' ? 'cheapest first' : 'priciest first') : dir === 'down' ? 'most first' : 'least first')
 // The models ticked on the Your models page ("provider/model"), to remove several at once; the last
 // one ticked, so a Shift+click ticks the ones between
 const PICKED = new Set()
@@ -1552,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)
@@ -1594,8 +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
@@ -1845,8 +1856,10 @@ for (const r of document.querySelectorAll('input[name="c-kind"]')) r.onchange =
 }
 $('c-add').onclick = async () => {
   const r = await act('/api/mcp/add', { name: $('c-name').value, [mcpKind()]: $('c-what').value }, `added ${$('c-name').value.trim()}: it starts from the next message`)
-  if (r) $('c-name').value = $('c-what').value = ''
+  if (r) ($('c-name').value = $('c-what').value = ''), $('c-form').close()
 }
+$('c-open').onclick = () => ($('c-form').showModal(), $('c-name').focus())
+$('c-cancel').onclick = () => $('c-form').close()
 function drawMcp(s) {
   put($('c-list'), h('h2', { textContent: 'Servers' }), h('p', { className: 'sub', textContent: 'Built in, and yours. Switch one off to keep it without using it.' }),
     s.mcp.length ? s.mcp.map((m) => h('div', { className: 'opt' },
@@ -1873,7 +1886,27 @@ function parseSkill(text) {
 }
 const skillText = (k) => `---\n${k.description.trim() ? `description: ${k.description.trim().replace(/\n/g, ' ')}\n` : ''}use: ${k.use}\n${k.extra.map((l) => l + '\n').join('')}---\n\n${k.body.trim()}\n`
 const NEW = { name: '', description: '', use: 'both', extra: [], body: '' }
-$('k-new').onclick = () => ((SEL.skills = '+new'), S && drawSkills(S))
+// a new skill: the form in a dialog (what you typed is kept if you close it)
+function newSkill() {
+  const f = skillForm('+new', NEW, { isNew: true })
+  const first = !S.skills.length
+  put($('k-form'), h('h2', { id: 'k-title', textContent: first ? 'Make your first skill' : 'New skill' }),
+    first ? h('p', { className: 'sub', textContent: 'A skill is a prompt you use again and again, like "review this" or "write the release notes". Skills from Claude Code and others: /import in HeartCode.' }) : null,
+    f.el,
+    h('div', { className: 'actions' },
+      h('button', { textContent: 'Cancel', onclick: () => $('k-form').close() }),
+      h('button', { className: 'primary', textContent: 'Create skill', onclick: async () => {
+        const slug = f.d.name.trim().toLowerCase().replace(/[^a-z0-9_-]+/g, '-').replace(/^-+|-+$/g, '')
+        if (!f.d.body.trim()) return toast('Write the prompt first', true)
+        const was = SEL.skills
+        SEL.skills = slug // the new one, chosen in the list once it's there
+        if (await saveItem('skills', '+new', '/api/skill', { name: f.d.name, text: skillText(f.d) }, `created /${slug}`)) $('k-form').close()
+        else SEL.skills = was
+      } })))
+  $('k-form').showModal()
+  $('k-form').querySelector('input')?.focus()
+}
+$('k-new').onclick = newSkill
 function skillForm(id, start, { isNew, readOnly }) {
   const d = DRAFTS.skills[id] ?? { ...start, extra: [...start.extra] } // your unsaved changes, else as saved
   const touch = () => (DRAFTS.skills[id] = d) // a change: kept (and dotted in the list) until it's saved
@@ -1891,27 +1924,11 @@ function skillForm(id, start, { isNew, readOnly }) {
   ] }
 }
 function drawSkills(s) {
-  if (!s.skills.length) SEL.skills = '+new' // none yet: the form is the page (one way in, no empty card)
-  $('k-new').hidden = SEL.skills === '+new'
   const mine = s.skills.filter((k) => k.mine)
   const theirs = s.skills.filter((k) => !k.mine)
   const item = (k) => ({ id: k.name, title: '/' + k.name, sub: k.description, k })
   masterDetail('skills', $('k-items'), $('k-detail'), [{ title: mine.length && theirs.length ? 'Yours' : '', items: mine.map(item) }, { title: 'From projects', items: theirs.map(item) }], (x) => {
-    if (x === '+new') {
-      const f = skillForm('+new', NEW, { isNew: true })
-      const first = !s.skills.length
-      return h('div', { className: 'card' }, h('h2', { textContent: first ? 'Make your first skill' : 'New skill' }),
-        first ? h('p', { className: 'sub', textContent: 'A skill is a prompt you use again and again, like "review this" or "write the release notes". Skills from Claude Code and others: /import in HeartCode.' }) : null,
-        f.el,
-        h('div', { className: 'actions' },
-          h('button', { className: 'primary', textContent: 'Create skill', onclick: async () => {
-            const slug = f.d.name.trim().toLowerCase().replace(/[^a-z0-9_-]+/g, '-').replace(/^-+|-+$/g, '')
-            if (!f.d.body.trim()) return toast('Write the prompt first', true)
-            SEL.skills = slug // the new one, chosen in the list once it's there
-            if (!(await saveItem('skills', '+new', '/api/skill', { name: f.d.name, text: skillText(f.d) }, `created /${slug}`))) SEL.skills = '+new'
-          } }),
-          first ? null : h('button', { className: 'ghost', textContent: 'Cancel', onclick: () => (saved('skills', '+new'), (SEL.skills = null), drawSkills(S)) })))
-    }
+    if (!x) return h('div', { className: 'card' }, h('h2', { textContent: 'No skills yet' }), h('p', { className: 'sub', textContent: 'A skill is a prompt you use again and again, like "review this" or "write the release notes". Make one with + New skill, or bring them from Claude Code and others with /import in HeartCode.' }))
     const k = x.k
     const f = skillForm(k.name, parseSkill(k.text), { readOnly: !k.mine })
     return h('div', { className: 'card' },
@@ -1943,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)
@@ -1963,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' })
@@ -1972,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