heartcode 0.1.0 → 0.1.3

package/src/settings.html

@@ -42,6 +42,9 @@
   .page { display: none; }
   .page.on { display: block; }
   .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
+  .disk { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
+  .disk b { font-size: 22px; }
+  .disk .k { color: var(--muted); font-size: 12.5px; }
   h1 { font-size: 24px; margin: 0 0 4px; }
   .lead { color: var(--muted); margin: 0; max-width: 760px; }
   h2 { font-size: 15px; margin: 0 0 4px; }
@@ -145,7 +148,7 @@
 
   /* 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) 420px; gap: 20px; }
+  .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; border-bottom: 1px solid var(--line); display: flex; gap: 8px; align-items: center; }
   .cat-top input { flex: 1; min-width: 0; }
@@ -206,10 +209,10 @@
   .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; }
-  /* two lines' room, never more: a test's progress doesn't move the cards below */
-  .olist .test { font-size: 11.5px; line-height: 1.45; margin-top: 3px; color: var(--faint); display: flex; align-items: flex-start; gap: 6px; height: calc(2 * 1.45em + 2px); }
-  .olist .test .msg { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
-  .olist .test .spin { margin-top: 3px; flex: none; }
+  /* 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; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .olist .test .spin { flex: none; }
   .olist .test button { flex: none; }
   .olist .test.ok { color: var(--ok); }
   .olist .test.warn { color: var(--accent); }
@@ -224,13 +227,16 @@
   .spin { width: 10px; height: 10px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
   @keyframes spin { to { transform: rotate(360deg); } }
   .mine-top { padding: 16px 18px 6px; }
-  .mine-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+  .mine-title { display: flex; align-items: center; justify-content: space-between; gap: 6px 8px; flex-wrap: wrap; }
   .mine-title h2 { margin: 0 0 6px; flex: 1; white-space: nowrap; }
   .mine-title button { white-space: nowrap; }
-  .olist { list-style: none; margin: 0; padding: 6px 12px 12px; flex: 1; overflow-y: auto; }
-  .olist li { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; background: var(--panel); }
-  .olist li.in { border-color: var(--brand); background: var(--brand-soft); }
-  .olist li.next { border-style: dashed; background: none; color: var(--faint); font-size: 12.5px; justify-content: center; padding: 14px 10px; }
+  /* your models as a table: a header, then one line a model */
+  .ohead, .olist li.in { display: grid; grid-template-columns: 14px 30px minmax(0, 1.7fr) minmax(0, 0.6fr) minmax(0, 1.5fr) 26px; align-items: center; column-gap: 8px; padding: 7px 16px; }
+  .ohead { font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-top: 8px; padding-bottom: 8px; }
+  .olist { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; }
+  .olist li { border-bottom: 1px solid var(--line); background: var(--panel); font-size: 13px; }
+  .olist li.in:first-child { background: var(--brand-soft); }
+  .olist li.next { border-bottom: 0; background: none; color: var(--faint); font-size: 12.5px; text-align: center; padding: 14px 10px; }
   .olist li.in { cursor: grab; user-select: none; transition: transform .16s ease, box-shadow .16s ease; position: relative; }
   .olist.sorting li.in { transition: transform .16s ease; }
   .olist li.in.lifted { transition: none; z-index: 2; cursor: grabbing; box-shadow: 0 10px 28px rgba(0, 0, 0, .35), 0 0 0 2px var(--brand); }
@@ -243,8 +249,8 @@
   .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: 1080px; }
-  .mt-h, .mtable li { display: grid; grid-template-columns: 16px 30px minmax(170px, 3fr) minmax(80px, 1.2fr) 76px 82px 56px 62px 54px 60px 64px minmax(200px, 2fr) 30px; align-items: center; column-gap: 8px; padding: 8px 18px; }
+  .mt { min-width: 1090px; }
+  .mt-h, .mtable li { display: grid; grid-template-columns: 16px 28px minmax(150px, 3fr) minmax(70px, 1.1fr) 66px 66px 42px 60px 50px 54px 60px minmax(166px, 1.5fr) minmax(120px, 1.3fr) 28px; align-items: center; column-gap: 6px; padding: 8px 16px; }
   .mt-h { border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); padding-top: 10px; padding-bottom: 10px; }
   .mt-h button { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; white-space: nowrap; }
   .mt-h button:hover { color: var(--text); }
