glad-web 1.0.45 → 1.0.46

package/lib/web/core.js

@@ -226,6 +226,40 @@
             }
         }
 
+        function renderSessionCard(session) {
+            const workingDirectory = session.workingDirectory || 'Unknown directory';
+            const encodedId = encodePathValue(session.id);
+            const encodedName = encodePathValue(session.name);
+            const encodedDir = encodePathValue(workingDirectory);
+            const encodedToolKey = encodePathValue(session.toolKey || '');
+            const timedInputCount = Number(session.timedInputCount) || 0;
+            const timerBadge = timedInputCount > 0
+                ? `<span class="timer-count-badge" title="${timedInputCount} scheduled timer${timedInputCount > 1 ? 's' : ''}">
+                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 2"></path></svg>
+                    ${timedInputCount}
+                </span>`
+                : '';
+            return `<div class="session-card${session.id === activeSessionId ? ' selected' : ''}" data-session-id="${escapeHtml(session.id)}">
+                <span class="active-session-dot" title="Current session" aria-label="Current session"></span>
+                <div class="session-info">
+                    <h3><span class="session-name" title="${escapeHtml(session.name)}">${escapeHtml(session.name)}</span>${session.hasUnreadCompletion ? '<span class="completion-dot" title="Completed"></span>' : ''}${timerBadge} <button type="button" class="icon-btn session-edit-btn" title="Rename session" aria-label="Rename session" onclick="renameSession(decodePathValue('${encodedId}'), decodePathValue('${encodedName}'), event)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></button></h3>
+                    <p>${escapeHtml(session.tool)}</p>
+                    <p>${new Date(session.startTime).toLocaleTimeString()}</p>
+                </div>
+                <div class="session-actions">
+                    ${renderServerChanSessionAction(session)}
+                    <button class="btn-join" onclick="joinSession(decodePathValue('${encodedId}'), decodePathValue('${encodedName}'), decodePathValue('${encodedToolKey}'))">Connect</button>
+                    <button type="button" class="icon-btn btn-delete session-delete-btn" title="Delete session" aria-label="Delete session" onclick="deleteSession(decodePathValue('${encodedId}'), event)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></button>
+                </div>
+                <div class="session-dir-row">
+                    <button class="copy-dir-btn" title="Copy directory" onclick="copySessionDirectory(decodePathValue('${encodedDir}'), event)">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
+                    </button>
+                    <p title="${escapeHtml(workingDirectory)}">${escapeHtml(workingDirectory)}</p>
+                </div>
+            </div>`;
+        }
+
         async function loadSessions() {
             log('Loading sessions...');
             const list = document.getElementById('sessions-list');
@@ -238,38 +272,7 @@
                     return;
                 }
 
-                let html = '';
-                sessions.forEach(s => {
-                    const workingDirectory = s.workingDirectory || 'Unknown directory';
-                    const encodedName = encodePathValue(s.name);
-                    const encodedDir = encodePathValue(workingDirectory);
-                    const timedInputCount = Number(s.timedInputCount) || 0;
-                    const timerBadge = timedInputCount > 0
-                        ? `<span class="timer-count-badge" title="${timedInputCount} scheduled timer${timedInputCount > 1 ? 's' : ''}">
-                            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 2"></path></svg>
-                            ${timedInputCount}
-                        </span>`
-                        : '';
-                    html += `<div class="session-card${s.id === activeSessionId ? ' selected' : ''}" data-session-id="${escapeHtml(s.id)}">
-                        <div class="session-info">
-                            <h3>${escapeHtml(s.name)}${s.hasUnreadCompletion ? '<span class="completion-dot" title="Completed"></span>' : ''}${timerBadge} <button type="button" class="icon-btn session-edit-btn" title="Rename session" aria-label="Rename session" onclick="renameSession('${s.id}', decodePathValue('${encodedName}'), event)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></button></h3>
-                            <p>${escapeHtml(s.tool)}</p>
-                            <p>${new Date(s.startTime).toLocaleTimeString()}</p>
-                        </div>
-                        <div class="session-actions">
-                            ${renderServerChanSessionAction(s)}
-                            <button class="btn-join" onclick="joinSession('${s.id}', decodePathValue('${encodedName}'), '${escapeHtml(s.toolKey || '')}')">Connect</button>
-                            <button type="button" class="icon-btn btn-delete session-delete-btn" title="Delete session" aria-label="Delete session" onclick="deleteSession('${s.id}', event)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></button>
-                        </div>
-                        <div class="session-dir-row">
-                            <button class="copy-dir-btn" title="Copy directory" onclick="copySessionDirectory(decodePathValue('${encodedDir}'), event)">
-                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
-                            </button>
-                            <p title="${escapeHtml(workingDirectory)}">${escapeHtml(workingDirectory)}</p>
-                        </div>
-                    </div>`;
-                });
-                list.innerHTML = html;
+                list.innerHTML = sessions.map(renderSessionCard).join('');
             } catch (e) {
                 list.innerHTML = `<div style="color:#ff3b30; text-align:center; margin-top:50px;"><p>Failed to load: ${e.message}</p><button class="btn-retry" onclick="loadSessions()">Retry</button></div>`;
             }
