5d99587
@@ -387,6 +387,10 @@
three statements, `standings`). Every region
is live — it swaps itself when a matching event lands, and the dot in the
corner says whether the stream is connected. `?apps=a,b` narrows it to some
apps. Keys: `f` fullscreen, `1`–`4` one region full-bleed, `0` all.
`?wall` is its one wall mode, for a screen across the room that nobody
touches: the same regions in larger type, no key hints, no pointer. The
old big view folded into it — `/big` and every address it had land on
`/board?wall`, keeping `?app=owner/name` as the board's `?apps=`.
Everything links somewhere; nothing needs a click. The board is a wall for
apps you can write to: a public app someone else owns can still appear in
it (`listReposVisibleTo` includes every public repo), but its cost, and
@@ -157,8 +157,7 @@
import {
  runsList,
} from "../web/pages/runs.ts";
import { lookImage } from "../web/pages/looks.ts";
import { boardPage } from "../web/pages/board.ts";
import { bigPage } from "../web/pages/big.ts";
import { bigRedirect, boardPage } from "../web/pages/board.ts";
import {
  agentCreate,
  agentDelete,
@@ -436,8 +435,8 @@
export function buildRouter(): Router<Handler> {
  router.add("GET", "/board", boardPage);
  // One screen for "is everything fine?": what asks the viewer (docs/STUDIO.md).
  router.add("GET", "/asks", asksPage);
  // The big view: the whole forge as one keyboard-first frame.
  router.add("GET", "/big", bigPage);
  // The big view, folded into the board: every old address lands on its wall mode.
  router.add("GET", "/big", bigRedirect);
  router.add("GET", "/search", searchPage);
  // The JS-free half of every destructive action. Two literal segments, so it
  // is registered before /:owner/:name can claim the shape.
@@ -1,222 +0,0 @@
/**
 * The big view's pure half: where a movement lands, what a typed command
 * means, and the key sheet every view is drawn from. No DOM in here, so
 * the page renders the footer and the sheet from the same table the client
 * acts on, and a test can hold them against each other. The client script
 * (`big.ts`) carries these functions by their source (`String(fn)`), so
 * the browser runs exactly what the tests ran.
 */
export type View = "home" | "app" | "run" | "board" | "map" | "list";
export type ListKind = "runs" | "issues" | "pulls" | "map";
// ---- where things are ----
/** The one shape of a big-view address: what is open, and how deep. */
export interface Where {
  readonly app?: string | undefined;
  readonly list?: ListKind | undefined;
  readonly run?: string | undefined;
  readonly view?: "board" | "map" | undefined;
}
export function bigUrl(where: Where): string {
  const q = new URLSearchParams();
  if (where.run !== undefined) q.set("run", where.run);
  else if (where.app !== undefined) {
    q.set("app", where.app);
    if (where.list !== undefined) q.set("list", where.list);
  } else if (where.view !== undefined) q.set("view", where.view);
  const text = q.toString();
  return text === "" ? "/big" : `/big?${text}`;
}
/** One level up: a list or a run to its app, an app or a wall to home. */
export function backUrl(where: Where, runApp?: string): string {
  if (where.run !== undefined)
    return runApp === undefined ? "/big" : bigUrl({ app: runApp });
  if (where.app !== undefined && where.list !== undefined)
    return bigUrl({ app: where.app });
  return "/big";
}
// ---- the focus ----
/**
 * Where a step of `step` rows lands, over `count` rows, from `at` (-1 for
 * no focus yet). A first step down lands on the first row, a first step up
 * on the last; nothing ever wraps, as in vim.
 */
export function moveIndex(count: number, at: number, step: number): number {
  if (count === 0) return -1;
  const next = at < 0 ? (step > 0 ? 0 : count - 1) : at + step;
  return Math.max(0, Math.min(count - 1, next));
}
/** The next pane over, wrapping: tab from the last pane lands on the first. */
export function nextPane(count: number, at: number, step: number): number {
  if (count === 0) return -1;
  return ((((at < 0 ? 0 : at) + step) % count) + count) % count;
}
/** A half page: half the rows a pane shows, and one at least. */
export function halfPage(visible: number): number {
  return Math.max(1, Math.floor(visible / 2));
}
// ---- the command line ----
export interface Command {
  readonly name: string;
  readonly arg?: string | undefined;
  readonly does: string;
}
/** What `:` takes. `:app` is the one that needs a word after it. */
export const COMMANDS: readonly Command[] = [
  { name: "app", arg: "name", does: "open an app" },
  { name: "home", does: "every app" },
  { name: "board", does: "the wall: working, landed, decided, today" },
  { name: "map", does: "every app's map, one lane each" },
  { name: "runs", does: "this app's runs" },
  { name: "issues", does: "this app's open issues" },
  { name: "pulls", does: "this app's open pulls" },
  { name: "help", does: "the key sheet" },
  { name: "q", does: "leave for the web UI" },
];
export type Parsed =
  | { readonly kind: "go"; readonly url: string }
  | { readonly kind: "help" }
  | { readonly kind: "none" }
  | { readonly kind: "error"; readonly message: string };
/** The app a word names, from the ones the viewer can see (`owner/name`). */
export function findApp(
  word: string,
  apps: readonly string[],
): string | undefined {
  const w = word.toLowerCase();
  const exact = apps.find(
    (a) => a.toLowerCase() === w || a.toLowerCase().split("/")[1] === w,
  );
  if (exact !== undefined) return exact;
  return apps.find(
    (a) =>
      a.toLowerCase().startsWith(w) ||
      (a.toLowerCase().split("/")[1] ?? "").startsWith(w),
  );
}
/**
 * What a typed command means. `:app notes` and a bare `:notes` both open
 * the app; the list commands need an app open; anything else is an error
 * that says so, never a guess.
 */
export function parseCommand(
  text: string,
  here: { readonly app?: string | undefined; readonly apps: readonly string[] },
): Parsed {
  const words = text.trim().replace(/^:/, "").split(/\s+/).filter(Boolean);
  const head = (words[0] ?? "").toLowerCase();
  if (head === "") return { kind: "none" };
  const q = (w: Record<string, string>): string => {
    const p = new URLSearchParams(w);
    return `/big?${p.toString()}`;
  };
  if (head === "app") {
    const word = words[1];
    if (word === undefined) return { kind: "error", message: "app which?" };
    const app = findApp(word, here.apps);
    return app === undefined
      ? { kind: "error", message: `no app called ${word}` }
      : { kind: "go", url: q({ app }) };
  }
  if (head === "home") return { kind: "go", url: "/big" };
  if (head === "board") return { kind: "go", url: q({ view: "board" }) };
  if (head === "map")
    return {
      kind: "go",
      url:
        here.app === undefined
          ? q({ view: "map" })
          : q({ app: here.app, list: "map" }),
    };
  if (head === "runs" || head === "issues" || head === "pulls")
    return here.app === undefined
      ? { kind: "error", message: `open an app first, then :${head}` }
      : { kind: "go", url: q({ app: here.app, list: head }) };
  if (head === "help" || head === "?") return { kind: "help" };
  if (head === "q" || head === "quit")
    return {
      kind: "go",
      url: here.app === undefined ? "/" : `/${here.app}`,
    };
  const app = findApp(head, here.apps);
  return app === undefined
    ? { kind: "error", message: `unknown: ${head}` }
    : { kind: "go", url: q({ app }) };
}
// ---- the keys ----
export interface KeyHint {
  /** The chips, as typed: `["j", "k"]`, `["ctrl-d"]`, `["1"–"9"]`. */
  readonly keys: readonly string[];
  readonly does: string;
  /** Shown in the footer, not only on the sheet. */
  readonly foot?: boolean;
}
const MOVE: readonly KeyHint[] = [
  { keys: ["h", "j", "k", "l"], does: "move", foot: true },
  { keys: ["↑", "↓", "←", "→"], does: "move" },
  { keys: ["g", "G"], does: "top, bottom" },
  { keys: ["ctrl-d", "ctrl-u"], does: "half a page" },
  { keys: ["tab", "1"], does: "next pane, pane 1–9" },
  { keys: ["enter"], does: "open", foot: true },
  { keys: ["esc"], does: "back", foot: true },
  { keys: ["o"], does: "open in the web UI, in a new tab" },
  { keys: [":"], does: "command", foot: true },
  { keys: ["/"], does: "filter", foot: true },
  { keys: ["?"], does: "help", foot: true },
  { keys: ["f"], does: "fullscreen" },
];
const BY_VIEW: Readonly<Record<View, readonly KeyHint[]>> = {
  home: [{ keys: ["t"], does: "tell the focused app's crew", foot: true }],
  app: [
    { keys: ["s"], does: "ship the focused green pull", foot: true },
    {
      keys: ["x"],
      does: "stop the focused run, close the focused ask",
      foot: true,
    },
    { keys: ["t"], does: "tell the crew, or the focused ask", foot: true },
    { keys: ["r"], does: "runs", foot: true },
    { keys: ["i"], does: "issues", foot: true },
    { keys: ["p"], does: "pulls", foot: true },
    { keys: ["m"], does: "the map", foot: true },
  ],
  run: [
    { keys: ["t"], does: "steer it", foot: true },
    { keys: ["x"], does: "stop it", foot: true },
  ],
  board: [{ keys: ["0"], does: "every region" }],
  map: [{ keys: ["enter"], does: "open the app" }],
  list: [
    { keys: ["s"], does: "ship a green pull", foot: true },
    { keys: ["x"], does: "close it", foot: true },
  ],
};
/** Every key for a view: the shared movement first, then the view's own. */
export function keysFor(view: View): readonly KeyHint[] {
  return [...MOVE, ...BY_VIEW[view]];
}
/** The footer's line: what fits on one row, in order. */
export function footKeysFor(view: View): readonly KeyHint[] {
  return keysFor(view).filter((k) => k.foot === true);
}
@@ -1,467 +0,0 @@
/**
 * The big view's client: one focus model for the keyboard and a gamepad,
 * one line for a command, a filter or a word to the crew, a small stack of
 * where you came from, and the clocks. Everything a key does is a thing on
 * the page already — a row's link, a row's button, the footer's own chips
 * — so the sheet cannot promise what the page does not have.
 *
 * The pure parts (`big-model.ts`) are carried in by their source, so the
 * browser runs exactly what the tests ran. Nothing here animates: the
 * clock ticks once a second, and the rest waits for a key.
 */
import {
  findApp,
  halfPage,
  moveIndex,
  nextPane,
  parseCommand,
} from "./big-model.ts";
const shared = [moveIndex, nextPane, halfPage, findApp, parseCommand]
  .map(String)
  .join("\n");
export const bigJs = /* js */ `
${shared}
(function () {
  var doc = document;
  var big = doc.getElementById('big');
  if (!big) return;
  var here = big.getAttribute('data-here') || '';
  var apps = (big.getAttribute('data-apps') || '').split(' ').filter(Boolean);
  var where = location.pathname + location.search;
  // ---- memory: this browser's tab remembers where you were ----
  function remember(k, v) { try { sessionStorage.setItem(k, JSON.stringify(v)); } catch (e) {} }
  function recall(k) { try { var v = sessionStorage.getItem(k); return v ? JSON.parse(v) : null; } catch (e) { return null; } }
  // ---- panes and rows ----
  function panes() { return Array.prototype.slice.call(big.querySelectorAll('.big-pane')); }
  function shown(el) { return !el.hasAttribute('data-filtered') && !el.closest('[hidden]'); }
  function rowsOf(pane) { return pane ? Array.prototype.filter.call(pane.querySelectorAll('[data-key]'), shown) : []; }
  function nameOf(pane) { return pane ? pane.getAttribute('data-pane') || '' : ''; }
  var paneAt = 0;
  var keys = {};
  function current() { return panes()[paneAt] || null; }
  function rowByKey(pane, key) {
    var rows = rowsOf(pane);
    for (var i = 0; i < rows.length; i++) if (rows[i].getAttribute('data-key') === key) return rows[i];
    return null;
  }
  function focusedRow() { var p = current(); return p ? rowByKey(p, keys[nameOf(p)] || '') : null; }
  function paint() {
    panes().forEach(function (p, i) {
      p.classList.toggle('is-pane', i === paneAt);
      var k = keys[nameOf(p)] || '';
      Array.prototype.forEach.call(p.querySelectorAll('.is-focus'), function (el) {
        if (el.getAttribute('data-key') !== k) el.classList.remove('is-focus');
      });
      var el = rowByKey(p, k);
      if (el) el.classList.add('is-focus');
    });
    glance();
    remember('big:' + where, { pane: paneAt, keys: keys });
  }
  function settle(pane, row, scroll) {
    if (!pane) return;
    keys[nameOf(pane)] = row ? row.getAttribute('data-key') : '';
    paint();
    if (row && !mode) {
      row.focus({ preventScroll: true });
      if (scroll !== false) row.scrollIntoView({ block: 'nearest' });
    }
  }
  function moveRow(step) {
    var p = current(); if (!p) return;
    var rows = rowsOf(p), r = focusedRow();
    if (rows.length === 0) {
      // A pane with no rows — a transcript — scrolls by the line instead.
      var box = p.querySelector('.run-log') || p.querySelector('.big-scroll');
      if (box) box.scrollTop += step * 40;
      return;
    }
    var next = moveIndex(rows.length, r ? rows.indexOf(r) : -1, step);
    if (next >= 0) settle(p, rows[next]);
  }
  function movePane(step) {
    var all = panes();
    paneAt = nextPane(all.length, paneAt, step);
    var p = current();
    settle(p, focusedRow() || rowsOf(p)[0] || null);
  }
  function toPane(n) {
    if (n >= panes().length) return;
    paneAt = n;
    var p = current();
    settle(p, focusedRow() || rowsOf(p)[0] || null);
  }
  function jump(end) {
    var p = current(); if (!p) return;
    var rows = rowsOf(p);
    settle(p, end === 'top' ? rows[0] || null : rows[rows.length - 1] || null);
  }
  function pageRows(p) {
    var rows = rowsOf(p);
    if (rows.length === 0) return 1;
    var h = rows[0].getBoundingClientRect().height || 24;
    var box = p.querySelector('.big-scroll') || p;
    return Math.max(1, Math.floor(box.clientHeight / h));
  }
  // ---- the glance: beside the apps, the focused app at a glance ----
  function glance() {
    var pane = big.querySelector('[data-pane="glance"]');
    if (!pane) return;
    var k = keys['apps'] || '', on = null;
    Array.prototype.forEach.call(pane.querySelectorAll('[data-for]'), function (g) {
      var hit = g.getAttribute('data-for') === k;
      g.hidden = !hit;
      if (hit) on = g;
    });
    var empty = pane.querySelector('.big-glance-empty');
    if (empty) empty.hidden = !!on;
    var note = pane.querySelector('.big-h-note');
    if (note) note.textContent = on ? on.getAttribute('data-name') || '' : '';
  }
  // ---- navigation: a stack of where you came from ----
  function go(url) {
    var stack = recall('big:stack') || [];
    stack.push(where);
    if (stack.length > 30) stack.shift();
    remember('big:stack', stack);
    location.href = url;
  }
  function back() {
    var stack = recall('big:stack') || [];
    var prev = stack.pop();
    remember('big:stack', stack);
    location.href = prev && prev !== where ? prev : big.getAttribute('data-back') || '/big';
  }
  // What a row opens: where it says, else — for a run — its page here,
  // else the link it is or holds.
  function hrefOf(row) {
    if (row.getAttribute('data-href')) return row.getAttribute('data-href');
    var key = row.getAttribute('data-key') || '';
    if (key.indexOf('run:') === 0) return '/big?run=' + encodeURIComponent(key.slice(4));
    if (row.tagName.toLowerCase() === 'a') return row.getAttribute('href');
    var a = row.querySelector('a[href]');
    return a ? a.getAttribute('href') : null;
  }
  function openRow() {
    var r = focusedRow(); if (!r) return;
    var href = hrefOf(r); if (!href) return;
    if (href.indexOf('/big') === 0) go(href); else location.href = href;
  }
  function openWeb() {
    var r = focusedRow();
    var href = r ? r.getAttribute('data-open') || hrefOf(r) : big.getAttribute('data-open');
    if (href && href.indexOf('/big') !== 0) window.open(href, '_blank', 'noopener');
  }
  // ---- actions: a key presses a real control ----
  function hint(text, tone) {
    var el = doc.getElementById('big-hint'); if (!el) return;
    el.textContent = text || '';
    if (tone) el.setAttribute('data-tone', tone); else el.removeAttribute('data-tone');
    if (text) setTimeout(function () { if (el.textContent === text) { el.textContent = ''; el.removeAttribute('data-tone'); } }, 6000);
  }
  function act(key) {
    var r = focusedRow(), p = current();
    var btn = (r && r.querySelector('[data-act="' + key + '"]')) || (p && p.querySelector('.big-h [data-act="' + key + '"], .big-run [data-act="' + key + '"]'));
    if (!btn) return false;
    btn.click();
    return true;
  }
  function post(url, body) {
    return fetch(url, { method: 'POST', body: body, headers: { accept: 'application/json' }, credentials: 'same-origin' })
      .then(function (r) {
        var type = r.headers.get('content-type') || '';
        if (type.indexOf('application/json') !== -1)
          return r.json().then(function (out) { return { ok: !!out.ok, message: out.flash || out.error || (out.ok ? 'done' : 'that could not be done') }; });
        return { ok: r.ok, message: r.ok ? 'done' : 'that could not be done (' + r.status + ')' };
      }, function () { return { ok: false, message: 'the forge could not be reached' }; });
  }
  // A pane's form posts in place; the stream brings what changed. The
  // run's own composer keeps its own script.
  big.addEventListener('submit', function (ev) {
    var form = ev.target;
    if (!form || form.id === 'big-line' || form.id === 'run-steer' || !window.fetch) return;
    ev.preventDefault();
    var body = new FormData(form);
    var pressed = ev.submitter;
    if (pressed && pressed.name) body.append(pressed.name, pressed.value);
    var row = pressed && pressed.closest ? pressed.closest('[data-key]') : null;
    if (row) row.setAttribute('data-busy', '');
    hint('…');
    post(form.getAttribute('action') || where, body).then(function (out) {
      if (row) row.removeAttribute('data-busy');
      hint(out.message, out.ok ? 'success' : 'danger');
    });
  });
  // ---- the line: a command, a filter, or a word ----
  var line = doc.getElementById('big-line');
  var input = doc.getElementById('big-line-in');
  var mark = doc.getElementById('big-line-mark');
  var note = doc.getElementById('big-line-note');
  var mode = null;
  var filters = {};
  function openLine(m, action, placeholder) {
    if (!line || !input) return;
    mode = m;
    line.hidden = false;
    line.setAttribute('data-mode', m);
    line.setAttribute('action', action || '');
    if (mark) mark.textContent = m === 'cmd' ? ':' : m === 'filter' ? '/' : '\\u203a';
    input.value = m === 'filter' ? filters[nameOf(current())] || '' : '';
    input.placeholder = placeholder || '';
    if (note) { note.textContent = ''; note.removeAttribute('data-tone'); }
    input.focus();
  }
  function closeLine() {
    mode = null;
    if (line) line.hidden = true;
    if (input) input.blur();
    var r = focusedRow();
    if (r) r.focus({ preventScroll: true });
  }
  function applyFilter(p) {
    if (!p) return;
    var q = (filters[nameOf(p)] || '').toLowerCase();
    Array.prototype.forEach.call(p.querySelectorAll('[data-key]'), function (row) {
      var hit = q === '' || (row.textContent || '').toLowerCase().indexOf(q) !== -1;
      if (hit) row.removeAttribute('data-filtered'); else row.setAttribute('data-filtered', '');
    });
    var h = p.querySelector('.big-h');
    if (h) h.setAttribute('data-q', q);
    if (!focusedRow()) settle(p, rowsOf(p)[0] || null, false);
  }
  function fail(message) { if (note) { note.textContent = message; note.setAttribute('data-tone', 'danger'); } }
  function submitLine() {
    if (!input) return;
    var text = input.value;
    if (mode === 'cmd') {
      var parsed = parseCommand(text, { app: here || undefined, apps: apps });
      if (parsed.kind === 'go') { closeLine(); go(parsed.url); }
      else if (parsed.kind === 'help') { closeLine(); openHelp(); }
      else if (parsed.kind === 'error') fail(parsed.message);
      else closeLine();
    } else if (mode === 'say') {
      var said = text.trim();
      if (!said) return;
      input.disabled = true;
      post(line.getAttribute('action'), new URLSearchParams({ text: said })).then(function (out) {
        input.disabled = false;
        if (out.ok) { closeLine(); hint(out.message, 'success'); } else { fail(out.message); input.focus(); }
      });
    } else closeLine();
  }
  if (line) line.addEventListener('submit', function (e) { e.preventDefault(); submitLine(); });
  if (input) input.addEventListener('input', function () {
    if (mode !== 'filter') return;
    var p = current();
    filters[nameOf(p)] = input.value;
    applyFilter(p);
  });
  function say() {
    var steer = doc.getElementById('steer-text');
    if (steer) { steer.focus(); return; }
    var r = focusedRow(), p = current();
    var action = (r && r.getAttribute('data-say')) || (p && p.getAttribute('data-say')) || big.getAttribute('data-say');
    if (!action) { hint('nothing here takes a word', 'danger'); return; }
    var who = (r && r.getAttribute('data-say-who')) || (p && p.getAttribute('data-say-who')) || big.getAttribute('data-say-who') || 'the crew';
    openLine('say', action, 'tell ' + who + ' \\u2014 enter sends, esc keeps quiet');
  }
  // ---- the sheet ----
  function openHelp() {
    var dlg = doc.getElementById('big-help');
    if (!dlg || !dlg.showModal) return;
    if (dlg.open) dlg.close(); else dlg.showModal();
  }
  function fullscreen() {
    if (doc.fullscreenElement) { if (doc.exitFullscreen) doc.exitFullscreen(); }
    else if (doc.documentElement.requestFullscreen) doc.documentElement.requestFullscreen().catch(function () {});
  }
  // ---- keys ----
  function chipGo(key) {
    var chip = doc.querySelector('#big-foot [data-k="' + key + '"][data-go]');
    if (!chip) return false;
    go(chip.getAttribute('data-go'));
    return true;
  }
  function handle(key, shift) {
    switch (key) {
      case 'j': case 'ArrowDown': moveRow(1); return true;
      case 'k': case 'ArrowUp': moveRow(-1); return true;
      case 'h': case 'ArrowLeft': movePane(-1); return true;
      case 'l': case 'ArrowRight': movePane(1); return true;
      case 'Tab': movePane(shift ? -1 : 1); return true;
      case 'g': jump('top'); return true;
      case 'G': jump('bottom'); return true;
      case 'ctrl-d': moveRow(halfPage(pageRows(current()))); return true;
      case 'ctrl-u': moveRow(-halfPage(pageRows(current()))); return true;
      case 'Enter': openRow(); return true;
      case 'Escape': case 'Backspace': back(); return true;
      case ':': openLine('cmd', '', 'app <name> \\u00b7 home \\u00b7 board \\u00b7 map \\u00b7 runs \\u00b7 issues \\u00b7 pulls \\u00b7 q'); return true;
      case '/': openLine('filter', '', 'filter this pane as you type'); return true;
      case '?': openHelp(); return true;
      case 'f': fullscreen(); return true;
      case 'o': openWeb(); return true;
      case 't': say(); return true;
      case 's': case 'x': if (!act(key)) hint('nothing focused takes ' + key, 'danger'); return true;
      default:
        if (/^[1-9]$/.test(key)) { toPane(Number(key) - 1); return true; }
        if (/^[a-z]$/.test(key)) return chipGo(key);
        return false;
    }
  }
  function typing(t) { return !!(t && t.matches && t.matches('input, textarea, select, [contenteditable]')); }
  doc.addEventListener('keydown', function (e) {
    if (e.metaKey || e.altKey) return;
    var t = e.target;
    var dlg = doc.querySelector('dialog[open]');
    if (dlg) {
      if (dlg.id === 'big-help' && (e.key === 'Escape' || e.key === '?')) { e.preventDefault(); e.stopPropagation(); dlg.close(); }
      return;
    }
    if (typing(t)) {
      if (e.key === 'Escape') {
        e.preventDefault(); e.stopPropagation();
        if (mode) closeLine(); else { t.blur(); var r = focusedRow(); if (r) r.focus({ preventScroll: true }); }
      }
      return;
    }
    if (e.ctrlKey) {
      if (e.key === 'd' || e.key === 'u') { e.preventDefault(); e.stopPropagation(); handle('ctrl-' + e.key, false); }
      return;
    }
    if (handle(e.key, e.shiftKey)) { e.preventDefault(); e.stopPropagation(); }
  }, true);
  // A click lands the focus where the pointer is; the link or button under
  // it still does its own thing. A tell chip opens the line for its row.
  big.addEventListener('mousedown', function (e) {
    var row = e.target && e.target.closest ? e.target.closest('[data-key]') : null;
    if (!row) return;
    var pane = row.closest('.big-pane');
    var at = panes().indexOf(pane);
    if (at !== -1) { paneAt = at; settle(pane, row, false); }
  });
  big.addEventListener('click', function (e) {
    var chip = e.target && e.target.closest ? e.target.closest('[data-say-open]') : null;
    if (chip) { e.preventDefault(); say(); }
  });
  // ---- the gamepad: the same moves, from the couch ----
  var BTN = { 0: 'Enter', 1: 'Escape', 3: '?', 4: 'h', 5: 'l', 8: '/', 9: ':', 12: 'k', 13: 'j', 14: 'h', 15: 'l' };
  var held = {}, loop = null;
  function fire(k) {
    if (mode) { if (k === 'Escape') closeLine(); else if (k === 'Enter') submitLine(); return; }
    var dlg = doc.querySelector('dialog[open]');
    if (dlg) { if (k === 'Escape' || k === '?') dlg.close(); return; }
    handle(k, false);
  }
  function poll() {
    var list = navigator.getGamepads ? navigator.getGamepads() : [];
    var any = false, now = Date.now();
    for (var i = 0; i < list.length; i++) {
      var gp = list[i]; if (!gp) continue;
      any = true;
      var down = {};
      for (var b = 0; b < gp.buttons.length; b++) if (gp.buttons[b].pressed && BTN[b]) down[BTN[b]] = true;
      var ax = gp.axes[0] || 0, ay = gp.axes[1] || 0;
      if (ay < -0.5) down['k'] = true; else if (ay > 0.5) down['j'] = true;
      if (ax < -0.5) down['h'] = true; else if (ax > 0.5) down['l'] = true;
      Object.keys(down).forEach(function (k) {
        var h = held[k];
        if (!h) { held[k] = { next: now + 380 }; fire(k); }
        else if (now >= h.next && 'jkhl'.indexOf(k) !== -1) { h.next = now + 110; fire(k); }
      });
      Object.keys(held).forEach(function (k) { if (!down[k]) delete held[k]; });
    }
    if (any) loop = requestAnimationFrame(poll); else { loop = null; big.removeAttribute('data-pad'); }
  }
  window.addEventListener('gamepadconnected', function () {
    big.setAttribute('data-pad', '');
    if (loop === null) loop = requestAnimationFrame(poll);
  });
  // ---- clocks: the corner, every elapsed, every relative time ----
  var clock = doc.getElementById('big-clock');
  function two(n) { return (n < 10 ? '0' : '') + n; }
  function span(s) {
    return s < 60 ? s + 's'
      : s < 3600 ? Math.floor(s / 60) + 'm ' + two(s % 60) + 's'
      : Math.floor(s / 3600) + 'h ' + two(Math.floor((s % 3600) / 60)) + 'm';
  }
  function ago(s) {
    if (s < 60) return 'just now';
    if (s < 3600) return Math.floor(s / 60) + 'm ago';
    if (s < 86400) return Math.floor(s / 3600) + 'h ago';
    if (s < 86400 * 30) return Math.floor(s / 86400) + 'd ago';
    if (s < 86400 * 365) return Math.floor(s / (86400 * 30)) + 'mo ago';
    return Math.floor(s / (86400 * 365)) + 'y ago';
  }
  function tick() {
    var now = Date.now();
    if (clock) {
      var d = new Date(now);
      clock.textContent = two(d.getHours()) + ':' + two(d.getMinutes());
      clock.setAttribute('datetime', d.toISOString());
    }
    Array.prototype.forEach.call(big.querySelectorAll('[data-started]:not(#run-elapsed)'), function (el) {
      var t = Date.parse(el.getAttribute('data-started') || '');
      if (t) el.textContent = span(Math.max(0, Math.round((now - t) / 1000)));
    });
    Array.prototype.forEach.call(big.querySelectorAll('time[datetime]'), function (el) {
      if (el === clock) return;
      var t = Date.parse(el.getAttribute('datetime') || '');
      if (t) el.textContent = ago(Math.max(0, (now - t) / 1000));
    });
  }
  window.setInterval(tick, 1000);
  tick();
  // ---- live: the dot, and a swap that keeps the focus where it was ----
  doc.addEventListener('forge:live', function (e) {
    var live = doc.getElementById('big-live');
    if (live && e.detail) live.setAttribute('data-state', e.detail.state);
  });
  doc.addEventListener('forge:swapped', function (e) {
    var pane = e.target && e.target.closest ? e.target.closest('.big-pane') : null;
    if (pane) {
      applyFilter(pane);
      pane.setAttribute('data-fresh', '');
      window.setTimeout(function () { pane.removeAttribute('data-fresh'); }, 1500);
    }
    paint();
    tick();
    var r = focusedRow(), p = current();
    if (!r && p) settle(p, rowsOf(p)[0] || null, false);
    else if (r && !mode && doc.activeElement !== r && !typing(doc.activeElement)) r.focus({ preventScroll: true });
  });
  // ---- the map pans to where the crew is ----
  (function () {
    var working = big.querySelector('.map-node[data-state="working"]');
    if (!working) return;
    var was = doc.activeElement;
    working.focus({ preventScroll: true });
    if (was && was !== doc.body && was.focus) was.focus({ preventScroll: true }); else working.blur();
  })();
  // ---- restore: the pane and row this tab was on here ----
  (function () {
    var saved = recall('big:' + where);
    if (saved) {
      paneAt = Math.min(saved.pane || 0, Math.max(0, panes().length - 1));
      keys = saved.keys || {};
    }
    var p = current();
    settle(p, focusedRow() || rowsOf(p)[0] || null, false);
  })();
})();
`;
@@ -2045,8 +2045,8 @@
export const liveRegionsJs = /* js */ `
      var mine = document.getElementById(id);
      var theirs = fresh.getElementById(id);
      if (!mine || !theirs) return;
      // A card mid-action (the big view marks it data-busy while its post
      // is in flight) is never pulled out from under the click; the next
      // A region mid-action (something in it marked data-busy while its
      // post is in flight) is never pulled out from under the click; the next
      // matching event tries the swap again.
      if (mine.querySelector('[data-busy]')) return;
      var active = document.activeElement;
@@ -1,1303 +0,0 @@
/**
 * The big view: the whole forge as one full-screen, keyboard-first frame
 * — a header line, a body of panes, a footer line of keys — with the feel
 * of k9s, lazygit and btop, in the browser, and from a couch with a
 * gamepad. A second front door, not a re-skin: every pane reads the same
 * tables the studio and the board read, and every action is one key that
 * presses a real control.
 *
 * Views are server-rendered pages under one shell (`/big`, `?app=`,
 * `?run=`, `?view=board|map`, `&list=runs|issues|pulls|map`); the client
 * script is the same on every one, the focus is remembered per address,
 * and the live regions keep the page fresh in place.
 */
import { getAppByRepo, appsForRepos } from "../../core/apps.ts";
import { listDecisionsForRepos } from "../../core/decisions.ts";
import { criticalPath, readyNow, repoGraph } from "../../core/dependencies.ts";
import {
  getIssue,
  getIssueById,
  getIssuesByIds,
  listIssues,
  type Issue,
} from "../../core/issues.ts";
import { listPulls, mergedPullsForRepos, type Pull } from "../../core/pulls.ts";
import {
  canRead,
  canWrite,
  getRepo,
  getRepoById,
  listReposVisibleTo,
  type Repo,
} from "../../core/repos.ts";
import {
  getRun,
  isTerminal,
  latestRunsForIssues,
  listActiveRuns,
  listRuns,
  type Run,
} from "../../core/runs.ts";
import { getUsersByIds, type User } from "../../core/users.ts";
import { autonomyStatus } from "../../crew/autonomy.ts";
import type { Ctx } from "../../http/context.ts";
import {
  backUrl,
  bigUrl,
  COMMANDS,
  footKeysFor,
  keysFor,
  type ListKind,
  type View,
  type Where,
} from "../big-model.ts";
import { bigJs } from "../big.ts";
import { notFoundPage, repoBase, signInFirst } from "../chrome.ts";
import { liveRegionsJs, runLogJs } from "../client.ts";
import { html, when, type Html } from "../html.ts";
import { page } from "../layout.ts";
import { bigCss } from "../style/big.ts";
import { avatar, runStateBadge, time } from "../ui.ts";
import { boardCss, boardRegions, boardScope } from "./board.ts";
import {
  countWords,
  drawMap,
  drawingWidth,
  emphasisFor,
  globalLanes,
  laneHtml,
  layout,
  mapCss,
  mapViewJs,
  marksFor,
  wordFor as mapWordFor,
} from "./map.ts";
import {
  costText,
  durationText,
  logLine,
  reasonWords,
  runTitle,
} from "./runs.ts";
import { runLog } from "../../actions/runs.ts";
// ---- words ----
const money = (n: number): string => `$${n.toFixed(2)}`;
const pct = (n: number): number =>
  Math.max(0, Math.min(100, Math.round(n * 100)));
type RunWord = "working" | "queued" | "paused";
function runWord(run: Run): RunWord {
  if (run.state === "running") return "working";
  return run.notBefore === null ? "queued" : "paused";
}
const startedAt = (r: Run): string => r.startedAt ?? r.createdAt;
/** Why a run exists, as a person reads it beside its clock. */
function why(run: Run): string {
  switch (run.reason) {
    case "assigned":
      return "building it";
    case "feedback":
      return "on what you said";
    case "check_failed":
      return "fixing the check";
    case "conflict":
      return "catching up with main";
    case "review":
      return "reviewing it";
    case "":
      return "working";
    default:
      return run.reason.replace(/_/g, " ");
  }
}
const KIND_WORDS = {
  next: "next issue",
  land: "landing",
  retry: "try again",
  lean: "a lean",
};
// ---- the shell ----
interface Shell {
  readonly view: View;
  readonly layout: "home" | "app" | "run" | "wall" | "lanes" | "list";
  readonly title: string;
  /** After `home`: the path down to here. */
  readonly crumbs: readonly { label: string; href?: string }[];
  readonly panes: Html;
  readonly where: Where;
  /** The app open here, `owner/name`, for the command line and the footer. */
  readonly here?: string | undefined;
  readonly back: string;
  /** Where a word goes when nothing more specific is focused. */
  readonly say?: string | undefined;
  readonly sayWho?: string | undefined;
  /** The web UI's page for this view, for `o`. */
  readonly open?: string | undefined;
  readonly apps: readonly string[];
  readonly css?: string | undefined;
  readonly js?: string | undefined;
}
const chips = (keys: readonly string[]): Html =>
  html`${keys.map((k) => html`<kbd>${k}</kbd>`)}`;
/** The footer: what fits on one line. A letter that opens a view carries where. */
function foot(s: Shell): Html {
  const go: Record<string, string> = {};
  if (s.here !== undefined) {
    go["r"] = bigUrl({ app: s.here, list: "runs" });
    go["i"] = bigUrl({ app: s.here, list: "issues" });
    go["p"] = bigUrl({ app: s.here, list: "pulls" });
    go["m"] = bigUrl({ app: s.here, list: "map" });
  }
  return html`<footer class="big-foot" id="big-foot">
    ${footKeysFor(s.view).map((k) => {
      const first = k.keys[0] ?? "";
      const target = k.keys.length === 1 ? go[first] : undefined;
      return html`<span
        class="big-key"
        data-k="${first}"
        ${target === undefined ? null : html`data-go="${target}"`}
        >${chips(k.keys)}${k.does}</span
      >`;
    })}
    <span class="spacer"></span>
    <span class="big-foot-view">${s.view}</span>
  </footer>`;
}
/** The sheet `?` opens: every key for this view, then the command line's words. */
function sheet(s: Shell): Html {
  return html`<dialog class="modal big-help" id="big-help" aria-label="Keys">
    <div class="big-help-cols">
      <div>
        <h2>Keys · ${s.view}</h2>
        <table>
          <tbody>
            ${keysFor(s.view).map(
              (k) =>
                html`<tr>
                  <td>${chips(k.keys)}</td>
                  <td>${k.does}</td>
                </tr>`,
            )}
          </tbody>
        </table>
      </div>
      <div>
        <h2>Commands · <kbd>:</kbd></h2>
        <table>
          <tbody>
            ${COMMANDS.map(
              (c) =>
                html`<tr>
                  <td>
                    <span class="big-cmd"
                      >:${c.name}${c.arg === undefined
                        ? null
                        : html` <i>${c.arg}</i>`}</span
                    >
                  </td>
                  <td>${c.does}</td>
                </tr>`,
            )}
          </tbody>
        </table>
        <p>
          A gamepad works too: the d-pad and left stick move, A opens, B goes
          back, Y is this sheet, the bumpers switch panes.
        </p>
      </div>
    </div>
  </dialog>`;
}
function shell(ctx: Ctx, s: Shell): Response {
  const body = html`<div
    class="big"
    id="big"
    data-view="${s.view}"
    data-back="${s.back}"
    data-here="${s.here ?? ""}"
    data-apps="${s.apps.join(" ")}"
    ${when(s.say, (v) => html`data-say="${v}"`)}
    ${when(s.sayWho, (v) => html`data-say-who="${v}"`)}
    ${when(s.open, (v) => html`data-open="${v}"`)}
  >
    <header class="big-top">
      <a class="big-brand" href="/"><span class="mark"></span>forge</a>
      <nav class="big-crumbs" aria-label="Where you are">
        <a href="/big">home</a>
        ${s.crumbs.map(
          (c, i) =>
            html`<span aria-hidden="true">›</span>${i === s.crumbs.length - 1 ||
              c.href === undefined
                ? html`<b>${c.label}</b>`
                : html`<a href="${c.href}">${c.label}</a>`}`,
        )}
      </nav>
      <span class="spacer"></span>
      <span
        class="big-hint"
        id="big-hint"
        role="status"
        aria-live="polite"
      ></span>
      <span class="big-pad" aria-hidden="true">gamepad</span>
      <span
        class="big-live"
        id="big-live"
        data-state="connecting"
        title="The live stream"
        ><span class="big-dot"></span
      ></span>
      <time class="big-clock" id="big-clock"></time>
    </header>
    <div class="big-body" data-layout="${s.layout}">${s.panes}</div>
    ${foot(s)}
    <form class="big-line" id="big-line" method="post" action="" hidden>
      <span class="big-line-mark" id="big-line-mark" aria-hidden="true">:</span>
      <label class="sr-only" for="big-line-in">The line</label>
      <input
        class="big-line-in"
        id="big-line-in"
        name="text"
        autocomplete="off"
        spellcheck="false"
      />
      <span class="big-line-note" id="big-line-note"></span>
    </form>
    ${sheet(s)}
  </div>`;
  return page({
    ctx,
    title: s.title,
    body,
    bare: true,
    theme: "dark",
    styleCss: `${bigCss}\n${s.css ?? ""}`,
    scriptJs: `${liveRegionsJs}\n${s.js ?? ""}\n${bigJs}`,
  });
}
/** One pane: a numbered heading, then rows that scroll. */
function pane(o: {
  name: string;
  n: number;
  title: string;
  count?: number | undefined;
  note?: Html | undefined;
  body: Html;
  live?: string | undefined;
  repo?: Repo | undefined;
  say?: string | undefined;
  sayWho?: string | undefined;
  cls?: string | undefined;
}): Html {
  return html`<section
    class="big-pane${o.cls === undefined ? "" : ` ${o.cls}`}"
    data-pane="${o.name}"
    data-n="${o.n}"
    id="big-${o.name}"
    ${when(o.live, (v) => html`data-live="${v}"`)}
    ${when(o.repo, (r) => html`data-live-repo="${r.ownerName}/${r.name}"`)}
    ${when(o.say, (v) => html`data-say="${v}"`)}
    ${when(o.sayWho, (v) => html`data-say-who="${v}"`)}
    aria-labelledby="big-${o.name}-h"
  >
    <h2 class="big-h" id="big-${o.name}-h">
      <kbd aria-hidden="true">${o.n}</kbd>${o.title}
      ${when(
        o.count !== undefined && o.count > 0,
        () => html`<span class="big-count">${o.count}</span>`,
      )}
      <span class="spacer"></span>
      ${when(o.note, (v) => html`<span class="big-h-note">${v}</span>`)}
    </h2>
    <div class="big-scroll">${o.body}</div>
  </section>`;
}
const rows = (items: Html[], quiet: string): Html =>
  items.length === 0
    ? html`<p class="big-quiet">${quiet}</p>`
    : html`<ul class="big-rows">
        ${items}
      </ul>`;
/** A `<kbd>` chip on a control, so the key and the button are one thing. */
const act = (key: string, label: string, form: string, lead = false): Html =>
  html`<button
    class="big-act"
    type="submit"
    form="${form}"
    data-act="${key}"
    ${lead ? html`data-lead=""` : null}
  >
    <kbd>${key}</kbd>${label}
  </button>`;
const sayChip = (lead = false): Html =>
  html`<button
    class="big-act"
    type="button"
    data-say-open=""
    ${lead ? html`data-lead=""` : null}
  >
    <kbd>t</kbd>tell
  </button>`;
// ---- the route ----
/** The apps the viewer can see, as repositories: the big view's whole world. */
function visibleApps(ctx: Ctx, user: User): Repo[] {
  const repos = listReposVisibleTo(ctx.app.db, user, { limit: 200 });
  const records = appsForRepos(
    ctx.app.db,
    repos.map((r) => r.id),
  );
  return repos.filter((r) => records.has(r.id));
}
const slug = (repo: Repo): string => `${repo.ownerName}/${repo.name}`;
const isList = (v: string | null): v is ListKind =>
  v === "runs" || v === "issues" || v === "pulls" || v === "map";
/** GET /big — signed in. `?app=owner/name`, `?run=id`, `?view=board|map`. */
export function bigPage(ctx: Ctx): Response {
  const user = ctx.auth.user;
  if (!user) return signInFirst(ctx);
  const q = ctx.url.searchParams;
  const apps = visibleApps(ctx, user);
  const names = apps.map(slug);
  const runId = q.get("run");
  if (runId !== null) {
    const run = getRun(ctx.app.db, runId);
    const repo =
      run === undefined ? undefined : getRepoById(ctx.app.db, run.repoId);
    if (!run || !repo || !canRead(ctx.app.db, repo, user))
      return notFoundPage(ctx);
    return runView(ctx, user, repo, run, names);
  }
  const appName = q.get("app");
  if (appName !== null) {
    const [owner, name] = appName.split("/");
    const repo = owner && name ? getRepo(ctx.app.db, owner, name) : undefined;
    if (!repo || !canRead(ctx.app.db, repo, user)) return notFoundPage(ctx);
    if (getAppByRepo(ctx.app.db, repo.id) === undefined)
      return notFoundPage(ctx);
    const list = q.get("list");
    return isList(list)
      ? listView(ctx, user, repo, list, names)
      : appView(ctx, user, repo, names);
  }
  const view = q.get("view");
  if (view === "board") return boardView(ctx, user, apps, names);
  if (view === "map") return mapView(ctx, user, names);
  return homeView(ctx, user, apps, names);
}
// ---- home: every app, and the focused one at a glance ----
function homeView(
  ctx: Ctx,
  user: User,
  apps: readonly Repo[],
  names: readonly string[],
): Response {
  const db = ctx.app.db;
  const ids = apps.map((r) => r.id);
  const running = listActiveRuns(db, ids);
  const actors = getUsersByIds(
    db,
    running.map((r) => r.actorId).filter((id): id is string => id !== null),
  );
  const about = getIssuesByIds(
    db,
    running.map((r) => r.issueId).filter((id): id is string => id !== null),
  );
  const runsBy = new Map<string, Run[]>();
  for (const r of running)
    runsBy.set(r.repoId, [...(runsBy.get(r.repoId) ?? []), r]);
  const working = running.filter((r) => r.state === "running").length;
  const waiting = running.length - working;
  const appRows = apps.map((repo) => {
    const key = `app:${slug(repo)}`;
    const flying = runsBy.get(repo.id) ?? [];
    const working = flying.filter((r) => r.state === "running").length;
    const status =
      repo.autonomy === "off" ? undefined : autonomyStatus(ctx.app, repo);
    const share =
      status === undefined || status.ceilingUsd <= 0
        ? 0
        : status.spentTodayUsd / status.ceilingUsd;
    return html`<li
      class="big-row"
      data-kind="app"
      data-key="${key}"
      data-href="${bigUrl({ app: slug(repo) })}"
      data-open="${repoBase(repo)}"
      data-say="${repoBase(repo)}/tell"
      data-say-who="${repo.name}'s crew"
      tabindex="-1"
    >
      <span class="big-t"
        >${repo.name}${repo.description === ""
          ? null
          : html` <small>· ${repo.description}</small>`}</span
      >
      <span
        class="big-word"
        data-word="${status?.paused === "ceiling" ? "paused" : repo.autonomy}"
        >${status?.paused === "ceiling" ? "at ceiling" : repo.autonomy}</span
      >
      <span
        class="big-n"
        ${working === 0 ? html`data-zero=""` : html`data-hot=""`}
        ><b>${working}</b> working</span
      >
      ${status === undefined
        ? html`<span class="big-spend"><span></span><span>—</span></span>`
        : html`<span class="big-spend"
            ><span class="big-bar"
              ><span
                class="big-fill"
                data-w="${pct(share)}"
                ${share >= 0.9 ? html`data-near=""` : null}
              ></span></span
            ><span
              >${money(status.spentTodayUsd)} /
              $${status.ceilingUsd.toFixed(0)}</span
            ></span
          >`}
    </li>`;
  });
  const glances = apps.map((repo) => {
    const base = repoBase(repo);
    const flying = runsBy.get(repo.id) ?? [];
    const landed = mergedPullsForRepos(db, [repo.id], 3);
    const decided = listDecisionsForRepos(db, [repo.id], 3);
    const decidedAbout = getIssuesByIds(
      db,
      decided.map((d) => d.issueId).filter((id): id is string => id !== null),
    );
    const status =
      repo.autonomy === "off" ? undefined : autonomyStatus(ctx.app, repo);
    const direction =
      repo.autonomyDirection.split("\n")[0]?.trim() ||
      repo.description ||
      "No direction yet.";
    return html`<div
      class="big-glance"
      data-for="app:${slug(repo)}"
      data-name="${repo.name}"
      hidden
    >
      <p class="big-glance-dir">
        ${direction}
        <small
          >${repo.autonomy === "off"
            ? "not running on its own"
            : `${repo.autonomy} · ${money(status?.spentTodayUsd ?? 0)} of $${(status?.ceilingUsd ?? 0).toFixed(0)} today · ${status?.active ?? 0} of ${status?.slots ?? 0} slots`}</small
        >
      </p>
      <h3 class="big-sub">Working</h3>
      ${rows(
        flying.map((r) => runRow(base, r, actors, about, undefined)),
        "Nobody is working here right now.",
      )}
      <h3 class="big-sub">Landed</h3>
      ${rows(
        landed.map((p) => landedRow(base, p)),
        "Nothing has shipped yet.",
      )}
      <h3 class="big-sub">Decided</h3>
      ${rows(
        decided.map((d) => decisionRow(db, repo, d, decidedAbout)),
        "Nothing decided yet.",
      )}
    </div>`;
  });
  const live = "run.*,pull.*,issue.*,check.*";
  const panes = html`${pane({
    name: "apps",
    n: 1,
    title: "Apps",
    count: apps.length,
    note: html`${working}
    working${waiting > 0 ? html` · ${waiting} waiting` : null}`,
    body: rows(appRows, "No apps yet. Make one at /apps/new."),
    live,
  })}
  ${pane({
    name: "glance",
    n: 2,
    title: "At a glance",
    body: html`${glances}
      <div class="big-glance-empty">Pick an app</div>`,
    live,
  })}`;
  return shell(ctx, {
    view: "home",
    layout: "home",
    title: "Big",
    crumbs: [],
    panes,
    where: {},
    back: "/",
    open: "/",
    apps: names,
  });
}
// ---- rows the views share ----
function runRow(
  base: string,
  run: Run,
  actors: ReadonlyMap<string, User>,
  about: ReadonlyMap<string, Issue>,
  stopForm: string | undefined,
): Html {
  const who =
    run.actorId === null
      ? "crew"
      : (actors.get(run.actorId)?.username ?? "crew");
  const issue = run.issueId === null ? undefined : about.get(run.issueId);
  const word = runWord(run);
  const live = run.state === "running" || run.state === "queued";
  return html`<li
    class="big-row"
    data-kind="run"
    data-key="run:${run.id}"
    data-href="${bigUrl({ run: run.id })}"
    data-open="${base}/runs/${run.id}"
    data-state="${live ? word : run.state}"
    tabindex="-1"
  >
    ${avatar(who)}
    <span class="big-m"><b>${who}</b></span>
    <span class="big-t"
      >${issue?.title ?? (run.summary || "on the repository")}
      <small class="big-m"
        >·
        ${live
          ? word === "paused"
            ? "resumes soon"
            : why(run)
          : run.summary || run.state}</small
      ></span
    >
    ${live
      ? html`<span class="big-el" data-started="${startedAt(run)}"></span>`
      : html`<span class="big-el">${durationText(run) ?? "—"}</span>`}
    <span class="big-cost">${run.costUsd > 0 ? money(run.costUsd) : ""}</span>
    <span class="big-acts"
      >${live
        ? html`<span class="big-word" data-word="${word}">${word}</span>`
        : html`<span class="big-word" data-word="${run.state}"
            >${run.state === "ok" ? "done" : run.state}</span
          >`}${stopForm === undefined
        ? null
        : act("x", run.state === "running" ? "stop" : "cancel", stopForm)}</span
    >
  </li>`;
}
function landedRow(base: string, pull: Pull): Html {
  return html`<li
    class="big-row"
    data-kind="landed"
    data-key="pull:${pull.id}"
    data-href="${base}/pulls/${pull.number}"
    tabindex="-1"
  >
    <span class="big-t">${pull.title}</span>
    <span class="big-m">${pull.authorName}</span>
    <span class="big-when">${time(pull.mergedAt ?? pull.createdAt)}</span>
  </li>`;
}
function decisionRow(
  db: Ctx["app"]["db"],
  repo: Repo,
  d: ReturnType<typeof listDecisionsForRepos>[number],
  about: ReadonlyMap<string, Issue>,
): Html {
  const base = repoBase(repo);
  let issue: Issue | undefined =
    d.issueId === null ? undefined : about.get(d.issueId);
  if (d.kind === "next" && /^\d+$/.test(d.answer))
    issue = getIssue(db, repo.id, Number(d.answer)) ?? issue;
  const href =
    issue === undefined
      ? base
      : `${base}/${issue.kind === "pull" ? "pulls" : "issues"}/${issue.number}`;
  const answer =
    d.kind === "next" && issue !== undefined ? `#${issue.number}` : d.answer;
  return html`<li
    class="big-row"
    data-kind="decision"
    data-key="decision:${d.id}"
    data-href="${href}"
    tabindex="-1"
  >
    <span class="big-word">${KIND_WORDS[d.kind]}</span>
    <span class="big-t">${answer}</span>
    <span class="big-m"
      >${issue?.title ?? repo.name} ·
      ${d.by === "rule" ? "by the rule" : `by ${d.by}`}</span
    >
    <span class="big-p" title="how sure">${Math.round(d.p * 100)}%</span>
    <span class="big-word" data-word="${d.outcome ?? ""}"
      >${d.outcome ?? "—"}</span
    >
    <span class="big-when">${time(d.createdAt)}</span>
  </li>`;
}
/** The hidden form a run's stop chip submits, when the viewer may. */
function stopFormFor(ctx: Ctx, repo: Repo, run: Run): string | undefined {
  if (run.kind !== "agent") return undefined;
  if (run.state !== "running" && run.state !== "queued") return undefined;
  if (!canWrite(ctx.app.db, repo, ctx.auth.user)) return undefined;
  return `stop-${run.id}`;
}
const stopForms = (
  base: string,
  runs: readonly Run[],
  ids: ReadonlyMap<string, string>,
): Html =>
  html`${runs.map((r) =>
    when(
      ids.get(r.id),
      (id) =>
        html`<form
          id="${id}"
          method="post"
          action="${base}/runs/${r.id}/cancel"
          hidden
        ></form>`,
    ),
  )}`;
// ---- app: working, asks, the map, landed ----
function appView(
  ctx: Ctx,
  user: User,
  repo: Repo,
  names: readonly string[],
): Response {
  const db = ctx.app.db;
  const base = repoBase(repo);
  const running = listActiveRuns(db, [repo.id]);
  running.sort((a, b) => {
    if ((a.state === "running") !== (b.state === "running"))
      return a.state === "running" ? -1 : 1;
    return startedAt(a).localeCompare(startedAt(b));
  });
  const actors = getUsersByIds(
    db,
    running.map((r) => r.actorId).filter((id): id is string => id !== null),
  );
  const about = getIssuesByIds(
    db,
    running.map((r) => r.issueId).filter((id): id is string => id !== null),
  );
  const stops = new Map<string, string>();
  for (const r of running) {
    const id = stopFormFor(ctx, repo, r);
    if (id !== undefined) stops.set(r.id, id);
  }
  const status =
    repo.autonomy === "off" ? undefined : autonomyStatus(ctx.app, repo);
  const landed = mergedPullsForRepos(db, [repo.id], 12);
  const graph = repoGraph(db, repo.id);
  const ready = readyNow(graph);
  const marks = marksFor(db, repo.id, graph, running);
  const readySet = new Set(ready.map((r) => r.issue.id));
  const counts = countWords(
    graph.issues.map((i) => mapWordFor(i, readySet, marks)),
  );
  const panes = html`${pane({
    name: "working",
    n: 1,
    title: "Working now",
    count: running.length,
    note:
      status === undefined
        ? html`${repo.autonomy}`
        : html`<b>${status.active}</b> of ${status.slots} slots ·
            <b>${money(status.spentTodayUsd)}</b> of
            $${status.ceilingUsd.toFixed(0)}
            today${status.paused === null
              ? null
              : html` · paused: ${status.paused}`}`,
    body: html`${rows(
      running.map((r) => runRow(base, r, actors, about, stops.get(r.id))),
      "Nobody is working right now. Tell the crew something.",
    )}${stopForms(base, running, stops)}`,
    live: "run.*",
    repo,
  })}
  ${pane({
    name: "map",
    n: 3,
    title: "Map",
    note: html`<b>${counts.ready}</b> ready · <b>${counts.working}</b> working ·
      <b>${counts.blocked}</b> blocked${counts.waiting > 0
        ? html` · <b>${counts.waiting}</b> waiting`
        : null}`,
    body: drawMap(
      repo,
      graph,
      layout(graph),
      emphasisFor(ready, criticalPath(graph), marks),
      { id: "big-map-canvas", cap: 0.42 },
    ),
    live: "run.*,issue.*,pull.*",
    repo,
  })}
  ${pane({
    name: "landed",
    n: 4,
    title: "Landed",
    count: landed.length,
    body: rows(
      landed.map((p) => landedRow(base, p)),
      "Nothing has shipped yet.",
    ),
    live: "pull.merged,run.finished",
    repo,
  })}`;
  return shell(ctx, {
    view: "app",
    layout: "app",
    title: `${repo.name} · big`,
    crumbs: [{ label: repo.name }],
    panes,
    where: { app: slug(repo) },
    here: slug(repo),
    back: "/big",
    say: `${base}/tell`,
    sayWho: `${repo.name}'s crew`,
    open: base,
    apps: names,
    css: mapCss,
    js: mapViewJs,
  });
}
// ---- lists: runs, issues, pulls, the map alone ----
function listView(
  ctx: Ctx,
  user: User,
  repo: Repo,
  kind: ListKind,
  names: readonly string[],
): Response {
  const db = ctx.app.db;
  const base = repoBase(repo);
  const where: Where = { app: slug(repo), list: kind };
  const common = {
    where,
    here: slug(repo),
    back: backUrl(where),
    say: `${base}/tell`,
    sayWho: `${repo.name}'s crew`,
    apps: names,
    crumbs: [
      { label: repo.name, href: bigUrl({ app: slug(repo) }) },
      { label: kind },
    ],
  };
  if (kind === "map") {
    const graph = repoGraph(db, repo.id);
    const ready = readyNow(graph);
    const marks = marksFor(db, repo.id, graph, listActiveRuns(db, [repo.id]));
    return shell(ctx, {
      ...common,
      view: "list",
      layout: "list",
      title: `Map · ${repo.name} · big`,
      open: `${base}/map`,
      panes: pane({
        name: "map",
        n: 1,
        title: "Map",
        note: html`what waits for what · the top edge is ready now`,
        body: drawMap(
          repo,
          graph,
          layout(graph),
          emphasisFor(ready, criticalPath(graph), marks),
          { id: "big-map-canvas", cap: 0.8 },
        ),
        live: "run.*,issue.*,pull.*",
        repo,
      }),
      css: mapCss,
      js: mapViewJs,
    });
  }
  if (kind === "runs") {
    const runs = listRuns(db, repo.id, { limit: 60 });
    const actors = getUsersByIds(
      db,
      runs.map((r) => r.actorId).filter((id): id is string => id !== null),
    );
    const about = getIssuesByIds(
      db,
      runs.map((r) => r.issueId).filter((id): id is string => id !== null),
    );
    const stops = new Map<string, string>();
    for (const r of runs) {
      const id = stopFormFor(ctx, repo, r);
      if (id !== undefined) stops.set(r.id, id);
    }
    return shell(ctx, {
      ...common,
      view: "list",
      layout: "list",
      title: `Runs · ${repo.name} · big`,
      open: `${base}/runs`,
      panes: pane({
        name: "runs",
        n: 1,
        title: "Runs",
        count: runs.length,
        body: html`${rows(
          runs.map((r) => runRow(base, r, actors, about, stops.get(r.id))),
          "No runs yet.",
        )}${stopForms(base, runs, stops)}`,
        live: "run.*",
        repo,
      }),
    });
  }
  if (kind === "issues") {
    const issues = listIssues(db, repo.id, { state: "open", limit: 60 });
    const active = new Set(
      listActiveRuns(db, [repo.id])
        .map((r) => r.issueId)
        .filter((id): id is string => id !== null),
    );
    return shell(ctx, {
      ...common,
      view: "list",
      layout: "list",
      title: `Issues · ${repo.name} · big`,
      open: `${base}/issues`,
      panes: pane({
        name: "issues",
        n: 1,
        title: "Open issues",
        count: issues.length,
        body: rows(
          issues.map(
            (i) =>
              html`<li
                class="big-row"
                data-kind="issue"
                data-key="issue:${i.id}"
                data-href="${base}/issues/${i.number}"
                tabindex="-1"
              >
                <span class="big-num">#${i.number}</span>
                <span class="big-t">${i.title}</span>
                <span class="big-m">${i.assigneeName ?? "nobody on it"}</span>
                <span
                  class="big-word"
                  data-word="${active.has(i.id) ? "working" : "waiting"}"
                  >${active.has(i.id) ? "working" : "open"}</span
                >
                <span class="big-when">${time(i.createdAt)}</span>
              </li>`,
          ),
          "Nothing open. Tell the crew something.",
        ),
        live: "run.*,issue.*",
        repo,
      }),
    });
  }
  const pulls = listPulls(db, repo.id, { state: "open", limit: 60 });
  const checks = latestRunsForIssues(
    db,
    pulls.map((p) => p.id),
  );
  const writer = canWrite(db, repo, user);
  const pullWord = (p: Pull): string => {
    const c = checks.get(p.id);
    return c?.state === "ok"
      ? "green"
      : c?.state === "failed"
        ? "red"
        : "checking";
  };
  return shell(ctx, {
    ...common,
    view: "list",
    layout: "list",
    title: `Pulls · ${repo.name} · big`,
    open: `${base}/pulls`,
    panes: pane({
      name: "pulls",
      n: 1,
      title: "Open pulls",
      count: pulls.length,
      body: html`${rows(
        pulls.map((p) => {
          const word = pullWord(p);
          return html`<li
            class="big-row"
            data-kind="pull"
            data-key="pull:${p.id}"
            data-href="${base}/pulls/${p.number}"
            data-say="${base}/pulls/${p.number}/say"
            data-say-who="${p.authorName}"
            tabindex="-1"
          >
            <span class="big-num">#${p.number}</span>
            <span class="big-t">${p.title}</span>
            <span class="big-m">${p.authorName}</span>
            <span class="big-acts"
              ><span class="big-word" data-word="${word}">${word}</span
              >${writer && word === "green"
                ? act("s", "ship", `ship-${p.id}`, true)
                : null}${writer
                ? act("x", "close", `close-${p.id}`)
                : null}</span
            >
            <span class="big-when">${time(p.createdAt)}</span>
          </li>`;
        }),
        "No open pulls.",
      )}${when(
        writer,
        () =>
          html`${pulls.map(
            (p) =>
              html`<form
                  id="ship-${p.id}"
                  method="post"
                  action="${base}/pulls/${p.number}/ship"
                  hidden
                >
                  <input type="hidden" name="pull" value="${p.number}" />
                </form>
                <form
                  id="close-${p.id}"
                  method="post"
                  action="${base}/pulls/${p.number}/state"
                  hidden
                >
                  <input type="hidden" name="state" value="closed" />
                </form>`,
          )}`,
      )}`,
      live: "run.*,pull.*,check.*",
      repo,
    }),
  });
}
// ---- run: the transcript, followed, and the steer line ----
function runView(
  ctx: Ctx,
  user: User,
  repo: Repo,
  run: Run,
  names: readonly string[],
): Response {
  const found = runLog(ctx.app, user, repo, run.id);
  if (!found.ok) return notFoundPage(ctx);
  const { lines, truncated } = found.value;
  const db = ctx.app.db;
  const base = repoBase(repo);
  const actor =
    run.actorId === null
      ? undefined
      : getUsersByIds(db, [run.actorId]).get(run.actorId);
  const issue =
    run.issueId === null ? undefined : getIssueById(db, run.issueId);
  const title = runTitle(run, actor?.username, issue);
  const unfinished = !isTerminal(run.state);
  const writer = canWrite(db, repo, user);
  const duration = durationText(run);
  const stream = `/api/v1/repos/${repo.ownerName}/${repo.name}/runs/${run.id}/log?follow=1`;
  const who = actor?.username ?? "agent";
  const where: Where = { run: run.id };
  const body = html`<div class="big-run">
    <div class="big-run-meta">
      <h1>${title}</h1>
      <span id="run-state" data-kind="${run.kind}"
        >${runStateBadge(run.state, run.kind)}</span
      >
      <span>${reasonWords(run.reason)}</span>
      ${when(
        issue,
        (i) =>
          html`<a
            href="${base}/${i.kind === "pull" ? "pulls" : "issues"}/${i.number}"
            >#${i.number}</a
          >`,
      )}
      <span class="num" id="run-cost" ${run.costUsd > 0 ? null : html`hidden`}
        >${costText(run.costUsd)} spent</span
      >
      <span class="num" id="run-turns" ${run.turns > 0 ? null : html`hidden`}
        >${run.turns} turn${run.turns === 1 ? "" : "s"}</span
      >
      ${when(
        duration,
        (d) =>
          html`<span
            class="num"
            id="run-elapsed"
            data-started="${run.startedAt ?? ""}"
            data-finished="${run.finishedAt ?? ""}"
            >${run.finishedAt === null ? "running for" : "took"} ${d}</span
          >`,
      )}
      ${when(
        writer && unfinished && issue === undefined,
        () =>
          html`<div class="run-actions" id="run-cancel">
            <form method="post" action="${base}/runs/${run.id}/cancel">
              <button class="big-act" type="submit" data-act="x">
                <kbd>x</kbd>${run.state === "running" ? "stop" : "cancel"}
              </button>
            </form>
          </div>`,
      )}
      ${when(
        run.summary !== "",
        () => html`<p class="run-summary" id="run-summary">${run.summary}</p>`,
      )}
      ${when(
        truncated,
        () =>
          html`<p class="run-summary">Showing the last 512 KB of the log.</p>`,
      )}
    </div>
    ${when(
      lines.length === 0,
      () =>
        html`<p class="big-quiet" id="run-empty">
          Nothing has been logged yet.
        </p>`,
    )}
    <div class="run-live" id="run-live" data-state="${run.state}">
      <div
        class="run-log"
        id="run-log"
        data-who="${who}"
        ${unfinished ? html`data-stream="${stream}"` : null}
      >
        ${lines.map((l) => logLine(l, who))}
        <button type="button" class="run-jump" id="run-jump" hidden>
          newer below
        </button>
      </div>
      ${when(
        writer && run.kind === "agent" && issue !== undefined,
        () =>
          html`<form
            class="run-steer"
            id="run-steer"
            method="post"
            action="${base}/runs/${run.id}/steer"
            data-api="/api/v1/repos/${repo.ownerName}/${repo.name}/runs/${run.id}/steer"
            data-running="${run.state === "running" ? "1" : "0"}"
          >
            <label class="sr-only" for="steer-text"
              >Say something to ${who}</label
            >
            <textarea
              class="input"
              id="steer-text"
              name="text"
              rows="1"
              required
              placeholder="${run.state === "running"
                ? `steer ${who} — enter sends, esc returns to the keys`
                : `tell ${who} for its next run — enter sends`}"
            ></textarea>
            <div class="bar">
              <span class="muted small" id="run-steer-note"
                >${run.state === "running"
                  ? "Heard after the step it is on. Every word is kept in the log."
                  : "The run is over; this goes on the conversation and starts a run."}</span
              >
              <span class="spacer"></span>
              ${when(
                unfinished,
                () =>
                  html`<button
                    type="submit"
                    class="big-act"
                    id="run-stop"
                    data-act="x"
                    formaction="${base}/runs/${run.id}/cancel"
                    formnovalidate
                  >
                    <kbd>x</kbd>${run.state === "running" ? "stop" : "cancel"}
                  </button>`,
              )}
              <button type="submit" class="big-act" data-lead="">
                <kbd>enter</kbd>send
              </button>
            </div>
          </form>`,
      )}
    </div>
  </div>`;
  return shell(ctx, {
    view: "run",
    layout: "run",
    title: `${title} · big`,
    crumbs: [
      { label: repo.name, href: bigUrl({ app: slug(repo) }) },
      { label: who === "agent" ? "run" : `${who}'s run` },
    ],
    panes: pane({
      name: "run",
      n: 1,
      title:
        run.kind === "agent"
          ? "Run"
          : run.kind === "check"
            ? "Check"
            : "Deploy",
      note: html`${run.state === "running"
        ? "following the tail"
        : run.state}${run.costUsd > 0 ? html` · ${money(run.costUsd)}` : null}`,
      body,
      cls: "big-run-pane",
    }),
    where,
    here: slug(repo),
    back: backUrl(where, slug(repo)),
    open: `${base}/runs/${run.id}`,
    apps: names,
    js: runLogJs,
  });
}
// ---- board: the wall's four regions, focusable ----
function boardView(
  ctx: Ctx,
  user: User,
  apps: readonly Repo[],
  names: readonly string[],
): Response {
  const scope = boardScope(ctx, apps);
  const regions = boardRegions(ctx, scope);
  const wrap = (name: string, n: number, region: Html): Html =>
    html`<section
      class="big-pane big-wall"
      data-pane="${name}"
      data-n="${n}"
      aria-label="${name}"
    >
      <div class="big-scroll">${region}</div>
    </section>`;
  return shell(ctx, {
    view: "board",
    layout: "wall",
    title: "Board · big",
    crumbs: [{ label: "board" }],
    panes: html`${wrap("working", 1, regions.working)}${wrap(
      "landed",
      2,
      regions.landed,
    )}${wrap("decided", 3, regions.decided)}${wrap("today", 4, regions.today)}`,
    where: { view: "board" },
    back: "/big",
    open: "/board",
    apps: names,
    css: boardCss,
  });
}
// ---- map: every app, one lane each ----
function mapView(ctx: Ctx, user: User, names: readonly string[]): Response {
  const lanes = globalLanes(ctx.app, user);
  const width = Math.max(0, ...lanes.map((l) => drawingWidth(l.placed)));
  const body =
    lanes.length === 0
      ? html`<p class="big-quiet">
          Nothing to map: no open issues anywhere you can see, and nobody
          working.
        </p>`
      : html`<div class="big-rows">
          ${lanes.map(
            (lane) =>
              html`<div
                class="big-row big-lane"
                data-key="lane:${slug(lane.repo)}"
                data-href="${bigUrl({ app: slug(lane.repo) })}"
                data-open="${repoBase(lane.repo)}/map"
                tabindex="-1"
              >
                ${laneHtml(lane, width)}
              </div>`,
          )}
        </div>`;
  return shell(ctx, {
    view: "map",
    layout: "lanes",
    title: "Map · big",
    crumbs: [{ label: "map" }],
    panes: html`<section
      class="big-pane"
      data-pane="lanes"
      data-n="1"
      id="map-lanes"
      data-live="run.*,issue.*,pull.*"
      aria-labelledby="big-lanes-h"
    >
      <h2 class="big-h" id="big-lanes-h">
        <kbd aria-hidden="true">1</kbd>Every app
        ${when(
          lanes.length > 0,
          () => html`<span class="big-count">${lanes.length}</span>`,
        )}
        <span class="spacer"></span>
        <span class="big-h-note"
          >the top edge of each lane is ready now · a ringed card is where the
          crew is</span
        >
      </h2>
      <div class="big-scroll">${body}</div>
    </section>`,
    where: { view: "map" },
    back: "/big",
    open: "/map",
    apps: names,
    css: mapCss,
    js: mapViewJs,
  });
}
@@ -7,6 +7,10 @@
 * forge's health, and each subscription's windows. Nothing on it
 * needs a click, and everything on it links somewhere. It reads the same
 * tables as the studio and adds no state of its own.
 *
 * `?wall` is its one wall mode, for a screen across the room that nobody
 * touches: the same regions in larger type, without the key hints or a
 * pointer. The old big view (`/big`, every address it had) lands here.
 */
