glad-web 1.0.17 → 1.0.19

package/README.md

@@ -5,7 +5,7 @@
 
 Glad is a local-first Web interface for terminal-based AI coding tools.
 
-It lets you run interactive CLI tools such as **Claude Code**, **Aider**, **GitHub Copilot CLI**, and **Gemini CLI** on your machine, then access them through a clean browser UI from desktop or mobile devices on your local network.
+It lets you run interactive CLI tools such as **Claude Code**, **Aider**, **GitHub Copilot CLI**, and **Codex** on your machine, then access them through a clean browser UI from desktop or mobile devices on your local network.
 
 ![Glad AI mobile interface](./assets/demo.jpg)
 
@@ -122,7 +122,7 @@ glad tools detect
 
 ## Supported Tools
 
-Glad currently auto-detects the 21 terminal AI tools defined in the code registry. The names below are the registry `displayName` values used by Glad:
+Glad currently auto-detects the 20 terminal AI tools defined in the code registry. The names below are the registry `displayName` values used by Glad:
 
 | Tool | Detected command |
 | --- | --- |
@@ -131,7 +131,6 @@ Glad currently auto-detects the 21 terminal AI tools defined in the code registr
 | Codex | `codex` |
 | Copilot | `copilot` |
 | Cody | `cody chat` |
-| Gemini | `gemini` |
 | Antigravity | `agy` |
 | Continue | `cn` |
 | Cursor | `cursor-agent` |

package/README.zh-CN.md

@@ -5,7 +5,7 @@
 
 Glad 是一个面向终端 AI 编码工具的本地优先 Web 界面。
 
-它让你可以在自己的机器上运行 **Claude Code**、**Aider**、**GitHub Copilot CLI**、**Gemini CLI** 等交互式命令行工具，并通过一个适合桌面和移动端访问的浏览器界面来使用它们。
+它让你可以在自己的机器上运行 **Claude Code**、**Aider**、**GitHub Copilot CLI**、**Codex** 等交互式命令行工具，并通过一个适合桌面和移动端访问的浏览器界面来使用它们。
 
 ![Glad AI 移动端界面](./assets/demo.jpg)
 
@@ -122,7 +122,7 @@ glad tools detect
 
 ## 支持的工具
 
-Glad 当前会自动检测代码注册表中定义的 21 个终端 AI 工具。下面的名称严格使用 Glad 注册表里的 `displayName`：
+Glad 当前会自动检测代码注册表中定义的 20 个终端 AI 工具。下面的名称严格使用 Glad 注册表里的 `displayName`：
 
 | 工具 | 检测命令 |
 | --- | --- |
@@ -131,7 +131,6 @@ Glad 当前会自动检测代码注册表中定义的 21 个终端 AI 工具。
 | Codex | `codex` |
 | Copilot | `copilot` |
 | Cody | `cody chat` |
-| Gemini | `gemini` |
 | Antigravity | `agy` |
 | Continue | `cn` |
 | Cursor | `cursor-agent` |

package/lib/ai-tools/registry.js

@@ -59,15 +59,6 @@ const AI_TOOLS = {
     website: 'https://sourcegraph.com/cody',
     checkInstalled: async () => await commandExists('cody')
   },
-  'gemini': {
-    key: 'gemini',
-    command: 'gemini',
-    args: [],
-    displayName: 'Gemini',
-    description: 'Official Google Gemini CLI with 1M token context',
-    website: 'https://developers.google.com/gemini-code-assist',
-    checkInstalled: async () => await commandExists('gemini')
-  },
   'antigravity': {
     key: 'antigravity',
     command: 'agy',

package/lib/commands/web.js

@@ -217,6 +217,40 @@ async function webCommand(options) {
     res.json({ success: true });
   });
 
+  app.get('/api/sessions/:id/timed-inputs', (req, res) => {
+    const items = sessionManager.listTimedInputs(req.params.id);
+    if (!items) return res.status(404).json({ error: 'Session not found' });
+    res.json({ success: true, items });
+  });
+
+  app.post('/api/sessions/:id/timed-inputs', (req, res) => {
+    try {
+      const item = sessionManager.scheduleTimedInput(req.params.id, req.body || {});
+      if (!item) return res.status(404).json({ error: 'Session not found' });
+      res.json({ success: true, item });
+    } catch (e) {
+      res.status(e.statusCode || 500).json({ error: e.message });
+    }
+  });
+
+  app.patch('/api/sessions/:id/timed-inputs/:inputId', (req, res) => {
+    try {
+      const item = sessionManager.updateTimedInput(req.params.id, req.params.inputId, req.body || {});
+      if (item === null) return res.status(404).json({ error: 'Session not found' });
+      if (!item) return res.status(404).json({ error: 'Timed input not found' });
+      res.json({ success: true, item });
+    } catch (e) {
+      res.status(e.statusCode || 500).json({ error: e.message });
+    }
+  });
+
+  app.delete('/api/sessions/:id/timed-inputs/:inputId', (req, res) => {
+    const cancelled = sessionManager.cancelTimedInput(req.params.id, req.params.inputId);
+    if (cancelled === null) return res.status(404).json({ error: 'Session not found' });
+    if (!cancelled) return res.status(404).json({ error: 'Timed input not found' });
+    res.json({ success: true });
+  });
+
   // API: Delete/Kill session
   app.delete('/api/sessions/:id', (req, res) => {
     sessionManager.kill(req.params.id);
@@ -244,6 +278,15 @@ async function webCommand(options) {
     res.json({ success: result.success, stdout: result.stdout, stderr: result.stderr });
   });
 
+  // API: Git Branch Name for Commit
+  app.get('/api/sessions/:id/git-branch/:hash', async (req, res) => {
+    const session = sessionManager.get(req.params.id);
+    if (!session) return res.status(404).json({ error: 'Session not found' });
+    const hash = req.params.hash;
+    const result = await gitService.nameRev(session.ptyManager.workingDir, hash);
+    res.json({ success: result.success, stdout: result.stdout, stderr: result.stderr });
+  });
+
   // API: Git Log
   app.get('/api/sessions/:id/git-log', async (req, res) => {
     const session = sessionManager.get(req.params.id);
@@ -354,7 +397,7 @@ 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);
-    ws.needsTuiRedraw = ['antigravity', 'claude-code', 'codex', 'gemini'].includes(session.tool.key)
+    ws.needsTuiRedraw = ['antigravity', 'claude-code', 'codex'].includes(session.tool.key)
       && (isReconnect || (catchup && catchup.source === 'rendered-history'));
     if (ws.needsTuiRedraw) {
       ws.send(JSON.stringify({ type: 'reset' }));

package/lib/git/service.js

@@ -70,6 +70,10 @@ class GitService {
       : ['diff', '--no-ext-diff', '--', filePath];
     return execFilePromise('git', args, cwd);
   }
+
+  async nameRev(cwd, hash) {
+    return execFilePromise('git', ['name-rev', '--name-only', '--exclude=tags/*', hash], cwd);
+  }
 }
 
 module.exports = {

package/lib/session/session-manager.js

@@ -37,7 +37,10 @@ class SessionManager extends EventEmitter {
       startTime: session.startTime,
       toolKey: session.tool.key,
       workingDirectory: session.ptyManager.workingDir,
-      hasUnreadCompletion: Boolean(session.hasUnreadCompletion)
+      hasUnreadCompletion: Boolean(session.hasUnreadCompletion),
+      timedInputCount: session.timedInputs
+        ? Array.from(session.timedInputs.values()).filter(item => item.sendAt > Date.now()).length
+        : 0
     }));
   }
 
