glad-web 1.0.32 → 1.0.34

package/lib/codex/structured-session.js

@@ -69,6 +69,21 @@ function textFromInputItems(content) {
     .join('\n');
 }
 
+function skillsFromInputItems(content) {
+  const seen = new Set();
+  const skills = [];
+  for (const item of Array.isArray(content) ? content : []) {
+    if (!item || item.type !== 'skill') continue;
+    const name = String(item.name || '').trim();
+    const path = String(item.path || '').trim();
+    const key = `${name}\n${path}`;
+    if (!name || !path || seen.has(key)) continue;
+    seen.add(key);
+    skills.push({ name, path });
+  }
+  return skills;
+}
+
 function recentUserQuestions(thread, limit = 2) {
   const questions = [];
   const turns = Array.isArray(thread?.turns) ? thread.turns : [];
@@ -597,7 +612,9 @@ class CodexStructuredSession extends EventEmitter {
       ...timing, toolStatus: inferredToolStatus || raw.status || 'running' }
       : kind === 'compaction' ? { providerId, threadId, turnId, ...timing,
         compactionStatus: inferredStatus || raw.status || 'running' }
-      : { text, threadId, turnId, streaming: false, ...(completedAtMs ? { completedAtMs } : {}) };
+      : { text, threadId, turnId, streaming: false,
+        ...(kind === 'user' ? { skills: skillsFromInputItems(raw.content) } : {}),
+        ...(completedAtMs ? { completedAtMs } : {}) };
     if (existing) {
       this.patch(existing.id, patch);
     } else if (kind === 'user') {
@@ -630,6 +647,37 @@ class CodexStructuredSession extends EventEmitter {
     return models;
   }
 
+  async listSkills(forceReload = false) {
+    await this.ensureProcess();
+    const result = await this.request('skills/list', {
+      cwds: [this.workingDir],
+      forceReload: Boolean(forceReload)
+    });
+    const entries = Array.isArray(result?.data) ? result.data : [];
+    const entry = entries.find(item => item?.cwd === this.workingDir) || entries[0] || {};
+    return {
+      skills: (Array.isArray(entry.skills) ? entry.skills : []).filter(item => item?.enabled !== false),
+      errors: Array.isArray(entry.errors) ? entry.errors : []
+    };
+  }
+
+  async resolveSkillInputs(skills) {
+    const requested = (Array.isArray(skills) ? skills : []).slice(0, 8);
+    if (!requested.length) return [];
+    const available = await this.listSkills(false);
+    const allowed = new Map(available.skills.map(item => [`${item.name}\n${item.path}`, item]));
+    const seen = new Set();
+    const resolved = [];
+    for (const item of requested) {
+      const key = `${String(item?.name || '')}\n${String(item?.path || '')}`;
+      const skill = allowed.get(key);
+      if (!skill || seen.has(key)) continue;
+      seen.add(key);
+      resolved.push({ type: 'skill', name: skill.name, path: skill.path });
+    }
+    return resolved;
+  }
+
   async refreshConfigDefaults() {
     const result = await this.request('config/read', { cwd: this.workingDir, includeLayers: false });
     const config = result?.config || {};
@@ -838,7 +886,7 @@ class CodexStructuredSession extends EventEmitter {
     return this.getControlState();
   }
 
-  async sendUserMessage(text, attachments = []) {
+  async sendUserMessage(text, attachments = [], skills = []) {
     const prompt = String(text || '').trim();
     const images = (Array.isArray(attachments) ? attachments : [])
       .filter(item => item && typeof item.path === 'string' && item.path);
@@ -848,7 +896,10 @@ class CodexStructuredSession extends EventEmitter {
     this.append({
       kind: 'user',
       text: prompt || '📷 Image attachment',
-      attachments: images.map(item => ({ id: item.id, name: item.name || 'image' }))
+      attachments: images.map(item => ({ id: item.id, name: item.name || 'image' })),
+      skills: (Array.isArray(skills) ? skills : []).map(item => ({
+        name: String(item?.name || ''), path: String(item?.path || '')
+      })).filter(item => item.name && item.path)
     });
     try {
       await this.ensureProcess();
@@ -867,6 +918,7 @@ class CodexStructuredSession extends EventEmitter {
       }
       this.setStatus('running');
       const input = [];
+      input.push(...await this.resolveSkillInputs(skills));
       if (prompt) input.push({ type: 'text', text: prompt });
       for (const image of images) input.push({ type: 'localImage', path: image.path });
       const params = { threadId: this.threadId, input, cwd: this.workingDir, summary: 'auto' };

package/lib/commands/web.js

@@ -359,7 +359,7 @@ async function webCommand(options) {
           sessionManager.abortClaude(sessionId);
         }
         if (payload.type === 'codex-input') {
-          sessionManager.sendCodexInput(sessionId, payload.text || '', payload.attachmentIds || [])
+          sessionManager.sendCodexInput(sessionId, payload.text || '', payload.attachmentIds || [], payload.skills || [])
             .catch(error => logger.error(`Codex input error: ${error.message}`));
         }
         if (payload.type === 'codex-permission') {

package/lib/server/routes/providers.js

@@ -68,6 +68,16 @@ function registerProviderRoutes(app, { sessionManager }) {
     }
   });
 
+  app.get('/api/sessions/:id/codex-skills', async (req, res) => {
+    try {
+      const result = await sessionManager.listCodexSkills(req.params.id, req.query?.forceReload === 'true');
+      if (!result) return res.status(404).json({ error: 'Codex session not found' });
+      res.json({ success: true, ...result });
+    } catch (error) {
+      res.status(400).json({ error: error.message });
+    }
+  });
+
   app.post('/api/sessions/:id/codex-abort', (req, res) => {
     const success = sessionManager.abortCodex(req.params.id);
     if (!success) return res.status(409).json({ error: 'Codex session is idle or unavailable' });

package/lib/session/session-manager.js

@@ -294,14 +294,14 @@ class SessionManager extends EventEmitter {
     this.scheduleImageCleanup(id, attachmentIds);
   }
 
-  async sendCodexInput(id, text, attachmentIds = []) {
+  async sendCodexInput(id, text, attachmentIds = [], skills = []) {
     const session = this.get(id);
     if (!session || session.kind !== 'codex-structured') return false;
     const attachments = this.getCodexImageAttachments(id, attachmentIds);
     const prompt = String(text || '');
     if (!prompt.trim() && attachments.length === 0) return false;
     this.markSessionInput(session, prompt || '[image attachment]');
-    const sent = await session.sendUserMessage(prompt, attachments);
+    const sent = await session.sendUserMessage(prompt, attachments, skills);
     if (sent && attachments.length) this.scheduleCodexImageCleanup(id, attachments.map(item => item.id));
     return sent;
   }
@@ -437,6 +437,12 @@ class SessionManager extends EventEmitter {
     return session.listPromptHistory(options);
   }
 
+  listCodexSkills(id, forceReload = false) {
+    const session = this.get(id);
+    if (!session || session.kind !== 'codex-structured') return null;
+    return session.listSkills(forceReload);
+  }
+
   switchCodexPresentation(id, presentation) {
     const session = this.get(id);
     if (!session || session.kind !== 'codex-structured') return Promise.resolve(false);

package/lib/web/codex.js

@@ -199,10 +199,15 @@
             const label = `${formatCodexTokens(remaining)} / ${formatCodexTokens(total)}（${Math.round(percent)}%）`;
             return `<span class="codex-context-meter${level}" style="--context-remaining:${percent}%" title="${escapeHtml(`Context remaining: ${label}`)}" aria-label="${escapeHtml(`Context remaining: ${label}`)}">${escapeHtml(label)}</span>`;
         }
+        function renderCodexMessageSkills(item) {
+            const skills = Array.isArray(item?.skills) ? item.skills : [];
+            return skills.map(skill => `<span class="codex-message-skill" title="${escapeHtml(skill.path || skill.name || '')}">Skill · ${escapeHtml(skill.name || 'unknown')}</span>`).join('');
+        }
         function renderCodexMessageMeta(item, finalOnly = false, context = null) {
             const time = renderCodexMessageTime(item, finalOnly);
+            const skills = renderCodexMessageSkills(item);
             const meter = renderCodexContextMeter(context);
-            return time || meter ? `<div class="codex-message-meta">${time}${meter}</div>` : '';
+            return time || skills || meter ? `<div class="codex-message-meta">${time}${skills}${meter}</div>` : '';
         }
         function syncCodexDom(current, next) {
             if (!current || !next) return;
@@ -305,9 +310,12 @@
                 i += 1;
             }
             for (const request of codexPendingPermissions) if (!usedPermissions.has(request.id)) parts.push(renderCodexPermission(request));
+            const skillBubble = selectedCodexSkill && codexState.status === 'idle'
+                ? `<div class="codex-skill-bubble" role="status" aria-label="Selected skill: ${escapeHtml(selectedCodexSkill.name)}"><span class="codex-skill-bubble-name">Skill · ${escapeHtml(selectedCodexSkill.name)}</span><button type="button" class="codex-skill-bubble-close" onclick="clearCodexSkillSelection()" title="Remove selected skill" aria-label="Remove selected skill">×</button></div>`
+                : '';
             const working = `<div class="codex-working-indicator" role="status" aria-label="Codex is working" title="Codex is working"${codexState.status === 'running' ? '' : ' style="display:none"'}></div>`;
             const template = document.createElement('template');
-            template.innerHTML = `<div class="codex-conversation">${working}${parts.join('') || '<div class="codex-message event">Send a message to start Codex.</div>'}</div>`;
+            template.innerHTML = `<div class="codex-conversation">${skillBubble}${working}${parts.join('') || '<div class="codex-message event">Send a message to start Codex.</div>'}</div>`;
             const next = template.content.firstElementChild;
             const current = container.firstElementChild;
             if (!current) container.appendChild(next);
@@ -342,6 +350,8 @@
             if (abort) abort.disabled = !codexState.canAbort;
             const compact = document.getElementById('codex-compact-btn');
             if (compact) { compact.disabled = !codexState.canCompact; compact.textContent = codexState.compacting ? 'Compacting' : 'Compact'; }
+            const skills = document.getElementById('codex-skills-btn');
+            if (skills) { skills.disabled = !(codexState.presentation === 'structured' && codexState.status === 'idle'); skills.classList.toggle('primary', Boolean(selectedCodexSkill)); }
             const fork = document.getElementById('codex-fork-btn');
             if (fork) fork.disabled = !(codexState.presentation === 'structured' && codexState.status === 'idle');
             const terminal = document.getElementById('codex-terminal-switch');
@@ -400,10 +410,12 @@
             codexResumePanelOpen = false;
             codexForkPanelOpen = false;
             codexPromptPanelOpen = false;
+            codexSkillPanelOpen = false;
             codexModelCandidate = codexState.model || codexState.models?.[0]?.id || null;
             document.getElementById('codex-resume-panel').classList.remove('active');
             document.getElementById('codex-fork-panel').classList.remove('active');
             document.getElementById('codex-prompt-panel').classList.remove('active');
+            document.getElementById('codex-skill-panel').classList.remove('active');
             renderCodexModelPanel();
             updateTerminalControlsHeight();
         }
@@ -460,9 +472,11 @@
             codexModelPanelOpen = false;
             codexForkPanelOpen = false;
             codexPromptPanelOpen = false;
+            codexSkillPanelOpen = false;
             document.getElementById('codex-model-panel').classList.remove('active');
             document.getElementById('codex-fork-panel').classList.remove('active');
             document.getElementById('codex-prompt-panel').classList.remove('active');
+            document.getElementById('codex-skill-panel').classList.remove('active');
             const panel = document.getElementById('codex-resume-panel');
             panel.classList.toggle('active', codexResumePanelOpen);
             updateTerminalControlsHeight();
@@ -475,9 +489,11 @@
             codexModelPanelOpen = false;
             codexResumePanelOpen = false;
             codexPromptPanelOpen = false;
+            codexSkillPanelOpen = false;
             document.getElementById('codex-model-panel').classList.remove('active');
             document.getElementById('codex-resume-panel').classList.remove('active');
             document.getElementById('codex-prompt-panel').classList.remove('active');
+            document.getElementById('codex-skill-panel').classList.remove('active');
             const panel = document.getElementById('codex-fork-panel');
             panel.classList.toggle('active', codexForkPanelOpen);
             updateTerminalControlsHeight();
@@ -531,9 +547,11 @@
             codexModelPanelOpen = false;
             codexResumePanelOpen = false;
             codexForkPanelOpen = false;
+            codexSkillPanelOpen = false;
             document.getElementById('codex-model-panel').classList.remove('active');
             document.getElementById('codex-resume-panel').classList.remove('active');
             document.getElementById('codex-fork-panel').classList.remove('active');
+            document.getElementById('codex-skill-panel').classList.remove('active');
             if (!codexPromptPanelOpen) {
                 document.getElementById('codex-prompt-panel').classList.remove('active');
                 updateTerminalControlsHeight();
@@ -584,6 +602,213 @@
                 alert('Copy failed.');
             }
         }
+
+        const CODEX_RECENT_SKILLS_KEY = 'glad.codex.recentSkills';
+
+        function codexSkillIdentity(skill) {
+            return `${String(skill?.name || '')}\n${String(skill?.path || '')}`;
+        }
+
+        function codexSkillDisplayName(skill) {
+            return String(skill?.interface?.displayName || skill?.name || 'Unknown skill');
+        }
+
+        function codexSkillDescription(skill) {
+            return String(skill?.interface?.shortDescription || skill?.shortDescription || skill?.description || '');
+        }
+
+        function codexSkillDirectory(skill) {
+            const path = String(skill?.path || '').replace(/\\/g, '/');
+            const separator = path.lastIndexOf('/');
+            const directory = separator > 0 ? path.slice(0, separator) : path;
+            const skillRoot = directory.toLowerCase().lastIndexOf('/skills/');
+            return skillRoot >= 0 ? directory.slice(skillRoot + '/skills/'.length) : directory.split('/').filter(Boolean).pop() || directory;
+        }
+
+        function codexSkillSource(skill) {
+            const scope = String(skill?.scope || '').toLowerCase();
+            const path = String(skill?.path || '').replace(/\\/g, '/').toLowerCase();
+            if (['repo', 'project', 'workspace'].includes(scope)) return { group: 'project', label: 'Project' };
+            if (['user', 'personal'].includes(scope)) return { group: 'personal', label: 'Personal' };
+            if (scope === 'plugin') return { group: 'other', label: 'Plugin' };
+            if (['system', 'admin', 'builtin', 'built-in'].includes(scope)) return { group: 'other', label: 'System' };
+            if (path.includes('/plugins/')) return { group: 'other', label: 'Plugin' };
+            if (path.includes('/.system/')) return { group: 'other', label: 'System' };
+            if (path.includes('/.codex/skills/')) return { group: 'personal', label: 'Personal' };
+            if (path.includes('/.agents/skills/')) return { group: 'project', label: 'Project' };
+            return { group: 'other', label: scope ? scope[0].toUpperCase() + scope.slice(1) : 'Other' };
+        }
+
+        function compareCodexSkills(left, right) {
+            return codexSkillDisplayName(left).localeCompare(codexSkillDisplayName(right), undefined, {
+                sensitivity: 'base',
+                numeric: true
+            }) || String(left.name || '').localeCompare(String(right.name || ''), undefined, { sensitivity: 'base', numeric: true })
+                || String(left.path || '').localeCompare(String(right.path || ''), undefined, { sensitivity: 'base', numeric: true });
+        }
+
+        function readRecentCodexSkills() {
+            try {
+                const value = JSON.parse(localStorage.getItem(CODEX_RECENT_SKILLS_KEY) || '[]');
+                return Array.isArray(value) ? value.filter(item => item?.name && item?.path).slice(0, 3) : [];
+            } catch (_) {
+                return [];
+            }
+        }
+
+        function rememberCodexSkill(skill) {
+            const key = codexSkillIdentity(skill);
+            const recent = readRecentCodexSkills().filter(item => codexSkillIdentity(item) !== key);
+            recent.unshift({ name: skill.name, path: skill.path });
+            try { localStorage.setItem(CODEX_RECENT_SKILLS_KEY, JSON.stringify(recent.slice(0, 3))); } catch (_) {}
+        }
+
+        function scoreCodexSkillSearch(skill, query) {
+            const tokens = String(query || '').toLocaleLowerCase().trim().split(/\s+/).filter(Boolean);
+            if (!tokens.length) return 0;
+            const source = codexSkillSource(skill);
+            const fields = [
+                String(skill.name || '').toLocaleLowerCase(),
+                codexSkillDisplayName(skill).toLocaleLowerCase(),
+                codexSkillDescription(skill).toLocaleLowerCase(),
+                source.label.toLocaleLowerCase(),
+                String(skill.scope || '').toLocaleLowerCase(),
+                String(skill.path || '').toLocaleLowerCase()
+            ];
+            let score = 0;
+            for (const token of tokens) {
+                let tokenScore = Number.POSITIVE_INFINITY;
+                fields.forEach((field, fieldIndex) => {
+                    const position = field.indexOf(token);
+                    if (position < 0) return;
+                    const exactBonus = field === token ? -4 : position === 0 ? -2 : 0;
+                    tokenScore = Math.min(tokenScore, fieldIndex * 10 + position + exactBonus);
+                });
+                if (!Number.isFinite(tokenScore)) return null;
+                score += tokenScore;
+            }
+            return score;
+        }
+
+        function codexSkillItemHtml(item, index) {
+            const selected = selectedCodexSkill?.name === item.name && selectedCodexSkill?.path === item.path;
+            const displayName = codexSkillDisplayName(item);
+            const description = codexSkillDescription(item);
+            const source = codexSkillSource(item);
+            const fullName = String(item.name || displayName);
+            const directory = codexSkillDirectory(item);
+            return `<button type="button" class="codex-skill-item${selected ? ' selected' : ''}" data-codex-skill-path="${escapeHtml(item.path || '')}" title="${escapeHtml(item.path || displayName)}" onclick="selectCodexSkill(${index})"><span class="codex-skill-item-name"><span>${escapeHtml(fullName)}</span><span class="codex-skill-source">${escapeHtml(source.label)}</span></span>${description ? `<span class="codex-skill-description">${escapeHtml(description)}</span>` : ''}<span class="codex-skill-meta"><span class="codex-skill-directory" title="${escapeHtml(directory)}">Dir · ${escapeHtml(directory)}</span></span></button>`;
+        }
+
+        function codexSkillSectionHtml(title, entries) {
+            if (!entries.length) return '';
+            return `<section class="codex-skill-section"><div class="codex-skill-section-title"><span>${escapeHtml(title)}</span><span>${entries.length}</span></div>${entries.map(entry => codexSkillItemHtml(entry.item, entry.index)).join('')}</section>`;
+        }
+
+        function codexSkillResultsHtml() {
+            const entries = codexSkillItems.map((item, index) => ({ item, index }));
+            const query = codexSkillQuery.trim();
+            let sections = '';
+            if (query) {
+                const matches = entries.map(entry => ({ ...entry, score: scoreCodexSkillSearch(entry.item, query) }))
+                    .filter(entry => entry.score != null)
+                    .sort((left, right) => left.score - right.score || compareCodexSkills(left.item, right.item));
+                sections = codexSkillSectionHtml('Search results', matches);
+            } else {
+                const byIdentity = new Map(entries.map(entry => [codexSkillIdentity(entry.item), entry]));
+                const recent = readRecentCodexSkills().map(item => byIdentity.get(codexSkillIdentity(item))).filter(Boolean);
+                const recentKeys = new Set(recent.map(entry => codexSkillIdentity(entry.item)));
+                const remaining = entries.filter(entry => !recentKeys.has(codexSkillIdentity(entry.item)));
+                const group = name => remaining.filter(entry => codexSkillSource(entry.item).group === name)
+                    .sort((left, right) => compareCodexSkills(left.item, right.item));
+                sections = codexSkillSectionHtml('Recently used', recent)
+                    + codexSkillSectionHtml('Current project', group('project'))
+                    + codexSkillSectionHtml('Personal', group('personal'))
+                    + codexSkillSectionHtml('Other', group('other'));
+            }
+            const emptyText = query ? 'No skills match your search.' : 'No enabled skills found for this folder.';
+            const empty = !sections && !codexSkillLoading && !codexSkillError
+                ? `<div class="claude-resume-meta codex-skill-empty">${emptyText}</div>` : '';
+            return `${codexSkillError ? `<div class="claude-resume-meta codex-skill-error">${escapeHtml(codexSkillError)}</div>` : ''}${sections}${empty}`;
+        }
+
+        function renderCodexSkillPanel(focusSearch = false) {
+            const panel = document.getElementById('codex-skill-panel');
+            if (!panel) return;
+            panel.classList.toggle('active', codexSkillPanelOpen);
+            if (!codexSkillPanelOpen) { panel.innerHTML = ''; return; }
+            panel.innerHTML = `<div class="codex-skill-header"><div class="codex-skill-header-row"><span>Available skills</span><span>${codexSkillLoading ? 'Loading…' : codexSkillItems.length}</span></div><input id="codex-skill-search" class="codex-skill-search" type="search" aria-label="Search skills" placeholder="Search skills…" value="${escapeHtml(codexSkillQuery)}" oninput="updateCodexSkillQuery(this.value)" autocomplete="off" spellcheck="false"></div><div id="codex-skill-results">${codexSkillResultsHtml()}</div>`;
+            if (focusSearch) {
+                requestAnimationFrame(() => {
+                    const search = document.getElementById('codex-skill-search');
+                    if (!search) return;
+                    search.focus({ preventScroll: true });
+                    search.setSelectionRange(search.value.length, search.value.length);
+                });
+            }
+            updateTerminalControlsHeight();
+        }
+
+        function updateCodexSkillQuery(value) {
+            codexSkillQuery = String(value || '');
+            const results = document.getElementById('codex-skill-results');
+            if (results) results.innerHTML = codexSkillResultsHtml();
+            else renderCodexSkillPanel(true);
+            updateTerminalControlsHeight();
+        }
+
+        async function toggleCodexSkillPanel() {
+            if (!(codexState.presentation === 'structured' && codexState.status === 'idle')) return;
+            codexSkillPanelOpen = !codexSkillPanelOpen;
+            codexModelPanelOpen = false;
+            codexResumePanelOpen = false;
+            codexForkPanelOpen = false;
+            codexPromptPanelOpen = false;
+            document.getElementById('codex-model-panel').classList.remove('active');
+            document.getElementById('codex-resume-panel').classList.remove('active');
+            document.getElementById('codex-fork-panel').classList.remove('active');
+            document.getElementById('codex-prompt-panel').classList.remove('active');
+            if (!codexSkillPanelOpen) {
+                renderCodexSkillPanel();
+                updateTerminalControlsHeight();
+                return;
+            }
+            codexSkillLoading = true;
+            codexSkillQuery = '';
+            codexSkillError = '';
+            codexSkillItems = [];
+            renderCodexSkillPanel(true);
+            try {
+                const res = await fetchWithTimeout(`/api/sessions/${activeSessionId}/codex-skills?forceReload=true`, {}, 30000);
+                const data = await res.json();
+                if (!res.ok || !data.success) throw new Error(data.error || 'Failed to load skills');
+                codexSkillItems = data.skills || [];
+                codexSkillLoading = false;
+                codexSkillError = (data.errors || []).map(item => item.message || String(item)).filter(Boolean).join(' · ');
+                renderCodexSkillPanel(true);
+            } catch (error) {
+                codexSkillLoading = false;
+                codexSkillError = error.message;
+                renderCodexSkillPanel(true);
+            }
+        }
+
+        function selectCodexSkill(index) {
+            const skill = codexSkillItems[index];
+            if (!skill) return;
+            const alreadySelected = selectedCodexSkill?.name === skill.name && selectedCodexSkill?.path === skill.path;
+            selectedCodexSkill = alreadySelected ? null : { name: skill.name, path: skill.path };
+            if (selectedCodexSkill) rememberCodexSkill(skill);
+            codexSkillPanelOpen = false;
+            renderCodexSkillPanel();
+            applyCodexState({});
+            updateTerminalControlsHeight();
+        }
+
+        function clearCodexSkillSelection() {
+            selectedCodexSkill = null;
+            applyCodexState({});
+        }
         async function selectCodexResumeThread(threadId) {
             const res = await fetchWithTimeout(`/api/sessions/${activeSessionId}/codex-resume`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ threadId }) }, 30000);
             if (!res.ok) { alert((await res.json()).error || 'Unable to resume Codex thread'); return; }

package/lib/web/composer.js

@@ -210,13 +210,16 @@
                     currentSocket.send(JSON.stringify({
                         type: 'codex-input',
                         text: val,
-                        attachmentIds: readyImageAttachments.map(item => item.id)
+                        attachmentIds: readyImageAttachments.map(item => item.id),
+                        skills: selectedCodexSkill ? [{ name: selectedCodexSkill.name, path: selectedCodexSkill.path }] : []
                     }));
                 }
                 inputEl.value = '';
                 inputEl.style.height = '38px';
                 selectedImageAttachments = [];
+                selectedCodexSkill = null;
                 renderImageAttachments();
+                renderCodexChat();
                 return;
             }
             if (val) {

package/lib/web/core.js

@@ -44,6 +44,12 @@
         let codexPromptTotal = 0;
         let codexPromptLoading = false;
         let codexExpandedPrompts = new Set();
+        let codexSkillPanelOpen = false;
+        let codexSkillItems = [];
+        let codexSkillLoading = false;
+        let codexSkillQuery = '';
+        let codexSkillError = '';
+        let selectedCodexSkill = null;
         let codexRenderFrame = null;
         let codexApprovalJumpIndex = 0;
         const modifiers = { ctrl: false };

package/lib/web/index.html

@@ -136,6 +136,7 @@
                                     <option value="default">Default</option><option value="untrusted">Untrusted</option><option value="on-request">On request</option><option value="never">Never ask</option>
                                 </select>
                             </label>
+                            <button id="codex-skills-btn" class="claude-ctrl-btn" onclick="toggleCodexSkillPanel()" title="Choose a skill for the next message">Skills</button>
                         </div>
                     </div>
                     <div id="codex-state-bar"></div>
@@ -143,6 +144,7 @@
                     <div id="codex-resume-panel"></div>
                     <div id="codex-fork-panel"></div>
                     <div id="codex-prompt-panel"></div>
+                    <div id="codex-skill-panel"></div>
                 </div>
                 <div id="timed-send-panel">
                     <div class="timed-row">

package/lib/web/session.js

@@ -137,10 +137,17 @@
             codexPromptTotal = 0;
             codexPromptLoading = false;
             codexExpandedPrompts = new Set();
+            codexSkillPanelOpen = false;
+            codexSkillItems = [];
+            codexSkillLoading = false;
+            codexSkillQuery = '';
+            codexSkillError = '';
+            selectedCodexSkill = null;
             document.getElementById('codex-model-panel').classList.remove('active');
             document.getElementById('codex-resume-panel').classList.remove('active');
             document.getElementById('codex-fork-panel').classList.remove('active');
             document.getElementById('codex-prompt-panel').classList.remove('active');
+            document.getElementById('codex-skill-panel').classList.remove('active');
             document.getElementById('codex-control-rail').scrollLeft = 0;
             codexState = { permissionMode: 'default', sandboxMode: 'default', effectivePermissionMode: null, effectiveSandboxMode: null, model: null, effort: null, status: 'idle', threadId: null, presentation: 'structured', models: [], canAbort: false, canCompact: false, compacting: false, canSwitchToTerminal: false, canSwitchToStructured: false };
             setClaudeModeEnabled(false);

package/lib/web/styles.css

@@ -88,12 +88,15 @@
         .codex-conversation { width: min(100%, var(--chat-content-max)); margin: 0 auto; }
         .codex-working-indicator, .claude-working-indicator { position: sticky; top: 0; z-index: 4; width: 28px; height: 28px; margin: 0 0 -28px auto; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; background: rgba(28,28,30,.68); box-shadow: 0 5px 16px rgba(0,0,0,.24); backdrop-filter: blur(8px); pointer-events: none; }
         .codex-working-indicator::after, .claude-working-indicator::after { content: ''; position: absolute; inset: 8px; border: 1.5px solid rgba(255,255,255,.7); border-top-color: transparent; border-radius: 50%; animation: codex-spin .8s linear infinite; }
+        .codex-skill-bubble { position: sticky; top: 0; z-index: 5; display: flex; width: max-content; max-width: min(280px, 72vw); min-height: 28px; margin: 0 0 -30px auto; padding: 0 4px 0 10px; align-items: center; gap: 7px; border: 1px solid rgba(0,122,255,.42); border-radius: 15px; background: rgba(21,47,78,.92); color: #eaf3ff; box-shadow: 0 5px 18px rgba(0,0,0,.3); backdrop-filter: blur(10px); font-size: 11px; font-weight: 750; }
+        .codex-skill-bubble-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+        .codex-skill-bubble-close { width: 23px; height: 23px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; font-size: 16px; line-height: 1; }
         .codex-message-block { max-width: 100%; margin: 0 0 12px; }
         .codex-message-block.user { max-width: 92%; margin-left: auto; }
         .codex-message { max-width: 100%; margin: 0; color: #f5f5f7; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
         .codex-message.user { padding: 8px 12px; border: 1px solid rgba(0,122,255,.32); border-radius: 12px; background: rgba(0,122,255,.24); }
         .codex-message.event { color: var(--text-dim); text-align: center; font-size: 12px; }
-        .codex-message-meta { display: flex; width: 100%; align-items: center; gap: 7px; margin-top: 4px; padding: 0 2px; box-sizing: border-box; }
+        .codex-message-meta { display: flex; width: 100%; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 4px; padding: 0 2px; box-sizing: border-box; }
         .codex-message-block.user .codex-message-meta { justify-content: flex-end; }
         .codex-message-time { display: block; flex: 0 0 auto; width: max-content; color: #8e8e93; font-size: 10px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
         .codex-context-meter { --context-color: #30d158; position: relative; isolation: isolate; display: inline-flex; min-width: 128px; height: 16px; align-items: center; justify-content: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--context-color) 42%, transparent); border-radius: 8px; background: rgba(255,255,255,.055); color: #d9fbe2; font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
@@ -177,8 +180,8 @@
         .codex-select-control:focus-within .codex-select-label { background: rgba(255,255,255,.14); border-color: rgba(0,122,255,.45); }
         .codex-select { appearance: none; position: absolute; inset: 0; width: 100%; min-width: 0; height: 100%; opacity: 0; cursor: pointer; }
         .codex-select option { background: #1c1c1e; color: #fff; }
-        #codex-model-panel, #codex-resume-panel, #codex-fork-panel, #codex-prompt-panel { display: none; margin-top: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(28,28,30,.99); border-radius: 8px; box-shadow: 0 16px 36px rgba(0,0,0,.34); overflow: hidden; }
-        #codex-model-panel.active, #codex-resume-panel.active, #codex-fork-panel.active, #codex-prompt-panel.active { display: block; }
+        #codex-model-panel, #codex-resume-panel, #codex-fork-panel, #codex-prompt-panel, #codex-skill-panel { display: none; margin-top: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(28,28,30,.99); border-radius: 8px; box-shadow: 0 16px 36px rgba(0,0,0,.34); overflow: hidden; }
+        #codex-model-panel.active, #codex-resume-panel.active, #codex-fork-panel.active, #codex-prompt-panel.active, #codex-skill-panel.active { display: block; }
         #codex-model-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-height: min(300px, 42dvh); }
         #codex-model-panel.active { display: grid; }
         .codex-picker-column { min-width: 0; overflow-y: auto; }
@@ -189,6 +192,23 @@
         #codex-state-bar::-webkit-scrollbar { display: none; }
         #codex-resume-panel, #codex-fork-panel { max-height: min(280px, 38dvh); overflow-y: auto; }
         #codex-prompt-panel { max-height: min(440px, 52dvh); overflow-y: auto; }
+        #codex-skill-panel { max-height: min(360px, 46dvh); overflow-y: auto; }
+        .codex-skill-header { position: sticky; top: 0; z-index: 3; padding: 9px 11px 10px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(28,28,30,.97); color: var(--text-dim); font-size: 11px; font-weight: 800; }
+        .codex-skill-header-row, .codex-skill-section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+        .codex-skill-search { width: 100%; height: 34px; margin-top: 8px; padding: 0 11px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; outline: none; background: rgba(255,255,255,.07); color: #f5f5f7; font-size: 12px; box-sizing: border-box; }
+        .codex-skill-search::placeholder { color: #77777e; }
+        .codex-skill-search:focus { border-color: rgba(0,122,255,.65); background: rgba(255,255,255,.1); box-shadow: 0 0 0 2px rgba(0,122,255,.14); }
+        .codex-skill-section + .codex-skill-section { border-top: 1px solid rgba(255,255,255,.09); }
+        .codex-skill-section-title { position: sticky; top: 62px; z-index: 2; min-height: 26px; padding: 0 11px; background: rgba(36,36,39,.98); color: #8e8e93; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
+        .codex-skill-item { display: block; width: 100%; padding: 10px 11px; border: 0; border-bottom: 1px solid rgba(255,255,255,.06); background: transparent; color: #f5f5f7; text-align: left; cursor: pointer; }
+        .codex-skill-item.selected { background: rgba(0,122,255,.18); }
+        .codex-skill-item-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 800; }
+        .codex-skill-source { flex: 0 0 auto; padding: 2px 6px; border: 1px solid rgba(0,122,255,.28); border-radius: 999px; background: rgba(0,122,255,.1); color: #79b8ff; font-size: 9px; text-transform: uppercase; }
+        .codex-skill-description { display: block; margin-top: 4px; color: #a9a9b0; font-size: 11px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
+        .codex-skill-meta { display: flex; min-width: 0; margin-top: 7px; gap: 5px; flex-wrap: wrap; }
+        .codex-skill-directory { display: block; min-width: 0; max-width: 100%; flex: 1 1 180px; padding: 2px 6px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.055); color: #8e8e93; font: 9px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; }
+        .codex-skill-empty, .codex-skill-error { padding: 12px; }
+        .codex-skill-error { color: #ff6b61; }
         .codex-prompt-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(28,28,30,.97); color: var(--text-dim); font-size: 11px; font-weight: 800; }
         .codex-prompt-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; padding: 10px 11px; border-bottom: 1px solid rgba(255,255,255,.06); }
         .codex-prompt-item:last-of-type { border-bottom: 0; }
@@ -206,6 +226,7 @@
         .claude-message-block.user > .claude-message { max-width: 100%; }
         .claude-message-time { display: block; width: max-content; margin-top: 4px; padding: 0 2px; color: #8e8e93; font-size: 10px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
         .claude-message-block.user .claude-message-time { margin-left: auto; }
+        .codex-message-skill { display: inline-flex; max-width: min(220px, 58vw); min-height: 16px; align-items: center; padding: 1px 6px; border: 1px solid rgba(0,122,255,.32); border-radius: 999px; background: rgba(0,122,255,.12); color: #8fc5ff; font-size: 9px; font-weight: 750; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
         .claude-message-attachments { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
         .claude-message-attachment { max-width: 100%; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 3px 7px; color: #d1d5db; background: rgba(255,255,255,.07); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
         .claude-message.user { margin-left: auto; background: rgba(0,122,255,0.24); border: 1px solid rgba(0,122,255,0.32); color: #fff; border-radius: 12px; padding-top: 7px; padding-bottom: 7px; }

package/package.json

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