ai-or-die 0.1.20 → 0.1.22

package/docs/specs/client-app.md

@@ -11,6 +11,7 @@ The frontend is a single-page application served from `src/public/`. It runs ent
 | xterm.js | 5.3.0 | unpkg CDN | Terminal emulator component |
 | xterm-addon-fit | 0.8.0 | unpkg CDN | Auto-fit terminal to container |
 | xterm-addon-web-links | 0.9.0 | unpkg CDN | Clickable URLs in terminal output |
+| xterm-addon-unicode11 | 0.6.0 | unpkg CDN | Unicode 11 character width support for Nerd Font / powerline glyphs |
 | JetBrains Mono | -- | Google Fonts | Monospace font for terminal (fallback) |
 | MesloLGS Nerd Font | -- | jsDelivr CDN | Primary terminal font with Nerd Font glyphs |
 | Inter | -- | Google Fonts | UI font for headers, tabs, controls |
@@ -91,13 +92,14 @@ The main application controller. Instantiated once on page load.
 
 1. Call `window.authManager.initialize()`. If it returns `false`, the login prompt is displayed and initialization halts.
 2. Fetch `/api/config` to get folder mode, aliases, and base folder.
-3. Set up the terminal (xterm.js with fit addon and web links addon).
-4. Establish WebSocket connection.
-5. Set up UI event handlers (folder browser, session controls, resize observer).
-6. Initialize `SessionTabManager`.
-7. Initialize `PlanDetector`.
-8. Load existing sessions from the server.
-9. Start usage polling interval.
+3. Set up the terminal (xterm.js with fit, web links, and unicode11 addons).
+4. Apply saved settings (font, theme, cursor) immediately via `applySettings(loadSettings())`.
+5. Establish WebSocket connection.
+6. Set up UI event handlers (folder browser, session controls, resize observer).
+7. Initialize `SessionTabManager`.
+8. Initialize `PlanDetector`.
+9. Load existing sessions from the server.
+10. Start usage polling interval.
 
 ### WebSocket Management
 
@@ -117,7 +119,7 @@ The main application controller. Instantiated once on page load.
     cursor: '#f0f6fc',
     // Full 16-color ANSI palette configured
   },
-  fontFamily: "'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace",
+  fontFamily: "reads from CSS --font-mono token; defaults to 'MesloLGS Nerd Font', 'JetBrains Mono', monospace",
   fontSize: 14,          // 13 on mobile
   lineHeight: 1.2,
   scrollback: 10000,

package/e2e/playwright.config.js

@@ -57,7 +57,7 @@ module.exports = defineConfig({
     },
     {
       name: 'new-features',
-      testMatch: /1[0-3]-.*\.spec\.js/,
+      testMatch: /1[0-4]-.*\.spec\.js/,
     },
   ],
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ai-or-die",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "description": "Universal AI coding terminal — Claude, Copilot, Gemini & more in your browser",
   "main": "src/server.js",
   "bin": {

package/src/public/app.js

@@ -75,7 +75,7 @@ class ClaudeCodeWebInterface {
         this.setupTerminal();
         this.setupUI();
         this.setupPlanDetector();
-        this.loadSettings();
+        this.applySettings(this.loadSettings());
         this.applyAliasesToUI();
         this.disablePullToRefresh();
 
@@ -307,7 +307,8 @@ class ClaudeCodeWebInterface {
         
         this.terminal = new Terminal({
             fontSize: fontSize,
-            fontFamily: 'JetBrains Mono, Fira Code, Monaco, Consolas, monospace',
+            fontFamily: getComputedStyle(document.documentElement).getPropertyValue('--font-mono').trim()
+                || "'MesloLGS Nerd Font', 'Meslo Nerd Font', 'JetBrains Mono', monospace",
             theme: {
                 background: 'transparent',
                 foreground: '#f0f6fc',
@@ -353,9 +354,27 @@ class ClaudeCodeWebInterface {
             this.terminal.loadAddon(this.searchAddon);
         }
 
+        // Load Unicode11 addon for correct Nerd Font / powerline glyph widths
+        if (typeof Unicode11Addon !== 'undefined') {
+            this.unicode11Addon = new Unicode11Addon.Unicode11Addon();
+            this.terminal.loadAddon(this.unicode11Addon);
+            this.terminal.unicode.activeVersion = '11';
+        }
+
         this.terminal.open(document.getElementById('terminal'));
         this.fitTerminal();
 
+        // Re-render terminal when Nerd Font finishes loading (lazy-loaded via media="print")
+        if (document.fonts && document.fonts.load) {
+            document.fonts.load('14px MesloLGS Nerd Font').then(() => {
+                this.terminal.refresh(0, this.terminal.rows - 1);
+                this.fitTerminal();
+            }).catch(() => {
+                // Font not available — still refresh in case fallback font loaded late
+                this.terminal.refresh(0, this.terminal.rows - 1);
+            });
+        }
+
         // Attach keyboard copy/paste shortcuts (Ctrl+C/V, Ctrl+Shift+C/V)
         attachClipboardHandler(this.terminal, (data) => {
             if (this.socket && this.socket.readyState === WebSocket.OPEN) {

package/src/public/components/menus.css

@@ -26,6 +26,7 @@
     align-items: center;
     justify-content: center;
     width: 16px;
+    min-width: 16px;
     height: 16px;
     flex-shrink: 0;
     opacity: 0.7;

package/src/public/index.html

@@ -59,6 +59,7 @@
     <script src="https://unpkg.com/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.js"></script>
     <script src="https://unpkg.com/xterm-addon-web-links@0.9.0/lib/xterm-addon-web-links.js"></script>
     <script src="https://unpkg.com/xterm-addon-search@0.13.0/lib/xterm-addon-search.js"></script>
+    <script src="https://unpkg.com/xterm-addon-unicode11@0.6.0/lib/xterm-addon-unicode11.js"></script>
     <link rel="stylesheet" href="https://unpkg.com/xterm@5.3.0/css/xterm.css" />
 </head>
 <body>
@@ -163,12 +164,12 @@
                     <span>Paste as Plain Text</span>
                 </div>
                 <div class="ctx-item" data-action="pasteImage" role="menuitem" tabindex="-1">
-                    <span class="ctx-icon"></span>
+                    <span class="ctx-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg></span>
                     <span>Paste Image</span>
                 </div>
                 <div class="ctx-sep" role="separator"></div>
                 <div class="ctx-item" data-action="attachImage" role="menuitem" tabindex="-1">
-                    <span class="ctx-icon"></span>
+                    <span class="ctx-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg></span>
                     <span>Attach Image...</span>
                 </div>
                 <div class="ctx-sep" role="separator"></div>

package/src/public/splits.js

@@ -50,6 +50,14 @@ class Split {
         
         this.terminal.loadAddon(this.fitAddon);
         this.terminal.loadAddon(this.webLinksAddon);
+
+        // Load Unicode11 addon for correct Nerd Font / powerline glyph widths
+        if (typeof Unicode11Addon !== 'undefined') {
+            const unicode11 = new Unicode11Addon.Unicode11Addon();
+            this.terminal.loadAddon(unicode11);
+            this.terminal.unicode.activeVersion = '11';
+        }
+
         this.terminal.open(terminalDiv);
 
         // Attach keyboard copy/paste shortcuts (Ctrl+C/V, Ctrl+Shift+C/V)