refactor: restructure project into muxplex/ subdir with brand integration

- Move coordinator/, frontend/, Caddyfile, pyproject.toml, requirements.txt, docs/ into muxplex/ subdir in prep for packaging/sharing - Add brand assets to frontend/: favicon.ico, pwa-192/512.png, apple-touch-icon.png, wordmark-on-dark.svg - Update app: title → muxplex, header → wordmark SVG, brand color tokens in style.css, manifest.json updated with muxplex name and brand icons - Add design system: assets/branding/tokens.css (101 CSS custom properties), tokens.json (127 tokens), DESIGN-SYSTEM.md (856-line spec) - Add assets/branding/: SVG sources, rendered PNGs (icons, favicons, PWA, OG) - Add scripts/render-brand-assets.py for reproducible PNG generation - Add muxplex/README.md
2026-03-27 15:06:00 -07:00
commit 8234e2ec05
76 changed files with 17006 additions and 0 deletions
@@ -0,0 +1,219 @@
+// Phase 2b implementation — terminal.js
+// xterm.js Terminal + FitAddon initialization (task-12)
+
+// ─── Module-level state ───────────────────────────────────────────────────────
+let _term = null;
+let _fitAddon = null;
+let _ws = null;
+let _reconnectTimer = null;
+let _currentSession = null;
+let _vpHandler = null;
+
+// ─── Forward declarations ─────────────────────────────────────────────────────
+
+function connectWebSocket(name) {
+  const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+  const url = `${proto}//${location.host}/terminal/ws`;
+  const reconnectOverlay = document.getElementById('reconnect-overlay');
+  var encoder = typeof TextEncoder !== 'undefined' ? new TextEncoder() : null;
+
+  function encodePayload(typeChar, str) {
+    // Returns Uint8Array: [typeCharCode, ...utf8bytes]
+    var strBytes = encoder ? encoder.encode(str) : new Uint8Array(Array.from(str).map(function(c) { return c.charCodeAt(0); }));
+    var payload = new Uint8Array(1 + strBytes.length);
+    payload[0] = typeChar;
+    payload.set(strBytes, 1);
+    return payload;
+  }
+
+  // Register terminal event handlers (once — _ws captured by closure reference)
+  if (_term) {
+    _term.onData(function(data) {
+      if (_ws && _ws.readyState === WebSocket.OPEN) {
+        // ttyd protocol: input is type 0x30 ('0') + UTF-8 keystroke bytes
+        _ws.send(encodePayload(0x30, data));
+      }
+    });
+    _term.onResize(function(size) {
+      if (_ws && _ws.readyState === WebSocket.OPEN) {
+        // ttyd protocol: resize is type 0x31 ('1') + UTF-8 JSON
+        _ws.send(encodePayload(0x31, JSON.stringify({ columns: size.cols, rows: size.rows })));
+      }
+    });
+  }
+
+  function connect() {
+    // 'tty' subprotocol is REQUIRED — without it ttyd never starts the PTY.
+    // Confirmed via raw Python WebSocket tests: ttyd accepts the TCP upgrade but
+    // sits completely silent (no child process spawned) when subprotocol is omitted.
+    _ws = new WebSocket(url, ['tty']);
+    _ws.binaryType = 'arraybuffer';
+
+    _ws.addEventListener('open', function() {
+      if (reconnectOverlay) reconnectOverlay.classList.add('hidden');
+      // Step 1: TEXT frame auth handshake — ttyd checks AuthToken before starting PTY
+      _ws.send(JSON.stringify({ AuthToken: '' }));
+      // Step 2: BINARY frame with initial terminal dimensions — [0x31] + JSON({columns, rows})
+      if (_term) {
+        _ws.send(encodePayload(0x31, JSON.stringify({ columns: _term.cols, rows: _term.rows })));
+      }
+      // Auto-focus the terminal so user can type immediately without clicking
+      if (_term) _term.focus();
+    });
+
+    _ws.addEventListener('message', function(e) {
+      if (!_term) return;
+      if (e.data instanceof ArrayBuffer) {
+        var msg = new Uint8Array(e.data);
+        if (msg.length < 1) return;
+        var msgType = msg[0];
+        var payload = msg.slice(1);
+        if (msgType === 0x30) {  // '0' = terminal output — write to xterm.js
+          _term.write(payload);
+        }
+        // 0x31 ('1') = window title, 0x32 ('2') = preferences — ignore for now
+      } else if (typeof e.data === 'string') {
+        _term.write(e.data);  // fallback for text frames
+      }
+    });
+
+    _ws.addEventListener('close', function() {
+      if (!_currentSession) return; // intentional close — don't reconnect
+      if (reconnectOverlay) reconnectOverlay.classList.remove('hidden');
+      _reconnectTimer = setTimeout(connect, 2000);
+    });
+
+    _ws.addEventListener('error', function() {
+      console.warn('tmux-web: WebSocket error on', url);
+    });
+  }
+
+  connect();
+}
+function initVisualViewport() {
+  if (!window.visualViewport) return;
+  if (_vpHandler) window.visualViewport.removeEventListener('resize', _vpHandler);
+
+  _vpHandler = function() {
+    if (!_term || !_fitAddon) return;
+    var container = document.getElementById('terminal-container');
+    if (!container) return;
+
+    // Resize container to fill visual viewport above keyboard
+    var headerHeight = 44; // matches --header-height CSS custom property
+    var vvh = window.visualViewport.height;
+    var termHeight = Math.max(100, vvh - headerHeight);
+    container.style.height = termHeight + 'px';
+
+    // Refit xterm.js to new container size
+    try { _fitAddon.fit(); } catch (_) {}
+  };
+
+  window.visualViewport.addEventListener('resize', _vpHandler);
+}
+
+// ─── Terminal creation ────────────────────────────────────────────────────────
+
+/**
+ * Create (or recreate) the xterm.js Terminal and FitAddon instances.
+ * Disposes any existing terminal first.
+ * Stores the results in module-level _term and _fitAddon.
+ */
+function createTerminal() {
+  // Dispose any existing instance
+  if (_term) {
+    _term.dispose();
+    _term = null;
+    _fitAddon = null;
+  }
+
+  const mobile = window.innerWidth < 600;
+
+  _term = new window.Terminal({
+    cursorBlink: true,
+    fontSize: mobile ? 12 : 14,
+    fontFamily: "'SF Mono', 'Fira Code', Consolas, monospace",
+    theme: {
+      background: '#000000',
+      foreground: '#c9d1d9',
+      cursor: '#58a6ff',
+    },
+    scrollback: mobile ? 500 : 5000,
+    allowProposedApi: true,
+  });
+
+  _fitAddon = new window.FitAddon.FitAddon();
+  _term.loadAddon(_fitAddon);
+}
+
+// ─── Open / close ─────────────────────────────────────────────────────────────
+
+/**
+ * Open a terminal session inside #terminal-container.
+ * @param {string} sessionName
+ */
+function openTerminal(sessionName) {
+  _currentSession = sessionName;
+
+  const container = document.getElementById('terminal-container');
+  if (!container) {
+    console.warn('[openTerminal] #terminal-container not found');
+    return;
+  }
+
+  createTerminal();
+
+  _term.open(container);
+
+  if (_fitAddon) {
+    // requestAnimationFrame guarantees one full browser layout pass after the flex
+    // container becomes visible before fit() measures dimensions.
+    // iOS Safari defers flex layout — calling fit() synchronously here gives 0px width
+    // → 2-column terminal. The RAF and 500ms fallback fix this race condition.
+    // Falls back to immediate execution in Node.js test environments where RAF is absent.
+    var fitAddonRef = _fitAddon;
+    var raf = (typeof requestAnimationFrame !== 'undefined') ? requestAnimationFrame : function(fn) { fn(); };
+    raf(function() {
+      try { fitAddonRef.fit(); } catch (_) {}
+      // 500ms fallback for slow mobile layout engines (e.g. first paint on low-end devices)
+      setTimeout(function() {
+        try { if (_fitAddon) _fitAddon.fit(); } catch (_) {}
+      }, 500);
+    });
+  }
+
+  connectWebSocket(sessionName);
+  initVisualViewport(); /* defined in Task 14 */
+}
+
+/**
+ * Close the current terminal session and clean up all resources.
+ */
+function closeTerminal() {
+  if (_vpHandler) {
+    if (window.visualViewport) window.visualViewport.removeEventListener('resize', _vpHandler);
+    _vpHandler = null;
+  }
+
+  if (_reconnectTimer) {
+    clearTimeout(_reconnectTimer);
+    _reconnectTimer = null;
+  }
+
+  if (_ws) {
+    _ws.close();
+    _ws = null;
+  }
+
+  if (_term) {
+    _term.dispose();
+    _term = null;
+    _fitAddon = null;
+  }
+
+  _currentSession = null;
+}
+
+// ─── Expose to app.js ─────────────────────────────────────────────────────────
+window._openTerminal = openTerminal;
+window._closeTerminal = closeTerminal;