glad-web 1.0.43 → 1.0.44

package/lib/commands/web.js

@@ -475,7 +475,9 @@ async function webCommand(options) {
   const webAssets = [
     'gitgraph.js',
     'styles.css',
+    'theme.js',
     'core.js',
+    'layout.js',
     'notifications.js',
     'claude.js',
     'schedules.js',

package/lib/web/claude.js

@@ -9,13 +9,23 @@
         function setClaudeModeEnabled(enabled) {
             const codexChat = isCodexSession() && codexState.presentation === 'structured';
             const structured = enabled || codexChat;
+            const actionRail = enabled
+                ? document.querySelector('.claude-control-rail')
+                : codexChat
+                    ? document.getElementById('codex-control-rail')
+                    : document.getElementById('shortcut-rail');
+            const attachButton = document.getElementById('attach-image-btn');
+            const scheduleButton = document.getElementById('schedule-send-btn');
+            if (actionRail && attachButton && scheduleButton) {
+                actionRail.prepend(scheduleButton);
+                actionRail.prepend(attachButton);
+            }
             document.getElementById('terminal-container').style.display = structured ? 'none' : '';
             document.getElementById('claude-chat-container').style.display = enabled ? 'block' : 'none';
             document.getElementById('codex-chat-container').style.display = codexChat ? 'block' : 'none';
-            document.getElementById('claude-control-panel').style.display = enabled ? 'block' : 'none';
-            document.getElementById('codex-control-panel').style.display = codexChat ? 'block' : 'none';
+            document.getElementById('claude-control-panel').style.display = enabled ? 'flex' : 'none';
+            document.getElementById('codex-control-panel').style.display = codexChat ? 'flex' : 'none';
             document.getElementById('codex-terminal-switch').style.display = isCodexSession() ? '' : 'none';
-            document.getElementById('timer-btn').style.display = '';
             document.getElementById('attach-image-btn').style.display = structured ? '' : 'none';
             document.getElementById('shortcut-rail').style.display = structured ? 'none' : '';
             document.getElementById('scroll-controls').style.display = structured ? 'none' : '';
@@ -94,7 +104,7 @@
                 const option = select.selectedOptions && select.selectedOptions[0];
                 const label = pickerLabelFromOption(option);
                 const fullValue = pickerFullValue(option);
-                button.textContent = prefix;
+                setActionButtonLabel(button, prefix);
                 button.title = type === 'model'
                     ? `${fullValue || label || prefix} · ${effortLabel(claudeState.effort)}`
                     : (fullValue || label || prefix);
@@ -252,12 +262,12 @@
             const usageBtn = document.getElementById('claude-usage-btn');
             if (usageBtn) {
                 usageBtn.disabled = claudeUsagePending || claudeStatus === 'thinking';
-                usageBtn.textContent = claudeUsagePending ? 'Loading' : 'Usage';
+                setActionButtonLabel(usageBtn, claudeUsagePending ? 'Loading' : 'Usage');
             }
             const contextBtn = document.getElementById('claude-context-btn');
             if (contextBtn) {
                 contextBtn.disabled = claudeContextPending || claudeStatus === 'thinking';
-                contextBtn.textContent = claudeContextPending ? 'Loading' : 'Context';
+                setActionButtonLabel(contextBtn, claudeContextPending ? 'Loading' : 'Context');
             }
             renderClaudeStateBar();
             renderClaudeChat();

package/lib/web/codex.js

@@ -445,14 +445,14 @@
                 sandbox.value = codexState.sandboxMode || 'default';
             }
             const modelButton = document.getElementById('codex-model-btn');
-            if (modelButton) modelButton.textContent = 'Model';
+            if (modelButton) setActionButtonLabel(modelButton, 'Model');
             const abort = document.getElementById('codex-abort-btn');
             if (abort) {
                 abort.disabled = !codexState.canAbort;
-                abort.textContent = codexState.aborting ? 'Aborting…' : 'Abort';
+                setActionButtonLabel(abort, codexState.aborting ? 'Aborting…' : 'Abort');
             }
             const compact = document.getElementById('codex-compact-btn');
-            if (compact) { compact.disabled = !codexState.canCompact; compact.textContent = codexState.compacting ? 'Compacting' : 'Compact'; }
+            if (compact) { compact.disabled = !codexState.canCompact; setActionButtonLabel(compact, codexState.compacting ? 'Compacting' : 'Compact'); }
             const skills = document.getElementById('codex-skills-btn');
             if (skills) { skills.disabled = !codexReadyForInput(); skills.classList.toggle('primary', Boolean(selectedCodexSkill)); }
             const resume = document.getElementById('codex-resume-btn');

package/lib/web/composer.js

@@ -9,9 +9,9 @@
         }
 
         function syncComposerButtonState() {
-            const menuOpen = document.getElementById('composer-menu').classList.contains('active');
             const timerOpen = document.getElementById('timed-send-panel').classList.contains('active');
-            document.getElementById('timer-btn').classList.toggle('active', menuOpen || timerOpen);
+            document.getElementById('schedule-send-btn').classList.toggle('active', timerOpen);
+            document.getElementById('attach-image-btn').classList.toggle('active', selectedImageAttachments.length > 0);
         }
 
         function renderImageAttachments() {
@@ -19,6 +19,7 @@
                 `<div class="attachment-chip${item.uploading ? ' uploading' : ''}"><span aria-hidden="true">▧</span><span class="attachment-chip-content"><span class="attachment-chip-name" title="${escapeHtml(item.name)}">${escapeHtml(item.name)}</span>${item.uploading ? `<span class="attachment-progress${item.progressKnown ? '' : ' estimated'}"><span style="width:${Math.max(0, Math.min(100, item.progress || 0))}%"></span></span><span class="attachment-status">${escapeHtml(item.status || (item.progressKnown ? `Uploading ${Math.round(item.progress || 0)}%` : 'Uploading original image…'))}</span>` : ''}</span><button class="attachment-remove" type="button" title="Remove image" aria-label="Remove ${escapeHtml(item.name)}" onclick="removeImageAttachment('${item.id}')">×</button></div>`
             )).join('');
             attachmentStrip.classList.toggle('active', selectedImageAttachments.length > 0);
+            syncComposerButtonState();
             updateTerminalControlsHeight();
         }
 
@@ -147,14 +148,7 @@
             }
         }
 
