koneck 2.68.0 → 2.70.0

package/dist/web/ui-client.js

@@ -382,6 +382,25 @@ function onEvent(e) {
       const box = el('div', 'msg');
       box.appendChild(el('div', 'who', e.images ? 'you · ' + e.images + ' image(s)' : 'you'));
       box.appendChild(el('div', 'you', e.text));
+      /*
+       * What an @ actually attached, under the message.
+       *
+       * The sentence stays the sentence — nobody wants to scroll past eight hundred lines of their
+       * own attachment to find what they asked. But the attachment is a real spend and is stated,
+       * including the ones that failed, because a reference that quietly resolved to nothing is how
+       * you end up asking why the model ignored the file you gave it.
+       */
+      if (e.refs && e.refs.length) {
+        const row = el('div', 'urefs');
+        e.refs.forEach((r) => {
+          const bad = r.kind !== 'file' && r.kind !== 'dir';
+          row.appendChild(el('span', bad ? 'uref bad' : 'uref',
+            bad ? '@' + r.ref + ' — ' + (r.note || 'not attached')
+              : '@' + r.ref + (r.kind === 'dir' ? '/ · ' + r.lines + ' entries'
+                                                : ' · ' + r.lines + ' lines')));
+        });
+        box.appendChild(row);
+      }
       add(box);
       state.replyEl = null; state.thinkEl = null;
       setBusy(true, 'thinking');
@@ -2357,6 +2376,7 @@ async function newSession() {
 
 async function send(text) {
   const ta = $('ta');
+  closeMention();
   text = text || ta.value.trim();
   if (!text || state.busy) return;
   // A slash command is not a prompt. It opens the thing that does the same job.
@@ -2380,6 +2400,238 @@ async function send(text) {
   } catch (e) { add(el('div', 'err', e.message)); setBusy(false); }
 }
 
+/* ── referencing a file with @ ──────────────────────────────── */
+/*
+ * The picker, and why it ranks rather than lists.
+ *
+ * Every editor has @. What they mostly do with it is fuzzy-match filenames, which answers "which
+ * paths contain these letters" and not "which file did you mean" — and with four thousand paths in
+ * a project those are different questions. So the server ranks by what this project is actually
+ * doing: files git has touched, files this session has already handled, files the ledger holds
+ * findings about. The reason is shown in the row, because a ranking that will not say why it ranked
+ * something is one you cannot argue with.
+ *
+ * And every row carries what attaching it will cost. That is the part that matters most here: an @
+ * puts the file in the prompt, and a picker that hides the price of what it is about to spend is
+ * how somebody ends up wondering where their context window went.
+ */
+const mention = {
+  open: false,
+  items: [],
+  sel: 0,
+  /* Where the @ sits in the textarea, so the replacement knows what to replace. */
+  start: -1,
+  query: '',
+  /* Requests can land out of order over a slow link; only the newest answer may draw. */
+  seq: 0,
+  timer: null,
+};
+
+/*
+ * Where an @ reference being typed begins, or null.
+ *
+ * The same rule as the terminal's: an @ only opens a reference at a word boundary, so an email
+ * address or a decorator in pasted code does not trigger it, and a space closes it because the
+ * paths offered here never contain one.
+ */
+function activeRef(draft, caret) {
+  const upto = draft.slice(0, caret);
+  const at = upto.lastIndexOf('@');
+  if (at === -1) return null;
+  const before = at === 0 ? '' : upto[at - 1];
+  if (before !== '' && !/\s/.test(before)) return null;
+  const query = upto.slice(at + 1);
+  if (/\s/.test(query)) return null;
+  return { start: at, query: query };
+}
+
+function closeMention() {
+  if (mention.timer) { clearTimeout(mention.timer); mention.timer = null; }
+  mention.open = false;
+  mention.items = [];
+  mention.start = -1;
+  $('mention').hidden = true;
+}
+
+/*
+ * The rows.
+ *
+ * The filename is emboldened and the directory left plain, because the eye is looking for the name
+ * and the folder is only there to tell two of them apart. Built with el() and textContent — these
+ * are paths from disk, and a filename is as capable of holding a bracket as anything else is.
+ */
+function drawMention() {
+  const box = $('mention');
+  box.textContent = '';
+
+  const head = el('div', 'mhead');
+  head.appendChild(el('span', null, mention.query ? 'files matching ' + mention.query : 'what you are working on'));
+  head.appendChild(el('span', 'mgap'));
+  head.appendChild(el('span', 'mkeys', '↑↓ move · ⏎ or tab insert · esc close'));
+  box.appendChild(head);
+
+  if (mention.items.length === 0) {
+    box.appendChild(el('div', 'mnone', mention.query
+      ? 'Nothing in this project matches ' + mention.query + '.'
+      : 'Nothing recent to offer yet — type to search the project.'));
+    box.hidden = false;
+    return;
+  }
+
+  mention.items.forEach((item, i) => {
+    const row = el('div', 'mrow' + (i === mention.sel ? ' on' : ''));
+
+    /*
+     * The path, with the name picked out.
+     *
+     * direction:rtl in the stylesheet keeps the filename visible when a deep path has to be
+     * truncated — a left-truncated path is readable and a right-truncated one is not, since
+     * everything that distinguishes it is at the end.
+     */
+    const p = el('div', 'mp');
+    // One isolated LTR run, for the same reason the watch header needs one: the box is RTL so the
+    // front is what gets truncated, and an RTL box reorders the slashes at either edge.
+    const run = el('span', 'pathltr');
+    const cut = item.path.lastIndexOf('/');
+    if (cut > -1) run.appendChild(document.createTextNode(item.path.slice(0, cut + 1)));
+    run.appendChild(el('b', null, cut > -1 ? item.path.slice(cut + 1) : item.path));
+    p.appendChild(run);
+    row.appendChild(p);
+
+    if (item.because && item.because.length) {
+      const why = el('div', 'mwhy');
+      item.because.forEach((reason, n) => {
+        /*
+         * The wording comes from the server.
+         *
+         * A row is a row and not a sentence, so "used in this session" is shown as "in session" —
+         * but the shortening happens once, server-side, and the terminal's picker uses the same
+         * function. Two copies of the same phrasing is how two surfaces end up describing the same
+         * signal differently.
+         */
+        const cls = reason === 'used in this session' ? 's'
+          : reason === 'recently changed' ? 'g' : '';
+        why.appendChild(el('span', cls || null, (item.shorts && item.shorts[n]) || reason));
+      });
+      row.appendChild(why);
+    }
+
+    row.appendChild(item.kind === 'dir'
+      ? el('div', 'mdir', 'folder · listing')
+      : el('div', 'mcost', item.tokens === null ? '' : approxTokens(item.tokens)));
+
+    row.onmousedown = (ev) => { ev.preventDefault(); pickMention(i); };
+    box.appendChild(row);
+  });
+  box.hidden = false;
+
+  const chosen = box.children[mention.sel + 1];
+  if (chosen && chosen.scrollIntoView) chosen.scrollIntoView({ block: 'nearest' });
+}
+
+/* Approximate, and never dressed up as exact — the tilde is doing real work. */
+function approxTokens(n) {
+  if (n < 1000) return '~' + n + ' tok';
+  return '~' + (Math.round(n / 100) / 10) + 'k tok';
+}
+
+/*
+ * Asks the server for candidates.
+ *
+ * Debounced, and the answer is discarded unless it is the newest one asked for: typing four
+ * characters quickly fires four requests, and without the sequence check the second can draw over
+ * the fourth and leave the list one keystroke behind the box.
+ */
+function refreshMention(fresh) {
+  const mine = ++mention.seq;
+  const q = mention.query;
+  const url = '/api/mention?q=' + encodeURIComponent(q)
+    + (state.session ? '&session=' + encodeURIComponent(state.session) : '')
+    + (fresh ? '&fresh=1' : '');
+  api(url).then((out) => {
+    if (mine !== mention.seq || !mention.open) return;
+    mention.items = out.candidates || [];
+    if (mention.sel >= mention.items.length) mention.sel = 0;
+    drawMention();
+  }).catch(() => {
+    if (mine !== mention.seq || !mention.open) return;
+    mention.items = [];
+    drawMention();
+  });
+}
+
+/*
+ * Replaces the half-typed reference with the chosen path.
+ *
+ * A trailing space, because the reference is finished and the next thing typed is a sentence — and
+ * without it the picker reopens on the path it just inserted.
+ */
+function pickMention(i) {
+  const item = mention.items[i];
+  if (!item) return;
+  const ta = $('ta');
+  const value = ta.value;
+  const end = mention.start + 1 + mention.query.length;
+  const inserted = '@' + item.path + (item.kind === 'dir' ? '/' : '') + ' ';
+  ta.value = value.slice(0, mention.start) + inserted + value.slice(end);
+  const caret = mention.start + inserted.length;
+  closeMention();
+  ta.focus();
+  ta.setSelectionRange(caret, caret);
+  ta.dispatchEvent(new Event('input'));
+}
+
+/*
+ * Called on every keystroke in the composer.
+ *
+ * The listing and the project signals are refreshed when the reference opens rather than while it
+ * is being typed: opening is the moment a file created a second ago would be noticed missing, and
+ * every keystroke after it only needs the ranking.
+ */
+function syncMention() {
+  const ta = $('ta');
+  const ref = activeRef(ta.value, ta.selectionStart);
+  if (!ref) { if (mention.open) closeMention(); return; }
+  const opening = !mention.open || ref.start !== mention.start;
+  mention.open = true;
+  mention.start = ref.start;
+  mention.query = ref.query;
+  if (opening) { mention.sel = 0; mention.items = []; drawMention(); }
+  if (mention.timer) clearTimeout(mention.timer);
+  /* No wait at all when it opens: the first list should already be there. */
+  if (opening) { refreshMention(true); return; }
+  mention.timer = setTimeout(() => { mention.timer = null; refreshMention(false); }, 55);
+}
+
+/* True when the key was the picker's, so the composer must not also act on it. */
+function mentionKey(ev) {
+  if (!mention.open) return false;
+  if (ev.key === 'Escape') { closeMention(); return true; }
+  if (ev.key === 'ArrowDown' || (ev.key === 'n' && ev.ctrlKey)) {
+    if (mention.items.length) { mention.sel = (mention.sel + 1) % mention.items.length; drawMention(); }
+    return true;
+  }
+  if (ev.key === 'ArrowUp' || (ev.key === 'p' && ev.ctrlKey)) {
+    if (mention.items.length) {
+      mention.sel = (mention.sel - 1 + mention.items.length) % mention.items.length;
+      drawMention();
+    }
+    return true;
+  }
+  if (ev.key === 'Tab' || (ev.key === 'Enter' && !ev.shiftKey)) {
+    /*
+     * Enter inserts while the picker is open, and only then.
+     *
+     * A half-typed @src/eng followed by Enter is somebody choosing a file, not sending a message —
+     * but with no candidates there is nothing to choose, so it falls through and sends.
+     */
+    if (mention.items.length === 0) return false;
+    pickMention(mention.sel);
+    return true;
+  }
+  return false;
+}
+
 /* ── wiring ────────────────────────────────────────────────── */
 $('ta').addEventListener('input', (ev) => {
   const ta = ev.target;
@@ -2387,10 +2639,30 @@ $('ta').addEventListener('input', (ev) => {
   ta.style.height = Math.min(ta.scrollHeight, 200) + 'px';
   $('send').disabled = state.busy || !ta.value.trim();
   refreshComposerHints();
+  syncMention();
 });
 $('ta').addEventListener('focus', refreshComposerHints);
-$('ta').addEventListener('blur', refreshComposerHints);
+$('ta').addEventListener('blur', () => {
+  refreshComposerHints();
+  /*
+   * Closed on blur, but not before a click on a row has landed.
+   *
+   * The rows are wired to mousedown, which fires before blur, so this only ever closes a picker
+   * nobody was clicking in. Without the delay a click on a candidate closed the list under the
+   * pointer and inserted nothing.
+   */
+  setTimeout(() => { if (document.activeElement !== $('ta')) closeMention(); }, 120);
+});
+/* Clicking or arrowing to a different place in the text can leave a reference, or enter one. */
+$('ta').addEventListener('click', syncMention);
 $('ta').addEventListener('keydown', (ev) => {
+  // The picker gets first refusal on the keys it uses, so Enter chooses a file rather than sending
+  // a message that was still being addressed.
+  if (mentionKey(ev)) { ev.preventDefault(); return; }
+  if (ev.key === 'ArrowLeft' || ev.key === 'ArrowRight' || ev.key === 'Home' || ev.key === 'End') {
+    // After the caret has actually moved, not before.
+    setTimeout(syncMention, 0);
+  }
   if (ev.key === 'Enter' && !ev.shiftKey) { ev.preventDefault(); send(); }
 });
 $('send').onclick = () => send();
@@ -3848,7 +4120,16 @@ function stopWatchClock() {
 /** The header: the verb, the target, and how long this step has been going. */
 function watchHead(verb, target) {
   $('wtool').textContent = verb;
-  $('wpath').textContent = target;
+  /*
+   * The path in an isolated LTR run.
+   *
+   * Set as text directly, the box's own direction:rtl — which is what truncates the front rather
+   * than the end — moved the leading slash to the far side, so /home/kona/…/page.tsx was shown as
+   * home/kona/…/page.tsx/. The slash was never in the data.
+   */
+  const held = $('wpath');
+  held.textContent = '';
+  held.appendChild(el('span', 'pathltr', target));
   follow.startedAt = Date.now();
   if (!follow.timer) {
     follow.timer = setInterval(() => {
@@ -4068,29 +4349,165 @@ function prettyArgs(args) {
 }
 
 /*
- * The write in progress, repainted as its content arrives.
+ * The write in progress, coloured as it arrives.
  *
- * Plain while it streams and coloured the moment it lands: highlighting needs a round trip per
- * repaint, and four of those a second to colour text that is about to change again is a cost with
- * no reader. The finished render replaces it with the coloured version a fraction of a second
- * later, which is what the eye actually follows.
+ * This used to be deliberately plain, on the reasoning that colouring needs a round trip per
+ * repaint and four of those a second to colour text about to change again was a cost with no
+ * reader. Two thirds of that was wrong. There is a reader — the panel exists to be read while the
+ * work happens, and uncoloured code is the one thing there that looks unfinished. And the cost was
+ * never measured: tokenising a 610-line tsx file is 7.7ms, and the expensive part was never the
+ * highlighting at all, it was rebuilding every row on every repaint.
+ *
+ * So it paints incrementally, which a streaming write allows because it is append-only:
+ *
+ *   - the new lines are appended plain, immediately, so the text never waits for colour;
+ *   - the server is asked to colour only the lines that arrived, debounced;
+ *   - the returned colours are painted into the rows already on screen.
+ *
+ * When the content is not an extension of what was there — a replace, or the model starting over —
+ * the prefix check fails and it repaints from scratch, because guessing wrong about that shows
+ * somebody the wrong file.
  */
 function drawWriteInProgress(path, content) {
   const host = $('wbody');
   let head = host.querySelector('.wwrite');
-  if (!head) {
+  const fresh = !head || write.path !== path || !content.startsWith(write.text);
+  if (fresh) {
     host.innerHTML = '';
     head = el('div', 'wwrite');
     host.appendChild(head);
-    host.appendChild(el('div', 'wwbody'));
+    const body = el('div', 'wwbody');
+    /*
+     * An empty frame, built here rather than by drawCode.
+     *
+     * drawCode('') is not empty: an empty string splits into one line, so it produced a placeholder
+     * row and every index after it was off by one. That was worse than a cosmetic slip — painting
+     * replaces a row's text with the token text, so row N was being given line N+1's content and
+     * the panel showed text that was never written on that line. Found by comparing each rendered
+     * row against its gutter number: the first mismatch was at index 1.
+     */
+    const frame = el('div', 'rows');
+    frame.appendChild(el('div', 'gut'));
+    frame.appendChild(el('div', 'src'));
+    body.appendChild(frame);
+    host.appendChild(body);
+    write.path = path;
+    write.text = '';
+    write.done = 0;
+    write.asked = 0;
+    // Anything still in flight for the previous file belongs to a generation that no longer exists.
+    write.gen++;
+    if (write.timer) { clearTimeout(write.timer); write.timer = null; }
   }
+
   const lines = content.split('\n');
   head.textContent = 'writing ' + path + ' — ' + lines.length
     + (lines.length === 1 ? ' line so far' : ' lines so far');
-  const body = host.querySelector('.wwbody');
-  body.innerHTML = '';
-  body.appendChild(drawCode(content, [], null, null));
-  host.scrollTop = host.scrollHeight;
+
+  /*
+   * The last line is left off until something follows it.
+   *
+   * A streaming write's final line is half-typed by definition, so painting it and then repainting
+   * it on the next frame makes the bottom row flicker for the whole write. Holding it back one
+   * frame costs nothing — the next chunk is milliseconds away — and the bottom of the panel stops
+   * jittering.
+   */
+  const ready = lines.length - 1;
+  const rows = host.querySelector('.rows');
+  const gut = rows.querySelector('.gut');
+  const src = rows.querySelector('.src');
+
+  const wasAtEnd = host.scrollHeight - host.scrollTop - host.clientHeight < 60;
+  for (let i = write.done; i < ready; i++) {
+    gut.appendChild(el('div', null, String(i + 1)));
+    const row = el('div');
+    row.textContent = lines[i] === '' ? '​' : lines[i];
+    src.appendChild(row);
+  }
+  if (ready > write.done) write.done = ready;
+  write.text = content;
+  // Follows the tail, unless somebody has scrolled up to look at something.
+  if (wasAtEnd) host.scrollTop = host.scrollHeight;
+
+  askColour(path, content);
+}
+
+/**
+ * The state of the write being watched, so the next chunk knows what is already on screen.
+ *
+ * "done" is how many rows exist; "asked" is how many have been coloured or are being coloured, so a
+ * slow answer cannot cause the same lines to be requested twice.
+ */
+const write = { path: null, text: '', done: 0, asked: 0, timer: null, gen: 0 };
+
+/*
+ * Asks for the colours of the lines that have arrived since the last time.
+ *
+ * Debounced, because chunks arrive faster than anybody reads and a request per chunk would be a
+ * request per keystroke of the model's. Coalescing means one request covers everything that landed
+ * while the previous one was in flight, which is exactly the behaviour wanted: the colour lags the
+ * text by one round trip and never by more.
+ */
+function askColour(path, content) {
+  if (write.timer) return;
+  write.timer = setTimeout(() => {
+    write.timer = null;
+    if (write.path !== path || write.asked >= write.done) return;
+    const from = write.asked;
+    const upto = write.done;
+    /*
+     * Kept against the generation, not against a request counter.
+     *
+     * The first version dropped any answer that was not the newest request, on the reasoning that a
+     * stale answer must not paint. That is true of a *different file* and false of these: two
+     * requests in flight cover different rows, so discarding the older one left the rows it covered
+     * plain for ever while the newer ones coloured around them. Visible in a screenshot as line 28
+     * coloured, 29 plain, 30 onward coloured — which is what sent me looking.
+     *
+     * The generation changes only when the panel resets to another file or the content stops being
+     * an extension of itself, which is the only case where an in-flight answer is genuinely about
+     * something else.
+     */
+    const gen = write.gen;
+    write.asked = upto;
+    api('/api/highlight', { method: 'POST',
+      body: JSON.stringify({ path: path, text: write.text, from: from }) })
+      .then((out) => {
+        if (gen !== write.gen || write.path !== path || !out.tokens) return;
+        paintRows(from, upto, out.tokens);
+      })
+      .catch(() => {
+        // Colour is a bonus and the code is the point, so a failure leaves the plain rows alone —
+        // but the lines are released so a later attempt can still colour them.
+        if (gen === write.gen && write.asked === upto) write.asked = from;
+      });
+  }, 70);
+}
+
+/**
+ * Replaces the plain text of rows from..upto with their coloured spans.
+ *
+ * Each row is checked against the text the colours are for before it is touched. That guard is not
+ * defensive habit: painting replaces a row's content with the token text, so an index that is off by
+ * one does not merely mis-colour a line, it shows text that was never written on it. One off-by-one
+ * had already done exactly that. With the check, the worst a future one can do is leave a line
+ * uncoloured, which is a thing somebody can notice and nobody can be misled by.
+ */
+function paintRows(from, upto, tokens) {
+  const src = $('wbody').querySelector('.src');
+  if (!src) return;
+  for (let i = from; i < upto; i++) {
+    const row = src.children[i];
+    const forLine = tokens[i - from];
+    if (!row || !forLine || !forLine.length) continue;
+    const held = row.textContent;
+    let joined = '';
+    for (const t of forLine) joined += (t && t.text) || '';
+    // The zero-width space stands in for an empty line, so an empty row matches empty tokens.
+    if (joined !== held && !(held === '​' && joined === '')) continue;
+    row.textContent = '';
+    if (!paintTokens(row, forLine, null)) row.textContent = held;
+  }
 }
 
 /** Paints the content a write is carrying, coloured for the file it is going into. */

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2nJlB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4hKlB,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":"AA8CA,wBAAgB,GAAG,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CA4kC3C"}
+{"version":3,"file":"ui-css.d.ts","sourceRoot":"","sources":["../../src/web/ui-css.ts"],"names":[],"mappings":"AA8CA,wBAAgB,GAAG,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAkoC3C"}

package/dist/web/ui-css.js

@@ -406,6 +406,45 @@ footer{flex:0 0 auto;border-top:1px solid var(--line);background:var(--panel);pa
 .live .lel{color:var(--dim);font-variant-numeric:tabular-nums;font-size:11.5px}
 .live .lstop{border:1px solid var(--red);color:var(--red);border-radius:999px;padding:2px 10px;
   font-size:11.5px}
+/*
+ * The @ picker.
+ *
+ * A fixed height with its own scroll, because the alternative is a list that resizes the footer on
+ * every keystroke — and a composer that moves while you type in it is the thing that makes a picker
+ * feel unfinished. Anchored to the box's width so the paths line up with the text they will become.
+ */
+.mention{margin-bottom:9px;border:1px solid var(--line-2);border-radius:var(--radius);
+  background:var(--panel);max-height:min(46vh,340px);overflow-y:auto;overflow-x:hidden;
+  box-shadow:0 -6px 26px rgba(0,0,0,.22)}
+.mention[hidden]{display:none}
+.mhead{display:flex;align-items:center;gap:8px;padding:7px 11px;font-size:10.5px;
+  letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
+  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:1}
+.mhead .mgap{flex:1}
+.mhead .mkeys{text-transform:none;letter-spacing:0;font-size:11px}
+.mrow{display:flex;align-items:baseline;gap:9px;padding:6px 11px;cursor:pointer;
+  border-left:2px solid transparent}
+.mrow:hover{background:var(--panel-2)}
+.mrow.on{background:var(--panel-2);border-left-color:var(--cyan)}
+/* The name carries the weight; the directory it sits in is context, not the answer. */
+.mrow .mp{font-family:var(--mono);font-size:12.5px;color:var(--muted);flex:1;min-width:0;
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}
+.mrow .mp b{color:var(--ink);font-weight:600}
+.mrow .mwhy{display:flex;gap:5px;flex:0 0 auto}
+/* Why it is where it is, said in the row rather than in a tooltip nobody opens. */
+.mwhy span{font-size:9.5px;letter-spacing:.04em;padding:1px 6px;border-radius:999px;
+  border:1px solid var(--line-2);color:var(--dim);white-space:nowrap}
+.mwhy span.s{border-color:var(--cyan);color:var(--cyan)}
+.mwhy span.g{border-color:var(--amber);color:var(--amber)}
+/* Tabular so the costs form a column you can compare down, rather than a ragged edge. */
+.mrow .mcost{flex:0 0 auto;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
+.mrow .mdir{flex:0 0 auto;font-size:11px;color:var(--dim)}
+.mnone{padding:10px 11px;font-size:12.5px;color:var(--dim)}
+/* What an @ attached, under the message it was in. */
+.urefs{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
+.uref{font-family:var(--mono);font-size:10.5px;color:var(--dim);padding:1px 7px;
+  border:1px solid var(--line-2);border-radius:999px}
+.uref.bad{border-color:var(--red);color:var(--red)}
 .attached{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:9px}
 .attached[hidden]{display:none}
 .thumb{position:relative;width:60px;height:60px;border-radius:8px;overflow:hidden;
@@ -649,6 +688,21 @@ dialog:has(.dlg.wide){max-width:560px}
   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}
+/*
+ * A path truncated at the front, without bidi rearranging it.
+ *
+ * direction:rtl is what puts the ellipsis at the start, which is the only useful place for a path —
+ * everything that identifies it is at the end. But a slash is a bidi-neutral character, so in an
+ * RTL paragraph the leading one is reordered to the far side and /home/kona/…/page.tsx renders as
+ * home/kona/…/page.tsx/ — which is what somebody reported seeing, and it was not a stray character
+ * in the data.
+ *
+ * The fix is an isolated LTR run inside the RTL box: the truncation stays at the front and the text
+ * inside is laid out as the plain string it is. Checked in Chromium against the alternatives —
+ * unicode-bidi:plaintext fixes the order but moves the ellipsis to the end, which throws away the
+ * filename.
+ */
+.pathltr{direction:ltr;unicode-bidi:isolate}
 .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 .wms{flex:0 0 auto;font-size:10.5px;color:var(--dim);font-variant-numeric:tabular-nums;

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;;;;;;;;;;;;GAYG;AACH,MAAM,IAAI,GAAG;;;;;;;;;;;;;;;;;;CAkBZ,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,OAAe;IACjC,OAAO;;;;;;;;;;;;;;;;;gBAiBO,OAAO;;;oCAGa,IAAI;;2BAEb,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAojC9B,CAAC;AACF,CAAC"}
+{"version":3,"file":"ui-css.js","sourceRoot":"","sources":["../../src/web/ui-css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH;;;;;;;;;;;;GAYG;AACH,MAAM,IAAI,GAAG;;;;;;;;;;;;;;;;;;CAkBZ,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,OAAe;IACjC,OAAO;;;;;;;;;;;;;;;;;gBAiBO,OAAO;;;oCAGa,IAAI;;2BAEb,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0mC9B,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;AAOH,wBAAgB,IAAI,IAAI,MAAM,CA+d7B"}
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../src/web/ui.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAOH,wBAAgB,IAAI,IAAI,MAAM,CAwe7B"}

package/dist/web/ui.js

@@ -214,6 +214,14 @@ export function page() {
         <button class="lstop" id="livestop">stop</button>
       </div>
       <div id="attached" class="attached" hidden></div>
+      <!--
+        Referencing a file with @.
+        ==========================
+        Above the box rather than below it, so the list grows up into the transcript instead of
+        pushing the input off the bottom of the window — which is where a dropdown under a
+        bottom-anchored composer ends up on a short screen.
+      -->
+      <div id="mention" class="mention" hidden></div>
       <div class="cin">
         <button class="attach" id="attach" title="Attach an image">+</button>
         <textarea id="ta" rows="1" placeholder="Describe what you want to build&hellip;"></textarea>
@@ -246,6 +254,7 @@ export function page() {
         <span><kbd>Enter</kbd> send</span>
         <span><kbd>Shift</kbd>+<kbd>Enter</kbd> newline</span>
         <span><kbd>Ctrl</kbd>+<kbd>K</kbd> commands</span>
+        <span><kbd>@</kbd> reference a file or folder</span>
         <span><kbd>/</kbd> for commands, paste or drop an image</span>
       </div>
     </div>

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,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAmdF,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;EAC7C,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA4dF,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;EAC7C,YAAY,EAAE;;eAED,CAAC;AAChB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "koneck",
-  "version": "2.68.0",
+  "version": "2.70.0",
   "description": "Kinetically Orchestrated Neural Execution Engine for Code",
   "type": "module",
   "bin": {