glad-web 1.0.14 → 1.0.17

package/assets/logo.svg

@@ -1,40 +1,43 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
   <defs>
+    <!-- Normcore / Cold Slate Background Gradient -->
     <linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#151522" />
-      <stop offset="100%" stop-color="#2D2B55" />
+      <stop offset="0%" stop-color="#1E2024" />
+      <stop offset="50%" stop-color="#111215" />
+      <stop offset="100%" stop-color="#050505" />
     </linearGradient>
-    <linearGradient id="phoneGrad" x1="0%" y1="100%" x2="100%" y2="0%">
-      <stop offset="0%" stop-color="#FF3366" />
-      <stop offset="50%" stop-color="#FF9933" />
-      <stop offset="100%" stop-color="#33CCFF" />
+
+    <!-- Sunset Coral Gradient (Warm, energetic smile/tongue) -->
+    <linearGradient id="faceGrad" gradientUnits="userSpaceOnUse" x1="125" y1="230" x2="387" y2="310">
+      <stop offset="0%" stop-color="#FF9E79" />
+      <stop offset="60%" stop-color="#FF6F61" />
+      <stop offset="100%" stop-color="#D84315" />
     </linearGradient>
   </defs>
 
-  <!-- Background App Icon Shape -->
-  <rect x="24" y="24" width="464" height="464" rx="104" fill="url(#bgGrad)" />
+  <!-- Background App Icon Shape (Cold basalt gradient, fills the icon canvas) -->
+  <rect width="512" height="512" fill="url(#bgGrad)" />
 
-  <!-- Mobile Device Outline -->
-  <rect x="126" y="66" width="260" height="380" rx="36" fill="#1A1A2E" stroke="url(#phoneGrad)" stroke-width="12" />
-  
-  <!-- Mobile screen top bar (notch/speaker) -->
-  <line x1="226" y1="96" x2="286" y2="96" stroke="url(#phoneGrad)" stroke-width="8" stroke-linecap="round" />
+  <!-- CLI Face (Expanded to fill the icon area, no phone container) -->
+  <!-- Left Eye: Terminal I-Beam Cursor (Bold & Centered) -->
+  <path d="M 145 101 H 175 M 160 101 V 151 M 145 151 H 175" fill="none" stroke="#007aff" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" />
 
-  <!-- Left Eye: Terminal Prompt ">" -->
-  <polyline points="180,185 210,205 180,225" fill="none" stroke="#33CCFF" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" />
-  
-  <!-- Right Eye: AI Sparkle -->
-  <path d="M 322 175 Q 322 205 352 205 Q 322 205 322 235 Q 322 205 292 205 Q 322 205 322 175 Z" fill="#FFD700" />
+  <!-- Right Eye: Project's Send Button Triangle/Paper Plane (Bold & Centered) -->
+  <g transform="translate(352, 126) scale(2.4) translate(-12, -12)">
+    <line x1="22" y1="2" x2="11" y2="13" stroke="#007aff" stroke-width="5.0" stroke-linecap="round" stroke-linejoin="round" />
+    <polygon points="22 2 15 22 11 13 2 9 22 2" fill="none" stroke="#007aff" stroke-width="5.0" stroke-linecap="round" stroke-linejoin="round" />
+  </g>
 
-  <!-- Glad Smile -->
-  <path d="M 175 265 Q 256 315 337 265" fill="none" stroke="#FF3366" stroke-width="16" stroke-linecap="round" />
+  <!-- Centered tongue-out mouth -->
+  <path d="M 125 230 H 387" fill="none" stroke="url(#faceGrad)" stroke-width="15" stroke-linecap="round" />
+  <path d="M 218 230 C 220 250 220 273 226 289 C 232 305 242 313 256 313 C 270 313 280 305 286 289 C 292 273 292 250 294 230" fill="none" stroke="url(#faceGrad)" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" />
+  <path d="M 256 290 V 308" fill="none" stroke="url(#faceGrad)" stroke-width="6" stroke-linecap="round" />
 
-  <!-- Vibe Coding Waves (Audio bars) -->
-  <g stroke-linecap="round" stroke-width="10">
-    <line x1="196" y1="375" x2="196" y2="400" stroke="#FF9933" />
-    <line x1="226" y1="355" x2="226" y2="400" stroke="#FF3366" />
-    <line x1="256" y1="340" x2="256" y2="400" stroke="#33CCFF" />
-    <line x1="286" y1="360" x2="286" y2="400" stroke="#FFD700" />
-    <line x1="316" y1="380" x2="316" y2="400" stroke="#FF9933" />
-  </g>
-</svg>
+  <!-- Git Diff Lines (Expanded & Centered, no filter, 50% opacity for clear mobile legibility) -->
+  <!-- Add (+) Line: Faded Green -->
+  <line x1="130" y1="361" x2="382" y2="361" stroke="#2EA44F" stroke-width="14" stroke-linecap="round" opacity="0.5" />
+  <!-- Delete (-) Line: Faded Red -->
+  <line x1="130" y1="386" x2="300" y2="386" stroke="#CF222E" stroke-width="14" stroke-linecap="round" opacity="0.5" />
+  <!-- Add (+) Line: Faded Green -->
+  <line x1="130" y1="411" x2="350" y2="411" stroke="#2EA44F" stroke-width="14" stroke-linecap="round" opacity="0.5" />
+</svg>

