glad-web 1.0.25 → 1.0.27

package/lib/codex/structured-session.js

@@ -63,6 +63,22 @@ function textFromInputItems(content) {
     .join('\n');
 }
 
+function recentUserQuestions(thread, limit = 2) {
+  const questions = [];
+  const turns = Array.isArray(thread?.turns) ? thread.turns : [];
+  for (let turnIndex = turns.length - 1; turnIndex >= 0 && questions.length < limit; turnIndex -= 1) {
+    const items = Array.isArray(turns[turnIndex]?.items) ? turns[turnIndex].items : [];
+    for (let itemIndex = items.length - 1; itemIndex >= 0 && questions.length < limit; itemIndex -= 1) {
+      const item = items[itemIndex];
+      if (item?.type !== 'userMessage') continue;
+      const text = (textFromInputItems(item.content) || item.text || '').trim();
+      if (text) questions.push(text);
+    }
+  }
+  while (questions.length < limit) questions.push('');
+  return questions;
+}
+
 function toolDetails(raw) {
   if (raw.type === 'commandExecution') {
     return {
@@ -98,13 +114,22 @@ function toolDetails(raw) {
     };
   }
   if (raw.type === 'collabAgentToolCall') {
+    const receiverThreadIds = Array.isArray(raw.receiverThreadIds) ? raw.receiverThreadIds.filter(Boolean) : [];
+    const input = raw.arguments || raw.input || {
+      ...(raw.prompt ? { prompt: raw.prompt } : {}),
+      ...(receiverThreadIds.length ? { receiverThreadIds } : {}),
+      ...(raw.agentsStates && Object.keys(raw.agentsStates).length ? { agentsStates: raw.agentsStates } : {})
+    };
     return {
       name: 'Agent',
       title: raw.tool || raw.action || 'Subagent',
-      input: raw.arguments || raw.input || raw,
-      result: raw.error != null ? String(raw.error) : safeJson(raw.result || ''),
+      tool: raw.tool || raw.action || 'subagent',
+      input,
+      result: raw.error != null ? String(raw.error) : raw.result == null ? '' : safeJson(raw.result),
       error: raw.error != null ? String(raw.error) : null,
-      subagentId: raw.receiverThreadId || raw.agentId || raw.id || null
+      subagentId: raw.receiverThreadId || receiverThreadIds[0] || raw.agentId || null,
+      subagentIds: receiverThreadIds,
+      agentsStates: raw.agentsStates || {}
     };
   }
   return {
@@ -135,6 +160,7 @@ class CodexStructuredSession extends EventEmitter {
     this.threadId = options.resume || null;
     this.currentTurnId = null;
     this.currentTurnStartedAt = null;
+    this.threadTurns = new Map();
     this.tokenUsage = null;
     this.permissionMode = normalizePermissionMode(options.permissionMode);
     this.sandboxMode = normalizeSandboxMode(options.sandboxMode);
@@ -186,6 +212,8 @@ class CodexStructuredSession extends EventEmitter {
   }
 
   getControlState() {
+    const activeSubagentCount = Array.from(this.threadTurns.entries())
+      .filter(([threadId, turn]) => threadId !== this.threadId && turn?.status === 'running').length;
     return { permissionMode: this.permissionMode || 'default', sandboxMode: this.sandboxMode || 'default',
       effectivePermissionMode: this.effectivePermissionMode, effectiveSandboxMode: this.effectiveSandboxMode,
       model: this.model, effort: this.effort,
@@ -193,7 +221,7 @@ class CodexStructuredSession extends EventEmitter {
       canAbort: this.presentation === 'structured' && this.status !== 'idle',
       canSwitchToTerminal: this.presentation === 'structured' && this.status === 'idle' && Boolean(this.threadId),
       canSwitchToStructured: this.presentation === 'terminal',
-      pendingPermissionCount: this.pendingPermissions.size, models: this.models };
+      pendingPermissionCount: this.pendingPermissions.size, activeSubagentCount, models: this.models };
   }
 
   getHistory() {
@@ -225,6 +253,7 @@ class CodexStructuredSession extends EventEmitter {
   }
   emitEvent(event) { this.emit('event', event); }
   setStatus(status) { if (this.status !== status) { this.status = status; this.emitEvent({ type: 'state', state: this.getControlState() }); } }
+  emitControlState() { this.emitEvent({ type: 'state', state: this.getControlState() }); }
   recordPermission(request, status, decision) {
     const completed = { ...request, status, decision };
     this.completedPermissions = [...this.completedPermissions.filter(item => item.id !== request.id), completed].slice(-50);
@@ -349,44 +378,75 @@ class CodexStructuredSession extends EventEmitter {
       return;
     }
     if (method === 'turn/started') {
-      this.currentTurnId = params.turn?.id || params.turnId || this.currentTurnId;
-      this.currentTurnStartedAt = Date.now();
-      this.append({ kind: 'turn-start', turnId: this.currentTurnId });
-      this.setStatus('running');
+      const threadId = params.threadId || this.threadId;
+      const turnId = params.turn?.id || params.turnId || null;
+      const startedAt = Number(params.turn?.startedAt || 0);
+      const startedAtMs = startedAt > 0 && startedAt < 100000000000 ? startedAt * 1000 : startedAt || Date.now();
+      if (threadId && turnId) this.threadTurns.set(threadId, { turnId, startedAt: startedAtMs, status: 'running' });
+      if (!threadId || threadId === this.threadId) {
+        this.currentTurnId = turnId || this.currentTurnId;
+        this.currentTurnStartedAt = startedAtMs;
+        this.setStatus('running');
+      } else {
+        this.emitControlState();
+      }
+      this.append({ kind: 'turn-start', threadId, turnId, createdAt: startedAtMs });
       return;
     }
     if (method === 'turn/completed') {
-      const completedTurnId = params.turn?.id || params.turnId || this.currentTurnId;
+      const threadId = params.threadId || this.threadId;
+      const trackedTurn = threadId ? this.threadTurns.get(threadId) : null;
+      const completedTurnId = params.turn?.id || params.turnId || trackedTurn?.turnId || this.currentTurnId;
       const turnStatus = params.turn?.status === 'failed' || params.turn?.error ? 'failed'
         : params.turn?.status === 'interrupted' ? 'cancelled' : 'completed';
-      this.append({ kind: 'turn-end', turnId: completedTurnId, status: turnStatus,
-        durationMs: this.currentTurnStartedAt ? Date.now() - this.currentTurnStartedAt : null });
+      const completedAt = Number(params.turn?.completedAt || 0);
+      const completedAtMs = completedAt > 0 && completedAt < 100000000000 ? completedAt * 1000 : completedAt || Date.now();
+      const startedAtMs = trackedTurn?.startedAt || ((!threadId || threadId === this.threadId) ? this.currentTurnStartedAt : null);
+      const durationMs = Number(params.turn?.durationMs || 0)
+        || (startedAtMs ? Math.max(0, completedAtMs - startedAtMs) : null);
+      this.append({ kind: 'turn-end', threadId, turnId: completedTurnId, status: turnStatus,
+        durationMs, createdAt: completedAtMs });
+      const observedNow = Date.now();
+      const observedCompletedAtMs = Math.abs(observedNow - completedAtMs) < 5000
+        ? Math.max(completedAtMs, observedNow) : completedAtMs;
       for (const item of this.messages.filter(message => message.kind === 'tool'
         && message.turnId === completedTurnId && ['running', 'inProgress'].includes(message.toolStatus))) {
-        this.patch(item.id, { toolStatus: turnStatus === 'failed' ? 'failed' : 'completed' });
+        const toolDurationMs = Number(item.durationMs || 0)
+          || (item.startedAtMs || item.createdAt ? Math.max(1, observedCompletedAtMs - Number(item.startedAtMs || item.createdAt)) : null);
+        const toolStatus = turnStatus === 'failed' ? 'failed' : turnStatus === 'cancelled' ? 'cancelled' : 'completed';
+        this.patch(item.id, { toolStatus,
+          completedAtMs: observedCompletedAtMs, ...(toolDurationMs != null ? { durationMs: toolDurationMs } : {}) });
       }
-      for (const pending of this.pendingPermissions.values()) {
-        this.recordPermission(pending.public, 'denied', 'abort');
-      }
-      this.currentTurnId = null;
-      this.currentTurnStartedAt = null;
-      this.pendingPermissions.clear();
-      if (params.turn?.status === 'failed' || params.turn?.error) {
-        this.append({ kind: 'event', level: 'error', text: params.turn?.error?.message || 'Codex turn failed.' });
+      if (threadId) this.threadTurns.delete(threadId);
+      if (!threadId || threadId === this.threadId) {
+        for (const pending of this.pendingPermissions.values()) {
+          this.recordPermission(pending.public, 'denied', 'abort');
+        }
+        this.currentTurnId = null;
+        this.currentTurnStartedAt = null;
+        this.pendingPermissions.clear();
+        if (params.turn?.status === 'failed' || params.turn?.error) {
+          this.append({ kind: 'event', level: 'error', text: params.turn?.error?.message || 'Codex turn failed.' });
+        }
+        this.setStatus('idle');
+        this.hasUnreadCompletion = true;
+      } else {
+        this.emitControlState();
       }
-      this.setStatus('idle');
-      this.hasUnreadCompletion = true;
       return;
     }
     if (method === 'thread/started' || method === 'thread/resumed') {
       const threadId = params.thread?.id || params.threadId;
-      if (threadId) { this.threadId = threadId; this.emitEvent({ type: 'state', state: this.getControlState() }); }
+      if (threadId && !this.threadId) { this.threadId = threadId; this.emitControlState(); }
       return;
     }
     if (method === 'thread/status/changed') {
+      const threadId = params.threadId || this.threadId;
       const status = params.status?.type || params.status;
-      if (status === 'idle') this.setStatus('idle');
-      if (status === 'active') this.setStatus('running');
+      if (!threadId || threadId === this.threadId) {
+        if (status === 'idle' && !this.currentTurnId) this.setStatus('idle');
+        if (status === 'active') this.setStatus('running');
+      }
       return;
     }
     if (method === 'thread/settings/updated') {
@@ -430,11 +490,16 @@ class CodexStructuredSession extends EventEmitter {
     }
     if (method.startsWith('item/')) {
       const inferredStatus = method === 'item/completed' ? 'completed' : method === 'item/started' ? 'running' : null;
-      this.applyProviderItem(params.item || params, inferredStatus);
+      this.applyProviderItem(params.item || params, inferredStatus, {
+        threadId: params.threadId || null,
+        turnId: params.turnId || null,
+        startedAtMs: Number(params.startedAtMs || 0) || null,
+        completedAtMs: Number(params.completedAtMs || 0) || null
+      });
     }
   }
 
-  applyProviderItem(raw, inferredStatus = null) {
+  applyProviderItem(raw, inferredStatus = null, context = {}) {
     if (!raw || typeof raw !== 'object') return;
     const providerId = String(raw.id || '');
     const existing = providerId && this.messages.find(item => item.providerId === providerId);
@@ -443,10 +508,25 @@ class CodexStructuredSession extends EventEmitter {
     if (!kind) return;
     const text = kind === 'user' ? textFromInputItems(raw.content) : kind === 'assistant' ? String(raw.text || '')
       : kind === 'reasoning' ? (raw.text || (Array.isArray(raw.summary) ? raw.summary.join('\n') : Array.isArray(raw.content) ? raw.content.join('\n') : '')) : '';
-    const inferredToolStatus = inferredStatus === 'completed' && ['failed', 'declined'].includes(raw.status)
-      ? raw.status : inferredStatus;
-    const patch = kind === 'tool' ? { ...toolDetails(raw), turnId: raw.turnId || this.currentTurnId,
-      toolStatus: inferredToolStatus || raw.status || 'running' } : { text, turnId: raw.turnId || this.currentTurnId, streaming: false };
+    const inferredToolStatus = existing?.toolStatus === 'cancelled' ? 'cancelled'
+      : inferredStatus === 'completed' && ['failed', 'declined'].includes(raw.status) ? raw.status : inferredStatus;
+    const threadId = raw.threadId || context.threadId || null;
+    const trackedTurnId = threadId ? this.threadTurns.get(threadId)?.turnId : null;
+    const turnId = raw.turnId || context.turnId || trackedTurnId || this.currentTurnId;
+    const existingStartedAtMs = existing?.startedAtMs || existing?.createdAt || null;
+    const startedAtMs = context.startedAtMs || raw.startedAtMs || existingStartedAtMs;
+    const completedAtMs = context.completedAtMs || raw.completedAtMs || null;
+    const durationMs = Number(raw.durationMs || 0)
+      || (completedAtMs && startedAtMs && completedAtMs >= startedAtMs ? completedAtMs - startedAtMs : null)
+      || Number(existing?.durationMs || 0) || null;
+    const timing = {
+      ...(startedAtMs ? { startedAtMs } : {}),
+      ...(completedAtMs ? { completedAtMs } : {}),
+      ...(durationMs != null ? { durationMs } : {})
+    };
+    const patch = kind === 'tool' ? { ...toolDetails(raw), threadId, turnId,
+      ...timing, toolStatus: inferredToolStatus || raw.status || 'running' }
+      : { text, threadId, turnId, streaming: false };
     if (existing) {
       this.patch(existing.id, patch);
     } else if (kind === 'user') {
@@ -454,7 +534,7 @@ class CodexStructuredSession extends EventEmitter {
       if (local) this.patch(local.id, { providerId, ...patch });
       else this.append({ kind, providerId, ...patch });
     } else {
-      this.append({ kind, providerId, ...patch });
+      this.append({ kind, providerId, ...(startedAtMs ? { createdAt: startedAtMs } : {}), ...patch });
     }
   }
 
@@ -501,14 +581,28 @@ class CodexStructuredSession extends EventEmitter {
       archived: false,
       cwd: this.workingDir
     });
-    return (result?.data || []).filter(item => !item.parentThreadId).map(item => ({
-      id: item.id,
-      sessionId: item.sessionId || item.id,
-      preview: item.preview || item.name || '',
-      updatedAt: Number(item.updatedAt || item.createdAt || 0) * 1000,
-      cwd: item.cwd || '',
-      current: item.id === this.threadId
-    }));
+    const threads = (result?.data || []).filter(item => !item.parentThreadId);
+    const items = [];
+    for (const item of threads) {
+      let questions = [];
+      try {
+        const history = await this.request('thread/read', { threadId: item.id, includeTurns: true });
+        questions = recentUserQuestions(history?.thread);
+      } catch (error) {
+        this.logger.debugInfo?.(`[codex-app-server] unable to read resume preview for ${item.id}: ${error.message}`);
+      }
+      if (!questions[0]) questions[0] = item.preview || '';
+      if (questions.length < 2) questions.push('');
+      items.push({
+        id: item.id,
+        sessionId: item.sessionId || item.id,
+        questions: questions.slice(0, 2),
+        updatedAt: Number(item.updatedAt || item.createdAt || 0) * 1000,
+        cwd: item.cwd || '',
+        current: item.id === this.threadId
+      });
+    }
+    return items;
   }
 
   contextStatus() {
@@ -686,9 +780,16 @@ class CodexStructuredSession extends EventEmitter {
       this.recordPermission(pending.public, 'denied', 'abort');
     }
     this.pendingPermissions.clear();
-    if (this.threadId && this.currentTurnId) {
-      this.request('turn/interrupt', { threadId: this.threadId, turnId: this.currentTurnId }).catch(error => {
-        this.logger.debugInfo?.(`[codex-app-server] turn/interrupt failed: ${error.message}`);
+    const targets = Array.from(this.threadTurns.entries())
+      .filter(([, turn]) => turn?.turnId && turn.status === 'running')
+      .map(([threadId, turn]) => ({ threadId, turnId: turn.turnId }));
+    if (this.threadId && this.currentTurnId
+      && !targets.some(target => target.threadId === this.threadId && target.turnId === this.currentTurnId)) {
+      targets.push({ threadId: this.threadId, turnId: this.currentTurnId });
+    }
+    for (const target of targets) {
+      this.request('turn/interrupt', target).catch(error => {
+        this.logger.debugInfo?.(`[codex-app-server] turn/interrupt failed for ${target.threadId}/${target.turnId}: ${error.message}`);
       });
     }
     this.append({ kind: 'event', level: 'info', text: reason });
@@ -711,12 +812,17 @@ class CodexStructuredSession extends EventEmitter {
     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.model = history?.thread?.model || this.model;
-    this.effort = history?.thread?.reasoningEffort || history?.thread?.reasoning_effort || this.effort;
-    this.tokenUsage = history?.thread?.tokenUsage || history?.thread?.token_usage || this.tokenUsage;
+    this.restoreThreadHistory(history?.thread, `Resumed Codex thread ${this.threadId}`);
+    return true;
+  }
+
+  restoreThreadHistory(thread, eventText = '') {
+    this.model = thread?.model || this.model;
+    this.effort = thread?.reasoningEffort || thread?.reasoning_effort || this.effort;
+    this.tokenUsage = thread?.tokenUsage || thread?.token_usage || this.tokenUsage;
     this.messages = [];
     this.completedPermissions = [];
-    for (const turn of history?.thread?.turns || []) {
+    for (const turn of thread?.turns || []) {
       const status = turn.status === 'failed' ? 'failed' : turn.status === 'interrupted' ? 'cancelled' : 'completed';
       const startedAt = Number(turn.startedAt || turn.createdAt || 0);
       const completedAt = Number(turn.completedAt || turn.updatedAt || 0);
@@ -730,10 +836,29 @@ class CodexStructuredSession extends EventEmitter {
       this.append({ kind: 'turn-end', turnId: turn.id, status, durationMs,
         ...(completedAtMs ? { createdAt: completedAtMs } : {}) });
     }
-    this.append({ kind: 'event', level: 'info', text: `Resumed Codex thread ${this.threadId}` });
+    if (eventText) this.append({ kind: 'event', level: 'info', text: eventText });
     this.emitEvent({ type: 'history-reset', messages: this.messages });
     this.emitEvent({ type: 'state', state: this.getControlState() });
-    return true;
+  }
+
+  async forkFrom(threadId) {
+    const sourceThreadId = String(threadId || '').trim();
+    if (!sourceThreadId || this.presentation !== 'structured' || this.status !== 'idle') return false;
+    await this.ensureProcess();
+    const params = { threadId: sourceThreadId, cwd: this.workingDir, ephemeral: false, threadSource: null };
+    if (this.hasModelOverride) params.model = this.model;
+    if (this.permissionMode) params.approvalPolicy = this.permissionMode;
+    if (this.sandboxMode) params.sandbox = this.sandboxMode;
+    const result = await this.request('thread/fork', params);
+    const forkedThread = result?.thread;
+    if (!forkedThread?.id) throw new Error('Codex did not return a forked thread');
+    this.threadId = forkedThread.id;
+    this.model = result.model || forkedThread.model || this.model;
+    this.effort = result.reasoningEffort || forkedThread.reasoningEffort || forkedThread.reasoning_effort || this.effort;
+    this.effectivePermissionMode = result.approvalPolicy || this.effectivePermissionMode;
+    this.effectiveSandboxMode = sandboxModeFromPolicy(result.sandbox) || this.effectiveSandboxMode;
+    this.restoreThreadHistory(forkedThread, `Forked from Codex thread ${sourceThreadId}`);
+    return { threadId: this.threadId };
   }
 
   async switchToTerminal() {

package/lib/commands/web.js

@@ -379,6 +379,14 @@ async function webCommand(options) {
     } catch (e) { res.status(400).json({ error: e.message }); }
   });
 
+  app.post('/api/sessions/:id/codex-fork', async (req, res) => {
+    try {
+      const session = await sessionManager.forkCodex(req.params.id, req.body && req.body.threadId);
+      if (!session) return res.status(404).json({ error: 'Codex session not found' });
+      res.json({ success: true, id: session.id, name: session.name, threadId: session.threadId });
+    } catch (e) { res.status(e.statusCode || 400).json({ error: e.message }); }
+  });
+
   app.post('/api/sessions/:id/codex-presentation', async (req, res) => {
     const presentation = req.body && req.body.presentation;
     if (!['terminal', 'structured'].includes(presentation)) return res.status(400).json({ error: 'Invalid presentation' });

package/lib/session/session-manager.js

@@ -438,6 +438,45 @@ class SessionManager extends EventEmitter {
     return session && session.kind === 'codex-structured' ? session.resume(threadId) : false;
   }
 
+  async forkCodex(id, threadId) {
+    const source = this.get(id);
+    if (!source || source.kind !== 'codex-structured') return null;
+    if (source.presentation !== 'structured' || source.status !== 'idle') {
+      const error = new Error('Codex must be idle in chat mode before forking');
+      error.statusCode = 409;
+      throw error;
+    }
+    const sourceThreadId = String(threadId || source.threadId || '').trim();
+    if (!sourceThreadId) {
+      const error = new Error('Choose a Codex thread to fork');
+      error.statusCode = 400;
+      throw error;
+    }
+
+    const target = this.createCodexStructuredSession({
+      tool: source.tool,
+      workingDirectory: this.getSessionWorkingDirectory(source),
+      name: `${source.name} Fork`,
+      codexOptions: {
+        ...(source.hasModelOverride && source.model ? { model: source.model } : {}),
+        ...(source.hasEffortOverride && source.effort ? { effort: source.effort } : {}),
+        ...(source.permissionMode ? { permissionMode: source.permissionMode } : {}),
+        ...(source.sandboxMode ? { sandboxMode: source.sandboxMode } : {})
+      }
+    });
+    target.parentSessionId = source.id;
+    target.forkedFromThreadId = sourceThreadId;
+    try {
+      const result = await target.forkFrom(sourceThreadId);
+      if (!result) throw new Error('Unable to fork the selected Codex thread');
+      source.append({ kind: 'event', level: 'info', text: `Forked a new session: ${target.name}` });
+      return target;
+    } catch (error) {
+      this.kill(target.id);
+      throw error;
+    }
+  }
+
   listCodexResumeThreads(id) {
     const session = this.get(id);
     if (!session || session.kind !== 'codex-structured') return null;

package/lib/web/index.html

@@ -116,6 +116,7 @@
         .codex-tool-title { flex: 0 1 auto; min-width: 0; color: #f5f5f7; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
         .codex-tool-command { flex: 1; min-width: 0; color: #a9a9b0; font: 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
         .codex-tool-state { flex: 0 0 auto; color: #8e8e93; font-size: 11px; }
+        .codex-tool-duration { flex: 0 0 auto; color: #6f6f76; font-size: 10px; font-variant-numeric: tabular-nums; }
         .codex-tool-state.running::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 5px; border: 1.5px solid #8e8e93; border-top-color: transparent; border-radius: 50%; animation: codex-spin .8s linear infinite; vertical-align: -1px; }
         .codex-tool.error { border-color: rgba(255,59,48,.38); background: rgba(255,59,48,.07); }
         .codex-tool-body { border-top: 1px solid rgba(255,255,255,.08); padding: 9px 10px; }
@@ -142,16 +143,18 @@
         .codex-inline-permission .claude-permission-actions { margin-top: 8px; }
         @keyframes codex-spin { to { transform: rotate(360deg); } }
         #codex-control-panel { display: none; width: min(100%, var(--control-content-max)); margin: 0 auto; padding: 8px 14px 10px; border-bottom: 1px solid #222; background: #121212; box-sizing: border-box; }
-        .codex-control-row { display: grid; grid-template-columns: repeat(6, minmax(0, 116px)); grid-template-rows: auto; justify-content: center; gap: clamp(2px, .8vw, 7px); align-items: center; white-space: nowrap; }
-        .codex-control-row > * { width: 100%; min-width: 0; overflow: hidden; }
-        .codex-control-row .claude-ctrl-btn, .codex-control-row .codex-select-label { padding-left: clamp(2px, 1vw, 10px); padding-right: clamp(2px, 1vw, 10px); font-size: clamp(8px, 2.2vw, 11px); text-overflow: ellipsis; overflow: hidden; }
+        .codex-control-rail { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
+        .codex-control-rail::-webkit-scrollbar { display: none; }
+        .codex-control-page { flex: 0 0 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 116px)); grid-template-rows: auto; justify-content: center; gap: clamp(2px, .8vw, 7px); align-items: center; white-space: nowrap; scroll-snap-align: start; box-sizing: border-box; }
+        .codex-control-page > * { width: 100%; min-width: 0; overflow: hidden; }
+        .codex-control-page .claude-ctrl-btn, .codex-control-page .codex-select-label { padding-left: clamp(2px, 1vw, 10px); padding-right: clamp(2px, 1vw, 10px); font-size: clamp(8px, 2.2vw, 11px); text-overflow: ellipsis; overflow: hidden; }
         .codex-select-control { position: relative; display: block; min-width: 0; height: 32px; }
         .codex-select-label { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.08); color: #f5f5f7; font-size: 11px; font-weight: 800; white-space: nowrap; }
         .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 { 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 { display: block; }
+        #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 { 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; }
@@ -160,7 +163,7 @@
         .codex-picker-option.selected { background: rgba(0,122,255,.18); color: #fff; }
         #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 { max-height: min(280px, 38dvh); overflow-y: auto; }
+        #codex-resume-panel, #codex-fork-panel { max-height: min(280px, 38dvh); overflow-y: auto; }
         .claude-context-size-badge { position: sticky; top: 0; z-index: 2; width: max-content; max-width: 100%; margin: 0 0 8px auto; border: 1px solid rgba(255,255,255,0.1); background: rgba(28,28,30,0.94); border-radius: 999px; padding: 4px 9px; color: #d1d5db; font-size: 11px; font-weight: 800; box-shadow: 0 8px 18px rgba(0,0,0,0.24); }
         .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.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; }
@@ -257,6 +260,7 @@
         .claude-resume-item:last-child { border-bottom: 0; }
         .claude-resume-item:active { background: rgba(255,255,255,0.08); }
         .claude-resume-title { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 800; }
+        .codex-resume-question-secondary { min-height: 1.35em; color: var(--text-dim); font-size: 11px; margin-top: 3px; overflow-wrap: anywhere; }
         .claude-resume-meta { color: var(--text-dim); font-size: 11px; margin-top: 3px; overflow-wrap: anywhere; }
         #terminal .xterm, #terminal .xterm-viewport, #terminal .xterm-screen, #terminal .xterm-rows, #terminal .xterm-rows span { user-select: text !important; -webkit-user-select: text !important; -webkit-touch-callout: default; touch-action: pan-y; }
         #terminal .xterm-viewport { overflow-anchor: none; }
@@ -319,8 +323,8 @@
             #nav-bar > div:last-child .icon-btn { min-width: 34px; min-height: 30px; padding: 5px 7px !important; }
             #input-row { padding-left: 10px; padding-right: 10px; }
             #codex-control-panel { padding-left: 8px; padding-right: 8px; }
-            .codex-control-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
-            .codex-control-row .claude-ctrl-btn { height: 36px; padding-left: 4px; padding-right: 4px; }
+            .codex-control-page { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+            .codex-control-page .claude-ctrl-btn { height: 36px; padding-left: 4px; padding-right: 4px; }
             .codex-select-control { height: 36px; }
             #codex-chat-container { padding: 10px 10px calc(22px + env(safe-area-inset-bottom)); }
             .codex-message.user { max-width: 94%; }
@@ -441,27 +445,33 @@
                     <div id="claude-resume-panel"></div>
                 </div>
                 <div id="codex-control-panel">
-                    <div class="codex-control-row">
-                        <label class="codex-select-control" title="Sandbox mode">
-                            <span class="codex-select-label" aria-hidden="true">Sandbox</span>
-                            <select id="codex-sandbox-select" class="codex-select" aria-label="Sandbox mode" onchange="updateCodexSettingsFromControls()">
-                                <option value="default">Default</option><option value="read-only">Read only</option><option value="workspace-write">Workspace write</option><option value="danger-full-access">Full access</option>
-                            </select>
-                        </label>
-                        <label class="codex-select-control" title="Approval policy">
-                            <span class="codex-select-label" aria-hidden="true">Ask</span>
-                            <select id="codex-permission-select" class="codex-select" aria-label="Approval policy" onchange="updateCodexSettingsFromControls()">
-                                <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-model-btn" class="claude-ctrl-btn" onclick="toggleCodexModelPanel()" title="Model and effort">Model</button>
-                        <button id="codex-status-btn" class="claude-ctrl-btn" onclick="requestCodexStatus()" title="Show Codex account, limits, and context status">Status</button>
-                        <button id="codex-abort-btn" class="claude-ctrl-btn danger" onclick="abortCodexSession()" title="Abort current Codex turn">Abort</button>
-                        <button id="codex-resume-btn" class="claude-ctrl-btn primary" onclick="toggleCodexResumePanel()" title="Resume a Codex thread">Resume</button>
+                    <div id="codex-control-rail" class="codex-control-rail">
+                        <div class="codex-control-page">
+                            <button id="codex-model-btn" class="claude-ctrl-btn" onclick="toggleCodexModelPanel()" title="Model and effort">Model</button>
+                            <button id="codex-status-btn" class="claude-ctrl-btn" onclick="requestCodexStatus()" title="Show Codex account, limits, and context status">Status</button>
+                            <button id="codex-abort-btn" class="claude-ctrl-btn danger" onclick="abortCodexSession()" title="Abort current Codex turn">Abort</button>
+                            <button id="codex-resume-btn" class="claude-ctrl-btn primary" onclick="toggleCodexResumePanel()" title="Resume a Codex thread">Resume</button>
+                            <button id="codex-fork-btn" class="claude-ctrl-btn primary" onclick="toggleCodexForkPanel()" title="Fork a Codex thread into a new Glad session">Fork</button>
+                        </div>
+                        <div class="codex-control-page">
+                            <label class="codex-select-control" title="Sandbox mode">
+                                <span class="codex-select-label" aria-hidden="true">Sandbox</span>
+                                <select id="codex-sandbox-select" class="codex-select" aria-label="Sandbox mode" onchange="updateCodexSettingsFromControls()">
+                                    <option value="default">Default</option><option value="read-only">Read only</option><option value="workspace-write">Workspace write</option><option value="danger-full-access">Full access</option>
+                                </select>
+                            </label>
+                            <label class="codex-select-control" title="Approval policy">
+                                <span class="codex-select-label" aria-hidden="true">Ask</span>
+                                <select id="codex-permission-select" class="codex-select" aria-label="Approval policy" onchange="updateCodexSettingsFromControls()">
+                                    <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>
+                        </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>
                 <div id="timed-send-panel">
                     <div class="timed-row">
@@ -658,6 +668,8 @@
         let codexModelPanelOpen = false;
         let codexModelCandidate = null;
         let codexResumePanelOpen = false;
+        let codexForkPanelOpen = false;
+        let codexRenderFrame = null;
         const modifiers = { ctrl: false };
 
         function log(msg) {
@@ -2070,6 +2082,16 @@
             if (status === 'completed') return item.exitCode && item.exitCode !== 0 ? 'failed' : 'completed';
             return status;
         }
+        function formatCodexDuration(durationMs) {
+            const value = Number(durationMs || 0);
+            if (!(value > 0)) return '';
+            if (value < 1000) return `${Math.round(value)}ms`;
+            const seconds = value / 1000;
+            if (seconds < 10) return `${seconds.toFixed(1).replace(/\.0$/, '')}s`;
+            if (seconds < 60) return `${Math.round(seconds)}s`;
+            const minutes = Math.floor(seconds / 60);
+            return `${minutes}m ${Math.round(seconds % 60)}s`;
+        }
         function renderCodexDiff(diff) {
             return `<div class="codex-diff">${String(diff || '').split('\n').map(line => {
                 const type = line.startsWith('+++') || line.startsWith('---') ? 'hunk' : line.startsWith('+') ? 'add' : line.startsWith('-') ? 'del' : line.startsWith('@@') ? 'hunk' : '';
@@ -2153,27 +2175,72 @@
             const command = item.name === 'CodexBash' ? item.command : item.title || item.tool || '';
             const icon = item.name === 'CodexBash' ? '>_' : item.name === 'McpTool' ? 'MCP' : item.name === 'Agent' ? 'A' : '•';
             const title = item.name === 'CodexBash' ? 'Command' : item.title || item.name || 'Tool';
-            const result = item.result || (item.name === 'McpTool' || item.name === 'Agent' ? codexJson(item.input) : '');
-            return `<details class="codex-tool${isError ? ' error' : ''}"><summary class="codex-tool-header"><span class="codex-tool-icon">${escapeHtml(icon)}</span><span class="codex-tool-title">${escapeHtml(title)}</span>${command && command !== title ? `<span class="codex-tool-command">${escapeHtml(command)}</span>` : '<span class="codex-tool-command"></span>'}<span class="codex-tool-state${runningClass}">${escapeHtml(status === 'completed' ? '' : status)}</span></summary>${result ? `<div class="codex-tool-body"><pre class="codex-tool-code">${escapeHtml(result)}</pre></div>` : ''}${permission ? renderCodexPermission(permission, true) : ''}</details>`;
+            const hasInput = item.input && typeof item.input === 'object' && Object.keys(item.input).length > 0;
+            const result = item.result || ((item.name === 'McpTool' || item.name === 'Agent') && hasInput ? codexJson(item.input) : '');
+            const duration = status === 'running' ? '' : formatCodexDuration(item.durationMs);
+            return `<details class="codex-tool${isError ? ' error' : ''}" data-codex-key="tool-${escapeHtml(item.id || item.providerId || '')}"><summary class="codex-tool-header"><span class="codex-tool-icon">${escapeHtml(icon)}</span><span class="codex-tool-title">${escapeHtml(title)}</span>${command && command !== title ? `<span class="codex-tool-command">${escapeHtml(command)}</span>` : '<span class="codex-tool-command"></span>'}${duration ? `<span class="codex-tool-duration">${escapeHtml(duration)}</span>` : ''}<span class="codex-tool-state${runningClass}">${escapeHtml(status === 'completed' ? '' : status)}</span></summary>${result ? `<div class="codex-tool-body"><pre class="codex-tool-code">${escapeHtml(result)}</pre></div>` : ''}${permission ? renderCodexPermission(permission, true) : ''}</details>`;
         }
         function renderCodexToolGroup(items, permissionById, usedPermissions, turnEnd = null) {
             const running = items.some(item => codexToolStatus(item) === 'running');
             const failed = items.some(item => codexToolStatus(item) === 'failed' || item.error);
-            const startedAt = Math.min(...items.map(item => Number(item.createdAt || Date.now())));
+            const startedAt = Math.min(...items.map(item => Number(item.startedAtMs || item.createdAt || Date.now())));
+            const itemCompletedAt = Math.max(...items.map(item => Number(item.completedAtMs || 0)));
             const storedDuration = Number(turnEnd?.durationMs || 0);
             const completedAt = Number(turnEnd?.createdAt || 0);
-            const durationMs = storedDuration > 0 ? storedDuration
+            const durationMs = itemCompletedAt >= startedAt ? itemCompletedAt - startedAt : storedDuration > 0 ? storedDuration
                 : (!running && completedAt >= startedAt ? completedAt - startedAt : 0);
-            const seconds = durationMs > 0 ? Math.max(1, Math.round(durationMs / 1000)) : null;
+            const duration = formatCodexDuration(durationMs);
             const tools = items.map(item => {
                 const permission = permissionById.get(String(item.providerId || ''));
                 if (permission) usedPermissions.add(permission.id);
                 return renderCodexTool(item, permission);
             }).join('');
-            const label = running ? 'Working' : failed ? 'Work finished with errors' : seconds ? `Worked for ${seconds}s` : 'Worked';
-            return `<details class="codex-work-group"${running ? ' open' : ''}><summary>${label} · ${items.length} tools</summary><div class="codex-work-group-body">${tools}</div></details>`;
+            const label = running ? 'Working' : failed ? 'Work finished with errors' : duration ? `Worked for ${duration}` : 'Worked';
+            const key = items.map(item => item.id || item.providerId || '').join('-');
+            return `<details class="codex-work-group" data-codex-key="group-${escapeHtml(key)}"${running ? ' open' : ''}><summary>${label} · ${items.length} tools</summary><div class="codex-work-group-body">${tools}</div></details>`;
+        }
+        function syncCodexDom(current, next) {
+            if (!current || !next) return;
+            if (current.nodeType !== next.nodeType || current.nodeName !== next.nodeName) {
+                current.replaceWith(next.cloneNode(true));
+                return;
+            }
+            if (current.nodeType === Node.TEXT_NODE) {
+                if (current.nodeValue !== next.nodeValue) current.nodeValue = next.nodeValue;
+                return;
+            }
+            const currentKey = current.getAttribute?.('data-codex-key');
+            const nextKey = next.getAttribute?.('data-codex-key');
+            if (currentKey && nextKey && currentKey !== nextKey) {
+                current.replaceWith(next.cloneNode(true));
+                return;
+            }
+            const preserveOpen = current.tagName === 'DETAILS' && currentKey === nextKey;
+            const wasOpen = preserveOpen ? current.open : false;
+            for (const attribute of Array.from(current.attributes || [])) {
+                if (!next.hasAttribute(attribute.name) && !(preserveOpen && attribute.name === 'open')) current.removeAttribute(attribute.name);
+            }
+            for (const attribute of Array.from(next.attributes || [])) {
+                if (!(preserveOpen && attribute.name === 'open') && current.getAttribute(attribute.name) !== attribute.value) {
+                    current.setAttribute(attribute.name, attribute.value);
+                }
+            }
+            if (preserveOpen) current.open = wasOpen;
+            const currentChildren = Array.from(current.childNodes);
+            const nextChildren = Array.from(next.childNodes);
+            const shared = Math.min(currentChildren.length, nextChildren.length);
+            for (let i = 0; i < shared; i++) syncCodexDom(currentChildren[i], nextChildren[i]);
+            for (let i = current.childNodes.length - 1; i >= nextChildren.length; i--) current.childNodes[i].remove();
+            for (let i = shared; i < nextChildren.length; i++) current.appendChild(nextChildren[i].cloneNode(true));
         }
         function renderCodexChat() {
+            if (codexRenderFrame != null) return;
+            codexRenderFrame = requestAnimationFrame(() => {
+                codexRenderFrame = null;
+                commitCodexChatRender();
+            });
+        }
+        function commitCodexChatRender() {
             const container = document.getElementById('codex-chat-container');
             if (!container) return;
             const parts = [];
@@ -2197,16 +2264,20 @@
                     }
                     continue;
                 }
-                if (item.kind === 'assistant') parts.push(`<div class="codex-message assistant claude-md">${renderMarkdown(item.text || '')}</div>`);
-                else if (item.kind === 'user') parts.push(`<div class="codex-message user claude-md">${renderMarkdown(item.text || '')}</div>`);
+                if (item.kind === 'assistant') parts.push(`<div class="codex-message assistant claude-md" data-codex-key="message-${escapeHtml(item.id || '')}">${renderMarkdown(item.text || '')}</div>`);
+                else if (item.kind === 'user') parts.push(`<div class="codex-message user claude-md" data-codex-key="message-${escapeHtml(item.id || '')}">${renderMarkdown(item.text || '')}</div>`);
                 else if (item.kind === 'status') parts.push(renderCodexStatus(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 working = codexState.status === 'running'
-                ? '<div class="codex-working-indicator" role="status" aria-label="Codex is working" title="Codex is working"></div>' : '';
-            container.innerHTML = `<div class="codex-conversation">${working}${parts.join('') || '<div class="codex-message event">Send a message to start Codex.</div>'}</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>`;
+            const next = template.content.firstElementChild;
+            const current = container.firstElementChild;
+            if (!current) container.appendChild(next);
+            else syncCodexDom(current, next);
             requestAnimationFrame(() => { container.scrollTop = container.scrollHeight; });
         }
 
@@ -2235,6 +2306,8 @@
             if (modelButton) modelButton.textContent = 'Model';
             const abort = document.getElementById('codex-abort-btn');
             if (abort) abort.disabled = !codexState.canAbort;
+            const fork = document.getElementById('codex-fork-btn');
+            if (fork) fork.disabled = !(codexState.presentation === 'structured' && codexState.status === 'idle' && codexState.threadId);
             const terminal = document.getElementById('codex-terminal-switch');
             if (terminal) { terminal.textContent = codexState.presentation === 'terminal' ? 'CHAT' : 'TERM'; terminal.disabled = codexState.presentation === 'structured' && !codexState.canSwitchToTerminal; terminal.title = codexState.presentation === 'terminal' ? 'Return to Codex chat' : 'Switch to Codex terminal'; }
             renderCodexStateBar();
@@ -2247,8 +2320,10 @@
             const el = document.getElementById('codex-state-bar');
             if (!el) return;
             const pending = Number(codexState.pendingPermissionCount || codexPendingPermissions.filter(item => item.status === 'pending').length) || 0;
+            const subagents = Number(codexState.activeSubagentCount || 0) || 0;
             const parts = [];
             if (pending || codexState.status === 'waiting_approval') parts.push(`<span class="claude-state-pill warn">${pending || 1} approval${pending === 1 ? '' : 's'}</span>`);
+            if (subagents) parts.push(`<span class="claude-state-pill">${subagents} subagent${subagents === 1 ? '' : 's'} running</span>`);
             el.innerHTML = parts.join('');
             el.style.display = parts.length ? 'flex' : 'none';
         }
@@ -2256,8 +2331,10 @@
         function toggleCodexModelPanel() {
             codexModelPanelOpen = !codexModelPanelOpen;
             codexResumePanelOpen = false;
+            codexForkPanelOpen = 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');
             renderCodexModelPanel();
             updateTerminalControlsHeight();
         }
@@ -2306,19 +2383,42 @@
         async function toggleCodexResumePanel() {
             codexResumePanelOpen = !codexResumePanelOpen;
             codexModelPanelOpen = false;
+            codexForkPanelOpen = false;
             document.getElementById('codex-model-panel').classList.remove('active');
+            document.getElementById('codex-fork-panel').classList.remove('active');
             const panel = document.getElementById('codex-resume-panel');
             panel.classList.toggle('active', codexResumePanelOpen);
             updateTerminalControlsHeight();
             if (!codexResumePanelOpen) return;
+            await loadCodexThreadPanel(panel, 'resume');
+        }
+        async function toggleCodexForkPanel() {
+            if (!(codexState.presentation === 'structured' && codexState.status === 'idle' && codexState.threadId)) return;
+            codexForkPanelOpen = !codexForkPanelOpen;
+            codexModelPanelOpen = false;
+            codexResumePanelOpen = false;
+            document.getElementById('codex-model-panel').classList.remove('active');
+            document.getElementById('codex-resume-panel').classList.remove('active');
+            const panel = document.getElementById('codex-fork-panel');
+            panel.classList.toggle('active', codexForkPanelOpen);
+            updateTerminalControlsHeight();
+            if (!codexForkPanelOpen) return;
+            await loadCodexThreadPanel(panel, 'fork');
+        }
+        async function loadCodexThreadPanel(panel, action) {
             panel.innerHTML = '<div class="claude-resume-meta" style="padding:12px;">Loading sessions...</div>';
             try {
                 const res = await fetchWithTimeout(`/api/sessions/${activeSessionId}/codex-resume-threads`, {}, 30000);
                 const data = await res.json();
                 if (!res.ok || !data.success) throw new Error(data.error || 'Failed to load Codex sessions');
                 const items = data.items || [];
-                panel.innerHTML = items.length ? items.map(item => `<button class="claude-resume-item" onclick="selectCodexResumeThread(decodePathValue('${encodePathValue(item.id)}'))"><div class="claude-resume-title"><span>${escapeHtml((item.preview || 'Codex session').slice(0, 48))}${item.current ? ' · current' : ''}</span><span>${escapeHtml(item.updatedAt ? new Date(item.updatedAt).toLocaleString() : '')}</span></div><div class="claude-resume-meta">${escapeHtml(item.id.slice(0, 12))}</div></button>`).join('') : '<div class="claude-resume-meta" style="padding:12px;">No Codex sessions found for this folder.</div>';
+                panel.innerHTML = items.length ? items.map(item => {
+                    const questions = Array.isArray(item.questions) ? item.questions : [];
+                    const handler = action === 'fork' ? 'selectCodexForkThread' : 'selectCodexResumeThread';
+                    return `<button class="claude-resume-item" onclick="${handler}(decodePathValue('${encodePathValue(item.id)}'))"><div class="claude-resume-title"><span>${escapeHtml((questions[0] || 'Codex session').slice(0, 120))}${item.current ? ' · current' : ''}</span><span>${escapeHtml(item.updatedAt ? new Date(item.updatedAt).toLocaleString() : '')}</span></div><div class="codex-resume-question-secondary">${escapeHtml((questions[1] || '').slice(0, 120))}</div></button>`;
+                }).join('') : '<div class="claude-resume-meta" style="padding:12px;">No Codex sessions found for this folder.</div>';
             } catch (e) { panel.innerHTML = `<div class="claude-resume-meta" style="padding:12px;color:#ff6b61;">${escapeHtml(e.message)}</div>`; }
+            updateTerminalControlsHeight();
         }
         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);
@@ -2327,6 +2427,23 @@
             document.getElementById('codex-resume-panel').classList.remove('active');
             updateTerminalControlsHeight();
         }
+        async function selectCodexForkThread(threadId) {
+            const panel = document.getElementById('codex-fork-panel');
+            panel.innerHTML = '<div class="claude-resume-meta" style="padding:12px;">Forking into a new session...</div>';
+            updateTerminalControlsHeight();
+            const res = await fetchWithTimeout(`/api/sessions/${activeSessionId}/codex-fork`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ threadId }) }, 60000);
+            const data = await res.json();
+            if (!res.ok || !data.success) {
+                panel.innerHTML = `<div class="claude-resume-meta" style="padding:12px;color:#ff6b61;">${escapeHtml(data.error || 'Unable to fork Codex thread')}</div>`;
+                updateTerminalControlsHeight();
+                return;
+            }
+            codexForkPanelOpen = false;
+            panel.classList.remove('active');
+            panel.innerHTML = '';
+            updateTerminalControlsHeight();
+            refreshSessionsNow();
+        }
         async function toggleCodexPresentation() {
             const presentation = codexState.presentation === 'terminal' ? 'structured' : 'terminal';
             const res = await fetchWithTimeout(`/api/sessions/${activeSessionId}/codex-presentation`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ presentation }) }, 30000);
@@ -2461,8 +2578,11 @@
             codexModelPanelOpen = false;
             codexModelCandidate = null;
             codexResumePanelOpen = false;
+            codexForkPanelOpen = 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-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, canSwitchToTerminal: false, canSwitchToStructured: false };
             setClaudeModeEnabled(false);
             applyCodexState(codexState);

package/package.json

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