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,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="theme-color" content="#0D1117" />
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+  <link rel="manifest" href="/manifest.json" />
+  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css" />
+  <link rel="stylesheet" href="/style.css" />
+  <title>muxplex</title>
+</head>
+<body>
+
+  <!-- ── Overview view ─────────────────────────────────────────────── -->
+  <div id="view-overview" class="view view--active">
+    <header class="app-header">
+      <h1 class="app-wordmark"><img src="/wordmark-on-dark.svg" alt="muxplex" height="24" /></h1>
+      <span id="connection-status"></span>
+    </header>
+    <div id="session-grid" class="session-grid" role="list"></div>
+    <div id="empty-state" class="empty-state hidden">No active tmux sessions</div>
+  </div>
+
+  <!-- ── Expanded (terminal) view ────────────────────────────────────── -->
+  <div id="view-expanded" class="view hidden">
+    <header class="expanded-header">
+      <button id="back-btn" class="back-btn" aria-label="Back">&#8592;</button>
+      <span id="expanded-session-name" class="expanded-session-name"></span>
+      <button id="palette-trigger" class="palette-trigger" aria-label="Open command palette">&#8984;K</button>
+    </header>
+    <div id="terminal-container" class="terminal-container"></div>
+    <div id="reconnect-overlay" class="reconnect-overlay hidden" aria-live="polite">Reconnecting&hellip;</div>
+  </div>
+
+  <!-- ── Command palette ─────────────────────────────────────────────── -->
+  <div id="command-palette" class="command-palette hidden" role="dialog" aria-modal="true" aria-label="Switch session">
+    <div class="command-palette__backdrop" id="palette-backdrop"></div>
+    <div class="command-palette__dialog">
+      <input id="palette-input" class="command-palette__input" type="text"
+             placeholder="Jump to session…" autocomplete="off" spellcheck="false">
+      <ul id="palette-list" class="command-palette__list" role="listbox" aria-label="Sessions"></ul>
+    </div>
+  </div>
+
+  <!-- ── Bottom sheet (session switcher) ─────────────────────────────── -->
+  <div id="bottom-sheet" class="bottom-sheet hidden" role="dialog" aria-modal="true" aria-label="Switch session">
+    <div class="bottom-sheet__backdrop" id="sheet-backdrop"></div>
+    <div class="bottom-sheet__panel">
+      <div class="bottom-sheet__handle" aria-hidden="true"></div>
+      <ul id="sheet-list" class="bottom-sheet__list" role="listbox" aria-label="Sessions"></ul>
+    </div>
+  </div>
+
+  <!-- ── Session pill (persistent overlay button) ───────────────────── -->
+  <button id="session-pill" class="session-pill hidden" aria-label="Switch session">
+    <span id="session-pill-label" class="session-pill__label"></span>
+    <span id="session-pill-bell" class="session-pill__bell hidden" aria-hidden="true">&#128276;</span>
+  </button>
+
+  <!-- ── Toast notification ─────────────────────────────────────────── -->
+  <div id="toast" class="toast hidden" role="status" aria-live="polite" aria-atomic="true"></div>
+
+  <!-- ── Scripts ────────────────────────────────────────────────────── -->
+  <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.js"></script>
+  <script src="/app.js" defer></script>
+  <script src="/terminal.js" defer></script>
+</body>
+</html>