koneck 2.31.0 → 2.32.0

package/dist/web/ui-client.js

@@ -62,9 +62,14 @@ const api = async (path, opts) => {
   });
   if (res.status === 401) { $('tokdlg').showModal(); throw new Error('token required'); }
   if (!res.ok) {
-    let msg = res.statusText;
-    try { msg = (await res.json()).error || msg; } catch (e) {}
-    throw new Error(msg);
+    let msg = res.statusText, body = null;
+    try { body = await res.json(); msg = body.error || msg; } catch (e) {}
+    const err = new Error(msg);
+    // The status and the body travel with the error: a refusal that can be confirmed and retried
+    // is not the same as one that cannot, and the caller is what knows the difference.
+    err.status = res.status;
+    err.body = body;
+    throw err;
   }
   return res.status === 204 ? null : res.json();
 };
@@ -274,6 +279,39 @@ function renderAsk(e) {
  */
 let tick = null;
 let startedAt = 0;
+/** What this turn has amounted to so far, which is what decides the wording. */
+const turn = { tools: 0, recovered: false, seed: 0, word: '' };
+
+/**
+ * Which family of words fits, by the same rule the terminal uses.
+ *
+ * Time alone cannot tell effort from latency, so a turn that ran no tools stays in the reply
+ * vocabulary however long it took: a cooking verb would be describing work that never happened.
+ */
+function tierFor(elapsedMs, tools, recovered) {
+  if (recovered) return 'recovery';
+  if (tools === 0) return 'reply';
+  if (elapsedMs < 3000) return 'quick';
+  if (elapsedMs > 10000) return 'heavy';
+  return 'normal';
+}
+
+/** The gerund to show while working, and the past tense to report when the turn lands. */
+function workWord(elapsedMs, tools, recovered, seed) {
+  const bucket = WORK_WORDS[tierFor(elapsedMs, tools, recovered)];
+  return bucket[Math.abs(seed) % bucket.length];
+}
+
+/**
+ * Whether the turn earned a verb at all.
+ *
+ * "Cooked lekker in 5.0s" for answering "hi" is a boast about nothing: no tool ran, and the only
+ * reason it took five seconds is that the provider is slow.
+ */
+function earnedAVerb(tools, recovered, chars) {
+  return recovered || tools > 0 || chars >= 240;
+}
+
 function setBusy(on, what) {
   state.busy = on;
   $('send').disabled = on || !$('ta').value.trim();
@@ -283,8 +321,20 @@ function setBusy(on, what) {
   if (on) {
     if (!tick) {
       startedAt = Date.now();
+      turn.tools = 0; turn.recovered = false; turn.word = '';
+      // One seed per turn, so the phrase is stable while the turn runs and different next time.
+      // Math.random is fine here: nothing depends on it being reproducible.
+      turn.seed = Math.floor(Math.random() * 100000);
       tick = setInterval(() => {
-        $('liveelapsed').textContent = ms(Date.now() - startedAt);
+        const elapsed = Date.now() - startedAt;
+        $('liveelapsed').textContent = ms(elapsed);
+        // The word escalates as the wait grows: what began as "Sharp-sharp" should not still be
+        // claiming that two minutes later.
+        const pair = workWord(elapsed, turn.tools, turn.recovered, turn.seed);
+        if (pair && pair[0] !== turn.word) {
+          turn.word = pair[0];
+          $('livewhat').textContent = pair[0];
+        }
       }, 250);
     }
   } else if (tick) {
@@ -349,8 +399,11 @@ function onEvent(e) {
       // shape:" as one paragraph.
       state.replyEl = null;
       state.thinkEl = null;
+      turn.tools += 1;
       $('livetool').textContent = e.name + (e.detail ? '  ' + e.detail : '');
       renderTool(e);
+      // Follow it: the path a tool names is the file to be looking at.
+      watchPath(pathFromTool(e), e.name, false);
       break;
     case 'tool-output':
       if (state.lastTool) {
@@ -358,11 +411,15 @@ function onEvent(e) {
           (state.lastTool.body.textContent + e.line + '\n').slice(-5000);
       }
       break;
-    case 'tool-done':
+    case 'tool-done': {
       finishTool(e);
       setBusy(true, 'thinking');
       $('livetool').textContent = '';
+      // Once it has finished writing, the diff is what there is to see.
+      const wrotePath = pathFromTool(e);
+      if (e.ok && toolWrites(e.name)) watchPath(wrotePath || follow.path, e.name, true);
       break;
+    }
     case 'plan': renderPlan(e.steps); break;
     case 'agents': renderAgents(e.agents); break;
     case 'tokens':
@@ -378,7 +435,16 @@ function onEvent(e) {
       // The server says a turn touched files, so the badge needs no polling to be right.
       $('tab-changes').innerHTML = 'Changes <span class="n">' + e.files + '</span>';
       break;
-    case 'turn-end':
+    case 'turn-end': {
+      // What it came to, in the tense that matches. The terminal has always reported this; the
+      // browser used to just stop showing a spinner, which reads as though nothing happened.
+      const took = Date.now() - startedAt;
+      const said = state.replyEl ? (state.replyEl.textContent || '').length : 0;
+      const pair = workWord(took, turn.tools, turn.recovered, turn.seed);
+      const verb = earnedAVerb(turn.tools, turn.recovered, said) && pair ? pair[1] : '';
+      const line = el('div', 'landed', (verb ? verb + ' · ' : '') + ms(took)
+        + (turn.tools ? ' · ' + turn.tools + (turn.tools === 1 ? ' tool' : ' tools') : ''));
+      if (startedAt) stream().appendChild(line);
       setBusy(false);
       state.replyEl = null; state.thinkEl = null;
       if (state.view === 'changes') loadChanges();
@@ -388,6 +454,7 @@ function onEvent(e) {
         if (mine) setPosture(mine);
       }).catch(() => {});
       break;
+    }
   }
 }
 
@@ -1745,10 +1812,136 @@ $('pmode').onclick = async () => {
   }
   $('modedlg').showModal();
 };
+/* ── following the file being worked on ───────────────────────────────────────────────────── */
+
+/**
+ * The panel beside the conversation, showing whatever the agent is touching.
+ *
+ * On by default, because the interesting part of watching an agent work is watching files change,
+ * and a view you have to go and click is one you find out about after the fact. Remembered per
+ * browser: a preference about a layout belongs to whoever is looking at it.
+ */
+const follow = {
+  on: (() => { try { return localStorage.getItem('koneck.follow') !== 'off'; } catch (e) { return true; } })(),
+  path: null,
+  /** Set while a fetch is in flight, so a burst of tool calls does not queue a burst of requests. */
+  busy: false,
+  /** The path a newer tool named while a fetch was running. */
+  pending: null,
+};
+
+/** The file a tool is acting on, from its arguments. Null when it is not about a file. */
+function pathFromTool(e) {
+  let args = e.args;
+  if (!args && e.detail) args = null;
+  if (args) {
+    try {
+      const parsed = JSON.parse(args);
+      for (const key of ['path', 'file', 'filename', 'file_path']) {
+        if (typeof parsed[key] === 'string' && parsed[key].trim()) return parsed[key].trim();
+      }
+      if (Array.isArray(parsed.paths) && typeof parsed.paths[0] === 'string') return parsed.paths[0];
+    } catch (err) { /* not JSON: fall through to the one-line detail */ }
+  }
+  // The detail line is often just the path, which is enough to follow by.
+  if (e.detail && /[./]/.test(e.detail) && !/\s/.test(e.detail.trim())) return e.detail.trim();
+  return null;
+}
+
+/** Whether a tool changes a file, which decides whether the panel shows content or a diff. */
+function toolWrites(name) {
+  return /write|edit|patch|replace|apply|create|delete|move|rename|format/i.test(name || '');
+}
+
+function setFollow(on) {
+  follow.on = on;
+  try { localStorage.setItem('koneck.follow', on ? 'on' : 'off'); } catch (e) {}
+  $('pfollow').innerHTML = 'follow <b>' + (on ? 'on' : 'off') + '</b>';
+  $('watch').hidden = !on || !follow.path;
+  if (on && follow.path) void showWatched(follow.path, null);
+}
+
+/** Points the panel at a path. Cheap to call repeatedly; only the newest target is fetched. */
+function watchPath(path, toolName, wrote) {
+  if (!follow.on || !path) return;
+  follow.path = path;
+  $('watch').hidden = false;
+  $('wpath').textContent = path;
+  $('wtool').textContent = toolName || 'watching';
+  if (follow.busy) { follow.pending = [path, wrote]; return; }
+  void showWatched(path, wrote);
+}
+
+/**
+ * Draws the panel.
+ *
+ * A file that was only read is shown as itself. A file that was just written is shown as its diff,
+ * because what changed is the thing worth seeing and reading the whole file to find three new
+ * lines is work the panel should be doing.
+ */
+async function showWatched(path, wrote) {
+  follow.busy = true;
+  const host = $('wbody');
+  try {
+    if (wrote && state.session) {
+      let ch = null;
+      try {
+        const out = await api('/api/changes?session=' + encodeURIComponent(state.session));
+        ch = (out.changes || []).find((c) => c.path === path || path.endsWith(c.path));
+      } catch (e) { /* fall through to showing the file */ }
+      if (ch && ch.diff) {
+        host.innerHTML = '';
+        const head = el('div', 'wempty');
+        head.style.padding = '8px 12px';
+        head.textContent = '+' + ch.added + '  \u2212' + ch.removed + '  ' + ch.kind;
+        host.appendChild(head);
+        host.appendChild(renderDiff(ch.diff));
+        return;
+      }
+    }
+    let data;
+    try { data = await api('/api/file?path=' + encodeURIComponent(path)); }
+    catch (e) {
+      host.innerHTML = '';
+      host.appendChild(el('div', 'wempty', e.message));
+      return;
+    }
+    host.innerHTML = '';
+    if (data.binary || data.text === null) {
+      host.appendChild(el('div', 'wempty', 'Binary file — nothing to show as text.'));
+      return;
+    }
+    const code = el('div', 'code');
+    const lines = data.text.split('\n');
+    code.appendChild(el('div', 'gut', lines.map((_, i) => i + 1).join('\n')));
+    code.appendChild(el('div', 'src', data.text));
+    host.appendChild(code);
+  } finally {
+    follow.busy = false;
+    // A newer target arrived while this was in flight: honour the last one and drop the rest,
+    // which is what keeps a run of twenty edits to twenty files at one request rather than twenty.
+    if (follow.pending) {
+      const next = follow.pending;
+      follow.pending = null;
+      if (next[0] !== path || next[1]) void showWatched(next[0], next[1]);
+    }
+  }
+}
+
+$('pfollow').onclick = () => setFollow(!follow.on);
+$('wclose').onclick = () => setFollow(false);
+
 /* ── choosing a model ────────────────────────────────────────────────────────────────────── */
 
-/** The provider's own listing, kept so filtering does not re-ask on every keystroke. */
-const catalog = { provider: null, entries: [], listed: false, note: '' };
+/**
+ * The provider's own listing, kept so filtering does not re-ask on every keystroke.
+ *
+ * The chosen entry is the model that will be switched to, and it is deliberately NOT the search
+ * box. They were the same field at first, so opening the dialog pre-filled the box with the model
+ * already in use — and since the box also filtered, 476 models were immediately narrowed to the
+ * one you were on. It looked exactly like a text field with no choice in it, because it was.
+ */
+const catalog = { provider: null, entries: [], listed: false, note: '', chosen: '' };
 
 /** Fills the provider dropdown from whatever the registry holds, declared entries included. */
 async function fillProviders(selected) {
@@ -1770,46 +1963,61 @@ async function fillProviders(selected) {
   return info;
 }
 
-/** Draws the listing, narrowed to what has been typed. */
+/** What Switch will use: whatever row is picked, or a name typed in full when nothing is. */
+function chosenModel() {
+  const typed = $('mmodel').value.trim();
+  // A provider that publishes no list leaves the box as the only way in, so there the box IS the
+  // answer. Otherwise a picked row wins, and typing only narrows the list.
+  if (!catalog.listed) return typed;
+  if (catalog.chosen) return catalog.chosen;
+  return typed;
+}
+
+/** Draws the listing, narrowed by the search box. */
 function drawModels() {
   const host = $('mlist');
   const typed = $('mmodel').value.trim().toLowerCase();
   host.innerHTML = '';
+  if (!catalog.listed) { $('mnote').textContent = catalog.note || ''; return; }
+
   const shown = catalog.entries.filter((m) => !typed || m.id.toLowerCase().includes(typed));
+  const total = catalog.entries.length;
 
-  if (!catalog.listed) { $('mnote').textContent = catalog.note || ''; return; }
   if (shown.length === 0) {
-    $('mnote').textContent = 'Nothing in the list matches. It will be used as typed.';
+    // Not a dead end: a gateway may serve something it does not advertise, so an unmatched name
+    // stays usable — but it has to be said out loud rather than silently accepted.
+    $('mnote').textContent = 'Nothing in ' + total + ' matches. Switch will use it as typed.';
+    catalog.chosen = '';
     return;
   }
-  $('mnote').textContent = shown.length === catalog.entries.length
-    ? catalog.entries.length + ' models'
-    : shown.length + ' of ' + catalog.entries.length + ' models';
+  $('mnote').textContent = (shown.length === total ? total + ' models' : shown.length + ' of ' + total)
+    + (catalog.chosen ? ' · using ' + catalog.chosen : ' · click one to choose');
 
-  // Grouped by vendor, which is what turns a flat several-hundred-entry list into something
-  // you can actually read.
-  let group = null;
+  // Grouped by vendor, which is what turns a flat several-hundred-entry list into something you
+  // can actually read.
+  let group = null, first = null;
   for (const m of shown.slice(0, 400)) {
     if (m.vendor !== group) {
       group = m.vendor;
       host.appendChild(el('div', 'mgroup', group));
     }
-    const row = el('div', 'mrow' + (m.id === $('mmodel').value.trim() ? ' on' : ''));
+    const on = m.id === catalog.chosen;
+    const row = el('div', 'mrow' + (on ? ' on' : ''));
     row.appendChild(el('div', 'mid', m.id));
     row.appendChild(el('div', 'mdet', m.detail));
-    row.onclick = () => {
-      $('mmodel').value = m.id;
-      drawModels();
-    };
+    row.onclick = () => { catalog.chosen = m.id; drawModels(); };
     host.appendChild(row);
+    if (on && !first) first = row;
   }
   if (shown.length > 400) {
     host.appendChild(el('div', 'mgroup', 'and ' + (shown.length - 400) + ' more — keep typing'));
   }
+  // The model in use should be in view when the dialog opens, not hundreds of rows down.
+  if (first) first.scrollIntoView({ block: 'center' });
 }
 
 /** Asks the selected provider what it serves. */
-async function loadModels(provider) {
+async function loadModels(provider, preselect) {
   if (catalog.provider === provider) { drawModels(); return; }
   $('mlist').innerHTML = '';
   $('mnote').textContent = 'Asking ' + provider + ' what it serves…';
@@ -1818,6 +2026,9 @@ async function loadModels(provider) {
   catch (e) {
     catalog.provider = provider; catalog.entries = []; catalog.listed = false;
     catalog.note = e.message;
+    catalog.chosen = '';
+    // With no list, the box is the only way to name a model, so it gets the current one to edit.
+    if (preselect) $('mmodel').value = preselect;
     drawModels();
     return;
   }
@@ -1825,24 +2036,28 @@ async function loadModels(provider) {
   catalog.entries = out.entries || [];
   catalog.listed = !!out.listed;
   catalog.note = out.note || '';
+  // Preselect only if the provider actually serves it: carrying a name across providers is how a
+  // session ends up asking Anthropic for qwen3-coder.
+  catalog.chosen = preselect && catalog.entries.some((m) => m.id === preselect) ? preselect : '';
+  if (!catalog.listed && preselect) $('mmodel').value = preselect;
   drawModels();
 }
 
 $('pmodel').onclick = async () => {
   const info = await fillProviders(state.provider);
   if (!info) return;
-  $('mmodel').value = state.model === '-' ? '' : state.model;
+  // Empty, because this box searches. Pre-filling it with the model already in use filtered the
+  // list down to that one model and made the whole listing look like it was not there.
+  $('mmodel').value = '';
   catalog.provider = null;                     // re-ask: a key may have been set since last time
   $('mdlg').showModal();
-  void loadModels($('mprov').value);
+  void loadModels($('mprov').value, state.model === '-' ? '' : state.model);
 };
 $('mprov').onchange = () => {
-  // A different provider serves different models, and its default is a better starting point than
-  // the name of a model the previous one happened to serve.
-  const chosen = $('mprov').selectedOptions[0];
+  // A different provider serves different models, so nothing carries over.
   $('mmodel').value = '';
-  void loadModels($('mprov').value);
-  if (chosen) $('mmodel').placeholder = 'filter, or type a model name';
+  catalog.chosen = '';
+  void loadModels($('mprov').value, '');
 };
 $('mmodel').oninput = () => drawModels();
 
@@ -1850,7 +2065,8 @@ $('addprov').onclick = () => {
   $('pverr').hidden = true;
   $('provdlg').showModal();
 };
-$('pvsave').onclick = async (ev) => {
+/** Submits the form, once plainly and once with consent if a built-in is in the way. */
+async function saveProvider(replace) {
   const body = {
     name: $('pvname').value.trim(),
     label: $('pvname').value.trim(),
@@ -1858,25 +2074,52 @@ $('pvsave').onclick = async (ev) => {
     defaultModel: $('pvmodel').value.trim(),
     apiKeyEnv: $('pvkey').value.trim(),
   };
+  if (replace) body.replace = true;
+  return api('/api/providers', { method: 'POST', body: JSON.stringify(body) });
+}
+
+$('pvsave').onclick = async (ev) => {
   let out;
-  try { out = await api('/api/providers', { method: 'POST', body: JSON.stringify(body) }); }
+  try { out = await saveProvider(false); }
   catch (e) {
     // Kept open on failure: the message says what to change, and closing would lose the typing.
     ev.preventDefault();
     $('pverr').textContent = e.message;
     $('pverr').hidden = false;
+    // A name KONECK ships with is not a mistake to correct, it is a decision to confirm — putting a
+    // company proxy in front of a vendor is exactly this. So the refusal comes with the way through
+    // rather than being a dead end.
+    if (e.status === 409 && e.body && e.body.confirmWith === 'replace') {
+      const go = el('button', 'go', 'Repoint ' + e.body.shadowsBuiltIn + ' anyway');
+      go.type = 'button';
+      go.style.marginTop = '8px';
+      go.onclick = async () => {
+        let done;
+        try { done = await saveProvider(true); }
+        catch (e2) { $('pverr').textContent = e2.message; return; }
+        $('provdlg').close();
+        await afterProviderSaved(done);
+      };
+      $('pverr').appendChild(document.createElement('br'));
+      $('pverr').appendChild(go);
+    }
     return;
   }
+  await afterProviderSaved(out);
+};
+
+/** Clears the form and moves the model dialog onto whatever was just declared. */
+async function afterProviderSaved(out) {
   $('provdlg').close();
   for (const id of ['pvname', 'pvurl', 'pvmodel', 'pvkey']) $(id).value = '';
   await fillProviders(out.name);
   $('mmodel').value = out.defaultModel === 'default' ? '' : out.defaultModel;
   catalog.provider = null;
   void loadModels(out.name);
-};
+}
 
 $('msave').onclick = async () => {
-  const provider = $('mprov').value, model = $('mmodel').value.trim();
+  const provider = $('mprov').value, model = chosenModel();
   if (!state.session) await newSession();
   let info;
   try {
@@ -1890,6 +2133,9 @@ for (const b of document.querySelectorAll('.hero .ex button')) {
   b.onclick = () => send(b.textContent);
 }
 
+// The pill has to say what the remembered setting actually is before anything is asked.
+setFollow(follow.on);
+
 (async function start() {
   let hello;
   try { hello = await fetch('/api/hello').then((r) => r.json()); } catch (e) {}

package/dist/web/ui-client.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui-client.js","sourceRoot":"","sources":["../../src/web/ui-client.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,YAAY;IAC1B,OAAO,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAs2DlB,CAAC;AACF,CAAC"}
+{"version":3,"file":"ui-client.js","sourceRoot":"","sources":["../../src/web/ui-client.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,YAAY;IAC1B,OAAO,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4lElB,CAAC;AACF,CAAC"}

package/dist/web/ui-css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui-css.d.ts","sourceRoot":"","sources":["../../src/web/ui-css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,wBAAgB,GAAG,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAqgB3C"}
+{"version":3,"file":"ui-css.d.ts","sourceRoot":"","sources":["../../src/web/ui-css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,wBAAgB,GAAG,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAkiB3C"}

package/dist/web/ui-css.js

@@ -518,6 +518,35 @@ dialog:has(.dlg.wide){max-width:560px}
 .mrow .mid{font-family:var(--mono);font-size:12.5px;flex:1;min-width:0;overflow-wrap:anywhere}
 .mrow .mdet{font-size:11px;color:var(--dim);white-space:nowrap;flex:0 0 auto}
 .mrow.on .mid{color:var(--cyan)}
+/*
+ * The file being worked on, beside the conversation.
+ *
+ * Watching an agent work means watching files change, and a tab you have to click is a tab you
+ * find out about afterwards. This follows the tool calls: the path a tool names becomes the panel,
+ * and once the file has actually been written it becomes that file's diff.
+ */
+.chatsplit{flex:1;display:flex;min-height:0;min-width:0}
+.chatsplit .wrap{flex:1 1 auto;min-width:0}
+.watch{flex:0 0 44%;max-width:720px;min-width:0;border-left:1px solid var(--line);
+  display:flex;flex-direction:column;background:var(--panel-2)}
+.whead{display:flex;gap:9px;align-items:center;padding:9px 12px;background:var(--panel);
+  border-bottom:1px solid var(--line);font-size:11.5px;flex:0 0 auto}
+.whead .wt{color:var(--cyan);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
+  flex:0 0 auto}
+.whead .wp{font-family:var(--mono);font-size:12px;flex:1;min-width:0;overflow:hidden;
+  text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}
+.whead .wx{flex:0 0 auto;background:none;border:0;color:var(--dim);font-size:15px;cursor:pointer;
+  line-height:1;padding:0 2px}
+.whead .wx:hover{color:var(--red)}
+.wbody{flex:1;overflow:auto;min-height:0}
+.wbody .code{min-height:100%}
+.wbody .diff{border-top:0}
+.wempty{padding:22px 14px;color:var(--dim);font-size:12.5px;line-height:1.6}
+@media (max-width:1100px){ .watch{display:none} }
+
+/* What the turn came to, in the tense that matches — the line the terminal has always printed. */
+.landed{font-size:11.5px;color:var(--dim);font-family:var(--mono);margin:2px 0 14px;
+  letter-spacing:.02em}
 .dlg .row{display:flex;gap:8px;justify-content:flex-end}
 .dlg .row button{padding:7px 15px;border-radius:8px;border:1px solid var(--line)}
 .dlg .go{border-color:var(--cyan);color:var(--cyan)}

package/dist/web/ui-css.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui-css.js","sourceRoot":"","sources":["../../src/web/ui-css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,GAAG,CAAC,OAAe;IACjC,OAAO;;;;;;;;;;gBAUO,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyftB,CAAC;AACF,CAAC"}
+{"version":3,"file":"ui-css.js","sourceRoot":"","sources":["../../src/web/ui-css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,GAAG,CAAC,OAAe;IACjC,OAAO;;;;;;;;;;gBAUO,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAshBtB,CAAC;AACF,CAAC"}

package/dist/web/ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../src/web/ui.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAMH,wBAAgB,IAAI,IAAI,MAAM,CA0N7B"}
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../src/web/ui.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAOH,wBAAgB,IAAI,IAAI,MAAM,CA2O7B"}

package/dist/web/ui.js

@@ -8,6 +8,7 @@
  * model, which is one that is offline.
  */
 import { MARK_MASK } from './mark.js';
+import { WORK_WORDS } from '../work-words.js';
 import { css } from './ui-css.js';
 import { clientScript } from './ui-client.js';
 export function page() {
@@ -51,6 +52,7 @@ export function page() {
       <button class="tab" id="tab-settings">Settings</button>
     </div>
     <div class="spacer"></div>
+    <button class="pill" id="pfollow" title="Show the file being worked on beside the conversation">follow <b>on</b></button>
     <button class="pill" id="pgoal" title="A standing objective, put in front of every message">goal <b>none</b></button>
     <button class="pill" id="peffort" title="How hard to think">effort <b>medium</b></button>
     <button class="pill" id="pmode" title="What KONECK may do without asking">mode <b>auto</b></button>
@@ -62,6 +64,7 @@ export function page() {
   </header>
 
   <div class="view" id="chatview">
+   <div class="chatsplit">
     <div class="wrap" id="stream">
       <div class="hero">
         <div class="mark"></div>
@@ -74,6 +77,17 @@ export function page() {
         </div>
       </div>
     </div>
+    <!-- The file being worked on, beside the conversation rather than behind a tab. A tool call
+         names a path; this shows it, and shows the diff once the file has actually been written. -->
+    <aside class="watch" id="watch" hidden>
+      <div class="whead">
+        <span class="wt" id="wtool">watching</span>
+        <span class="wp" id="wpath">&mdash;</span>
+        <button class="wx" id="wclose" title="Stop following (also the follow pill)">&times;</button>
+      </div>
+      <div class="wbody" id="wbody"></div>
+    </aside>
+   </div>
   </div>
 
   <div class="view" id="changesview" hidden></div>
@@ -199,7 +213,7 @@ export function page() {
   <!-- Typing stays possible on purpose: a gateway may not publish a list at all, and a virtual
        model such as OmniRoute's auto/best-coding is a routing instruction that appears in no
        catalogue. The list below narrows as you type. -->
-  <input id="mmodel" placeholder="filter, or type a model name" autocomplete="off" spellcheck="false">
+  <input id="mmodel" placeholder="search the list, or type a name to use" autocomplete="off" spellcheck="false">
   <div class="mnote" id="mnote">Asking the provider what it serves&hellip;</div>
   <div class="mlist" id="mlist"></div>
   <div class="row"><button>Cancel</button><button class="go" id="msave">Switch</button></div>
@@ -225,6 +239,10 @@ export function page() {
 </form></dialog>
 
 <script>
+/* The same vocabulary the terminal narrates with, embedded rather than fetched so the page still
+   has it on a machine with no network — which is the machine most likely to be running a local
+   model. Generated from src/work-words.ts, so there is one list, not two. */
+const WORK_WORDS = ${JSON.stringify(WORK_WORDS)};
 ${clientScript()}
 </script>
 </body></html>`;

package/dist/web/ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui.js","sourceRoot":"","sources":["../../src/web/ui.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,UAAU,IAAI;IAClB,OAAO;;;;;;;SAOA,GAAG,CAAC,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+MrB,YAAY,EAAE;;eAED,CAAC;AAChB,CAAC"}
+{"version":3,"file":"ui.js","sourceRoot":"","sources":["../../src/web/ui.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,UAAU,IAAI;IAClB,OAAO;;;;;;;SAOA,GAAG,CAAC,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA+NF,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;EAC7C,YAAY,EAAE;;eAED,CAAC;AAChB,CAAC"}

package/dist/work-words.d.ts

@@ -0,0 +1,57 @@
+/**
+ * The words, in one place.
+ *
+ * These lived in the Ink component, so the browser had no way to reach them and showed a bare
+ * "working" instead — the same turn narrated with personality in one window and flatly in the
+ * other. Nothing here is terminal-specific: it is vocabulary and a rule for choosing from it.
+ */
+/**
+ * What KONECK says it is doing, and what it says it did.
+ *
+ * Grouped by how much work the turn turned out to be, so the wording matches the wait: a
+ * sub-three-second answer gets something snappy, a two-minute one gets something that sounds
+ * like effort, and a turn that had to recover from a failed tool gets a clutch verb. The word
+ * shown while working escalates through the tiers as time passes, and the finished row reports
+ * the tense that matches the real elapsed time.
+ *
+ * Apostrophes are ASCII on purpose: U+2019 is East Asian Ambiguous, the same class of character
+ * that used to tear the panel borders.
+ */
+export type WorkTier = 'reply' | 'quick' | 'normal' | 'heavy' | 'recovery';
+export declare const WORK_WORDS: Record<WorkTier, Array<readonly [string, string]>>;
+/** Which vocabulary the wait deserves. */
+/** What a turn actually amounted to, which is what the wording should follow. */
+export interface TurnEffort {
+    elapsedMs: number;
+    /** Tools the turn ran. Zero means it only thought and answered. */
+    tools: number;
+    /** Output tokens produced. */
+    tokens: number;
+    /** A tool failed and the turn recovered from it. */
+    recovered: boolean;
+}
+/**
+ * Whether the turn earned a verb at all.
+ *
+ * "Cooked lekker in 5.0s" for answering "hi" is a boast about nothing: no tool ran, ten tokens
+ * came back, and the only reason it took five seconds is that the provider is slow. Elapsed time
+ * alone cannot tell effort from latency, so a turn that ran no tools and said almost nothing gets
+ * its timing reported plainly and no verb.
+ */
+export declare function shouldName(effort: TurnEffort): boolean;
+/**
+ * Which family of words fits.
+ *
+ * Time still decides between quick, normal and heavy, but only once the turn has done something.
+ * A turn with no tools belongs to `reply` however long it took, because nothing was built and a
+ * cooking verb would be describing work that never happened.
+ */
+export declare function tierFor(effort: TurnEffort): WorkTier;
+/**
+ * The gerund to show while working, and the past tense to report when the turn lands.
+ *
+ * The past tense is empty when the turn did not earn one, which the caller renders as timing
+ * alone.
+ */
+export declare function workWord(effort: TurnEffort, seed: number): readonly [string, string];
+//# sourceMappingURL=work-words.d.ts.map