koneck 2.56.0 → 2.57.0

package/dist/web/ui-client.js

@@ -168,7 +168,14 @@ function setView(name) {
   if (name === 'changes') loadChanges();
   if (name === 'timing') loadTiming();
   if (name === 'files') loadTree('');
-  if (name === 'terminal') { loadJobs(); $('tcmd').focus(); }
+  if (name === 'terminal') {
+    // Built on first sight and kept, so a pane's scrollback survives leaving the tab and coming
+    // back — a terminal that forgets what it printed when you look away is not a terminal.
+    if (term.panes.length === 0 || !term.panes[0].el) buildTerminal();
+    watchTerminal();
+    const here = term.panes[term.active];
+    if (here && here.el) here.el.input.focus();
+  }
   if (name === 'search') $('q').focus();
   if (name === 'review') loadReview();
   if (name === 'refactor') loadRefactor();
@@ -2620,8 +2627,17 @@ addEventListener('keydown', (ev) => {
  */
 function ansiToHtml(text) {
   const escChar = String.fromCharCode(27);
+  /*
+   * Colour is kept; everything else a terminal emits is swallowed.
+   *
+   * The last alternative is the one that was missing: an escape followed by a single character —
+   * ESC = for keypad mode, ESC > , ESC 7 to save the cursor — has no bracket, so the CSI pattern
+   * never matched it and it reached the page as a control glyph. That is what appeared at the top
+   * of a pane running git.
+   */
   const pattern = new RegExp(escChar + '\\[([0-9;]*)m|' + escChar + '\\[[0-9;?]*[A-Za-z]|'
-    + escChar + '\\][^\\u0007]*\\u0007', 'g');
+    + escChar + '\\][^\\u0007]*(?:\\u0007|' + escChar + '\\\\)|'
+    + escChar + '[=>78MDEHcZ]|[\\u0000-\\u0008\\u000b\\u000c\\u000e-\\u001f]', 'g');
   let out = '';
   let open = 0;
   let last = 0;
@@ -2659,96 +2675,303 @@ function ansiToHtml(text) {
  * 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 };
+/*
+ * A terminal, not a form with an output box.
+ *
+ * What was here was a job list beside a pane of text: you typed into a field at the top, picked a
+ * row, and read the result — which arrived in whole-buffer snapshots a few times a second, because
+ * the view polled while the runner had been emitting a line-by-line event all along. Everything
+ * about it said "web page".
+ *
+ * This is a scrollback: the command you typed stays above what it printed, the cursor waits at the
+ * bottom, and the next thing you type continues the same column of text. Up to three panes, each
+ * its own shell with its own history, because two is the common case — watch the server, run the
+ * tests — and four on a laptop is four things too narrow to read.
+ */
+const term = {
+  panes: [],
+  /** Which pane the keyboard belongs to. */
+  active: 0,
+  stream: null,
+  /** Pane index by job id, so a line can be routed to the pane that asked for it. */
+  ownerOf: {},
+  fontPx: 12.5,
+};
 
-async function loadJobs(select) {
-  let out;
-  try { out = await api('/api/jobs'); } catch (e) { return; }
-  const host = $('tjobs');
+function newPane() {
+  return { job: null, history: [], at: -1, lines: [], running: false, el: null,
+           /** Where this command's output begins, so a catch-up can replace exactly that. */
+           outputStart: 0,
+           /** How many output lines have arrived on the stream, for the same reason. */
+           received: 0 };
+}
+
+/** The pane a job's output belongs to, or null when nothing here started it. */
+function paneForJob(id) {
+  const idx = term.ownerOf[id];
+  return idx === undefined ? null : term.panes[idx] || null;
+}
+
+function buildTerminal() {
+  if (term.panes.length === 0) term.panes.push(newPane());
+  const host = $('termpanes');
   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 : '')));
-    // Who ran it is a column, not a separate screen.
-    if (j.by === 'agent') meta.appendChild(el('span', null, 'by the agent'));
-    if (j.background) meta.appendChild(el('span', null, 'background'));
-    if (j.pty) meta.appendChild(el('span', null, 'tty'));
-    meta.appendChild(el('span', null, j.lines + (j.lines === 1 ? ' line' : ' lines')));
-    if (j.state === 'running' && j.by !== 'agent') {
-      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);
+  term.panes.forEach((pane, index) => {
+    if (index > 0) {
+      // A draggable divider, so a pane can be made wide enough for the thing being read.
+      const grip = el('div', 'termgrip');
+      grip.onmousedown = (ev) => startPaneDrag(ev, index);
+      host.appendChild(grip);
     }
-    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 || state.busy) && !term.polling) {
-    term.polling = setInterval(() => {
-      if (state.view === 'terminal') loadJobs();
-      else { clearInterval(term.polling); term.polling = null; }
-    }, 1000);
-  } else if (!anyRunning && !state.busy && term.polling) {
-    clearInterval(term.polling); term.polling = null;
-  }
+    const box = el('div', 'termpane' + (index === term.active ? ' on' : ''));
+    box.style.flex = String(pane.flex || 1);
+    box.onmousedown = () => { term.active = index; markActivePane(); };
+
+    const scroll = el('div', 'termscroll');
+    const body = el('pre', 'termbody');
+    scroll.appendChild(body);
+
+    const row = el('div', 'termrow');
+    row.appendChild(el('span', 'termps', '$'));
+    const input = document.createElement('input');
+    input.className = 'termin';
+    input.spellcheck = false;
+    input.autocomplete = 'off';
+    input.placeholder = index === 0 ? 'npm test, git status, npm run dev…' : '';
+    input.onkeydown = (ev) => paneKey(ev, index);
+    input.onfocus = () => { term.active = index; markActivePane(); };
+    row.appendChild(input);
+    const stop = el('button', 'termstop', 'stop');
+    stop.title = 'Kill what is running in this pane';
+    stop.onclick = () => void killPane(index);
+    row.appendChild(stop);
+
+    box.appendChild(scroll);
+    box.appendChild(row);
+    host.appendChild(box);
+    pane.el = { box: box, scroll: scroll, body: body, input: input, stop: stop };
+    paintPane(index);
+  });
+  applyTerminalLook();
+  markActivePane();
+  const here = term.panes[term.active];
+  if (here && here.el) here.el.input.focus();
 }
 