@@ -99,6 +102,7 @@ class SessionManager extends EventEmitter {
       resizeOwner: null,
       hasConnectedWebClient: false,
       hasUnreadCompletion: false,
+      timedInputs: new Map(),
       write: data => this.write(id, data),
       isRunning: () => this.has(id) && ptyManager.isRunning(),
       kill: () => this.kill(id)
@@ -167,10 +171,121 @@ class SessionManager extends EventEmitter {
     return session;
   }
 
+  listTimedInputs(id) {
+    const session = this.get(id);
+    if (!session) return null;
+    return Array.from(session.timedInputs.values()).map(item => ({
+      id: item.id,
+      text: item.text,
+      sendAt: item.sendAt,
+      createdAt: item.createdAt
+    })).sort((a, b) => a.sendAt - b.sendAt);
+  }
+
+  scheduleTimedInput(id, input = {}) {
+    const session = this.get(id);
+    if (!session) return null;
+
+    const { text, sendAt, delay } = this.validateTimedInput(input);
+
+    const item = {
+      id: uuidv4(),
+      text,
+      sendAt,
+      createdAt: Date.now(),
+      timer: null
+    };
+
+    item.timer = setTimeout(() => {
+      this.executeTimedInput(session.id, item.id);
+    }, delay);
+    session.timedInputs.set(item.id, item);
+    return {
+      id: item.id,
+      text: item.text,
+      sendAt: item.sendAt,
+      createdAt: item.createdAt
+    };
+  }
+
+  updateTimedInput(id, inputId, input = {}) {
+    const session = this.get(id);
+    if (!session) return null;
+    const item = session.timedInputs.get(inputId);
+    if (!item) return false;
+
+    const { text, sendAt, delay } = this.validateTimedInput(input);
+    clearTimeout(item.timer);
+    item.text = text;
+    item.sendAt = sendAt;
+    item.updatedAt = Date.now();
+    item.timer = setTimeout(() => {
+      this.executeTimedInput(session.id, item.id);
+    }, delay);
+
+    return {
+      id: item.id,
+      text: item.text,
+      sendAt: item.sendAt,
+      createdAt: item.createdAt,
+      updatedAt: item.updatedAt
+    };
+  }
+
+  validateTimedInput(input = {}) {
+    const text = String(input.text || '');
+    const sendAt = Number(input.sendAt);
+    if (!text.trim()) {
+      const err = new Error('Text is required');
+      err.statusCode = 400;
+      throw err;
+    }
+    if (!Number.isFinite(sendAt) || sendAt <= Date.now()) {
+      const err = new Error('Send time must be in the future');
+      err.statusCode = 400;
+      throw err;
+    }
+
+    const maxDelay = 30 * 24 * 60 * 60 * 1000;
+    const delay = sendAt - Date.now();
+    if (delay > maxDelay) {
+      const err = new Error('Send time must be within 30 days');
+      err.statusCode = 400;
+      throw err;
+    }
+
+    return { text, sendAt, delay };
+  }
+
+  cancelTimedInput(id, inputId) {
+    const session = this.get(id);
+    if (!session) return null;
+    const item = session.timedInputs.get(inputId);
+    if (!item) return false;
+    clearTimeout(item.timer);
+    session.timedInputs.delete(inputId);
+    return true;
+  }
+
+  executeTimedInput(id, inputId) {
+    const session = this.get(id);
+    if (!session) return false;
+    const item = session.timedInputs.get(inputId);
+    if (!item) return false;
+    session.timedInputs.delete(inputId);
+    const formatted = item.text.replace(/\n/g, '\r');
+    this.write(id, formatted);
+    setTimeout(() => {
+      if (this.has(id)) this.write(id, '\r');
+    }, 1000);
+    return true;
+  }
+
   kill(id) {
     const session = this.get(id);
     if (!session) return false;
     clearTimeout(session.completionTimer);
+    this.clearTimedInputs(session);
     this.logSessionDiagnostics('session-deleted', session, {}, { compact: true });
     this.disposeSessionHistory(session);
     session.ptyManager.kill();
@@ -182,6 +297,7 @@ class SessionManager extends EventEmitter {
   killAll() {
     for (const session of this.sessions.values()) {
       clearTimeout(session.completionTimer);
+      this.clearTimedInputs(session);
       this.disposeSessionHistory(session);
       session.ptyManager.kill();
     }
@@ -332,6 +448,7 @@ class SessionManager extends EventEmitter {
     if (!this.sessions.has(session.id)) return;
     this.logger.info(`Session ${session.id} (${session.name}) exited.`);
     clearTimeout(session.completionTimer);
+    this.clearTimedInputs(session);
     this.disposeSessionHistory(session);
     this.sessions.delete(session.id);
     this.emit('exit', { sessionId: session.id, session });
@@ -357,6 +474,14 @@ class SessionManager extends EventEmitter {
     }
   }
 
+  clearTimedInputs(session) {
+    if (!session || !session.timedInputs) return;
+    for (const item of session.timedInputs.values()) {
+      clearTimeout(item.timer);
+    }
+    session.timedInputs.clear();
+  }
+
   getSessionDiagnostics(session, extra = {}) {
     return {
       sessionId: session.id,

package/lib/web/gitgraph.js

@@ -175,13 +175,14 @@ class GitGraphRenderer {
                 
                 let detailsHTML = `
                     <div style="display:flex; justify-content:space-between; margin-bottom:12px;">
-                        <div>
-                            <div style="font-weight:600; font-size:14px; margin-bottom:4px;">${commit.subject.replace(/</g, "&lt;").replace(/>/g, "&gt;")}</div>
+                        <div style="flex: 1; padding-right: 16px; min-width: 0;">
+                            <div style="font-weight:600; font-size:14px; margin-bottom:4px; word-break: break-word;">${commit.subject.replace(/</g, "&lt;").replace(/>/g, "&gt;")}</div>
                             <div style="color:var(--text-dim);">${commit.author} commited ${commit.time}</div>
+                            <div id="branch-info-${commit.hash}" style="font-family:monospace; color:var(--primary); margin-top:6px; font-size:12px; font-weight:500;"></div>
                         </div>
-                        <div style="text-align:right;">
+                        <div style="text-align:right; flex-shrink: 0;">
                             <div style="font-family:monospace; color:var(--text-dim);">Commit: ${commit.hash}</div>
-                            ${commit.parents.length > 0 ? `<div style="font-family:monospace; color:var(--text-dim);">Parents: ${commit.parents.join(', ')}</div>` : ''}
+                            ${commit.parents.length > 0 ? `<div style="font-family:monospace; color:var(--text-dim); margin-top:2px;">Parents: ${commit.parents.join(', ')}</div>` : ''}
                         </div>
                     </div>
                 `;
@@ -189,13 +190,32 @@ class GitGraphRenderer {
                 // Add diff placeholder
                 detailsHTML += `
                     <div style="border-top:1px solid #333; padding-top:12px; margin-top:12px;">
-                        <button onclick="window.loadCommitDiff('${commit.hash}', this)" style="background:var(--primary); border:none; color:#fff; padding:6px 12px; border-radius:4px; font-size:12px; cursor:pointer;">Load Diff</button>
-                        <div class="diff-container" style="margin-top:12px; font-family:monospace; font-size:12px; white-space:pre-wrap; overflow-x:auto;"></div>
+                        <button onclick="window.loadCommitDiff('${commit.hash}')" style="background:var(--primary); border:none; color:#fff; padding:6px 12px; border-radius:4px; font-size:12px; cursor:pointer;">View Full Diff</button>
                     </div>
                 `;
 
                 detailsDiv.innerHTML = detailsHTML;
                 rowDiv.parentNode.insertBefore(detailsDiv, rowDiv.nextSibling);
+
+                // Fetch branch info
+                if (window.activeSessionId) {
+                    const branchContainer = document.getElementById(`branch-info-${commit.hash}`);
+                    if (branchContainer) {
+                        branchContainer.textContent = 'Loading branch...';
+                        fetch(`/api/sessions/${window.activeSessionId}/git-branch/${commit.hash}`)
+                            .then(res => res.json())
+                            .then(data => {
+                                if (data.success && data.stdout && data.stdout.trim()) {
+                                    branchContainer.textContent = `Branch: ${data.stdout.trim()}`;
+                                } else {
+                                    branchContainer.textContent = '';
+                                }
+                            })
+                            .catch(() => {
+                                branchContainer.textContent = '';
+                            });
+                    }
+                }
             };
             
             rowDiv.appendChild(contentDiv);

package/lib/web/index.html

@@ -26,6 +26,11 @@
         .session-info { flex: 1; min-width: 0; }
         .session-info h3 { margin: 0 0 4px 0; font-size: 17px; display: flex; align-items: center; gap: 8px; }
         .session-info p { margin: 0; font-size: 13px; color: var(--text-dim); }
+        .timer-count-badge { display: inline-flex; align-items: center; gap: 3px; color: #fff; background: rgba(0,122,255,0.22); border: 1px solid rgba(0,122,255,0.34); border-radius: 999px; padding: 2px 7px; font-size: 11px; font-weight: 800; flex-shrink: 0; }
+        .session-dir-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
+        .session-dir-row p { flex: 1; min-width: 0; font-family: monospace; overflow-wrap: anywhere; }
+        .copy-dir-btn { color: var(--text-dim); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; width: 28px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
+        .copy-dir-btn:active { color: #fff; background: rgba(255,255,255,0.12); }
         .session-actions { display: flex; gap: 12px; align-items: center; margin-left: 10px; }
         .btn-join { background: rgba(255,255,255,0.1); border: none; color: var(--primary); padding: 8px 14px; border-radius: 18px; font-weight: 600; font-size: 14px; cursor: pointer; }
         .icon-btn { color: var(--text-dim); background: none; border: none; padding: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
@@ -47,7 +52,19 @@
         #cmd-input { flex: 1; min-height: 38px; max-height: 150px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); border-radius: 19px; color: #fff; padding: 9px 16px; font-size: 16px; outline: none; resize: none; overflow-y: auto; line-height: 20px; box-sizing: border-box; transition: background 0.18s ease, border-color 0.18s ease; }
         #cmd-input::placeholder { color: rgba(255,255,255,0.45); }
         #cmd-input:focus { background: rgba(255,255,255,0.1); border-color: rgba(0,122,255,0.42); color: #fff; }
+        #timer-btn { width: 38px; height: 38px; margin-left: 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); border-radius: 19px; color: #d1d5db; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
+        #timer-btn.active { color: #fff; border-color: rgba(0,122,255,0.45); background: rgba(0,122,255,0.22); }
         #send-btn { width: 44px; height: 38px; margin-left: 10px; background: #007aff; border: none; border-radius: 19px; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
+        #timed-send-panel { display: none; margin: 0 14px 10px 14px; padding: 12px; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; background: rgba(28,28,30,0.98); box-sizing: border-box; }
+        #timed-send-panel.active { display: block; }
+        .timed-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; }
+        .timed-row select { min-width: 0; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); color: #fff; border-radius: 8px; padding: 8px 9px; font-size: 13px; outline: none; box-sizing: border-box; }
+        .timed-preview { margin-top: 8px; color: #d1d5db; font-size: 12px; line-height: 1.4; }
+        .timed-editor-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
+        #timed-tag-rail { position: absolute; left: 4px; top: 58px; display: flex; flex-direction: column; gap: 6px; z-index: 2400; pointer-events: none; }
+        .timed-tag { width: 54px; min-height: 34px; border: 1px solid rgba(255,255,255,0.14); border-left: 0; border-radius: 0 11px 11px 0; background: rgba(0,122,255,0.24); color: #fff; backdrop-filter: blur(12px); font-size: 12px; font-weight: 800; letter-spacing: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.08; white-space: pre-line; box-shadow: 0 8px 20px rgba(0,0,0,0.25); pointer-events: auto; }
+        .timed-tag.active { background: rgba(0,122,255,0.42); border-color: rgba(255,255,255,0.28); }
+        .timed-tag:active { transform: scale(0.96); }
         #shortcut-rail { display: flex; gap: 28px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x mandatory; padding: 0 14px 12px 14px; box-sizing: border-box; scroll-padding-left: 14px; scroll-padding-right: 14px; }
         #shortcut-rail::-webkit-scrollbar { display: none; }
         .shortcut-group { flex: 0 0 calc(100vw - 28px); display: grid; gap: 8px; scroll-snap-align: start; }
@@ -109,6 +126,7 @@
             .schedule-row { flex-direction: column; }
             .schedule-actions { justify-content: flex-start; }
             .step-grid { grid-template-columns: 1fr; }
+            .timed-row { grid-template-columns: 1fr; }
         }
     </style>
 </head>
@@ -159,12 +177,28 @@
                 </div>
             </div>
             <div id="terminal-controls">
+                <div id="timed-tag-rail"></div>
                 <div id="input-row">
                     <textarea id="cmd-input" rows="1" placeholder="Type a message..."></textarea>
+                    <button id="timer-btn" title="Schedule send">
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 2"></path></svg>
+                    </button>
                     <button id="send-btn">
                         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
                     </button>
                 </div>
+                <div id="timed-send-panel">
+                    <div class="timed-row">
+                        <select id="timed-hours" onchange="updateTimedSendPreview()" title="Hours"></select>
+                        <select id="timed-minutes" onchange="updateTimedSendPreview()" title="Minutes"></select>
+                        <button id="timed-save-btn" class="small-btn primary" onclick="saveTimedSend()">Add Timer</button>
+                    </div>
+                    <div id="timed-preview" class="timed-preview"></div>
+                    <div class="timed-editor-actions">
+                        <button id="timed-cancel-edit-btn" class="small-btn" onclick="resetTimedEditor()" style="display:none;">Cancel Edit</button>
+                        <button id="timed-delete-btn" class="small-btn danger" onclick="deleteEditingTimedInput()" style="display:none;">Delete</button>
+                    </div>
+                </div>
                 <div id="shortcut-rail">
                     <div class="shortcut-group simple-shortcuts">
                         <div class="key-btn special-key" data-key="up">↑</div>
@@ -317,6 +351,9 @@
         let editingScheduleId = null;
         let editingSteps = [];
         let selectedWeekdays = [1, 2, 3, 4, 5];
+        let timedSendRefreshTimer = null;
+        let timedTagTimer = null;
+        let editingTimedInputId = null;
         const modifiers = { ctrl: false };
 
         function log(msg) {
@@ -360,6 +397,39 @@
             return decodeURIComponent(path);
         }
 
+        async function copyTextToClipboard(text) {
+            if (navigator.clipboard && window.isSecureContext) {
+                await navigator.clipboard.writeText(text);
+                return;
+            }
+            const el = document.createElement('textarea');
+            el.value = text;
+            el.setAttribute('readonly', '');
+            el.style.position = 'fixed';
+            el.style.opacity = '0';
+            document.body.appendChild(el);
+            el.select();
+            document.execCommand('copy');
+            document.body.removeChild(el);
+        }
+
+        async function copySessionDirectory(directory, event) {
+            event.stopPropagation();
+            const btn = event.currentTarget;
+            try {
+                await copyTextToClipboard(directory);
+                const oldTitle = btn.title;
+                btn.title = 'Copied';
+                btn.style.color = '#fff';
+                setTimeout(() => {
+                    btn.title = oldTitle || 'Copy directory';
+                    btn.style.color = '';
+                }, 1200);
+            } catch (e) {
+                alert('Copy failed');
+            }
+        }
+
         function formatWeekdays(days = []) {
             const labels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
             return days.map(day => labels[day]).filter(Boolean).join(', ') || 'No days';
@@ -443,12 +513,25 @@
                 sessions.forEach(s => {
                     const workingDirectory = s.workingDirectory || 'Unknown directory';
                     const encodedName = encodePathValue(s.name);
+                    const encodedDir = encodePathValue(workingDirectory);
+                    const timedInputCount = Number(s.timedInputCount) || 0;
+                    const timerBadge = timedInputCount > 0
+                        ? `<span class="timer-count-badge" title="${timedInputCount} scheduled timer${timedInputCount > 1 ? 's' : ''}">
+                            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 2"></path></svg>
+                            ${timedInputCount}
+                        </span>`
+                        : '';
                     html += `<div class="session-card">
                         <div class="session-info">
-                            <h3>${escapeHtml(s.name)}${s.hasUnreadCompletion ? '<span class="completion-dot" title="Completed"></span>' : ''} <button class="icon-btn" onclick="renameSession('${s.id}', decodePathValue('${encodedName}'), event)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></button></h3>
+                            <h3>${escapeHtml(s.name)}${s.hasUnreadCompletion ? '<span class="completion-dot" title="Completed"></span>' : ''}${timerBadge} <button class="icon-btn" onclick="renameSession('${s.id}', decodePathValue('${encodedName}'), event)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></button></h3>
                             <p>${escapeHtml(s.tool)}</p>
                             <p>${new Date(s.startTime).toLocaleTimeString()}</p>
-                            <p title="${escapeHtml(workingDirectory)}" style="font-family: monospace; overflow-wrap: anywhere;">${escapeHtml(workingDirectory)}</p>
+                            <div class="session-dir-row">
+                                <button class="copy-dir-btn" title="Copy directory" onclick="copySessionDirectory(decodePathValue('${encodedDir}'), event)">
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
+                                </button>
+                                <p title="${escapeHtml(workingDirectory)}">${escapeHtml(workingDirectory)}</p>
+                            </div>
                         </div>
                         <div class="session-actions">
                             <button class="btn-join" onclick="joinSession('${s.id}', decodePathValue('${encodedName}'), '${escapeHtml(s.toolKey || '')}')">Connect</button>
@@ -826,6 +909,8 @@
 
         function showLobby() {
             if (currentSocket) { currentSocket.close(); currentSocket = null; }
+            closeTimedSendPanel();
+            stopTimedInputTimers();
             document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
             document.getElementById('lobby-view').classList.add('active');
             refreshSessionsNow();
@@ -849,13 +934,6 @@
                     { 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;
@@ -882,11 +960,14 @@
         }
 
         function joinSession(id, sessionName, toolKey = null) {
+            stopTimedInputTimers();
             activeSessionId = id;
+            window.activeSessionId = id;
             activeToolKey = toolKey;
             clearTimeout(sessionPollTimer);
             sessionPollTimer = null;
             markCompletionRead(id);
+            loadTimedInputs();
             document.getElementById('session-title').innerText = sessionName;
             updateToolShortcuts(activeToolKey);
             document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
@@ -1151,8 +1232,191 @@
                 setTimeout(() => { sendWS('\r'); }, 1000);
             }
         }
+
+        let timedInputs = [];
+
+        function initTimedDelaySelectors() {
+            const hours = document.getElementById('timed-hours');
+            const minutes = document.getElementById('timed-minutes');
+            if (hours.options.length) return;
+            for (let i = 0; i <= 23; i++) {
+                hours.add(new Option(`${i} hr`, String(i)));
+            }
+            for (let i = 0; i <= 59; i++) {
+                minutes.add(new Option(`${i} min`, String(i)));
+            }
+            hours.value = '0';
+            minutes.value = '5';
+        }
+
+        function getTimedDelayMs() {
+            const hours = Number(document.getElementById('timed-hours').value);
+            const minutes = Number(document.getElementById('timed-minutes').value);
+            const delayMs = ((hours * 60) + minutes) * 60 * 1000;
+            return Number.isFinite(delayMs) && delayMs > 0 ? delayMs : 0;
+        }
+
+        function parseSendAt() {
+            const delayMs = getTimedDelayMs();
+            return delayMs > 0 ? Date.now() + delayMs : null;
+        }
+
+        function setTimedDelayFromMs(ms) {
+            const totalMinutes = Math.max(1, Math.ceil(ms / 60000));
+            const hours = Math.min(23, Math.floor(totalMinutes / 60));
+            const minutes = Math.min(59, totalMinutes - hours * 60);
+            document.getElementById('timed-hours').value = String(hours);
+            document.getElementById('timed-minutes').value = String(minutes);
+        }
+
+        function updateTimedSendPreview() {
+            const preview = document.getElementById('timed-preview');
+            const sendAt = parseSendAt();
+            preview.textContent = sendAt
+                ? `Will run at ${new Date(sendAt).toLocaleString()}`
+                : 'Choose at least 1 minute.';
+        }
+
+        function formatCountdown(sendAt) {
+            const remaining = Math.max(0, sendAt - Date.now());
+            const totalSeconds = Math.ceil(remaining / 1000);
+            const hours = Math.floor(totalSeconds / 3600);
+            const minutes = Math.floor((totalSeconds % 3600) / 60);
+            const seconds = totalSeconds % 60;
+            if (hours > 0) return `${hours}h\n${String(minutes).padStart(2, '0')}m`;
+            return `${minutes}:${String(seconds).padStart(2, '0')}`;
+        }
+
+        function renderTimedTags() {
+            const rail = document.getElementById('timed-tag-rail');
+            const now = Date.now();
+            const activeItems = timedInputs.filter(item => item.sendAt > now);
+            rail.innerHTML = activeItems.map(item => {
+                const encodedId = encodePathValue(item.id);
+                return `<button class="timed-tag${item.id === editingTimedInputId ? ' active' : ''}" title="${escapeHtml(item.text)}" onclick="editTimedInput(decodePathValue('${encodedId}'))">${escapeHtml(formatCountdown(item.sendAt))}</button>`;
+            }).join('');
+        }
+
+        function closeTimedSendPanel() {
+            document.getElementById('timed-send-panel').classList.remove('active');
+            document.getElementById('timer-btn').classList.remove('active');
+            editingTimedInputId = null;
+            renderTimedTags();
+        }
+
+        function stopTimedInputTimers() {
+            clearTimeout(timedSendRefreshTimer);
+            timedSendRefreshTimer = null;
+            if (timedTagTimer) clearInterval(timedTagTimer);
+            timedTagTimer = null;
+            timedInputs = [];
+            renderTimedTags();
+        }
+
+        function resetTimedEditor(options = {}) {
+            editingTimedInputId = null;
+            document.getElementById('timed-save-btn').textContent = 'Add Timer';
+            document.getElementById('timed-cancel-edit-btn').style.display = 'none';
+            document.getElementById('timed-delete-btn').style.display = 'none';
+            if (!options.keepInput) {
+                inputEl.value = '';
+                inputEl.style.height = '38px';
+            }
+            setTimedDelayFromMs(5 * 60 * 1000);
+            updateTimedSendPreview();
+            renderTimedTags();
+        }
+
+        async function loadTimedInputs() {
+            clearTimeout(timedSendRefreshTimer);
+            timedSendRefreshTimer = null;
+            if (!activeSessionId) return;
+
+            try {
+                const res = await fetchWithTimeout(`/api/sessions/${activeSessionId}/timed-inputs`);
+                if (!res.ok) throw new Error('HTTP ' + res.status);
+                const data = await res.json();
+                timedInputs = data.items || [];
+                renderTimedTags();
+                if (!timedTagTimer) timedTagTimer = setInterval(renderTimedTags, 1000);
+                timedSendRefreshTimer = setTimeout(loadTimedInputs, 15000);
+            } catch (e) {
+                timedInputs = [];
+                renderTimedTags();
+            }
+        }
+
+        function editTimedInput(id) {
+            const item = timedInputs.find(value => value.id === id);
+            if (!item) return;
+            initTimedDelaySelectors();
+            editingTimedInputId = id;
+            inputEl.value = item.text || '';
+            inputEl.style.height = 'auto';
+            inputEl.style.height = Math.min(inputEl.scrollHeight, 150) + 'px';
+            setTimedDelayFromMs(item.sendAt - Date.now());
+            document.getElementById('timed-save-btn').textContent = 'Update Timer';
+            document.getElementById('timed-cancel-edit-btn').style.display = '';
+            document.getElementById('timed-delete-btn').style.display = '';
+            document.getElementById('timed-send-panel').classList.add('active');
+            document.getElementById('timer-btn').classList.add('active');
+            updateTimedSendPreview();
+            renderTimedTags();
+        }
+
+        async function saveTimedSend() {
+            if (!activeSessionId) return alert('No active session');
+            const text = inputEl.value;
+            if (!text.trim()) return alert('Type a message first');
+            const sendAt = parseSendAt();
+            if (!sendAt) return alert('Choose at least 1 minute');
+
+            try {
+                const url = editingTimedInputId
+                    ? `/api/sessions/${activeSessionId}/timed-inputs/${editingTimedInputId}`
+                    : `/api/sessions/${activeSessionId}/timed-inputs`;
+                const res = await fetchWithTimeout(url, {
+                    method: editingTimedInputId ? 'PATCH' : 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ text, sendAt })
+                });
+                const data = await res.json();
+                if (!res.ok || !data.success) throw new Error(data.error || 'Failed to save timer');
+                resetTimedEditor();
+                await loadTimedInputs();
+            } catch (e) {
+                alert('Save failed: ' + e.message);
+            }
+        }
+
+        async function cancelTimedInput(id) {
+            if (!activeSessionId) return;
+            try {
+                await fetchWithTimeout(`/api/sessions/${activeSessionId}/timed-inputs/${id}`, { method: 'DELETE' });
+                if (editingTimedInputId === id) resetTimedEditor();
+                loadTimedInputs();
+            } catch (e) {
+                alert('Delete failed');
+            }
+        }
+
+        function deleteEditingTimedInput() {
+            if (editingTimedInputId) cancelTimedInput(editingTimedInputId);
+        }
         
         document.getElementById('send-btn').addEventListener('click', performSend);
+        document.getElementById('timer-btn').addEventListener('click', () => {
+            const panel = document.getElementById('timed-send-panel');
+            const isOpen = panel.classList.toggle('active');
+            document.getElementById('timer-btn').classList.toggle('active', isOpen);
+            if (isOpen) {
+                initTimedDelaySelectors();
+                resetTimedEditor({ keepInput: true });
+                updateTimedSendPreview();
+                loadTimedInputs();
+            }
+            else closeTimedSendPanel();
+        });
         inputEl.addEventListener('keydown', (e) => {
             if (e.key === 'Enter' && e.shiftKey) { e.preventDefault(); performSend(); }
             else if (e.key === 'Enter' || e.key === 'Backspace' || e.key === 'Delete') {
@@ -1283,34 +1547,90 @@
         }
 
         
-        window.loadCommitDiff = async function(hash, btn) {
+        let currentCommitDiffHTML = '';
+        let currentCommitHash = '';
+
+        window.loadCommitDiff = async function(hash) {
             if (!activeSessionId) return;
-            const container = btn.nextElementSibling;
-            btn.style.display = 'none';
-            container.innerHTML = '<span style="color:var(--text-dim);">Loading diff...</span>';
+            const content = document.getElementById('git-content');
+            content.innerHTML = '<div style="padding: 20px; text-align: center; color: var(--text-dim);">Loading diff...</div>';
+            currentCommitHash = hash;
+            
             try {
                 const res = await fetch(`/api/sessions/${activeSessionId}/git-show/${hash}`);
                 const data = await res.json();
                 if (data.success) {
-                    let diffHTML = '';
+                    let fileBlocks = [];
+                    let currentBlock = { name: 'Commit Details', lines: [] };
+                    fileBlocks.push(currentBlock);
+                    
                     const lines = data.stdout.split('\n');
                     for (const line of lines) {
-                        let color = '#ccc';
-                        if (line.startsWith('+') && !line.startsWith('+++')) color = '#34c759';
-                        else if (line.startsWith('-') && !line.startsWith('---')) color = '#ff3b30';
-                        else if (line.startsWith('@@')) color = '#5ac8fa';
-                        else if (line.startsWith('diff') || line.startsWith('index') || line.startsWith('commit') || line.startsWith('Author') || line.startsWith('Date')) color = '#fff';
-                        diffHTML += `<div style="color:${color}; padding:0 4px; border-radius:2px;">${line.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</div>`;
+                        const diffMatch = line.match(/^diff --git a\/(.+?) b\//);
+                        if (diffMatch) {
+                            currentBlock = { name: diffMatch[1], lines: [] };
+                            fileBlocks.push(currentBlock);
+                        }
+                        currentBlock.lines.push(line);
+                    }
+                    
+                    let diffHTML = '';
+                    for (const block of fileBlocks) {
+                        if (block.lines.length === 0 || (block.lines.length === 1 && !block.lines[0])) continue;
+                        
+                        let blockContent = '';
+                        let addCount = 0;
+                        let subCount = 0;
+                        for (const line of block.lines) {
+                            let color = '#ccc', bg = 'transparent', borderLeft = '2px solid transparent';
+                            if (line.startsWith('+') && !line.startsWith('+++')) { color = '#4ade80'; bg = 'rgba(74, 222, 128, 0.1)'; borderLeft = '2px solid #4ade80'; addCount++; }
+                            else if (line.startsWith('-') && !line.startsWith('---')) { color = '#f87171'; bg = 'rgba(248, 113, 113, 0.1)'; borderLeft = '2px solid #f87171'; subCount++; }
+                            else if (line.startsWith('@@')) { color = '#60a5fa'; bg = 'rgba(96, 165, 250, 0.1)'; }
+                            else if (line.startsWith('diff') || line.startsWith('index') || line.startsWith('commit') || line.startsWith('Author') || line.startsWith('Date')) color = '#fff';
+                            
+                            blockContent += `<div style="color:${color}; background:${bg}; border-left:${borderLeft}; padding:2px 8px; white-space:pre-wrap; word-break:break-all;">${line.replace(/</g, '&lt;').replace(/>/g, '&gt;') || ' '}</div>`;
+                        }
+                        
+                        const isOpen = block.name === 'Commit Details';
+                        const statHTML = block.name !== 'Commit Details' ? `<span style="margin-left: 12px; font-family: monospace; font-size: 12px;"><span style="color:#4ade80;">+${addCount}</span> <span style="color:#f87171; margin-left:6px;">-${subCount}</span></span>` : '';
+                        diffHTML += `
+                            <details ${isOpen ? 'open' : ''} style="margin-bottom: 8px; border: 1px solid #333; border-radius: 4px; overflow: hidden;">
+                                <summary style="background: #1e1e1e; padding: 6px 10px; cursor: pointer; color: #fff; font-weight: 500; font-size: 13px; outline: none; user-select: none;">
+                                    ${block.name === 'Commit Details' ? '📝 ' : '📄 '}${block.name.replace(/</g, '&lt;').replace(/>/g, '&gt;')}${statHTML}
+                                </summary>
+                                <div style="background: #0d0d0d; overflow-x: auto; font-family: monospace; font-size: 12px; line-height: 1.5; padding: 4px 0;">
+                                    ${blockContent}
+                                </div>
+                            </details>
+                        `;
                     }
-                    container.innerHTML = diffHTML;
+                    currentCommitDiffHTML = diffHTML;
+                    renderCommitDiffFullView();
                 } else {
-                    container.innerHTML = `<span style="color:#ff3b30;">Error loading diff</span>`;
+                    content.innerHTML = `<p style="color:#ff3b30; padding:10px;">Error loading diff</p>`;
                 }
             } catch (e) {
-                container.innerHTML = `<span style="color:#ff3b30;">Network error</span>`;
+                content.innerHTML = `<p style="color:#ff3b30; padding:10px;">Network error</p>`;
             }
         };
 
+        function renderCommitDiffFullView() {
+            const content = document.getElementById('git-content');
+            let html = `
+            <div style="display:flex; align-items:center; background: var(--card-bg); padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.05); position: sticky; top: 0; z-index: 10;">
+                <button class="icon-btn" onclick="switchGitTab('graph')" style="color: var(--primary); margin-right: 12px; font-weight:600; font-size:14px; display:flex; align-items:center;">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg> Back
+                </button>
+                <div style="flex:1; min-width:0;">
+                    <div style="font-weight:600; font-size:15px; font-family: monospace;">Commit: ${currentCommitHash}</div>
+                </div>
+            </div>
+            <div style="padding: 10px;">
+                ${currentCommitDiffHTML}
+            </div>`;
+            content.innerHTML = html;
+        }
+
         async function loadGitGraph() {
 
             if (!activeSessionId) return;
@@ -1396,8 +1716,13 @@
             content.innerHTML = '<p style="text-align:center;color:#888;padding:20px;">Loading...</p>';
             if (!activeSessionId) return;
             try {
-                const res = await fetchWithTimeout(`/api/sessions/${activeSessionId}/git-status`);
-                const data = await res.json();
+                const [resStatus, resUnstaged, resStaged] = await Promise.all([
+                    fetchWithTimeout(`/api/sessions/${activeSessionId}/git-status`),
+                    fetchWithTimeout(`/api/sessions/${activeSessionId}/git-diff-numstat?staged=false`).catch(() => ({ok:false})),
+                    fetchWithTimeout(`/api/sessions/${activeSessionId}/git-diff-numstat?staged=true`).catch(() => ({ok:false}))
+                ]);
+                
+                const data = await resStatus.json();
                 if (!data.success) {
                     content.innerHTML = `<p style="color:#ff3b30; padding:10px;">Git error: ${data.error}</p>`;
                     return;
@@ -1409,92 +1734,327 @@
                     return;
                 }
 
-                let html = '<div style="padding:10px;"><div style="background:var(--card-bg); border-radius:12px; overflow:hidden;">';
+                let statsMap = {};
+                const parseNumstat = (output) => {
+                    if (!output) return;
+                    output.split('\n').forEach(line => {
+                        const parts = line.split('\t');
+                        if (parts.length >= 3) {
+                            const added = parseInt(parts[0]) || 0;
+                            const removed = parseInt(parts[1]) || 0;
+                            const file = parts.slice(2).join('\t');
+                            if (!statsMap[file]) statsMap[file] = { added: 0, removed: 0 };
+                            statsMap[file].added += added;
+                            statsMap[file].removed += removed;
+                        }
+                    });
+                };
+
+                if (resUnstaged.ok) {
+                    const unstagedData = await resUnstaged.json();
+                    if (unstagedData.success) parseNumstat(unstagedData.stdout);
+                }
+                if (resStaged.ok) {
+                    const stagedData = await resStaged.json();
+                    if (stagedData.success) parseNumstat(stagedData.stdout);
+                }
+
+                let html = '<div style="padding:10px;">';
                 files.forEach((f, idx) => {
                     const encodedPath = encodePathValue(f.path);
                     const escapedPath = escapeHtml(f.path);
-                    const escapedBaseName = escapeHtml(f.path.split('/').pop() || f.path);
                     let color = '#fff';
                     let label = f.status;
-                    if (label.includes('M')) { color = '#f59e0b'; } 
+                    if (label.includes('M')) { color = '#f59e0b'; }
                     else if (label.includes('A') || label === '??') { color = '#4ade80'; if(label === '??') label = 'U'; }
                     else if (label.includes('D')) { color = '#f87171'; }
-                    const borderBottom = idx < files.length - 1 ? 'border-bottom: 1px solid rgba(255,255,255,0.05);' : '';
-                    html += `<div style="padding:14px; ${borderBottom} display:flex; justify-content:space-between; align-items:center; cursor:pointer;" onclick="showFileDetails(decodePathValue('${encodedPath}'), true)">
-                        <div style="flex:1; min-width:0; margin-right:10px;">
-                            <div style="font-size:14px; font-weight:500;">${escapedBaseName}</div>
-                            <div style="font-size:12px; color:var(--text-dim);">${escapedPath}</div>
+                    const isUntracked = f.status === '??';
+                    const hasStaged = !isUntracked && f.status[0] && f.status[0] !== ' ';
+                    const hasUnstaged = !isUntracked && f.status[1] && f.status[1] !== ' ';
+
+                    let statHTML = '';
+                    if (statsMap[f.path]) {
+                        const { added, removed } = statsMap[f.path];
+                        if (added > 0 || removed > 0) {
+                            statHTML = `<span style="margin-left: 12px; font-family: monospace; font-size: 12px; white-space: nowrap;"><span style="color:#4ade80;">+${added}</span> <span style="color:#f87171; margin-left:6px;">-${removed}</span></span>`;
+                        }
+                    }
+
+                    html += `<div style="margin-bottom: 8px; border: 1px solid #333; border-radius: 4px; background: #1e1e1e; overflow: hidden;">
+                        <div onclick="toggleInlineDiff('${encodedPath}', 'inline-diff-${idx}', ${!!hasStaged}, ${!!hasUnstaged}, ${isUntracked})" style="padding: 6px 10px; cursor: pointer; color: #fff; font-weight: 500; font-size: 13px; outline: none; user-select: none; display: flex; align-items: center;">
+                            <div style="flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">📄 ${escapedPath}${statHTML}</div>
+                            <span style="color:${color}; font-weight:700; font-size:10px; border:1px solid ${color}; padding:1px 4px; border-radius:3px; opacity:0.8; flex-shrink: 0; margin-left: 8px;">${label}</span>
                         </div>
-                        <span style="color:${color}; font-weight:700; font-size:12px; border:1px solid ${color}; padding:2px 6px; border-radius:4px; opacity:0.8;">${label}</span>
+                        <div id="inline-diff-${idx}" style="display: none;" data-loaded="false"></div>
                     </div>`;
                 });
-                html += '</div></div>';
+                html += '</div>';
                 content.innerHTML = html;
             } catch (e) {
                 content.innerHTML = `<p style="color:#ff3b30; padding:10px;">${e.message}</p>`;
             }
         }
 
-        let currentFilePath = '', currentFileDiff = '', currentFileContent = '', currentFileMode = 'diff';
+        function buildFileDiffUrl(path, staged) {
+            return `/api/sessions/${activeSessionId}/git-diff-file?path=${encodeURIComponent(path)}&staged=${staged ? 'true' : 'false'}`;
+        }
+
+        async function loadFileChangeData(path, options = {}) {
+            const hasStaged = !!options.hasStaged;
+            const hasUnstaged = !!options.hasUnstaged;
+            const isUntracked = !!options.isUntracked;
+            const diffRequests = [];
+
+            if (hasStaged) {
+                diffRequests.push({
+                    label: 'Staged changes',
+                    promise: fetchWithTimeout(buildFileDiffUrl(path, true)).catch(() => ({ok:false}))
+                });
+            }
+            if (hasUnstaged || (!hasStaged && !isUntracked)) {
+                diffRequests.push({
+                    label: 'Unstaged changes',
+                    promise: fetchWithTimeout(buildFileDiffUrl(path, false)).catch(() => ({ok:false}))
+                });
+            }
+
+            const [diffResponses, fileRes] = await Promise.all([
+                Promise.all(diffRequests.map(item => item.promise)),
+                fetchWithTimeout(`/api/sessions/${activeSessionId}/file?path=${encodeURIComponent(path)}`).catch(() => ({ok:false}))
+            ]);
+
+            const diffParts = [];
+            for (let i = 0; i < diffResponses.length; i++) {
+                const res = diffResponses[i];
+                const data = res.ok ? await res.json() : { success: false };
+                if (data.success && data.stdout) {
+                    diffParts.push({ label: diffRequests[i].label, stdout: data.stdout });
+                }
+            }
+
+            const fileData = fileRes.ok ? await fileRes.json() : { success: false };
+            const content = fileData.success ? fileData.content : '';
+            let diff = diffParts.map(part => (
+                diffParts.length > 1 ? `# ${part.label}\n${part.stdout}` : part.stdout
+            )).join('\n');
+            if (!diff && isUntracked && content) diff = 'Untracked file:\n\n' + content;
+
+            return {
+                diff,
+                content,
+                renderRawDiff: diffParts.length > 1
+            };
+        }
+
+        window.toggleInlineDiff = async function(encodedPath, containerId, hasStaged = false, hasUnstaged = true, isUntracked = false) {
+            const container = document.getElementById(containerId);
+            if (container.style.display === 'block') {
+                container.style.display = 'none';
+                return;
+            }
+            container.style.display = 'block';
+            if (container.dataset.loaded === 'true') return;
+
+            const path = decodePathValue(encodedPath);
+            container.innerHTML = '<div style="padding: 10px; color: var(--text-dim); text-align: center; font-size: 12px;">Loading...</div>';
+
+            try {
+                const { diff: currentFileDiff, content: currentFileContent } = await loadFileChangeData(path, {
+                    hasStaged,
+                    hasUnstaged,
+                    isUntracked
+                });
+
+                if (!currentFileDiff && !currentFileContent) {
+                    container.innerHTML = `<div style="padding: 10px; color: #f87171; font-size: 12px; text-align:center;">No diff available</div>`;
+                    return;
+                }
+
+                let blockContent = '';
+                currentFileDiff.split('\n').forEach(line => {
+                    let color = '#ccc', bg = 'transparent', borderLeft = '2px solid transparent';
+                    if (line.startsWith('+') && !line.startsWith('+++')) { color = '#4ade80'; bg = 'rgba(74, 222, 128, 0.1)'; borderLeft = '2px solid #4ade80'; }
+                    else if (line.startsWith('-') && !line.startsWith('---')) { color = '#f87171'; bg = 'rgba(248, 113, 113, 0.1)'; borderLeft = '2px solid #f87171'; }
+                    else if (line.startsWith('@@')) { color = '#60a5fa'; bg = 'rgba(96, 165, 250, 0.1)'; }
+
+                    blockContent += `<div style="color:${color}; background:${bg}; border-left:${borderLeft}; padding:2px 8px; white-space:pre-wrap; word-break:break-all;">${escapeHtml(line) || ' '}</div>`;
+                });
+
+                container.dataset.loaded = 'true';
+                container.innerHTML = `
+                    <div style="background: #0d0d0d; overflow-x: auto; font-family: monospace; font-size: 12px; line-height: 1.5; padding: 4px 0; border-top: 1px solid #333; max-height: 400px;">
+                        ${blockContent}
+                    </div>
+                    <div style="padding: 8px; background: #1a1a1a; border-top: 1px solid #333; text-align: center;">
+                        <button onclick="showFileDetails(decodePathValue('${encodedPath}'), true, ${!!hasStaged}, ${!!hasUnstaged}, ${!!isUntracked})" style="background: var(--primary); border: none; color: #fff; padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
+                            View Full File
+                        </button>
+                    </div>
+                `;
+            } catch (e) {
+                container.innerHTML = `<div style="padding: 10px; color: #f87171; font-size: 12px; text-align:center;">Error: ${e.message}</div>`;
+            }
+        };
+
+        let currentFilePath = '', currentFileDiff = '', currentFileContent = '', currentFileMode = 'diff', currentFileWrap = false, currentFontSize = 12, currentFileRenderRawDiff = false;
 
-        async function showFileDetails(path, isFromChanges = true) {
+        function changeFontSize(delta) {
+            if (delta === 0) currentFontSize = 12;
+            else currentFontSize = Math.max(8, Math.min(32, currentFontSize + delta));
+            renderFileDetails();
+        }
+
+        async function showFileDetails(path, isFromChanges = true, hasStaged = false, hasUnstaged = true, isUntracked = false) {
             currentFilePath = path;
             currentFileMode = isFromChanges ? 'diff' : 'file';
+            currentFileRenderRawDiff = false;
             const content = document.getElementById('git-content');
             content.innerHTML = '<p style="text-align:center;color:#888;padding:20px;">Loading details...</p>';
             try {
-                const [diffRes, fileRes] = await Promise.all([
-                    fetchWithTimeout(`/api/sessions/${activeSessionId}/git-diff-file?path=${encodeURIComponent(path)}`).catch(()=>({ok:false})),
-                    fetchWithTimeout(`/api/sessions/${activeSessionId}/file?path=${encodeURIComponent(path)}`).catch(()=>({ok:false}))
-                ]);
-                let diffData = diffRes.ok ? await diffRes.json() : { success: false };
-                let fileData = fileRes.ok ? await fileRes.json() : { success: false };
-                currentFileDiff = (diffData.success && diffData.stdout) ? diffData.stdout : '';
-                currentFileContent = fileData.success ? fileData.content : '';
-                if (!currentFileDiff && isFromChanges && currentFileContent) currentFileDiff = 'Untracked file:\n\n' + currentFileContent;
+                const detailData = await loadFileChangeData(path, {
+                    hasStaged: isFromChanges ? hasStaged : false,
+                    hasUnstaged: isFromChanges ? hasUnstaged : true,
+                    isUntracked: isFromChanges ? isUntracked : false
+                });
+                currentFileDiff = detailData.diff;
+                currentFileContent = detailData.content;
+                currentFileRenderRawDiff = detailData.renderRawDiff;
                 if (!currentFileDiff && !currentFileContent) {
                      content.innerHTML = `<p style="color:#ff3b30; padding:10px;">Failed to load details.</p>`;
                      return;
                 }
-                if (!diffData.stdout && !isFromChanges) currentFileMode = 'file';
+                if (!currentFileDiff && !isFromChanges) currentFileMode = 'file';
                 renderFileDetails();
             } catch (e) { content.innerHTML = `<p style="color:#ff3b30; padding:10px;">${e.message}</p>`; }
         }
 
-        function setFileMode(mode) { currentFileMode = mode; renderFileDetails(); }
+        function toggleFileMode() { currentFileMode = currentFileMode === 'diff' ? 'file' : 'diff'; renderFileDetails(); }
+        function toggleFileWrap() { currentFileWrap = !currentFileWrap; renderFileDetails(); }
 
         function renderFileDetails() {
             const content = document.getElementById('git-content');
             let html = `
-            <div style="display:flex; align-items:center; background: var(--card-bg); padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.05);">
-                <button class="icon-btn" onclick="switchGitTab(currentGitTab)" style="color: var(--primary); margin-right: 12px; font-weight:600; font-size:14px; display:flex; align-items:center;">
+            <div style="display:flex; align-items:center; background: var(--card-bg); padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.05); position: sticky; top: 0; z-index: 10;">
+                <button class="icon-btn" onclick="switchGitTab(currentGitTab)" style="color: var(--primary); margin-right: 12px; font-weight:600; font-size:14px; display:flex; align-items:center; flex-shrink: 0;">
                     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg> Back
                 </button>
-                <div style="flex:1; min-width:0;">
-                    <div style="font-weight:600; font-size:15px;">${escapeHtml(currentFilePath.split('/').pop() || currentFilePath)}</div>
-                </div>
-            </div>`;
+                <div style="flex:1; min-width:0; margin-right: 12px;">
+                    <div style="font-weight:600; font-size:15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${escapeHtml(currentFilePath)}">${escapeHtml(currentFilePath.split('/').pop() || currentFilePath)}</div>
+                </div>`;
+
             if (currentFileDiff && currentFileContent) {
-                html += `<div class="btn-toggle">
-                    <button class="${currentFileMode === 'diff' ? 'active' : ''}" onclick="setFileMode('diff')">Diff</button>
-                    <button class="${currentFileMode === 'file' ? 'active' : ''}" onclick="setFileMode('file')">File</button>
+                html += `
+                <div style="display: flex; gap: 6px; flex-shrink: 0; align-items: center;">
+                    <div style="display: flex; gap: 2px; margin-right: 8px; background: rgba(0,0,0,0.3); padding: 2px; border-radius: 4px;">
+                        <button onclick="changeFontSize(-1)" style="background: transparent; border: none; color: #aaa; padding: 4px 8px; font-size: 12px; cursor: pointer; outline: none; border-radius: 3px;" title="Zoom Out" onmouseover="this.style.background='rgba(255,255,255,0.1)';this.style.color='#fff'" onmouseout="this.style.background='transparent';this.style.color='#aaa'">A-</button>
+                        <button onclick="changeFontSize(0)" style="background: transparent; border: none; color: #aaa; padding: 4px 8px; font-size: 12px; cursor: pointer; outline: none; border-radius: 3px;" title="Reset Size" onmouseover="this.style.background='rgba(255,255,255,0.1)';this.style.color='#fff'" onmouseout="this.style.background='transparent';this.style.color='#aaa'">${currentFontSize}</button>
+                        <button onclick="changeFontSize(1)" style="background: transparent; border: none; color: #aaa; padding: 4px 8px; font-size: 12px; cursor: pointer; outline: none; border-radius: 3px;" title="Zoom In" onmouseover="this.style.background='rgba(255,255,255,0.1)';this.style.color='#fff'" onmouseout="this.style.background='transparent';this.style.color='#aaa'">A+</button>
+                    </div>
+                    <button onclick="toggleFileMode()" style="background: ${currentFileMode === 'diff' ? 'var(--primary)' : 'rgba(255,255,255,0.1)'}; border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer; outline: none;">
+                        Diff
+                    </button>
+                    <button onclick="toggleFileWrap()" style="background: ${currentFileWrap ? 'var(--primary)' : 'rgba(255,255,255,0.1)'}; border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer; outline: none;">
+                        Wrap
+                    </button>
+                </div>`;
+            } else {
+                 html += `
+                <div style="display: flex; gap: 6px; flex-shrink: 0; align-items: center;">
+                    <div style="display: flex; gap: 2px; margin-right: 8px; background: rgba(0,0,0,0.3); padding: 2px; border-radius: 4px;">
+                        <button onclick="changeFontSize(-1)" style="background: transparent; border: none; color: #aaa; padding: 4px 8px; font-size: 12px; cursor: pointer; outline: none; border-radius: 3px;" title="Zoom Out" onmouseover="this.style.background='rgba(255,255,255,0.1)';this.style.color='#fff'" onmouseout="this.style.background='transparent';this.style.color='#aaa'">A-</button>
+                        <button onclick="changeFontSize(0)" style="background: transparent; border: none; color: #aaa; padding: 4px 8px; font-size: 12px; cursor: pointer; outline: none; border-radius: 3px;" title="Reset Size" onmouseover="this.style.background='rgba(255,255,255,0.1)';this.style.color='#fff'" onmouseout="this.style.background='transparent';this.style.color='#aaa'">${currentFontSize}</button>
+                        <button onclick="changeFontSize(1)" style="background: transparent; border: none; color: #aaa; padding: 4px 8px; font-size: 12px; cursor: pointer; outline: none; border-radius: 3px;" title="Zoom In" onmouseover="this.style.background='rgba(255,255,255,0.1)';this.style.color='#fff'" onmouseout="this.style.background='transparent';this.style.color='#aaa'">A+</button>
+                    </div>
+                    <button onclick="toggleFileWrap()" style="background: ${currentFileWrap ? 'var(--primary)' : 'rgba(255,255,255,0.1)'}; border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer; outline: none;">
+                        Wrap
+                    </button>
                 </div>`;
             }
+
+            html += `</div>`;
+
+            const wrapStyle = currentFileWrap ? 'white-space: pre-wrap; word-break: break-all;' : 'white-space: pre;';
+            const innerWrapStyle = currentFileWrap ? '' : 'min-width: max-content;';
             html += `<div style="padding: 10px;">`;
-            if (currentFileMode === 'diff' && currentFileDiff) {
-                html += `<div style="background:#0d0d0d; border-radius:8px; overflow-x:auto; font-family:monospace; font-size:12px; line-height:1.5;">`;
-                currentFileDiff.split('\n').forEach(line => {
-                    let color = '#ccc', bg = 'transparent', borderLeft = '2px solid transparent';
-                    if (line.startsWith('+') && !line.startsWith('+++')) { color = '#4ade80'; bg = 'rgba(74, 222, 128, 0.1)'; borderLeft = '2px solid #4ade80'; }
-                    else if (line.startsWith('-') && !line.startsWith('---')) { color = '#f87171'; bg = 'rgba(248, 113, 113, 0.1)'; borderLeft = '2px solid #f87171'; }
-                    else if (line.startsWith('@@')) { color = '#60a5fa'; bg = 'rgba(96, 165, 250, 0.1)'; }
-                    html += `<div style="color:${color}; background:${bg}; border-left:${borderLeft}; white-space:pre-wrap; padding: 2px 8px;">${escapeHtml(line) || ' '}</div>`;
-                });
-                html += `</div>`;
+            html += `<div style="background:#0d0d0d; border-radius:8px; overflow-x:auto; font-family:monospace; font-size:${currentFontSize}px; line-height:1.5; padding: 12px 0; margin: 0; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;">`;
+            html += `<div style="${innerWrapStyle}">`;
+
+            let mergedLines = [];
+            const lines = currentFileContent ? currentFileContent.replace(/\r\n/g, '\n').split('\n') : [];
+
+            if (currentFileMode === 'diff' && currentFileDiff && !currentFileDiff.startsWith('Untracked file:')) {
+                let diffHunks = [];
+                let currentHunk = null;
+                const diffLines = currentFileDiff.replace(/\r\n/g, '\n').split('\n');
+                for (const dl of diffLines) {
+                    if (dl.startsWith('---') || dl.startsWith('+++')) continue;
+                    let match = dl.match(/^@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/);
+                    if (match) {
+                        currentHunk = {
+                            newStart: parseInt(match[2], 10),
+                            lines: []
+                        };
+                        diffHunks.push(currentHunk);
+                    } else if (currentHunk) {
+                        currentHunk.lines.push(dl);
+                    }
+                }
+
+                if (currentFileRenderRawDiff || diffHunks.length === 0) {
+                    currentFileDiff.replace(/\r\n/g, '\n').split('\n').forEach(line => {
+                        mergedLines.push({ type: 'raw', text: line });
+                    });
+                } else {
+                    let contentLineIdx = 1;
+                    for (let hunk of diffHunks) {
+                        while (contentLineIdx < hunk.newStart && contentLineIdx <= lines.length) {
+                            mergedLines.push({ type: 'normal', text: lines[contentLineIdx - 1], lineNum: contentLineIdx });
+                            contentLineIdx++;
+                        }
+                        for (let dl of hunk.lines) {
+                            if (dl.startsWith('-')) {
+                                mergedLines.push({ type: 'deleted', text: dl.substring(1) });
+                            } else if (dl.startsWith('+')) {
+                                mergedLines.push({ type: 'added', text: dl.substring(1), lineNum: contentLineIdx });
+                                contentLineIdx++;
+                            } else if (dl.startsWith(' ')) {
+                                mergedLines.push({ type: 'normal', text: dl.substring(1), lineNum: contentLineIdx });
+                                contentLineIdx++;
+                            }
+                        }
+                    }
+                    while (contentLineIdx <= lines.length) {
+                        mergedLines.push({ type: 'normal', text: lines[contentLineIdx - 1], lineNum: contentLineIdx });
+                        contentLineIdx++;
+                    }
+                }
             } else {
-                html += `<pre style="background:#0d0d0d; border-radius:8px; overflow-x:auto; font-family:monospace; font-size:12px; line-height:1.5; padding: 12px; color: #ccc; margin: 0; white-space: pre-wrap; word-break: break-all;"><code>${escapeHtml(currentFileContent)}</code></pre>`;
+                lines.forEach((line, idx) => {
+                    mergedLines.push({ type: 'normal', text: line, lineNum: idx + 1 });
+                });
             }
-            html += `</div>`;
+
+            mergedLines.forEach(item => {
+                let color = '#ccc', bg = 'transparent', borderLeft = '2px solid transparent';
+                let prefix = ' ';
+                if (item.type === 'added') { color = '#4ade80'; bg = 'rgba(74, 222, 128, 0.1)'; borderLeft = '2px solid #4ade80'; prefix = '+'; }
+                else if (item.type === 'deleted') { color = '#f87171'; bg = 'rgba(248, 113, 113, 0.1)'; borderLeft = '2px solid #f87171'; prefix = '-'; }
+                else if (item.type === 'raw') {
+                    if (item.text.startsWith('+') && !item.text.startsWith('+++')) { color = '#4ade80'; bg = 'rgba(74, 222, 128, 0.1)'; borderLeft = '2px solid #4ade80'; }
+                    else if (item.text.startsWith('-') && !item.text.startsWith('---')) { color = '#f87171'; bg = 'rgba(248, 113, 113, 0.1)'; borderLeft = '2px solid #f87171'; }
+                    else if (item.text.startsWith('@@')) { color = '#60a5fa'; bg = 'rgba(96, 165, 250, 0.1)'; }
+                    prefix = '';
+                }
+
+                const renderedText = item.type === 'raw' ? item.text : `${prefix} ${item.text}`;
+                html += `<div style="color:${color}; background:${bg}; border-left:${borderLeft}; padding: 0 12px 0 8px; display:flex;">`;
+                html += `<div style="color:#555; margin-right:16px; user-select:none; flex-shrink:0; width: 36px; text-align:right;">${item.lineNum || ''}</div>`;
+                html += `<div style="flex:1; min-width:0; ${wrapStyle}">${escapeHtml(renderedText) || ' '}</div>`;
+                html += `</div>`;
+            });
+
+            html += `</div></div></div>`;
             content.innerHTML = html;
         }
 

package/package.json

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