koneck 2.37.0 → 2.38.1

package/dist/web/ui-client.js

@@ -156,7 +156,7 @@ function md(src) {
 /* ── views ─────────────────────────────────────────────────── */
 function setView(name) {
   state.view = name;
-  for (const v of ['chat', 'changes', 'timing', 'files', 'search',
+  for (const v of ['chat', 'changes', 'timing', 'files', 'terminal', 'preview', 'search',
                    'review', 'refactor', 'restore', 'settings']) {
     $(v + 'view').hidden = v !== name;
     $('tab-' + v).className = 'tab' + (v === name ? ' on' : '');
@@ -166,6 +166,8 @@ function setView(name) {
   if (name === 'changes') loadChanges();
   if (name === 'timing') loadTiming();
   if (name === 'files') loadTree('');
+  if (name === 'terminal') { loadJobs(); $('tcmd').focus(); }
+  if (name === 'preview') loadPreview();
   if (name === 'search') $('q').focus();
   if (name === 'review') loadReview();
   if (name === 'refactor') loadRefactor();
@@ -722,6 +724,138 @@ 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.
+ *
+ * The tab could show a file and not change it, which makes it a viewer. Editing a line and saving
+ * is the smallest useful thing a person does to a file, and going through the agent to do it —
+ * asking a model to please change one character — is slower, less certain, and costs tokens.
+ *
+ * One textarea, deliberately. Undo and redo are the browser's own, which means every shortcut a
+ * person already knows works, including the ones nobody thinks about: ctrl+Z, ctrl+shift+Z, ctrl+Y,
+ * the platform variants, and undo history that survives switching tabs. A hand-rolled stack would
+ * be a worse version of something already there.
+ */
+const editing = { path: null, text: '', size: 0, mtimeMs: 0, dirty: false };
+
+function editState(word, cls) {
+  const el0 = $('edstate');
+  if (!el0) return;
+  el0.textContent = word;
+  el0.className = 'est' + (cls ? ' ' + cls : '');
+}
+
 async function openFile(rel) {
   const host = $('fileview');
   host.innerHTML = '';
@@ -739,12 +873,141 @@ async function openFile(rel) {
     host.appendChild(el('div', 'empty', 'Binary file — nothing to show as text.'));
     return;
   }
-  // Line numbers in their own column so selecting the code does not select them.
-  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);
+
+  editing.path = data.path;
+  editing.text = data.text;
+  editing.size = data.size;
+  editing.mtimeMs = data.mtimeMs;
+  editing.dirty = false;
+
+  const bar = el('div', 'edbar');
+  const undo = el('button', 'ebtn', 'undo');
+  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');
+  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;
+  area.readOnly = data.truncated === true;
+  save.disabled = data.truncated === true;
+  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 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...');
+    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 only a message.
+      editState(e.message.slice(0, 90), 'bad');
+      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);
+      }
+      return;
+    }
+    editing.text = area.value;
+    editing.size = out.size;
+    editing.mtimeMs = out.mtimeMs;
+    editing.dirty = false;
+    editState('saved');
+  };
+  save.onclick = () => void doSave();
+  area.addEventListener('keydown', (ev) => {
+    if ((ev.ctrlKey || ev.metaKey) && ev.key.toLowerCase() === 's') {
+      ev.preventDefault();
+      void doSave();
+    }
+  });
 }
 
 /* ── search ────────────────────────────────────────────────── */
@@ -1129,6 +1392,78 @@ async function loadSettings() {
   const wrap = el('div', 'wrap');
   host.appendChild(wrap);
 
+  /* ── how it looks ──────────────────────────────────────────────────────────────────────
+   * Typography is a working condition, not a decoration: somebody reading code for nine hours on
+   * a 1080p panel and somebody on a 4K laptop do not want the same size, and the font a person
+   * reads fastest is the one they are used to. Held per browser, because it belongs to whoever is
+   * looking rather than to the workspace.
+   */
+  wrap.appendChild(el('div', 'sect', 'Type'));
+  const tbox = el('div');
+  wrap.appendChild(tbox);
+
+  const typeRow = (label, hint, control) => {
+    const row = el('div', 'setrow');
+    const left = el('div');
+    left.appendChild(el('div', 'sl', label));
+    if (hint) left.appendChild(el('div', 'sd', hint));
+    row.appendChild(left);
+    row.appendChild(control);
+    tbox.appendChild(row);
+  };
+
+  const sizePick = document.createElement('select');
+  for (const [label, value] of [['Small', '12.5px'], ['Normal', '14px'], ['Large', '15.5px'],
+                                ['Larger', '17px'], ['Largest', '19px']]) {
+    const o = document.createElement('option');
+    o.value = value; o.textContent = label + '  (' + value + ')';
+    if (value === look.size) o.selected = true;
+    sizePick.appendChild(o);
+  }
+  sizePick.onchange = () => setLook({ size: sizePick.value });
+  typeRow('Size', 'Everything scales from this, so code and prose stay in proportion.', sizePick);
+
+  const famPick = document.createElement('select');
+  for (const [label, value] of UI_FONTS) {
+    const o = document.createElement('option');
+    o.value = value; o.textContent = label;
+    if (value === look.family) o.selected = true;
+    famPick.appendChild(o);
+  }
+  famPick.onchange = () => setLook({ family: famPick.value });
+  typeRow('Interface font', 'What the page is set in.', famPick);
+
+  const monoPick = document.createElement('select');
+  for (const [label, value] of MONO_FONTS) {
+    const o = document.createElement('option');
+    o.value = value; o.textContent = label;
+    if (value === look.mono) o.selected = true;
+    monoPick.appendChild(o);
+  }
+  monoPick.onchange = () => setLook({ mono: monoPick.value });
+  typeRow('Code font', 'Diffs, file contents, the terminal.', monoPick);
+
+  const tintPick = document.createElement('select');
+  for (const [label, value] of [['None', 'none'], ['Warmer', 'warm'], ['Cooler', 'cool'],
+                                ['More contrast', 'high'], ['Softer', 'soft']]) {
+    const o = document.createElement('option');
+    o.value = value; o.textContent = label;
+    if (value === look.tint) o.selected = true;
+    tintPick.appendChild(o);
+  }
+  tintPick.onchange = () => setLook({ tint: tintPick.value });
+  typeRow('Tone', 'Warmth and contrast, on top of the light or dark theme.', tintPick);
+
+  const sample = el('div', 'setrow');
+  const demo = el('div');
+  demo.appendChild(el('div', 'sl', 'The quick brown fox jumps over the lazy dog'));
+  const code = el('div', 'sd');
+  code.style.fontFamily = 'var(--mono)';
+  code.textContent = 'const rate = 0.15;  // ILlO0 1 — how it reads in code';
+  demo.appendChild(code);
+  sample.appendChild(demo);
+  tbox.appendChild(sample);
+
   /* health */
   wrap.appendChild(el('div', 'sect', 'Health'));
   const hbox = el('div');
@@ -1783,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');
@@ -1914,6 +2253,233 @@ $('pmode').onclick = async () => {
   }
   $('modedlg').showModal();
 };
+/* ── how it looks ─────────────────────────────────────────────────────────────────────────── */
+
+/**
+ * Typography, chosen and remembered.
+ *
+ * Per browser rather than per workspace: it belongs to whoever is looking. Applied as variables on
+ * the root element so one setting moves the whole page — a size that changed the prose and left the
+ * code at 12.5px would be worse than none.
+ *
+ * Only fonts that are already on the machine are offered. A font pulled from a CDN does not arrive
+ * on the machine most likely to be running a local model, which is one that is offline.
+ */
+const UI_FONTS = [
+  ['System', "system-ui,-apple-system,'Segoe UI',Roboto,Ubuntu,sans-serif"],
+  ['Humanist sans', "'Segoe UI','Helvetica Neue',Helvetica,Arial,sans-serif"],
+  ['Grotesque sans', "Inter,'Roboto','Helvetica Neue',Arial,sans-serif"],
+  ['Serif', "Georgia,'Times New Roman',Times,serif"],
+  ['Monospace everywhere', "ui-monospace,'SF Mono',Menlo,Consolas,monospace"],
+];
+const MONO_FONTS = [
+  ['System monospace', "ui-monospace,'SF Mono',Menlo,Consolas,'DejaVu Sans Mono',monospace"],
+  ['JetBrains Mono', "'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace"],
+  ['Fira Code', "'Fira Code','Fira Mono',ui-monospace,Menlo,Consolas,monospace"],
+  ['Source Code Pro', "'Source Code Pro',ui-monospace,Menlo,Consolas,monospace"],
+  ['Courier', "'Courier New',Courier,monospace"],
+];
+
+const look = (() => {
+  const fallback = { size: '14px', family: UI_FONTS[0][1], mono: MONO_FONTS[0][1], tint: 'none' };
+  try {
+    const saved = JSON.parse(localStorage.getItem('koneck.look') || '{}');
+    return { ...fallback, ...(saved && typeof saved === 'object' ? saved : {}) };
+  } catch (e) { return fallback; }
+})();
+
+function applyLook() {
+  const root = document.documentElement;
+  root.style.setProperty('--ui', look.size);
+  root.style.setProperty('--uifam', look.family);
+  root.style.setProperty('--mono', look.mono);
+  document.body.setAttribute('data-tint', look.tint || 'none');
+}
+
+function setLook(change) {
+  Object.assign(look, change);
+  try { localStorage.setItem('koneck.look', JSON.stringify(look)); } catch (e) {}
+  applyLook();
+}
+
+/* ── a terminal ───────────────────────────────────────────────────────────────────────────── */
+
+/**
+ * Commands you run yourself.
+ *
+ * The interface had a card for every command the AGENT ran and no way to run one, which made it a
+ * spectator's seat. Half of working in a repository is running things, and the distinction that
+ * matters is not a setting but a fact about the command: a test run finishes and a dev server
+ * does not, and a runner that waits for the second one looks broken.
+ */
+const term = { selected: null, polling: null };
+
+async function loadJobs(select) {
+  let out;
+  try { out = await api('/api/jobs'); } catch (e) { return; }
+  const host = $('tjobs');
+  host.innerHTML = '';
+  if ((out.jobs || []).length === 0) {
+    host.appendChild(el('div', 'wempty', 'Nothing run yet.'));
+  }
+  const pick = select || term.selected;
+  let anyRunning = false;
+  for (const j of out.jobs || []) {
+    if (j.state === 'running') anyRunning = true;
+    const row = el('div', 'jrow' + (j.id === pick ? ' on' : ''));
+    row.appendChild(el('div', 'jc', j.command));
+    const meta = el('div', 'jm');
+    meta.appendChild(el('span', 'js ' + j.state, j.state
+      + (j.exitCode !== null && j.state !== 'running' ? ' ' + j.exitCode : '')));
+    if (j.background) meta.appendChild(el('span', null, 'background'));
+    meta.appendChild(el('span', null, j.lines + (j.lines === 1 ? ' line' : ' lines')));
+    if (j.state === 'running') {
+      const stop = el('button', 'jk', 'kill');
+      stop.onclick = async (ev) => {
+        ev.stopPropagation();
+        try { await api('/api/kill', { method: 'POST', body: JSON.stringify({ id: j.id }) }); }
+        catch (e) {}
+        loadJobs(j.id);
+      };
+      meta.appendChild(stop);
+    }
+    row.appendChild(meta);
+    row.onclick = () => { term.selected = j.id; loadJobs(j.id); showJob(j.id); };
+    host.appendChild(row);
+  }
+  if (pick) showJob(pick);
+  // Polled only while something is running, and stopped when nothing is: a terminal tab left open
+  // should not be a request every second for the rest of the day.
+  if (anyRunning && !term.polling) {
+    term.polling = setInterval(() => {
+      if (state.view === 'terminal') loadJobs(); else { clearInterval(term.polling); term.polling = null; }
+    }, 1000);
+  } else if (!anyRunning && term.polling) {
+    clearInterval(term.polling); term.polling = null;
+  }
+}
+
+async function showJob(id) {
+  let job;
+  try { job = await api('/api/jobs?id=' + encodeURIComponent(id)); } catch (e) { return; }
+  const host = $('tout');
+  const wasAtEnd = host.scrollHeight - host.scrollTop - host.clientHeight < 60;
+  host.innerHTML = '';
+  if (job.trimmed) host.appendChild(el('div', 'oe', '… earlier output dropped\n'));
+  host.appendChild(document.createTextNode((job.lines || []).join('\n')));
+  if (job.state !== 'running') {
+    host.appendChild(el('div', job.state === 'exited' ? null : 'oe',
+      '\n[' + job.state + (job.exitCode !== null ? ' ' + job.exitCode : '') + ' after '
+      + ms((job.endedAt || Date.now()) - job.startedAt) + ']'));
+  }
+  if (wasAtEnd) host.scrollTop = host.scrollHeight;
+}
+
+async function runCommand() {
+  const command = $('tcmd').value.trim();
+  if (!command) return;
+  let out;
+  try {
+    out = await api('/api/run', { method: 'POST', body: JSON.stringify({
+      command: command, background: $('tbackground').checked }) });
+  } catch (e) {
+    $('tout').textContent = e.message;
+    return;
+  }
+  $('tcmd').value = '';
+  term.selected = out.id;
+  loadJobs(out.id);
+}
+$('trun').onclick = () => void runCommand();
+$('tcmd').addEventListener('keydown', (ev) => {
+  if (ev.key === 'Enter') { ev.preventDefault(); void runCommand(); }
+});
+
+/* ── the page, as it really renders ───────────────────────────────────────────────────────── */
+
+/**
+ * The same browser the agent drives.
+ *
+ * Deliberately the same one rather than a second: watching the agent work and then reaching in to
+ * click something yourself only means anything if it is the same page. A click on the screenshot
+ * is dispatched as a real mouse event at the same point, so what happens is what would happen to a
+ * person clicking there.
+ */
+const preview = { shot: null, width: 0 };
+
+function drawPreview(data) {
+  const host = $('pvbody');
+  host.innerHTML = '';
+  if (!data || data.running === false) {
+    host.appendChild(el('div', 'pvnone', (data && data.note)
+      || 'Nothing open yet.'));
+    $('pvinfo').textContent = '';
+    return;
+  }
+  $('pvurl').value = data.url || $('pvurl').value;
+  $('pvinfo').textContent = data.title || '';
+  if (!data.shot) {
+    host.appendChild(el('div', 'pvnone', 'The browser is open but produced no picture.'));
+    return;
+  }
+  const img = document.createElement('img');
+  img.className = 'pvshot';
+  img.src = data.shot;
+  img.alt = data.title || 'the page';
+  // The picture is 1280 wide whatever it is displayed at, so a click has to be scaled back into
+  // page coordinates or it lands somewhere else entirely.
+  img.onclick = async (ev) => {
+    const box = img.getBoundingClientRect();
+    const scale = img.naturalWidth / box.width;
+    const x = Math.round((ev.clientX - box.left) * scale);
+    const y = Math.round((ev.clientY - box.top) * scale);
+    $('pvinfo').textContent = 'clicking ' + x + ',' + y + '…';
+    await browserDo({ action: 'click', x: x, y: y });
+  };
+  host.appendChild(img);
+  const hint = el('div', 'pvhint',
+    'Click the page to click it for real. ' + (data.controls || []).length
+    + ' interactive elements. Scroll with the buttons below.');
+  host.appendChild(hint);
+  const row = el('div', 'pvhint');
+  for (const [label, by] of [['scroll up', -600], ['scroll down', 600]]) {
+    const b = el('button', 'pvbtn', label);
+    b.style.margin = '0 4px';
+    b.onclick = () => void browserDo({ action: 'scroll', by: by });
+    row.appendChild(b);
+  }
+  host.appendChild(row);
+}
+
+async function browserDo(body) {
+  $('pvinfo').textContent = 'working…';
+  let out;
+  try { out = await api('/api/browser', { method: 'POST', body: JSON.stringify(body) }); }
+  catch (e) {
+    $('pvbody').innerHTML = '';
+    $('pvbody').appendChild(el('div', 'pvnone', e.message));
+    $('pvinfo').textContent = '';
+    return;
+  }
+  drawPreview({ running: true, ...out });
+}
+
+async function loadPreview() {
+  let out;
+  try { out = await api('/api/browser'); } catch (e) { out = null; }
+  drawPreview(out);
+}
+$('pvgo').onclick = () => void browserDo({ action: 'open', url: $('pvurl').value.trim() });
+$('pvurl').addEventListener('keydown', (ev) => {
+  if (ev.key === 'Enter') { ev.preventDefault(); $('pvgo').onclick(); }
+});
+$('pvrefresh').onclick = () => void browserDo({ action: 'read' });
+$('pvclose').onclick = async () => {
+  try { await api('/api/browser', { method: 'POST', body: JSON.stringify({ action: 'close' }) }); }
+  catch (e) {}
+  loadPreview();
+};
+
 /* ── watching it work ─────────────────────────────────────────────────────────────────────── */
 
 /**
@@ -2460,6 +3026,8 @@ for (const b of document.querySelectorAll('.hero .ex button')) {
 
 // The pill has to say what the remembered setting actually is before anything is asked.
 setFollow(follow.on);
+// And the page has to be set in the chosen type before it is looked at, not after.
+applyLook();
 
 (async function start() {
   let hello;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAi6ElB,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,CA4oB3C"}
+{"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"}