glad-web 1.0.33 → 1.0.35

package/lib/codex/structured-session.js

@@ -4,6 +4,8 @@ const readline = require('readline');
 const crypto = require('crypto');
 const PTYManager = require('../session/pty-manager');
 
+const CODEX_MESSAGE_PAGE_BYTES = 200 * 1024;
+
 const PERMISSION_MODES = new Set(['untrusted', 'on-request', 'never']);
 const SANDBOX_MODES = new Set(['read-only', 'workspace-write', 'danger-full-access']);
 const FALLBACK_EFFORTS = ['minimal', 'low', 'medium', 'high', 'xhigh', 'ultra'];
@@ -250,14 +252,60 @@ class CodexStructuredSession extends EventEmitter {
   }
 
   snapshot() {
+    const historyPage = this.getMessagePage();
+    const { messages, ...historyPageMeta } = historyPage;
     return { id: this.id, name: this.name, tool: this.tool.displayName, toolKey: this.tool.key,
-      status: this.status, state: this.getControlState(), messages: this.messages,
+      status: this.status, state: this.getControlState(), messages, historyPage: historyPageMeta,
       pendingPermissions: [
         ...this.completedPermissions,
         ...Array.from(this.pendingPermissions.values()).map(item => item.public)
       ] };
   }
 
+  getMessagePage(beforeId = null, maxBytes = CODEX_MESSAGE_PAGE_BYTES) {
+    const requestedBeforeId = beforeId == null ? '' : String(beforeId);
+    let end = this.messages.length;
+    if (requestedBeforeId) {
+      const beforeIndex = this.messages.findIndex(item => String(item.id || '') === requestedBeforeId);
+      if (beforeIndex < 0) {
+        return { messages: [], hasMore: false, beforeId: null, bytes: 2, maxBytes };
+      }
+      end = beforeIndex;
+    }
+
+    if (end <= 0) return { messages: [], hasMore: false, beforeId: null, bytes: 2, maxBytes };
+
+    const groupStarts = [0];
+    for (let i = 1; i < end; i++) {
+      const item = this.messages[i];
+      if (item.kind === 'turn-start' && (!item.threadId || item.threadId === this.threadId)) {
+        groupStarts.push(i);
+      }
+    }
+    groupStarts.push(end);
+
+    let start = end;
+    let selectedBytes = 2;
+    for (let groupIndex = groupStarts.length - 2; groupIndex >= 0; groupIndex--) {
+      const candidateStart = groupStarts[groupIndex];
+      const candidate = this.messages.slice(candidateStart, end);
+      const candidateBytes = Buffer.byteLength(JSON.stringify(candidate), 'utf8');
+      if (start < end && candidateBytes > maxBytes) break;
+      start = candidateStart;
+      selectedBytes = candidateBytes;
+      if (candidateBytes >= maxBytes) break;
+    }
+
+    const messages = this.messages.slice(start, end);
+    return {
+      messages,
+      hasMore: start > 0,
+      beforeId: messages[0]?.id || null,
+      bytes: selectedBytes,
+      maxBytes
+    };
+  }
+
   getControlState() {
     const activeSubagentCount = Array.from(this.threadTurns.entries())
       .filter(([threadId, turn]) => threadId !== this.threadId && turn?.status === 'running').length;
@@ -1088,7 +1136,9 @@ class CodexStructuredSession extends EventEmitter {
         ...(completedAtMs ? { createdAt: completedAtMs } : {}) });
     }
     if (eventText) this.append({ kind: 'event', level: 'info', text: eventText });
-    this.emitEvent({ type: 'history-reset', messages: this.messages });
+    const historyPage = this.getMessagePage();
+    const { messages, ...historyPageMeta } = historyPage;
+    this.emitEvent({ type: 'history-reset', messages, historyPage: historyPageMeta });
     this.emitEvent({ type: 'state', state: this.getControlState() });
   }
 

package/lib/commands/web.js