package/lib/commands/web.js

@@ -344,6 +344,8 @@ async function webCommand(options) {
 
     ws.sessionId = sessionId;
     const session = sessionManager.get(sessionId);
+    const isReconnect = session.hasConnectedWebClient;
+    session.hasConnectedWebClient = true;
     if (!session.resizeOwner) {
       session.resizeOwner = ws;
     }
@@ -352,7 +354,11 @@ async function webCommand(options) {
     // Send catchup output. TUI tools may skip the raw circular buffer, so fall
     // back to the rendered/text history snapshot instead of reconnecting blank.
     const catchup = sessionManager.getCatchupOutput(sessionId);
-    if (catchup && catchup.data) {
+    ws.needsTuiRedraw = ['antigravity', 'claude-code', 'codex', 'gemini'].includes(session.tool.key)
+      && (isReconnect || (catchup && catchup.source === 'rendered-history'));
+    if (ws.needsTuiRedraw) {
+      ws.send(JSON.stringify({ type: 'reset' }));
+    } else if (catchup && catchup.data) {
       sessionManager.logWsCatchupOutput(sessionId, catchup);
       ws.send(JSON.stringify({ type: 'output', data: catchup.data }));
     }
@@ -365,7 +371,12 @@ async function webCommand(options) {
         }
         if (payload.type === 'resize' && session.resizeOwner === ws) {
           sessionManager.logWsResize(sessionId, payload.cols, payload.rows);
-          sessionManager.resize(sessionId, payload.cols, payload.rows);
+          if (ws.needsTuiRedraw) {
+            ws.needsTuiRedraw = false;
+            sessionManager.redraw(sessionId, payload.cols, payload.rows);
+          } else {
+            sessionManager.resize(sessionId, payload.cols, payload.rows);
+          }
         }
       } catch (e) {
         logger.error('WS Message Error: ' + e.message);

package/lib/session/pty-manager.js

@@ -197,6 +197,20 @@ class PTYManager {
     }
   }
 
+  redraw(cols, rows) {
+    if (!this.ptyProcess) return false;
+
+    const targetCols = Math.max(2, Number.parseInt(cols, 10) || 80);
+    const targetRows = Math.max(1, Number.parseInt(rows, 10) || 24);
+    const pulseCols = targetCols > 2 ? targetCols - 1 : targetCols + 1;
+
+    this.ptyProcess.resize(pulseCols, targetRows);
+    setTimeout(() => {
+      if (this.ptyProcess) this.ptyProcess.resize(targetCols, targetRows);
+    }, 30);
+    return true;
+  }
+
   setupLocalResizeListener() {
     if (!process.stdout.isTTY) return;
     this.localResizeListener = () => {

package/lib/session/session-manager.js

@@ -97,6 +97,7 @@ class SessionManager extends EventEmitter {
       inputSeq: 0,
       completionReadInputSeq: 0,
       resizeOwner: null,
+      hasConnectedWebClient: false,
       hasUnreadCompletion: false,
       write: data => this.write(id, data),
       isRunning: () => this.has(id) && ptyManager.isRunning(),
@@ -137,6 +138,15 @@ class SessionManager extends EventEmitter {
     return true;
   }
 
+  redraw(id, cols, rows) {
+    const session = this.get(id);
+    if (!session) return false;
+    if (session.renderedHistory) {
+      session.renderedHistory.resize(cols, rows);
+    }
+    return session.ptyManager.redraw(cols, rows);
+  }
+
   rename(id, name) {
     const session = this.get(id);
     if (!session || !name) return null;

package/lib/web/index.html

@@ -52,7 +52,7 @@
         #shortcut-rail::-webkit-scrollbar { display: none; }
         .shortcut-group { flex: 0 0 calc(100vw - 28px); display: grid; gap: 8px; scroll-snap-align: start; }
         .simple-shortcuts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
-        .complex-shortcuts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+        .complex-shortcuts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
         .key-btn, .command-key { flex: 0 0 auto; min-width: 0; height: 40px; border: 1px solid rgba(255,255,255,0.11); border-radius: 12px; background: rgba(255,255,255,0.08); color: #d1d5db; font-size: 12px; font-weight: 700; letter-spacing: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; white-space: nowrap; }
         .key-btn { font-size: 11px; }
         .shortcut-group .key-btn, .shortcut-group .command-key { width: 100%; }
@@ -174,9 +174,10 @@
                         <div class="key-btn" data-key="esc">Esc</div>
                         <div class="key-btn" data-key="tab">Tab</div>
                     </div>
-                    <div class="shortcut-group complex-shortcuts">
+                    <div class="shortcut-group complex-shortcuts" data-role="tool-shortcuts">
+                        <div class="key-btn special-key" data-key="left">←</div>
+                        <div class="key-btn special-key" data-key="right">→</div>
                         <div class="key-btn" data-key="ctrl-c">Ctrl+C</div>
-                        <div class="key-btn" data-key="ctrl-y" data-role="tool-action-shortcut" title="Send Ctrl+Y">Ctrl+Y</div>
                         <button class="command-key" data-command="/model" title="Send /model">/model</button>
                         <button class="command-key" data-command="/resume" title="Send /resume">/resume</button>
                         <button class="command-key" data-command="/stat" data-role="usage-shortcut" title="Send /stat">/stat</button>
@@ -831,28 +832,53 @@
         }
 
         function updateToolShortcuts(toolKey) {
-            const actionBtn = document.querySelector('[data-role="tool-action-shortcut"]');
-            const usageBtn = document.querySelector('[data-role="usage-shortcut"]');
-
-            if (usageBtn) {
-                const command = toolKey === 'antigravity' ? '/usage' : '/stat';
-                usageBtn.dataset.command = command;
-                usageBtn.textContent = command;
-                usageBtn.title = `Send ${command}`;
-            }
-
-            if (!actionBtn) return;
-
-            if (toolKey === 'codex') {
-                actionBtn.dataset.key = 'codex-perm';
-                actionBtn.textContent = '/perm';
-                actionBtn.title = 'Send /perm';
-                return;
-            }
-
-            actionBtn.dataset.key = 'ctrl-y';
-            actionBtn.textContent = 'Ctrl+Y';
-            actionBtn.title = 'Send Ctrl+Y';
+            const usesUsageCommand = ['antigravity', 'claude-code'].includes(toolKey);
+            const usageCommand = usesUsageCommand ? '/usage' : '/stat';
+            const defaultShortcuts = [
+                { key: 'left', label: '←', special: true },
+                { key: 'right', label: '→', special: true },
+                { key: 'ctrl-c', label: 'Ctrl+C' },
+                { command: '/model' },
+                { command: '/resume' },
+                { command: usageCommand }
+            ];
+            const toolShortcuts = {
+                codex: [
+                    { key: 'ctrl-c', label: 'Ctrl+C' },
+                    { key: 'codex-perm', label: '/perm', title: 'Send /perm' },
+                    { command: '/model' },
+                    { command: '/resume' },
+                    { command: '/stat' }
+                ],
+                gemini: [
+                    { key: 'ctrl-c', label: 'Ctrl+C' },
+                    { key: 'ctrl-y', label: 'Ctrl+Y', title: 'Send Ctrl+Y' },
+                    { command: '/model' },
+                    { command: '/resume' },
+                    { command: '/stat' }
+                ]
+            };
+            const shortcuts = toolShortcuts[toolKey] || defaultShortcuts;
+            const shortcutGroup = document.querySelector('[data-role="tool-shortcuts"]');
+            if (!shortcutGroup) return;
+
+            shortcutGroup.style.gridTemplateColumns = `repeat(${shortcuts.length}, minmax(0, 1fr))`;
+            shortcutGroup.replaceChildren(...shortcuts.map(shortcut => {
+                const button = document.createElement(shortcut.command ? 'button' : 'div');
+                button.className = shortcut.command
+                    ? 'command-key'
+                    : `key-btn${shortcut.special ? ' special-key' : ''}`;
+                if (shortcut.command) {
+                    button.dataset.command = shortcut.command;
+                    button.textContent = shortcut.command;
+                    button.title = `Send ${shortcut.command}`;
+                } else {
+                    button.dataset.key = shortcut.key;
+                    button.textContent = shortcut.label;
+                    button.title = shortcut.title || '';
+                }
+                return button;
+            }));
         }
 
         function joinSession(id, sessionName, toolKey = null) {
@@ -901,6 +927,7 @@
             currentSocket.onmessage = (e) => {
                 const msg = JSON.parse(e.data);
                 if (msg.type === 'output') term.write(msg.data);
+                if (msg.type === 'reset') term.reset();
                 if (msg.type === 'exit') showLobby();
             };
         }
@@ -1153,7 +1180,7 @@
                 setTimeout(() => { sendWS('\r'); }, 1000);
                 return;
             }
-            const sequences = { up: '\x1b[A', down: '\x1b[B', enter: '\r', esc: '\x1b', tab: '\t', 'ctrl-c': '\x03', 'ctrl-y': '\x19' };
+            const sequences = { up: '\x1b[A', down: '\x1b[B', left: '\x1b[D', right: '\x1b[C', enter: '\r', esc: '\x1b', tab: '\t', 'ctrl-c': '\x03', 'ctrl-y': '\x19' };
             if (sequences[key]) sendWS(sequences[key]);
         });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glad-web",
-  "version": "1.0.14",
+  "version": "1.0.17",
   "description": "Glad transforms terminal-based AI coding tools into a polished, mobile-friendly local Web interface.",
   "main": "index.js",
   "bin": {