accrete-kit 0.1.1 → 0.2.0

package/dist/ui/page/panels/running.js

@@ -0,0 +1,159 @@
+// The running panel: what the process table and open files show, nothing more.
+// Log text is untrusted, so everything goes in through textContent.
+
+function duration(ms) {
+  const s = Math.max(0, Math.round(ms / 1000));
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m`;
+  const h = Math.floor(m / 60);
+  if (h < 48) return `${h}h ${m % 60}m`;
+  return `${Math.floor(h / 24)}d ${h % 24}h`;
+}
+
+function bytes(n) {
+  if (n < 1024) return `${n} B`;
+  if (n < 1048576) return `${Math.round(n / 1024)} KB`;
+  if (n < 1073741824) return `${(n / 1048576).toFixed(1)} MB`;
+  return `${(n / 1073741824).toFixed(2)} GB`;
+}
+
+function memory(mb) {
+  return mb < 1024 ? `${mb} MB` : `${(mb / 1024).toFixed(1)} GB`;
+}
+
+// A span that keeps its age current; see the ticker in mount.
+function since(at) {
+  const span = document.createElement('span');
+  span.dataset.since = at;
+  span.textContent = duration(Date.now() - at);
+  return span;
+}
+
+function node(tag, className, ...parts) {
+  const element = document.createElement(tag);
+  if (className) element.className = className;
+  element.append(...parts.filter((part) => part !== null && part !== undefined));
+  return element;
+}
+
+function displayPath(path, state) {
+  const base = state.scope.find((dir) => path.startsWith(`${dir}/`));
+  if (base) return path.slice(base.length + 1);
+  return path.startsWith(`${state.home}/`) ? `~${path.slice(state.home.length)}` : path;
+}
+
+function baseName(path) {
+  return path.split('/').pop();
+}
+
+function processEvidence(proc, state) {
+  const parts = [];
+  if (proc.pids) {
+    const listed = proc.pids.slice(0, 4).join(', ');
+    parts.push(`${proc.pids.length} alike, pids ${listed}${proc.pids.length > 4 ? ', ...' : ''}, oldest running `, since(proc.startedAt), `, ${memory(proc.rssMb)} together`);
+    return parts;
+  }
+  parts.push(`pid ${proc.pid}, running `, since(proc.startedAt), `, ${proc.cpu}% CPU, ${memory(proc.rssMb)}`);
+  const newest = state.files[proc.writes[0]];
+  if (newest) {
+    const others = proc.writes.length > 1 ? ` and ${proc.writes.length - 1} more` : '';
+    parts.push(`, writing ${baseName(newest.path)}${others}, last write `, since(newest.mtimeMs), ' ago');
+  }
+  return parts;
+}
+
+// The program's name is what reads; the whole path is on hover.
+function shortCommand(command) {
+  const [program, ...args] = command.split(' ');
+  const name = program.split('/').pop().replace(/^-/, '');
+  return [program.startsWith('-') ? `-${name}` : name, ...args].join(' ');
+}
+
+function processRow(proc, state) {
+  const command = node('div', 'command', shortCommand(proc.command));
+  command.title = proc.command;
+  return node(
+    'div',
+    'process',
+    command,
+    node('div', 'evidence', ...processEvidence(proc, state)),
+    ...proc.children.map((child) => processRow(child, state)),
+  );
+}
+
+function growth(file) {
+  if (file.overSeconds < 5) return null;
+  if (file.grew === 0) return `, no growth in ${file.overSeconds}s`;
+  return `, ${file.grew > 0 ? '+' : '-'}${bytes(Math.abs(file.grew))} in ${file.overSeconds}s`;
+}
+
+function fileBlock(file, state) {
+  const facts = [`${bytes(file.size)}`];
+  if (file.binary) facts.push(', binary');
+  if (file.unknown) facts.push(', could not read');
+  const heading = node(
+    'div',
+    'evidence',
+    node('span', 'path', displayPath(file.path, state)),
+    ` ${facts.join('')}${growth(file) ?? ''}, last write `,
+    since(file.mtimeMs),
+    ' ago',
+  );
+  const block = node('div', 'file', heading);
+  if (file.lines?.length) block.append(node('pre', null, file.lines.join('\n')));
+  return block;
+}
+
+function filesOf(proc, seen, out = []) {
+  for (const path of proc.writes) {
+    if (!seen.has(path)) {
+      seen.add(path);
+      out.push(path);
+    }
+  }
+  for (const child of proc.children) filesOf(child, seen, out);
+  return out;
+}
+
+function render(el, state) {
+  if (state.loading) {
+    el.replaceChildren(node('div', 'quiet head', 'Reading the process table.'));
+    return;
+  }
+  const scope = state.scope.map((path) => (path.startsWith(`${state.home}/`) ? `~${path.slice(state.home.length)}` : path)).join(', ');
+  const parts = [node('div', 'quiet head', `${state.roots.length ? '' : 'Nothing running. '}Scope: ${scope}`)];
+  const seen = new Set();
+  for (const root of state.roots) {
+    const paths = filesOf(root, seen);
+    parts.push(node('section', 'tree', processRow(root, state), ...paths.map((path) => fileBlock(state.files[path], state))));
+  }
+  el.replaceChildren(...parts);
+}
+
+export function mount(el, events) {
+  let waiting = null;
+
+  // Do not pull text out from under someone selecting it.
+  const selecting = () => {
+    const selection = getSelection();
+    return selection && !selection.isCollapsed && el.contains(selection.anchorNode);
+  };
+
+  events.addEventListener('running', (event) => {
+    waiting = JSON.parse(event.data);
+    if (selecting()) return;
+    render(el, waiting);
+    waiting = null;
+  });
+
+  setInterval(() => {
+    if (waiting && !selecting()) {
+      render(el, waiting);
+      waiting = null;
+    }
+    for (const span of el.querySelectorAll('[data-since]')) {
+      span.textContent = duration(Date.now() - Number(span.dataset.since));
+    }
+  }, 5000);
+}

package/dist/ui/page/style.css

@@ -0,0 +1,86 @@
+:root {
+  color-scheme: dark;
+  --bg: #16181c;
+  --bg-raised: #1e2127;
+  --fg: #d8dbe0;
+  --muted: #8b919b;
+  --border: #2e323a;
+  --accent: #7aa2f7;
+}
+
+/* The panels follow the system; the terminal stays dark, as its programs expect. */
+@media (prefers-color-scheme: light) {
+  :root {
+    color-scheme: light;
+    --bg: #f7f7f5;
+    --bg-raised: #eeeeeb;
+    --fg: #1f2328;
+    --muted: #646b75;
+    --border: #d8d9d5;
+    --accent: #2f5fd0;
+  }
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+  height: 100%;
+  margin: 0;
+  background: var(--bg);
+  color: var(--fg);
+  font: 13px/1.45 system-ui, sans-serif;
+}
+
+body {
+  display: grid;
+  grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr);
+  height: 100vh;
+  overflow: hidden;
+}
+
+#terminal {
+  min-width: 0;
+  min-height: 0;
+  background: #101114;
+}
+/* The padding belongs on .xterm because the fit addon only subtracts it from there. */
+#terminal .xterm {
+  height: 100%;
+  padding: 6px 0 6px 8px;
+}
+#terminal .xterm-viewport { background-color: #101114; }
+
+aside {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  border-left: 1px solid var(--border);
+}
+
+#tabs {
+  display: flex;
+  flex: none;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-raised);
+}
+#tabs button {
+  padding: 8px 14px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: none;
+  color: var(--muted);
+  font: inherit;
+  cursor: pointer;
+}
+#tabs button[aria-selected="true"] {
+  color: var(--fg);
+  border-bottom-color: var(--accent);
+}
+
+#panels {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+#panels > section { padding: 12px; }

package/dist/ui/page/terminal.js

@@ -0,0 +1,88 @@
+import { Terminal } from '/vendor/xterm.mjs';
+import { FitAddon } from '/vendor/addon-fit.mjs';
+import { WebglAddon } from '/vendor/addon-webgl.mjs';
+import { Unicode11Addon } from '/vendor/addon-unicode11.mjs';
+
+// OSC 52: programs and tmux set the clipboard this way. Writing only; never reads.
+function writeClipboard(data) {
+  const base64 = data.split(';')[1];
+  if (base64 && base64 !== '?') {
+    const text = new TextDecoder().decode(Uint8Array.from(atob(base64), (c) => c.charCodeAt(0)));
+    navigator.clipboard.writeText(text).catch(() => {});
+  }
+  return true;
+}
+
+export function startTerminal(el) {
+  const term = new Terminal({
+    fontFamily: 'ui-monospace, "SF Mono", Menlo, Monaco, monospace',
+    fontSize: 13,
+    scrollback: 10000,
+    macOptionClickForcesSelection: true, // Option+drag selects in the browser even when a program holds the mouse
+    allowProposedApi: true, // for unicode11
+    theme: { background: '#101114' },
+  });
+  const fit = new FitAddon();
+  term.loadAddon(fit);
+  term.loadAddon(new Unicode11Addon());
+  term.unicode.activeVersion = '11'; // the default table makes emoji one cell wide, which tmux and agents do not
+  term.parser.registerOscHandler(52, writeClipboard);
+  term.open(el);
+  try {
+    const webgl = new WebglAddon();
+    webgl.onContextLoss(() => webgl.dispose());
+    term.loadAddon(webgl);
+  } catch {
+    // The DOM renderer takes over.
+  }
+  fit.fit();
+  window.term = term; // a handle for the browser console
+
+  const ws = new WebSocket(`ws://${location.host}/terminal`);
+  ws.binaryType = 'arraybuffer';
+  const send = (data) => ws.readyState === WebSocket.OPEN && ws.send(data);
+  const sendSize = () => send(JSON.stringify({ cols: term.cols, rows: term.rows }));
+
+  const encoder = new TextEncoder();
+  term.onData((data) => send(encoder.encode(data)));
+  term.onBinary((data) => send(Uint8Array.from(data, (c) => c.charCodeAt(0))));
+  term.onResize(sendSize);
+
+  // xterm sends a bare CR for Shift+Enter, the same as Enter, which submits in an
+  // agent. ESC CR is what Claude Code and Codex both take as a newline, in or out of tmux.
+  term.attachCustomKeyEventHandler((event) => {
+    if (event.key !== 'Enter' || !event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) return true;
+    event.preventDefault();
+    if (event.type === 'keydown') send(encoder.encode('\x1b\r'));
+    return false;
+  });
+
+  // Tell the server what xterm has parsed, so it can pause the PTY while this page is behind.
+  let parsed = 0;
+  const writeOutput = (bytes) => {
+    term.write(bytes, () => {
+      parsed += bytes.length;
+      if (parsed < 32 * 1024) return;
+      send(JSON.stringify({ ack: parsed }));
+      parsed = 0;
+    });
+  };
+
+  ws.onopen = sendSize;
+  ws.onmessage = (event) => {
+    if (typeof event.data === 'string') {
+      // Replayed output. Any terminal queries in it were answered the first time,
+      // so xterm's automatic replies must not reach the shell again.
+      term.options.disableStdin = true;
+      term.write(event.data, () => {
+        term.options.disableStdin = false;
+      });
+    } else {
+      writeOutput(new Uint8Array(event.data));
+    }
+  };
+  ws.onclose = () => term.write('\r\n\x1b[2m[disconnected; reload to reattach]\x1b[0m\r\n');
+
+  new ResizeObserver(() => fit.fit()).observe(el);
+  term.focus();
+}