-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'));
-  // The escape codes are why a pty was allocated; rendering them is the point.
-  const body = el('div');
-  body.innerHTML = ansiToHtml((job.lines || []).join('\n'));
-  host.appendChild(body);
-  for (const line of job.lines || []) noticeServedUrl(line);
-  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) + ']'));
+function markActivePane() {
+  term.panes.forEach((pane, i) => {
+    if (pane.el) pane.el.box.className = 'termpane' + (i === term.active ? ' on' : '');
+  });
+}
+
+/** Everything this pane has printed, as one column of text. */
+function paintPane(index) {
+  const pane = term.panes[index];
+  if (!pane || !pane.el) return;
+  const atEnd = pane.el.scroll.scrollHeight - pane.el.scroll.scrollTop
+    - pane.el.scroll.clientHeight < 60;
+  pane.el.body.innerHTML = ansiToHtml(pane.lines.join('\n'));
+  pane.el.stop.hidden = !pane.running;
+  if (atEnd) pane.el.scroll.scrollTop = pane.el.scroll.scrollHeight;
+}
+
+function pushPane(index, line, redraw) {
+  const pane = term.panes[index];
+  if (!pane) return;
+  if (redraw && pane.lines.length > 0) pane.lines[pane.lines.length - 1] = line;
+  else pane.lines.push(line);
+  while (pane.lines.length > 4000) pane.lines.shift();
+  paintPane(index);
+}
+
+async function paneKey(ev, index) {
+  const pane = term.panes[index];
+  if (!pane || !pane.el) return;
+  const input = pane.el.input;
+  if (ev.key === 'Enter') {
+    const command = input.value.trim();
+    input.value = '';
+    if (command === '') { pushPane(index, '$ '); return; }
+    if (command === 'clear') { pane.lines = []; paintPane(index); return; }
+    pane.history.push(command);
+    pane.at = pane.history.length;
+    // Echoed above its own output, which is the whole difference from a form.
+    pushPane(index, '$ ' + command);
+    pane.outputStart = pane.lines.length;
+    pane.received = 0;
+    await runInPane(index, command);
+    return;
   }
-  if (wasAtEnd) host.scrollTop = host.scrollHeight;
+  // A history nobody has to think about: up and down, as everywhere else.
+  if (ev.key === 'ArrowUp') {
+    ev.preventDefault();
+    if (pane.at > 0) pane.at--;
+    input.value = pane.history[pane.at] || '';
+    return;
+  }
+  if (ev.key === 'ArrowDown') {
+    ev.preventDefault();
+    if (pane.at < pane.history.length) pane.at++;
+    input.value = pane.history[pane.at] || '';
+    return;
+  }
+  if (ev.key === 'c' && ev.ctrlKey) { void killPane(index); }
 }
 