@@ -377,6 +377,12 @@ async function webCommand(options) {
         if (payload.type === 'codex-compact') {
           sessionManager.compactCodexContext(sessionId).catch(error => logger.error(`Codex compact error: ${error.message}`));
         }
+        if (payload.type === 'codex-history-before') {
+          const codex = sessionManager.get(sessionId);
+          if (codex && codex.kind === 'codex-structured' && codex.presentation === 'structured') {
+            ws.send(JSON.stringify({ type: 'codex-history-page', page: codex.getMessagePage(payload.beforeId) }));
+          }
+        }
         if (payload.type === 'codex-abort') {
           sessionManager.abortCodex(sessionId);
         }

package/lib/web/codex.js

@@ -320,7 +320,46 @@
             const current = container.firstElementChild;
             if (!current) container.appendChild(next);
             else syncCodexDom(current, next);
-            container.scrollTop = shouldStickToBottom ? container.scrollHeight : previousScrollTop;
+            if (codexHistoryPrependAnchor) {
+                const anchor = codexHistoryPrependAnchor;
+                codexHistoryPrependAnchor = null;
+                container.scrollTop = anchor.scrollTop + Math.max(0, container.scrollHeight - anchor.scrollHeight);
+            } else {
+                container.scrollTop = shouldStickToBottom ? container.scrollHeight : previousScrollTop;
+            }
+        }
+
+        function applyCodexHistoryPageMeta(page = {}) {
+            codexHistoryBeforeId = page?.beforeId || codexMessages[0]?.id || null;
+            codexHistoryHasMore = Boolean(page?.hasMore);
+            codexHistoryLoading = false;
+        }
+
+        function handleCodexHistoryScroll(event) {
+            if (event?.isTrusted) codexHistoryUserScrolled = true;
+            if (!codexHistoryUserScrolled || !codexHistoryHasMore || codexHistoryLoading) return;
+            const container = event?.currentTarget || document.getElementById('codex-chat-container');
+            const scrollRange = Math.max(0, container.scrollHeight - container.clientHeight);
+            if (container.scrollTop > scrollRange * 0.5) return;
+            if (!codexHistoryBeforeId || currentSocket?.readyState !== 1) return;
+            codexHistoryLoading = true;
+            currentSocket.send(JSON.stringify({ type: 'codex-history-before', beforeId: codexHistoryBeforeId }));
+        }
+
+        function applyCodexHistoryPage(page = {}) {
+            const older = Array.isArray(page.messages) ? page.messages : [];
+            const knownIds = new Set(codexMessages.map(item => String(item.id || '')));
+            const uniqueOlder = older.filter(item => item?.id && !knownIds.has(String(item.id)));
+            const container = document.getElementById('codex-chat-container');
+            if (uniqueOlder.length && container) {
+                codexHistoryPrependAnchor = {
+                    scrollTop: container.scrollTop,
+                    scrollHeight: container.scrollHeight
+                };
+                codexMessages = [...uniqueOlder, ...codexMessages];
+            }
+            applyCodexHistoryPageMeta(page);
+            if (uniqueOlder.length) renderCodexChat();
         }
 
         function applyCodexState(state = {}) {
@@ -445,7 +484,12 @@
             if (!event) return;
             if (event.type === 'message' && event.message) codexMessages.push(event.message);
             else if (event.type === 'message-updated' && event.message) { const i = codexMessages.findIndex(item => item.id === event.message.id); if (i >= 0) codexMessages[i] = event.message; else codexMessages.push(event.message); }
-            else if (event.type === 'history-reset') codexMessages = event.messages || [];
+            else if (event.type === 'history-reset') {
+                codexMessages = event.messages || [];
+                codexHistoryUserScrolled = false;
+                codexHistoryPrependAnchor = null;
+                applyCodexHistoryPageMeta(event.historyPage);
+            }
             else if (event.type === 'permission-request' && event.request) { codexPendingPermissions = [...codexPendingPermissions.filter(item => item.id !== event.request.id), event.request]; }
             else if (event.type === 'permission-updated' && event.request) codexPendingPermissions = codexPendingPermissions.map(item => item.id === event.request.id ? event.request : item);
             if (event.state) applyCodexState(event.state); else renderCodexChat();
@@ -603,19 +647,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 +818,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 +842,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,9 +47,16 @@
         let codexSkillPanelOpen = false;
         let codexSkillItems = [];
         let codexSkillLoading = false;
+        let codexSkillQuery = '';
+        let codexSkillError = '';
         let selectedCodexSkill = null;
         let codexRenderFrame = null;
         let codexApprovalJumpIndex = 0;
+        let codexHistoryBeforeId = null;
+        let codexHistoryHasMore = false;
+        let codexHistoryLoading = false;
+        let codexHistoryUserScrolled = false;
+        let codexHistoryPrependAnchor = null;
         const modifiers = { ctrl: false };
 
         function log(msg) {

package/lib/web/session.js

@@ -140,7 +140,14 @@
             codexSkillPanelOpen = false;
             codexSkillItems = [];
             codexSkillLoading = false;
+            codexSkillQuery = '';
+            codexSkillError = '';
             selectedCodexSkill = null;
+            codexHistoryBeforeId = null;
+            codexHistoryHasMore = false;
+            codexHistoryLoading = false;
+            codexHistoryUserScrolled = false;
+            codexHistoryPrependAnchor = 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');
@@ -150,6 +157,7 @@
             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);
             applyCodexState(codexState);
+            document.getElementById('codex-chat-container').onscroll = handleCodexHistoryScroll;
             const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
             currentSocket = new WebSocket(protocol + '//' + window.location.host + '?sessionId=' + sessionId);
             currentSocket.onmessage = (e) => {
@@ -157,8 +165,10 @@
                 if (msg.type === 'codex-snapshot' && msg.snapshot) {
                     codexMessages = msg.snapshot.messages || [];
                     codexPendingPermissions = msg.snapshot.pendingPermissions || [];
+                    applyCodexHistoryPageMeta(msg.snapshot.historyPage);
                     applyCodexState(msg.snapshot.state || {});
                 }
+                if (msg.type === 'codex-history-page' && msg.page) applyCodexHistoryPage(msg.page);
                 if (msg.type === 'codex-event') {
                     applyCodexEvent(msg.event);
                     if (msg.event?.type === 'presentation' && msg.event.presentation === 'terminal') {

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.35",
   "description": "Glad transforms terminal-based AI coding tools into a polished, mobile-friendly local Web interface.",
   "bin": {
     "glad": "bin/cli.js"