-        function closeComposerMenu() {
-            document.getElementById('composer-menu').classList.remove('active');
-            syncComposerButtonState();
-            updateTerminalControlsHeight();
-        }
-
         function openTimedSendPanel() {
-            closeComposerMenu();
             if (isClaudeSession()) {
                 closeClaudePicker();
                 claudeResumePanelOpen = false;

package/lib/web/core.js

@@ -9,6 +9,15 @@
         let timedSendRefreshTimer = null;
         let timedTagTimer = null;
         let editingTimedInputId = null;
+        function setActionButtonLabel(button, label) {
+            if (!button) return;
+            const labelNode = button.querySelector('.action-label');
+            if (labelNode) {
+                labelNode.textContent = label;
+                return;
+            }
+            button.textContent = label;
+        }
         let claudeMessages = [];
         let claudePendingPermissions = [];
         let claudeStatus = 'idle';
@@ -235,7 +244,7 @@
                             ${timedInputCount}
                         </span>`
                         : '';
-                    html += `<div class="session-card">
+                    html += `<div class="session-card${s.id === activeSessionId ? ' selected' : ''}" data-session-id="${escapeHtml(s.id)}">
                         <div class="session-info">
                             <h3>${escapeHtml(s.name)}${s.hasUnreadCompletion ? '<span class="completion-dot" title="Completed"></span>' : ''}${timerBadge} <button type="button" class="icon-btn session-edit-btn" title="Rename session" aria-label="Rename session" onclick="renameSession('${s.id}', decodePathValue('${encodedName}'), event)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></button></h3>
                             <p>${escapeHtml(s.tool)}</p>
@@ -320,7 +329,8 @@
         }
 
         function isLobbyVisible() {
-            return document.getElementById('lobby-view').classList.contains('active');
+            return document.getElementById('lobby-view').classList.contains('active')
+                || (typeof isSplitLayout === 'function' && isSplitLayout());
         }
 
         function scheduleSessionPolling() {

package/lib/web/index.html

@@ -5,6 +5,17 @@
     <title>Glad - AI Sessions</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
     <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="theme-color" content="#000000">
+    <script>
+        (() => {
+            const storedTheme = localStorage.getItem('glad-theme');
+            const theme = storedTheme === 'light' || storedTheme === 'dark'
+                ? storedTheme
+                : (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+            document.documentElement.dataset.theme = theme;
+            document.documentElement.style.backgroundColor = theme === 'dark' ? '#000000' : '#f5f6f8';
+        })();
+    </script>
     <link rel="manifest" href="manifest.json">
     <link rel="icon" type="image/svg+xml" href="logo.svg">
     <link rel="apple-touch-icon" href="logo.svg">
@@ -13,6 +24,25 @@
 </head>
 <body>
     <div id="debug-log"></div>
+    <svg class="app-icon-sprite" aria-hidden="true">
+        <symbol id="icon-model" viewBox="0 0 24 24"><path d="M4 7h10M18 7h2M4 17h2M10 17h10M14 4v6M6 14v6"/></symbol>
+        <symbol id="icon-usage" viewBox="0 0 24 24"><path d="M5 20V10M12 20V4M19 20v-7"/></symbol>
+        <symbol id="icon-context" viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 0 9 9h-9V3Z"/><path d="M15 3.5A9 9 0 0 1 20.5 9H15V3.5Z"/></symbol>
+        <symbol id="icon-stop" viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="2"/></symbol>
+        <symbol id="icon-resume" viewBox="0 0 24 24"><path d="M4 12a8 8 0 1 0 2.3-5.7L4 8.6"/><path d="M4 4v4.6h4.6"/><path d="M12 8v4l3 2"/></symbol>
+        <symbol id="icon-fork" viewBox="0 0 24 24"><circle cx="6" cy="5" r="2"/><circle cx="18" cy="5" r="2"/><circle cx="12" cy="19" r="2"/><path d="M6 7v2c0 4 6 3 6 8M18 7v2c0 4-6 3-6 8"/></symbol>
+        <symbol id="icon-shield" viewBox="0 0 24 24"><path d="M12 3 20 6v5c0 5-3.4 8.2-8 10-4.6-1.8-8-5-8-10V6l8-3Z"/><path d="m9 12 2 2 4-4"/></symbol>
+        <symbol id="icon-status" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 11v6M12 7h.01"/></symbol>
+        <symbol id="icon-prompts" viewBox="0 0 24 24"><path d="M4 5h16v11H8l-4 4V5Z"/><path d="M8 9h8M8 12h5"/></symbol>
+        <symbol id="icon-compact" viewBox="0 0 24 24"><path d="m4 9 5 0 0-5M9 9 4 4M20 9h-5V4M15 9l5-5M4 15h5v5M9 15l-5 5M20 15h-5v5M15 15l5 5"/></symbol>
+        <symbol id="icon-sandbox" viewBox="0 0 24 24"><path d="m12 3 8 4.5v9L12 21l-8-4.5v-9L12 3Z"/><path d="m4.5 7.8 7.5 4.3 7.5-4.3M12 12v9"/></symbol>
+        <symbol id="icon-lock" viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></symbol>
+        <symbol id="icon-skills" viewBox="0 0 24 24"><path d="M9 3H4a1 1 0 0 0-1 1v5h2.5a2.5 2.5 0 1 1 0 5H3v5a1 1 0 0 0 1 1h5v-2.5a2.5 2.5 0 1 1 5 0V20h5a1 1 0 0 0 1-1v-5h-2.5a2.5 2.5 0 1 1 0-5H20V4a1 1 0 0 0-1-1h-5v2.5a2.5 2.5 0 1 1-5 0V3Z"/></symbol>
+        <symbol id="icon-image" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="10" r="2"/><path d="m4 17 4.5-4 3.5 3 2.5-2 5.5 4"/></symbol>
+        <symbol id="icon-schedule" viewBox="0 0 24 24"><circle cx="10.5" cy="13" r="7.5"/><path d="M10.5 9v4l2.5 1.5M18 3v6M15 6h6"/></symbol>
+    </svg>
+
+    <div id="app-shell">
     
     <!-- Lobby View -->
     <div id="lobby-view" class="view active">
@@ -55,6 +85,14 @@
         </div>
     </div>
 
+    <div id="sidebar-resizer" role="separator" aria-label="Resize session sidebar" aria-orientation="vertical"></div>
+    <main id="detail-pane">
+        <div id="detail-empty">
+            <img src="logo.svg" alt="" aria-hidden="true">
+            <h2>Select a session</h2>
+            <p>Choose an active session from the sidebar or create a new one.</p>
+        </div>
+
     <!-- Usage Dashboard View -->
     <div id="usage-view" class="view">
         <div class="usage-nav">
@@ -141,16 +179,13 @@
                 <div id="timed-tag-rail"></div>
                 <div id="input-row">
                     <textarea id="cmd-input" rows="1" placeholder="Type a message..."></textarea>
-                    <button id="timer-btn" title="Add image or schedule send" aria-label="Add image or schedule send">+</button>
-                    <button id="send-btn">
+                    <button id="attach-image-btn" class="composer-action-btn" type="button" title="Add image" aria-label="Add image"><svg class="action-icon" aria-hidden="true"><use href="#icon-image"></use></svg></button>
+                    <button id="schedule-send-btn" class="composer-action-btn" type="button" title="Schedule send" aria-label="Schedule send"><svg class="action-icon" aria-hidden="true"><use href="#icon-schedule"></use></svg></button>
+                    <button id="send-btn" type="button" title="Send" aria-label="Send">
                         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
                     </button>
                 </div>
                 <div id="attachment-strip" aria-live="polite"></div>
-                <div id="composer-menu" role="menu">
-                    <button id="attach-image-btn" class="composer-menu-btn" type="button" role="menuitem">Add image</button>
-                    <button id="schedule-send-btn" class="composer-menu-btn" type="button" role="menuitem">Schedule send</button>
-                </div>
                 <input id="image-file-input" type="file" accept="image/png,image/jpeg,image/gif,image/webp" multiple hidden>
                 <div id="claude-control-panel">
                     <div class="claude-control-rail">
@@ -166,13 +201,13 @@
                                     <option value="xhigh">Extra high</option>
                                     <option value="max">Max</option>
                                 </select>
-                                <button id="claude-model-picker-btn" class="claude-select claude-picker-btn" onclick="toggleClaudePicker('model')" title="Model and effort">Model</button>
+                                <button id="claude-model-picker-btn" class="claude-select claude-picker-btn" onclick="toggleClaudePicker('model')" title="Model and effort" aria-label="Model and effort"><svg class="action-icon" aria-hidden="true"><use href="#icon-model"></use></svg><span class="action-label">Model</span></button>
                             </div>
-                            <button id="claude-usage-btn" class="claude-ctrl-btn" onclick="requestClaudeUsage()" title="Show Claude usage">Usage</button>
-                            <button id="claude-context-btn" class="claude-ctrl-btn" onclick="requestClaudeContext()" title="Show Claude context">Context</button>
-                            <button id="claude-abort-btn" class="claude-ctrl-btn danger" onclick="abortClaudeSession()" title="Abort current Claude turn">Abort</button>
-                            <button id="claude-resume-btn" class="claude-ctrl-btn primary" onclick="toggleClaudeResumePanel()" title="Choose a Claude session to resume">Resume</button>
-                            <button id="claude-fork-btn" class="claude-ctrl-btn primary" onclick="toggleClaudeForkPanel()" title="Fork a Claude session">Fork</button>
+                            <button id="claude-usage-btn" class="claude-ctrl-btn" onclick="requestClaudeUsage()" title="Show Claude usage" aria-label="Show Claude usage"><svg class="action-icon" aria-hidden="true"><use href="#icon-usage"></use></svg><span class="action-label">Usage</span></button>
+                            <button id="claude-context-btn" class="claude-ctrl-btn" onclick="requestClaudeContext()" title="Show Claude context" aria-label="Show Claude context"><svg class="action-icon" aria-hidden="true"><use href="#icon-context"></use></svg><span class="action-label">Context</span></button>
+                            <button id="claude-abort-btn" class="claude-ctrl-btn danger" onclick="abortClaudeSession()" title="Abort current Claude turn" aria-label="Abort current Claude turn"><svg class="action-icon" aria-hidden="true"><use href="#icon-stop"></use></svg><span class="action-label">Abort</span></button>
+                            <button id="claude-resume-btn" class="claude-ctrl-btn primary" onclick="toggleClaudeResumePanel()" title="Choose a Claude session to resume" aria-label="Choose a Claude session to resume"><svg class="action-icon" aria-hidden="true"><use href="#icon-resume"></use></svg><span class="action-label">Resume</span></button>
+                            <button id="claude-fork-btn" class="claude-ctrl-btn primary" onclick="toggleClaudeForkPanel()" title="Fork a Claude session" aria-label="Fork a Claude session"><svg class="action-icon" aria-hidden="true"><use href="#icon-fork"></use></svg><span class="action-label">Fork</span></button>
                         </div>
                         <div class="claude-control-page secondary">
                             <div class="claude-picker-wrap">
@@ -182,7 +217,7 @@
                                     <option value="plan">Plan mode</option>
                                     <option value="bypassPermissions">Bypass</option>
                                 </select>
-                                <button id="claude-permission-picker-btn" class="claude-select claude-picker-btn" onclick="toggleClaudePicker('permission')" title="Permission mode">Permission</button>
+                                <button id="claude-permission-picker-btn" class="claude-select claude-picker-btn" onclick="toggleClaudePicker('permission')" title="Permission mode" aria-label="Permission mode"><svg class="action-icon" aria-hidden="true"><use href="#icon-shield"></use></svg><span class="action-label">Permission</span></button>
                             </div>
                         </div>
                     </div>
@@ -194,28 +229,28 @@
                 <div id="codex-control-panel">
                     <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 in this conversation">Fork</button>
+                            <button id="codex-model-btn" class="claude-ctrl-btn" onclick="toggleCodexModelPanel()" title="Model and effort" aria-label="Model and effort"><svg class="action-icon" aria-hidden="true"><use href="#icon-model"></use></svg><span class="action-label">Model</span></button>
+                            <button id="codex-status-btn" class="claude-ctrl-btn" onclick="requestCodexStatus()" title="Show Codex account, limits, and context status" aria-label="Show Codex status"><svg class="action-icon" aria-hidden="true"><use href="#icon-status"></use></svg><span class="action-label">Status</span></button>
+                            <button id="codex-abort-btn" class="claude-ctrl-btn danger" onclick="abortCodexSession()" title="Abort current Codex turn" aria-label="Abort current Codex turn"><svg class="action-icon" aria-hidden="true"><use href="#icon-stop"></use></svg><span class="action-label">Abort</span></button>
+                            <button id="codex-resume-btn" class="claude-ctrl-btn primary" onclick="toggleCodexResumePanel()" title="Resume a Codex thread" aria-label="Resume a Codex thread"><svg class="action-icon" aria-hidden="true"><use href="#icon-resume"></use></svg><span class="action-label">Resume</span></button>
+                            <button id="codex-fork-btn" class="claude-ctrl-btn primary" onclick="toggleCodexForkPanel()" title="Fork a Codex thread in this conversation" aria-label="Fork this Codex thread"><svg class="action-icon" aria-hidden="true"><use href="#icon-fork"></use></svg><span class="action-label">Fork</span></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>
+                            <button id="codex-prompts-btn" class="claude-ctrl-btn" onclick="toggleCodexPromptPanel()" title="Browse and copy recent prompts" aria-label="Browse recent prompts"><svg class="action-icon" aria-hidden="true"><use href="#icon-prompts"></use></svg><span class="action-label">Prompts</span></button>
+                            <button id="codex-compact-btn" class="claude-ctrl-btn" onclick="compactCodexContext()" title="Compact the current Codex context" aria-label="Compact Codex context"><svg class="action-icon" aria-hidden="true"><use href="#icon-compact"></use></svg><span class="action-label">Compact</span></button>
                             <label class="codex-select-control" title="Sandbox mode">
-                                <span class="codex-select-label" aria-hidden="true">Sandbox</span>
+                                <span class="codex-select-label" aria-hidden="true"><svg class="action-icon"><use href="#icon-sandbox"></use></svg><span class="action-label">Sandbox</span></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>
+                                <span class="codex-select-label" aria-hidden="true"><svg class="action-icon"><use href="#icon-lock"></use></svg><span class="action-label">Ask</span></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-skills-btn" class="claude-ctrl-btn" onclick="toggleCodexSkillPanel()" title="Choose a skill for the next message">Skills</button>
+                            <button id="codex-skills-btn" class="claude-ctrl-btn" onclick="toggleCodexSkillPanel()" title="Choose a skill for the next message" aria-label="Skills"><svg class="action-icon" aria-hidden="true"><use href="#icon-skills"></use></svg><span class="action-label">Skills</span></button>
                         </div>
                     </div>
                     <div id="codex-state-bar"></div>
@@ -314,6 +349,9 @@
         </div>
     </div>
 
+    </main>
+    </div>
+
     <!-- Tool Modal -->
     <div id="modal-overlay" onclick="closeToolModal(event)">
         <div id="tool-modal" onclick="event.stopPropagation()">
@@ -355,6 +393,20 @@
                 </div>
                 <button class="icon-btn settings-close" type="button" onclick="closeSettings()" aria-label="Close">×</button>
             </div>
+            <section class="settings-section" aria-labelledby="appearance-settings-title">
+                <div class="settings-section-label" id="appearance-settings-title">Appearance</div>
+                <div class="theme-choice" role="group" aria-label="Color theme">
+                    <button id="theme-light-btn" type="button" onclick="setGladTheme('light')" aria-pressed="false">
+                        <span class="theme-swatch light" aria-hidden="true"></span>
+                        Light
+                    </button>
+                    <button id="theme-dark-btn" type="button" onclick="setGladTheme('dark')" aria-pressed="false">
+                        <span class="theme-swatch dark" aria-hidden="true"></span>
+                        Dark
+                    </button>
+                </div>
+                <p class="settings-theme-help">Glad follows your system until you choose a theme.</p>
+            </section>
             <section class="settings-section" aria-labelledby="notifications-settings-title">
                 <div class="settings-section-label" id="notifications-settings-title">Notifications</div>
                 <div class="settings-provider-header">
@@ -441,8 +493,10 @@
 
     <script defer src="vendor/xterm.js"></script>
     <script defer src="vendor/xterm-addon-fit.js"></script>
+    <script src="theme.js"></script>
     <script src="gitgraph.js"></script>
     <script src="core.js"></script>
+    <script src="layout.js"></script>
     <script src="notifications.js"></script>
     <script src="claude.js"></script>
     <script src="schedules.js"></script>

package/lib/web/layout.js

@@ -0,0 +1,72 @@
+        const GLAD_SPLIT_QUERY = '(min-width: 920px)';
+        const GLAD_SIDEBAR_KEY = 'glad-sidebar-width';
+
+        function isSplitLayout() {
+            return window.matchMedia(GLAD_SPLIT_QUERY).matches;
+        }
+
+        function clampSidebarWidth(value) {
+            const max = Math.max(300, Math.min(480, window.innerWidth - 484));
+            return Math.min(max, Math.max(300, Number(value) || 348));
+        }
+
+        function applySidebarWidth(value) {
+            const width = clampSidebarWidth(value);
+            document.documentElement.style.setProperty('--sidebar-w', `${width}px`);
+            return width;
+        }
+
+        function initializeResponsiveLayout() {
+            const storedWidth = Number(localStorage.getItem(GLAD_SIDEBAR_KEY));
+            applySidebarWidth(storedWidth || 348);
+
+            const handle = document.getElementById('sidebar-resizer');
+            if (handle) {
+                let dragging = false;
+                const onPointerMove = event => {
+                    if (!dragging) return;
+                    applySidebarWidth(event.clientX);
+                    if (typeof syncLayout === 'function') syncLayout({ keepAtBottom: false });
+                };
+                const stopDragging = () => {
+                    if (!dragging) return;
+                    dragging = false;
+                    handle.classList.remove('dragging');
+                    document.body.style.removeProperty('cursor');
+                    document.body.style.removeProperty('user-select');
+                    const width = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--sidebar-w'));
+                    localStorage.setItem(GLAD_SIDEBAR_KEY, String(clampSidebarWidth(width)));
+                };
+                handle.addEventListener('pointerdown', event => {
+                    if (!isSplitLayout()) return;
+                    dragging = true;
+                    handle.classList.add('dragging');
+                    handle.setPointerCapture?.(event.pointerId);
+                    document.body.style.cursor = 'col-resize';
+                    document.body.style.userSelect = 'none';
+                    event.preventDefault();
+                });
+                window.addEventListener('pointermove', onPointerMove);
+                window.addEventListener('pointerup', stopDragging);
+                window.addEventListener('pointercancel', stopDragging);
+            }
+
+            const media = window.matchMedia(GLAD_SPLIT_QUERY);
+            media.addEventListener('change', () => {
+                applySidebarWidth(parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--sidebar-w')));
+                if (isSplitLayout()) scheduleSessionPolling();
+                if (typeof syncLayout === 'function') requestAnimationFrame(() => syncLayout({ keepAtBottom: false }));
+            });
+
+            const controls = document.getElementById('terminal-controls');
+            if (controls && typeof ResizeObserver !== 'undefined') {
+                new ResizeObserver(() => {
+                    if (typeof syncLayout === 'function') syncLayout();
+                }).observe(controls);
+            }
+        }
+
+        window.addEventListener('resize', () => {
+            if (isSplitLayout()) applySidebarWidth(parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--sidebar-w')));
+        });
+        document.addEventListener('DOMContentLoaded', initializeResponsiveLayout);

package/lib/web/notifications.js

@@ -49,6 +49,7 @@
         async function openSettings(event = null) {
             event?.stopPropagation();
             document.getElementById('settings-modal-overlay').style.display = 'flex';
+            if (typeof syncGladThemeControls === 'function') syncGladThemeControls();
             setServerChanStatus('Loading configuration…');
             try {
                 const response = await fetchWithTimeout('/api/notifications/serverchan', {}, 10000);

package/lib/web/session.js

@@ -17,6 +17,7 @@
             setClaudeModeEnabled(isClaudeSession());
             if (currentSocket) { currentSocket.close(); currentSocket = null; }
             initTerminal(id);
+            if (typeof isSplitLayout === 'function' && isSplitLayout()) refreshSessionsNow();
         }
 
         function initTerminal(sessionId) {
@@ -37,7 +38,7 @@
                 return /^\x1b\[\?[\d;]*c$/.test(data) || /^\x1b\[>[\d;]*c$/.test(data);
             }
             if (!term) {
-                term = new Terminal({ theme: { background: '#000', foreground: '#fff', cursor: '#0f0' }, cursorBlink: true, fontSize: 14, cursorStyle: 'bar', scrollback: 10000 });
+                term = new Terminal({ theme: typeof getGladTerminalTheme === 'function' ? getGladTerminalTheme() : { background: '#000', foreground: '#fff', cursor: '#0f0' }, cursorBlink: true, fontSize: 14, cursorStyle: 'bar', scrollback: 10000 });
                 fitAddon = new FitAddon.FitAddon();
                 term.loadAddon(fitAddon);
                 term.open(document.getElementById('terminal'));

package/lib/web/shell.js

@@ -7,6 +7,9 @@
             if (currentSocket) { currentSocket.close(); currentSocket = null; }
             closeTimedSendPanel();
             stopTimedInputTimers();
+            activeSessionId = null;
+            window.activeSessionId = null;
+            activeToolKey = null;
             document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
             document.getElementById('lobby-view').classList.add('active');
             refreshSessionsNow();

package/lib/web/styles.css

@@ -142,13 +142,7 @@
         #cmd-input { flex: 1; min-height: 38px; max-height: 150px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); border-radius: 19px; color: #fff; padding: 9px 16px; font-size: 16px; outline: none; resize: none; overflow-y: auto; line-height: 20px; box-sizing: border-box; transition: background 0.18s ease, border-color 0.18s ease; }
         #cmd-input::placeholder { color: rgba(255,255,255,0.45); }
         #cmd-input:focus { background: rgba(255,255,255,0.1); border-color: rgba(0,122,255,0.42); color: #fff; }
-        #timer-btn { width: 38px; height: 38px; margin-left: 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); border-radius: 19px; color: #d1d5db; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; font-size: 24px; line-height: 1; }
-        #timer-btn.active { color: #fff; border-color: rgba(0,122,255,0.45); background: rgba(0,122,255,0.22); }
         #send-btn { width: 44px; height: 38px; margin-left: 10px; background: #007aff; border: none; border-radius: 19px; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
-        #composer-menu { display: none; width: min(calc(100% - 28px), var(--control-content-max)); margin: -2px auto 8px auto; padding: 6px; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; background: rgba(38,38,42,0.98); box-shadow: 0 12px 28px rgba(0,0,0,0.28); box-sizing: border-box; }
-        #composer-menu.active { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
-        .composer-menu-btn { min-height: 42px; border: 0; border-radius: 9px; background: rgba(255,255,255,0.08); color: #fff; font-size: 14px; font-weight: 650; cursor: pointer; }
-        .composer-menu-btn:hover { background: rgba(255,255,255,0.14); }
         #attachment-strip { display: none; width: min(calc(100% - 28px), var(--control-content-max)); margin: -3px auto 2px auto; gap: 7px; overflow-x: auto; padding: 0 0 4px 0; box-sizing: border-box; scrollbar-width: none; }
         #attachment-strip.active { display: flex; }
         #attachment-strip::-webkit-scrollbar { display: none; }
@@ -539,3 +533,278 @@
             :root { --chat-content-max: 960px; --control-content-max: 1100px; }
             #codex-chat-container { padding: 18px 22px 34px; }
         }
+
+/* Responsive application shell, bottom composer, and color themes. */
+:root {
+    --sidebar-w: 348px;
+    --surface: #121212;
+    --surface-raised: #1c1c1e;
+    --surface-soft: rgba(255,255,255,.08);
+    --line: rgba(255,255,255,.10);
+    --chat-bg: #050505;
+    --input-bg: rgba(255,255,255,.08);
+    --input-fg: #ffffff;
+    --input-placeholder: rgba(255,255,255,.45);
+    --overlay-bg: rgba(0,0,0,.80);
+    color-scheme: dark;
+}
+
+html[data-theme="light"] {
+    --bg: #f5f6f8;
+    --card-bg: #ffffff;
+    --text: #172033;
+    --text-dim: #667085;
+    --surface: #ffffff;
+    --surface-raised: #ffffff;
+    --surface-soft: rgba(15,23,42,.055);
+    --line: rgba(15,23,42,.11);
+    --chat-bg: #ffffff;
+    --input-bg: #f2f4f7;
+    --input-fg: #172033;
+    --input-placeholder: #8a94a6;
+    --overlay-bg: rgba(15,23,42,.45);
+    color-scheme: light;
+}
+
+html[data-theme="dark"] { color-scheme: dark; }
+
+.app-icon-sprite { position: fixed; width: 0; height: 0; overflow: hidden; pointer-events: none; }
+.action-icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
+.action-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+
+#app-shell { display: flex; width: 100%; height: 100%; min-height: 0; overflow: hidden; background: var(--bg); }
+#detail-pane { position: relative; display: flex; min-width: 0; min-height: 0; flex: 1; overflow: hidden; background: var(--bg); }
+#detail-pane > .view { min-width: 0; min-height: 0; }
+#detail-empty { display: none; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 32px; color: var(--text-dim); text-align: center; }
+#detail-empty img { width: 72px; height: 72px; margin-bottom: 14px; opacity: .72; }
+#detail-empty h2 { margin: 0; color: var(--text); font-size: 20px; }
+#detail-empty p { max-width: 360px; margin: 8px 0 0; font-size: 13px; line-height: 1.5; }
+#sidebar-resizer { display: none; }
+
+#terminal-view.active { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
+#top-ui { display: contents; }
+#nav-bar { grid-row: 1; z-index: 20; padding-top: max(8px, env(safe-area-inset-top)); background: var(--surface); border-color: var(--line); }
+#terminal-controls { position: relative; inset: auto; grid-row: 3; z-index: 30; max-height: min(62dvh, 620px); overflow-y: auto; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--line); border-bottom: 0; background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: 0 -10px 28px rgba(0,0,0,.12); }
+#terminal-controls-spacer { display: none; }
+#terminal-container, #claude-chat-container, #codex-chat-container { grid-row: 2; min-width: 0; min-height: 0; background: var(--chat-bg); }
+#input-row { padding-top: 10px; padding-bottom: 7px; }
+#cmd-input { width: 100%; min-height: 42px; border-color: var(--line); background: var(--input-bg); color: var(--input-fg); }
+#cmd-input::placeholder { color: var(--input-placeholder); }
+#cmd-input:focus { color: var(--input-fg); }
+#send-btn { position: absolute; z-index: 5; bottom: calc(10px + env(safe-area-inset-bottom)); margin: 0; }
+.composer-action-btn { position: relative; width: 40px; min-width: 40px; height: 40px; flex: 0 0 40px; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); color: var(--text-dim); display: flex; align-items: center; justify-content: center; cursor: pointer; }
+.composer-action-btn:hover { color: var(--text); }
+.composer-action-btn.active { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 48%, transparent); background: color-mix(in srgb, var(--primary) 14%, var(--surface)); }
+#send-btn { right: max(12px, calc((100% - var(--control-content-max)) / 2 + 14px)); width: 44px; height: 40px; }
+#claude-control-panel, #codex-control-panel { position: relative; flex-direction: column; width: min(100%, var(--control-content-max)); padding: 0 14px 10px; border: 0; background: transparent; }
+.claude-control-rail, .codex-control-rail { order: 100; min-height: 40px; gap: 7px; margin: 0 58px 0 0; padding: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: none; scroll-padding: 0; }
+.claude-control-page, .claude-control-page.secondary, .codex-control-page { display: flex; width: auto; flex: 0 0 auto; gap: 7px; justify-content: flex-start; scroll-snap-align: none; }
+.claude-control-page > *, .codex-control-page > * { width: 40px; min-width: 40px; height: 40px; flex: 0 0 40px; }
+.claude-control-page .claude-ctrl-btn, .claude-control-page .claude-select, .codex-control-page .claude-ctrl-btn, .codex-control-page .codex-select-label,
+.claude-select, .claude-ctrl-btn, .codex-select-control, .codex-select-label { width: 40px; height: 40px; padding: 0; border-radius: 12px; font-size: 0; }
+.claude-picker-btn, .claude-ctrl-btn, .codex-select-label { position: relative; display: inline-flex; align-items: center; justify-content: center; }
+#claude-state-bar, #codex-state-bar { order: 10; }
+#claude-picker-panel, #claude-resume-panel, #claude-fork-panel,
+#codex-model-panel, #codex-resume-panel, #codex-fork-panel, #codex-prompt-panel, #codex-skill-panel { order: 20; }
+#shortcut-rail { width: min(100%, var(--control-content-max)); min-height: 40px; gap: 7px; margin: 0 auto; padding: 0 66px 10px 14px; scroll-snap-type: none; scroll-padding: 0; }
+.shortcut-group { display: contents; }
+.shortcut-group .key-btn, .shortcut-group .command-key { width: auto; min-width: 48px; height: 40px; padding: 0 10px; flex: 0 0 auto; }
+#attachment-strip { border-color: var(--line); background: var(--surface-raised); }
+#timed-send-panel { margin-bottom: 8px; border-color: var(--line); background: var(--surface-raised); }
+#timed-tag-rail { top: auto; bottom: calc(100% + 6px); }
+#scroll-controls { position: absolute; }
+
+.theme-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
+.theme-choice button { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; }
+.theme-choice button[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent); }
+.theme-swatch { width: 18px; height: 18px; border: 1px solid rgba(127,127,127,.35); border-radius: 50%; }
+.theme-swatch.light { background: #fff; }
+.theme-swatch.dark { background: #1c1c1e; }
+.settings-theme-help { margin: 8px 0 0; color: var(--text-dim); font-size: 11px; }
+
+@media (min-width: 920px) {
+    #lobby-view { display: flex !important; width: min(var(--sidebar-w), calc(100vw - 484px)); flex: 0 0 min(var(--sidebar-w), calc(100vw - 484px)); border-right: 1px solid var(--line); background: var(--bg); }
+    #lobby { width: 100%; padding: 18px 14px; }
+    #lobby-view .header { margin-bottom: 18px; }
+    #lobby-view .header h1 { font-size: 23px; }
+    #lobby-view .header-action-btn:not(.icon-only) { width: 36px; padding: 0; font-size: 0; }
+    #lobby-view .header-action-btn:not(.icon-only) span:first-child { font-size: 20px; }
+    #sidebar-resizer { display: block; width: 4px; flex: 0 0 4px; cursor: col-resize; background: var(--line); touch-action: none; transition: background .15s; }
+    #sidebar-resizer:hover, #sidebar-resizer.dragging { background: var(--primary); }
+    #detail-pane:not(:has(.view.active)) #detail-empty { display: flex; }
+    #back-btn, .usage-nav-button { visibility: hidden; pointer-events: none; }
+    .session-card.selected { border: 1px solid color-mix(in srgb, var(--primary) 48%, transparent); background: color-mix(in srgb, var(--primary) 10%, var(--card-bg)); }
+}
+
+@media (max-width: 919px) {
+    #lobby-view { flex: 1; }
+    #detail-pane { display: contents; }
+    #detail-empty { display: none !important; }
+}
+
+/* Light palette overrides for legacy selectors that still carry dark literals. */
+html[data-theme="light"] body,
+html[data-theme="light"] #terminal-view,
+html[data-theme="light"] #terminal-container,
+html[data-theme="light"] #git-content,
+html[data-theme="light"] #usage-view { background: var(--bg) !important; color: var(--text); }
+html[data-theme="light"] #top-ui,
+html[data-theme="light"] #nav-bar,
+html[data-theme="light"] .usage-nav,
+html[data-theme="light"] #codex-control-panel { background: var(--surface) !important; border-color: var(--line) !important; }
+html[data-theme="light"] .session-card,
+html[data-theme="light"] .schedule-card,
+html[data-theme="light"] .usage-panel,
+html[data-theme="light"] .usage-summary-card,
+html[data-theme="light"] #tool-modal,
+html[data-theme="light"] #settings-modal,
+html[data-theme="light"] #usage-source-modal,
+html[data-theme="light"] #schedule-modal,
+html[data-theme="light"] #claude-picker-panel,
+html[data-theme="light"] #claude-resume-panel,
+html[data-theme="light"] #claude-fork-panel,
+html[data-theme="light"] #codex-model-panel,
+html[data-theme="light"] #codex-resume-panel,
+html[data-theme="light"] #codex-fork-panel,
+html[data-theme="light"] #codex-prompt-panel,
+html[data-theme="light"] #codex-skill-panel { background: var(--card-bg) !important; border-color: var(--line) !important; color: var(--text) !important; }
+html[data-theme="light"] #modal-overlay,
+html[data-theme="light"] #settings-modal-overlay,
+html[data-theme="light"] #usage-source-overlay { background: var(--overlay-bg); }
+html[data-theme="light"] #claude-chat-container,
+html[data-theme="light"] #codex-chat-container,
+html[data-theme="light"] #history-content { background: var(--chat-bg); color: var(--text); }
+html[data-theme="light"] .history-meta { background: #f0f2f5; border-color: var(--line); }
+html[data-theme="light"] .claude-message.assistant,
+html[data-theme="light"] .codex-message,
+html[data-theme="light"] .claude-tool strong,
+html[data-theme="light"] .claude-tool-header,
+html[data-theme="light"] .claude-picker-option,
+html[data-theme="light"] .codex-picker-option,
+html[data-theme="light"] .claude-resume-item,
+html[data-theme="light"] .codex-prompt-text,
+html[data-theme="light"] .usage-nav-title strong { color: var(--text); }
+html[data-theme="light"] .claude-tool,
+html[data-theme="light"] .claude-work-group,
+html[data-theme="light"] .codex-work-group { border-color: var(--line); background: rgba(15,23,42,.035); color: #344054; }
+html[data-theme="light"] .claude-tool-code,
+html[data-theme="light"] .claude-md pre { background: #f4f6f8; color: #27364a; border-color: var(--line); }
+html[data-theme="light"] .claude-select,
+html[data-theme="light"] .claude-ctrl-btn,
+html[data-theme="light"] .codex-select-label,
+html[data-theme="light"] .composer-action-btn,
+html[data-theme="light"] .key-btn,
+html[data-theme="light"] .command-key,
+html[data-theme="light"] .small-btn { border-color: var(--line); background: var(--surface-soft); color: var(--text); }
+html[data-theme="light"] .claude-ctrl-btn.primary { color: #065fbd; background: rgba(0,122,255,.11); }
+html[data-theme="light"] .claude-ctrl-btn.danger,
+html[data-theme="light"] .small-btn.danger { color: #d92d20; background: rgba(217,45,32,.09); }
+html[data-theme="light"] #settings-modal input,
+html[data-theme="light"] #settings-modal select,
+html[data-theme="light"] .form-field input,
+html[data-theme="light"] .form-field select,
+html[data-theme="light"] .form-field textarea,
+html[data-theme="light"] #cwd-field { background: #f2f4f7 !important; border-color: var(--line) !important; color: var(--text) !important; }
+html[data-theme="light"] .tab-bar,
+html[data-theme="light"] .list-item { border-color: var(--line); }
+html[data-theme="light"] .copy-dir-btn,
+html[data-theme="light"] .serverchan-toggle { border-color: var(--line); background: var(--surface-soft); }
+
+/* Light theme refinement: stronger hierarchy and readable provider surfaces. */
+html[data-theme="light"] #lobby-view { background: #f0f2f5; }
+html[data-theme="light"] .lobby-tabs { border: 1px solid #e0e5ec; box-shadow: 0 1px 2px rgba(15,23,42,.03); }
+html[data-theme="light"] .session-card,
+html[data-theme="light"] .schedule-card { border: 1px solid #e0e5ec; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
+html[data-theme="light"] .session-card.selected { border-color: #8fc5ff; background: #eaf4ff; box-shadow: 0 0 0 1px rgba(0,122,255,.08); }
+html[data-theme="light"] .btn-join { background: #e8f2ff; color: #006acb; }
+html[data-theme="light"] .weekday-btn { border-color: #d7dde7; background: #f7f8fa; color: #475467; }
+html[data-theme="light"] .weekday-btn.active { border-color: #007aff; background: #007aff; color: #fff; }
+html[data-theme="light"] .step-card { border-color: #dde2ea; background: #f7f8fa; }
+html[data-theme="light"] .small-btn.primary { border-color: #007aff; background: #007aff; color: #fff; }
+
+html[data-theme="light"] .claude-message.user,
+html[data-theme="light"] .codex-message.user { border-color: #b8d9fb; background: #e8f3ff; color: #173b61; }
+html[data-theme="light"] .claude-message-attachment { border-color: #c7d9ec; background: rgba(255,255,255,.68); color: #344054; }
+html[data-theme="light"] .claude-md code { border-color: #d9dee7; background: #eef1f5; color: #24364b; }
+html[data-theme="light"] .claude-md blockquote { border-left-color: #aeb8c6; color: #475467; }
+html[data-theme="light"] .claude-md th,
+html[data-theme="light"] .claude-md td { border-color: #d9dee7; }
+html[data-theme="light"] .claude-md th { background: #eef1f5; color: #172033; }
+html[data-theme="light"] .claude-command-chip { border-color: #d9dee7; background: #f2f4f7; color: #27364a; }
+html[data-theme="light"] .claude-picker-option-value { color: #667085; }
+html[data-theme="light"] .claude-picker-column + .claude-picker-column,
+html[data-theme="light"] .codex-picker-column + .codex-picker-column { border-color: #dfe4eb; }
+html[data-theme="light"] .claude-picker-option.selected,
+html[data-theme="light"] .codex-picker-option.selected { background: #dcecff; color: #075fae; }
+
+html[data-theme="light"] .codex-status-card { border-color: #cfe0ef; background: #f5f9fc; color: #172033; box-shadow: 0 1px 2px rgba(15,23,42,.03); }
+html[data-theme="light"] .codex-status-title { color: #0070c9; }
+html[data-theme="light"] .codex-status-item { border-color: #dbe3eb; background: #fff; }
+html[data-theme="light"] .codex-status-label { color: #667085; }
+html[data-theme="light"] .codex-status-value { color: #24364b; }
+html[data-theme="light"] .codex-warning-card { border-color: #f2cc60; background: #fff8df; color: #5e4300; }
+html[data-theme="light"] .codex-warning-icon { background: #ffefb3; color: #9a6700; }
+html[data-theme="light"] .codex-warning-title { color: #7a5200; }
+html[data-theme="light"] .codex-warning-text { color: #725d28; }
+html[data-theme="light"] .codex-compaction-card { border-color: #d9c4ef; background: #f7f0ff; color: #3f2a56; }
+html[data-theme="light"] .codex-compaction-meta { color: #725d86; }
+html[data-theme="light"] .codex-context-meter { --context-color: #168447; border-color: #69c98a; background: #effaf3; color: #125f34; }
+html[data-theme="light"] .codex-context-meter::before { background: #bcebc9; }
+html[data-theme="light"] .codex-context-meter.warn { --context-color: #a66f00; border-color: #e0b53e; background: #fff9df; color: #715000; }
+html[data-theme="light"] .codex-context-meter.warn::before { background: #ffe59a; }
+html[data-theme="light"] .codex-context-meter.danger { --context-color: #b53b33; border-color: #e58d86; background: #fff1f0; color: #8f2d27; }
+html[data-theme="light"] .codex-context-meter.danger::before { background: #fac5c1; }
+
+html[data-theme="light"] .codex-tool { border-color: #dbe1e8; background: #f7f9fb; color: #344054; }
+html[data-theme="light"] .codex-tool-title,
+html[data-theme="light"] .codex-inline-permission-title,
+html[data-theme="light"] .claude-edit-file > summary,
+html[data-theme="light"] .codex-patch-file > summary { color: #24364b; }
+html[data-theme="light"] .codex-tool-icon,
+html[data-theme="light"] .codex-tool-command,
+html[data-theme="light"] .codex-tool-code,
+html[data-theme="light"] .codex-work-group > summary,
+html[data-theme="light"] .codex-subagent-message { color: #526174; }
+html[data-theme="light"] .codex-tool-body,
+html[data-theme="light"] .codex-patch-file,
+html[data-theme="light"] .claude-edit-body { border-color: #dbe1e8; }
+html[data-theme="light"] .codex-work-group { border-left-color: #cbd3dd; background: transparent; }
+html[data-theme="light"] .codex-subagent-message { border-left-color: #cbd3dd; }
+html[data-theme="light"] .codex-diff { border-color: #d9dee7; background: #f7f8fa; }
+html[data-theme="light"] .codex-diff-line { color: #344054; }
+html[data-theme="light"] .codex-diff-line.add { color: #176b3a; background: #dff4e7; }
+html[data-theme="light"] .codex-diff-line.del { color: #a12b24; background: #fde5e3; }
+html[data-theme="light"] .codex-diff-line.hunk { color: #075fae; background: #e6f2ff; }
+html[data-theme="light"] .claude-permission,
+html[data-theme="light"] .codex-inline-permission { border-color: #edc84f; background: #fff6cf; }
+html[data-theme="light"] .claude-inline-permission-title { color: #795500; }
+html[data-theme="light"] .codex-permission-result { color: #725d28; }
+
+html[data-theme="light"] .codex-skill-header,
+html[data-theme="light"] .codex-prompt-header { border-color: #dce2ea; background: #f3f6f9; color: #344054; }
+html[data-theme="light"] .codex-skill-search { border-color: #cbd3dd; background: #fff; color: #172033; }
+html[data-theme="light"] .codex-skill-search::placeholder { color: #8a94a6; }
+html[data-theme="light"] .codex-skill-search:focus { border-color: #007aff; background: #fff; }
+html[data-theme="light"] .codex-skill-section + .codex-skill-section,
+html[data-theme="light"] .codex-prompt-item { border-color: #e1e5eb; }
+html[data-theme="light"] .codex-skill-section-title { background: #e9edf2; color: #475467; }
+html[data-theme="light"] .codex-skill-item { border-color: #e5e9ef; background: #fff; color: #172033; }
+html[data-theme="light"] .codex-skill-item:hover { background: #f7f9fb; }
+html[data-theme="light"] .codex-skill-item.selected { background: #e6f2ff; }
+html[data-theme="light"] .codex-skill-source { border-color: #99c8f7; background: #e8f3ff; color: #006acb; }
+html[data-theme="light"] .codex-skill-description { color: #667085; }
+html[data-theme="light"] .codex-skill-directory { border-color: #d9dee7; background: #f2f4f7; color: #667085; }
+html[data-theme="light"] .codex-prompt-time { color: #667085; }
+
+html[data-theme="light"] .usage-period-picker select { border-color: #d9dee7; color: #172033; }
+html[data-theme="light"] .usage-summary-card,
+html[data-theme="light"] .usage-panel { border-color: #dfe4eb; box-shadow: 0 1px 2px rgba(15,23,42,.025); }
+html[data-theme="light"] .usage-summary-card .value,
+html[data-theme="light"] .usage-table tfoot td { color: #172033; }
+html[data-theme="light"] .usage-summary-card .exact,
+html[data-theme="light"] .usage-chart-label,
+html[data-theme="light"] .usage-chart-total,
+html[data-theme="light"] .usage-pricing-note { color: #667085; }
+html[data-theme="light"] .usage-chart-track { background: #e9edf2; }
+html[data-theme="light"] .usage-table th { border-color: #dfe4eb; color: #667085; }
+html[data-theme="light"] .usage-table td { border-color: #edf0f3; color: #344054; }

package/lib/web/theme.js

@@ -0,0 +1,60 @@
+        const GLAD_THEME_KEY = 'glad-theme';
+
+        function getGladTheme() {
+            const stored = localStorage.getItem(GLAD_THEME_KEY);
+            if (stored === 'light' || stored === 'dark') return stored;
+            return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+
+        function getGladTerminalTheme(theme = getGladTheme()) {
+            return theme === 'light'
+                ? {
+                    background: '#ffffff', foreground: '#172033', cursor: '#007aff',
+                    selectionBackground: 'rgba(0, 122, 255, 0.22)', black: '#172033', white: '#f5f6f8',
+                    brightBlack: '#667085', brightWhite: '#ffffff'
+                }
+                : {
+                    background: '#000000', foreground: '#ffffff', cursor: '#34c759',
+                    selectionBackground: 'rgba(0, 122, 255, 0.32)'
+                };
+        }
+
+        function syncGladThemeControls(theme = getGladTheme()) {
+            ['light', 'dark'].forEach(value => {
+                const button = document.getElementById(`theme-${value}-btn`);
+                if (button) button.setAttribute('aria-pressed', String(value === theme));
+            });
+        }
+
+        function applyGladTheme(theme, options = {}) {
+            const resolved = theme === 'light' ? 'light' : 'dark';
+            document.documentElement.dataset.theme = resolved;
+            document.documentElement.style.removeProperty('background-color');
+            const meta = document.querySelector('meta[name="theme-color"]');
+            if (meta) meta.content = resolved === 'light' ? '#f5f6f8' : '#000000';
+            syncGladThemeControls(resolved);
+            try {
+                if (typeof term !== 'undefined' && term) {
+                    term.options.theme = getGladTerminalTheme(resolved);
+                    term.refresh(0, Math.max(0, term.rows - 1));
+                }
+            } catch (_) {}
+            if (!options.silent) window.dispatchEvent(new CustomEvent('glad-theme-change', { detail: resolved }));
+        }
+
+        function setGladTheme(theme) {
+            if (theme !== 'light' && theme !== 'dark') return;
+            localStorage.setItem(GLAD_THEME_KEY, theme);
+            applyGladTheme(theme);
+        }
+
+        applyGladTheme(getGladTheme(), { silent: true });
+
+        const gladSystemTheme = window.matchMedia('(prefers-color-scheme: dark)');
+        gladSystemTheme.addEventListener('change', () => {
+            if (!localStorage.getItem(GLAD_THEME_KEY)) applyGladTheme(getGladTheme());
+        });
+        window.addEventListener('storage', event => {
+            if (event.key === GLAD_THEME_KEY) applyGladTheme(getGladTheme());
+        });
+        document.addEventListener('DOMContentLoaded', () => syncGladThemeControls());

package/lib/web/timed-inputs.js

@@ -115,7 +115,6 @@
         function editTimedInput(id) {
             const item = timedInputs.find(value => value.id === id);
             if (!item) return;
-            closeComposerMenu();
             initTimedDelaySelectors();
             editingTimedInputId = id;
             inputEl.value = item.text || '';
@@ -173,19 +172,13 @@
         }
 
         document.getElementById('send-btn').addEventListener('click', performSend);
-        document.getElementById('timer-btn').addEventListener('click', () => {
-            const menu = document.getElementById('composer-menu');
-            const willOpen = !menu.classList.contains('active');
-            document.getElementById('timed-send-panel').classList.remove('active');
-            menu.classList.toggle('active', willOpen);
-            syncComposerButtonState();
-            updateTerminalControlsHeight();
-        });
         document.getElementById('attach-image-btn').addEventListener('click', () => {
-            closeComposerMenu();
             imageFileInput.click();
         });
-        document.getElementById('schedule-send-btn').addEventListener('click', openTimedSendPanel);
+        document.getElementById('schedule-send-btn').addEventListener('click', () => {
+            if (document.getElementById('timed-send-panel').classList.contains('active')) closeTimedSendPanel();
+            else openTimedSendPanel();
+        });
         imageFileInput.addEventListener('change', () => {
             const files = imageFileInput.files;
             if (files?.length) void uploadImageFiles(files);

package/package.json

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