glad-web 1.0.44 → 1.0.46

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

@@ -6,16 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="theme-color" content="#000000">
-    <script>
-        (() => {
-            const storedTheme = localStorage.getItem('glad-theme');
-            const theme = storedTheme === 'light' || storedTheme === 'dark'
-                ? storedTheme
-                : (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
-            document.documentElement.dataset.theme = theme;
-            document.documentElement.style.backgroundColor = theme === 'dark' ? '#000000' : '#f5f6f8';
-        })();
-    </script>
+    <script src="bootstrap.js"></script>
     <link rel="manifest" href="manifest.json">
     <link rel="icon" type="image/svg+xml" href="logo.svg">
     <link rel="apple-touch-icon" href="logo.svg">
@@ -39,7 +30,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">
@@ -48,7 +41,10 @@
     <div id="lobby-view" class="view active">
         <div id="lobby">
             <div class="header">
-                <h1><img class="header-logo" src="logo.svg" alt="">Glad</h1>
+                <button id="skill-hall-button" class="skill-hall-entry-btn" type="button" disabled
+                    onclick="openSkillHall()" title="Skill暂不可用" aria-label="Skill暂不可用">
+                    <svg class="action-icon" aria-hidden="true"><use href="#icon-skills"></use></svg><span>Skills</span>
+                </button>
                 <div class="header-actions">
                     <button class="header-action-btn" onclick="showToolModal()" title="New AI session"><span>+</span><span>Session</span></button>
                     <button id="usage-dashboard-button" class="header-action-btn icon-only" type="button"
@@ -59,9 +55,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 +158,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 +168,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 +302,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 +326,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 +353,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"><div><h2 id="tool-modal-title">Create Session</h2><p id="tool-modal-skill" class="tool-modal-skill"></p></div><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;">
@@ -369,6 +367,19 @@
         </div>
     </div>
 
+    <!-- Skill Hall Modal -->
+    <div id="skill-hall-overlay" onclick="closeSkillHall(event)">
+        <div id="skill-hall-modal" role="dialog" aria-modal="true" aria-labelledby="skill-hall-title" onclick="event.stopPropagation()">
+            <div class="skill-hall-header">
+                <div><h2 id="skill-hall-title">Skill Hall</h2><p>Select a private Skill to start a temporary Codex session.</p></div>
+                <button class="icon-btn" type="button" onclick="closeSkillHall()" aria-label="Close">×</button>
+            </div>
+            <input id="skill-hall-search" class="skill-hall-search" type="search" placeholder="Search skills…" aria-label="Search skills" oninput="filterSkillHall(this.value)">
+            <div id="skill-hall-status" class="skill-hall-status" aria-live="polite"></div>
+            <div id="skill-hall-grid" class="skill-hall-grid"></div>
+        </div>
+    </div>
+
     <!-- Usage Source Modal -->
     <div id="usage-source-overlay" onclick="closeUsageSourceModal(event)">
         <div id="usage-source-modal" role="dialog" aria-modal="true" aria-labelledby="usage-source-modal-title" onclick="event.stopPropagation()">
@@ -436,6 +447,29 @@
                     <button id="serverchan-test-btn" class="small-btn" type="button" onclick="testServerChanSettings()">Send Test</button>
                 </div>
             </section>
+            <section class="settings-section" aria-labelledby="skillhub-settings-title">
+                <div class="settings-section-label" id="skillhub-settings-title">Skills</div>
+                <div class="settings-provider-header">
+                    <div><h3>SkillHub</h3><p>Connect Glad to a private Skill server.</p></div>
+                </div>
+                <div class="form-field">
+                    <label for="skillhub-base-url">Server URL</label>
+                    <input id="skillhub-base-url" type="url" autocomplete="off" placeholder="http://skillhub:10070">
+                    <div class="serverchan-help">Remote servers must use HTTPS.</div>
+                </div>
+                <div class="form-field">
+                    <label for="skillhub-token">API Token</label>
+                    <input id="skillhub-token" type="password" autocomplete="off" placeholder="clh_...">
+                    <div id="skillhub-token-hint" class="serverchan-help"></div>
+                </div>
+                <div id="skillhub-settings-status" class="serverchan-settings-status" aria-live="polite"></div>
+                <div class="serverchan-modal-actions">
+                    <button id="skillhub-remove-btn" class="small-btn danger" type="button" onclick="removeSkillHubSettings()">Remove</button>
+                    <span class="serverchan-action-spacer"></span>
+                    <button id="skillhub-save-btn" class="small-btn primary" type="button" onclick="saveSkillHubSettings()">Save</button>
+                    <button id="skillhub-test-btn" class="small-btn" type="button" onclick="testSkillHubSettings()">Test</button>
+                </div>
+            </section>
         </div>
     </div>
     <div id="app-toast" role="status" aria-live="polite"></div>
@@ -498,6 +532,7 @@
     <script src="core.js"></script>
     <script src="layout.js"></script>
     <script src="notifications.js"></script>
+    <script src="skillhub.js"></script>
     <script src="claude.js"></script>
     <script src="schedules.js"></script>
     <script src="shell.js"></script>

package/lib/web/layout.js

@@ -1,19 +1,16 @@
-        const GLAD_SPLIT_QUERY = '(min-width: 920px)';
-        const GLAD_SIDEBAR_KEY = 'glad-sidebar-width';
+        const GLAD_SPLIT_QUERY = window.gladLayout.splitQuery;
+        const GLAD_SIDEBAR_KEY = window.gladLayout.sidebarStorageKey;
 
         function isSplitLayout() {
             return window.matchMedia(GLAD_SPLIT_QUERY).matches;
         }
 
         function clampSidebarWidth(value) {
-            const max = Math.max(300, Math.min(480, window.innerWidth - 484));
-            return Math.min(max, Math.max(300, Number(value) || 348));
+            return window.gladLayout.clampSidebarWidth(value);
         }
 
         function applySidebarWidth(value) {
-            const width = clampSidebarWidth(value);
-            document.documentElement.style.setProperty('--sidebar-w', `${width}px`);
-            return width;
+            return window.gladLayout.applySidebarWidth(value);
         }
 
         function initializeResponsiveLayout() {

package/lib/web/notifications.js

@@ -50,6 +50,7 @@
             event?.stopPropagation();
             document.getElementById('settings-modal-overlay').style.display = 'flex';
             if (typeof syncGladThemeControls === 'function') syncGladThemeControls();
+            if (typeof loadSkillHubSettings === 'function') void loadSkillHubSettings();
             setServerChanStatus('Loading configuration…');
             try {
                 const response = await fetchWithTimeout('/api/notifications/serverchan', {}, 10000);

package/lib/web/session.js

@@ -1,11 +1,12 @@
         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;
             window.activeSessionId = id;
             activeToolKey = toolKey;
+            if (typeof resetComposerSendState === 'function') resetComposerSendState();
             clearTimeout(sessionPollTimer);
             sessionPollTimer = null;
             markCompletionRead(id);
@@ -25,7 +26,7 @@
                 initClaudeSession(sessionId);
                 return;
             }
-            if (isCodexSession() && codexState.presentation === 'structured') {
+            if (isCodexSession()) {
                 initCodexSession(sessionId);
                 return;
             }
@@ -62,14 +63,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();
             };
         }
@@ -116,7 +109,7 @@
                         status: claudeStatus,
                         pendingPermissionCount: claudePendingPermissions.filter(item => item.status === 'pending').length,
                         canAbort: claudeStatus === 'thinking'
-                    });
+                    }, { providerStateReceived: true });
                     renderClaudeChat();
                 }
                 if (msg.type === 'claude-event') applyClaudeEvent(msg.event);
@@ -167,17 +160,10 @@
                 if (msg.type === 'codex-snapshot' && msg.snapshot) {
                     codexMessages = msg.snapshot.messages || [];
                     codexPendingPermissions = msg.snapshot.pendingPermissions || [];
-                    applyCodexState(msg.snapshot.state || {});
+                    applyCodexState(msg.snapshot.state || {}, { providerStateReceived: true });
                 }
                 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();
             };
         }