glad-web 1.0.17 → 1.0.18

package/lib/commands/web.js

@@ -244,6 +244,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);

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/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

@@ -883,6 +883,7 @@
 
         function joinSession(id, sessionName, toolKey = null) {
             activeSessionId = id;
+            window.activeSessionId = id;
             activeToolKey = toolKey;
             clearTimeout(sessionPollTimer);
             sessionPollTimer = null;
@@ -1283,34 +1284,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);
                     }
-                    container.innerHTML = diffHTML;
+                    
+                    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>
+                        `;
+                    }
+                    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 +1453,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 +1471,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;
+                }
 
-        async function showFileDetails(path, isFromChanges = true) {
+                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;
+
+        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.18",
   "description": "Glad transforms terminal-based AI coding tools into a polished, mobile-friendly local Web interface.",
   "main": "index.js",
   "bin": {