@@ -290,13 +293,19 @@
             }
         }
 
-        async function showToolModal() {
+        async function showToolModal(skill = null) {
+            window.pendingSkillHubSkill = skill || null;
             document.getElementById('modal-overlay').style.display = 'flex';
             const list = document.getElementById('tools-list');
+            const title = document.getElementById('tool-modal-title');
+            const skillLabel = document.getElementById('tool-modal-skill');
+            if (title) title.textContent = skill ? 'Start Skill Session' : 'Create Session';
+            if (skillLabel) skillLabel.textContent = skill ? String(skill.displayName || skill.name || '') : '';
             loadAppConfig();
             try {
                 const res = await fetchWithTimeout('/api/tools');
-                const tools = await res.json();
+                let tools = await res.json();
+                if (skill) tools = tools.filter(tool => tool.key === 'codex');
 
                 let html = '';
                 tools.forEach(t => {
@@ -331,7 +340,10 @@
         }
 
         function closeToolModal(e) {
-            if (!e || e.target.id === 'modal-overlay') document.getElementById('modal-overlay').style.display = 'none';
+            if (!e || e.target.id === 'modal-overlay') {
+                document.getElementById('modal-overlay').style.display = 'none';
+                window.pendingSkillHubSkill = null;
+            }
         }
 
         function isLobbyVisible() {

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">
@@ -50,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"
@@ -359,7 +353,7 @@
     <!-- Tool Modal -->
     <div id="modal-overlay" onclick="closeToolModal(event)">
         <div id="tool-modal" onclick="event.stopPropagation()">
-            <div class="tool-modal-header"><h2>Create Session</h2><button class="icon-btn" type="button" onclick="closeToolModal()" aria-label="Close">×</button></div>
+            <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;">
@@ -373,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()">
@@ -440,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>
@@ -502,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

@@ -6,6 +6,7 @@
             activeSessionId = id;
             window.activeSessionId = id;
             activeToolKey = toolKey;
+            if (typeof resetComposerSendState === 'function') resetComposerSendState();
             clearTimeout(sessionPollTimer);
             sessionPollTimer = null;
             markCompletionRead(id);
@@ -108,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);
@@ -159,7 +160,7 @@
                 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);

package/lib/web/shell.js

@@ -1,6 +1,20 @@
         async function deleteSession(id, e) {
-            e.stopPropagation(); if (!confirm('Terminate session?')) return;
-            try { await fetchWithTimeout('/api/sessions/' + id, { method: 'DELETE' }); refreshSessionsNow(); } catch (e) { alert('Failed to delete'); }
+            e?.stopPropagation();
+            if (!confirm('Terminate session?')) return;
+            const button = e?.currentTarget;
+            if (button) button.disabled = true;
+            try {
+                const response = await fetchWithTimeout('/api/sessions/' + encodeURIComponent(id), { method: 'DELETE' }, 10000);
+                if (!response.ok) {
+                    const data = await response.json().catch(() => ({}));
+                    throw new Error(data.error || `HTTP ${response.status}`);
+                }
+                if (id === activeSessionId) showLobby();
+                else await refreshSessionsNow();
+            } catch (error) {
+                if (button?.isConnected) button.disabled = false;
+                alert(`Failed to delete session: ${error.message}`);
+            }
         }
 
         function showLobby() {
@@ -10,6 +24,7 @@
             activeSessionId = null;
             window.activeSessionId = null;
             activeToolKey = null;
+            if (typeof resetComposerSendState === 'function') resetComposerSendState();
             document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
             document.getElementById('lobby-view').classList.add('active');
             refreshSessionsNow();

package/lib/web/skillhub.js

@@ -0,0 +1,197 @@
+        let skillHubSettings = null;
+        let skillHallSkills = [];
+        let skillHallQuery = '';
+
+        function applySkillHubAvailability(available) {
+            const button = document.getElementById('skill-hall-button');
+            if (!button) return;
+            button.disabled = !available;
+            button.title = available ? 'Skill Hall' : 'Skill暂不可用';
+            button.setAttribute('aria-label', button.title);
+        }
+
+        async function refreshSkillHubAvailability() {
+            try {
+                const response = await fetchWithTimeout('/api/skillhub/status', {}, 5000);
+                const data = await response.json();
+                applySkillHubAvailability(Boolean(response.ok && data.available));
+            } catch (_) {
+                applySkillHubAvailability(false);
+            }
+        }
+
+        function setSkillHubStatus(message, type = '') {
+            const target = document.getElementById('skillhub-settings-status');
+            if (!target) return;
+            target.textContent = message;
+            target.className = `serverchan-settings-status${type ? ` ${type}` : ''}`;
+        }
+
+        function setSkillHubBusy(busy) {
+            for (const id of ['skillhub-save-btn', 'skillhub-test-btn', 'skillhub-remove-btn']) {
+                const button = document.getElementById(id);
+                if (button) button.disabled = busy;
+            }
+        }
+
+        function currentSkillHubForm() {
+            return {
+                baseUrl: document.getElementById('skillhub-base-url').value.trim(),
+                token: document.getElementById('skillhub-token').value.trim()
+            };
+        }
+
+        async function loadSkillHubSettings() {
+            setSkillHubStatus('Loading configuration…');
+            try {
+                const response = await fetchWithTimeout('/api/skillhub/settings', {}, 10000);
+                const data = await response.json();
+                if (!response.ok) throw new Error(data.error || 'Could not load SkillHub configuration');
+                skillHubSettings = data;
+                document.getElementById('skillhub-base-url').value = data.baseUrl || '';
+                const token = document.getElementById('skillhub-token');
+                token.value = '';
+                token.placeholder = data.configured ? data.maskedToken : 'clh_...';
+                document.getElementById('skillhub-token-hint').textContent = data.configured
+                    ? `Saved: ${data.maskedToken}. Leave blank to keep the current Token.`
+                    : 'The Token is encrypted on this Glad host.';
+                document.getElementById('skillhub-remove-btn').style.display = data.configured ? 'inline-flex' : 'none';
+                setSkillHubStatus(data.configured ? 'Configuration saved.' : 'SkillHub is not configured.');
+            } catch (error) {
+                setSkillHubStatus(error.message || 'Could not load SkillHub configuration', 'error');
+            }
+        }
+
+        async function saveSkillHubSettings() {
+            setSkillHubBusy(true);
+            setSkillHubStatus('Testing and saving…');
+            try {
+                const response = await fetchWithTimeout('/api/skillhub/settings', {
+                    method: 'PUT',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(currentSkillHubForm())
+                }, 20000);
+                const data = await response.json();
+                if (!response.ok) throw new Error(data.error || 'Could not save SkillHub configuration');
+                skillHubSettings = data.settings;
+                const token = document.getElementById('skillhub-token');
+                token.value = '';
+                token.placeholder = data.settings.maskedToken;
+                document.getElementById('skillhub-token-hint').textContent =
+                    `Saved: ${data.settings.maskedToken}. Leave blank to keep the current Token.`;
+                document.getElementById('skillhub-remove-btn').style.display = 'inline-flex';
+                const handle = data.user?.handle || data.user?.data?.handle || '';
+                setSkillHubStatus(`Connected${handle ? ` as ${handle}` : ''}.`, 'success');
+            } catch (error) {
+                setSkillHubStatus(error.message || 'Could not save SkillHub configuration', 'error');
+            } finally {
+                setSkillHubBusy(false);
+            }
+        }
+
+        async function testSkillHubSettings() {
+            setSkillHubBusy(true);
+            setSkillHubStatus('Testing connection…');
+            try {
+                const response = await fetchWithTimeout('/api/skillhub/settings/test', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(currentSkillHubForm())
+                }, 20000);
+                const data = await response.json();
+                if (!response.ok) throw new Error(data.error || 'SkillHub connection failed');
+                const handle = data.user?.handle || data.user?.data?.handle || '';
+                setSkillHubStatus(`Connection successful${handle ? ` · ${handle}` : ''}.`, 'success');
+            } catch (error) {
+                setSkillHubStatus(error.message || 'SkillHub connection failed', 'error');
+            } finally {
+                setSkillHubBusy(false);
+            }
+        }
+
+        async function removeSkillHubSettings() {
+            if (!confirm('Remove the SkillHub connection?')) return;
+            setSkillHubBusy(true);
+            try {
+                const response = await fetchWithTimeout('/api/skillhub/settings', { method: 'DELETE' }, 10000);
+                const data = await response.json();
+                if (!response.ok) throw new Error(data.error || 'Could not remove SkillHub configuration');
+                skillHubSettings = data.settings;
+                document.getElementById('skillhub-base-url').value = '';
+                document.getElementById('skillhub-token').value = '';
+                document.getElementById('skillhub-token').placeholder = 'clh_...';
+                document.getElementById('skillhub-token-hint').textContent = 'The Token is encrypted on this Glad host.';
+                document.getElementById('skillhub-remove-btn').style.display = 'none';
+                setSkillHubStatus('SkillHub configuration removed.', 'success');
+            } catch (error) {
+                setSkillHubStatus(error.message || 'Could not remove SkillHub configuration', 'error');
+            } finally {
+                setSkillHubBusy(false);
+            }
+        }
+
+        function skillHallCard(skill, index) {
+            const name = String(skill.displayName || skill.name || skill.slug || 'Unnamed Skill');
+            const description = String(skill.description || '');
+            const meta = [skill.kind, skill.version].filter(Boolean).join(' · ');
+            return `<button type="button" class="skill-hall-card" onclick="selectSkillHallSkill(${index})"><span class="skill-hall-card-name">${escapeHtml(name)}</span>${description ? `<span class="skill-hall-card-description">${escapeHtml(description)}</span>` : ''}<span class="skill-hall-card-meta">${escapeHtml(meta)}</span></button>`;
+        }
+
+        function renderSkillHall() {
+            const grid = document.getElementById('skill-hall-grid');
+            const status = document.getElementById('skill-hall-status');
+            if (!grid || !status) return;
+            const query = skillHallQuery.trim().toLocaleLowerCase();
+            const matches = skillHallSkills.map((skill, index) => ({ skill, index })).filter(({ skill }) => {
+                if (!query) return true;
+                return [skill.displayName, skill.name, skill.slug, skill.description, skill.kind, skill.version]
+                    .some(value => String(value || '').toLocaleLowerCase().includes(query));
+            });
+            status.textContent = matches.length ? `${matches.length} Skill${matches.length === 1 ? '' : 's'}`
+                : (query ? 'No matching Skills.' : 'No Skills are available for this account.');
+            grid.innerHTML = matches.map(({ skill, index }) => skillHallCard(skill, index)).join('');
+        }
+
+        async function openSkillHall(event = null) {
+            event?.stopPropagation();
+            if (document.getElementById('skill-hall-button')?.disabled) {
+                showAppToast('Skill暂不可用');
+                return;
+            }
+            document.getElementById('skill-hall-overlay').style.display = 'flex';
+            document.getElementById('skill-hall-search').value = '';
+            document.getElementById('skill-hall-status').textContent = 'Loading Skills…';
+            document.getElementById('skill-hall-grid').innerHTML = '';
+            skillHallQuery = '';
+            try {
+                const response = await fetchWithTimeout('/api/skillhub/skills', {}, 30000);
+                const data = await response.json();
+                if (!response.ok || !data.success) throw new Error(data.error || 'Could not load Skills');
+                skillHallSkills = Array.isArray(data.skills) ? data.skills : [];
+                renderSkillHall();
+                requestAnimationFrame(() => document.getElementById('skill-hall-search')?.focus());
+            } catch (error) {
+                skillHallSkills = [];
+                document.getElementById('skill-hall-status').textContent = error.message || 'Could not load Skills';
+                if (error.message === 'Skill暂不可用') applySkillHubAvailability(false);
+            }
+        }
+
+        function closeSkillHall(event = null) {
+            if (event && event.target.id !== 'skill-hall-overlay') return;
+            document.getElementById('skill-hall-overlay').style.display = 'none';
+        }
+
+        function filterSkillHall(value) {
+            skillHallQuery = String(value || '');
+            renderSkillHall();
+        }
+
+        function selectSkillHallSkill(index) {
+            const skill = skillHallSkills[index];
+            if (!skill) return;
+            closeSkillHall();
+            showToolModal(skill);
+        }
+
+        void refreshSkillHubAvailability();

package/lib/web/styles.css

@@ -4,17 +4,20 @@
         .view.active { display: flex; }
         #lobby { overflow-y: auto; padding: 20px; padding-top: env(safe-area-inset-top); box-sizing: border-box; }
         .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
-        .header h1 { font-size: 28px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 10px; }
-        .header-logo { width: 32px; height: 32px; flex-shrink: 0; }
-        .header-actions { display: flex; align-items: center; gap: 5px; }
+        .header-actions { display: flex; align-items: center; gap: 5px; margin-left: auto; }
+        .skill-hall-entry-btn { height: 36px; padding: 0 11px; border: 1px solid rgba(0,122,255,.38); border-radius: 10px; background: rgba(0,122,255,.12); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 13px; font-weight: 800; cursor: pointer; flex-shrink: 0; }
+        .skill-hall-entry-btn:active { background: rgba(0,122,255,.22); transform: scale(.97); }
+        .skill-hall-entry-btn:disabled { border-color: rgba(142,142,147,.25); background: rgba(142,142,147,.1); color: var(--text-dim); cursor: not-allowed; transform: none; }
         .header-action-btn { height: 36px; min-width: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 3px; font-size: 13px; font-weight: 750; line-height: 1; white-space: nowrap; cursor: pointer; flex-shrink: 0; }
         .header-action-btn.icon-only { width: 36px; padding: 0; }
         .header-action-btn:active { background: #0062cc; transform: scale(.97); }
         .btn-retry { background: #333; color: #fff; border: none; padding: 8px 16px; border-radius: 20px; margin-top: 10px; cursor: pointer; }
         .session-card { background: var(--card-bg); border-radius: 12px; padding: 12px 16px 8px; margin-bottom: 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 0; align-items: center; position: relative; }
+        .active-session-dot { display: none; }
         .completion-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; flex-shrink: 0; }
         .session-info { flex: 1; min-width: 0; }
-        .session-info h3 { margin: 0 0 4px 0; font-size: 17px; display: flex; align-items: center; gap: 8px; }
+        .session-info h3 { min-width: 0; margin: 0 0 4px 0; font-size: 17px; display: flex; align-items: center; gap: 8px; }
+        .session-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
         .session-info p { margin: 0; font-size: 13px; color: var(--text-dim); }
         .timer-count-badge { display: inline-flex; align-items: center; gap: 3px; color: #fff; background: rgba(0,122,255,0.22); border: 1px solid rgba(0,122,255,0.34); border-radius: 999px; padding: 2px 7px; font-size: 11px; font-weight: 800; flex-shrink: 0; }
         .session-dir-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; }
@@ -37,7 +40,7 @@
         #modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); z-index: 10000; display: none; align-items: center; justify-content: center; padding: 20px; }
         #tool-modal { background: var(--card-bg); width: 100%; max-width: 400px; border-radius: 16px; padding: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
         #settings-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 10020; display: none; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
-        #settings-modal { background: var(--card-bg); width: 100%; max-width: 450px; border-radius: 16px; padding: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.4); box-sizing: border-box; }
+        #settings-modal { background: var(--card-bg); width: 100%; max-width: 450px; max-height: calc(100vh - 40px); overflow-y: auto; border-radius: 16px; padding: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.4); box-sizing: border-box; }
         .settings-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
         .settings-modal-header h2 { margin: 0; font-size: 20px; }
         .settings-modal-header p { margin: 5px 0 0; color: var(--text-dim); font-size: 12px; line-height: 1.45; }
@@ -58,6 +61,22 @@
         .serverchan-modal-actions { display: flex; align-items: center; gap: 8px; }
         .serverchan-action-spacer { flex: 1; }
         #serverchan-remove-btn { display: none; }
+        #skillhub-remove-btn { display: none; }
+        .tool-modal-skill { min-height: 16px; margin: 4px 0 0; color: var(--text-dim); font-size: 12px; }
+        #skill-hall-overlay { position: fixed; inset: 0; z-index: 10010; display: none; align-items: center; justify-content: center; padding: 18px; box-sizing: border-box; background: rgba(0,0,0,0.8); }
+        #skill-hall-modal { display: flex; flex-direction: column; width: min(820px, 100%); max-height: min(760px, calc(100vh - 36px)); padding: 20px; box-sizing: border-box; border-radius: 16px; background: var(--card-bg); box-shadow: 0 20px 50px rgba(0,0,0,0.45); }
+        .skill-hall-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
+        .skill-hall-header h2 { margin: 0; font-size: 21px; }
+        .skill-hall-header p { margin: 5px 0 0; color: var(--text-dim); font-size: 12px; }
+        .skill-hall-search { width: 100%; min-height: 42px; margin-top: 16px; padding: 9px 11px; box-sizing: border-box; border: 1px solid rgba(255,255,255,0.12); border-radius: 9px; background: rgba(255,255,255,0.08); color: var(--text); font-size: 14px; outline: none; }
+        .skill-hall-search:focus { border-color: rgba(0,122,255,0.65); }
+        .skill-hall-status { min-height: 20px; padding: 10px 1px 7px; color: var(--text-dim); font-size: 12px; }
+        .skill-hall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; overflow-y: auto; padding: 1px; }
+        .skill-hall-card { display: flex; min-height: 126px; flex-direction: column; align-items: stretch; gap: 8px; padding: 14px; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; background: rgba(255,255,255,0.045); color: var(--text); text-align: left; cursor: pointer; }
+        .skill-hall-card:hover { border-color: rgba(0,122,255,0.55); background: rgba(0,122,255,0.09); }
+        .skill-hall-card-name { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
+        .skill-hall-card-description { display: -webkit-box; overflow: hidden; color: var(--text-dim); font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
+        .skill-hall-card-meta { margin-top: auto; color: var(--primary); font-size: 11px; }
         #app-toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 10100; max-width: calc(100vw - 32px); transform: translate(-50%, 18px); opacity: 0; pointer-events: none; padding: 9px 14px; border-radius: 999px; background: rgba(44,44,46,0.96); border: 1px solid rgba(255,255,255,0.12); color: #fff; font-size: 13px; box-shadow: 0 10px 28px rgba(0,0,0,0.35); transition: opacity .18s ease, transform .18s ease; }
         #app-toast.visible { opacity: 1; transform: translate(-50%, 0); }
         .tool-item { padding: 12px; border-bottom: 1px solid #333; cursor: pointer; display: flex; align-items: center; border-radius: 8px; margin-top: 4px; }
@@ -143,6 +162,7 @@
         #cmd-input::placeholder { color: rgba(255,255,255,0.45); }
         #cmd-input:focus { background: rgba(255,255,255,0.1); border-color: rgba(0,122,255,0.42); color: #fff; }
         #send-btn { width: 44px; height: 38px; margin-left: 10px; background: #007aff; border: none; border-radius: 19px; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
+        #send-btn:disabled { background: color-mix(in srgb, var(--text-dim) 34%, var(--surface)); color: var(--text-dim); opacity: .72; cursor: not-allowed; }
         #attachment-strip { display: none; width: min(calc(100% - 28px), var(--control-content-max)); margin: -3px auto 2px auto; gap: 7px; overflow-x: auto; padding: 0 0 4px 0; box-sizing: border-box; scrollbar-width: none; }
         #attachment-strip.active { display: flex; }
         #attachment-strip::-webkit-scrollbar { display: none; }
@@ -671,14 +691,16 @@ html[data-theme="light"] .session-attention-pill.subagent { border-color: #99c8f
     #lobby-view { display: flex !important; width: min(var(--sidebar-w), calc(100vw - 484px)); flex: 0 0 min(var(--sidebar-w), calc(100vw - 484px)); border-right: 1px solid var(--line); background: var(--bg); }
     #lobby { width: 100%; padding: 18px 14px; }
     #lobby-view .header { margin-bottom: 18px; }
-    #lobby-view .header h1 { font-size: 23px; }
-    #lobby-view .header-action-btn:not(.icon-only) { width: 36px; padding: 0; font-size: 0; }
-    #lobby-view .header-action-btn:not(.icon-only) span:first-child { font-size: 20px; }
+    #lobby-view .header-actions { gap: 3px; }
+    #lobby-view .header-action-btn.icon-only { width: 34px; min-width: 34px; }
+    #lobby-view .header-action-btn:not(.icon-only) { width: auto; min-width: 0; padding: 0 8px; font-size: 13px; }
+    #lobby-view .header-action-btn:not(.icon-only) span:first-child { font-size: 18px; }
     #sidebar-resizer { display: block; width: 4px; flex: 0 0 4px; cursor: col-resize; background: var(--line); touch-action: none; transition: background .15s; }
     #sidebar-resizer:hover, #sidebar-resizer.dragging { background: var(--primary); }
     #detail-pane:not(:has(.view.active)) #detail-empty { display: flex; }
     #back-btn, .usage-nav-button { visibility: hidden; pointer-events: none; }
     .session-card.selected { border: 1px solid color-mix(in srgb, var(--primary) 48%, transparent); background: color-mix(in srgb, var(--primary) 10%, var(--card-bg)); }
+    .session-card.selected .active-session-dot { position: absolute; top: 7px; right: 7px; display: block; width: 9px; height: 9px; border: 2px solid var(--card-bg); border-radius: 50%; background: #34c759; box-shadow: 0 0 0 1px rgba(52,199,89,.25); pointer-events: none; }
 }
 
 @media (max-width: 919px) {
@@ -703,6 +725,7 @@ html[data-theme="light"] .usage-panel,
 html[data-theme="light"] .usage-summary-card,
 html[data-theme="light"] #tool-modal,
 html[data-theme="light"] #settings-modal,
+html[data-theme="light"] #skill-hall-modal,
 html[data-theme="light"] #usage-source-modal,
 html[data-theme="light"] #schedule-modal,
 html[data-theme="light"] #claude-picker-panel,
@@ -715,6 +738,7 @@ html[data-theme="light"] #codex-prompt-panel,
 html[data-theme="light"] #codex-skill-panel { background: var(--card-bg) !important; border-color: var(--line) !important; color: var(--text) !important; }
 html[data-theme="light"] #modal-overlay,
 html[data-theme="light"] #settings-modal-overlay,
+html[data-theme="light"] #skill-hall-overlay,
 html[data-theme="light"] #usage-source-overlay { background: var(--overlay-bg); }
 html[data-theme="light"] #claude-chat-container,
 html[data-theme="light"] #codex-chat-container,
@@ -741,11 +765,14 @@ html[data-theme="light"] .composer-action-btn,
 html[data-theme="light"] .key-btn,
 html[data-theme="light"] .command-key,
 html[data-theme="light"] .small-btn { border-color: var(--line); background: var(--surface-soft); color: var(--text); }
+html[data-theme="light"] .skill-hall-card { border-color: var(--line); background: var(--surface-soft); color: var(--text); }
+html[data-theme="light"] .skill-hall-entry-btn { border-color: rgba(0,122,255,.28); background: rgba(0,122,255,.08); }
 html[data-theme="light"] .claude-ctrl-btn.primary { color: #065fbd; background: rgba(0,122,255,.11); }
 html[data-theme="light"] .claude-ctrl-btn.danger,
 html[data-theme="light"] .small-btn.danger { color: #d92d20; background: rgba(217,45,32,.09); }
 html[data-theme="light"] #settings-modal input,
 html[data-theme="light"] #settings-modal select,
+html[data-theme="light"] .skill-hall-search,
 html[data-theme="light"] .form-field input,
 html[data-theme="light"] .form-field select,
 html[data-theme="light"] .form-field textarea,