glad-web 1.0.31 → 1.0.33

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 : [];
@@ -85,6 +100,27 @@ function recentUserQuestions(thread, limit = 2) {
   return questions;
 }
 
+function userPromptsFromThread(thread, fallbackTimestamp = null) {
+  const prompts = [];
+  const threadId = String(thread?.id || '');
+  for (const turn of Array.isArray(thread?.turns) ? thread.turns : []) {
+    const turnTimestamp = toTimestampMs(turn.startedAt || turn.createdAt || turn.completedAt || turn.updatedAt)
+      || fallbackTimestamp;
+    for (const item of Array.isArray(turn?.items) ? turn.items : []) {
+      if (item?.type !== 'userMessage') continue;
+      const prompt = (textFromInputItems(item.content) || item.text || '').trim();
+      if (!prompt) continue;
+      prompts.push({
+        id: String(item.id || `${threadId}:${turn.id || 'turn'}:${prompts.length}`),
+        threadId,
+        text: prompt,
+        createdAt: toTimestampMs(item.createdAt || item.updatedAt) || turnTimestamp || null
+      });
+    }
+  }
+  return prompts;
+}
+
 function toolDetails(raw) {
   if (raw.type === 'commandExecution') {
     return {
@@ -195,6 +231,8 @@ class CodexStructuredSession extends EventEmitter {
     this.inputSeq = 0;
     this.completionReadInputSeq = 0;
     this.timedInputs = new Map();
+    this.promptHistoryCache = null;
+    this.deferredWarnings = null;
     this.ptyManager = {
       workingDir,
       isRunning: () => this.isRunning(),
@@ -491,7 +529,9 @@ class CodexStructuredSession extends EventEmitter {
       return;
     }
     if (method === 'warning' || method === 'guardianWarning') {
-      this.append({ kind: 'event', level: 'warning', text: params.message || params.warning || 'Codex warning.' });
+      const warning = { kind: 'event', level: 'warning', text: params.message || params.warning || 'Codex warning.' };
+      if (this.deferredWarnings) this.deferredWarnings.push(warning);
+      else this.append(warning);
       return;
     }
     if (method === 'item/commandExecution/outputDelta' || method === 'item/fileChange/outputDelta') {
@@ -572,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') {
@@ -605,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 || {};
@@ -655,6 +728,68 @@ class CodexStructuredSession extends EventEmitter {
     return items;
   }
 
+  async listPromptHistory({ offset = 0, limit = 30 } = {}) {
+    await this.ensureProcess();
+    const safeOffset = Math.max(0, Math.min(199, Number(offset) || 0));
+    const safeLimit = Math.max(1, Math.min(30, Number(limit) || 30));
+    const cacheFresh = this.promptHistoryCache
+      && Date.now() - this.promptHistoryCache.loadedAt < 15000;
+
+    if (!cacheFresh) {
+      const prompts = [];
+      let cursor = null;
+      let pageCount = 0;
+      let capped = false;
+      do {
+        const result = await this.request('thread/list', {
+          cursor,
+          limit: 20,
+          sortKey: 'updated_at',
+          sortDirection: 'desc',
+          archived: false,
+          cwd: this.workingDir
+        });
+        const threads = (result?.data || []).filter(item => !item.parentThreadId);
+        const histories = await Promise.all(threads.map(async item => {
+          try {
+            const history = await this.request('thread/read', { threadId: item.id, includeTurns: true });
+            const fallbackTimestamp = toTimestampMs(item.updatedAt || item.createdAt);
+            return userPromptsFromThread(history?.thread || { id: item.id, turns: [] }, fallbackTimestamp)
+              .map(prompt => ({ ...prompt, threadId: prompt.threadId || item.id }));
+          } catch (error) {
+            this.logger.debugInfo?.(`[codex-app-server] unable to read prompt history for ${item.id}: ${error.message}`);
+            return [];
+          }
+        }));
+        prompts.push(...histories.flat());
+        cursor = result?.nextCursor || null;
+        pageCount += 1;
+        if (prompts.length >= 200 || pageCount >= 5) {
+          capped = Boolean(cursor) || prompts.length > 200;
+          break;
+        }
+      } while (cursor);
+
+      prompts.sort((a, b) => Number(b.createdAt || 0) - Number(a.createdAt || 0));
+      this.promptHistoryCache = {
+        loadedAt: Date.now(),
+        items: prompts.slice(0, 200),
+        capped
+      };
+    }
+
+    const items = this.promptHistoryCache.items.slice(safeOffset, safeOffset + safeLimit);
+    const nextOffset = safeOffset + items.length;
+    return {
+      items,
+      offset: safeOffset,
+      nextOffset,
+      total: this.promptHistoryCache.items.length,
+      hasMore: nextOffset < this.promptHistoryCache.items.length,
+      capped: this.promptHistoryCache.capped
+    };
+  }
+
   contextStatus(tokenUsage = this.tokenUsage) {
     const usage = tokenUsage || {};
     const selectedModel = this.models.find(item => item.id === this.model);
@@ -751,16 +886,20 @@ 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);
     if ((!prompt && images.length === 0) || this.presentation !== 'structured' || this.status !== 'idle') return false;
     this.hasUnreadCompletion = false;
+    this.promptHistoryCache = null;
     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();
@@ -779,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' };
@@ -882,25 +1022,46 @@ class CodexStructuredSession extends EventEmitter {
     const target = String(threadId || this.threadId || '').trim();
     if (!target || this.presentation !== 'structured' || this.status !== 'idle') return false;
     await this.ensureProcess();
+    const selectedModel = this.model;
+    const selectedEffort = this.effort;
+    const resumeWithModelOverride = Boolean(this.hasModelOverride && selectedModel);
+    const resumeWithEffortOverride = Boolean(this.hasEffortOverride && selectedEffort);
     const params = { threadId: target, cwd: this.workingDir };
     if (this.permissionMode) params.approvalPolicy = this.permissionMode;
     if (this.sandboxMode) params.sandbox = this.sandboxMode;
-    const result = await this.request('thread/resume', params);
-    this.threadId = result.thread?.id || target;
-    this.hasModelOverride = false;
-    this.hasEffortOverride = false;
-    this.model = result.model || result.thread?.model || this.model;
-    this.effort = result.reasoningEffort || result.thread?.reasoningEffort || this.effort;
-    this.effectivePermissionMode = result.approvalPolicy || this.effectivePermissionMode;
-    this.effectiveSandboxMode = sandboxModeFromPolicy(result.sandbox) || this.effectiveSandboxMode;
-    const history = await this.request('thread/read', { threadId: this.threadId, includeTurns: true });
-    this.restoreThreadHistory(history?.thread, `Resumed Codex thread ${this.threadId}`);
-    return true;
+    if (resumeWithModelOverride) params.model = selectedModel;
+    if (resumeWithEffortOverride) params.config = { model_reasoning_effort: selectedEffort };
+    this.deferredWarnings = [];
+    try {
+      const result = await this.request('thread/resume', params);
+      this.threadId = result.thread?.id || target;
+      this.hasModelOverride = resumeWithModelOverride;
+      this.hasEffortOverride = resumeWithEffortOverride;
+      this.model = result.model || result.thread?.model || selectedModel;
+      this.effort = result.reasoningEffort || result.thread?.reasoningEffort || selectedEffort;
+      this.effectivePermissionMode = result.approvalPolicy || this.effectivePermissionMode;
+      this.effectiveSandboxMode = sandboxModeFromPolicy(result.sandbox) || this.effectiveSandboxMode;
+      const history = await this.request('thread/read', { threadId: this.threadId, includeTurns: true });
+      this.restoreThreadHistory(history?.thread, `Resumed Codex thread ${this.threadId}`, {
+        preserveModel: resumeWithModelOverride,
+        preserveEffort: resumeWithEffortOverride
+      });
+      const warnings = this.deferredWarnings;
+      this.deferredWarnings = null;
+      for (const warning of warnings) this.append(warning);
+      this.promptHistoryCache = null;
+      return true;
+    } catch (error) {
+      const warnings = this.deferredWarnings || [];
+      this.deferredWarnings = null;
+      for (const warning of warnings) this.append(warning);
+      throw error;
+    }
   }
 
-  restoreThreadHistory(thread, eventText = '') {
-    this.model = thread?.model || this.model;
-    this.effort = thread?.reasoningEffort || thread?.reasoning_effort || this.effort;
+  restoreThreadHistory(thread, eventText = '', options = {}) {
+    if (!options.preserveModel) this.model = thread?.model || this.model;
+    if (!options.preserveEffort) this.effort = thread?.reasoningEffort || thread?.reasoning_effort || this.effort;
     this.tokenUsage = thread?.tokenUsage || thread?.token_usage || this.tokenUsage;
     this.messages = [];
     this.completedPermissions = [];
@@ -948,6 +1109,7 @@ class CodexStructuredSession extends EventEmitter {
     this.effectivePermissionMode = result.approvalPolicy || this.effectivePermissionMode;
     this.effectiveSandboxMode = sandboxModeFromPolicy(result.sandbox) || this.effectiveSandboxMode;
     this.restoreThreadHistory(forkedThread, `Forked from Codex thread ${sourceThreadId}`);
+    this.promptHistoryCache = null;
     return { threadId: this.threadId };
   }
 

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

@@ -55,6 +55,29 @@ function registerProviderRoutes(app, { sessionManager }) {
     }
   });
 
+  app.get('/api/sessions/:id/codex-prompts', async (req, res) => {
+    try {
+      const result = await sessionManager.listCodexPrompts(req.params.id, {
+        offset: req.query?.offset,
+        limit: req.query?.limit
+      });
+      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.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;
   }
@@ -431,6 +431,18 @@ class SessionManager extends EventEmitter {
     return session.listResumeThreads();
   }
 
+  listCodexPrompts(id, options) {
+    const session = this.get(id);
+    if (!session || session.kind !== 'codex-structured') return null;
+    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

@@ -103,6 +103,9 @@
             const detail = running ? 'Compacting context…' : ['Completed', time].filter(Boolean).join(' · ');
             return `<div class="codex-compaction-card${running ? ' running' : ''}" data-codex-key="compaction-${escapeHtml(item.id || item.providerId || '')}"><span class="codex-compaction-icon" aria-hidden="true">⇣</span><div><div class="codex-compaction-title">${running ? 'Compacting context' : 'Context compacted'}</div><div class="codex-compaction-meta">${escapeHtml(detail)}</div></div></div>`;
         }
+        function renderCodexWarning(item) {
+            return `<div class="codex-warning-card" data-codex-key="warning-${escapeHtml(item.id || '')}" role="status"><span class="codex-warning-icon" aria-hidden="true">!</span><div><div class="codex-warning-title">Codex warning</div><div class="codex-warning-text">${codexText(item.text || 'Codex reported a warning.')}</div></div></div>`;
+        }
         function renderCodexTool(item, permission = null) {
             const status = codexToolStatus(item);
             const isError = status === 'failed' || Boolean(item.error) || (item.exitCode != null && item.exitCode !== 0);
@@ -196,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;
@@ -297,13 +305,17 @@
                 else if (item.kind === 'user') parts.push(`<div class="codex-message-block user" data-codex-key="message-${escapeHtml(item.id || '')}"><div class="codex-message user claude-md">${renderMarkdown(item.text || '')}</div>${renderCodexMessageMeta(item)}</div>`);
                 else if (item.kind === 'compaction') parts.push(renderCodexCompaction(item));
                 else if (item.kind === 'status') parts.push(renderCodexStatus(item));
+                else if (item.kind === 'event' && item.level === 'warning') parts.push(renderCodexWarning(item));
                 else parts.push(`<div class="codex-message ${escapeHtml(item.level === 'error' ? 'event error' : item.kind || 'event')}">${codexText(item.text)}</div>`);
                 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);
@@ -338,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');
@@ -395,9 +409,13 @@
             codexModelPanelOpen = !codexModelPanelOpen;
             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();
         }
@@ -453,8 +471,12 @@
             codexResumePanelOpen = !codexResumePanelOpen;
             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();
@@ -466,8 +488,12 @@
             codexForkPanelOpen = !codexForkPanelOpen;
             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();
@@ -489,6 +515,157 @@
             } catch (e) { panel.innerHTML = `<div class="claude-resume-meta" style="padding:12px;color:#ff6b61;">${escapeHtml(e.message)}</div>`; }
             updateTerminalControlsHeight();
         }
+        function formatCodexPromptTime(timestamp) {
+            const value = Number(timestamp || 0);
+            if (!value) return '';
+            const date = new Date(value);
+            return Number.isNaN(date.getTime()) ? '' : date.toLocaleString([], {
+                month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit'
+            });
+        }
+        function renderCodexPromptPanel(error = '') {
+            const panel = document.getElementById('codex-prompt-panel');
+            if (!panel) return;
+            const previousScrollTop = panel.scrollTop;
+            panel.classList.toggle('active', codexPromptPanelOpen);
+            if (!codexPromptPanelOpen) return;
+            const countLabel = codexPromptTotal ? `${codexPromptItems.length} / ${codexPromptTotal}${codexPromptTotal >= 200 ? ' max' : ''}` : '';
+            const items = codexPromptItems.map((item, index) => {
+                const expanded = codexExpandedPrompts.has(index);
+                return `<div class="codex-prompt-item"><button type="button" class="codex-prompt-text${expanded ? ' expanded' : ''}" onclick="toggleCodexPromptExpanded(${index})" title="${expanded ? 'Collapse prompt' : 'Expand prompt'}">${escapeHtml(item.text || '')}</button><div class="codex-prompt-actions"><span class="codex-prompt-time">${escapeHtml(formatCodexPromptTime(item.createdAt))}</span><button type="button" class="small-btn codex-prompt-copy" data-codex-prompt-copy="${index}" onclick="copyCodexPrompt(${index})">Copy</button></div></div>`;
+            }).join('');
+            const empty = !items && !codexPromptLoading && !error
+                ? '<div class="claude-resume-meta" style="padding:12px;">No text prompts found for this folder.</div>' : '';
+            const footer = codexPromptHasMore || codexPromptLoading
+                ? `<div class="codex-prompt-footer"><button type="button" class="small-btn primary" onclick="loadMoreCodexPrompts()"${codexPromptLoading ? ' disabled' : ''}>${codexPromptLoading ? 'Loading…' : 'Load more'}</button></div>` : '';
+            panel.innerHTML = `<div class="codex-prompt-header"><span>Prompt history</span><span>${escapeHtml(countLabel)}</span></div>${error ? `<div class="claude-resume-meta" style="padding:12px;color:#ff6b61;">${escapeHtml(error)}</div>` : ''}${items}${empty}${footer}`;
+            panel.scrollTop = previousScrollTop;
+            updateTerminalControlsHeight();
+        }
+        async function toggleCodexPromptPanel() {
+            codexPromptPanelOpen = !codexPromptPanelOpen;
+            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();
+                return;
+            }
+            codexPromptItems = [];
+            codexPromptNextOffset = 0;
+            codexPromptHasMore = false;
+            codexPromptTotal = 0;
+            codexExpandedPrompts = new Set();
+            renderCodexPromptPanel();
+            await loadMoreCodexPrompts();
+        }
+        async function loadMoreCodexPrompts() {
+            if (codexPromptLoading || !codexPromptPanelOpen || codexPromptNextOffset >= 200) return;
+            codexPromptLoading = true;
+            renderCodexPromptPanel();
+            try {
+                const res = await fetchWithTimeout(`/api/sessions/${activeSessionId}/codex-prompts?offset=${codexPromptNextOffset}&limit=30`, {}, 60000);
+                const data = await res.json();
+                if (!res.ok || !data.success) throw new Error(data.error || 'Failed to load prompt history');
+                codexPromptItems.push(...(data.items || []));
+                codexPromptNextOffset = Number(data.nextOffset || codexPromptItems.length);
+                codexPromptHasMore = Boolean(data.hasMore) && codexPromptNextOffset < 200;
+                codexPromptTotal = Math.min(200, Number(data.total || codexPromptItems.length));
+                codexPromptLoading = false;
+                renderCodexPromptPanel();
+            } catch (error) {
+                codexPromptLoading = false;
+                renderCodexPromptPanel(error.message);
+            }
+        }
+        function toggleCodexPromptExpanded(index) {
+            if (codexExpandedPrompts.has(index)) codexExpandedPrompts.delete(index);
+            else codexExpandedPrompts.add(index);
+            renderCodexPromptPanel();
+        }
+        async function copyCodexPrompt(index) {
+            const prompt = codexPromptItems[index]?.text;
+            if (!prompt) return;
+            try {
+                await copyTextToClipboard(prompt);
+                const button = document.querySelector(`[data-codex-prompt-copy="${index}"]`);
+                if (!button) return;
+                button.textContent = 'Copied';
+                setTimeout(() => { if (button.isConnected) button.textContent = 'Copy'; }, 1200);
+            } catch (_) {
+                alert('Copy failed.');
+            }
+        }
+
+        function renderCodexSkillPanel(error = '') {
+            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}`;
+            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;
+            codexSkillItems = [];
+            renderCodexSkillPanel();
+            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(' · '));
+            } catch (error) {
+                codexSkillLoading = false;
+                renderCodexSkillPanel(error.message);
+            }
+        }
+
+        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 };
+            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

@@ -37,6 +37,17 @@
         let codexModelCandidate = null;
         let codexResumePanelOpen = false;
         let codexForkPanelOpen = false;
+        let codexPromptPanelOpen = false;
+        let codexPromptItems = [];
+        let codexPromptNextOffset = 0;
+        let codexPromptHasMore = false;
+        let codexPromptTotal = 0;
+        let codexPromptLoading = false;
+        let codexExpandedPrompts = new Set();
+        let codexSkillPanelOpen = false;
+        let codexSkillItems = [];
+        let codexSkillLoading = false;
+        let selectedCodexSkill = null;
         let codexRenderFrame = null;
         let codexApprovalJumpIndex = 0;
         const modifiers = { ctrl: false };

package/lib/web/index.html

@@ -122,6 +122,7 @@
                             <button id="codex-fork-btn" class="claude-ctrl-btn primary" onclick="toggleCodexForkPanel()" title="Fork a Codex thread in this conversation">Fork</button>
                         </div>
                         <div class="codex-control-page">
+                            <button id="codex-prompts-btn" class="claude-ctrl-btn" onclick="toggleCodexPromptPanel()" title="Browse and copy recent prompts">Prompts</button>
                             <button id="codex-compact-btn" class="claude-ctrl-btn" onclick="compactCodexContext()" title="Compact the current Codex context">Compact</button>
                             <label class="codex-select-control" title="Sandbox mode">
                                 <span class="codex-select-label" aria-hidden="true">Sandbox</span>
@@ -135,12 +136,15 @@
                                     <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>
                     <div id="codex-model-panel"></div>
                     <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

@@ -130,9 +130,22 @@
             codexModelCandidate = null;
             codexResumePanelOpen = false;
             codexForkPanelOpen = false;
+            codexPromptPanelOpen = false;
+            codexPromptItems = [];
+            codexPromptNextOffset = 0;
+            codexPromptHasMore = false;
+            codexPromptTotal = 0;
+            codexPromptLoading = false;
+            codexExpandedPrompts = new Set();
+            codexSkillPanelOpen = false;
+            codexSkillItems = [];
+            codexSkillLoading = false;
+            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; }
@@ -105,6 +108,10 @@
         .codex-compaction-title { font-size: 12px; font-weight: 800; }
         .codex-compaction-meta { margin-top: 3px; color: #a9a9b0; font-size: 10px; font-variant-numeric: tabular-nums; }
         .codex-compaction-card.running .codex-compaction-icon { animation: codex-pulse 1.1s ease-in-out infinite alternate; }
+        .codex-warning-card { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 14px; padding: 10px 12px; border: 1px solid rgba(255,204,0,.34); border-radius: 10px; background: linear-gradient(135deg, rgba(255,204,0,.13), rgba(255,159,10,.07)); color: #f5f5f7; }
+        .codex-warning-icon { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 50%; background: rgba(255,204,0,.16); color: #ffd60a; font-size: 15px; font-weight: 900; }
+        .codex-warning-title { color: #ffe680; font-size: 12px; font-weight: 800; }
+        .codex-warning-text { margin-top: 3px; color: #d8d3bf; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
         .codex-status-card { margin: 10px 0 14px; border: 1px solid rgba(100,210,255,.2); border-radius: 10px; background: rgba(28,28,30,.72); padding: 11px; color: #f5f5f7; }
         .codex-status-title { margin-bottom: 9px; color: #64d2ff; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
         .codex-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
@@ -173,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 { 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 { 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; }
@@ -184,6 +191,24 @@
         #codex-state-bar { display: flex; align-items: center; gap: 7px; min-height: 24px; margin-top: 8px; color: var(--text-dim); font-size: 11px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
         #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: 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-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-description { display: block; margin-top: 4px; color: #a9a9b0; font-size: 11px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
+        .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; }
+        .codex-prompt-text { display: -webkit-box; width: 100%; min-width: 0; max-height: calc(1.42em * 4); overflow: hidden; padding: 0; border: 0; background: transparent; color: #f5f5f7; font: 12px/1.42 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 4; cursor: pointer; }
+        .codex-prompt-text.expanded { display: block; max-height: none; -webkit-line-clamp: initial; }
+        .codex-prompt-actions { display: flex; min-width: 64px; flex-direction: column; align-items: flex-end; gap: 6px; }
+        .codex-prompt-time { color: #77777e; font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
+        .codex-prompt-copy { min-width: 54px; min-height: 28px; padding: 0 9px; }
+        .codex-prompt-footer { padding: 9px 11px; text-align: center; }
+        .codex-prompt-footer .small-btn { min-width: 112px; }
         .claude-message { max-width: 92%; margin: 0 0 10px 0; padding: 10px 12px; border-radius: 8px; overflow-wrap: anywhere; line-height: 1.45; font-size: 14px; }
         .claude-message-block { max-width: 100%; margin: 0 0 12px; }
         .claude-message-block > .claude-message { margin-bottom: 0; }
@@ -191,6 +216,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.31",
+  "version": "1.0.33",
   "description": "Glad transforms terminal-based AI coding tools into a polished, mobile-friendly local Web interface.",
   "bin": {
     "glad": "bin/cli.js"