@@ -266,13 +272,19 @@
   .mtable .src { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
   .mtable .src.warn { color: var(--accent); }
   .mtable button { padding: 1px 7px; font-size: 11.5px; }
+  .mtable .try { font-size: 12px; color: var(--faint); display: flex; align-items: center; gap: 6px; min-width: 0; }
+  .mtable .try .msg { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .mtable .try.ok { color: var(--ok); }
+  .mtable .try.bad { color: var(--err); }
+  .mtable .try.going { color: var(--accent); }
   .mt-empty { padding: 28px 18px; color: var(--muted); }
   .olist .grip { cursor: grab; color: var(--faint); padding: 0 2px; user-select: none; }
   .olist .n { font-weight: 800; color: var(--brand); min-width: 24px; }
-  .olist .what { flex: 1; min-width: 0; }
-  .olist .m { font-family: var(--mono); font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
-  .olist .p { color: var(--muted); font-size: 12px; }
+  .olist .m { font-family: var(--mono); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .olist .p { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .olist .p.use { color: var(--brand); font-weight: 600; }
   .olist button { padding: 2px 8px; font-size: 12px; }
+  .olist button.danger { padding: 1px 6px; }
   .mine-rules { border-top: 1px solid var(--line); padding: 4px 18px 16px; }
   .mine-rules .hint { min-height: 2.9em; } /* the hints differ in length: the next setting stays put */
   .mine-empty { padding: 30px 22px; text-align: center; color: var(--muted); }
@@ -403,7 +415,7 @@
 
     <!-- Logging -->
     <section class="page" id="page-logging">
-      <div class="head"><div><h1>Logging</h1><p class="lead">What HeartCode writes down, for finding out what went wrong. Off unless you switch it on.</p></div></div>
+      <div class="head"><div><h1>Logging</h1><p class="lead">What HeartCode writes down, for finding out what went wrong. Off unless you switch it on.</p></div><div class="disk" id="l-disk"></div></div>
       <div class="card">
         <div class="log-opts">
           <div>
@@ -597,6 +609,7 @@ function showPage() {
   for (const p of PAGES) $('page-' + p).classList.toggle('on', p === page())
   for (const a of document.querySelectorAll('nav a')) a.classList.toggle('on', a.dataset.page === page())
   if (S) drawUsing(S)
+  if (page() === 'logging') drawDisk()
   scrollTo(0, 0)
   fillHeight()
   document.querySelector('nav a.on')?.scrollIntoView({ inline: 'center', block: 'nearest' }) // on a phone the pages scroll sideways
@@ -796,12 +809,78 @@ function testLine(t) {
   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: set up what it can do', [retry(t), edit('Set it up')]]
+      : 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')]
-  return h('div', { className: 'test ' + cls }, h('span', { className: 'msg', textContent: text }), action)
+  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)
 }
 
-// models.dev looked up again: one model (its Retry), or all of yours (Retry all)
+// 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 } | { ok: false, error }
+const keyOf = (t) => `${t.provider}/${t.model}`
+// The Works? cell: the last result (cut short, all of it on hover) and Test.
+function triedCell(t) {
+  const r = TRIES[keyOf(t)]
+  const secs = r?.ms != null ? ` · ${(r.ms / 1000).toFixed(1)}s` : ''
+  const [cls, text, about] = !r ? ['', 'not tested', 'send it a short message to see that it really answers (your key, access to it, its name)']
+    : r.going ? ['going', 'testing…', 'sending it a short message']
+    : r.ok ? ['ok', `✓ ${(r.ms / 1000).toFixed(1)}s`, `works: it answered "${r.reply}"${secs}`]
+    : ['bad', `✗ ${r.status ?? (/nothing/.test(r.error) ? 'empty' : /within/.test(r.error) ? 'no answer' : 'failed')}`, `doesn't work: ${r.error}${secs}`] // the reason on hover
+  return h('div', { className: 'try ' + cls },
+    h('span', { className: 'msg', textContent: text, title: about }),
+    h('button', { className: 'small', textContent: 'Test', disabled: Boolean(r?.going), title: 'send it a short message to see that it really answers', 'aria-label': `test ${t.model}`, onclick: () => tryModel(t) }))
+}
+function showTried(t) {
+  document.querySelector(`#mt li[data-key="${CSS.escape(keyOf(t))}"] .try`)?.replaceWith(triedCell(t))
+  if (SORT.some((x) => x.key === 'works') && !TRIES[keyOf(t)]?.going) drawMine(S) // sorted by it: its place may change
+}
+async function tryModel(t) {
+  TRIES[keyOf(t)] = { going: true }
+  showTried(t)
+  const r = (await act('/api/try', { provider: t.provider, model: t.model })) ?? { ok: false, error: 'the settings page did not answer' }
+  TRIES[keyOf(t)] = r
+  showTried(t)
+  return r
+}
+let testingAll = false
+async function tryAll() {
+  if (testingAll) return
+  testingAll = true
+  const list = [...(S?.order ?? [])]
+  let good = 0
+  toast(`testing ${list.length} model${list.length === 1 ? '' : 's'}…`)
+  // several at once (6), but at most 2 per provider: more would trip its rate limit and show
+  // working models as failing
+  for (const t of list) TRIES[keyOf(t)] = { going: true }
+  list.forEach(showTried)
+  const queue = [...list]
+  const busy = {}
+  const worker = async () => {
+    while (queue.length) {
+      const i = queue.findIndex((t) => (busy[t.provider] ?? 0) < 2)
+      if (i === -1) {
+        await new Promise((r) => setTimeout(r, 100)) // every waiting one's provider is busy
+        continue
+      }
+      const [t] = queue.splice(i, 1)
+      busy[t.provider] = (busy[t.provider] ?? 0) + 1
+      try {
+        if ((await tryModel(t)).ok) good++
+      } finally {
+        busy[t.provider]--
+      }
+    }
+  }
+  try {
+    await Promise.all(Array.from({ length: Math.min(6, list.length) }, worker))
+  } finally {
+    testingAll = false
+  }
+  toast(`${good} of ${list.length} work${good === list.length ? '' : `; ${list.length - good} don't (Works? says why, on hover)`}`, good < list.length)
+}
+
+// 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) {
   toast(t ? `looking up ${t.model} in models.dev…` : 'looking up your models in models.dev…')
@@ -918,19 +997,19 @@ function drawProviders(s) {
       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: 'Retry all', title: 'look all of them up in models.dev again', style: order.length ? '' : 'visibility:hidden', onclick: () => lookUp() }),
+        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.` })),
+    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 ? h('ol', { className: 'olist' }, order.map((t, i) => h('li', {
         className: 'in', '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))))),
       },
-      order.length > 1 ? h('span', { className: 'grip', textContent: '⋮⋮', title: 'drag to reorder', 'aria-hidden': 'true' }) : null,
-      h('span', { className: 'n', textContent: `#${i + 1}` }),
-      h('div', { className: 'what' },
-        h('div', { className: 'm', textContent: t.model }),
-        h('div', { className: 'p', textContent: `${t.provider} · ${i === 0 ? 'in use' : 'fallback'}` }),
-        testLine(t)),
+      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) })),
       ), h('li', { className: 'next', textContent: `#${order.length + 1} · click a model ${side} to add it here (a fallback)` }))
       : h('div', { className: 'mine-empty' }, h('b', { textContent: 'No model chosen yet' }), `Click a model ${side}: it becomes #1, the one HeartCode uses.`),
