glad-web 1.0.44 → 1.0.45

package/lib/web/git.js

@@ -51,23 +51,23 @@
                         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';
+                            let color = 'var(--git-diff-text)', bg = 'transparent', borderLeft = '2px solid transparent';
+                            if (line.startsWith('+') && !line.startsWith('+++')) { color = 'var(--git-add-text)'; bg = 'var(--git-add-bg)'; borderLeft = '2px solid var(--git-add-text)'; addCount++; }
+                            else if (line.startsWith('-') && !line.startsWith('---')) { color = 'var(--git-del-text)'; bg = 'var(--git-del-bg)'; borderLeft = '2px solid var(--git-del-text)'; subCount++; }
+                            else if (line.startsWith('@@')) { color = 'var(--git-hunk-text)'; bg = 'var(--git-hunk-bg)'; }
+                            else if (line.startsWith('diff') || line.startsWith('index') || line.startsWith('commit') || line.startsWith('Author') || line.startsWith('Date')) color = 'var(--text)';
 
                             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>` : '';
+                        const statHTML = block.name !== 'Commit Details' ? `<span style="margin-left: 12px; font-family: monospace; font-size: 12px;"><span style="color:var(--git-add-text);">+${addCount}</span> <span style="color:var(--git-del-text); 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;">
+                            <details ${isOpen ? 'open' : ''} class="git-diff-panel">
+                                <summary class="git-diff-summary">
                                     ${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;">
+                                <div class="git-diff-body">
                                     ${blockContent}
                                 </div>
                             </details>
@@ -86,7 +86,7 @@
         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;">
+            <div style="display:flex; align-items:center; background: var(--card-bg); padding: 12px 14px; border-bottom: 1px solid var(--line); 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>
@@ -150,11 +150,11 @@
                         let colorStyle = '';
                         let badgeHtml = '';
                         if (f.gitStatus) {
-                             let color = '#fff';
+                             let color = 'var(--text)';
                              let label = f.gitStatus.trim();
-                             if (label.includes('U') || label.includes('?')) { colorStyle = 'color: #4ade80;'; color = '#4ade80'; if(label === '??') label = 'U'; }
-                             else if (label.includes('M')) { colorStyle = 'color: #f59e0b;'; color = '#f59e0b'; }
-                             else if (label.includes('D')) { colorStyle = 'color: #f87171;'; color = '#f87171'; }
+                             if (label.includes('U') || label.includes('?')) { colorStyle = 'color: var(--git-add-text);'; color = 'var(--git-add-text)'; if(label === '??') label = 'U'; }
+                             else if (label.includes('M')) { colorStyle = 'color: var(--git-modified-text);'; color = 'var(--git-modified-text)'; }
+                             else if (label.includes('D')) { colorStyle = 'color: var(--git-del-text);'; color = 'var(--git-del-text)'; }
                              badgeHtml = `<span style="color:${color}; font-weight:700; font-size:10px; border:1px solid ${color}; padding:1px 4px; border-radius:3px; opacity:0.7; margin-left: auto;">${label}</span>`;
                         }
 
@@ -232,11 +232,10 @@
                 files.forEach((f, idx) => {
                     const encodedPath = encodePathValue(f.path);
                     const escapedPath = escapeHtml(f.path);
-                    let color = '#fff';
+                    let statusClass = 'modified';
                     let label = f.status;
-                    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'; }
+                    if (label.includes('A') || label === '??') { statusClass = 'added'; if(label === '??') label = 'U'; }
+                    else if (label.includes('D')) { statusClass = 'deleted'; }
                     const isUntracked = f.status === '??';
                     const hasStaged = !isUntracked && f.status[0] && f.status[0] !== ' ';
                     const hasUnstaged = !isUntracked && f.status[1] && f.status[1] !== ' ';
@@ -245,14 +244,14 @@
                     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>`;
+                            statHTML = `<span style="margin-left: 12px; font-family: monospace; font-size: 12px; white-space: nowrap;"><span style="color:var(--git-add-text);">+${added}</span> <span style="color:var(--git-del-text); 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>
+                    html += `<div class="git-change-card">
+                        <div class="git-change-header" onclick="toggleInlineDiff('${encodedPath}', 'inline-diff-${idx}', ${!!hasStaged}, ${!!hasUnstaged}, ${isUntracked})">
+                            <div class="git-change-path">📄 ${escapedPath}${statHTML}</div>
+                            <span class="git-status-badge ${statusClass}">${label}</span>
                         </div>
                         <div id="inline-diff-${idx}" style="display: none;" data-loaded="false"></div>
                     </div>`;
@@ -335,26 +334,26 @@
                 });
 
                 if (!currentFileDiff && !currentFileContent) {
-                    container.innerHTML = `<div style="padding: 10px; color: #f87171; font-size: 12px; text-align:center;">No diff available</div>`;
+                    container.innerHTML = `<div style="padding: 10px; color: var(--git-del-text); 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)'; }
+                    let color = 'var(--git-diff-text)', bg = 'transparent', borderLeft = '2px solid transparent';
+                    if (line.startsWith('+') && !line.startsWith('+++')) { color = 'var(--git-add-text)'; bg = 'var(--git-add-bg)'; borderLeft = '2px solid var(--git-add-text)'; }
+                    else if (line.startsWith('-') && !line.startsWith('---')) { color = 'var(--git-del-text)'; bg = 'var(--git-del-bg)'; borderLeft = '2px solid var(--git-del-text)'; }
+                    else if (line.startsWith('@@')) { color = 'var(--git-hunk-text)'; bg = 'var(--git-hunk-bg)'; }
 
                     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;">
+                    <div class="git-inline-diff git-inline-diff-body">
                         ${blockContent}
                     </div>
-                    <div style="padding: 8px; background: #1a1a1a; border-top: 1px solid #333; text-align: center;">
+                    <div class="git-inline-diff-footer">
                         <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
@@ -362,7 +361,7 @@
                     </div>
                 `;
             } catch (e) {
-                container.innerHTML = `<div style="padding: 10px; color: #f87171; font-size: 12px; text-align:center;">Error: ${e.message}</div>`;
+                container.innerHTML = `<div style="padding: 10px; color: var(--git-del-text); font-size: 12px; text-align:center;">Error: ${e.message}</div>`;
             }
         };
 
