glad-web 1.0.14 → 1.0.15

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.15",
   "description": "Glad transforms terminal-based AI coding tools into a polished, mobile-friendly local Web interface.",
   "main": "index.js",
   "bin": {