pi-kanban 0.3.1 → 2.0.0

package/public/sw.js

@@ -1,5 +1,5 @@
-const CACHE_NAME = 'pi-kanban-v2';
-const PRECACHE_URLS = ['/', '/style.css', '/app.js'];
+const CACHE_NAME = 'pi-kanban-v1';
+const PRECACHE_URLS = ['/', '/style.css', '/project-match.js', '/link-url.js', '/group-tree.js', '/app.js'];
 
 let cachePromise = null;
 function getCache() {
@@ -45,7 +45,8 @@ self.addEventListener('fetch', (event) => {
     event.respondWith(
       fetch(event.request)
         .then(r => cacheResponse(event.request, r))
-        .catch(() => caches.match(event.request))
+        // respondWith(undefined) throws, so a miss while the server is down must still be a Response.
+        .catch(() => caches.match(event.request).then(cached => cached || Response.error()))
     );
     return;
   }

package/public/terminal-frame.js

@@ -0,0 +1,437 @@
+// The terminal half of the board's TERMINAL region. The board frames this page from the other
+// loopback name (see terminalFrameOrigin in app.js), a different site, so Chrome runs it in its own
+// renderer process: keys, output and acks never wait behind board work. The board keeps every decision
+// (when to open, retries, prompts, focus); this page keeps xterm and the socket.
+((root) => {
+  'use strict';
+
+  const ACK_BATCH_BYTES = 32 * 1024;
+  const MSG = 'pk-term:';
+
+  const modsOf = (e) =>
+    [e.ctrlKey && 'ctrl', e.altKey && 'alt', e.shiftKey && 'shift', e.metaKey && 'meta'].filter(Boolean).join('+');
+
+  // A claim names a key by its physical code, or by its character when the layout moves it. A press
+  // that AltGr turns into a character (Polish AltGr+S is 'ś') is matched by its character only.
+  function keySigs(e) {
+    const mods = modsOf(e);
+    return [
+      e.code && !e.getModifierState?.('AltGraph') && `${mods}|c:${e.code}`,
+      typeof e.key === 'string' && `${mods}|k:${e.key.toLowerCase()}`,
+    ].filter(Boolean);
+  }
+
+  const claimSig = (c) => keySigs(c)[0];
+
+  const isClaimed = (claims, e) => keySigs(e).some((s) => claims.has(s));
+
+  function parentOriginOf(hash) {
+    const m = /[#&]p=([^&]*)/.exec(hash || '');
+    if (!m) return null;
+    try {
+      return new URL(decodeURIComponent(m[1])).origin;
+    } catch (_) {
+      return null;
+    }
+  }
+
+  function tailOf(buf, count) {
+    if (!buf) return '';
+    const lines = [];
+    for (let i = buf.length - 1; i >= 0 && lines.length < count; i--) {
+      const text = buf.getLine(i)?.translateToString(true) ?? '';
+      if (text.trim() || lines.length) lines.unshift(text);
+    }
+    return lines.join('\n');
+  }
+
+  const PATH_ROOT = String.raw`(?:[A-Za-z]:[\\/]|\/(?=[\w.@+-]+\/)|\\\\(?=[\w.$-]+\\))`;
+  // A quoted path may hold spaces; a bare one ends at the first.
+  const PATH_RE = new RegExp(
+    [
+      String.raw`"(${PATH_ROOT}[^"<>|*?]*[^\s"<>|*?])"`,
+      String.raw`'(${PATH_ROOT}[^'<>|*?]*[^\s'<>|*?])'`,
+      String.raw`(?<![\w/\\:.~-])${PATH_ROOT}[^\s"'<>|*?${'`'}]*[^\s"'<>|*?${'`'}.,;:!)\]}]`,
+    ].join('|'),
+    'g',
+  );
+
+  function pathsIn(text) {
+    return Array.from(text.matchAll(PATH_RE), (m) => {
+      const quoted = m[1] ?? m[2];
+      const found = quoted ?? m[0];
+      return { index: m.index + (quoted ? 1 : 0), text: found, path: found.replace(/(?::\d+){1,2}$/, '') };
+    });
+  }
+
+  // Cell x of each character, because a wide character spans two cells and translateToString counts it once.
+  function lineCells(line, cols, reuse) {
+    let text = '';
+    const xs = [];
+    for (let x = 0; x < cols; x++) {
+      const cell = line.getCell(x, reuse);
+      if (!cell || cell.getWidth() === 0) continue;
+      const chars = cell.getChars() || ' ';
+      for (let i = 0; i < chars.length; i++) xs.push(x);
+      text += chars;
+    }
+    return { text, xs };
+  }
+
+  const QUERIES = [
+    { final: 'c' },
+    { prefix: '>', final: 'c' },
+    { final: 'n' },
+    { prefix: '?', final: 'n' },
+    { intermediates: '$', final: 'p' },
+    { prefix: '?', intermediates: '$', final: 'p' },
+  ];
+
+  function oscColor(hex) {
+    const m = /^#([0-9a-f]{6})$/i.exec(hex || '');
+    if (!m) return null;
+    return `rgb:${[0, 2, 4].map((i) => m[1].slice(i, i + 2).repeat(2)).join('/')}`;
+  }
+
+  // The key changes with any color, so a new palette of the same lightness is reported too.
+  function schemeOf(theme) {
+    const m = /^#([0-9a-f]{6})$/i.exec(theme?.background || '');
+    if (!m) return null;
+    const [r, g, b] = [0, 2, 4].map((i) => Number.parseInt(m[1].slice(i, i + 2), 16));
+    return { dark: 0.299 * r + 0.587 * g + 0.114 * b < 128, key: hashOf(JSON.stringify(theme)) };
+  }
+
+  function hashOf(text) {
+    let h = 0x811c9dc5;
+    for (let i = 0; i < text.length; i++) h = Math.imul(h ^ text.charCodeAt(i), 0x01000193);
+    return (h >>> 0).toString(16);
+  }
+
+  function createTerminalFrame(win) {
+    const doc = win.document;
+    const parentOrigin = parentOriginOf(win.location.hash);
+    const host = doc.getElementById('host');
+    const state = {
+      term: null,
+      fit: null,
+      webgl: null,
+      initing: false,
+      ws: null,
+      attached: false,
+      ackPending: 0,
+      ackTimer: null,
+      claims: new Set(),
+    };
+
+    function up(t, data) {
+      if (parentOrigin) win.parent.postMessage({ ...data, type: MSG + t }, parentOrigin);
+    }
+
+    function send(msg) {
+      if (state.ws?.readyState === win.WebSocket.OPEN) state.ws.send(JSON.stringify(msg));
+    }
+
+    // The WebGL renderer keeps its last frame and glyph atlas while the frame is 0×0, and comes back
+    // showing stale cells or backgrounds with no text. xterm does not repaint on its own.
+    function repaint() {
+      const term = state.term;
+      if (!term) return;
+      try {
+        state.webgl?.clearTextureAtlas();
+      } catch (_) {}
+      term.refresh(0, term.rows - 1);
+    }
+
+    // The fit addon measures 0×0 while the board's pane is display:none.
+    function fit() {
+      if (!state.fit || !host.offsetWidth || !host.offsetHeight) return;
+      try {
+        state.fit.fit();
+      } catch (_) {}
+    }
+
+    function setBg(options) {
+      doc.documentElement.style.setProperty('--bg', options?.theme?.background || '');
+    }
+
+    function sendScheme() {
+      const theme = state.term.options.theme;
+      const scheme = schemeOf(theme);
+      if (!scheme || !state.attached) return;
+      send({ t: 'scheme', ...scheme, fg: oscColor(theme.foreground), bg: oscColor(theme.background) });
+    }
+
+    function applyTheme(options) {
+      Object.assign(state.term.options, options);
+      setBg(options);
+      repaint();
+      sendScheme();
+    }
+
+    function applyFont(size) {
+      const term = state.term;
+      term.options.fontSize = size;
+      fit();
+      doc.fonts
+        ?.load(`${size}px ${term.options.fontFamily}`)
+        .then(repaint)
+        .catch(() => {});
+    }
+
+    function forwardClaimed(e) {
+      if (!isClaimed(state.claims, e)) return false;
+      e.preventDefault();
+      up('key', { key: e.key, code: e.code, ctrl: e.ctrlKey, alt: e.altKey, shift: e.shiftKey, meta: e.metaKey });
+      return true;
+    }
+
+    function keyFilter(e) {
+      if (e.type !== 'keydown') return true;
+      if (forwardClaimed(e)) return false;
+      const ctrlOnly = e.ctrlKey && !e.altKey && !e.metaKey;
+      if (ctrlOnly && e.code === 'KeyC' && (e.shiftKey || state.term.hasSelection())) {
+        e.preventDefault();
+        win.navigator.clipboard?.writeText(state.term.getSelection()).catch(() => {});
+        state.term.clearSelection();
+        return false;
+      }
+      // The browser's own paste event reaches xterm's textarea.
+      return !(ctrlOnly && e.code === 'KeyV');
+    }
+
+    // xterm measures its cell when it opens or a font option changes, not when a web font finishes
+    // loading. Measured on the fallback font, the cell is shorter, fit picks more rows than the pane
+    // shows, and the first hello asks the PTY for that size.
+    function init(o) {
+      if (state.initing) return;
+      state.initing = true;
+      const loaded = doc.fonts?.load(`${o.fontSize}px ${o.fontFamily}`);
+      if (loaded) loaded.catch(() => {}).then(() => build(o));
+      else build(o);
+    }
+
+    function build(o) {
+      const term = new win.Terminal({
+        fontFamily: o.fontFamily,
+        fontSize: o.fontSize,
+        scrollback: o.scrollback,
+        windowsPty: o.windowsPty,
+        cursorBlink: true,
+        allowProposedApi: true,
+        // xterm's default asks with confirm() and opens a window, which an installed app window blocks.
+        linkHandler: { activate: (_e, uri) => up('link', { href: uri }), allowNonHttpProtocols: true },
+        ...o.themeOptions,
+      });
+      state.term = term;
+      state.fit = new win.FitAddon.FitAddon();
+      term.loadAddon(state.fit);
+      term.loadAddon(new win.Unicode11Addon.Unicode11Addon());
+      term.unicode.activeVersion = '11';
+      // Link providers scan a line only when the pointer moves onto it, never on output.
+      term.loadAddon(new win.WebLinksAddon.WebLinksAddon((_e, uri) => up('link', { href: uri })));
+      const cellReuse = term.buffer.active.getNullCell();
+      term.registerLinkProvider({
+        provideLinks(y, done) {
+          const line = term.buffer.active.getLine(y - 1);
+          if (!line || !/[\\/]/.test(line.translateToString(true))) return done(undefined);
+          const { text, xs } = lineCells(line, term.cols, cellReuse);
+          const links = pathsIn(text).map((p) => ({
+            text: p.text,
+            range: { start: { x: xs[p.index] + 1, y }, end: { x: xs[p.index + p.text.length - 1] + 1, y } },
+            activate: () => up('link', { href: p.path }),
+          }));
+          done(links.length ? links : undefined);
+        },
+      });
+      term.open(host);
+      try {
+        const gl = new win.WebglAddon.WebglAddon();
+        gl.onContextLoss(() => {
+          gl.dispose();
+          state.webgl = null;
+          repaint();
+        });
+        term.loadAddon(gl);
+        state.webgl = gl;
+      } catch (_) {
+        // No WebGL: xterm falls back to its DOM renderer.
+      }
+      setBg(o.themeOptions);
+      applyFont(o.fontSize);
+      term.attachCustomKeyEventHandler(keyFilter);
+      // After a click on the scrollbar, or before the board's focus message lands, the frame has focus
+      // but xterm's textarea does not, and the board's keys must still get out.
+      doc.addEventListener('keydown', (e) => {
+        if (e.target !== term.textarea) forwardClaimed(e);
+      });
+      term.textarea.addEventListener('focus', () => {
+        up('focused');
+        send({ t: 'resize', cols: term.cols, rows: term.rows, claim: true });
+      });
+      // xterm reports focus only when its textarea gains or loses it, not when an app turns focus reporting
+      // (DECSET 1004) on. After a reload xterm is focused before the replayed output sets the mode, so the
+      // app never gets a focus-in and draws its cursor as unfocused.
+      term.parser.registerCsiHandler({ prefix: '?', final: 'h' }, (params) => {
+        if (!params.includes(1004) || term.modes.sendFocusMode) return false;
+        win.queueMicrotask(() => {
+          if (term.modes.sendFocusMode && doc.hasFocus() && doc.activeElement === term.textarea) {
+            send({ t: 'in', d: '\x1b[I' });
+          }
+        });
+        return false;
+      });
+      // The server's mirror answers the app's queries, with this viewer's colors when it owns the PTY.
+      // An answer from here would repeat it, at this viewer's size, and claim the PTY.
+      for (const id of QUERIES) term.parser.registerCsiHandler(id, () => true);
+      term.parser.registerDcsHandler({ intermediates: '$', final: 'q' }, () => true);
+      for (const code of [10, 11]) term.parser.registerOscHandler(code, (data) => data === '?');
+      term.onData((d) => send({ t: 'in', d }));
+      term.onResize(({ cols, rows }) => send({ t: 'resize', cols, rows }));
+      // One fit per frame while a drag resizes the pane. The atlas is rebuilt only when the frame comes
+      // back from 0×0, which is also how a hidden pane shows again.
+      let frame = 0;
+      let visible = false;
+      new win.ResizeObserver(() => {
+        if (frame) return;
+        frame = win.requestAnimationFrame(() => {
+          frame = 0;
+          const nowVisible = host.offsetWidth > 0;
+          fit();
+          if (nowVisible && !visible) repaint();
+          visible = nowVisible;
+        });
+      }).observe(host);
+      // Vimium eats Escape inside a text field and only blurs it, so the key never reaches pi.
+      // A blur no click caused, while this frame keeps focus, is that Escape. When the board takes
+      // focus back, this document loses it, so that blur is not one.
+      let pointerDown = false;
+      doc.addEventListener('mousedown', () => (pointerDown = true), true);
+      doc.addEventListener('mouseup', () => (pointerDown = false), true);
+      term.textarea.addEventListener('blur', () => {
+        if (pointerDown) return;
+        win.requestAnimationFrame(() => {
+          if (!state.attached || !host.offsetWidth) return;
+          if (!doc.hasFocus() || doc.activeElement !== doc.body) return;
+          send({ t: 'in', d: '\x1b' });
+          term.focus();
+        });
+      });
+      up('term');
+    }
+
+    function ack(ws, n) {
+      if (state.ws !== ws) return;
+      state.ackPending += n;
+      const flush = () => {
+        win.clearTimeout(state.ackTimer);
+        state.ackTimer = null;
+        if (state.ws === ws && state.ackPending) send({ t: 'ack', n: state.ackPending });
+        state.ackPending = 0;
+      };
+      if (state.ackPending >= ACK_BATCH_BYTES) flush();
+      else if (!state.ackTimer) state.ackTimer = win.setTimeout(flush, 50);
+    }
+
+    // RIS through the write queue, not term.reset(): reset() runs at once, and output the previous
+    // session had already queued would still be drawn after it.
+    function clearScreen() {
+      state.term.write('\x1bc', repaint);
+    }
+
+    function detach() {
+      const ws = state.ws;
+      state.ws = null;
+      state.attached = false;
+      win.clearTimeout(state.ackTimer);
+      state.ackTimer = null;
+      state.ackPending = 0;
+      if (ws) {
+        ws.onclose = null;
+        ws.close();
+      }
+    }
+
+    function open({ socketId, hello, reset }) {
+      detach();
+      up('opening', { socketId });
+      const term = state.term;
+      let outputSent = false;
+      if (reset) clearScreen();
+      fit();
+      const proto = win.location.protocol === 'https:' ? 'wss:' : 'ws:';
+      const ws = new win.WebSocket(`${proto}//${win.location.host}/api/terminal/ws`);
+      ws.binaryType = 'arraybuffer';
+      state.ws = ws;
+      ws.onopen = () => ws.send(JSON.stringify({ ...hello, t: 'hello', cols: term.cols, rows: term.rows }));
+      ws.onmessage = (ev) => {
+        if (state.ws !== ws) return;
+        if (typeof ev.data !== 'string') {
+          const bytes = new Uint8Array(ev.data);
+          term.write(bytes, () => {
+            ack(ws, bytes.length);
+            if (!outputSent && state.ws === ws && tailOf(term.buffer.active, 1)) {
+              outputSent = true;
+              up('output', { socketId });
+            }
+          });
+          return;
+        }
+        let msg;
+        try {
+          msg = JSON.parse(ev.data);
+        } catch (_) {
+          return;
+        }
+        if (msg.t === 'ready') {
+          state.attached = true;
+          // A retry keeps the last screen until the replay arrives.
+          if (!reset) clearScreen();
+          send({ t: 'resize', cols: term.cols, rows: term.rows });
+          sendScheme();
+        } else if (msg.t === 'exit') state.attached = false;
+        up('ws', { socketId, msg, ...(msg.t === 'exit' && { tail: tailOf(term.buffer.active, 6) }) });
+      };
+      ws.onclose = (ev) => {
+        if (state.ws !== ws) return;
+        state.ws = null;
+        state.attached = false;
+        up('close', { socketId, code: ev.code });
+      };
+    }
+
+    function onMessage(e) {
+      if (e.source !== win.parent || e.origin !== parentOrigin) return;
+      const m = e.data;
+      if (typeof m?.type !== 'string' || !m.type.startsWith(MSG)) return;
+      if (m.type === `${MSG}init`) return init(m);
+      if (!state.term) return;
+      switch (m.type.slice(MSG.length)) {
+        case 'open':
+          return open(m);
+        case 'detach':
+          return detach();
+        case 'theme':
+          return applyTheme(m.options);
+        case 'font':
+          return applyFont(m.size);
+        case 'claims':
+          state.claims = new Set((m.keys || []).map(claimSig));
+          return;
+        case 'focus':
+          return state.term.focus();
+        case 'refresh':
+          fit();
+          return repaint();
+      }
+    }
+
+    win.addEventListener('message', onMessage);
+    up('loaded');
+  }
+
+  if (typeof module === 'object' && module.exports) {
+    module.exports = { createTerminalFrame, claimSig, isClaimed, parentOriginOf, tailOf, pathsIn, schemeOf };
+  } else {
+    createTerminalFrame(root);
+  }
+})(typeof window === 'undefined' ? globalThis : window);

package/public/terminal.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Terminal</title>
+  <link rel="stylesheet" href="/fonts/fonts.css">
+  <link rel="stylesheet" href="/vendor/xterm/xterm.css">
+  <style>
+    html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg, transparent); }
+    #host { height: 100%; }
+    #host .xterm { height: 100%; }
+    /* xterm.css paints the viewport #000; it shows below the last row when the height is not a whole number of rows. */
+    /* xterm draws its own scrollbar; the viewport's native one would show at the bottom-right corner. */
+    #host .xterm .xterm-viewport { background-color: var(--bg, transparent); scrollbar-width: none; }
+  </style>
+</head>
+<body>
+  <div id="host"></div>
+  <script src="/vendor/xterm/xterm.js"></script>
+  <script src="/vendor/xterm/addon-fit.js"></script>
+  <script src="/vendor/xterm/addon-webgl.js"></script>
+  <script src="/vendor/xterm/addon-unicode11.js"></script>
+  <script src="/vendor/xterm/addon-web-links.js"></script>
+  <script src="/terminal-frame.js"></script>
+</body>
+</html>