@@ -404,7 +403,7 @@
         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); position: sticky; top: 0; z-index: 10;">
+            <div style="display:flex; align-items:center; background: var(--card-bg); padding: 12px 14px; border-bottom: 1px solid var(--line); 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>
@@ -415,27 +414,27 @@
             if (currentFileDiff && currentFileContent) {
                 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 class="git-file-toolbar-group">
+                        <button class="git-file-toolbar-button" onclick="changeFontSize(-1)" title="Zoom Out">A-</button>
+                        <button class="git-file-toolbar-button" onclick="changeFontSize(0)" title="Reset Size">${currentFontSize}</button>
+                        <button class="git-file-toolbar-button" onclick="changeFontSize(1)" title="Zoom In">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;">
+                    <button class="git-file-mode-button${currentFileMode === 'diff' ? ' active' : ''}" onclick="toggleFileMode()">
                         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;">
+                    <button class="git-file-mode-button${currentFileWrap ? ' active' : ''}" onclick="toggleFileWrap()">
                         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 class="git-file-toolbar-group">
+                        <button class="git-file-toolbar-button" onclick="changeFontSize(-1)" title="Zoom Out">A-</button>
+                        <button class="git-file-toolbar-button" onclick="changeFontSize(0)" title="Reset Size">${currentFontSize}</button>
+                        <button class="git-file-toolbar-button" onclick="changeFontSize(1)" title="Zoom In">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;">
+                    <button class="git-file-mode-button${currentFileWrap ? ' active' : ''}" onclick="toggleFileWrap()">
                         Wrap
                     </button>
                 </div>`;
@@ -446,7 +445,7 @@
             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;">`;
-            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 class="git-file-code" style="font-size:${currentFontSize}px; line-height:1.5; -webkit-text-size-adjust:100%; text-size-adjust:100%;">`;
             html += `<div style="${innerWrapStyle}">`;
 
             let mergedLines = [];
@@ -505,20 +504,20 @@
             }
 
             mergedLines.forEach(item => {
-                let color = '#ccc', bg = 'transparent', borderLeft = '2px solid transparent';
+                let color = 'var(--git-diff-text)', 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 = '-'; }
+                if (item.type === 'added') { color = 'var(--git-add-text)'; bg = 'var(--git-add-bg)'; borderLeft = '2px solid var(--git-add-text)'; prefix = '+'; }
+                else if (item.type === 'deleted') { color = 'var(--git-del-text)'; bg = 'var(--git-del-bg)'; borderLeft = '2px solid var(--git-del-text)'; 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)'; }
+                    if (item.text.startsWith('+') && !item.text.startsWith('+++')) { color = 'var(--git-add-text)'; bg = 'var(--git-add-bg)'; borderLeft = '2px solid var(--git-add-text)'; }
+                    else if (item.text.startsWith('-') && !item.text.startsWith('---')) { color = 'var(--git-del-text)'; bg = 'var(--git-del-bg)'; borderLeft = '2px solid var(--git-del-text)'; }
+                    else if (item.text.startsWith('@@')) { color = 'var(--git-hunk-text)'; bg = 'var(--git-hunk-bg)'; }
                     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 class="git-line-number">${item.lineNum || ''}</div>`;
                 html += `<div style="flex:1; min-width:0; ${wrapStyle}">${escapeHtml(renderedText) || ' '}</div>`;
                 html += `</div>`;
             });
