glad-web 1.0.33 → 1.0.34

package/lib/web/codex.js

@@ -603,19 +603,157 @@
             }
         }
 
-        function renderCodexSkillPanel(error = '') {
+        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; }
-            const items = codexSkillItems.map((item, index) => {
-                const selected = selectedCodexSkill?.name === item.name && selectedCodexSkill?.path === item.path;
-                const description = item.interface?.shortDescription || item.shortDescription || item.description || '';
-                return `<button type="button" class="codex-skill-item${selected ? ' selected' : ''}" onclick="selectCodexSkill(${index})"><span class="codex-skill-item-name"><span>${escapeHtml(item.interface?.displayName || item.name)}</span><span class="codex-skill-scope">${escapeHtml(item.scope || '')}</span></span>${description ? `<span class="codex-skill-description">${escapeHtml(description)}</span>` : ''}</button>`;
-            }).join('');
-            const empty = !items && !codexSkillLoading && !error
-                ? '<div class="claude-resume-meta" style="padding:12px;">No enabled skills found for this folder.</div>' : '';
-            panel.innerHTML = `<div class="codex-skill-header"><span>Available skills</span><span>${codexSkillLoading ? 'Loading…' : codexSkillItems.length}</span></div>${error ? `<div class="claude-resume-meta" style="padding:12px;color:#ff6b61;">${escapeHtml(error)}</div>` : ''}${items}${empty}`;
+            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();
         }
 
@@ -636,18 +774,22 @@
                 return;
             }
             codexSkillLoading = true;
+            codexSkillQuery = '';
+            codexSkillError = '';
             codexSkillItems = [];
-            renderCodexSkillPanel();
+            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;
-                renderCodexSkillPanel((data.errors || []).map(item => item.message || String(item)).filter(Boolean).join(' · '));
+                codexSkillError = (data.errors || []).map(item => item.message || String(item)).filter(Boolean).join(' · ');
+                renderCodexSkillPanel(true);
             } catch (error) {
                 codexSkillLoading = false;
-                renderCodexSkillPanel(error.message);
+                codexSkillError = error.message;
+                renderCodexSkillPanel(true);
             }
         }
 
@@ -656,6 +798,7 @@
             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({});

package/lib/web/core.js

@@ -47,6 +47,8 @@
         let codexSkillPanelOpen = false;
         let codexSkillItems = [];
         let codexSkillLoading = false;
+        let codexSkillQuery = '';
+        let codexSkillError = '';
         let selectedCodexSkill = null;
         let codexRenderFrame = null;
         let codexApprovalJumpIndex = 0;

package/lib/web/session.js

@@ -140,6 +140,8 @@
             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');

package/lib/web/styles.css

@@ -193,12 +193,22 @@
         #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: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 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-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-scope { color: #79b8ff; font-size: 10px; text-transform: uppercase; }
+        .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; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glad-web",
-  "version": "1.0.33",
+  "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"