import { appsForRepos, type AppRecord } from "../../core/apps.ts";
@@ -36,7 +40,7 @@
import type { Ctx } from "../../http/context.ts";
import { repoBase, signInFirst } from "../chrome.ts";
import { boardJs, liveRegionsJs } from "../client.ts";
import { html, when, type Html } from "../html.ts";
import { page } from "../layout.ts";
import { page, redirect } from "../layout.ts";
import { avatar, icon, time } from "../ui.ts";
import { voiceFor } from "../studio/voice.ts";
import {
@@ -89,7 +93,7 @@
const pct = (n: number): number =>
  Math.max(0, Math.min(100, Math.round(n * 100)));
/** The apps on the board: every one the viewer can see, or the named few. */
export interface BoardScope {
interface BoardScope {
  readonly repos: readonly Repo[];
  readonly ids: readonly string[];
  readonly byId: ReadonlyMap<string, Repo>;
@@ -100,12 +104,12 @@
export interface BoardScope {
  readonly ownerFacts: ReadonlySet<string>;
}
/** The scope for some app repositories: the board's, or the big view's. */
export function boardScope(ctx: Ctx, repos: readonly Repo[]): BoardScope {
  const records = appsForRepos(
    ctx.app.db,
    repos.map((r) => r.id),
  );
/** The scope for some repositories: the ones among them that are apps. */
function boardScope(
  ctx: Ctx,
  repos: readonly Repo[],
  records: ReadonlyMap<string, AppRecord>,
): BoardScope {
  const kept = repos.filter((r) => records.has(r.id));
  return {
    repos: kept,
@@ -120,22 +124,9 @@
export function boardScope(ctx: Ctx, repos: readonly Repo[]): BoardScope {
  };
}
/** The four regions, for a page that frames them its own way. */
export function boardRegions(
  ctx: Ctx,
  scope: BoardScope,
): { working: Html; landed: Html; decided: Html; today: Html } {
  return {
    working: working(ctx, scope),
    landed: landed(ctx, scope),
    decided: decided(ctx, scope),
    today: today(ctx, scope),
  };
}
// ---- the page ----
/** GET /board — signed in; every app the viewer can see, or `?apps=` some. */
/** GET /board — signed in; every app the viewer can see, or `?apps=` some; `?wall` for the wall mode. */
export function boardPage(ctx: Ctx): Response {
  const user = ctx.auth.user;
  if (!user) return signInFirst(ctx);
@@ -155,21 +146,24 @@
export function boardPage(ctx: Ctx): Response {
    ctx,
    visible.filter(
      (r) =>
        records.has(r.id) &&
        (wanted.size === 0 ||
          wanted.has(r.name.toLowerCase()) ||
          wanted.has(`${r.ownerName}/${r.name}`.toLowerCase())),
        wanted.size === 0 ||
        wanted.has(r.name.toLowerCase()) ||
        wanted.has(`${r.ownerName}/${r.name}`.toLowerCase()),
    ),
    records,
  );
  const repos = scope.repos;
  const wall = ctx.url.searchParams.has("wall");
  const body = html`<div class="board">
  const body = html`<div class="board" ${wall ? html`data-wall=""` : null}>
    <header class="board-top">
      <a class="board-brand" href="/"><span class="mark"></span>forge</a>
      <span class="board-scope"
        >${repos.length === 1
          ? repos[0]!.name
          : `${repos.length} app${repos.length === 1 ? "" : "s"}`}</span
        >${
          repos.length === 1
            ? repos[0]!.name
            : `${repos.length} app${repos.length === 1 ? "" : "s"}`
        }</span
      >
      <span class="spacer"></span>
      <span class="board-keys" aria-hidden="true"
@@ -223,14 +217,34 @@
function region(
        () => html`<span class="board-count">${rows.length}</span>`,
      )}
    </h2>
    ${rows.length === 0
      ? html`<p class="board-quiet">${quiet}</p>`
      : html`<ul class="board-list">
          ${rows}
        </ul>`}
    ${
      rows.length === 0
        ? html`<p class="board-quiet">${quiet}</p>`
        : html`<ul class="board-list">
            ${rows}
          </ul>`
    }
  </section>`;
}
/** An app's address as the big view wrote it: `owner/name`, nothing else. */
const APP_SLUG = /^[A-Za-z0-9._-]{1,100}\/[A-Za-z0-9._-]{1,100}$/;
/**
 * GET /big — the big view, folded into the board. Every address it had
 * (`?app=`, `&list=`, `?run=`, `?view=board|map`) lands on the wall mode;
 * an app it named stays the scope, as `?apps=`. The board decides what the
 * viewer may see, so this reads nothing and says nothing about what exists.
 */
export function bigRedirect(ctx: Ctx): Response {
  const app = ctx.url.searchParams.get("app") ?? "";
  return redirect(
    APP_SLUG.test(app)
      ? `/board?apps=${encodeURIComponent(app)}&wall`
      : "/board?wall",
  );
}
// ---- the forge ----
/** Where a need can be acted on, when it can: a stuck run's page. */
@@ -263,14 +277,16 @@
function forgeStrip(ctx: Ctx): Html | null {
    data-ok="${v.ok ? "yes" : "no"}"
    role="status"
  >
    ${v.ok
      ? html`<span class="board-forge-ok">All fine</span>`
      : v.needs.map((need) => {
          const href = needHref(need, v);
          return href === undefined
            ? html`<span class="board-forge-need">${need}</span>`
            : html`<a class="board-forge-need" href="${href}">${need}</a>`;
        })}
    ${
      v.ok
        ? html`<span class="board-forge-ok">All fine</span>`
        : v.needs.map((need) => {
            const href = needHref(need, v);
            return href === undefined
              ? html`<span class="board-forge-need">${need}</span>`
              : html`<a class="board-forge-need" href="${href}">${need}</a>`;
          })
    }
  </div>`;
}
@@ -323,11 +339,13 @@
function windowsStrip(ctx: Ctx): Html | null {
          const words = windowWords(w);
          return html`<span class="board-window" data-window="${w.window}"
            ><span class="board-window-name">${words.name}</span>
            ${words.usedPct === null
              ? null
              : html`<span class="board-bar"
                  ><span class="board-fill" data-w="${words.usedPct}"></span
                ></span>`}
            ${
              words.usedPct === null
                ? null
                : html`<span class="board-bar"
                    ><span class="board-fill" data-w="${words.usedPct}"></span
                  ></span>`
            }
            <span class="board-window-nums"
              >${figures([words.used, words.remaining, words.resets])}</span
            ></span
@@ -389,9 +407,9 @@
function working(ctx: Ctx, scope: BoardScope): Html {
        <span class="board-run-meta">
          <span class="board-state">${word}</span>
          <span
            >${word === "paused"
              ? "resumes soon"
              : reasonWords(run.reason)}</span
            >${
              word === "paused" ? "resumes soon" : reasonWords(run.reason)
            }</span
          >
          ${when(
            run.costUsd > 0 && scope.ownerFacts.has(repo.id),
@@ -456,15 +474,17 @@
function landed(ctx: Ctx, scope: BoardScope): Html {
        href="${repoBase(repo)}/pulls/${pull.number}"
      >
        <span class="board-thumb"
          >${picture === undefined
            ? icon("merge")
            : html`<img
                src="${picture}"
                width="34"
                height="46"
                alt=""
                loading="lazy"
              />`}</span
          >${
            picture === undefined
              ? icon("merge")
              : html`<img
                  src="${picture}"
                  width="34"
                  height="46"
                  alt=""
                  loading="lazy"
                />`
          }</span
        >
        <span class="board-landed-title">${pull.title}</span>
        <span class="board-when">${time(pull.mergedAt ?? pull.createdAt)}</span>
@@ -770,6 +790,10 @@
${widths}
}
/* One region, full bleed. */
.board[data-focus] .board-region { display: none; }
/* The wall mode: read from across the room, and nobody at the keys. */
.board[data-wall] { font-size: 20px; cursor: none; }
.board[data-wall] .board-keys { display: none; }
@media (min-width: 1600px) { .board[data-wall] { font-size: 23px; } }
.board[data-focus="working"] #working, .board[data-focus="landed"] #landed,
.board[data-focus="decided"] #decided, .board[data-focus="today"] #today { display: flex; }
}
@@ -1,245 +0,0 @@
/**
 * The big view's stylesheet: a k9s frame in the browser. One header line,
 * a body of panes that fill the window and scroll on their own, one footer
 * line of key chips. Dense, calm, dark by default; the forge's tokens
 * throughout, so every theme gets it. Nothing here animates on its own —
 * a focus ring moves, a hover tints, and that is all the motion there is.
 */
/** Width rules for the bars: a whole percentage as `data-w`, since an inline style is not allowed. */
const widths = Array.from(
  { length: 101 },
  (_, n) => `.big-fill[data-w="${n}"] { width: ${n}%; }`,
).join("\n");
export const bigCss = /* css */ `
.big {
  --gap: 10px; --line: 30px;
  height: 100dvh; display: grid; grid-template-rows: var(--line) minmax(0, 1fr) var(--line);
  font-size: 13px; line-height: 1.4; overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.big kbd { height: 18px; min-width: 18px; padding: 0 4px; font-size: 10.5px; border-bottom-width: 1px; }
.big .num, .big .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.big .spacer { flex: 1; }
/* ---- the header line ---- */
.big-top { display: flex; align-items: center; gap: 12px; padding: 0 12px; border-bottom: 1px solid var(--border); color: var(--muted-fg); font-size: 12.5px; white-space: nowrap; min-width: 0; }
.big-brand { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; letter-spacing: -0.03em; font-size: 13.5px; color: var(--fg); }
.big-brand .mark { width: 9px; height: 9px; border-radius: 3px; background: linear-gradient(135deg, var(--accent), var(--merged)); }
.big-crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.big-crumbs a { color: var(--muted-fg); }
.big-crumbs a:hover { color: var(--fg); }
.big-crumbs > span { color: var(--faint); }
.big-crumbs b { color: var(--fg); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.big-hint { font-size: 12px; color: var(--muted-fg); overflow: hidden; text-overflow: ellipsis; }
.big-hint[data-tone="danger"] { color: var(--danger); }
.big-hint[data-tone="success"] { color: var(--success); }
.big-live { display: inline-flex; align-items: center; }
.big-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--faint); }
.big-live[data-state="open"] .big-dot { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent); }
.big-live[data-state="reconnecting"] .big-dot { background: var(--attn); }
.big-clock { font-family: var(--mono); font-size: 12.5px; color: var(--muted-fg); min-width: 5ch; text-align: right; }
.big-pad { display: none; font-size: 11px; color: var(--faint); }
.big[data-pad] .big-pad { display: inline; }
/* ---- the body of panes ---- */
.big-body { display: grid; gap: var(--gap); padding: var(--gap); min-height: 0; }
.big-body[data-layout="home"] { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); }
.big-body[data-layout="app"], .big-body[data-layout="wall"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.big-body[data-layout="run"], .big-body[data-layout="lanes"], .big-body[data-layout="list"] { grid-template-columns: minmax(0, 1fr); }
.big-pane {
  min-width: 0; min-height: 0; display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card);
}
.big-pane.is-pane { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.big-h {
  flex: none; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 10px; height: 28px;
  border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-fg);
  white-space: nowrap; overflow: hidden;
}
.big-pane.is-pane .big-h { color: var(--fg); }
.big-h kbd { letter-spacing: 0; }
.big-count { font-weight: 500; letter-spacing: 0; color: var(--faint); }
.big-h-note { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--faint); overflow: hidden; text-overflow: ellipsis; }
.big-h-note b { color: var(--fg); font-weight: 600; }
.big-scroll { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; overscroll-behavior: contain; }
.big-rows { margin: 0; padding: 4px 0; list-style: none; }
.big-quiet { margin: 0; padding: 10px 12px; color: var(--faint); }
.big-pane[data-fresh] .big-h { color: var(--accent); }
/* ---- rows ---- */
.big-row {
  position: relative; display: grid; align-items: center; gap: 2px 10px;
  padding: 5px 10px 5px 12px; border-left: 2px solid transparent; color: inherit; outline: none;
  cursor: default;
}
.big-row:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.big-row.is-focus { background: color-mix(in srgb, var(--accent) 13%, transparent); border-left-color: var(--accent); }
.big-row a { color: inherit; }
.big-row[data-busy] { opacity: .5; }
.big-t { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.big-m { color: var(--muted-fg); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.big-m b { color: var(--fg); font-weight: 600; }
.big-when { color: var(--faint); font-size: 12px; white-space: nowrap; }
.big-acts { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.big-act {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 6px 0 3px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--muted-fg);
  font: inherit; font-size: 11.5px; cursor: pointer;
}
.big-act kbd { height: 14px; min-width: 14px; font-size: 10px; padding: 0 3px; background: var(--muted); }
.big-act:hover { color: var(--fg); border-color: var(--border-strong); }
.big-act[data-lead] { color: var(--fg); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.big-row.is-focus .big-act { color: var(--fg); }
.big-bar { display: block; height: 4px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.big-fill { display: block; height: 100%; border-radius: inherit; background: var(--muted-fg); }
.big-fill[data-near] { background: var(--attn); }
${widths}
.big-word { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-fg); white-space: nowrap; }
.big-word[data-word="working"], .big-word[data-word="autonomous"] { color: var(--accent); }
.big-word[data-word="queued"], .big-word[data-word="assisted"], .big-word[data-word="waiting"] { color: var(--muted-fg); }
.big-word[data-word="paused"], .big-word[data-word="stopped"], .big-word[data-word="failed"], .big-word[data-word="red"] { color: var(--attn); }
.big-word[data-word="look"], .big-word[data-word="green"], .big-word[data-word="shipped"], .big-word[data-word="ok"] { color: var(--success); }
.big-word[data-word="off"], .big-word[data-word="cancelled"] { color: var(--faint); }
.big-row .avatar { width: 20px; height: 20px; font-size: 9px; }
/* app rows: name · autonomy · working · asks · spend */
.big-row[data-kind="app"] { grid-template-columns: minmax(0, 1fr) 7em 5.5em 5.5em 9em; }
.big-row[data-kind="app"] .big-t { font-size: 13.5px; }
.big-row[data-kind="app"] .big-t small { color: var(--muted-fg); font-weight: 500; font-size: 12px; }
.big-n { font-family: var(--mono); font-size: 12px; color: var(--muted-fg); white-space: nowrap; }
.big-n b { color: var(--fg); font-weight: 600; }
.big-n[data-zero] { color: var(--faint); }
.big-n[data-hot] b { color: var(--accent); }
.big-spend { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; font-family: var(--mono); font-size: 11.5px; color: var(--muted-fg); }
/* run rows: who · title · elapsed · cost */
.big-row[data-kind="run"] { grid-template-columns: auto 6.5em minmax(0, 1fr) 6ch 6ch auto; }
.big-row[data-kind="run"] .big-t { grid-column: 3; }
.big-el { font-family: var(--mono); font-size: 12.5px; text-align: right; white-space: nowrap; }
.big-row[data-state="working"] .big-el { color: var(--accent); }
.big-row[data-state="queued"] .big-el, .big-row[data-state="paused"] .big-el { color: var(--faint); }
.big-cost { font-family: var(--mono); font-size: 12px; color: var(--muted-fg); text-align: right; white-space: nowrap; }
/* ask rows: mark · title + short · actions */
.big-row[data-kind="ask"] { grid-template-columns: 5.5em minmax(0, 1fr) auto; }
.big-row[data-kind="ask"] .big-m { grid-column: 2; }
.big-row[data-kind="ask"] .big-acts { grid-row: 1 / span 2; grid-column: 3; }
.big-row[data-kind="ask"] .big-word { grid-row: 1 / span 2; }
/* landed rows: title · who · when */
.big-row[data-kind="landed"] { grid-template-columns: minmax(0, 1fr) auto auto; }
/* decision rows: kind · answer · about · sure · outcome · when */
.big-row[data-kind="decision"] { grid-template-columns: 6em 5em minmax(0, 1fr) 4ch 5em auto; }
.big-row[data-kind="decision"] .big-p { font-family: var(--mono); font-size: 11.5px; color: var(--muted-fg); text-align: right; }
/* issue and pull rows: number · title · who · word · when */
.big-row[data-kind="issue"], .big-row[data-kind="pull"] { grid-template-columns: 4.5ch minmax(0, 1fr) auto auto auto; }
.big-num { font-family: var(--mono); font-size: 12px; color: var(--faint); }
/* ---- the glance: the focused app at a glance ---- */
.big-glance { display: flex; flex-direction: column; min-height: 0; }
.big-glance-dir { margin: 0; padding: 10px 12px 8px; font-size: 14px; font-weight: 550; letter-spacing: -0.01em; text-wrap: pretty; border-bottom: 1px solid var(--border); }
.big-glance-dir small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--muted-fg); }
.big-sub { margin: 0; padding: 8px 12px 2px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.big-glance-empty { display: grid; place-items: center; height: 100%; color: var(--faint); }
/* ---- the map inside a pane ---- */
.big-pane .map-canvas { border: 0; border-radius: 0; background: var(--card); flex: 1; min-height: 0; }
.big-pane .map-empty { border: 0; padding: 24px 12px; }
.big-pane .map-node.is-focus .map-card { stroke: var(--accent); stroke-width: 2; }
.big-pane .map-tools { display: none; }
/* ---- the lanes: the global map, one row per app ---- */
.big-lane { padding: 0; border-left-width: 2px; }
.big-lane .map-lane { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.big-lane + .big-lane .map-lane { border-top: 1px solid var(--border); }
.big-lane .map-lane-head { padding: 8px 12px; }
.big-lane .map-lane-name { font-size: 13.5px; }
.big-lane .map-lane-head .map-counts { font-size: 11.5px; }
/* ---- the board's regions inside panes ---- */
.big-wall .board-region { padding: 8px 10px; }
.big-wall .board-h { position: static; padding: 0 0 6px; background: transparent; font-size: 11px; }
.big-wall .board-list { gap: 4px; }
.big-wall .board-card { padding: 7px 10px; border-color: transparent; border-radius: var(--radius-sm); background: transparent; outline: none; }
.big-wall .board-card:hover { border-color: var(--border); }
.big-wall .board-card.is-focus { background: color-mix(in srgb, var(--accent) 13%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.big-wall .board-run { padding: 7px 10px; }
.big-wall .board-run .avatar { width: 26px; height: 26px; font-size: 11px; margin-top: 1px; }
.big-wall .board-run-title { font-size: 1em; -webkit-line-clamp: 1; }
.big-wall .board-elapsed { font-size: 1.15em; }
.big-wall .board-run-meta, .big-wall .board-run-who { font-size: .92em; }
.big-wall .board-landed-title { font-size: 1em; }
.big-wall .board-thumb { width: 24px; height: 32px; }
.big-wall .board-landed .board-thumb img { width: 100%; height: 100%; }
.big-wall .board-app-name { font-size: 1em; }
.big-wall .board-quiet { padding: 4px 0; color: var(--faint); }
/* ---- the run: the transcript fills the pane ---- */
.big-run { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.big-run .run-live { margin: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.big-run .run-log { flex: 1; min-height: 0; max-height: none !important; border: 0; border-radius: 0; background: transparent; font-size: 13px; padding: 8px 12px; }
.big-run .run-steer { border: 0; border-top: 1px solid var(--border); border-radius: 0; background: var(--card); padding: 8px 12px; }
.big-run .run-steer textarea { min-height: 32px; font-size: 13px; }
.big-run .run-actions { margin: 0; }
.big-run-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--muted-fg); }
.big-run-meta h1 { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.big-run-meta .num { font-family: var(--mono); }
.big-run-meta .run-summary { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--muted-fg); }
/* ---- the footer line ---- */
.big-foot { display: flex; align-items: center; gap: 4px 14px; padding: 0 12px; border-top: 1px solid var(--border); color: var(--muted-fg); font-size: 12px; white-space: nowrap; overflow: hidden; }
.big-key { display: inline-flex; align-items: center; gap: 3px; }
.big-key kbd + kbd { margin-left: -1px; }
.big-key kbd:last-of-type { margin-right: 3px; }
.big-foot .spacer { flex: 1; }
.big-foot .big-foot-view { color: var(--faint); font-family: var(--mono); font-size: 11.5px; }
/* ---- the line: command, filter, or a word to the crew ---- */
.big-line {
  position: fixed; left: var(--gap); right: var(--gap); bottom: var(--line); z-index: 5;
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  background: var(--card); border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
}
.big-line-mark { font-family: var(--mono); font-weight: 600; color: var(--accent); min-width: 1ch; }
.big-line[data-mode="say"] .big-line-mark { color: var(--success); }
.big-line-in { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--fg); font: inherit; font-family: var(--mono); font-size: 13px; outline: none; padding: 0; }
.big-line-note { font-size: 12px; color: var(--muted-fg); white-space: nowrap; }
.big-line-note[data-tone="danger"] { color: var(--danger); }
/* ---- the key sheet ---- */
.big-help { width: min(720px, 92vw); max-height: 86dvh; overflow: auto; }
.big-help h2 { font-size: 13px; margin: 0 0 8px; }
.big-help h2 + h2 { margin-top: 16px; }
.big-help table { width: 100%; border-collapse: collapse; }
.big-help td { padding: 4px 10px 4px 0; vertical-align: top; font-size: 13px; }
.big-help td:first-child { width: 12em; white-space: nowrap; }
.big-help kbd + kbd { margin-left: 3px; }
.big-help .big-cmd { font-family: var(--mono); color: var(--fg); }
.big-help .big-cmd i { color: var(--muted-fg); font-style: normal; }
.big-help .big-help-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
.big-help p { margin: 10px 0 0; color: var(--faint); font-size: 12px; }
/* ---- filtered away ---- */
.big [data-filtered] { display: none; }
/* ---- narrow: stacked, the body scrolls ---- */
@media (max-width: 899px) {
  .big { height: auto; min-height: 100dvh; grid-template-rows: var(--line) minmax(0, 1fr) var(--line); overflow: visible; }
  .big-body[data-layout] { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .big-pane { min-height: 220px; max-height: 60dvh; }
  .big-row[data-kind="app"] { grid-template-columns: minmax(0, 1fr) auto auto; }
  .big-row[data-kind="app"] .big-spend, .big-row[data-kind="app"] .big-word { display: none; }
  .big-row[data-kind="run"] { grid-template-columns: auto minmax(0, 1fr) auto; }
  .big-row[data-kind="run"] .big-t { grid-column: 2; }
  .big-row[data-kind="run"] .big-cost, .big-row[data-kind="run"] .big-word { display: none; }
  .big-row[data-kind="decision"] { grid-template-columns: 6em minmax(0, 1fr) auto; }
  .big-row[data-kind="decision"] .big-p, .big-row[data-kind="decision"] .big-when { display: none; }
  .big-foot { overflow: auto; }
  .big-foot .big-foot-view { display: none; }
}
@media (min-width: 1600px) { .big { font-size: 14px; } }
`;
@@ -1,474 +0,0 @@
/**
 * The big view: one keyboard-first frame over the whole forge. Anonymous
 * is sent to sign in; every view renders the shell — header, panes,
 * footer — with live regions; the app view lists a run in flight and an
 * ask with its keys; the command line's targets are real pages; and the
 * sheet lists every key the footer shows. The pure model is tested on
 * its own: where a step lands, what a command means.
 */
import { afterAll, beforeAll, describe, expect, test } from "bun:test";
import { mkdtemp, rm } from "node:fs/promises";
import { tmpdir } from "node:os";
import { join } from "node:path";
import { createApp, type App } from "../src/app.ts";
import { enableApp } from "../src/actions/apps.ts";
import { addToCrew, createAgent } from "../src/actions/crew.ts";
import { openIssue } from "../src/actions/issues.ts";
import { openPull } from "../src/actions/pulls.ts";
import { commitToBranch, createRepo } from "../src/actions/repos.ts";
import { updateRepoSettings, type Repo } from "../src/core/repos.ts";
import { claimRun, createRun, finishRun } from "../src/core/runs.ts";
import { createUser, getUserByName, type User } from "../src/core/users.ts";
import { serve, type Servers } from "../src/http/server.ts";
import {
  backUrl,
  bigUrl,
  COMMANDS,
  findApp,
  footKeysFor,
  halfPage,
  keysFor,
  moveIndex,
  nextPane,
  parseCommand,
} from "../src/web/big-model.ts";
// ---- the model ----
describe("the big view's model", () => {
  test("a step lands where vim would: first row on the way down, last on the way up, never past an end", () => {
    expect(moveIndex(0, -1, 1)).toBe(-1);
    expect(moveIndex(3, -1, 1)).toBe(0);
    expect(moveIndex(3, -1, -1)).toBe(2);
    expect(moveIndex(3, 0, 1)).toBe(1);
    expect(moveIndex(3, 2, 1)).toBe(2);
    expect(moveIndex(3, 0, -1)).toBe(0);
    expect(moveIndex(10, 2, 5)).toBe(7);
    expect(moveIndex(10, 8, 5)).toBe(9);
    expect(halfPage(9)).toBe(4);
    expect(halfPage(1)).toBe(1);
  });
  test("panes wrap both ways", () => {
    expect(nextPane(4, 3, 1)).toBe(0);
    expect(nextPane(4, 0, -1)).toBe(3);
    expect(nextPane(4, -1, 1)).toBe(1);
    expect(nextPane(0, 0, 1)).toBe(-1);
  });
  test("addresses and their parents", () => {
    expect(bigUrl({})).toBe("/big");
    expect(bigUrl({ app: "alice/notes" })).toBe("/big?app=alice%2Fnotes");
    expect(bigUrl({ app: "alice/notes", list: "runs" })).toBe(
      "/big?app=alice%2Fnotes&list=runs",
    );
    expect(bigUrl({ run: "r1" })).toBe("/big?run=r1");
    expect(bigUrl({ view: "board" })).toBe("/big?view=board");
    expect(backUrl({ app: "alice/notes", list: "runs" })).toBe(
      "/big?app=alice%2Fnotes",
    );
    expect(backUrl({ app: "alice/notes" })).toBe("/big");
    expect(backUrl({ run: "r1" }, "alice/notes")).toBe(
      "/big?app=alice%2Fnotes",
    );
    expect(backUrl({ view: "map" })).toBe("/big");
  });
  test("a command means one thing, or says why not", () => {
    const apps = ["alice/notes", "alice/shop", "bob/tempo"];
    expect(findApp("tempo", apps)).toBe("bob/tempo");
    expect(findApp("Alice/Shop", apps)).toBe("alice/shop");
    expect(findApp("no", apps)).toBe("alice/notes");
    expect(findApp("zz", apps)).toBeUndefined();
    const here = { apps };
    expect(parseCommand("app tempo", here)).toEqual({
      kind: "go",
      url: "/big?app=bob%2Ftempo",
    });
    expect(parseCommand(":tempo", here)).toEqual({
      kind: "go",
      url: "/big?app=bob%2Ftempo",
    });
    expect(parseCommand("map", here)).toEqual({
      kind: "go",
      url: "/big?view=map",
    });
    expect(parseCommand("map", { ...here, app: "alice/shop" })).toEqual({
      kind: "go",
      url: "/big?app=alice%2Fshop&list=map",
    });
    expect(parseCommand("runs", here)).toEqual({
      kind: "error",
      message: "open an app first, then :runs",
    });
    expect(parseCommand("pulls", { ...here, app: "alice/shop" })).toEqual({
      kind: "go",
      url: "/big?app=alice%2Fshop&list=pulls",
    });
    expect(parseCommand("app", here)).toEqual({
      kind: "error",
      message: "app which?",
    });
    expect(parseCommand("app nothing", here).kind).toBe("error");
    expect(parseCommand("help", here)).toEqual({ kind: "help" });
    expect(parseCommand("q", here)).toEqual({ kind: "go", url: "/" });
    expect(parseCommand("q", { ...here, app: "alice/shop" })).toEqual({
      kind: "go",
      url: "/alice/shop",
    });
    expect(parseCommand("   ", here)).toEqual({ kind: "none" });
    expect(parseCommand("frobnicate", here).kind).toBe("error");
  });
  test("the footer is a subset of the sheet, for every view", () => {
    for (const view of [
      "home",
      "app",
      "run",
      "board",
      "map",
      "list",
    ] as const) {
      const sheet = new Set(keysFor(view).map((k) => k.keys.join(" ")));
      for (const k of footKeysFor(view))
        expect(sheet.has(k.keys.join(" "))).toBe(true);
    }
  });
});
// ---- the pages ----
describe("the big view", () => {
  let dataDir: string;
  let app: App;
  let servers: Servers;
  let base: string;
  let alice: User;
  let notes: Repo;
  let shop: Repo;
  let cookie: string;
  const get = (path: string, extra: Record<string, string> = {}) =>
    fetch(`${base}${path}`, {
      headers: { cookie, ...extra },
      redirect: "manual",
    });
  async function makeApp(name: string): Promise<Repo> {
    const made = await createRepo(app, alice, { name, visibility: "private" });
    if (!made.ok) throw new Error(String(made.error));
    const seeded = await commitToBranch(app, alice, made.value, {
      message: "Start",
      files: [
        {
          path: "package.json",
          content: `{"name":"${name}","scripts":{"start":"bun run server.ts"}}\n`,
        },
        {
          path: "server.ts",
          content:
            "Bun.serve({ port: Number(process.env.PORT), fetch: () => new Response('ok') });\n",
        },
      ],
    });
    if (!seeded.ok) throw new Error(JSON.stringify(seeded.error));
    const enabled = await enableApp(app, alice, made.value, { slug: name });
    if (!enabled.ok) throw new Error(String(enabled.error));
    return made.value;
  }
  /** The text of every `<kbd>` inside the element with this id. */
  function kbdsIn(html: string, id: string): Set<string> {
    const start = html.indexOf(`id="${id}"`);
    const open = html.lastIndexOf("<", start);
    const tag = html.slice(open + 1, html.indexOf(" ", open));
    const close = html.indexOf(`</${tag}>`, start);
    const slice = html.slice(start, close);
    return new Set(
      [...slice.matchAll(/<kbd[^>]*>([^<]*)<\/kbd>/g)].map((m) => m[1]!),
    );
  }
  beforeAll(async () => {
    dataDir = await mkdtemp(join(tmpdir(), "forge-big-"));
    app = createApp({ dataDir, port: 0 });
    servers = await serve(app);
    base = servers.url;
    const a = await createUser(app.db, {
      username: "alice",
      email: "[email protected]",
      password: "a-good-passphrase",
      adminIfFirst: true,
    });
    if (!a.ok) throw new Error(a.error);
    alice = a.value;
    cookie = (
      (
        await fetch(`${base}/signin`, {
          method: "POST",
          body: new URLSearchParams({
            username: "alice",
            password: "a-good-passphrase",
          }),
          redirect: "manual",
        })
      ).headers.get("set-cookie") ?? ""
    ).split(";")[0]!;
    notes = await makeApp("notes");
    shop = await makeApp("shop");
    const scout = await createAgent(app, alice, { username: "scout" });
    if (!scout.ok) throw new Error(String(scout.error));
    expect(addToCrew(app, alice, notes, "scout").ok).toBe(true);
    expect(addToCrew(app, alice, shop, "scout").ok).toBe(true);
    notes = updateRepoSettings(app.db, notes, {
      autonomy: "autonomous",
      autonomyDirection: "Notes that load fast.\nAnd stay small.",
      autonomyCeilingUsd: 20,
      autonomySlots: 2,
      autonomyBy: alice.id,
    });
    shop = updateRepoSettings(app.db, shop, {
      autonomy: "assisted",
      autonomyDirection: "Sell one real thing.",
      autonomyCeilingUsd: 10,
      autonomySlots: 1,
      autonomyBy: alice.id,
    });
  }, 30_000);
  afterAll(async () => {
    servers.stop();
    app.close();
    await rm(dataDir, { recursive: true, force: true });
  });
  test("anonymous is sent to sign in, and comes back here", async () => {
    const res = await fetch(`${base}/big?app=alice%2Fnotes`, {
      redirect: "manual",
    });
    expect(res.status).toBe(303);
    expect(res.headers.get("location")).toBe(
      "/signin?next=%2Fbig%3Fapp%3Dalice%252Fnotes",
    );
  });
  test("home: the shell, two live panes, every app as a row, the focused one at a glance", async () => {
    const res = await get("/big");
    expect(res.status).toBe(200);
    const html = await res.text();
    expect(html).toContain('<html lang="en" data-theme="dark">');
    expect(html).not.toContain('class="topbar"');
    expect(html).toMatch(/<main\s+class="bare"\s+id="main"\s*>/);
    expect(html).toContain('id="big"');
    expect(html).toContain('data-view="home"');
    expect(html).toContain('data-apps="alice/shop alice/notes"');
    expect(html).toContain('<header class="big-top">');
    expect(html).toContain('id="big-clock"');
    expect(html).toContain('id="big-live"');
    expect(html).toContain('<footer class="big-foot" id="big-foot">');
    expect(html).toContain('id="big-line"');
    expect(html).toContain('id="big-help"');
    expect(html).toMatch(
      /id="big-apps"\s+data-live="run\.\*,pull\.\*,issue\.\*,check\.\*"/,
    );
    expect(html).toMatch(
      /id="big-glance"\s+data-live="run\.\*,pull\.\*,issue\.\*,check\.\*"/,
    );
    // The rows: name, autonomy word, working, asks, spend against the ceiling.
    expect(html).toContain('data-key="app:alice/notes"');
    expect(html).toContain('data-href="/big?app=alice%2Fnotes"');
    expect(html).toContain('data-say="/alice/notes/tell"');
    expect(html).toContain('data-word="autonomous"');
    expect(html).toContain('data-word="assisted"');
    expect(html).toMatch(/\$0\.00\s*\/\s*\$20/);
    // The glance: the direction's first line only, and its own lists.
    expect(html).toContain('data-for="app:alice/notes"');
    expect(html).toContain("Notes that load fast.");
    expect(html).not.toContain("And stay small.");
    expect(html).toContain("Nobody is working here right now.");
    expect(html).toContain("new EventSource('/events')");
    // A viewer who chose a theme keeps it.
    const paper = await (
      await get("/big", { cookie: `${cookie}; forge_theme=paper` })
    ).text();
    expect(paper).toContain('data-theme="paper"');
  });
  test("app: a run in flight with its clock and stop key, the map, landed", async () => {
    const scout = getUserByName(app.db, "scout")!;
    const told = openIssue(app, alice, shop, {
      title: "Checkout keeps the total steady",
    });
    if (!told.ok) throw new Error(String(told.error));
    const running = createRun(app.db, {
      repoId: shop.id,
      kind: "agent",
      issueId: told.value.id,
      actorId: scout.id,
      reason: "assigned",
    });
    claimRun(app.db, running.id);
    // A green pull the crew opened: the shop is assisted, so it asks.
    const branch = await commitToBranch(app, alice, shop, {
      branch: "crew/wrap",
      base: "main",
      message: "Gift wrap",
      files: [{ path: "WRAP.md", content: "wrap\n" }],
    });
    if (!branch.ok) throw new Error(JSON.stringify(branch.error));
    const opened = await openPull(app, scout, shop, {
      title: "Gift wrap as a line item",
      body: "",
      baseBranch: "main",
      headBranch: "crew/wrap",
    });
    if (!opened.ok) throw new Error(String(opened.error));
    const pull = opened.value;
    const check = createRun(app.db, {
      repoId: shop.id,
      kind: "check",
      issueId: pull.id,
      env: `pull-${pull.number}`,
      commitOid: pull.headOid,
      reason: "pull",
    });
    claimRun(app.db, check.id);
    finishRun(app.db, check.id, { state: "ok", summary: "check passed" });
    const html = await (await get("/big?app=alice%2Fshop")).text();
    expect(html).toContain('data-view="app"');
    expect(html).toContain('data-here="alice/shop"');
    expect(html).toContain('data-say="/alice/shop/tell"');
    expect(html).toMatch(
      /id="big-working"\s+data-live="run\.\*"\s+data-live-repo="alice\/shop"/,
    );
    expect(html).toMatch(
      /id="big-map"\s+data-live="run\.\*,issue\.\*,pull\.\*"/,
    );
    expect(html).toMatch(
      /id="big-landed"\s+data-live="pull\.merged,run\.finished"/,
    );
    // The run: who, what, the clock from when it started, and x to stop.
    const working = html.slice(
      html.indexOf('id="big-working"'),
      html.indexOf('id="big-map"'),
    );
    expect(working).toContain(`data-key="run:${running.id}"`);
    expect(working).toContain(`data-href="/big?run=${running.id}"`);
    expect(working).toContain('data-state="working"');
    expect(working).toContain("Checkout keeps the total steady");
    expect(working).toContain("building it");
    expect(working).toMatch(/data-started="[^"]+"/);
    expect(working).toContain(`data-act="x"`);
    expect(working).toContain(`form="stop-${running.id}"`);
    expect(working).toContain(`action="/alice/shop/runs/${running.id}/cancel"`);
    expect(working).toContain("<b>1</b> of 1 slots");
    // The map drew the issue the crew is on, ringed, with a key.
    const map = html.slice(
      html.indexOf('id="big-map"'),
      html.indexOf('id="big-landed"'),
    );
    expect(map).toContain('class="map-node"');
    expect(map).toContain('data-state="working"');
    expect(map).toContain(`data-key="issue:${told.value.id}"`);
    expect(map).toContain("<b>1</b> working");
    // The footer offers the lists, each with where it goes.
    expect(html).toMatch(
      /data-k="r"\s+data-go="\/big\?app=alice%2Fshop&amp;list=runs"/,
    );
    expect(html).toMatch(
      /data-k="p"\s+data-go="\/big\?app=alice%2Fshop&amp;list=pulls"/,
    );
    expect(html).toMatch(
      /data-k="m"\s+data-go="\/big\?app=alice%2Fshop&amp;list=map"/,
    );
    // The run's own view: the transcript, following, and the steer line.
    const run = await (await get(`/big?run=${running.id}`)).text();
    expect(run).toContain('data-view="run"');
    expect(run).toContain('data-back="/big?app=alice%2Fshop"');
    expect(run).toContain('id="run-log"');
    expect(run).toContain(
      `data-stream="/api/v1/repos/alice/shop/runs/${running.id}/log?follow=1"`,
    );
    expect(run).toContain('id="run-steer"');
    expect(run).toContain(`action="/alice/shop/runs/${running.id}/steer"`);
    expect(run).toContain('data-running="1"');
    expect(run).toMatch(/id="run-stop"\s+data-act="x"/);
    // The lists.
    const runs = await (await get("/big?app=alice%2Fshop&list=runs")).text();
    expect(runs).toContain('data-view="list"');
    expect(runs).toContain(`data-key="run:${running.id}"`);
    expect(runs).toContain(`data-key="run:${check.id}"`);
    const pulls = await (await get("/big?app=alice%2Fshop&list=pulls")).text();
    expect(pulls).toContain(`data-key="pull:${pull.id}"`);
    expect(pulls).toContain('data-word="green"');
    expect(pulls).toContain(`form="ship-${pull.id}"`);
    const issues = await (
      await get("/big?app=alice%2Fshop&list=issues")
    ).text();
    expect(issues).toContain(`data-key="issue:${told.value.id}"`);
    expect(issues).toContain('data-word="working"');
    // Home now counts them.
    const home = await (await get("/big")).text();
    expect(home).toMatch(/1\s+working/);
    // Somebody else's app, or none: not found, never a hint of it.
    expect((await get("/big?app=alice%2Fnowhere")).status).toBe(404);
    expect((await get("/big?run=nothing")).status).toBe(404);
  });
  test("board and map inside the shell, focusable", async () => {
    const board = await (await get("/big?view=board")).text();
    expect(board).toContain('data-view="board"');
    expect(board).toContain('data-layout="wall"');
    expect(board).toMatch(/id="working"\s+data-live="run\.\*"/);
    expect(board).toMatch(/id="today"\s+data-live="run\.\*,pull\.merged"/);
    expect(board).toContain('class="board-card board-run"');
    expect(board).toMatch(/data-key="run:[^"]+"/);
    expect(board).toMatch(/data-key="app:alice\/notes"/);
    const map = await (await get("/big?view=map")).text();
    expect(map).toContain('data-view="map"');
    expect(map).toMatch(
      /id="map-lanes"\s+data-live="run\.\*,issue\.\*,pull\.\*"/,
    );
    expect(map).toContain('data-key="lane:alice/shop"');
    expect(map).toContain('data-href="/big?app=alice%2Fshop"');
    expect(map).toContain('class="map-lane"');
  });
  test("the command line's targets are pages, and the sheet lists every key the footer shows", async () => {
    const home = await (await get("/big")).text();
    const apps = /data-apps="([^"]*)"/.exec(home)![1]!.split(" ");
    for (const c of COMMANDS) {
      if (c.name === "help") continue;
      const parsed = parseCommand(
        c.arg === undefined ? c.name : `${c.name} shop`,
        { app: "alice/shop", apps },
      );
      expect(parsed.kind).toBe("go");
      if (parsed.kind !== "go") continue;
      const res = await get(parsed.url);
      expect([200, 303]).toContain(res.status);
      if (res.status === 303) {
        // :q leaves for the web UI, which sends a studio reader to its home.
        expect(res.headers.get("location")).not.toContain("/signin");
      }
    }
    for (const path of [
      "/big",
      "/big?app=alice%2Fshop",
      "/big?app=alice%2Fshop&list=runs",
      "/big?view=board",
      "/big?view=map",
    ]) {
      const html = await (await get(path)).text();
      const foot = kbdsIn(html, "big-foot");
      const sheet = kbdsIn(html, "big-help");
      expect(foot.size).toBeGreaterThan(5);
      for (const k of foot) expect(sheet.has(k)).toBe(true);
      // Every command has a line on the sheet.
      for (const c of COMMANDS) expect(html).toContain(`:${c.name}`);
    }
  });
});
@@ -1,6 +1,7 @@
/**
 * The board: a live wall of the crews at work. Signed in, four live
 * regions; a run in flight and a merged pull on it; `?apps=` narrows it;
 * `?wall` is its wall mode, where every old `/big` address lands;
 * anonymous is sent to sign in.
 */
import { afterAll, beforeAll, describe, expect, test } from "bun:test";
@@ -279,6 +280,52 @@
describe("the board", () => {
    expect(home).toContain('href="/board"');
    expect(home).toContain("Board");
  });
  test("?wall is the wall mode: the same live regions, marked for the far screen", async () => {
    const plain = await (await get("/board")).text();
    expect(plain).not.toContain("data-wall");
    const res = await get("/board?apps=alice/notes&wall");
    expect(res.status).toBe(200);
    const html = await res.text();
    expect(html).toMatch(/<div class="board"\s+data-wall="">/);
    expect(html).toMatch(/id="working"\s+data-live="run\.\*"/);
    expect(html).toMatch(/class="board-scope"\s*>notes</);
  });
  // The big view's every address, each its own test: all land on the wall mode.
  const oldRoutes: [string, string][] = [
    ["/big", "/board?wall"],
    ["/big?view=board", "/board?wall"],
    ["/big?view=map", "/board?wall"],
    ["/big?app=alice/notes", "/board?apps=alice%2Fnotes&wall"],
    ["/big?app=alice%2Fnotes&list=runs", "/board?apps=alice%2Fnotes&wall"],
    ["/big?app=alice/notes&list=issues", "/board?apps=alice%2Fnotes&wall"],
    ["/big?app=alice/notes&list=pulls", "/board?apps=alice%2Fnotes&wall"],
    ["/big?app=alice/notes&list=map", "/board?apps=alice%2Fnotes&wall"],
    ["/big?run=0123456789abcdef", "/board?wall"],
    // An address that was never an app keeps no scope.
    ["/big?app=../../etc", "/board?wall"],
    ["/big?app=%22%3E%3Cscript%3E", "/board?wall"],
  ];
  for (const [from, to] of oldRoutes)
    test(`${from} lands on ${to}`, async () => {
      const res = await get(from);
      expect(res.status).toBe(303);
      expect(res.headers.get("location")).toBe(to);
      const landed = await get(to);
      expect(landed.status).toBe(200);
      expect(await landed.text()).toContain("data-wall");
    });
  test("anonymous at /big reaches the sign-in by way of the wall", async () => {
    const res = await fetch(`${base}/big?app=alice/notes`, {
      redirect: "manual",
    });
    expect(res.status).toBe(303);
    expect(res.headers.get("location")).toBe("/board?apps=alice%2Fnotes&wall");
    const next = await fetch(`${base}/board?wall`, { redirect: "manual" });
    expect(next.headers.get("location")).toMatch(/^\/signin\?next=/);
  });
});
describe("the board's forge strip", () => {
		@@ -387,6 +387,10 @@ three statements, `standings`). Every region
387	387	is live — it swaps itself when a matching event lands, and the dot in the
388	388	corner says whether the stream is connected. `?apps=a,b` narrows it to some
389	389	apps. Keys: `f` fullscreen, `1`–`4` one region full-bleed, `0` all.
	390	`?wall` is its one wall mode, for a screen across the room that nobody
	391	touches: the same regions in larger type, no key hints, no pointer. The
	392	old big view folded into it — `/big` and every address it had land on
	393	`/board?wall`, keeping `?app=owner/name` as the board's `?apps=`.
390	394	Everything links somewhere; nothing needs a click. The board is a wall for
391	395	apps you can write to: a public app someone else owns can still appear in
392	396	it (`listReposVisibleTo` includes every public repo), but its cost, and
		@@ -157,8 +157,7 @@ import {
157	157	runsList,
158	158	} from "../web/pages/runs.ts";
159	159	import { lookImage } from "../web/pages/looks.ts";
160		import { boardPage } from "../web/pages/board.ts";
161		import { bigPage } from "../web/pages/big.ts";
	160	import { bigRedirect, boardPage } from "../web/pages/board.ts";
162	161	import {
163	162	agentCreate,
164	163	agentDelete,
		@@ -436,8 +435,8 @@ export function buildRouter(): Router<Handler> {
436	435	router.add("GET", "/board", boardPage);
437	436	// One screen for "is everything fine?": what asks the viewer (docs/STUDIO.md).
438	437	router.add("GET", "/asks", asksPage);
439		// The big view: the whole forge as one keyboard-first frame.
440		router.add("GET", "/big", bigPage);
	438	// The big view, folded into the board: every old address lands on its wall mode.
	439	router.add("GET", "/big", bigRedirect);
441	440	router.add("GET", "/search", searchPage);
442	441	// The JS-free half of every destructive action. Two literal segments, so it
443	442	// is registered before /:owner/:name can claim the shape.
		@@ -1,222 +0,0 @@
1		/**
2		* The big view's pure half: where a movement lands, what a typed command
3		* means, and the key sheet every view is drawn from. No DOM in here, so
4		* the page renders the footer and the sheet from the same table the client
5		* acts on, and a test can hold them against each other. The client script
6		* (`big.ts`) carries these functions by their source (`String(fn)`), so
7		* the browser runs exactly what the tests ran.
8		*/
9
10		export type View = "home" \| "app" \| "run" \| "board" \| "map" \| "list";
11
12		export type ListKind = "runs" \| "issues" \| "pulls" \| "map";
13
14		// ---- where things are ----
15
16		/** The one shape of a big-view address: what is open, and how deep. */
17		export interface Where {
18		readonly app?: string \| undefined;
19		readonly list?: ListKind \| undefined;
20		readonly run?: string \| undefined;
21		readonly view?: "board" \| "map" \| undefined;
22		}
23
24		export function bigUrl(where: Where): string {
25		const q = new URLSearchParams();
26		if (where.run !== undefined) q.set("run", where.run);
27		else if (where.app !== undefined) {
28		q.set("app", where.app);
29		if (where.list !== undefined) q.set("list", where.list);
30		} else if (where.view !== undefined) q.set("view", where.view);
31		const text = q.toString();
32		return text === "" ? "/big" : `/big?${text}`;
33		}
34
35		/** One level up: a list or a run to its app, an app or a wall to home. */
36		export function backUrl(where: Where, runApp?: string): string {
37		if (where.run !== undefined)
38		return runApp === undefined ? "/big" : bigUrl({ app: runApp });
39		if (where.app !== undefined && where.list !== undefined)
40		return bigUrl({ app: where.app });
41		return "/big";
42		}
43
44		// ---- the focus ----
45
46		/**
47		* Where a step of `step` rows lands, over `count` rows, from `at` (-1 for
48		* no focus yet). A first step down lands on the first row, a first step up
49		* on the last; nothing ever wraps, as in vim.
50		*/
51		export function moveIndex(count: number, at: number, step: number): number {
52		if (count === 0) return -1;
53		const next = at < 0 ? (step > 0 ? 0 : count - 1) : at + step;
54		return Math.max(0, Math.min(count - 1, next));
55		}
56
57		/** The next pane over, wrapping: tab from the last pane lands on the first. */
58		export function nextPane(count: number, at: number, step: number): number {
59		if (count === 0) return -1;
60		return ((((at < 0 ? 0 : at) + step) % count) + count) % count;
61		}
62
63		/** A half page: half the rows a pane shows, and one at least. */
64		export function halfPage(visible: number): number {
65		return Math.max(1, Math.floor(visible / 2));
66		}
67
68		// ---- the command line ----
69
70		export interface Command {
71		readonly name: string;
72		readonly arg?: string \| undefined;
73		readonly does: string;
74		}
75
76		/** What `:` takes. `:app` is the one that needs a word after it. */
77		export const COMMANDS: readonly Command[] = [
78		{ name: "app", arg: "name", does: "open an app" },
79		{ name: "home", does: "every app" },
80		{ name: "board", does: "the wall: working, landed, decided, today" },
81		{ name: "map", does: "every app's map, one lane each" },
82		{ name: "runs", does: "this app's runs" },
83		{ name: "issues", does: "this app's open issues" },
84		{ name: "pulls", does: "this app's open pulls" },
85		{ name: "help", does: "the key sheet" },
86		{ name: "q", does: "leave for the web UI" },
87		];
88
89		export type Parsed =
90		\| { readonly kind: "go"; readonly url: string }
91		\| { readonly kind: "help" }
92		\| { readonly kind: "none" }
93		\| { readonly kind: "error"; readonly message: string };
94
95		/** The app a word names, from the ones the viewer can see (`owner/name`). */
96		export function findApp(
97		word: string,
98		apps: readonly string[],
99		): string \| undefined {
100		const w = word.toLowerCase();
101		const exact = apps.find(
102		(a) => a.toLowerCase() === w \|\| a.toLowerCase().split("/")[1] === w,
103		);
104		if (exact !== undefined) return exact;
105		return apps.find(
106		(a) =>
107		a.toLowerCase().startsWith(w) \|\|
108		(a.toLowerCase().split("/")[1] ?? "").startsWith(w),
109		);
110		}
111
112		/**
113		* What a typed command means. `:app notes` and a bare `:notes` both open
114		* the app; the list commands need an app open; anything else is an error
115		* that says so, never a guess.
116		*/
117		export function parseCommand(
118		text: string,
119		here: { readonly app?: string \| undefined; readonly apps: readonly string[] },
120		): Parsed {
121		const words = text.trim().replace(/^:/, "").split(/\s+/).filter(Boolean);
122		const head = (words[0] ?? "").toLowerCase();
123		if (head === "") return { kind: "none" };
124		const q = (w: Record<string, string>): string => {
125		const p = new URLSearchParams(w);
126		return `/big?${p.toString()}`;
127		};
128		if (head === "app") {
129		const word = words[1];
130		if (word === undefined) return { kind: "error", message: "app which?" };
131		const app = findApp(word, here.apps);
132		return app === undefined
133		? { kind: "error", message: `no app called ${word}` }
134		: { kind: "go", url: q({ app }) };
135		}
136		if (head === "home") return { kind: "go", url: "/big" };
137		if (head === "board") return { kind: "go", url: q({ view: "board" }) };
138		if (head === "map")
139		return {
140		kind: "go",
141		url:
142		here.app === undefined
143		? q({ view: "map" })
144		: q({ app: here.app, list: "map" }),
145		};
146		if (head === "runs" \|\| head === "issues" \|\| head === "pulls")
147		return here.app === undefined
148		? { kind: "error", message: `open an app first, then :${head}` }
149		: { kind: "go", url: q({ app: here.app, list: head }) };
150		if (head === "help" \|\| head === "?") return { kind: "help" };
151		if (head === "q" \|\| head === "quit")
152		return {
153		kind: "go",
154		url: here.app === undefined ? "/" : `/${here.app}`,
155		};
156		const app = findApp(head, here.apps);
157		return app === undefined
158		? { kind: "error", message: `unknown: ${head}` }
159		: { kind: "go", url: q({ app }) };
160		}
161
162		// ---- the keys ----
163
164		export interface KeyHint {
165		/** The chips, as typed: `["j", "k"]`, `["ctrl-d"]`, `["1"–"9"]`. */
166		readonly keys: readonly string[];
167		readonly does: string;
168		/** Shown in the footer, not only on the sheet. */
169		readonly foot?: boolean;
170		}
171
172		const MOVE: readonly KeyHint[] = [
173		{ keys: ["h", "j", "k", "l"], does: "move", foot: true },
174		{ keys: ["↑", "↓", "←", "→"], does: "move" },
175		{ keys: ["g", "G"], does: "top, bottom" },
176		{ keys: ["ctrl-d", "ctrl-u"], does: "half a page" },
177		{ keys: ["tab", "1"], does: "next pane, pane 1–9" },
178		{ keys: ["enter"], does: "open", foot: true },
179		{ keys: ["esc"], does: "back", foot: true },
180		{ keys: ["o"], does: "open in the web UI, in a new tab" },
181		{ keys: [":"], does: "command", foot: true },
182		{ keys: ["/"], does: "filter", foot: true },
183		{ keys: ["?"], does: "help", foot: true },
184		{ keys: ["f"], does: "fullscreen" },
185		];
186
187		const BY_VIEW: Readonly<Record<View, readonly KeyHint[]>> = {
188		home: [{ keys: ["t"], does: "tell the focused app's crew", foot: true }],
189		app: [
190		{ keys: ["s"], does: "ship the focused green pull", foot: true },
191		{
192		keys: ["x"],
193		does: "stop the focused run, close the focused ask",
194		foot: true,
195		},
196		{ keys: ["t"], does: "tell the crew, or the focused ask", foot: true },
197		{ keys: ["r"], does: "runs", foot: true },
198		{ keys: ["i"], does: "issues", foot: true },
199		{ keys: ["p"], does: "pulls", foot: true },
200		{ keys: ["m"], does: "the map", foot: true },
201		],
202		run: [
203		{ keys: ["t"], does: "steer it", foot: true },
204		{ keys: ["x"], does: "stop it", foot: true },
205		],
206		board: [{ keys: ["0"], does: "every region" }],
207		map: [{ keys: ["enter"], does: "open the app" }],
208		list: [
209		{ keys: ["s"], does: "ship a green pull", foot: true },
210		{ keys: ["x"], does: "close it", foot: true },
211		],
212		};
213
214		/** Every key for a view: the shared movement first, then the view's own. */
215		export function keysFor(view: View): readonly KeyHint[] {
216		return [...MOVE, ...BY_VIEW[view]];
217		}
218
219		/** The footer's line: what fits on one row, in order. */
220		export function footKeysFor(view: View): readonly KeyHint[] {
221		return keysFor(view).filter((k) => k.foot === true);
222		}
		@@ -1,467 +0,0 @@
1		/**
2		* The big view's client: one focus model for the keyboard and a gamepad,
3		* one line for a command, a filter or a word to the crew, a small stack of
4		* where you came from, and the clocks. Everything a key does is a thing on
5		* the page already — a row's link, a row's button, the footer's own chips
6		* — so the sheet cannot promise what the page does not have.
7		*
8		* The pure parts (`big-model.ts`) are carried in by their source, so the
9		* browser runs exactly what the tests ran. Nothing here animates: the
10		* clock ticks once a second, and the rest waits for a key.
11		*/
12
13		import {
14		findApp,
15		halfPage,
16		moveIndex,
17		nextPane,
18		parseCommand,
19		} from "./big-model.ts";
20
21		const shared = [moveIndex, nextPane, halfPage, findApp, parseCommand]
22		.map(String)
23		.join("\n");
24
25		export const bigJs = /* js */ `
26		${shared}
27		(function () {
28		var doc = document;
29		var big = doc.getElementById('big');
30		if (!big) return;
31		var here = big.getAttribute('data-here') \|\| '';
32		var apps = (big.getAttribute('data-apps') \|\| '').split(' ').filter(Boolean);
33		var where = location.pathname + location.search;
34
35		// ---- memory: this browser's tab remembers where you were ----
36		function remember(k, v) { try { sessionStorage.setItem(k, JSON.stringify(v)); } catch (e) {} }
37		function recall(k) { try { var v = sessionStorage.getItem(k); return v ? JSON.parse(v) : null; } catch (e) { return null; } }
38
39		// ---- panes and rows ----
40		function panes() { return Array.prototype.slice.call(big.querySelectorAll('.big-pane')); }
41		function shown(el) { return !el.hasAttribute('data-filtered') && !el.closest('[hidden]'); }
42		function rowsOf(pane) { return pane ? Array.prototype.filter.call(pane.querySelectorAll('[data-key]'), shown) : []; }
43		function nameOf(pane) { return pane ? pane.getAttribute('data-pane') \|\| '' : ''; }
44		var paneAt = 0;
45		var keys = {};
46		function current() { return panes()[paneAt] \|\| null; }
47		function rowByKey(pane, key) {
48		var rows = rowsOf(pane);
49		for (var i = 0; i < rows.length; i++) if (rows[i].getAttribute('data-key') === key) return rows[i];
50		return null;
51		}
52		function focusedRow() { var p = current(); return p ? rowByKey(p, keys[nameOf(p)] \|\| '') : null; }
53		function paint() {
54		panes().forEach(function (p, i) {
55		p.classList.toggle('is-pane', i === paneAt);
56		var k = keys[nameOf(p)] \|\| '';
57		Array.prototype.forEach.call(p.querySelectorAll('.is-focus'), function (el) {
58		if (el.getAttribute('data-key') !== k) el.classList.remove('is-focus');
59		});
60		var el = rowByKey(p, k);
61		if (el) el.classList.add('is-focus');
62		});
63		glance();
64		remember('big:' + where, { pane: paneAt, keys: keys });
65		}
66		function settle(pane, row, scroll) {
67		if (!pane) return;
68		keys[nameOf(pane)] = row ? row.getAttribute('data-key') : '';
69		paint();
70		if (row && !mode) {
71		row.focus({ preventScroll: true });
72		if (scroll !== false) row.scrollIntoView({ block: 'nearest' });
73		}
74		}
75		function moveRow(step) {
76		var p = current(); if (!p) return;
77		var rows = rowsOf(p), r = focusedRow();
78		if (rows.length === 0) {
79		// A pane with no rows — a transcript — scrolls by the line instead.
80		var box = p.querySelector('.run-log') \|\| p.querySelector('.big-scroll');
81		if (box) box.scrollTop += step * 40;
82		return;
83		}
84		var next = moveIndex(rows.length, r ? rows.indexOf(r) : -1, step);
85		if (next >= 0) settle(p, rows[next]);
86		}
87		function movePane(step) {
88		var all = panes();
89		paneAt = nextPane(all.length, paneAt, step);
90		var p = current();
91		settle(p, focusedRow() \|\| rowsOf(p)[0] \|\| null);
92		}
93		function toPane(n) {
94		if (n >= panes().length) return;
95		paneAt = n;
96		var p = current();
97		settle(p, focusedRow() \|\| rowsOf(p)[0] \|\| null);
98		}
99		function jump(end) {
100		var p = current(); if (!p) return;
101		var rows = rowsOf(p);
102		settle(p, end === 'top' ? rows[0] \|\| null : rows[rows.length - 1] \|\| null);
103		}
104		function pageRows(p) {
105		var rows = rowsOf(p);
106		if (rows.length === 0) return 1;
107		var h = rows[0].getBoundingClientRect().height \|\| 24;
108		var box = p.querySelector('.big-scroll') \|\| p;
109		return Math.max(1, Math.floor(box.clientHeight / h));
110		}
111
112		// ---- the glance: beside the apps, the focused app at a glance ----
113		function glance() {
114		var pane = big.querySelector('[data-pane="glance"]');
115		if (!pane) return;
116		var k = keys['apps'] \|\| '', on = null;
117		Array.prototype.forEach.call(pane.querySelectorAll('[data-for]'), function (g) {
118		var hit = g.getAttribute('data-for') === k;
119		g.hidden = !hit;
120		if (hit) on = g;
121		});
122		var empty = pane.querySelector('.big-glance-empty');
123		if (empty) empty.hidden = !!on;
124		var note = pane.querySelector('.big-h-note');
125		if (note) note.textContent = on ? on.getAttribute('data-name') \|\| '' : '';
126		}
127
128		// ---- navigation: a stack of where you came from ----
129		function go(url) {
130		var stack = recall('big:stack') \|\| [];
131		stack.push(where);
132		if (stack.length > 30) stack.shift();
133		remember('big:stack', stack);
134		location.href = url;
135		}
136		function back() {
137		var stack = recall('big:stack') \|\| [];
138		var prev = stack.pop();
139		remember('big:stack', stack);
140		location.href = prev && prev !== where ? prev : big.getAttribute('data-back') \|\| '/big';
141		}
142		// What a row opens: where it says, else — for a run — its page here,
143		// else the link it is or holds.
144		function hrefOf(row) {
145		if (row.getAttribute('data-href')) return row.getAttribute('data-href');
146		var key = row.getAttribute('data-key') \|\| '';
147		if (key.indexOf('run:') === 0) return '/big?run=' + encodeURIComponent(key.slice(4));
148		if (row.tagName.toLowerCase() === 'a') return row.getAttribute('href');
149		var a = row.querySelector('a[href]');
150		return a ? a.getAttribute('href') : null;
151		}
152		function openRow() {
153		var r = focusedRow(); if (!r) return;
154		var href = hrefOf(r); if (!href) return;
155		if (href.indexOf('/big') === 0) go(href); else location.href = href;
156		}
157		function openWeb() {
158		var r = focusedRow();
159		var href = r ? r.getAttribute('data-open') \|\| hrefOf(r) : big.getAttribute('data-open');
160		if (href && href.indexOf('/big') !== 0) window.open(href, '_blank', 'noopener');
161		}
162
163		// ---- actions: a key presses a real control ----
164		function hint(text, tone) {
165		var el = doc.getElementById('big-hint'); if (!el) return;
166		el.textContent = text \|\| '';
167		if (tone) el.setAttribute('data-tone', tone); else el.removeAttribute('data-tone');
168		if (text) setTimeout(function () { if (el.textContent === text) { el.textContent = ''; el.removeAttribute('data-tone'); } }, 6000);
169		}
170		function act(key) {
171		var r = focusedRow(), p = current();
172		var btn = (r && r.querySelector('[data-act="' + key + '"]')) \|\| (p && p.querySelector('.big-h [data-act="' + key + '"], .big-run [data-act="' + key + '"]'));
173		if (!btn) return false;
174		btn.click();
175		return true;
176		}
177		function post(url, body) {
178		return fetch(url, { method: 'POST', body: body, headers: { accept: 'application/json' }, credentials: 'same-origin' })
179		.then(function (r) {
180		var type = r.headers.get('content-type') \|\| '';
181		if (type.indexOf('application/json') !== -1)
182		return r.json().then(function (out) { return { ok: !!out.ok, message: out.flash \|\| out.error \|\| (out.ok ? 'done' : 'that could not be done') }; });
183		return { ok: r.ok, message: r.ok ? 'done' : 'that could not be done (' + r.status + ')' };
184		}, function () { return { ok: false, message: 'the forge could not be reached' }; });
185		}
186		// A pane's form posts in place; the stream brings what changed. The
187		// run's own composer keeps its own script.
188		big.addEventListener('submit', function (ev) {
189		var form = ev.target;
190		if (!form \|\| form.id === 'big-line' \|\| form.id === 'run-steer' \|\| !window.fetch) return;
191		ev.preventDefault();
192		var body = new FormData(form);
193		var pressed = ev.submitter;
194		if (pressed && pressed.name) body.append(pressed.name, pressed.value);
195		var row = pressed && pressed.closest ? pressed.closest('[data-key]') : null;
196		if (row) row.setAttribute('data-busy', '');
197		hint('…');
198		post(form.getAttribute('action') \|\| where, body).then(function (out) {
199		if (row) row.removeAttribute('data-busy');
200		hint(out.message, out.ok ? 'success' : 'danger');
201		});
202		});
203
204		// ---- the line: a command, a filter, or a word ----
205		var line = doc.getElementById('big-line');
206		var input = doc.getElementById('big-line-in');
207		var mark = doc.getElementById('big-line-mark');
208		var note = doc.getElementById('big-line-note');
209		var mode = null;
210		var filters = {};
211		function openLine(m, action, placeholder) {
212		if (!line \|\| !input) return;
213		mode = m;
214		line.hidden = false;
215		line.setAttribute('data-mode', m);
216		line.setAttribute('action', action \|\| '');
217		if (mark) mark.textContent = m === 'cmd' ? ':' : m === 'filter' ? '/' : '\\u203a';
218		input.value = m === 'filter' ? filters[nameOf(current())] \|\| '' : '';
219		input.placeholder = placeholder \|\| '';
220		if (note) { note.textContent = ''; note.removeAttribute('data-tone'); }
221		input.focus();
222		}
223		function closeLine() {
224		mode = null;
225		if (line) line.hidden = true;
226		if (input) input.blur();
227		var r = focusedRow();
228		if (r) r.focus({ preventScroll: true });
229		}
230		function applyFilter(p) {
231		if (!p) return;
232		var q = (filters[nameOf(p)] \|\| '').toLowerCase();
233		Array.prototype.forEach.call(p.querySelectorAll('[data-key]'), function (row) {
234		var hit = q === '' \|\| (row.textContent \|\| '').toLowerCase().indexOf(q) !== -1;
235		if (hit) row.removeAttribute('data-filtered'); else row.setAttribute('data-filtered', '');
236		});
237		var h = p.querySelector('.big-h');
238		if (h) h.setAttribute('data-q', q);
239		if (!focusedRow()) settle(p, rowsOf(p)[0] \|\| null, false);
240		}
241		function fail(message) { if (note) { note.textContent = message; note.setAttribute('data-tone', 'danger'); } }
242		function submitLine() {
243		if (!input) return;
244		var text = input.value;
245		if (mode === 'cmd') {
246		var parsed = parseCommand(text, { app: here \|\| undefined, apps: apps });
247		if (parsed.kind === 'go') { closeLine(); go(parsed.url); }
248		else if (parsed.kind === 'help') { closeLine(); openHelp(); }
249		else if (parsed.kind === 'error') fail(parsed.message);
250		else closeLine();
251		} else if (mode === 'say') {
252		var said = text.trim();
253		if (!said) return;
254		input.disabled = true;
255		post(line.getAttribute('action'), new URLSearchParams({ text: said })).then(function (out) {
256		input.disabled = false;
257		if (out.ok) { closeLine(); hint(out.message, 'success'); } else { fail(out.message); input.focus(); }
258		});
259		} else closeLine();
260		}
261		if (line) line.addEventListener('submit', function (e) { e.preventDefault(); submitLine(); });
262		if (input) input.addEventListener('input', function () {
263		if (mode !== 'filter') return;
264		var p = current();
265		filters[nameOf(p)] = input.value;
266		applyFilter(p);
267		});
268		function say() {
269		var steer = doc.getElementById('steer-text');
270		if (steer) { steer.focus(); return; }
271		var r = focusedRow(), p = current();
272		var action = (r && r.getAttribute('data-say')) \|\| (p && p.getAttribute('data-say')) \|\| big.getAttribute('data-say');
273		if (!action) { hint('nothing here takes a word', 'danger'); return; }
274		var who = (r && r.getAttribute('data-say-who')) \|\| (p && p.getAttribute('data-say-who')) \|\| big.getAttribute('data-say-who') \|\| 'the crew';
275		openLine('say', action, 'tell ' + who + ' \\u2014 enter sends, esc keeps quiet');
276		}
277
278		// ---- the sheet ----
279		function openHelp() {
280		var dlg = doc.getElementById('big-help');
281		if (!dlg \|\| !dlg.showModal) return;
282		if (dlg.open) dlg.close(); else dlg.showModal();
283		}
284		function fullscreen() {
285		if (doc.fullscreenElement) { if (doc.exitFullscreen) doc.exitFullscreen(); }
286		else if (doc.documentElement.requestFullscreen) doc.documentElement.requestFullscreen().catch(function () {});
287		}
288
289		// ---- keys ----
290		function chipGo(key) {
291		var chip = doc.querySelector('#big-foot [data-k="' + key + '"][data-go]');
292		if (!chip) return false;
293		go(chip.getAttribute('data-go'));
294		return true;
295		}
296		function handle(key, shift) {
297		switch (key) {
298		case 'j': case 'ArrowDown': moveRow(1); return true;
299		case 'k': case 'ArrowUp': moveRow(-1); return true;
300		case 'h': case 'ArrowLeft': movePane(-1); return true;
301		case 'l': case 'ArrowRight': movePane(1); return true;
302		case 'Tab': movePane(shift ? -1 : 1); return true;
303		case 'g': jump('top'); return true;
304		case 'G': jump('bottom'); return true;
305		case 'ctrl-d': moveRow(halfPage(pageRows(current()))); return true;
306		case 'ctrl-u': moveRow(-halfPage(pageRows(current()))); return true;
307		case 'Enter': openRow(); return true;
308		case 'Escape': case 'Backspace': back(); return true;
309		case ':': openLine('cmd', '', 'app <name> \\u00b7 home \\u00b7 board \\u00b7 map \\u00b7 runs \\u00b7 issues \\u00b7 pulls \\u00b7 q'); return true;
310		case '/': openLine('filter', '', 'filter this pane as you type'); return true;
311		case '?': openHelp(); return true;
312		case 'f': fullscreen(); return true;
313		case 'o': openWeb(); return true;
314		case 't': say(); return true;
315		case 's': case 'x': if (!act(key)) hint('nothing focused takes ' + key, 'danger'); return true;
316		default:
317		if (/^[1-9]$/.test(key)) { toPane(Number(key) - 1); return true; }
318		if (/^[a-z]$/.test(key)) return chipGo(key);
319		return false;
320		}
321		}
322		function typing(t) { return !!(t && t.matches && t.matches('input, textarea, select, [contenteditable]')); }
323		doc.addEventListener('keydown', function (e) {
324		if (e.metaKey \|\| e.altKey) return;
325		var t = e.target;
326		var dlg = doc.querySelector('dialog[open]');
327		if (dlg) {
328		if (dlg.id === 'big-help' && (e.key === 'Escape' \|\| e.key === '?')) { e.preventDefault(); e.stopPropagation(); dlg.close(); }
329		return;
330		}
331		if (typing(t)) {
332		if (e.key === 'Escape') {
333		e.preventDefault(); e.stopPropagation();
334		if (mode) closeLine(); else { t.blur(); var r = focusedRow(); if (r) r.focus({ preventScroll: true }); }
335		}
336		return;
337		}
338		if (e.ctrlKey) {
339		if (e.key === 'd' \|\| e.key === 'u') { e.preventDefault(); e.stopPropagation(); handle('ctrl-' + e.key, false); }
340		return;
341		}
342		if (handle(e.key, e.shiftKey)) { e.preventDefault(); e.stopPropagation(); }
343		}, true);
344		// A click lands the focus where the pointer is; the link or button under
345		// it still does its own thing. A tell chip opens the line for its row.
346		big.addEventListener('mousedown', function (e) {
347		var row = e.target && e.target.closest ? e.target.closest('[data-key]') : null;
348		if (!row) return;
349		var pane = row.closest('.big-pane');
350		var at = panes().indexOf(pane);
351		if (at !== -1) { paneAt = at; settle(pane, row, false); }
352		});
353		big.addEventListener('click', function (e) {
354		var chip = e.target && e.target.closest ? e.target.closest('[data-say-open]') : null;
355		if (chip) { e.preventDefault(); say(); }
356		});
357
358		// ---- the gamepad: the same moves, from the couch ----
359		var BTN = { 0: 'Enter', 1: 'Escape', 3: '?', 4: 'h', 5: 'l', 8: '/', 9: ':', 12: 'k', 13: 'j', 14: 'h', 15: 'l' };
360		var held = {}, loop = null;
361		function fire(k) {
362		if (mode) { if (k === 'Escape') closeLine(); else if (k === 'Enter') submitLine(); return; }
363		var dlg = doc.querySelector('dialog[open]');
364		if (dlg) { if (k === 'Escape' \|\| k === '?') dlg.close(); return; }
365		handle(k, false);
366		}
367		function poll() {
368		var list = navigator.getGamepads ? navigator.getGamepads() : [];
369		var any = false, now = Date.now();
370		for (var i = 0; i < list.length; i++) {
371		var gp = list[i]; if (!gp) continue;
372		any = true;
373		var down = {};
374		for (var b = 0; b < gp.buttons.length; b++) if (gp.buttons[b].pressed && BTN[b]) down[BTN[b]] = true;
375		var ax = gp.axes[0] \|\| 0, ay = gp.axes[1] \|\| 0;
376		if (ay < -0.5) down['k'] = true; else if (ay > 0.5) down['j'] = true;
377		if (ax < -0.5) down['h'] = true; else if (ax > 0.5) down['l'] = true;
378		Object.keys(down).forEach(function (k) {
379		var h = held[k];
380		if (!h) { held[k] = { next: now + 380 }; fire(k); }
381		else if (now >= h.next && 'jkhl'.indexOf(k) !== -1) { h.next = now + 110; fire(k); }
382		});
383		Object.keys(held).forEach(function (k) { if (!down[k]) delete held[k]; });
384		}
385		if (any) loop = requestAnimationFrame(poll); else { loop = null; big.removeAttribute('data-pad'); }
386		}
387		window.addEventListener('gamepadconnected', function () {
388		big.setAttribute('data-pad', '');
389		if (loop === null) loop = requestAnimationFrame(poll);
390		});
391
392		// ---- clocks: the corner, every elapsed, every relative time ----
393		var clock = doc.getElementById('big-clock');
394		function two(n) { return (n < 10 ? '0' : '') + n; }
395		function span(s) {
396		return s < 60 ? s + 's'
397		: s < 3600 ? Math.floor(s / 60) + 'm ' + two(s % 60) + 's'
398		: Math.floor(s / 3600) + 'h ' + two(Math.floor((s % 3600) / 60)) + 'm';
399		}
400		function ago(s) {
401		if (s < 60) return 'just now';
402		if (s < 3600) return Math.floor(s / 60) + 'm ago';
403		if (s < 86400) return Math.floor(s / 3600) + 'h ago';
404		if (s < 86400 * 30) return Math.floor(s / 86400) + 'd ago';
405		if (s < 86400 * 365) return Math.floor(s / (86400 * 30)) + 'mo ago';
406		return Math.floor(s / (86400 * 365)) + 'y ago';
407		}
408		function tick() {
409		var now = Date.now();
410		if (clock) {
411		var d = new Date(now);
412		clock.textContent = two(d.getHours()) + ':' + two(d.getMinutes());
413		clock.setAttribute('datetime', d.toISOString());
414		}
415		Array.prototype.forEach.call(big.querySelectorAll('[data-started]:not(#run-elapsed)'), function (el) {
416		var t = Date.parse(el.getAttribute('data-started') \|\| '');
417		if (t) el.textContent = span(Math.max(0, Math.round((now - t) / 1000)));
418		});
419		Array.prototype.forEach.call(big.querySelectorAll('time[datetime]'), function (el) {
420		if (el === clock) return;
421		var t = Date.parse(el.getAttribute('datetime') \|\| '');
422		if (t) el.textContent = ago(Math.max(0, (now - t) / 1000));
423		});
424		}
425		window.setInterval(tick, 1000);
426		tick();
427
428		// ---- live: the dot, and a swap that keeps the focus where it was ----
429		doc.addEventListener('forge:live', function (e) {
430		var live = doc.getElementById('big-live');
431		if (live && e.detail) live.setAttribute('data-state', e.detail.state);
432		});
433		doc.addEventListener('forge:swapped', function (e) {
434		var pane = e.target && e.target.closest ? e.target.closest('.big-pane') : null;
435		if (pane) {
436		applyFilter(pane);
437		pane.setAttribute('data-fresh', '');
438		window.setTimeout(function () { pane.removeAttribute('data-fresh'); }, 1500);
439		}
440		paint();
441		tick();
442		var r = focusedRow(), p = current();
443		if (!r && p) settle(p, rowsOf(p)[0] \|\| null, false);
444		else if (r && !mode && doc.activeElement !== r && !typing(doc.activeElement)) r.focus({ preventScroll: true });
445		});
446
447		// ---- the map pans to where the crew is ----
448		(function () {
449		var working = big.querySelector('.map-node[data-state="working"]');
450		if (!working) return;
451		var was = doc.activeElement;
452		working.focus({ preventScroll: true });
453		if (was && was !== doc.body && was.focus) was.focus({ preventScroll: true }); else working.blur();
454		})();
455
456		// ---- restore: the pane and row this tab was on here ----
457		(function () {
458		var saved = recall('big:' + where);
459		if (saved) {
460		paneAt = Math.min(saved.pane \|\| 0, Math.max(0, panes().length - 1));
461		keys = saved.keys \|\| {};
462		}
463		var p = current();
464		settle(p, focusedRow() \|\| rowsOf(p)[0] \|\| null, false);
465		})();
466		})();
467		`;
		@@ -2045,8 +2045,8 @@ export const liveRegionsJs = /* js */ `
2045	2045	var mine = document.getElementById(id);
2046	2046	var theirs = fresh.getElementById(id);
2047	2047	if (!mine \|\| !theirs) return;
2048		// A card mid-action (the big view marks it data-busy while its post
2049		// is in flight) is never pulled out from under the click; the next
	2048	// A region mid-action (something in it marked data-busy while its
	2049	// post is in flight) is never pulled out from under the click; the next
2050	2050	// matching event tries the swap again.
2051	2051	if (mine.querySelector('[data-busy]')) return;
2052	2052	var active = document.activeElement;
		@@ -7,6 +7,10 @@
7	7	* forge's health, and each subscription's windows. Nothing on it
8	8	* needs a click, and everything on it links somewhere. It reads the same
9	9	* tables as the studio and adds no state of its own.
	10	*
	11	* `?wall` is its one wall mode, for a screen across the room that nobody
	12	* touches: the same regions in larger type, without the key hints or a
	13	* pointer. The old big view (`/big`, every address it had) lands here.
10	14	*/
11	15
12	16	import { appsForRepos, type AppRecord } from "../../core/apps.ts";
		@@ -36,7 +40,7 @@ import type { Ctx } from "../../http/context.ts";
36	40	import { repoBase, signInFirst } from "../chrome.ts";
37	41	import { boardJs, liveRegionsJs } from "../client.ts";
38	42	import { html, when, type Html } from "../html.ts";
39		import { page } from "../layout.ts";
	43	import { page, redirect } from "../layout.ts";
40	44	import { avatar, icon, time } from "../ui.ts";
41	45	import { voiceFor } from "../studio/voice.ts";
42	46	import {
		@@ -89,7 +93,7 @@ const pct = (n: number): number =>
89	93	Math.max(0, Math.min(100, Math.round(n * 100)));
90	94
91	95	/** The apps on the board: every one the viewer can see, or the named few. */
92		export interface BoardScope {
	96	interface BoardScope {
93	97	readonly repos: readonly Repo[];
94	98	readonly ids: readonly string[];
95	99	readonly byId: ReadonlyMap<string, Repo>;
		@@ -100,12 +104,12 @@ export interface BoardScope {
100	104	readonly ownerFacts: ReadonlySet<string>;
101	105	}
102	106
103		/** The scope for some app repositories: the board's, or the big view's. */
104		export function boardScope(ctx: Ctx, repos: readonly Repo[]): BoardScope {
105		const records = appsForRepos(
106		ctx.app.db,
107		repos.map((r) => r.id),
108		);
	107	/** The scope for some repositories: the ones among them that are apps. */
	108	function boardScope(
	109	ctx: Ctx,
	110	repos: readonly Repo[],
	111	records: ReadonlyMap<string, AppRecord>,
	112	): BoardScope {
109	113	const kept = repos.filter((r) => records.has(r.id));
110	114	return {
111	115	repos: kept,
		@@ -120,22 +124,9 @@ export function boardScope(ctx: Ctx, repos: readonly Repo[]): BoardScope {
120	124	};
121	125	}
122	126
123		/** The four regions, for a page that frames them its own way. */
124		export function boardRegions(
125		ctx: Ctx,
126		scope: BoardScope,
127		): { working: Html; landed: Html; decided: Html; today: Html } {
128		return {
129		working: working(ctx, scope),
130		landed: landed(ctx, scope),
131		decided: decided(ctx, scope),
132		today: today(ctx, scope),
133		};
134		}
135
136	127	// ---- the page ----
137	128
138		/** GET /board — signed in; every app the viewer can see, or `?apps=` some. */
	129	/** GET /board — signed in; every app the viewer can see, or `?apps=` some; `?wall` for the wall mode. */
139	130	export function boardPage(ctx: Ctx): Response {
140	131	const user = ctx.auth.user;
141	132	if (!user) return signInFirst(ctx);
		@@ -155,21 +146,24 @@ export function boardPage(ctx: Ctx): Response {
155	146	ctx,
156	147	visible.filter(
157	148	(r) =>
158		records.has(r.id) &&
159		(wanted.size === 0 \|\|
160		wanted.has(r.name.toLowerCase()) \|\|
161		wanted.has(`${r.ownerName}/${r.name}`.toLowerCase())),
	149	wanted.size === 0 \|\|
	150	wanted.has(r.name.toLowerCase()) \|\|
	151	wanted.has(`${r.ownerName}/${r.name}`.toLowerCase()),
162	152	),
	153	records,
163	154	);
164	155	const repos = scope.repos;
	156	const wall = ctx.url.searchParams.has("wall");
165	157
166		const body = html`<div class="board">
	158	const body = html`<div class="board" ${wall ? html`data-wall=""` : null}>
167	159	<header class="board-top">
168	160	<a class="board-brand" href="/"><span class="mark"></span>forge</a>
169	161	<span class="board-scope"
170		>${repos.length === 1
171		? repos[0]!.name
172		: `${repos.length} app${repos.length === 1 ? "" : "s"}`}</span
	162	>${
	163	repos.length === 1
	164	? repos[0]!.name
	165	: `${repos.length} app${repos.length === 1 ? "" : "s"}`
	166	}</span
173	167	>
174	168	<span class="spacer"></span>
175	169	<span class="board-keys" aria-hidden="true"
		@@ -223,14 +217,34 @@ function region(
223	217	() => html`<span class="board-count">${rows.length}</span>`,
224	218	)}
225	219	</h2>
226		${rows.length === 0
227		? html`<p class="board-quiet">${quiet}</p>`
228		: html`<ul class="board-list">
229		${rows}
230		</ul>`}
	220	${
	221	rows.length === 0
	222	? html`<p class="board-quiet">${quiet}</p>`
	223	: html`<ul class="board-list">
	224	${rows}
	225	</ul>`
	226	}
231	227	</section>`;
232	228	}
233	229
	230	/** An app's address as the big view wrote it: `owner/name`, nothing else. */
	231	const APP_SLUG = /^[A-Za-z0-9._-]{1,100}\/[A-Za-z0-9._-]{1,100}$/;
	232
	233	/**
	234	* GET /big — the big view, folded into the board. Every address it had
	235	* (`?app=`, `&list=`, `?run=`, `?view=board\|map`) lands on the wall mode;
	236	* an app it named stays the scope, as `?apps=`. The board decides what the
	237	* viewer may see, so this reads nothing and says nothing about what exists.
	238	*/
	239	export function bigRedirect(ctx: Ctx): Response {
	240	const app = ctx.url.searchParams.get("app") ?? "";
	241	return redirect(
	242	APP_SLUG.test(app)
	243	? `/board?apps=${encodeURIComponent(app)}&wall`
	244	: "/board?wall",
	245	);
	246	}
	247
234	248	// ---- the forge ----
235	249
236	250	/** Where a need can be acted on, when it can: a stuck run's page. */
		@@ -263,14 +277,16 @@ function forgeStrip(ctx: Ctx): Html \| null {
263	277	data-ok="${v.ok ? "yes" : "no"}"
264	278	role="status"
265	279	>
266		${v.ok
267		? html`<span class="board-forge-ok">All fine</span>`
268		: v.needs.map((need) => {
269		const href = needHref(need, v);
270		return href === undefined
271		? html`<span class="board-forge-need">${need}</span>`
272		: html`<a class="board-forge-need" href="${href}">${need}</a>`;
273		})}
	280	${
	281	v.ok
	282	? html`<span class="board-forge-ok">All fine</span>`
	283	: v.needs.map((need) => {
	284	const href = needHref(need, v);
	285	return href === undefined
	286	? html`<span class="board-forge-need">${need}</span>`
	287	: html`<a class="board-forge-need" href="${href}">${need}</a>`;
	288	})
	289	}
274	290	</div>`;
275	291	}
276	292
		@@ -323,11 +339,13 @@ function windowsStrip(ctx: Ctx): Html \| null {
323	339	const words = windowWords(w);
324	340	return html`<span class="board-window" data-window="${w.window}"
325	341	><span class="board-window-name">${words.name}</span>
326		${words.usedPct === null
327		? null
328		: html`<span class="board-bar"
329		><span class="board-fill" data-w="${words.usedPct}"></span
330		></span>`}
	342	${
	343	words.usedPct === null
	344	? null
	345	: html`<span class="board-bar"
	346	><span class="board-fill" data-w="${words.usedPct}"></span
	347	></span>`
	348	}
331	349	<span class="board-window-nums"
332	350	>${figures([words.used, words.remaining, words.resets])}</span
333	351	></span
		@@ -389,9 +407,9 @@ function working(ctx: Ctx, scope: BoardScope): Html {
389	407	<span class="board-run-meta">
390	408	<span class="board-state">${word}</span>
391	409	<span
392		>${word === "paused"
393		? "resumes soon"
394		: reasonWords(run.reason)}</span
	410	>${
	411	word === "paused" ? "resumes soon" : reasonWords(run.reason)
	412	}</span
395	413	>
396	414	${when(
397	415	run.costUsd > 0 && scope.ownerFacts.has(repo.id),
		@@ -456,15 +474,17 @@ function landed(ctx: Ctx, scope: BoardScope): Html {
456	474	href="${repoBase(repo)}/pulls/${pull.number}"
457	475	>
458	476	<span class="board-thumb"
459		>${picture === undefined
460		? icon("merge")
461		: html`<img
462		src="${picture}"
463		width="34"
464		height="46"
465		alt=""
466		loading="lazy"
467		/>`}</span
	477	>${
	478	picture === undefined
	479	? icon("merge")
	480	: html`<img
	481	src="${picture}"
	482	width="34"
	483	height="46"
	484	alt=""
	485	loading="lazy"
	486	/>`
	487	}</span
468	488	>
469	489	<span class="board-landed-title">${pull.title}</span>
470	490	<span class="board-when">${time(pull.mergedAt ?? pull.createdAt)}</span>
		@@ -770,6 +790,10 @@ ${widths}
770	790	}
771	791	/* One region, full bleed. */
772	792	.board[data-focus] .board-region { display: none; }
	793	/* The wall mode: read from across the room, and nobody at the keys. */
	794	.board[data-wall] { font-size: 20px; cursor: none; }
	795	.board[data-wall] .board-keys { display: none; }
	796	@media (min-width: 1600px) { .board[data-wall] { font-size: 23px; } }
773	797	.board[data-focus="working"] #working, .board[data-focus="landed"] #landed,
774	798	.board[data-focus="decided"] #decided, .board[data-focus="today"] #today { display: flex; }
775	799	}
		@@ -1,245 +0,0 @@
1		/**
2		* The big view's stylesheet: a k9s frame in the browser. One header line,
3		* a body of panes that fill the window and scroll on their own, one footer
4		* line of key chips. Dense, calm, dark by default; the forge's tokens
5		* throughout, so every theme gets it. Nothing here animates on its own —
6		* a focus ring moves, a hover tints, and that is all the motion there is.
7		*/
8
9		/** Width rules for the bars: a whole percentage as `data-w`, since an inline style is not allowed. */
10		const widths = Array.from(
11		{ length: 101 },
12		(_, n) => `.big-fill[data-w="${n}"] { width: ${n}%; }`,
13		).join("\n");
14
15		export const bigCss = /* css */ `
16		.big {
17		--gap: 10px; --line: 30px;
18		height: 100dvh; display: grid; grid-template-rows: var(--line) minmax(0, 1fr) var(--line);
19		font-size: 13px; line-height: 1.4; overflow: hidden;
20		font-variant-numeric: tabular-nums;
21		}
22		.big kbd { height: 18px; min-width: 18px; padding: 0 4px; font-size: 10.5px; border-bottom-width: 1px; }
23		.big .num, .big .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
24		.big .spacer { flex: 1; }
25
26		/* ---- the header line ---- */
27		.big-top { display: flex; align-items: center; gap: 12px; padding: 0 12px; border-bottom: 1px solid var(--border); color: var(--muted-fg); font-size: 12.5px; white-space: nowrap; min-width: 0; }
28		.big-brand { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; letter-spacing: -0.03em; font-size: 13.5px; color: var(--fg); }
29		.big-brand .mark { width: 9px; height: 9px; border-radius: 3px; background: linear-gradient(135deg, var(--accent), var(--merged)); }
30		.big-crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
31		.big-crumbs a { color: var(--muted-fg); }
32		.big-crumbs a:hover { color: var(--fg); }
33		.big-crumbs > span { color: var(--faint); }
34		.big-crumbs b { color: var(--fg); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
35		.big-hint { font-size: 12px; color: var(--muted-fg); overflow: hidden; text-overflow: ellipsis; }
36		.big-hint[data-tone="danger"] { color: var(--danger); }
37		.big-hint[data-tone="success"] { color: var(--success); }
38		.big-live { display: inline-flex; align-items: center; }
39		.big-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--faint); }
40		.big-live[data-state="open"] .big-dot { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent); }
41		.big-live[data-state="reconnecting"] .big-dot { background: var(--attn); }
42		.big-clock { font-family: var(--mono); font-size: 12.5px; color: var(--muted-fg); min-width: 5ch; text-align: right; }
43		.big-pad { display: none; font-size: 11px; color: var(--faint); }
44		.big[data-pad] .big-pad { display: inline; }
45
46		/* ---- the body of panes ---- */
47		.big-body { display: grid; gap: var(--gap); padding: var(--gap); min-height: 0; }
48		.big-body[data-layout="home"] { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); }
49		.big-body[data-layout="app"], .big-body[data-layout="wall"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
50		.big-body[data-layout="run"], .big-body[data-layout="lanes"], .big-body[data-layout="list"] { grid-template-columns: minmax(0, 1fr); }
51		.big-pane {
52		min-width: 0; min-height: 0; display: flex; flex-direction: column;
53		border: 1px solid var(--border); border-radius: var(--radius); background: var(--card);
54		}
55		.big-pane.is-pane { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
56		.big-h {
57		flex: none; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 10px; height: 28px;
58		border-bottom: 1px solid var(--border);
59		font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-fg);
60		white-space: nowrap; overflow: hidden;
61		}
62		.big-pane.is-pane .big-h { color: var(--fg); }
63		.big-h kbd { letter-spacing: 0; }
64		.big-count { font-weight: 500; letter-spacing: 0; color: var(--faint); }
65		.big-h-note { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--faint); overflow: hidden; text-overflow: ellipsis; }
66		.big-h-note b { color: var(--fg); font-weight: 600; }
67		.big-scroll { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; overscroll-behavior: contain; }
68		.big-rows { margin: 0; padding: 4px 0; list-style: none; }
69		.big-quiet { margin: 0; padding: 10px 12px; color: var(--faint); }
70		.big-pane[data-fresh] .big-h { color: var(--accent); }
71
72		/* ---- rows ---- */
73		.big-row {
74		position: relative; display: grid; align-items: center; gap: 2px 10px;
75		padding: 5px 10px 5px 12px; border-left: 2px solid transparent; color: inherit; outline: none;
76		cursor: default;
77		}
78		.big-row:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
79		.big-row.is-focus { background: color-mix(in srgb, var(--accent) 13%, transparent); border-left-color: var(--accent); }
80		.big-row a { color: inherit; }
81		.big-row[data-busy] { opacity: .5; }
82		.big-t { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
83		.big-m { color: var(--muted-fg); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
84		.big-m b { color: var(--fg); font-weight: 600; }
85		.big-when { color: var(--faint); font-size: 12px; white-space: nowrap; }
86		.big-acts { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
87		.big-act {
88		display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 6px 0 3px;
89		border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--muted-fg);
90		font: inherit; font-size: 11.5px; cursor: pointer;
91		}
92		.big-act kbd { height: 14px; min-width: 14px; font-size: 10px; padding: 0 3px; background: var(--muted); }
93		.big-act:hover { color: var(--fg); border-color: var(--border-strong); }
94		.big-act[data-lead] { color: var(--fg); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
95		.big-row.is-focus .big-act { color: var(--fg); }
96		.big-bar { display: block; height: 4px; border-radius: 999px; background: var(--muted); overflow: hidden; }
97		.big-fill { display: block; height: 100%; border-radius: inherit; background: var(--muted-fg); }
98		.big-fill[data-near] { background: var(--attn); }
99		${widths}
100		.big-word { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-fg); white-space: nowrap; }
101		.big-word[data-word="working"], .big-word[data-word="autonomous"] { color: var(--accent); }
102		.big-word[data-word="queued"], .big-word[data-word="assisted"], .big-word[data-word="waiting"] { color: var(--muted-fg); }
103		.big-word[data-word="paused"], .big-word[data-word="stopped"], .big-word[data-word="failed"], .big-word[data-word="red"] { color: var(--attn); }
104		.big-word[data-word="look"], .big-word[data-word="green"], .big-word[data-word="shipped"], .big-word[data-word="ok"] { color: var(--success); }
105		.big-word[data-word="off"], .big-word[data-word="cancelled"] { color: var(--faint); }
106		.big-row .avatar { width: 20px; height: 20px; font-size: 9px; }
107
108		/* app rows: name · autonomy · working · asks · spend */
109		.big-row[data-kind="app"] { grid-template-columns: minmax(0, 1fr) 7em 5.5em 5.5em 9em; }
110		.big-row[data-kind="app"] .big-t { font-size: 13.5px; }
111		.big-row[data-kind="app"] .big-t small { color: var(--muted-fg); font-weight: 500; font-size: 12px; }
112		.big-n { font-family: var(--mono); font-size: 12px; color: var(--muted-fg); white-space: nowrap; }
113		.big-n b { color: var(--fg); font-weight: 600; }
114		.big-n[data-zero] { color: var(--faint); }
115		.big-n[data-hot] b { color: var(--accent); }
116		.big-spend { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; font-family: var(--mono); font-size: 11.5px; color: var(--muted-fg); }
117
118		/* run rows: who · title · elapsed · cost */
119		.big-row[data-kind="run"] { grid-template-columns: auto 6.5em minmax(0, 1fr) 6ch 6ch auto; }
120		.big-row[data-kind="run"] .big-t { grid-column: 3; }
121		.big-el { font-family: var(--mono); font-size: 12.5px; text-align: right; white-space: nowrap; }
122		.big-row[data-state="working"] .big-el { color: var(--accent); }
123		.big-row[data-state="queued"] .big-el, .big-row[data-state="paused"] .big-el { color: var(--faint); }
124		.big-cost { font-family: var(--mono); font-size: 12px; color: var(--muted-fg); text-align: right; white-space: nowrap; }
125
126		/* ask rows: mark · title + short · actions */
127		.big-row[data-kind="ask"] { grid-template-columns: 5.5em minmax(0, 1fr) auto; }
128		.big-row[data-kind="ask"] .big-m { grid-column: 2; }
129		.big-row[data-kind="ask"] .big-acts { grid-row: 1 / span 2; grid-column: 3; }
130		.big-row[data-kind="ask"] .big-word { grid-row: 1 / span 2; }
131
132		/* landed rows: title · who · when */
133		.big-row[data-kind="landed"] { grid-template-columns: minmax(0, 1fr) auto auto; }
134		/* decision rows: kind · answer · about · sure · outcome · when */
135		.big-row[data-kind="decision"] { grid-template-columns: 6em 5em minmax(0, 1fr) 4ch 5em auto; }
136		.big-row[data-kind="decision"] .big-p { font-family: var(--mono); font-size: 11.5px; color: var(--muted-fg); text-align: right; }
137		/* issue and pull rows: number · title · who · word · when */
138		.big-row[data-kind="issue"], .big-row[data-kind="pull"] { grid-template-columns: 4.5ch minmax(0, 1fr) auto auto auto; }
139		.big-num { font-family: var(--mono); font-size: 12px; color: var(--faint); }
140
141		/* ---- the glance: the focused app at a glance ---- */
142		.big-glance { display: flex; flex-direction: column; min-height: 0; }
143		.big-glance-dir { margin: 0; padding: 10px 12px 8px; font-size: 14px; font-weight: 550; letter-spacing: -0.01em; text-wrap: pretty; border-bottom: 1px solid var(--border); }
144		.big-glance-dir small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--muted-fg); }
145		.big-sub { margin: 0; padding: 8px 12px 2px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
146		.big-glance-empty { display: grid; place-items: center; height: 100%; color: var(--faint); }
147
148		/* ---- the map inside a pane ---- */
149		.big-pane .map-canvas { border: 0; border-radius: 0; background: var(--card); flex: 1; min-height: 0; }
150		.big-pane .map-empty { border: 0; padding: 24px 12px; }
151		.big-pane .map-node.is-focus .map-card { stroke: var(--accent); stroke-width: 2; }
152		.big-pane .map-tools { display: none; }
153
154		/* ---- the lanes: the global map, one row per app ---- */
155		.big-lane { padding: 0; border-left-width: 2px; }
156		.big-lane .map-lane { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
157		.big-lane + .big-lane .map-lane { border-top: 1px solid var(--border); }
158		.big-lane .map-lane-head { padding: 8px 12px; }
159		.big-lane .map-lane-name { font-size: 13.5px; }
160		.big-lane .map-lane-head .map-counts { font-size: 11.5px; }
161
162		/* ---- the board's regions inside panes ---- */
163		.big-wall .board-region { padding: 8px 10px; }
164		.big-wall .board-h { position: static; padding: 0 0 6px; background: transparent; font-size: 11px; }
165		.big-wall .board-list { gap: 4px; }
166		.big-wall .board-card { padding: 7px 10px; border-color: transparent; border-radius: var(--radius-sm); background: transparent; outline: none; }
167		.big-wall .board-card:hover { border-color: var(--border); }
168		.big-wall .board-card.is-focus { background: color-mix(in srgb, var(--accent) 13%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
169		.big-wall .board-run { padding: 7px 10px; }
170		.big-wall .board-run .avatar { width: 26px; height: 26px; font-size: 11px; margin-top: 1px; }
171		.big-wall .board-run-title { font-size: 1em; -webkit-line-clamp: 1; }
172		.big-wall .board-elapsed { font-size: 1.15em; }
173		.big-wall .board-run-meta, .big-wall .board-run-who { font-size: .92em; }
174		.big-wall .board-landed-title { font-size: 1em; }
175		.big-wall .board-thumb { width: 24px; height: 32px; }
176		.big-wall .board-landed .board-thumb img { width: 100%; height: 100%; }
177		.big-wall .board-app-name { font-size: 1em; }
178		.big-wall .board-quiet { padding: 4px 0; color: var(--faint); }
179
180		/* ---- the run: the transcript fills the pane ---- */
181		.big-run { display: flex; flex-direction: column; min-height: 0; flex: 1; }
182		.big-run .run-live { margin: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; }
183		.big-run .run-log { flex: 1; min-height: 0; max-height: none !important; border: 0; border-radius: 0; background: transparent; font-size: 13px; padding: 8px 12px; }
184		.big-run .run-steer { border: 0; border-top: 1px solid var(--border); border-radius: 0; background: var(--card); padding: 8px 12px; }
185		.big-run .run-steer textarea { min-height: 32px; font-size: 13px; }
186		.big-run .run-actions { margin: 0; }
187		.big-run-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--muted-fg); }
188		.big-run-meta h1 { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
189		.big-run-meta .num { font-family: var(--mono); }
190		.big-run-meta .run-summary { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--muted-fg); }
191
192		/* ---- the footer line ---- */
193		.big-foot { display: flex; align-items: center; gap: 4px 14px; padding: 0 12px; border-top: 1px solid var(--border); color: var(--muted-fg); font-size: 12px; white-space: nowrap; overflow: hidden; }
194		.big-key { display: inline-flex; align-items: center; gap: 3px; }
195		.big-key kbd + kbd { margin-left: -1px; }
196		.big-key kbd:last-of-type { margin-right: 3px; }
197		.big-foot .spacer { flex: 1; }
198		.big-foot .big-foot-view { color: var(--faint); font-family: var(--mono); font-size: 11.5px; }
199
200		/* ---- the line: command, filter, or a word to the crew ---- */
201		.big-line {
202		position: fixed; left: var(--gap); right: var(--gap); bottom: var(--line); z-index: 5;
203		display: flex; align-items: center; gap: 8px; padding: 6px 10px;
204		background: var(--card); border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: var(--radius-sm);
205		box-shadow: var(--shadow-2);
206		}
207		.big-line-mark { font-family: var(--mono); font-weight: 600; color: var(--accent); min-width: 1ch; }
208		.big-line[data-mode="say"] .big-line-mark { color: var(--success); }
209		.big-line-in { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--fg); font: inherit; font-family: var(--mono); font-size: 13px; outline: none; padding: 0; }
210		.big-line-note { font-size: 12px; color: var(--muted-fg); white-space: nowrap; }
211		.big-line-note[data-tone="danger"] { color: var(--danger); }
212
213		/* ---- the key sheet ---- */
214		.big-help { width: min(720px, 92vw); max-height: 86dvh; overflow: auto; }
215		.big-help h2 { font-size: 13px; margin: 0 0 8px; }
216		.big-help h2 + h2 { margin-top: 16px; }
217		.big-help table { width: 100%; border-collapse: collapse; }
218		.big-help td { padding: 4px 10px 4px 0; vertical-align: top; font-size: 13px; }
219		.big-help td:first-child { width: 12em; white-space: nowrap; }
220		.big-help kbd + kbd { margin-left: 3px; }
221		.big-help .big-cmd { font-family: var(--mono); color: var(--fg); }
222		.big-help .big-cmd i { color: var(--muted-fg); font-style: normal; }
223		.big-help .big-help-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
224		.big-help p { margin: 10px 0 0; color: var(--faint); font-size: 12px; }
225
226		/* ---- filtered away ---- */
227		.big [data-filtered] { display: none; }
228
229		/* ---- narrow: stacked, the body scrolls ---- */
230		@media (max-width: 899px) {
231		.big { height: auto; min-height: 100dvh; grid-template-rows: var(--line) minmax(0, 1fr) var(--line); overflow: visible; }
232		.big-body[data-layout] { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
233		.big-pane { min-height: 220px; max-height: 60dvh; }
234		.big-row[data-kind="app"] { grid-template-columns: minmax(0, 1fr) auto auto; }
235		.big-row[data-kind="app"] .big-spend, .big-row[data-kind="app"] .big-word { display: none; }
236		.big-row[data-kind="run"] { grid-template-columns: auto minmax(0, 1fr) auto; }
237		.big-row[data-kind="run"] .big-t { grid-column: 2; }
238		.big-row[data-kind="run"] .big-cost, .big-row[data-kind="run"] .big-word { display: none; }
239		.big-row[data-kind="decision"] { grid-template-columns: 6em minmax(0, 1fr) auto; }
240		.big-row[data-kind="decision"] .big-p, .big-row[data-kind="decision"] .big-when { display: none; }
241		.big-foot { overflow: auto; }
242		.big-foot .big-foot-view { display: none; }
243		}
244		@media (min-width: 1600px) { .big { font-size: 14px; } }
245		`;
		@@ -1,474 +0,0 @@
1		/**
2		* The big view: one keyboard-first frame over the whole forge. Anonymous
3		* is sent to sign in; every view renders the shell — header, panes,
4		* footer — with live regions; the app view lists a run in flight and an
5		* ask with its keys; the command line's targets are real pages; and the
6		* sheet lists every key the footer shows. The pure model is tested on
7		* its own: where a step lands, what a command means.
8		*/
9		import { afterAll, beforeAll, describe, expect, test } from "bun:test";
10		import { mkdtemp, rm } from "node:fs/promises";
11		import { tmpdir } from "node:os";
12		import { join } from "node:path";
13		import { createApp, type App } from "../src/app.ts";
14		import { enableApp } from "../src/actions/apps.ts";
15		import { addToCrew, createAgent } from "../src/actions/crew.ts";
16		import { openIssue } from "../src/actions/issues.ts";
17		import { openPull } from "../src/actions/pulls.ts";
18		import { commitToBranch, createRepo } from "../src/actions/repos.ts";
19		import { updateRepoSettings, type Repo } from "../src/core/repos.ts";
20		import { claimRun, createRun, finishRun } from "../src/core/runs.ts";
21		import { createUser, getUserByName, type User } from "../src/core/users.ts";
22		import { serve, type Servers } from "../src/http/server.ts";
23		import {
24		backUrl,
25		bigUrl,
26		COMMANDS,
27		findApp,
28		footKeysFor,
29		halfPage,
30		keysFor,
31		moveIndex,
32		nextPane,
33		parseCommand,
34		} from "../src/web/big-model.ts";
35
36		// ---- the model ----
37
38		describe("the big view's model", () => {
39		test("a step lands where vim would: first row on the way down, last on the way up, never past an end", () => {
40		expect(moveIndex(0, -1, 1)).toBe(-1);
41		expect(moveIndex(3, -1, 1)).toBe(0);
42		expect(moveIndex(3, -1, -1)).toBe(2);
43		expect(moveIndex(3, 0, 1)).toBe(1);
44		expect(moveIndex(3, 2, 1)).toBe(2);
45		expect(moveIndex(3, 0, -1)).toBe(0);
46		expect(moveIndex(10, 2, 5)).toBe(7);
47		expect(moveIndex(10, 8, 5)).toBe(9);
48		expect(halfPage(9)).toBe(4);
49		expect(halfPage(1)).toBe(1);
50		});
51
52		test("panes wrap both ways", () => {
53		expect(nextPane(4, 3, 1)).toBe(0);
54		expect(nextPane(4, 0, -1)).toBe(3);
55		expect(nextPane(4, -1, 1)).toBe(1);
56		expect(nextPane(0, 0, 1)).toBe(-1);
57		});
58
59		test("addresses and their parents", () => {
60		expect(bigUrl({})).toBe("/big");
61		expect(bigUrl({ app: "alice/notes" })).toBe("/big?app=alice%2Fnotes");
62		expect(bigUrl({ app: "alice/notes", list: "runs" })).toBe(
63		"/big?app=alice%2Fnotes&list=runs",
64		);
65		expect(bigUrl({ run: "r1" })).toBe("/big?run=r1");
66		expect(bigUrl({ view: "board" })).toBe("/big?view=board");
67		expect(backUrl({ app: "alice/notes", list: "runs" })).toBe(
68		"/big?app=alice%2Fnotes",
69		);
70		expect(backUrl({ app: "alice/notes" })).toBe("/big");
71		expect(backUrl({ run: "r1" }, "alice/notes")).toBe(
72		"/big?app=alice%2Fnotes",
73		);
74		expect(backUrl({ view: "map" })).toBe("/big");
75		});
76
77		test("a command means one thing, or says why not", () => {
78		const apps = ["alice/notes", "alice/shop", "bob/tempo"];
79		expect(findApp("tempo", apps)).toBe("bob/tempo");
80		expect(findApp("Alice/Shop", apps)).toBe("alice/shop");
81		expect(findApp("no", apps)).toBe("alice/notes");
82		expect(findApp("zz", apps)).toBeUndefined();
83		const here = { apps };
84		expect(parseCommand("app tempo", here)).toEqual({
85		kind: "go",
86		url: "/big?app=bob%2Ftempo",
87		});
88		expect(parseCommand(":tempo", here)).toEqual({
89		kind: "go",
90		url: "/big?app=bob%2Ftempo",
91		});
92		expect(parseCommand("map", here)).toEqual({
93		kind: "go",
94		url: "/big?view=map",
95		});
96		expect(parseCommand("map", { ...here, app: "alice/shop" })).toEqual({
97		kind: "go",
98		url: "/big?app=alice%2Fshop&list=map",
99		});
100		expect(parseCommand("runs", here)).toEqual({
101		kind: "error",
102		message: "open an app first, then :runs",
103		});
104		expect(parseCommand("pulls", { ...here, app: "alice/shop" })).toEqual({
105		kind: "go",
106		url: "/big?app=alice%2Fshop&list=pulls",
107		});
108		expect(parseCommand("app", here)).toEqual({
109		kind: "error",
110		message: "app which?",
111		});
112		expect(parseCommand("app nothing", here).kind).toBe("error");
113		expect(parseCommand("help", here)).toEqual({ kind: "help" });
114		expect(parseCommand("q", here)).toEqual({ kind: "go", url: "/" });
115		expect(parseCommand("q", { ...here, app: "alice/shop" })).toEqual({
116		kind: "go",
117		url: "/alice/shop",
118		});
119		expect(parseCommand(" ", here)).toEqual({ kind: "none" });
120		expect(parseCommand("frobnicate", here).kind).toBe("error");
121		});
122
123		test("the footer is a subset of the sheet, for every view", () => {
124		for (const view of [
125		"home",
126		"app",
127		"run",
128		"board",
129		"map",
130		"list",
131		] as const) {
132		const sheet = new Set(keysFor(view).map((k) => k.keys.join(" ")));
133		for (const k of footKeysFor(view))
134		expect(sheet.has(k.keys.join(" "))).toBe(true);
135		}
136		});
137		});
138
139		// ---- the pages ----
140
141		describe("the big view", () => {
142		let dataDir: string;
143		let app: App;
144		let servers: Servers;
145		let base: string;
146		let alice: User;
147		let notes: Repo;
148		let shop: Repo;
149		let cookie: string;
150
151		const get = (path: string, extra: Record<string, string> = {}) =>
152		fetch(`${base}${path}`, {
153		headers: { cookie, ...extra },
154		redirect: "manual",
155		});
156
157		async function makeApp(name: string): Promise<Repo> {
158		const made = await createRepo(app, alice, { name, visibility: "private" });
159		if (!made.ok) throw new Error(String(made.error));
160		const seeded = await commitToBranch(app, alice, made.value, {
161		message: "Start",
162		files: [
163		{
164		path: "package.json",
165		content: `{"name":"${name}","scripts":{"start":"bun run server.ts"}}\n`,
166		},
167		{
168		path: "server.ts",
169		content:
170		"Bun.serve({ port: Number(process.env.PORT), fetch: () => new Response('ok') });\n",
171		},
172		],
173		});
174		if (!seeded.ok) throw new Error(JSON.stringify(seeded.error));
175		const enabled = await enableApp(app, alice, made.value, { slug: name });
176		if (!enabled.ok) throw new Error(String(enabled.error));
177		return made.value;
178		}
179
180		/** The text of every `<kbd>` inside the element with this id. */
181		function kbdsIn(html: string, id: string): Set<string> {
182		const start = html.indexOf(`id="${id}"`);
183		const open = html.lastIndexOf("<", start);
184		const tag = html.slice(open + 1, html.indexOf(" ", open));
185		const close = html.indexOf(`</${tag}>`, start);
186		const slice = html.slice(start, close);
187		return new Set(
188		[...slice.matchAll(/<kbd[^>]>([^<])<\/kbd>/g)].map((m) => m[1]!),
189		);
190		}
191
192		beforeAll(async () => {
193		dataDir = await mkdtemp(join(tmpdir(), "forge-big-"));
194		app = createApp({ dataDir, port: 0 });
195		servers = await serve(app);
196		base = servers.url;
197		const a = await createUser(app.db, {
198		username: "alice",
199		email: "[email protected]",
200		password: "a-good-passphrase",
201		adminIfFirst: true,
202		});
203		if (!a.ok) throw new Error(a.error);
204		alice = a.value;
205		cookie = (
206		(
207		await fetch(`${base}/signin`, {
208		method: "POST",
209		body: new URLSearchParams({
210		username: "alice",
211		password: "a-good-passphrase",
212		}),
213		redirect: "manual",
214		})
215		).headers.get("set-cookie") ?? ""
216		).split(";")[0]!;
217		notes = await makeApp("notes");
218		shop = await makeApp("shop");
219		const scout = await createAgent(app, alice, { username: "scout" });
220		if (!scout.ok) throw new Error(String(scout.error));
221		expect(addToCrew(app, alice, notes, "scout").ok).toBe(true);
222		expect(addToCrew(app, alice, shop, "scout").ok).toBe(true);
223		notes = updateRepoSettings(app.db, notes, {
224		autonomy: "autonomous",
225		autonomyDirection: "Notes that load fast.\nAnd stay small.",
226		autonomyCeilingUsd: 20,
227		autonomySlots: 2,
228		autonomyBy: alice.id,
229		});
230		shop = updateRepoSettings(app.db, shop, {
231		autonomy: "assisted",
232		autonomyDirection: "Sell one real thing.",
233		autonomyCeilingUsd: 10,
234		autonomySlots: 1,
235		autonomyBy: alice.id,
236		});
237		}, 30_000);
238
239		afterAll(async () => {
240		servers.stop();
241		app.close();
242		await rm(dataDir, { recursive: true, force: true });
243		});
244
245		test("anonymous is sent to sign in, and comes back here", async () => {
246		const res = await fetch(`${base}/big?app=alice%2Fnotes`, {
247		redirect: "manual",
248		});
249		expect(res.status).toBe(303);
250		expect(res.headers.get("location")).toBe(
251		"/signin?next=%2Fbig%3Fapp%3Dalice%252Fnotes",
252		);
253		});
254
255		test("home: the shell, two live panes, every app as a row, the focused one at a glance", async () => {
256		const res = await get("/big");
257		expect(res.status).toBe(200);
258		const html = await res.text();
259		expect(html).toContain('<html lang="en" data-theme="dark">');
260		expect(html).not.toContain('class="topbar"');
261		expect(html).toMatch(/<main\s+class="bare"\s+id="main"\s*>/);
262		expect(html).toContain('id="big"');
263		expect(html).toContain('data-view="home"');
264		expect(html).toContain('data-apps="alice/shop alice/notes"');
265		expect(html).toContain('<header class="big-top">');
266		expect(html).toContain('id="big-clock"');
267		expect(html).toContain('id="big-live"');
268		expect(html).toContain('<footer class="big-foot" id="big-foot">');
269		expect(html).toContain('id="big-line"');
270		expect(html).toContain('id="big-help"');
271		expect(html).toMatch(
272		/id="big-apps"\s+data-live="run\.\,pull\.\,issue\.\,check\.\"/,
273		);
274		expect(html).toMatch(
275		/id="big-glance"\s+data-live="run\.\,pull\.\,issue\.\,check\.\"/,
276		);
277		// The rows: name, autonomy word, working, asks, spend against the ceiling.
278		expect(html).toContain('data-key="app:alice/notes"');
279		expect(html).toContain('data-href="/big?app=alice%2Fnotes"');
280		expect(html).toContain('data-say="/alice/notes/tell"');
281		expect(html).toContain('data-word="autonomous"');
282		expect(html).toContain('data-word="assisted"');
283		expect(html).toMatch(/\$0\.00\s\/\s\$20/);
284		// The glance: the direction's first line only, and its own lists.
285		expect(html).toContain('data-for="app:alice/notes"');
286		expect(html).toContain("Notes that load fast.");
287		expect(html).not.toContain("And stay small.");
288		expect(html).toContain("Nobody is working here right now.");
289		expect(html).toContain("new EventSource('/events')");
290		// A viewer who chose a theme keeps it.
291		const paper = await (
292		await get("/big", { cookie: `${cookie}; forge_theme=paper` })
293		).text();
294		expect(paper).toContain('data-theme="paper"');
295		});
296
297		test("app: a run in flight with its clock and stop key, the map, landed", async () => {
298		const scout = getUserByName(app.db, "scout")!;
299		const told = openIssue(app, alice, shop, {
300		title: "Checkout keeps the total steady",
301		});
302		if (!told.ok) throw new Error(String(told.error));
303		const running = createRun(app.db, {
304		repoId: shop.id,
305		kind: "agent",
306		issueId: told.value.id,
307		actorId: scout.id,
308		reason: "assigned",
309		});
310		claimRun(app.db, running.id);
311		// A green pull the crew opened: the shop is assisted, so it asks.
312		const branch = await commitToBranch(app, alice, shop, {
313		branch: "crew/wrap",
314		base: "main",
315		message: "Gift wrap",
316		files: [{ path: "WRAP.md", content: "wrap\n" }],
317		});
318		if (!branch.ok) throw new Error(JSON.stringify(branch.error));
319		const opened = await openPull(app, scout, shop, {
320		title: "Gift wrap as a line item",
321		body: "",
322		baseBranch: "main",
323		headBranch: "crew/wrap",
324		});
325		if (!opened.ok) throw new Error(String(opened.error));
326		const pull = opened.value;
327		const check = createRun(app.db, {
328		repoId: shop.id,
329		kind: "check",
330		issueId: pull.id,
331		env: `pull-${pull.number}`,
332		commitOid: pull.headOid,
333		reason: "pull",
334		});
335		claimRun(app.db, check.id);
336		finishRun(app.db, check.id, { state: "ok", summary: "check passed" });
337
338		const html = await (await get("/big?app=alice%2Fshop")).text();
339		expect(html).toContain('data-view="app"');
340		expect(html).toContain('data-here="alice/shop"');
341		expect(html).toContain('data-say="/alice/shop/tell"');
342		expect(html).toMatch(
343		/id="big-working"\s+data-live="run\.\*"\s+data-live-repo="alice\/shop"/,
344		);
345		expect(html).toMatch(
346		/id="big-map"\s+data-live="run\.\,issue\.\,pull\.\*"/,
347		);
348		expect(html).toMatch(
349		/id="big-landed"\s+data-live="pull\.merged,run\.finished"/,
350		);
351		// The run: who, what, the clock from when it started, and x to stop.
352		const working = html.slice(
353		html.indexOf('id="big-working"'),
354		html.indexOf('id="big-map"'),
355		);
356		expect(working).toContain(`data-key="run:${running.id}"`);
357		expect(working).toContain(`data-href="/big?run=${running.id}"`);
358		expect(working).toContain('data-state="working"');
359		expect(working).toContain("Checkout keeps the total steady");
360		expect(working).toContain("building it");
361		expect(working).toMatch(/data-started="[^"]+"/);
362		expect(working).toContain(`data-act="x"`);
363		expect(working).toContain(`form="stop-${running.id}"`);
364		expect(working).toContain(`action="/alice/shop/runs/${running.id}/cancel"`);
365		expect(working).toContain("<b>1</b> of 1 slots");
366		// The map drew the issue the crew is on, ringed, with a key.
367		const map = html.slice(
368		html.indexOf('id="big-map"'),
369		html.indexOf('id="big-landed"'),
370		);
371		expect(map).toContain('class="map-node"');
372		expect(map).toContain('data-state="working"');
373		expect(map).toContain(`data-key="issue:${told.value.id}"`);
374		expect(map).toContain("<b>1</b> working");
375		// The footer offers the lists, each with where it goes.
376		expect(html).toMatch(
377		/data-k="r"\s+data-go="\/big\?app=alice%2Fshop&list=runs"/,
378		);
379		expect(html).toMatch(
380		/data-k="p"\s+data-go="\/big\?app=alice%2Fshop&list=pulls"/,
381		);
382		expect(html).toMatch(
383		/data-k="m"\s+data-go="\/big\?app=alice%2Fshop&list=map"/,
384		);
385
386		// The run's own view: the transcript, following, and the steer line.
387		const run = await (await get(`/big?run=${running.id}`)).text();
388		expect(run).toContain('data-view="run"');
389		expect(run).toContain('data-back="/big?app=alice%2Fshop"');
390		expect(run).toContain('id="run-log"');
391		expect(run).toContain(
392		`data-stream="/api/v1/repos/alice/shop/runs/${running.id}/log?follow=1"`,
393		);
394		expect(run).toContain('id="run-steer"');
395		expect(run).toContain(`action="/alice/shop/runs/${running.id}/steer"`);
396		expect(run).toContain('data-running="1"');
397		expect(run).toMatch(/id="run-stop"\s+data-act="x"/);
398
399		// The lists.
400		const runs = await (await get("/big?app=alice%2Fshop&list=runs")).text();
401		expect(runs).toContain('data-view="list"');
402		expect(runs).toContain(`data-key="run:${running.id}"`);
403		expect(runs).toContain(`data-key="run:${check.id}"`);
404		const pulls = await (await get("/big?app=alice%2Fshop&list=pulls")).text();
405		expect(pulls).toContain(`data-key="pull:${pull.id}"`);
406		expect(pulls).toContain('data-word="green"');
407		expect(pulls).toContain(`form="ship-${pull.id}"`);
408		const issues = await (
409		await get("/big?app=alice%2Fshop&list=issues")
410		).text();
411		expect(issues).toContain(`data-key="issue:${told.value.id}"`);
412		expect(issues).toContain('data-word="working"');
413		// Home now counts them.
414		const home = await (await get("/big")).text();
415		expect(home).toMatch(/1\s+working/);
416		// Somebody else's app, or none: not found, never a hint of it.
417		expect((await get("/big?app=alice%2Fnowhere")).status).toBe(404);
418		expect((await get("/big?run=nothing")).status).toBe(404);
419		});
420
421		test("board and map inside the shell, focusable", async () => {
422		const board = await (await get("/big?view=board")).text();
423		expect(board).toContain('data-view="board"');
424		expect(board).toContain('data-layout="wall"');
425		expect(board).toMatch(/id="working"\s+data-live="run\.\*"/);
426		expect(board).toMatch(/id="today"\s+data-live="run\.\*,pull\.merged"/);
427		expect(board).toContain('class="board-card board-run"');
428		expect(board).toMatch(/data-key="run:[^"]+"/);
429		expect(board).toMatch(/data-key="app:alice\/notes"/);
430		const map = await (await get("/big?view=map")).text();
431		expect(map).toContain('data-view="map"');
432		expect(map).toMatch(
433		/id="map-lanes"\s+data-live="run\.\,issue\.\,pull\.\*"/,
434		);
435		expect(map).toContain('data-key="lane:alice/shop"');
436		expect(map).toContain('data-href="/big?app=alice%2Fshop"');
437		expect(map).toContain('class="map-lane"');
438		});
439
440		test("the command line's targets are pages, and the sheet lists every key the footer shows", async () => {
441		const home = await (await get("/big")).text();
442		const apps = /data-apps="([^"]*)"/.exec(home)![1]!.split(" ");
443		for (const c of COMMANDS) {
444		if (c.name === "help") continue;
445		const parsed = parseCommand(
446		c.arg === undefined ? c.name : `${c.name} shop`,
447		{ app: "alice/shop", apps },
448		);
449		expect(parsed.kind).toBe("go");
450		if (parsed.kind !== "go") continue;
451		const res = await get(parsed.url);
452		expect([200, 303]).toContain(res.status);
453		if (res.status === 303) {
454		// :q leaves for the web UI, which sends a studio reader to its home.
455		expect(res.headers.get("location")).not.toContain("/signin");
456		}
457		}
458		for (const path of [
459		"/big",
460		"/big?app=alice%2Fshop",
461		"/big?app=alice%2Fshop&list=runs",
462		"/big?view=board",
463		"/big?view=map",
464		]) {
465		const html = await (await get(path)).text();
466		const foot = kbdsIn(html, "big-foot");
467		const sheet = kbdsIn(html, "big-help");
468		expect(foot.size).toBeGreaterThan(5);
469		for (const k of foot) expect(sheet.has(k)).toBe(true);
470		// Every command has a line on the sheet.
471		for (const c of COMMANDS) expect(html).toContain(`:${c.name}`);
472		}
473		});
474		});
		@@ -1,6 +1,7 @@
1	1	/**
2	2	* The board: a live wall of the crews at work. Signed in, four live
3	3	* regions; a run in flight and a merged pull on it; `?apps=` narrows it;
	4	* `?wall` is its wall mode, where every old `/big` address lands;
4	5	* anonymous is sent to sign in.
5	6	*/
6	7	import { afterAll, beforeAll, describe, expect, test } from "bun:test";
		@@ -279,6 +280,52 @@ describe("the board", () => {
279	280	expect(home).toContain('href="/board"');
280	281	expect(home).toContain("Board");
281	282	});
	283
	284	test("?wall is the wall mode: the same live regions, marked for the far screen", async () => {
	285	const plain = await (await get("/board")).text();
	286	expect(plain).not.toContain("data-wall");
	287	const res = await get("/board?apps=alice/notes&wall");
	288	expect(res.status).toBe(200);
	289	const html = await res.text();
	290	expect(html).toMatch(/<div class="board"\s+data-wall="">/);
	291	expect(html).toMatch(/id="working"\s+data-live="run\.\*"/);
	292	expect(html).toMatch(/class="board-scope"\s*>notes</);
	293	});
	294
	295	// The big view's every address, each its own test: all land on the wall mode.
	296	const oldRoutes: [string, string][] = [
	297	["/big", "/board?wall"],
	298	["/big?view=board", "/board?wall"],
	299	["/big?view=map", "/board?wall"],
	300	["/big?app=alice/notes", "/board?apps=alice%2Fnotes&wall"],
	301	["/big?app=alice%2Fnotes&list=runs", "/board?apps=alice%2Fnotes&wall"],
	302	["/big?app=alice/notes&list=issues", "/board?apps=alice%2Fnotes&wall"],
	303	["/big?app=alice/notes&list=pulls", "/board?apps=alice%2Fnotes&wall"],
	304	["/big?app=alice/notes&list=map", "/board?apps=alice%2Fnotes&wall"],
	305	["/big?run=0123456789abcdef", "/board?wall"],
	306	// An address that was never an app keeps no scope.
	307	["/big?app=../../etc", "/board?wall"],
	308	["/big?app=%22%3E%3Cscript%3E", "/board?wall"],
	309	];
	310	for (const [from, to] of oldRoutes)
	311	test(`${from} lands on ${to}`, async () => {
	312	const res = await get(from);
	313	expect(res.status).toBe(303);
	314	expect(res.headers.get("location")).toBe(to);
	315	const landed = await get(to);
	316	expect(landed.status).toBe(200);
	317	expect(await landed.text()).toContain("data-wall");
	318	});
	319
	320	test("anonymous at /big reaches the sign-in by way of the wall", async () => {
	321	const res = await fetch(`${base}/big?app=alice/notes`, {
	322	redirect: "manual",
	323	});
	324	expect(res.status).toBe(303);
	325	expect(res.headers.get("location")).toBe("/board?apps=alice%2Fnotes&wall");
	326	const next = await fetch(`${base}/board?wall`, { redirect: "manual" });
	327	expect(next.headers.get("location")).toMatch(/^\/signin\?next=/);
	328	});
282	329	});
283	330
284	331	describe("the board's forge strip", () => {