@@ -940,7 +1019,7 @@ function drawProviders(s) {
         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 }))),
         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. Errors like "model not found" or a wrong key 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: '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('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)
@@ -1122,6 +1201,7 @@ const COLS = {
   images: { label: 'Images', get: (t) => can(t).images },
   input: { label: 'In $/M', how: 'cheap', get: (t) => t.price?.input ?? null },
   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 {
@@ -1157,7 +1237,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) => (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 === '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')
 function drawMine(s) {
   const order = s.order
   $('n-mine').textContent = order.length || ''
@@ -1198,10 +1278,11 @@ function drawMine(s) {
         : order.length > 1 ? 'In your order: HeartCode uses #1, then the next when one fails. Drag a row to move it, or click a column to sort.' : ''),
       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 ? h('button', { className: 'small', textContent: 'Retry all', title: 'look all of them up in models.dev again', onclick: () => lookUp() }) : 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', title: 'send each a short message, several at once (2 per provider at most), to see which really answer', onclick: () => tryAll() }) : null),
     order.length
       ? h('div', { className: 'mt-scroll' }, h('div', { className: 'mt' },
-          h('div', { className: 'mt-h' }, h('span'), h('span', { textContent: '#' }), head('model'), head('provider'), head('context', true), head('abilities', true), head('tools'), head('thinking'), head('images'), head('input', true), head('output', true), h('span', { textContent: 'From' }), h('span')),
+          h('div', { className: 'mt-h' }, h('span'), h('span', { textContent: '#' }), head('model'), head('provider'), head('context', true), head('abilities', true), head('tools'), head('thinking'), head('images'), head('input', true), head('output', true), h('span', { textContent: 'From' }), head('works'), h('span')),
           h('ol', { className: 'mtable' + (order.length < 2 ? '' : ' drag') }, view.map((t) => {
             const c = can(t)
             const ctx = COLS.context.get(t)
@@ -1216,6 +1297,7 @@ function drawMine(s) {
               h('span', { className: 'num', textContent: t.price?.input != null ? usd(t.price.input) : '–' }),
               h('span', { className: 'num', textContent: t.price?.output != null ? usd(t.price.output) : '–' }),
               src(t),
+              triedCell(t),
               h('button', { className: 'danger', textContent: '✕', title: 'take it off the list', 'aria-label': `remove ${t.model}`, onclick: () => removeMine(t.provider, t.model) }))
           }))))
       : h('div', { className: 'mt-empty' }, 'No models in your list yet. ', h('a', { href: '#providers', textContent: 'Choose some under Providers & models' }), '.'))
@@ -1272,7 +1354,36 @@ $('v-save').onclick = () => act('/api/voice', { text: $('v-text').value }, 'voic
 const logSwitch = (s, k, title, about) => h('label', { className: 'opt' },
   h('div', { className: 't' }, h('b', { textContent: title }), h('span', { textContent: about })),
   sw({ checked: s.settings[k], 'aria-label': title, onchange: (e) => act('/api/setting', { name: k, value: e.target.checked }, `${title}: ${e.target.checked ? 'on' : 'off'}`) }))
+// How much room the logs take: asked again when the page shows, when it's redrawn, and (at most every
+// few seconds) while requests are being logged.
+const bytes = (n) => (n >= 1e9 ? `${(n / 1e9).toFixed(1)} GB` : n >= 1e6 ? `${(n / 1e6).toFixed(n >= 1e8 ? 0 : 1)} MB` : n >= 1e3 ? `${Math.round(n / 1e3)} kB` : `${n} bytes`)
+let diskAt = 0
+let diskLater = null
+async function drawDisk() {
+  if (Date.now() - diskAt < 3000) return void (diskLater ??= setTimeout(() => ((diskLater = null), drawDisk()), 3000))
+  diskAt = Date.now()
+  try {
+    showDisk(await api('/api/log-size'))
+  } catch {}
+}
+function showDisk(d) {
+  put($('l-disk'),
+    h('div', { className: 'row', style: 'gap:10px;align-items:center' },
+      h('span', {}, h('span', { className: 'k', textContent: 'Logs on disk ' }), h('b', { textContent: bytes(d.total) })),
+      d.total ? h('button', { className: 'small danger', textContent: 'Delete all', title: 'delete every log (the ones being written right now stay)', onclick: clearAll }) : null),
+    h('div', { className: 'k', textContent: `requests ${bytes(d.requests)} · runs ${bytes(d.runs)}` }))
+}
+async function clearAll() {
+  if (!confirm('Delete all logs, of every run and every request? This can\'t be undone. (The ones being written right now stay.)')) return
+  const r = await act('/api/clear-logs', {})
+  if (!r) return
+  showDisk(r.size)
+  diskAt = Date.now()
+  api('/api/requests').then(({ items }) => ((REQS = items), drawReqs()), () => {})
+  toast(`deleted: logs on disk now ${bytes(r.size.total)}`)
+}
 function drawLogging(s) {
+  drawDisk()
   put($('l-run'), logSwitch(s, 'log', 'Keep a log of every run', `From now on: a folder per run in ${s.logs.runs}, a file per tab (tab-1.log, tab-2.log…).`))
   put($('l-req'), logSwitch(s, 'logRequests', 'Log every request and reply', `Right away: a file per request in ${s.logs.requests}, a folder per run.`))
   $('l-detail').value = s.settings.logDetail
@@ -1310,11 +1421,11 @@ const whyOf = (r) => {
   return r.error
 }
 const resultTag = (r) => h('span', { className: `tag ${r.result === 'ok' ? 'ok' : r.result === 'failed' ? 'err' : ''}`, textContent: r.result === 'ok' ? 'ok' : r.result === 'failed' ? `failed${r.status ? ` ${r.status}` : ''}` : 'stopped' })
-const placeTag = (r) => (r.place > 1 ? h('span', { className: 'tag brand', textContent: `#${r.place} of ${r.of} · fallback` }) : r.of > 1 ? h('span', { className: 'tag', textContent: `#1 of ${r.of}` }) : null)
+const placeTag = (r) => (r.place > 1 ? h('span', { className: 'tag brand', textContent: `#${r.place} of ${r.of} · fallback` }) : null) // #1: nothing to say
 function reqRow(r) {
   const key = `${r.run}/${r.file}`
   return h('button', { className: `rq ${r.result}${reqOpen === key ? ' on' : ''}`, 'data-key': key, onclick: () => openReq(r) },
-    h('div', { className: 'l1' }, resultTag(r), h('span', { className: 'm', textContent: r.model }), placeTag(r)),
+    h('div', { className: 'l1' }, resultTag(r), h('span', { className: 'm', textContent: r.model })), // where it is in your list: in its details
     h('div', { className: 'l2' },
       h('span', { textContent: when(r.at) }), h('span', { textContent: r.provider ?? '' }), h('span', { textContent: secs(r.ms) }),
       r.usage ? h('span', { textContent: tokensOf(r.usage) }) : null,
@@ -1519,6 +1630,7 @@ if (token) {
   // a request logged: at the top of the list, nothing else redrawn
   events.addEventListener('request', (e) => {
     const r = JSON.parse(e.data)
+    if (page() === 'logging') drawDisk() // the logs grew
     if (!REQS) return
     REQS.unshift(r)
     if (REQS.length === 1 || !reqShown(r)) return drawReqs()

package/src/settings.js

@@ -12,11 +12,12 @@ import { HOME, saveConfig, readJson, writeJson } from './config.js'
 import { DEFAULT_SERVERS } from './mcp.js'
 import { sections, BUILTIN_PROMPTS } from './prompts.js'
 import { Client } from './client.js'
+import { clip } from './tools.js'
 import { loadProfile, strategy, profilePath, profileFrom } from './probe.js'
 import { loadPrices, priceOf, limitsOf } from './usage.js'
 import { THEMES, PERMISSIONS } from './ui.js'
 import { loadSkills, frontMatter } from './skills.js'
-import { log, LOGS, REQUESTS, useRequestLog, listRequests, readRequest, pruneLogs, logDays } from './log.js'
+import { log, LOGS, REQUESTS, useRequestLog, listRequests, readRequest, pruneLogs, logDays, logSize, clearLogs } from './log.js'
 
 const PAGE = new URL('./settings.html', import.meta.url)
 const EFFORTS = ['default', 'low', 'medium', 'high']
@@ -156,6 +157,17 @@ export function startSettings({ cfg, apply = () => {}, port = 0 } = {}) {
   }
 
 
+  // A failed request in a few words: its status and what the server said (its JSON's message).
+  const whyFailed = (e) => {
+    let said = String(e.body ?? '').trim()
+    try {
+      const j = [JSON.parse(said)].flat()[0]
+      said = j?.error?.message ?? (typeof j?.error === 'string' ? j.error : null) ?? (typeof j?.detail === 'string' ? j.detail : null) ?? j?.message ?? j?.title ?? said
+    } catch {}
+    if (!said || /^\s*</.test(said)) said = e.message.replace(/^\d+ from \S+: /, '')
+    return clip(`${e.status ? `${e.status}: ` : ''}${said}`, 300)
+  }
+
   const state = () => ({
     providers: Object.entries(cfg.providers)
       .filter(([n]) => n !== cfg.adhoc)
@@ -177,6 +189,8 @@ export function startSettings({ cfg, apply = () => {}, port = 0 } = {}) {
 
   const routes = {
     'GET /api/state': () => state(),
+    'GET /api/log-size': () => logSize(),
+    'POST /api/clear-logs': () => ({ gone: clearLogs(), size: logSize() }),
     'POST /api/provider': ({ name, baseUrl, apiKey, keepKey, was }) => {
       name = safeName(name)
       if (!name) throw new Error('a name is needed')
@@ -296,6 +310,22 @@ export function startSettings({ cfg, apply = () => {}, port = 0 } = {}) {
     // models.dev again (one model, or all of yours): its list fetched anew, and each model's profile
     // takes what it says now (one it didn't know before becomes "from models.dev"; your own settings
     // for it stay above). A running HeartCode takes it at once.
+    // Test: one short message to the model, to see that it answers (key, access, name, the server
+    // itself). In the requests log as a model test. Never throws: { ok, ms, reply } or { ok: false, error }.
+    'POST /api/try': async ({ provider, model } = {}) => {
+      const c = clientFor({ provider, model: String(model ?? '') })
+      if (!c || !model) return { ok: false, error: `no provider "${provider}"` }
+      c.purpose = 'test'
+      const t0 = Date.now()
+      try {
+        const r = await c.chat({ messages: [{ role: 'user', content: 'Reply with just the word OK.' }], stream: true }, { signal: AbortSignal.timeout(90_000) })
+        const reply = (r.content || '').trim()
+        if (!reply && !r.toolCalls.length) return { ok: false, ms: Date.now() - t0, error: `it answered with nothing${r.usage?.completion_tokens ? ` (${r.usage.completion_tokens} tokens it said it wrote)` : ''}` }
+        return { ok: true, ms: Date.now() - t0, reply: reply.slice(0, 80) }
+      } catch (e) {
+        return { ok: false, ms: Date.now() - t0, status: e.status ?? null, error: e.name === 'TimeoutError' ? 'no answer within 90 seconds' : whyFailed(e) }
+      }
+    },
     'POST /api/models-dev': async ({ provider, model } = {}) => {
       await loadPrices({ force: true })
       const list = provider && model ? [{ provider, model: String(model) }] : state().order.map(({ provider, model }) => ({ provider, model }))

package/src/tools.js

@@ -4,6 +4,7 @@ import { slug } from './memory.js'
 import { fillArgs } from './skills.js'
 import { prompt } from './prompts.js'
 import path from 'node:path'
+import os from 'node:os'
 import { spawn, execFileSync } from 'node:child_process'
 import { applyEdit } from './edit.js'
 import { readJson } from './config.js'
@@ -19,10 +20,27 @@ const IGNORE = new Set(['.git', 'node_modules', 'dist', 'build', '.next', 'cover
 export const clip = (s, n) => (String(s).length > n ? String(s).slice(0, n) + '…' : String(s))
 export const tail = (s, n) => (s.length > n ? '…' + s.slice(-n) : s)
 
+// Tool output too long for the conversation is saved here (one folder per chat), where read_file
+// and search can read it although it's outside the project.
+export const OUTPUTS = path.join(os.tmpdir(), 'heartcode-outputs')
+export function saveOutput(chatId, name, text) {
+  try {
+    const dir = path.join(OUTPUTS, String(chatId ?? 'chat'))
+    fs.mkdirSync(dir, { recursive: true })
+    const file = path.join(dir, `${Date.now().toString(36)}-${String(name).replace(/[^\w-]/g, '_').slice(0, 60)}.txt`)
+    fs.writeFileSync(file, text)
+    return file
+  } catch (e) {
+    log('tool', `could not save the output: ${e.message}`)
+    return ''
+  }
+}
+
 export function resolveIn(root, p) {
   const clean = String(p ?? '').trim().replace(/^["'`]+|["'`]+$/g, '')
   if (!clean) throw new Error('no path given')
   let abs = path.resolve(root, clean)
+  if (abs.startsWith(OUTPUTS + path.sep)) return abs // a saved tool output
   // "num.js:" or "num.js," from a sloppy model: the file without the stray mark, if that one exists
   const trimmed = path.resolve(root, clean.replace(/[:;,.]+$/, ''))
   if (trimmed !== abs && !fs.existsSync(abs) && fs.existsSync(trimmed)) abs = trimmed
@@ -97,6 +115,22 @@ export function readFileTool(root, p, start, end, maxLines = 400) {
   return numberLines(lines.slice(s - 1, e), s) + more
 }
 
+// An image file: shown to a model that can see images (after the tool results, as MCP screenshots
+// are); for one that can't, where to send it.
+const IMAGE = /\.(png|jpe?g|gif|webp)$/i
+function readImage(s, p) {
+  const abs = resolveIn(s.root, p)
+  const rel = path.relative(s.root, abs) || p
+  if (!fs.existsSync(abs)) return readFileTool(s.root, p)
+  if (s.strat?.vision) {
+    const ext = path.extname(abs).slice(1).toLowerCase()
+    ;(s.pendingImages ??= []).push(`data:image/${ext === 'jpg' ? 'jpeg' : ext};base64,${fs.readFileSync(abs).toString('base64')}`)
+    return `${rel}: the image is attached in the next message`
+  }
+  const seer = s.team?.().find((t) => t.images)
+  return `${rel} is an image, and you can't see images.${seer ? ` Ask a model that can: the agent tool with model "${seer.provider} ${seer.model}", and the image's path in the prompt.` : ''}`
+}
+
 export function searchFiles(root, query, sub = '', limit = 50) {
   const ci = query === query.toLowerCase()
   let re
@@ -105,13 +139,15 @@ export function searchFiles(root, query, sub = '', limit = 50) {
   } catch {
     re = new RegExp(query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), ci ? 'i' : '')
   }
-  const prefix = sub ? path.relative(root, resolveIn(root, sub)) : ''
+  const abs = sub ? resolveIn(root, sub) : ''
+  const saved = abs.startsWith(OUTPUTS + path.sep) // a tool output saved outside the project
+  const prefix = sub && !saved ? path.relative(root, abs) : ''
   const hits = []
-  for (const f of listFiles(root)) {
+  for (const f of saved ? [abs] : listFiles(root)) {
     if (prefix && f !== prefix && !f.startsWith(prefix + '/')) continue
     let buf
     try {
-      buf = fs.readFileSync(path.join(root, f))
+      buf = fs.readFileSync(path.resolve(root, f))
     } catch {
       continue
     }
@@ -388,12 +424,51 @@ export function readOnlyCommand(cmd) {
   return c.split(/\s*(?:&&|\|\||;|\|)\s*/).every((part) => READ_ONLY.test(part))
 }
 
-// The one tool for all MCP servers, and the skill loader; each only when there's something to offer.
+// MCP servers' tools as the model sees them: each its own tool, mcp__server__tool (Claude Code's
+// names), with its description and arguments, the way the model would see them in Claude Code.
+// Servers whose tools aren't known yet (still starting, failed), or too many tools at once, go
+// through the one mcp tool instead. Sets s.mcpDirect (name → { server, tool, def }), s.mcpMeta
+// (servers behind the mcp tool) and s.mcpInstructions (what the servers say about using them).
+export const MAX_MCP_TOOLS = 100
+export async function loadMcpTools(s, signal) {
+  if (!s.mcp?.names.length) return Object.assign(s, { mcpDirect: new Map(), mcpMeta: [], mcpInstructions: '' })
+  const catalog = await s.mcp.catalog(signal)
+  // the servers with the fewest tools first, while they fit
+  const known = [...catalog].sort((a, b) => a[1].tools.length - b[1].tools.length)
+  const direct = new Map()
+  const notes = []
+  for (const [server, { tools, instructions }] of known) {
+    if (direct.size + tools.length > MAX_MCP_TOOLS) continue
+    for (const t of tools) direct.set(mcpName(server, t.name), { server, tool: t.name, def: t })
+    if (instructions) notes.push(`### ${server}\n${instructions}`)
+  }
+  const shown = new Set([...direct.values()].map((d) => d.server))
+  return Object.assign(s, { mcpDirect: direct, mcpMeta: s.mcp.names.filter((n) => !shown.has(n)), mcpInstructions: notes.join('\n\n'), mcpCatalog: catalog })
+}
+// Tool names may only have letters, digits, _ and - (64 at most).
+export const mcpName = (server, tool) => `mcp__${server}__${tool}`.replace(/[^\w-]/g, '_').slice(0, 64)
+// A schema as providers take it: an object, without the keys some refuse ($schema).
+function cleanSchema(x) {
+  if (Array.isArray(x)) return x.map(cleanSchema)
+  if (!x || typeof x !== 'object') return x
+  return Object.fromEntries(Object.entries(x).filter(([k]) => k !== '$schema').map(([k, v]) => [k, cleanSchema(v)]))
+}
+function mcpDefs(s) {
+  return [...(s.mcpDirect?.values() ?? [])].map(({ server, tool, def }) => {
+    const schema = cleanSchema(def.inputSchema ?? {})
+    return { name: mcpName(server, tool), description: clip(String(def.description ?? `${tool} (${server})`).trim(), 2000), parameters: { ...schema, type: 'object', properties: schema.properties ?? {} } }
+  })
+}
+
+// The MCP servers' tools, the one tool for the rest, and the skill loader; each only when there's
+// something to offer.
 export function extraTools(s) {
-  const out = []
-  if (s.mcp?.names.length) {
-    const servers = s.mcp.names.map((n) => `${n}: ${s.mcp.get(n).cfg.description || 'no description'}`).join('\n')
-    out.push({ name: 'mcp', description: prompt('agent/tool-mcp', { servers }), parameters: obj({ server: str, tool: str, arguments: { type: 'object' } }, ['server', 'tool']) })
+  const out = mcpDefs(s)
+  const meta = s.mcpMeta ?? s.mcp?.names ?? []
+  if (meta.length) {
+    // no description: the names of its tools, when known, say what it's for
+    const about = (n) => s.mcp.get(n).cfg.description || (s.mcpCatalog?.get(n) ? `tools: ${clip(s.mcpCatalog.get(n).tools.map((t) => t.name).join(', '), 300)}` : 'no description')
+    out.push({ name: 'mcp', description: prompt('agent/tool-mcp', { servers: meta.map((n) => `${n}: ${about(n)}`).join('\n') }), parameters: obj({ server: str, tool: str, arguments: { type: 'object' } }, ['server', 'tool']) })
   }
   if (s.memory) {
     out.push({
@@ -409,8 +484,12 @@ export function extraTools(s) {
   }
   // the patch format OpenAI's models are trained on (they also write it as a shell command, below)
   if (/gpt|codex|\bo\d/i.test(s.client?.model ?? '')) out.push({ name: 'apply_patch', description: prompt('agent/tool-apply_patch'), parameters: obj({ input: str }, ['input']) })
-  if (!s.isSub && s.subagent) out.push({ name: 'agent', description: prompt('agent/tool-agent'), parameters: obj({ description: str, prompt: str }, ['description', 'prompt']) })
-  return [...out, ...(s.director?.toolDefs(s) ?? [])] // manage (director.js)
+  if (!s.isSub && s.subagent) {
+    const team = s.team?.() ?? []
+    const model = { type: 'string', description: prompt('agent/tool-agent-model') }
+    out.push({ name: 'agent', description: prompt('agent/tool-agent'), parameters: obj({ description: str, prompt: str, ...(team.length && { model }) }, ['description', 'prompt']) })
+  }
+  return [...out, ...(s.director && !s.appendSystem ? s.director.toolDefs(s) : [])] // manage (director.js); not when a program gives the instructions (--append-system-prompt)
 }
 
 // todo: the model's checklist for this message, shown to the user each time it changes.
@@ -533,8 +612,17 @@ async function mcpTool(s, args, signal) {
     const t = tools.find((x) => x.name === a.name)
     return t ? `${t.name}: ${t.description ?? ''}\nArguments (JSON schema): ${JSON.stringify(t.inputSchema ?? {})}` : `error: ${server.name} has no tool "${a.name}"; tool "list" shows its tools`
   }
-  const ok = await s.ui.confirm(`Use ${server.name} → ${tool}?`, 'command')
-  if (ok !== true) return `The user declined this call.${typeof ok === 'string' ? ' User feedback: ' + ok : ''}`
+  return callMcp(s, server, tool, a, signal)
+}
+
+// One MCP tool call. Asked about like a command, unless the server marks the tool read-only.
+async function callMcp(s, server, tool, a, signal) {
+  if (!allowed(s, mcpName(server.name, tool))) return `error: the tool ${mcpName(server.name, tool)} is not allowed here`
+  const def = (server.tools ?? s.mcpCatalog?.get(server.name)?.tools)?.find((t) => t.name === tool)
+  if (!def?.annotations?.readOnlyHint) {
+    const ok = await s.ui.confirm(`Use ${server.name} → ${tool}?`, 'command')
+    if (ok !== true) return `The user declined this call.${typeof ok === 'string' ? ' User feedback: ' + ok : ''}`
+  }
   s.ui.spinner(`${server.name} · ${tool}`)
   const r = await server.call(tool, a, signal)
   const parts = r.content ?? []
@@ -714,8 +802,28 @@ function normalize(args) {
   return out
 }
 
+// The MCP tool a name means: mcp__server__tool (offered, or a server behind the mcp tool), or a
+// bare tool name only one server has ("click").
+function mcpTarget(s, name) {
+  const d = s.mcpDirect?.get(name)
+  if (d) return { server: s.mcp.get(d.server), tool: d.tool }
+  const m = /^mcp__(.+?)__(.+)$/.exec(name)
+  if (m && s.mcp?.get(m[1])) return { server: s.mcp.get(m[1]), tool: m[2] }
+  const same = [...(s.mcpDirect?.values() ?? [])].filter((x) => x.tool === name)
+  return same.length === 1 ? { server: s.mcp.get(same[0].server), tool: name } : null
+}
+
+// Tools the caller allowed (--allowedTools) or took away (--disallowedTools); all by default. An
+// MCP tool goes by its own name, its server's (mcp__server, as in Claude Code) or "mcp" (all of them).
+export function allowed(s, name) {
+  const names = name.startsWith('mcp__') ? [name, name.split('__').slice(0, 2).join('__'), 'mcp'] : [name]
+  if (names.some((n) => s.denyTools?.has(n))) return false
+  if (!s.allowTools) return true
+  return names.some((n) => s.allowTools.has(n)) || (name === 'mcp' && [...s.allowTools].some((n) => n.startsWith('mcp__')))
+}
+
 async function tool(name, args, s, signal) {
-  args = normalize(args)
+  if (!name.startsWith('mcp__') && !mcpTarget(s, name)) args = normalize(args) // an MCP tool's arguments are its own
   try {
     const { root } = s
     if (s.ui.permission === 'plan') {
@@ -723,7 +831,7 @@ async function tool(name, args, s, signal) {
     }
     switch (name) {
       case 'read_file':
-        return readFileTool(root, args.path, args.start_line, args.end_line)
+        return IMAGE.test(String(args.path ?? '')) ? readImage(s, args.path) : readFileTool(root, args.path, args.start_line, args.end_line)
       case 'list_files': {
         const files = listFiles(root).filter((f) => !args.filter || f.includes(args.filter))
         return files.slice(0, 500).join('\n') + (files.length > 500 ? `\n… ${files.length - 500} more` : '') || 'no files'
@@ -764,8 +872,11 @@ async function tool(name, args, s, signal) {
         const k = s.skills?.get(String(args.name ?? ''))
         return k && k.use !== 'me' ? fillArgs(k.body, '') : `error: no skill "${args.name}". Skills: ${[...(s.skills?.values() ?? [])].filter((x) => x.use !== 'me').map((x) => x.name).join(', ') || 'none'}`
       }
-      default:
+      default: {
+        const m = mcpTarget(s, name)
+        if (m) return await callMcp(s, m.server, m.tool, args, signal)
         return (await s.director?.tool(name, args, s, signal)) ?? `error: there is no tool named ${name}`
+      }
     }
   } catch (e) {
     if (e.name === 'AbortError') throw e