koneck 2.38.0 → 2.38.1

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

@@ -1 +1 @@
-{"version":3,"file":"ui-client.d.ts","sourceRoot":"","sources":["../../src/web/ui-client.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,IAAI,MAAM,CA0yFrC"}
+{"version":3,"file":"ui-client.d.ts","sourceRoot":"","sources":["../../src/web/ui-client.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,IAAI,MAAM,CA29FrC"}

package/dist/web/ui-client.js

@@ -724,6 +724,117 @@ function renderTreeInto(host, entries, depth) {
   if (!entries.length) host.appendChild(el('div', 'shead', 'empty'));
 }
 
+/* ── colouring code ──────────────────────────────────────────────────────────────────────── */
+
+/**
+ * Syntax colouring, as one pass over the text.
+ *
+ * Not a parser. A parser for a dozen languages is a project, and what makes code readable is
+ * separating the four things the eye needs first: what is prose (comments), what is data (strings
+ * and numbers), what is structure (keywords), and what is a name being used. A tokeniser that gets
+ * those right at a glance beats a parser that gets everything right next week.
+ *
+ * One regular expression, its alternatives ordered so the greedy ones win: a keyword inside a
+ * string is part of the string, and a string inside a comment is part of the comment. Getting that
+ * order wrong is how one apostrophe in a comment colours the next forty lines as text.
+ */
+const KEYWORDS = {
+  js: 'abstract as async await break case catch class const continue debugger declare default delete do else enum export extends finally for from function get if implements import in infer instanceof interface is keyof let new of package private protected public readonly return satisfies set static super switch symbol this throw try type typeof var void while with yield',
+  py: 'and as assert async await break class continue def del elif else except finally for from global if import in is lambda nonlocal not or pass raise return try while with yield match case',
+  go: 'break case chan const continue default defer else fallthrough for func go goto if import interface map package range return select struct switch type var',
+  rs: 'as async await break const continue crate dyn else enum extern fn for if impl in let loop match mod move mut pub ref return self static struct super trait type unsafe use where while',
+  sh: 'if then else elif fi for while do done case esac function return local export source alias unset trap exit',
+  css: 'important media supports keyframes import charset font-face root',
+  sql: 'select from where insert into values update set delete create table alter drop join left right inner outer on group by order having limit offset union as and or not null primary key foreign references index view',
+};
+const LITERALS = 'true false null undefined None True False nil NaN Infinity self this super void';
+
+/** Which vocabulary a file is written in. */
+function langOf(name) {
+  const ext = (String(name).match(/\.([a-z0-9]+)$/i) || [, ''])[1].toLowerCase();
+  if (/^(ts|tsx|js|jsx|mjs|cjs|mts|cts|json|jsonc)$/.test(ext)) return 'js';
+  if (/^(py|pyi)$/.test(ext)) return 'py';
+  if (ext === 'go') return 'go';
+  if (ext === 'rs') return 'rs';
+  if (/^(sh|bash|zsh|env)$/.test(ext)) return 'sh';
+  if (/^(dockerfile|makefile)/i.test(String(name).split('/').pop() || '')) return 'sh';
+  if (/^(css|scss|less)$/.test(ext)) return 'css';
+  if (ext === 'sql') return 'sql';
+  if (/^(html|htm|xml|svg|vue|svelte)$/.test(ext)) return 'html';
+  if (/^(yml|yaml|toml|ini|conf)$/.test(ext)) return 'yaml';
+  return 'plain';
+}
+
+const escHtml = (t) => t.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+/** The pattern for a language, built once and kept. */
+const PATTERNS = {};
+function patternFor(lang) {
+  if (PATTERNS[lang]) return PATTERNS[lang];
+  const hash = /^(py|sh|yaml)$/.test(lang);
+  // A backtick, built from its code point: a literal one would end the template this whole script
+  // lives in.
+  const T = String.fromCharCode(96);
+  const parts = [
+    // Comments first, longest form first, so nothing inside one is read again.
+    '(?<com>/\\*[\\s\\S]*?\\*/' + (hash ? '|#[^\\n]*' : '') + '|//[^\\n]*|<!--[\\s\\S]*?-->)',
+    // Then strings: double, single, Python triple, and template literals.
+    '(?<str>"""[\\s\\S]*?"""' +
+      "|'''[\\s\\S]*?'''" +
+      '|"(?:\\\\.|[^"\\\\\\n])*"' +
+      "|'(?:\\\\.|[^'\\\\\\n])*'" +
+      '|' + T + '(?:\\\\.|[^' + T + '\\\\])*' + T + ')',
+    '(?<num>\\b(?:0[xXbBoO][0-9a-fA-F_]+|\\d[\\d_]*(?:\\.[\\d_]+)?(?:[eE][+-]?\\d+)?)\\b)',
+    // A name followed by an opening bracket is being called.
+    '(?<fun>\\b[A-Za-z_$][\\w$]*(?=\\s*\\())',
+    // A capitalised name is a type or a class, near enough to be worth colouring as one.
+    '(?<typ>\\b[A-Z][A-Za-z0-9_$]*\\b)',
+    '(?<wrd>\\b[A-Za-z_$][\\w$-]*\\b)',
+    '(?<pun>[{}()\\[\\];:,.<>=+\\-*/%!?&|^~@#]+)',
+  ];
+  const re = new RegExp(parts.join('|'), 'g');
+  const words = new Set(((KEYWORDS[lang] || '') + ' ' + LITERALS).split(/\s+/).filter(Boolean));
+  PATTERNS[lang] = { re: re, words: words };
+  return PATTERNS[lang];
+}
+
+/**
+ * The text as coloured HTML.
+ *
+ * Line structure is preserved exactly. The caller lays this behind a textarea, and one swallowed
+ * newline would shift every colour below it onto the wrong line.
+ */
+function colourise(text, filename) {
+  const lang = langOf(filename);
+  if (lang === 'plain') return escHtml(text);
+  const spec = patternFor(lang);
+  const re = spec.re, words = spec.words;
+  let out = '';
+  let last = 0;
+  re.lastIndex = 0;
+  let m;
+  while ((m = re.exec(text)) !== null) {
+    if (m.index > last) out += escHtml(text.slice(last, m.index));
+    const g = m.groups || {};
+    const raw = m[0];
+    let cls = null;
+    if (g.com !== undefined) cls = 'tk-com';
+    else if (g.str !== undefined) cls = 'tk-str';
+    else if (g.num !== undefined) cls = 'tk-num';
+    else if (g.fun !== undefined) cls = words.has(raw) ? 'tk-key' : 'tk-fun';
+    else if (g.typ !== undefined) cls = words.has(raw) ? 'tk-key' : 'tk-typ';
+    else if (g.wrd !== undefined) cls = words.has(raw) ? 'tk-key' : null;
+    else if (g.pun !== undefined) cls = 'tk-pun';
+    out += cls ? '<span class="' + cls + '">' + escHtml(raw) + '</span>' : escHtml(raw);
+    last = m.index + raw.length;
+    // A zero-length match would spin for ever. Nothing here should make one, but a hung tab is
+    // unrecoverable and the guard costs nothing.
+    if (raw.length === 0) re.lastIndex++;
+  }
+  out += escHtml(text.slice(last));
+  return out;
+}
+
 /**
  * A file, open and editable.
  *
@@ -774,48 +885,110 @@ async function openFile(rel) {
   const redo = el('button', 'ebtn', 'redo');
   const save = el('button', 'ebtn save', 'save');
   const revert = el('button', 'ebtn', 'revert');
-  const status = el('span', 'est', data.truncated ? 'read only — opened truncated' : 'saved');
+  const status = el('span', 'est', data.truncated ? 'read only - opened truncated' : 'saved');
   status.id = 'edstate';
   for (const b of [undo, redo, save, revert]) b.type = 'button';
   bar.appendChild(undo); bar.appendChild(redo); bar.appendChild(save); bar.appendChild(revert);
   bar.appendChild(status);
   host.appendChild(bar);
 
+  /*
+   * Three columns that must agree: numbers, colours, and the text you actually type into.
+   *
+   * The textarea is on top with transparent text and a visible caret; the coloured copy is a pre
+   * directly behind it; the numbers are a third column. All three share one font, size, line
+   * height and padding, and the textarea's scroll drives the other two — a pixel of difference
+   * anywhere and the colours sit on the wrong characters.
+   */
+  const ed = el('div', 'ed');
+  const gut = el('div', 'egut');
+  const stack = el('div', 'estack');
+  const hl = document.createElement('pre');
+  hl.className = 'ehl';
+  hl.setAttribute('aria-hidden', 'true');
   const area = document.createElement('textarea');
   area.className = 'edit';
   area.spellcheck = false;
   area.value = data.text;
-  // A truncated file must never be saved: the editor only ever had the first part of it.
   area.readOnly = data.truncated === true;
   save.disabled = data.truncated === true;
-  host.appendChild(area);
+  stack.appendChild(hl);
+  stack.appendChild(area);
+  ed.appendChild(gut);
+  ed.appendChild(stack);
+  host.appendChild(ed);
+
+  /** Redraws the colours and the numbers for whatever the textarea now holds. */
+  const repaint = () => {
+    const text = area.value;
+    hl.innerHTML = colourise(text, data.path);
+    const count = text.split('\n').length;
+    // Rebuilt only when the count changes: typing inside a line must not rebuild a 900-row column
+    // on every keystroke.
+    if (gut.dataset.count !== String(count)) {
+      const numbers = [];
+      for (let i = 1; i <= count; i++) numbers.push(i);
+      gut.textContent = numbers.join('\n');
+      gut.dataset.count = String(count);
+    }
+  };
+  repaint();
+
+  // Colouring a large file on every keystroke is wasted work nobody sees; a frame's delay is
+  // invisible and keeps typing smooth in a 20,000-character file.
+  let pending = null;
+  const repaintSoon = () => {
+    if (pending) return;
+    pending = requestAnimationFrame(() => { pending = null; repaint(); });
+  };
 
+  const sync = () => {
+    hl.scrollTop = area.scrollTop;
+    hl.scrollLeft = area.scrollLeft;
+    gut.scrollTop = area.scrollTop;
+  };
+  area.addEventListener('scroll', sync);
   area.addEventListener('input', () => {
     editing.dirty = area.value !== editing.text;
     editState(editing.dirty ? 'unsaved' : 'saved', editing.dirty ? 'dirty' : '');
+    repaintSoon();
+    sync();
   });
-  // The browser's own undo, so every shortcut a person knows already works.
+
+  // The browser's own undo, so every shortcut a person already knows works — including the ones
+  // nobody thinks about, and undo history that survives switching tabs.
   undo.onclick = () => { area.focus(); document.execCommand('undo'); area.dispatchEvent(new Event('input')); };
   redo.onclick = () => { area.focus(); document.execCommand('redo'); area.dispatchEvent(new Event('input')); };
   revert.onclick = () => {
     area.value = editing.text;
     editing.dirty = false;
     editState('saved');
+    repaint();
   };
 
+  // Tab inserts a tab rather than leaving the editor, which is what it means in code.
+  area.addEventListener('keydown', (ev) => {
+    if (ev.key === 'Tab' && !ev.ctrlKey && !ev.metaKey) {
+      ev.preventDefault();
+      const at = area.selectionStart, to = area.selectionEnd;
+      area.setRangeText('  ', at, to, 'end');
+      area.dispatchEvent(new Event('input'));
+    }
+  });
+
   const doSave = async () => {
     if (area.readOnly) return;
-    editState('saving…');
+    editState('saving...');
     let out;
     try {
       out = await api('/api/file', { method: 'POST', body: JSON.stringify({
         path: editing.path, text: area.value, size: editing.size, mtimeMs: editing.mtimeMs }) });
     } catch (e) {
       // A refusal because the agent wrote the file while it was open is the one worth acting on,
-      // so it comes with the way through rather than just a message.
+      // so it comes with the way through rather than only a message.
       editState(e.message.slice(0, 90), 'bad');
-      if (e.status === 409) {
-        const again = el('button', 'ebtn', 'reload from disk');
+      if (e.status === 409 && !bar.querySelector('.reload')) {
+        const again = el('button', 'ebtn reload', 'reload from disk');
         again.type = 'button';
         again.onclick = () => openFile(rel);
         bar.insertBefore(again, status);
@@ -1945,6 +2118,10 @@ const abort = () => api('/api/abort', { method: 'POST',
 $('stop').onclick = abort;
 $('livestop').onclick = abort;
 $('tab-chat').onclick = () => setView('chat');
+// Wired one by one, and these two were added to the tab bar and to setView but never here — so
+// they were painted, highlighted on hover, and did nothing at all when clicked.
+$('tab-terminal').onclick = () => setView('terminal');
+$('tab-preview').onclick = () => setView('preview');
 $('tab-files').onclick = () => setView('files');
 $('tab-search').onclick = () => setView('search');
 $('tab-review').onclick = () => setView('review');

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwyFlB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAy9FlB,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,CAmuB3C"}
+{"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,CAqxB3C"}

package/dist/web/ui-css.js

@@ -22,6 +22,9 @@ export function css(markUrl) {
   --add-bg:#e4f6ea; --add-ink:#0d5c37; --del-bg:#fdeaea; --del-ink:#8f1c22;
   /* The region a tool is reading, and the exact text it matched inside that region. */
   --attn-bg:#e8f4fb; --attn-hit:#bde4f7;
+  /* Syntax. Light theme. */
+  --syn-com:#6a7d8c; --syn-str:#0a6b4f; --syn-num:#9a4b00; --syn-key:#8a2be2;
+  --syn-typ:#0b6ca8; --syn-fun:#0a5ea8; --syn-pun:#6b7785;
   --shadow:0 1px 2px rgba(15,28,34,.07), 0 8px 24px rgba(15,28,34,.05);
   --radius:10px; --mono:ui-monospace,'SF Mono',Menlo,Consolas,'DejaVu Sans Mono',monospace;
   --mark:url("${markUrl}");
@@ -34,7 +37,11 @@ export function css(markUrl) {
     --violet:#b39cfb;
     --add-bg:#0f2a1e; --add-ink:#7ee0a7; --del-bg:#2b1416; --del-ink:#f4a3a6;
   --attn-bg:#10222c; --attn-hit:#1c3f52;
+  --syn-com:#6b8296; --syn-str:#7ee0a7; --syn-num:#f0b166; --syn-key:#c792ea;
+  --syn-typ:#63c8f0; --syn-fun:#82aaff; --syn-pun:#7a8899;
     --attn-bg:#10222c; --attn-hit:#1c3f52;
+    --syn-com:#6b8296; --syn-str:#7ee0a7; --syn-num:#f0b166; --syn-key:#c792ea;
+    --syn-typ:#63c8f0; --syn-fun:#82aaff; --syn-pun:#7a8899;
     --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
   }
 }
@@ -264,7 +271,9 @@ header{height:47px;flex:0 0 47px;border-bottom:1px solid var(--line);display:fle
 .empty{text-align:center;padding:12vh 0;color:var(--dim);font-size:13px}
 
 /* ── file tree ───────────────────────────────────────────── */
-.split{display:flex;height:100%;min-height:0}
+/* Like #chatview: the tab itself does not scroll, so the panes inside it can. */
+#filesview{overflow:hidden;display:flex}
+.split{display:flex;flex:1;min-height:0;min-width:0}
 .tree{width:300px;flex:0 0 300px;border-right:1px solid var(--line);overflow-y:auto;padding:8px 0}
 .tnode{display:flex;align-items:center;gap:6px;padding:3px 12px;width:100%;text-align:left;
   font-size:12.5px;font-family:var(--mono);color:var(--muted);white-space:nowrap}
@@ -273,7 +282,7 @@ header{height:47px;flex:0 0 47px;border-bottom:1px solid var(--line);display:fle
 .tnode .ic{width:13px;flex:0 0 13px;color:var(--dim);text-align:center}
 .tnode.d .ic{color:var(--cyan)}
 .tnode .sz{margin-left:auto;font-size:10.5px;color:var(--dim)}
-.fileview{flex:1;min-width:0;overflow:auto;display:flex;flex-direction:column}
+.fileview{flex:1;min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column}
 .fvhead{position:sticky;top:0;background:var(--panel);border-bottom:1px solid var(--line);
   padding:8px 14px;font-family:var(--mono);font-size:12px;display:flex;gap:12px;align-items:center}
 .fvhead .fsz{color:var(--dim);font-size:11px}
@@ -360,7 +369,16 @@ footer[hidden]{display:none}
   background:var(--panel-2);border-radius:var(--radius);padding:9px 10px;
   transition:border-color .14s,box-shadow .14s}
 .cin:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(77,214,232,.13)}
-textarea{flex:1;background:none;border:0;outline:0;resize:none;max-height:200px;
+/*
+ * The composer's textarea, scoped to the composer.
+ *
+ * This was a bare element selector, so its max-height applied to every textarea on the page —
+ * including the file editor, which is why a 21K file was shown 200 pixels tall with 570 pixels of
+ * empty panel under it. A broad element selector setting a property that a later class does not
+ * happen to override is the same trap as [hidden]: measured 766px of panel, 200px of editor, and
+ * flex-grow reading 1 the whole time.
+ */
+.cin textarea{flex:1;background:none;border:0;outline:0;resize:none;max-height:200px;
   line-height:1.5;font-size:14px}
 textarea::placeholder{color:var(--dim)}
 .send{width:31px;height:31px;flex:0 0 31px;border-radius:50%;
@@ -724,10 +742,42 @@ body[data-tint="soft"]{filter:contrast(.92) brightness(1.04)}
 .edbar .est{margin-left:auto;color:var(--dim);white-space:nowrap}
 .edbar .est.dirty{color:var(--amber)}
 .edbar .est.bad{color:var(--red)}
-/* One textarea, so the browser's own undo and redo work — a hand-rolled stack would be worse. */
-.edit{flex:1;width:100%;min-height:0;resize:none;border:0;outline:none;padding:12px 14px;
-  background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:12.5px;line-height:1.5;
-  tab-size:2;white-space:pre;overflow:auto}
+/*
+ * An editor that is coloured and numbered, and still a real textarea.
+ *
+ * The textarea sits on top with transparent text and a visible caret; the coloured copy is a <pre>
+ * directly behind it, and the line numbers are a third column. All three share the same font,
+ * size, line height and padding, and the textarea's scroll drives the other two — if any of those
+ * differ by a pixel the colours drift off the characters they belong to.
+ *
+ * Done this way so undo and redo stay the browser's own. A contenteditable div with syntax colours
+ * would look the same and break every shortcut a person already knows.
+ */
+.ed{flex:1;display:flex;min-height:0;background:var(--bg)}
+.ed .egut{flex:0 0 auto;overflow:hidden;padding:12px 10px 12px 14px;text-align:right;
+  color:var(--dim);background:var(--panel);border-right:1px solid var(--line);user-select:none;
+  font-family:var(--mono);font-size:12.5px;line-height:1.5;font-variant-numeric:tabular-nums;
+  white-space:pre}
+.estack{position:relative;flex:1;min-width:0}
+.ehl,.edit{position:absolute;inset:0;margin:0;padding:12px 14px;border:0;
+  font-family:var(--mono);font-size:12.5px;line-height:1.5;tab-size:2;
+  white-space:pre;overflow:auto;word-break:normal;overflow-wrap:normal}
+.ehl{pointer-events:none;color:var(--ink)}
+/* Transparent text over the coloured copy, with the caret and the selection still visible. */
+.edit{background:transparent;color:transparent;caret-color:var(--cyan);resize:none;outline:none;
+  max-height:none}
+.edit::selection{background:var(--attn-hit);color:transparent}
+
+/* The colours. Chosen to read at 12.5px in both themes rather than to look like a screenshot. */
+.tk-com{color:var(--syn-com);font-style:italic}
+.tk-str{color:var(--syn-str)}
+.tk-num{color:var(--syn-num)}
+.tk-key{color:var(--syn-key)}
+.tk-typ{color:var(--syn-typ)}
+.tk-fun{color:var(--syn-fun)}
+.tk-pun{color:var(--syn-pun)}
+.tk-tag{color:var(--syn-key)}
+.tk-att{color:var(--syn-fun)}
 
 /* Carrying on from a transcript, offered in the bar that says it is read only. */
 .readonly .rgap{flex:1}

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;;;;;;;;;;;;gBAYO,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqtBtB,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;;;;;;;;;;;;;;;gBAeO,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAowBtB,CAAC;AACF,CAAC"}

package/package.json

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