@@ -531,3 +530,6 @@
             refreshSessionsNow();
             document.addEventListener('visibilitychange', refreshSessionsNow);
         });
+        window.addEventListener('glad-theme-change', () => {
+            if (document.getElementById('git-view').classList.contains('active')) switchGitTab(currentGitTab);
+        });

package/lib/web/gitgraph.js

@@ -74,10 +74,10 @@ class GitGraphRenderer {
             rowDiv.style.display = 'flex';
             rowDiv.style.alignItems = 'center';
             rowDiv.style.height = this.rowHeight + 'px';
-            rowDiv.style.borderBottom = '1px solid rgba(255,255,255,0.05)';
+            rowDiv.style.borderBottom = '1px solid var(--line)';
             rowDiv.style.position = 'relative';
             rowDiv.style.cursor = 'pointer';
-            rowDiv.onmouseover = () => rowDiv.style.backgroundColor = 'rgba(255,255,255,0.05)';
+            rowDiv.onmouseover = () => rowDiv.style.backgroundColor = 'var(--surface-soft)';
             rowDiv.onmouseout = () => rowDiv.style.backgroundColor = 'transparent';
 
             const canvas = document.createElement('canvas');
@@ -102,7 +102,7 @@ class GitGraphRenderer {
             contentDiv.style.overflow = 'hidden';
 
             const msgSpan = document.createElement('span');
-            msgSpan.style.color = '#fff';
+            msgSpan.style.color = 'var(--text)';
             msgSpan.style.fontSize = '13px';
             msgSpan.style.fontWeight = '500';
             msgSpan.style.overflow = 'hidden';
@@ -160,18 +160,18 @@ class GitGraphRenderer {
                     el.remove();
                 });
                 
-                rowDiv.style.backgroundColor = 'rgba(255,255,255,0.05)';
+                rowDiv.style.backgroundColor = 'var(--surface-soft)';
                 
                 const detailsDiv = document.createElement('div');
                 detailsDiv.className = 'gitgraph-details-view';
-                detailsDiv.style.backgroundColor = '#121212';
+                detailsDiv.style.backgroundColor = 'var(--surface)';
                 detailsDiv.style.borderLeft = '2px solid ' + this.getColor(commit.col);
                 detailsDiv.style.padding = '16px';
                 detailsDiv.style.margin = '4px 0 4px ' + (canvasWidth) + 'px';
                 detailsDiv.style.borderRadius = '0 6px 6px 0';
                 detailsDiv.style.fontSize = '13px';
                 detailsDiv.style.color = 'var(--text)';
-                detailsDiv.style.boxShadow = 'inset 0 0 10px rgba(0,0,0,0.5)';
+                detailsDiv.style.boxShadow = 'inset 0 0 10px rgba(0,0,0,0.12)';
                 
                 let detailsHTML = `
                     <div style="display:flex; justify-content:space-between; margin-bottom:12px;">
@@ -189,7 +189,7 @@ class GitGraphRenderer {
                 
                 // Add diff placeholder
                 detailsHTML += `
-                    <div style="border-top:1px solid #333; padding-top:12px; margin-top:12px;">
+                    <div style="border-top:1px solid var(--line); padding-top:12px; margin-top:12px;">
                         <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>
                 `;
@@ -269,7 +269,7 @@ class GitGraphRenderer {
         ctx.fillStyle = this.getColor(commit.col);
         ctx.fill();
         ctx.lineWidth = 2;
-        ctx.strokeStyle = '#121212'; // dark background match
+        ctx.strokeStyle = getComputedStyle(document.documentElement).getPropertyValue('--surface').trim() || '#121212';
         ctx.stroke();
     }
 

package/lib/web/index.html

@@ -39,7 +39,9 @@
         <symbol id="icon-lock" viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></symbol>
         <symbol id="icon-skills" viewBox="0 0 24 24"><path d="M9 3H4a1 1 0 0 0-1 1v5h2.5a2.5 2.5 0 1 1 0 5H3v5a1 1 0 0 0 1 1h5v-2.5a2.5 2.5 0 1 1 5 0V20h5a1 1 0 0 0 1-1v-5h-2.5a2.5 2.5 0 1 1 0-5H20V4a1 1 0 0 0-1-1h-5v2.5a2.5 2.5 0 1 1-5 0V3Z"/></symbol>
         <symbol id="icon-image" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="10" r="2"/><path d="m4 17 4.5-4 3.5 3 2.5-2 5.5 4"/></symbol>
+        <symbol id="icon-file" viewBox="0 0 24 24"><path d="M9 8.5 14.5 3a4 4 0 0 1 5.7 5.7L10.4 18.5a5.5 5.5 0 0 1-7.8-7.8l9.2-9.2"/><path d="m7 11 7-7a2 2 0 1 1 2.8 2.8l-9.1 9.1a2.5 2.5 0 0 1-3.5-3.5L12 4.6"/></symbol>
         <symbol id="icon-schedule" viewBox="0 0 24 24"><circle cx="10.5" cy="13" r="7.5"/><path d="M10.5 9v4l2.5 1.5M18 3v6M15 6h6"/></symbol>
+        <symbol id="icon-calendar" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></symbol>
     </svg>
 
     <div id="app-shell">
@@ -59,9 +61,7 @@
                     </button>
                     <button id="schedule-create-button" class="header-action-btn icon-only" type="button"
                         onclick="showScheduleModal()" title="New scheduled task" aria-label="New scheduled task">
-                        <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
-                            <circle cx="12" cy="13" r="8"></circle><path d="M12 9v4l2.5 1.5"></path><path d="M9 2h6"></path><path d="M12 2v3"></path>
-                        </svg>
+                        <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-calendar"></use></svg>
                     </button>
                     <button id="app-settings-button" class="header-action-btn icon-only" type="button"
                         onclick="openSettings()" title="Settings" aria-label="Settings">
@@ -164,7 +164,6 @@
                 </button>
                 <div id="session-title">Terminal</div>
                 <div style="display: flex; align-items: center; gap: 8px;">
-                    <button id="codex-terminal-switch" class="icon-btn" onclick="toggleCodexPresentation()" title="Switch Codex interface" style="display:none; color: var(--primary); font-size: 12px; font-weight: 700; background: rgba(0, 122, 255, 0.1); padding: 5px 9px; border-radius: 15px; gap: 4px;">TERM</button>
                     <button class="icon-btn" onclick="showHistory()" title="History" style="color: var(--primary); font-size: 12px; font-weight: 700; background: rgba(0, 122, 255, 0.1); padding: 5px 9px; border-radius: 15px; gap: 4px;">
                         <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7"></path><polyline points="3 3 3 9 9 9"></polyline><path d="M12 7v5l3 2"></path></svg>
                         HIS
@@ -175,18 +174,23 @@
                     </button>
                 </div>
             </div>
+            <div id="session-status-strip" aria-live="polite">
+                <div id="session-attention-rail"></div>
+            </div>
             <div id="terminal-controls">
                 <div id="timed-tag-rail"></div>
+                <div id="composer-skill-prefix"></div>
                 <div id="input-row">
                     <textarea id="cmd-input" rows="1" placeholder="Type a message..."></textarea>
-                    <button id="attach-image-btn" class="composer-action-btn" type="button" title="Add image" aria-label="Add image"><svg class="action-icon" aria-hidden="true"><use href="#icon-image"></use></svg></button>
-                    <button id="schedule-send-btn" class="composer-action-btn" type="button" title="Schedule send" aria-label="Schedule send"><svg class="action-icon" aria-hidden="true"><use href="#icon-schedule"></use></svg></button>
+                    <button id="attachment-btn" class="composer-action-btn" type="button" title="Attachment" aria-label="Attachment"><svg class="action-icon" aria-hidden="true"><use href="#icon-file"></use></svg></button>
+                    <button id="schedule-send-btn" class="composer-action-btn" type="button" title="Schedule" aria-label="Schedule"><svg class="action-icon" aria-hidden="true"><use href="#icon-schedule"></use></svg></button>
                     <button id="send-btn" type="button" title="Send" aria-label="Send">
-                        <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>
+                        <svg class="action-icon" 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="attachment-strip" aria-live="polite"></div>
-                <input id="image-file-input" type="file" accept="image/png,image/jpeg,image/gif,image/webp" multiple hidden>
+                <input id="attachment-file-input" type="file" multiple hidden>
+                <div id="composer-action-tooltip" role="tooltip"></div>
                 <div id="claude-control-panel">
                     <div class="claude-control-rail">
                         <div class="claude-control-page primary">
@@ -304,13 +308,13 @@
 
     <!-- Plain Text History View -->
     <div id="history-view" class="view">
-        <div style="flex-shrink: 0; background: #121212; border-bottom: 1px solid #222; padding-top: env(safe-area-inset-top);">
-            <div style="display: flex; align-items: center; padding: 8px 14px;">
+        <div class="subview-nav">
+            <div class="subview-nav-row">
                 <button class="icon-btn" onclick="showTerminal()" style="color: var(--primary); font-size: 16px; font-weight: 500;">
                     <svg width="24" height="24" 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>
                     Terminal
                 </button>
-                <div style="flex: 1; text-align: center; font-weight: 600; font-size: 16px;">History</div>
+                <div class="subview-nav-title">History</div>
                 <button class="icon-btn" onclick="loadHistory()" title="Refresh" style="color: var(--primary); margin-right: 8px;">
                     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-3-6.7"></path><polyline points="21 3 21 9 15 9"></polyline></svg>
                 </button>
@@ -328,13 +332,13 @@
 
     <!-- Git View -->
     <div id="git-view" class="view">
-        <div style="flex-shrink: 0; background: #121212; border-bottom: 1px solid #222; padding-top: env(safe-area-inset-top);">
-            <div style="display: flex; align-items: center; padding: 8px 14px;">
+        <div class="subview-nav">
+            <div class="subview-nav-row">
                 <button class="icon-btn" onclick="showTerminal()" style="color: var(--primary); font-size: 16px; font-weight: 500;">
                     <svg width="24" height="24" 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>
                     Terminal
                 </button>
-                <div style="flex: 1; text-align: center; font-weight: 600; font-size: 16px;">Git Status</div>
+                <div class="subview-nav-title">Git Status</div>
                 <button class="icon-btn" onclick="loadGitStatus()" style="color: var(--primary);">
                     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-3-6.7"></path><polyline points="21 3 21 9 15 9"></polyline></svg>
                 </button>
@@ -355,7 +359,7 @@
     <!-- Tool Modal -->
     <div id="modal-overlay" onclick="closeToolModal(event)">
         <div id="tool-modal" onclick="event.stopPropagation()">
-            <h2 style="margin-top:0">Create Session</h2>
+            <div class="tool-modal-header"><h2>Create Session</h2><button class="icon-btn" type="button" onclick="closeToolModal()" aria-label="Close">×</button></div>
             <div style="margin-bottom: 15px;">
                 <label style="display:block; margin-bottom: 8px; font-size: 14px; color: var(--text-dim);">Working Directory (Optional):</label>
                 <div style="margin-bottom: 8px; color: var(--text-dim); font-size: 12px; line-height: 1.4;">

package/lib/web/session.js

@@ -1,6 +1,6 @@
         function joinSession(id, sessionName, toolKey = null) {
-            if (typeof clearImageAttachments === 'function' && selectedImageAttachments.length) {
-                void clearImageAttachments();
+            if (typeof clearComposerAttachments === 'function' && (selectedImageAttachments.length || selectedFileAttachments.length)) {
+                void clearComposerAttachments();
             }
             stopTimedInputTimers();
             activeSessionId = id;
@@ -25,7 +25,7 @@
                 initClaudeSession(sessionId);
                 return;
             }
-            if (isCodexSession() && codexState.presentation === 'structured') {
+            if (isCodexSession()) {
                 initCodexSession(sessionId);
                 return;
             }
@@ -62,14 +62,6 @@
                 const msg = JSON.parse(e.data);
                 if (msg.type === 'output') term.write(msg.data);
                 if (msg.type === 'reset') term.reset();
-                if (msg.type === 'codex-event' && isCodexSession()) {
-                    applyCodexEvent(msg.event);
-                    if (msg.event?.type === 'presentation' && msg.event.presentation === 'structured') {
-                        currentSocket.close();
-                        currentSocket = null;
-                        initCodexSession(sessionId);
-                    }
-                }
                 if (msg.type === 'exit') showLobby();
             };
         }
@@ -170,14 +162,7 @@
                     applyCodexState(msg.snapshot.state || {});
                 }
                 if (msg.type === 'codex-detail-response' && msg.detail) applyCodexDetailResponse(msg);
-                if (msg.type === 'codex-event') {
-                    applyCodexEvent(msg.event);
-                    if (msg.event?.type === 'presentation' && msg.event.presentation === 'terminal') {
-                        currentSocket.close();
-                        currentSocket = null;
-                        initTerminal(sessionId);
-                    }
-                }
+                if (msg.type === 'codex-event') applyCodexEvent(msg.event);
                 if (msg.type === 'exit') showLobby();
             };
         }