-async function runCommand() {
-  const command = $('tcmd').value.trim();
-  if (!command) return;
+async function runInPane(index, command) {
+  const pane = term.panes[index];
+  if (!pane) return;
+  // Anything that does not exit on its own is a background job; a runner that waits for a dev
+  // server looks broken, and the fact is about the command rather than a box somebody ticked.
+  const looksLikeServer = /\b(dev|serve|start|watch|nodemon|vite|next\s+dev)\b/.test(command);
   let out;
   try {
-    out = await api('/api/run', { method: 'POST', body: JSON.stringify({
-      command: command, background: $('tbackground').checked }) });
+    out = await api('/api/run', { method: 'POST',
+      body: JSON.stringify({ command: command, background: looksLikeServer }) });
   } catch (e) {
-    $('tout').textContent = e.message;
+    pushPane(index, e.message);
     return;
   }
-  $('tcmd').value = '';
-  term.selected = out.id;
-  loadJobs(out.id);
+  pane.job = out.id;
+  pane.running = true;
+  term.ownerOf[out.id] = index;
+  paintPane(index);
+
+  /*
+   * One catch-up read, because a command can outrun its own stream.
+   *
+   * The event stream is opened when the tab is first shown and takes a moment to establish. A
+   * command typed inside that moment printed its first lines before anything was listening, and
+   * they were gone: the pane showed the echoed command and nothing under it. Measured — the stream
+   * was still in readyState 0 when the lines were emitted.
+   *
+   * So the runner is asked once, shortly after, what the job has actually produced, and anything
+   * the stream missed is filled in. Counted rather than merged, so a line never appears twice.
+   */
+  setTimeout(() => { void catchUpPane(index, out.id); }, 400);
 }
-$('trun').onclick = () => void runCommand();
-$('tcmd').addEventListener('keydown', (ev) => {
-  if (ev.key === 'Enter') { ev.preventDefault(); void runCommand(); }
-});
+
+async function catchUpPane(index, jobId) {
+  const pane = term.panes[index];
+  if (!pane || pane.job !== jobId) return;
+  let job;
+  try { job = await api('/api/jobs?id=' + encodeURIComponent(jobId)); } catch (e) { return; }
+  const produced = (job.lines || []).length;
+  if (produced <= pane.received) return;
+  pane.lines = pane.lines.slice(0, pane.outputStart).concat(job.lines || []);
+  pane.received = produced;
+  if (job.state && job.state !== 'running') pane.running = false;
+  paintPane(index);
+}
+
+async function killPane(index) {
+  const pane = term.panes[index];
+  if (!pane || !pane.job || !pane.running) return;
+  try { await api('/api/kill', { method: 'POST', body: JSON.stringify({ id: pane.job }) }); }
+  catch (e) { pushPane(index, e.message); }
+}
+
+/*
+ * Live, from the runner's own event stream.
+ *
+ * Its own stream rather than the session's: a command belongs to the workspace, not to whichever
+ * conversation was open when it was typed.
+ */
+function watchTerminal() {
+  if (term.stream) return;
+  const url = '/api/terminal/events' + (state.token ? '?token=' + encodeURIComponent(state.token) : '');
+  const source = new EventSource(url);
+  term.stream = source;
+  source.onmessage = (ev) => {
+    let e;
+    try { e = JSON.parse(ev.data); } catch (err) { return; }
+    if (e.t === 'job-line') {
+      const idx = term.ownerOf[e.id];
+      if (idx === undefined) return;
+      const pane = term.panes[idx];
+      if (pane && !e.redraw) pane.received++;
+      pushPane(idx, e.line, e.redraw === true);
+      noticeServedUrl(e.line);
+      return;
+    }
+    if (e.t === 'job' && e.job) {
+      const idx = term.ownerOf[e.job.id];
+      if (idx === undefined) return;
+      const pane = term.panes[idx];
+      if (!pane) return;
+      if (e.job.state !== 'running') {
+        pane.running = false;
+        // Said the way a shell says it, rather than as a status badge.
+        pushPane(idx, e.job.exitCode === 0 || e.job.exitCode === null
+          ? ''
+          : '[' + e.job.state + ' ' + e.job.exitCode + ']');
+      }
+      paintPane(idx);
+    }
+  };
+  source.onerror = () => { /* the browser reconnects on its own */ };
+}
+
+/** Font size and backdrop, applied to every pane at once. */
+function applyTerminalLook() {
+  const host = $('termpanes');
+  host.style.setProperty('--term-font', term.fontPx + 'px');
+  const on = $('tbgimg').checked;
+  const strength = Number($('tbgop').value) / 100;
+  host.classList.toggle('backdrop', on);
+  host.style.setProperty('--term-bg-strength', on ? String(strength) : '0');
+  if (on && !host.style.getPropertyValue('--term-bg-image')) {
+    const url = '/api/terminal/background'
+      + (state.token ? '?token=' + encodeURIComponent(state.token) : '');
+    host.style.setProperty('--term-bg-image', 'url("' + url + '")');
+  }
+}
+
+function startPaneDrag(ev, dividerIndex) {
+  ev.preventDefault();
+  const left = term.panes[dividerIndex - 1];
+  const right = term.panes[dividerIndex];
+  if (!left || !right || !left.el || !right.el) return;
+  const startX = ev.clientX;
+  const leftWas = left.el.box.getBoundingClientRect().width;
+  const rightWas = right.el.box.getBoundingClientRect().width;
+  const total = leftWas + rightWas;
+  const move = (m) => {
+    const wanted = Math.min(Math.max(leftWas + (m.clientX - startX), 120), total - 120);
+    left.flex = wanted / total;
+    right.flex = (total - wanted) / total;
+    left.el.box.style.flex = String(left.flex);
+    right.el.box.style.flex = String(right.flex);
+  };
+  const up = () => {
+    window.removeEventListener('mousemove', move);
+    window.removeEventListener('mouseup', up);
+  };
+  window.addEventListener('mousemove', move);
+  window.addEventListener('mouseup', up);
+}
+
+$('tsplit').onclick = () => {
+  // Three, deliberately. Four on a laptop is four things too narrow to read.
+  if (term.panes.length >= 3) return;
+  term.panes.push(newPane());
+  term.active = term.panes.length - 1;
+  buildTerminal();
+};
+
+$('tunsplit').onclick = () => {
+  if (term.panes.length <= 1) return;
+  const gone = term.panes.pop();
+  if (gone && gone.job) delete term.ownerOf[gone.job];
+  term.active = Math.min(term.active, term.panes.length - 1);
+  buildTerminal();
+};
+
+$('tbgimg').onchange = applyTerminalLook;
+$('tbgop').oninput = applyTerminalLook;
+$('tfontup').onclick = () => { term.fontPx = Math.min(20, term.fontPx + 1); applyTerminalLook(); };
+$('tfontdown').onclick = () => { term.fontPx = Math.max(9, term.fontPx - 1); applyTerminalLook(); };
+
 
 /* ── the page, as it really renders ───────────────────────────────────────────────────────── */
 

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAo0HlB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmiIlB,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,CAw6B3C"}
+{"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,CAy8B3C"}

package/dist/web/ui-css.js

@@ -789,34 +789,67 @@ body[data-tint="high"]{filter:contrast(1.14)}
 body[data-tint="soft"]{filter:contrast(.92) brightness(1.04)}
 
 /* ── a terminal ───────────────────────────────────────────────────────────────────────────── */
-.termwrap{display:flex;flex-direction:column;height:100%;min-height:0}
-.termbar{display:flex;gap:9px;align-items:center;padding:11px 14px;background:var(--panel);
+/*
+ * A terminal that reads as one.
+ *
+ * The difference from the box that was here is not decoration. A terminal is a single column of
+ * monospaced text where the command you typed stays above what it printed and the cursor waits at
+ * the bottom of it. So: no card around the output, no border between the prompt and the scrollback,
+ * one background, and the input line styled as the last line of the text rather than as a form
+ * field sitting under it.
+ */
+/*
+ * The terminal view fills what it is given.
+ *
+ * A view scrolls its own overflow, which is right for a document and wrong for a terminal: the
+ * panes ended a third of the way down the window with dead space under them, because nothing told
+ * them how tall they were allowed to be.
+ */
+#terminalview{display:flex;flex-direction:column;overflow:hidden}
+.termtop{display:flex;gap:8px;align-items:center;padding:9px 14px;background:var(--panel);
   border-bottom:1px solid var(--line);flex:0 0 auto}
-.termbar .tprompt{color:var(--cyan);font-family:var(--mono);font-size:14px}
-.termbar input#tcmd{flex:1;min-width:0;padding:8px 11px;border-radius:8px;
-  border:1px solid var(--line);background:var(--panel-2);font-family:var(--mono);font-size:12.5px}
-.termbar .tbg{display:flex;gap:5px;align-items:center;font-size:11.5px;color:var(--muted);
-  white-space:nowrap;cursor:pointer}
-.termbar .trun{padding:8px 15px;border-radius:8px;border:1px solid var(--cyan);color:var(--cyan);
-  background:transparent;cursor:pointer;font-size:12.5px}
-.termbar .trun:hover{background:var(--panel-2)}
-.termsplit{flex:1;display:flex;min-height:0}
-.tjobs{flex:0 0 250px;overflow-y:auto;border-right:1px solid var(--line);background:var(--panel)}
-.tout{flex:1;min-width:0;overflow:auto;padding:12px 14px;font-family:var(--mono);font-size:11.5px;
-  line-height:1.55;white-space:pre-wrap;word-break:break-word}
-.jrow{padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer;font-size:12px}
-.jrow:hover{background:var(--panel-2)}
-.jrow.on{background:var(--panel-2);box-shadow:inset 2px 0 0 var(--cyan)}
-.jrow .jc{font-family:var(--mono);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;
-  white-space:nowrap;color:var(--ink)}
-.jrow .jm{display:flex;gap:7px;align-items:center;margin-top:4px;font-size:10.5px;color:var(--dim)}
-.jrow .js{padding:1px 6px;border-radius:999px;border:1px solid var(--line)}
-.jrow .js.running{color:var(--cyan);border-color:var(--cyan)}
-.jrow .js.exited{color:var(--green)}
-.jrow .js.failed,.jrow .js.killed{color:var(--red)}
-.jrow .jk{margin-left:auto;background:none;border:0;color:var(--dim);cursor:pointer;font-size:11px}
-.jrow .jk:hover{color:var(--red)}
-.tout .oe{color:var(--red)}
+.termttl{font-size:12px;color:var(--muted);letter-spacing:.02em}
+.termgap{flex:0 0 10px}
+.termbtn{padding:4px 10px;border-radius:7px;border:1px solid var(--line-2);color:var(--muted);
+  background:transparent;cursor:pointer;font-size:11.5px}
+.termbtn:hover{border-color:var(--cyan);color:var(--cyan)}
+.termchk{display:flex;gap:5px;align-items:center;font-size:11.5px;color:var(--muted);cursor:pointer}
+.termchk input{accent-color:var(--cyan);cursor:pointer}
+#tbgop{width:88px;accent-color:var(--cyan)}
+
+.termpanes{--term-font:12.5px;--term-bg-strength:0;--term-bg-image:none;
+  flex:1;display:flex;min-height:0;background:var(--bg)}
+.termgrip{flex:0 0 5px;cursor:col-resize;background:var(--line);opacity:.6}
+.termgrip:hover{background:var(--cyan);opacity:1}
+
+.termpane{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;
+  border-left:1px solid transparent}
+.termpane.on{border-left-color:var(--cyan)}
+/*
+ * The backdrop sits behind the text at a weight the reader chooses, and never on top of it.
+ *
+ * Its own layer rather than a background on the pane: an image behind live text needs to be dimmed
+ * without dimming the text, and an opacity on the pane itself would take the characters with it.
+ */
+.termpane::before{content:'';position:absolute;inset:0;pointer-events:none;
+  background-image:var(--term-bg-image);background-size:cover;background-position:center;
+  opacity:var(--term-bg-strength);transition:opacity .18s ease}
+.termscroll{position:relative;flex:1;min-height:0;overflow:auto;padding:12px 14px 4px}
+.termbody{margin:0;font-family:var(--mono);font-size:var(--term-font);line-height:1.55;
+  white-space:pre-wrap;word-break:break-word;color:var(--ink)}
+.termrow{position:relative;display:flex;gap:8px;align-items:center;padding:2px 14px 12px}
+.termps{font-family:var(--mono);font-size:var(--term-font);color:var(--cyan);flex:0 0 auto}
+/*
+ * The input is the last line of the scrollback, not a control under it: no border, no background,
+ * the same font and size as the text above, and a caret that looks like a terminal's.
+ */
+.termin{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);
+  font-family:var(--mono);font-size:var(--term-font);line-height:1.55;caret-color:var(--cyan);
+  padding:0}
+.termin::placeholder{color:var(--dim)}
+.termstop{flex:0 0 auto;padding:2px 9px;border-radius:6px;border:1px solid var(--red);
+  color:var(--red);background:transparent;cursor:pointer;font-size:10.5px}
+.termpanes .oe{color:var(--red)}
 
 /* ── the page, as it really renders ───────────────────────────────────────────────────────── */
 .pvbar{display:flex;gap:8px;align-items:center;padding:11px 14px;background:var(--panel);

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAg5B9B,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAi7B9B,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,CAmW7B"}
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../src/web/ui.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAOH,wBAAgB,IAAI,IAAI,MAAM,CAiX7B"}

package/dist/web/ui.js

@@ -127,21 +127,35 @@ export function page() {
   </div>
 
   <!-- A terminal. Commands you run yourself, in the foreground or left running behind. -->
+  <!--
+    A terminal, not a form with an output box.
+    ==========================================
+    What was here was a job list beside a pane of text: you typed into a field at the top, picked a
+    row, and read the result. Everything about it said "web page". A terminal is a scrollback where
+    the command you typed stays visible above what it printed, the cursor waits at the bottom, and
+    the next thing you type continues the same column of text.
+
+    Up to three panes, because two is the common case for "watch the server, run the tests" and
+    four on a laptop is four things too narrow to read. Each pane is its own shell with its own
+    scrollback and its own history; the dividers between them are draggable.
+  -->
   <div class="view" id="terminalview" hidden>
-    <div class="termwrap">
-      <div class="termbar">
-        <span class="tprompt">$</span>
-        <input id="tcmd" placeholder="npm test, git status, npm run dev&hellip;"
-               autocomplete="off" spellcheck="false">
-        <label class="tbg" title="Leave it running — for a dev server, or anything that does not exit">
-          <input type="checkbox" id="tbackground"> background
-        </label>
-        <button class="trun" id="trun">Run</button>
-      </div>
-      <div class="termsplit">
-        <div class="tjobs" id="tjobs"></div>
-        <div class="tout" id="tout"></div>
-      </div>
+    <div class="termtop">
+      <span class="termttl">Terminal</span>
+      <button type="button" class="termbtn" id="tsplit" title="Add a pane (up to three)">split</button>
+      <button type="button" class="termbtn" id="tunsplit" title="Close the last pane">unsplit</button>
+      <span class="termgap"></span>
+      <label class="termchk" title="A picture behind the text, at a weight that keeps it readable">
+        <input type="checkbox" id="tbgimg"> backdrop
+      </label>
+      <input type="range" id="tbgop" min="4" max="40" value="14" title="How strongly it shows"
+             aria-label="Backdrop strength">
+      <span class="termgap"></span>
+      <button type="button" class="termbtn" id="tfontdown" title="Smaller text">A&minus;</button>
+      <button type="button" class="termbtn" id="tfontup" title="Larger text">A+</button>
+    </div>
+    <div class="termpanes" id="termpanes"></div>
+  </div>
     </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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAuVF,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAqWF,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;EAC7C,YAAY,EAAE;;eAED,CAAC;AAChB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "koneck",
-  "version": "2.56.0",
+  "version": "2.57.0",
   "description": "Kinetically Orchestrated Neural Execution Engine for Code",
   "type": "module",
   "bin": {
@@ -30,6 +30,7 @@
   ],
   "files": [
     "dist/",
+    "img/",
     "README.md",
     "LICENSE"
   ],