+
setDrawerOpen(true)}
+ onMenu={handleShellMenu}
onOpenDocs={() => setDocsOpen(true)}
onGitAction={handleGitAction}
notificationSupported={notificationSupported}
@@ -7992,8 +8503,8 @@ export default function App() {
onNewConversation={handleNewConversation}
onSync={handleSync}
syncing={syncing}
- theme={theme}
- setTheme={setTheme}
+ themePreference={themePreference}
+ setThemePreference={setThemePreference}
canCreateThread={canCreateThreadFromMobile}
createThreadUnavailableReason={createThreadUnavailableReason}
/>
@@ -8031,6 +8542,7 @@ export default function App() {
now={activityClockNow}
onPreviewImage={setPreviewImage}
onDeleteMessage={handleDeleteMessage}
+ onSubmitUserInput={submitUserInput}
/>
setSelectedModelSpeed(normalizeModelSpeed(value))}
selectedReasoningEffort={selectedReasoningEffort}
onSelectReasoningEffort={setSelectedReasoningEffort}
+ followUpMode={followUpMode}
+ onSelectFollowUpMode={(value) => setFollowUpMode(normalizeFollowUpMode(value))}
+ composerMode={selectedComposerMode}
+ onSelectComposerMode={setSelectedComposerMode}
skills={status.skills}
selectedSkillPaths={selectedSkillPaths}
onToggleSkill={toggleSelectedSkill}
@@ -8055,6 +8573,7 @@ export default function App() {
attachments={attachments}
onUploadFiles={handleUploadFiles}
onRemoveAttachment={handleRemoveAttachment}
+ dropActive={appDropActive}
fileMentions={fileMentions}
onAddFileMention={addFileMention}
onRemoveFileMention={removeFileMention}
diff --git a/client/src/composer-accessibility.test.mjs b/client/src/composer-accessibility.test.mjs
new file mode 100644
index 0000000..f7f4cc5
--- /dev/null
+++ b/client/src/composer-accessibility.test.mjs
@@ -0,0 +1,11 @@
+import assert from 'node:assert/strict';
+import fs from 'node:fs/promises';
+import test from 'node:test';
+
+test('permission selector keeps an explicit accessible label when compact text is shown', async () => {
+ const app = await fs.readFile(new URL('./App.jsx', import.meta.url), 'utf8');
+ const buttonMatch = app.match(/]+className="permission-pill"[^>]*>/);
+
+ assert.ok(buttonMatch, 'permission selector button is rendered');
+ assert.match(buttonMatch[0], /aria-label=\{`权限：/);
+});
diff --git a/client/src/composer-running-send-menu.test.mjs b/client/src/composer-running-send-menu.test.mjs
new file mode 100644
index 0000000..dfa58ab
--- /dev/null
+++ b/client/src/composer-running-send-menu.test.mjs
@@ -0,0 +1,12 @@
+import assert from 'node:assert/strict';
+import fs from 'node:fs/promises';
+import test from 'node:test';
+
+test('running send menu uses official follow-up language', async () => {
+ const app = await fs.readFile(new URL('./App.jsx', import.meta.url), 'utf8');
+
+ assert.match(app, /引导<\/strong>/);
+ assert.match(app, /排队<\/strong>/);
+ assert.doesNotMatch(app, /发送到当前任务<\/strong>/);
+ assert.doesNotMatch(app, /加入队列<\/strong>/);
+});
diff --git a/client/src/composer-shortcuts.js b/client/src/composer-shortcuts.js
index 7877800..930ec42 100644
--- a/client/src/composer-shortcuts.js
+++ b/client/src/composer-shortcuts.js
@@ -7,6 +7,15 @@ export const SLASH_COMMANDS = [
description: '查看上下文、额度和连接状态',
action: 'open-context'
},
+ {
+ id: 'plan',
+ token: '/计划',
+ aliases: ['/plan'],
+ title: '计划模式',
+ description: '让 Codex 先规划并等待你选择方案',
+ action: 'set-mode',
+ mode: 'plan'
+ },
{
id: 'compact',
token: '/压缩上下文',
@@ -36,6 +45,11 @@ export const SLASH_COMMANDS = [
}
];
+export const COMPOSER_MODE_OPTIONS = [
+ { value: 'chat', label: 'Chat' },
+ { value: 'plan', label: 'Plan' }
+];
+
export function detectComposerToken(text, cursor = null) {
const value = String(text || '');
const end = Number.isInteger(cursor) ? Math.max(0, Math.min(cursor, value.length)) : value.length;
@@ -65,6 +79,49 @@ export function replaceComposerToken(text, token, replacement) {
return next.replace(/[ \t]{2,}/g, ' ');
}
+export function normalizeComposerMode(mode) {
+ return mode === 'plan' ? 'plan' : 'chat';
+}
+
+export function composerModeLabel(mode) {
+ const normalized = normalizeComposerMode(mode);
+ return COMPOSER_MODE_OPTIONS.find((option) => option.value === normalized)?.label || 'Chat';
+}
+
+export function selectedComposerModeForSession(modesBySession, sessionId, pendingMode = 'chat') {
+ if (!sessionId) {
+ return normalizeComposerMode(pendingMode);
+ }
+ return normalizeComposerMode(modesBySession?.[sessionId]);
+}
+
+export function migrateComposerMode(modesBySession, sourceSessionIds, targetSessionId) {
+ const current = modesBySession || {};
+ if (!targetSessionId) {
+ return current;
+ }
+ const sourceIds = (Array.isArray(sourceSessionIds) ? sourceSessionIds : [sourceSessionIds])
+ .filter((id) => id && id !== targetSessionId);
+ const sourceId = sourceIds.find((id) => current[id]);
+ if (!sourceId) {
+ return current;
+ }
+ const next = { ...current, [targetSessionId]: normalizeComposerMode(current[sourceId]) };
+ delete next[sourceId];
+ return next;
+}
+
+export function threadStartedComposerModeSourceIds(currentSession, payload = {}) {
+ const sourceIds = [];
+ if (payload.previousSessionId) {
+ sourceIds.push(payload.previousSessionId);
+ }
+ if (currentSession?.turnId && payload.turnId && currentSession.turnId === payload.turnId && currentSession.id) {
+ sourceIds.push(currentSession.id);
+ }
+ return [...new Set(sourceIds.filter((id) => id && id !== payload.sessionId))];
+}
+
export function filteredSlashCommands(query, commands = SLASH_COMMANDS) {
const normalized = String(query || '').trim().toLowerCase();
if (!normalized) {
diff --git a/client/src/composer-shortcuts.test.mjs b/client/src/composer-shortcuts.test.mjs
index 66a5f94..1898193 100644
--- a/client/src/composer-shortcuts.test.mjs
+++ b/client/src/composer-shortcuts.test.mjs
@@ -1,8 +1,14 @@
import assert from 'node:assert/strict';
import test from 'node:test';
import {
+ COMPOSER_MODE_OPTIONS,
+ SLASH_COMMANDS,
+ composerModeLabel,
detectComposerToken,
filteredSlashCommands,
+ migrateComposerMode,
+ threadStartedComposerModeSourceIds,
+ selectedComposerModeForSession,
replaceComposerToken
} from './composer-shortcuts.js';
@@ -41,3 +47,56 @@ test('filteredSlashCommands matches Chinese commands and English aliases', () =>
assert.equal(filteredSlashCommands('compact')[0].id, 'compact');
assert.equal(filteredSlashCommands('review')[0].id, 'review');
});
+
+test('plan slash command is a mode switch', () => {
+ const command = SLASH_COMMANDS.find((item) => item.id === 'plan');
+ assert.equal(command.action, 'set-mode');
+ assert.equal(command.mode, 'plan');
+ assert.equal(filteredSlashCommands('plan')[0].id, 'plan');
+ assert.equal(filteredSlashCommands('计划')[0].id, 'plan');
+});
+
+test('composer mode options support the menu labels', () => {
+ assert.deepEqual(COMPOSER_MODE_OPTIONS.map((option) => [option.value, option.label]), [
+ ['chat', 'Chat'],
+ ['plan', 'Plan']
+ ]);
+ assert.equal(composerModeLabel('plan'), 'Plan');
+ assert.equal(composerModeLabel('invalid'), 'Chat');
+});
+
+test('selectedComposerModeForSession preserves pending mode without a session', () => {
+ assert.equal(selectedComposerModeForSession({}, '', 'plan'), 'plan');
+ assert.equal(selectedComposerModeForSession({}, null, 'invalid'), 'chat');
+});
+
+test('migrateComposerMode carries draft mode to the real session id', () => {
+ assert.deepEqual(
+ migrateComposerMode({ 'draft-1': 'plan', other: 'chat' }, ['draft-1'], 'real-1'),
+ { other: 'chat', 'real-1': 'plan' }
+ );
+});
+
+test('migrateComposerMode preserves unrelated session modes', () => {
+ assert.deepEqual(
+ migrateComposerMode({ 'draft-a': 'plan', 'session-b': 'plan' }, ['draft-a', 'draft-a', 'session-b'], 'real-a'),
+ { 'session-b': 'plan', 'real-a': 'plan' }
+ );
+});
+
+test('threadStartedComposerModeSourceIds only includes sessions tied to the resolving turn', () => {
+ assert.deepEqual(
+ threadStartedComposerModeSourceIds(
+ { id: 'draft-1', turnId: 'turn-1' },
+ { previousSessionId: 'draft-1', sessionId: 'real-1', turnId: 'turn-1' }
+ ),
+ ['draft-1']
+ );
+ assert.deepEqual(
+ threadStartedComposerModeSourceIds(
+ { id: 'selected-background', turnId: 'turn-other' },
+ { previousSessionId: 'draft-background', sessionId: 'real-1', turnId: 'turn-1' }
+ ),
+ ['draft-background']
+ );
+});
diff --git a/client/src/mobile-composer-layout.test.mjs b/client/src/mobile-composer-layout.test.mjs
new file mode 100644
index 0000000..9274d30
--- /dev/null
+++ b/client/src/mobile-composer-layout.test.mjs
@@ -0,0 +1,86 @@
+import assert from 'node:assert/strict';
+import fs from 'node:fs/promises';
+import test from 'node:test';
+
+function blockFor(css, selector) {
+ const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+ const match = css.match(new RegExp(`${escaped}\\s*\\{([^}]*)\\}`, 'm'));
+ return match?.[1] || '';
+}
+
+test('narrow composer keeps permission control to its visible button area', async () => {
+ const css = await fs.readFile(new URL('./styles.css', import.meta.url), 'utf8');
+ const narrowComposer = css.match(/@media\s*\(max-width:\s*380px\)\s*\{(?[\s\S]*)\n\}/)?.groups?.body || '';
+ const compactComposer = css.match(/@media\s*\(max-width:\s*480px\)\s*\{(?[\s\S]*?)\n\}/)?.groups?.body || '';
+ const controlsRule = blockFor(narrowComposer, '.composer-controls');
+ const controlLeftRule = blockFor(narrowComposer, '.control-left');
+ const controlRightRule = blockFor(narrowComposer, '.control-right');
+ const permissionRule = blockFor(narrowComposer, '.permission-pill');
+ const permissionFullRule = blockFor(narrowComposer, '.permission-label-full');
+ const permissionShortRule = blockFor(narrowComposer, '.permission-label-short');
+ const skillMenuRule = blockFor(compactComposer, '.skill-menu');
+
+ assert.doesNotMatch(controlsRule, /flex-wrap:\s*wrap/);
+ assert.doesNotMatch(controlLeftRule, /display:\s*grid/);
+ assert.doesNotMatch(controlRightRule, /width:\s*100%/);
+ assert.match(permissionRule, /justify-self:\s*start/);
+ assert.doesNotMatch(permissionRule, /max-width:\s*none/);
+ assert.match(permissionFullRule, /display:\s*none/);
+ assert.match(permissionShortRule, /display:\s*inline/);
+ assert.match(skillMenuRule, /left:\s*12px/);
+ assert.match(skillMenuRule, /right:\s*12px/);
+ assert.match(skillMenuRule, /max-width:\s*none/);
+ assert.match(skillMenuRule, /min-width:\s*0/);
+});
+
+test('mobile composer moves mode and skill controls into the add menu while keeping context visible', async () => {
+ const app = await fs.readFile(new URL('./App.jsx', import.meta.url), 'utf8');
+ const css = await fs.readFile(new URL('./styles.css', import.meta.url), 'utf8');
+ const compactComposer = css.match(/@media\s*\(max-width:\s*480px\)\s*\{(?[\s\S]*?)\n\}/)?.groups?.body || '';
+ const modeSelectRule = blockFor(compactComposer, '.mode-select');
+ const skillSelectRule = blockFor(compactComposer, '.skill-select');
+ const modeMenuRule = blockFor(compactComposer, '.mode-menu');
+ const contextRule = blockFor(compactComposer, '.context-status-button');
+ const contextTextRule = blockFor(compactComposer, '.context-status-button > span:not(.context-status-dot)');
+
+ assert.match(app, /className="mobile-attach-option"[\s\S]*setOpenMenu\('composer-mode'\)/);
+ assert.match(app, /className="mobile-attach-option"[\s\S]*setOpenMenu\('skill'\)/);
+ assert.match(modeSelectRule, /display:\s*none/);
+ assert.match(skillSelectRule, /display:\s*none/);
+ assert.match(modeMenuRule, /left:\s*12px/);
+ assert.match(modeMenuRule, /right:\s*12px/);
+ assert.doesNotMatch(contextRule, /display:\s*none/);
+ assert.match(contextTextRule, /display:\s*none/);
+});
+
+test('mobile add menu labels the folded plan mode action clearly', async () => {
+ const app = await fs.readFile(new URL('./App.jsx', import.meta.url), 'utf8');
+
+ assert.match(app, /className="mobile-attach-option"[\s\S]*计划<\/span>/);
+ assert.doesNotMatch(app, /\{composerModeLabel\(composerMode\)\}<\/span>/);
+});
+
+test('mobile model selector uses compact text and content-sized width', async () => {
+ const app = await fs.readFile(new URL('./App.jsx', import.meta.url), 'utf8');
+ const css = await fs.readFile(new URL('./styles.css', import.meta.url), 'utf8');
+ const compactComposer = css.match(/@media\s*\(max-width:\s*480px\)\s*\{(?[\s\S]*?)\n\}/)?.groups?.body || '';
+ const narrowComposer = css.match(/@media\s*\(max-width:\s*380px\)\s*\{(?[\s\S]*)\n\}/)?.groups?.body || '';
+ const compactModelRule = blockFor(compactComposer, '.model-select');
+ const narrowModelRule = blockFor(narrowComposer, '.model-select');
+
+ assert.match(app, /\{shortModelName\(selectedModelLabel\)\} \{reasoningLabel\(selectedReasoningEffort\)\}<\/span>/);
+ assert.doesNotMatch(app, /\{selectedModelLabel\} \{reasoningLabel\(selectedReasoningEffort\)\}<\/span>/);
+ assert.match(compactModelRule, /width:\s*max-content/);
+ assert.match(compactModelRule, /max-width:\s*min\(44vw,\s*136px\)/);
+ assert.match(narrowModelRule, /max-width:\s*min\(44vw,\s*136px\)/);
+});
+
+test('desktop composer keeps anchored menus inside the desktop composer width', async () => {
+ const css = await fs.readFile(new URL('./styles.css', import.meta.url), 'utf8');
+ const desktopComposer = css.match(/@media\s*\(min-width:\s*1024px\)\s*\{(?[\s\S]*?)\n\}/)?.groups?.body || '';
+ const skillMenuRule = blockFor(desktopComposer, '.skill-menu');
+ const modelMenuRule = blockFor(desktopComposer, '.model-menu,\\s*\\n\\s*\\.send-mode-menu') || desktopComposer;
+
+ assert.match(skillMenuRule, /left:\s*calc\(var\(--desktop-composer-gutter\) \+ 154px\)/);
+ assert.match(modelMenuRule, /right:\s*var\(--desktop-composer-gutter\)/);
+});
diff --git a/client/src/model-menu-layout.test.mjs b/client/src/model-menu-layout.test.mjs
new file mode 100644
index 0000000..b09e2ec
--- /dev/null
+++ b/client/src/model-menu-layout.test.mjs
@@ -0,0 +1,22 @@
+import assert from 'node:assert/strict';
+import fs from 'node:fs/promises';
+import test from 'node:test';
+
+test('model menu opens on intelligence choices and keeps model and speed in secondary panels', async () => {
+ const app = await fs.readFile(new URL('./App.jsx', import.meta.url), 'utf8');
+
+ assert.match(app, /const \[modelMenuPanel, setModelMenuPanel\] = useState\('root'\)/);
+ assert.match(app, /modelMenuPanel === 'root'/);
+ assert.match(app, /setModelMenuPanel\('model'\)/);
+ assert.match(app, /setModelMenuPanel\('speed'\)/);
+
+ const rootStart = app.indexOf("modelMenuPanel === 'root'");
+ const modelStart = app.indexOf("modelMenuPanel === 'model'");
+ assert.notEqual(rootStart, -1);
+ assert.notEqual(modelStart, -1);
+ const rootPanel = app.slice(rootStart, modelStart);
+
+ assert.match(rootPanel, /REASONING_OPTIONS\.map/);
+ assert.doesNotMatch(rootPanel, /modelList\.map/);
+ assert.doesNotMatch(rootPanel, /MODEL_SPEED_OPTIONS\.map/);
+});
diff --git a/client/src/model-preferences.js b/client/src/model-preferences.js
new file mode 100644
index 0000000..a4f1e34
--- /dev/null
+++ b/client/src/model-preferences.js
@@ -0,0 +1,27 @@
+export const DEFAULT_MODEL_SPEED = 'standard';
+
+export const MODEL_SPEED_OPTIONS = [
+ {
+ value: 'standard',
+ label: '标准',
+ description: '默认速度，常规用量'
+ },
+ {
+ value: 'fast',
+ label: '快速',
+ description: '1.5 倍速，用量增加'
+ }
+];
+
+export function normalizeModelSpeed(value) {
+ return value === 'fast' ? 'fast' : DEFAULT_MODEL_SPEED;
+}
+
+export function modelSpeedLabel(value) {
+ const normalized = normalizeModelSpeed(value);
+ return MODEL_SPEED_OPTIONS.find((option) => option.value === normalized)?.label || '标准';
+}
+
+export function serviceTierForModelSpeed(value) {
+ return normalizeModelSpeed(value) === 'fast' ? 'fast' : null;
+}
diff --git a/client/src/model-preferences.test.mjs b/client/src/model-preferences.test.mjs
new file mode 100644
index 0000000..7fe2481
--- /dev/null
+++ b/client/src/model-preferences.test.mjs
@@ -0,0 +1,17 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import {
+ DEFAULT_MODEL_SPEED,
+ MODEL_SPEED_OPTIONS,
+ normalizeModelSpeed,
+ serviceTierForModelSpeed
+} from './model-preferences.js';
+
+test('model speed preference maps fast mode to the Codex service tier', () => {
+ assert.equal(DEFAULT_MODEL_SPEED, 'standard');
+ assert.deepEqual(MODEL_SPEED_OPTIONS.map((option) => option.value), ['standard', 'fast']);
+ assert.equal(normalizeModelSpeed('fast'), 'fast');
+ assert.equal(normalizeModelSpeed('anything-else'), 'standard');
+ assert.equal(serviceTierForModelSpeed('standard'), null);
+ assert.equal(serviceTierForModelSpeed('fast'), 'fast');
+});
diff --git a/client/src/notification-events.js b/client/src/notification-events.js
index e77e9d8..c16d368 100644
--- a/client/src/notification-events.js
+++ b/client/src/notification-events.js
@@ -57,6 +57,65 @@ export function payloadNeedsUserInput(payload = {}) {
return NEEDS_INPUT_PATTERN.test(text);
}
+export function userInputMessageId(payload = {}) {
+ return `user-input-${[payload.threadId || payload.sessionId, payload.turnId, payload.itemId].filter(Boolean).join('-')}`;
+}
+
+export function userInputKey(payload = {}) {
+ return [payload.threadId || payload.sessionId, payload.turnId, payload.itemId].filter(Boolean).join(':');
+}
+
+export function upsertUserInputMessage(current = [], payload = {}) {
+ const id = userInputMessageId(payload);
+ const existingIndex = current.findIndex((message) => message.id === id);
+ const nextMessage = {
+ id,
+ role: 'user_input_request',
+ sessionId: payload.threadId || payload.sessionId || null,
+ threadId: payload.threadId || payload.sessionId || null,
+ turnId: payload.turnId || null,
+ itemId: payload.itemId || null,
+ questions: Array.isArray(payload.questions) ? payload.questions : [],
+ status: payload.status || 'pending',
+ timestamp: payload.timestamp || new Date().toISOString(),
+ error: payload.error || ''
+ };
+ if (payload.conversationId) {
+ nextMessage.conversationId = payload.conversationId;
+ }
+ if (payload.transport) {
+ nextMessage.transport = payload.transport;
+ }
+ if (payload.delivery) {
+ nextMessage.delivery = payload.delivery;
+ }
+ if (existingIndex >= 0) {
+ const next = [...current];
+ next[existingIndex] = { ...current[existingIndex], ...nextMessage };
+ return next;
+ }
+ return [...current, nextMessage];
+}
+
+export function markUserInputMessageResolved(current = [], payload = {}) {
+ const id = userInputMessageId(payload);
+ return current.map((message) =>
+ message.id === id
+ ? { ...message, status: 'answered', error: '' }
+ : message
+ );
+}
+
+export function mergePendingUserInputMessages(messages = [], pendingUserInputs = {}, session = {}) {
+ const sessionId = session?.id || session?.sessionId || session?.threadId;
+ if (!sessionId) {
+ return messages;
+ }
+ return Object.values(pendingUserInputs || {})
+ .filter((payload) => (payload.threadId || payload.sessionId) === sessionId)
+ .reduce((nextMessages, payload) => upsertUserInputMessage(nextMessages, payload), messages);
+}
+
export function notificationFromPayload(payload = {}) {
if (payload.type === 'chat-complete') {
return {
@@ -79,6 +138,13 @@ export function notificationFromPayload(payload = {}) {
body: payload.detail || '当前任务已经停下。'
};
}
+ if (payload.type === 'user-input-request') {
+ return {
+ level: 'warning',
+ title: '需要处理',
+ body: payload.questions?.[0]?.question || 'Codex 正在等待你的选择。'
+ };
+ }
if ((payload.type === 'status-update' || payload.type === 'activity-update') && payloadNeedsUserInput(payload)) {
return {
level: 'warning',
diff --git a/client/src/notification-events.test.mjs b/client/src/notification-events.test.mjs
index 6ba1158..80103e0 100644
--- a/client/src/notification-events.test.mjs
+++ b/client/src/notification-events.test.mjs
@@ -1,9 +1,12 @@
import assert from 'node:assert/strict';
import test from 'node:test';
import {
+ markUserInputMessageResolved,
+ mergePendingUserInputMessages,
notificationFromPayload,
payloadNeedsUserInput,
- shouldUseWebNotification
+ shouldUseWebNotification,
+ upsertUserInputMessage
} from './notification-events.js';
test('notificationFromPayload creates completion and failure toasts', () => {
@@ -31,3 +34,82 @@ test('shouldUseWebNotification only fires when permission and context allow it',
assert.equal(shouldUseWebNotification({ enabled: true, permission: 'default', visibilityState: 'hidden' }), false);
assert.equal(shouldUseWebNotification({ enabled: false, permission: 'granted', visibilityState: 'hidden' }), false);
});
+
+test('notificationFromPayload warns for explicit user input requests', () => {
+ const notification = notificationFromPayload({
+ type: 'user-input-request',
+ questions: [{ question: '选择方案' }]
+ });
+
+ assert.equal(notification.level, 'warning');
+ assert.equal(notification.title, '需要处理');
+});
+
+test('mergePendingUserInputMessages injects pending cards for the selected session', () => {
+ const messages = [{ id: 'assistant-1', role: 'assistant', content: '先前回复' }];
+ const pending = {
+ 'thread-2:turn-2:item-2': {
+ type: 'user-input-request',
+ threadId: 'thread-2',
+ turnId: 'turn-2',
+ itemId: 'item-2',
+ questions: [{ id: 'choice', question: '选择方案' }]
+ },
+ 'thread-1:turn-1:item-1': {
+ type: 'user-input-request',
+ threadId: 'thread-1',
+ turnId: 'turn-1',
+ itemId: 'item-1',
+ questions: [{ id: 'approval', question: '继续吗' }]
+ }
+ };
+
+ const merged = mergePendingUserInputMessages(messages, pending, { id: 'thread-1' });
+
+ assert.deepEqual(merged.map((message) => message.id), [
+ 'assistant-1',
+ 'user-input-thread-1-turn-1-item-1'
+ ]);
+ assert.equal(merged[1].role, 'user_input_request');
+ assert.equal(merged[1].status, 'pending');
+});
+
+test('upsertUserInputMessage preserves explicit desktop metadata', () => {
+ const next = upsertUserInputMessage([], {
+ type: 'user-input-request',
+ threadId: 'thread-1',
+ turnId: 'turn-1',
+ itemId: 'item-1',
+ conversationId: 'conversation-1',
+ transport: 'desktop-ipc',
+ delivery: 'desktop-ipc',
+ questions: [{ id: 'choice', question: '选择方案' }]
+ });
+
+ assert.equal(next[0].conversationId, 'conversation-1');
+ assert.equal(next[0].transport, 'desktop-ipc');
+ assert.equal(next[0].delivery, 'desktop-ipc');
+});
+
+test('markUserInputMessageResolved marks a submitted card answered locally', () => {
+ const messages = [
+ {
+ id: 'user-input-thread-1-turn-1-item-1',
+ role: 'user_input_request',
+ threadId: 'thread-1',
+ turnId: 'turn-1',
+ itemId: 'item-1',
+ status: 'pending',
+ error: 'old'
+ }
+ ];
+
+ const next = markUserInputMessageResolved(messages, {
+ threadId: 'thread-1',
+ turnId: 'turn-1',
+ itemId: 'item-1'
+ });
+
+ assert.equal(next[0].status, 'answered');
+ assert.equal(next[0].error, '');
+});
diff --git a/client/src/permission-mode.js b/client/src/permission-mode.js
new file mode 100644
index 0000000..155ce6c
--- /dev/null
+++ b/client/src/permission-mode.js
@@ -0,0 +1,15 @@
+export const PERMISSION_OPTIONS = [
+ { value: 'default', label: '默认权限', shortLabel: '默认' },
+ { value: 'acceptEdits', label: '自动接受编辑', shortLabel: '自动' },
+ { value: 'bypassPermissions', label: '完全访问', shortLabel: '全权', danger: true }
+];
+
+export const DEFAULT_PERMISSION_MODE = 'bypassPermissions';
+
+export function permissionLabel(value) {
+ return PERMISSION_OPTIONS.find((option) => option.value === value)?.label || '默认权限';
+}
+
+export function permissionShortLabel(value) {
+ return PERMISSION_OPTIONS.find((option) => option.value === value)?.shortLabel || '默认';
+}
diff --git a/client/src/permission-mode.test.mjs b/client/src/permission-mode.test.mjs
new file mode 100644
index 0000000..3cba39d
--- /dev/null
+++ b/client/src/permission-mode.test.mjs
@@ -0,0 +1,12 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { permissionLabel, permissionShortLabel } from './permission-mode.js';
+
+test('permission labels have compact mobile variants', () => {
+ assert.equal(permissionLabel('default'), '默认权限');
+ assert.equal(permissionLabel('acceptEdits'), '自动接受编辑');
+ assert.equal(permissionLabel('bypassPermissions'), '完全访问');
+ assert.equal(permissionShortLabel('default'), '默认');
+ assert.equal(permissionShortLabel('acceptEdits'), '自动');
+ assert.equal(permissionShortLabel('bypassPermissions'), '全权');
+});
diff --git a/client/src/plan-mode-client.js b/client/src/plan-mode-client.js
new file mode 100644
index 0000000..fff8de0
--- /dev/null
+++ b/client/src/plan-mode-client.js
@@ -0,0 +1,13 @@
+import { collaborationModeForComposer } from '../../shared/collaboration-mode.js';
+
+export function buildClientCollaborationMode({
+ composerMode = 'chat',
+ sendMode = 'start',
+ model = '',
+ reasoningEffort = ''
+} = {}) {
+ if (sendMode === 'steer') {
+ return null;
+ }
+ return collaborationModeForComposer({ composerMode, model, reasoningEffort });
+}
diff --git a/client/src/plan-mode-client.test.mjs b/client/src/plan-mode-client.test.mjs
new file mode 100644
index 0000000..7fa2f59
--- /dev/null
+++ b/client/src/plan-mode-client.test.mjs
@@ -0,0 +1,25 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { buildClientCollaborationMode } from './plan-mode-client.js';
+
+test('buildClientCollaborationMode returns plan payload only for new plan turns', () => {
+ assert.deepEqual(buildClientCollaborationMode({
+ composerMode: 'plan',
+ sendMode: 'start',
+ model: 'gpt-5.5',
+ reasoningEffort: 'xhigh'
+ }), {
+ mode: 'plan',
+ settings: {
+ model: 'gpt-5.5',
+ reasoning_effort: 'xhigh',
+ developer_instructions: null
+ }
+ });
+ assert.equal(buildClientCollaborationMode({
+ composerMode: 'plan',
+ sendMode: 'steer',
+ model: 'gpt-5.5',
+ reasoningEffort: 'xhigh'
+ }), null);
+});
diff --git a/client/src/send-state.js b/client/src/send-state.js
index d4b8274..86cb35b 100644
--- a/client/src/send-state.js
+++ b/client/src/send-state.js
@@ -33,6 +33,7 @@ export function composerSendState({
uploading = false,
desktopBridge = null,
steerable = true,
+ followUpMode = 'queue',
sessionIsDraft = false
} = {}) {
const bridge = normalizeDesktopBridge(desktopBridge);
@@ -81,10 +82,11 @@ export function composerSendState({
};
}
if (running && hasInput) {
+ const normalizedFollowUpMode = followUpMode === 'steer' && steerable ? 'steer' : 'queue';
return {
disabled: false,
- label: steerable ? '发送到当前任务' : '选择发送方式',
- mode: steerable ? 'steer' : 'queue',
+ label: normalizedFollowUpMode === 'steer' ? '引导' : '排队',
+ mode: normalizedFollowUpMode,
showMenu: true,
canSteer: Boolean(steerable),
canQueue: true,
diff --git a/client/src/send-state.test.mjs b/client/src/send-state.test.mjs
index 20ecf12..c85de8d 100644
--- a/client/src/send-state.test.mjs
+++ b/client/src/send-state.test.mjs
@@ -25,7 +25,7 @@ test('composerSendState starts a desktop turn when idle', () => {
assert.equal(state.showMenu, false);
});
-test('composerSendState defaults running input to steer when possible', () => {
+test('composerSendState defaults running input to queue follow-up mode', () => {
const state = composerSendState({
running: true,
hasInput: true,
@@ -33,7 +33,23 @@ test('composerSendState defaults running input to steer when possible', () => {
desktopBridge: { connected: true, mode: 'desktop-proxy' }
});
+ assert.equal(state.mode, 'queue');
+ assert.equal(state.label, '排队');
+ assert.equal(state.showMenu, true);
+ assert.equal(state.canSteer, true);
+});
+
+test('composerSendState can default running input to steer follow-up mode', () => {
+ const state = composerSendState({
+ running: true,
+ hasInput: true,
+ steerable: true,
+ followUpMode: 'steer',
+ desktopBridge: { connected: true, mode: 'desktop-proxy' }
+ });
+
assert.equal(state.mode, 'steer');
+ assert.equal(state.label, '引导');
assert.equal(state.showMenu, true);
assert.equal(state.canSteer, true);
});
diff --git a/client/src/styles.css b/client/src/styles.css
index ff8c8db..8d8d45d 100644
--- a/client/src/styles.css
+++ b/client/src/styles.css
@@ -2,6 +2,7 @@
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: #1f2328;
background: #f7f7f4;
+ color-scheme: light;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-text-size-adjust: 100%;
@@ -21,13 +22,14 @@
--glass-strong: rgba(255, 255, 255, 0.94);
--hairline: rgba(23, 24, 27, 0.1);
--soft-shadow: 0 10px 32px rgba(17, 24, 39, 0.09);
- --bubble-user: #18181b;
- --bubble-user-text: #ffffff;
+ --bubble-user: #eef4ff;
+ --bubble-user-text: #1f2328;
}
[data-theme="dark"] {
color: #f4f4f5;
background: #171717;
+ color-scheme: dark;
--surface: #171717;
--panel: #1f1f1f;
--panel-2: #262626;
@@ -43,8 +45,8 @@
--glass-strong: rgba(31, 31, 31, 0.94);
--hairline: rgba(255, 255, 255, 0.11);
--soft-shadow: 0 12px 34px rgba(0, 0, 0, 0.34);
- --bubble-user: #f4f4f5;
- --bubble-user-text: #111113;
+ --bubble-user: #303030;
+ --bubble-user-text: #f4f4f5;
}
* {
@@ -1185,7 +1187,7 @@ button {
.theme-segment {
display: grid;
- grid-template-columns: 1fr 1fr;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 4px;
padding: 4px;
border-radius: 8px;
@@ -2201,10 +2203,10 @@ button {
.message-row.is-user .message-bubble {
color: var(--bubble-user-text);
background: var(--bubble-user);
- border-color: transparent;
+ border-color: rgba(37, 99, 235, 0.14);
border-radius: 22px;
border-bottom-right-radius: 7px;
- box-shadow: 0 8px 24px rgba(17, 24, 39, 0.13);
+ box-shadow: 0 8px 20px rgba(37, 99, 235, 0.1);
}
.message-row.is-assistant .message-bubble {
@@ -2251,6 +2253,181 @@ button {
border-color: rgba(194, 65, 58, 0.16);
}
+.message-row.is-activity .user-input-card {
+ display: grid;
+ gap: 13px;
+ width: min(100%, 560px);
+ max-width: 100%;
+ padding: 14px;
+ border: 1px solid rgba(37, 99, 235, 0.2);
+ border-radius: 14px;
+ color: var(--text);
+ background: var(--glass-strong);
+ box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08);
+ backdrop-filter: blur(16px) saturate(1.08);
+}
+
+.user-input-card.is-answered {
+ border-color: rgba(21, 164, 107, 0.22);
+}
+
+.user-input-card-head,
+.user-input-actions {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ min-width: 0;
+}
+
+.user-input-card-head {
+ color: var(--accent);
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 18px;
+}
+
+.user-input-card.is-answered .user-input-card-head {
+ color: var(--green);
+}
+
+.user-input-card-head svg,
+.user-input-actions svg {
+ flex: 0 0 auto;
+}
+
+.user-input-question {
+ display: grid;
+ gap: 8px;
+ min-width: 0;
+}
+
+.user-input-question strong {
+ color: var(--text);
+ font-size: 14px;
+ line-height: 20px;
+}
+
+.user-input-question p {
+ margin: 0;
+ color: var(--text);
+ font-size: 14px;
+ line-height: 1.55;
+ overflow-wrap: anywhere;
+}
+
+.user-input-options {
+ display: grid;
+ gap: 8px;
+}
+
+.user-input-options button {
+ display: grid;
+ gap: 3px;
+ width: 100%;
+ min-width: 0;
+ min-height: 44px;
+ padding: 9px 11px;
+ border: 1px solid var(--line);
+ border-radius: 8px;
+ color: var(--text);
+ background: var(--panel);
+ text-align: left;
+}
+
+.user-input-options button:hover:not(:disabled),
+.user-input-options button:focus-visible:not(:disabled) {
+ border-color: rgba(37, 99, 235, 0.38);
+ background: var(--accent-soft);
+}
+
+.user-input-options button.is-selected {
+ border-color: var(--accent);
+ background: var(--accent-soft);
+}
+
+.user-input-options span {
+ min-width: 0;
+ overflow-wrap: anywhere;
+ font-size: 14px;
+ line-height: 19px;
+ font-weight: 650;
+}
+
+.user-input-options small {
+ min-width: 0;
+ color: var(--muted);
+ font-size: 12px;
+ line-height: 17px;
+ overflow-wrap: anywhere;
+}
+
+.user-input-question input {
+ width: 100%;
+ min-width: 0;
+ min-height: 40px;
+ padding: 0 10px;
+ border: 1px solid var(--line);
+ border-radius: 8px;
+ color: var(--text);
+ background: var(--panel);
+}
+
+.user-input-question input:focus-visible {
+ outline: 2px solid rgba(37, 99, 235, 0.24);
+ outline-offset: 1px;
+ border-color: var(--accent);
+}
+
+.user-input-actions {
+ flex-wrap: wrap;
+}
+
+.user-input-actions button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
+ min-height: 34px;
+ padding: 0 12px;
+ border: 1px solid var(--line);
+ border-radius: 8px;
+ color: var(--text);
+ background: var(--panel);
+ font-size: 13px;
+ font-weight: 650;
+}
+
+.user-input-actions button:hover:not(:disabled),
+.user-input-actions button:focus-visible:not(:disabled) {
+ border-color: rgba(37, 99, 235, 0.38);
+ color: var(--accent);
+ background: var(--accent-soft);
+}
+
+.user-input-options button:disabled,
+.user-input-question input:disabled,
+.user-input-actions button:disabled {
+ cursor: default;
+ opacity: 0.58;
+}
+
+.user-input-error {
+ color: var(--danger);
+ font-size: 13px;
+ line-height: 18px;
+ overflow-wrap: anywhere;
+}
+
+[data-theme="dark"] .message-row.is-activity .user-input-card {
+ border-color: rgba(159, 183, 255, 0.24);
+ background: var(--glass-strong);
+ box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
+}
+
+[data-theme="dark"] .user-input-card.is-answered {
+ border-color: rgba(55, 197, 138, 0.25);
+}
+
.message-actions {
display: inline-flex;
align-items: center;
@@ -2990,7 +3167,7 @@ button {
}
.message-row.is-user .message-content a {
- color: #cfe3ff;
+ color: #174eb8;
}
[data-theme="dark"] .message-content a {
@@ -3100,23 +3277,23 @@ button {
}
.message-row.is-user .message-content code {
- color: #f8fafc;
- background: rgba(255, 255, 255, 0.16);
+ color: #1f2937;
+ background: rgba(37, 99, 235, 0.1);
}
.message-row.is-user .message-content pre {
- color: #f8fafc;
- background: rgba(255, 255, 255, 0.1);
+ color: #1f2937;
+ background: rgba(37, 99, 235, 0.08);
}
.message-row.is-user .markdown-code-block {
- border-color: rgba(255, 255, 255, 0.16);
- background: rgba(255, 255, 255, 0.1);
+ border-color: rgba(37, 99, 235, 0.14);
+ background: rgba(37, 99, 235, 0.08);
}
.message-row.is-user .markdown-code-head {
- border-bottom-color: rgba(255, 255, 255, 0.14);
- color: rgba(248, 250, 252, 0.72);
+ border-bottom-color: rgba(37, 99, 235, 0.14);
+ color: rgba(31, 35, 40, 0.68);
}
.markdown-table-wrap {
@@ -3342,7 +3519,7 @@ button {
}
.message-row.is-user .message-bubble time {
- color: rgba(255, 255, 255, 0.64);
+ color: rgba(31, 35, 40, 0.58);
}
[data-theme="dark"] .empty-orbit {
@@ -3617,7 +3794,7 @@ button {
}
[data-theme="dark"] .message-row.is-user .message-bubble time {
- color: rgba(17, 17, 19, 0.62);
+ color: rgba(244, 244, 245, 0.62);
}
[data-theme="dark"] .scroll-latest-button {
@@ -3642,6 +3819,26 @@ button {
overflow: visible;
}
+.composer-drop-overlay {
+ position: absolute;
+ inset: 7px 12px calc(env(safe-area-inset-bottom, 0px) + 8px);
+ z-index: 70;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ border: 1px dashed rgba(37, 99, 235, 0.48);
+ border-radius: 24px;
+ color: var(--accent);
+ background: rgba(231, 239, 255, 0.88);
+ box-shadow: var(--soft-shadow);
+ pointer-events: none;
+}
+
+[data-theme="dark"] .composer-drop-overlay {
+ background: rgba(37, 99, 235, 0.18);
+}
+
[data-keyboard="open"] .composer-wrap {
padding-bottom: 2px;
}
@@ -3677,12 +3874,21 @@ button {
left: 14px;
}
+.composer-menu .mobile-attach-option {
+ display: none;
+}
+
.permission-menu {
left: 56px;
}
+.mode-menu {
+ left: 116px;
+ min-width: 132px;
+}
+
.skill-menu {
- left: 96px;
+ left: 176px;
min-width: 238px;
}
@@ -3794,11 +4000,51 @@ button {
color: var(--danger);
}
+.composer-menu .menu-back-button {
+ color: var(--muted);
+}
+
.composer-menu button:disabled {
cursor: not-allowed;
opacity: 0.46;
}
+.menu-item-main {
+ display: block;
+ min-width: 0;
+ flex: 1 1 auto;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.menu-item-main strong,
+.menu-item-main small {
+ display: block;
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.menu-item-main strong {
+ font-size: 14px;
+ font-weight: 650;
+}
+
+.menu-item-main small {
+ margin-top: 2px;
+ color: #7b838d;
+ font-size: 11px;
+ line-height: 14px;
+}
+
+.menu-chevron {
+ flex: 0 0 auto;
+ margin-left: auto;
+ color: #9aa0a6;
+}
+
.skill-menu-item > span:last-child {
display: block;
}
@@ -4024,6 +4270,7 @@ button {
}
.permission-pill,
+.mode-select,
.model-select,
.skill-select {
display: inline-flex;
@@ -4043,6 +4290,27 @@ button {
overflow: hidden;
}
+.permission-label-full {
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.permission-label-short {
+ display: none;
+}
+
+.mode-select {
+ max-width: 78px;
+ overflow: hidden;
+}
+
+.mode-select span {
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
.skill-select {
max-width: 108px;
overflow: hidden;
@@ -4064,6 +4332,17 @@ button {
text-overflow: ellipsis;
}
+.model-select span {
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.model-speed-icon {
+ flex: 0 0 auto;
+}
+
.context-status-wrap {
flex: 0 0 auto;
}
@@ -4227,8 +4506,8 @@ button {
}
.send-button {
- color: var(--bubble-user-text);
- background: var(--bubble-user);
+ color: #ffffff;
+ background: var(--accent);
}
.send-button:disabled {
@@ -4480,11 +4759,16 @@ button {
[data-theme="dark"] .skill-menu-item small,
[data-theme="dark"] .send-mode-menu small,
+[data-theme="dark"] .menu-item-main small,
[data-theme="dark"] .shortcut-menu small,
[data-theme="dark"] .menu-empty {
color: #a1a1aa;
}
+[data-theme="dark"] .menu-chevron {
+ color: #a1a1aa;
+}
+
[data-theme="dark"] .composer {
border-color: #303030;
background: #202020;
@@ -4520,11 +4804,17 @@ button {
}
[data-theme="dark"] .permission-pill,
+[data-theme="dark"] .mode-select,
[data-theme="dark"] .model-select,
[data-theme="dark"] .skill-select {
color: #d4d4d8;
}
+[data-theme="dark"] .send-button {
+ color: #ffffff;
+ background: #3b82f6;
+}
+
[data-theme="dark"] .context-status-button {
color: #d4d4d8;
}
@@ -4584,8 +4874,8 @@ button {
}
[data-theme="dark"] .send-button {
- color: #171717;
- background: #f4f4f5;
+ color: #ffffff;
+ background: #3b82f6;
}
[data-theme="dark"] .send-button.is-running {
@@ -4681,7 +4971,7 @@ button {
display: flex;
flex-direction: column;
justify-content: center;
- align-items: flex-start;
+ align-items: center;
padding: 28px;
background: var(--surface);
color: var(--text);
@@ -4699,6 +4989,7 @@ button {
}
.pairing-screen h1 {
+ width: min(100%, 420px);
margin: 0;
font-size: 30px;
line-height: 1.08;
@@ -4710,6 +5001,7 @@ button {
}
.pairing-lead {
+ width: min(100%, 420px);
max-width: 410px;
margin-top: 10px !important;
font-size: 16px;
@@ -4720,6 +5012,7 @@ button {
display: flex;
flex-wrap: wrap;
gap: 8px;
+ width: min(100%, 420px);
max-width: 420px;
margin: 18px 0 20px;
}
@@ -4840,7 +5133,7 @@ button {
}
}
-@media (min-width: 820px) {
+@media (min-width: 820px) and (max-width: 1023.98px) {
body {
display: grid;
place-items: center;
@@ -4873,29 +5166,252 @@ button {
}
}
+@media (min-width: 1024px) {
+ body {
+ display: block;
+ background: var(--surface);
+ }
+
+ #root {
+ width: 100%;
+ height: var(--app-height, 100dvh);
+ border: 0;
+ box-shadow: none;
+ }
+
+ .app-shell {
+ position: fixed;
+ display: grid;
+ grid-template-columns: 320px minmax(0, 1fr);
+ grid-template-rows: auto minmax(0, 1fr) auto;
+ grid-template-areas:
+ "drawer top"
+ "drawer chat"
+ "drawer composer";
+ width: 100vw;
+ max-width: 100vw;
+ height: var(--app-height, 100dvh);
+ transition: grid-template-columns 180ms ease;
+ }
+
+ .app-shell.desktop-drawer-collapsed {
+ grid-template-columns: 0 minmax(0, 1fr);
+ }
+
+ .top-bar {
+ grid-area: top;
+ padding: 12px 24px 10px;
+ }
+
+ .drawer-backdrop {
+ display: none;
+ }
+
+ .drawer {
+ grid-area: drawer;
+ position: relative;
+ top: auto;
+ bottom: auto;
+ left: auto;
+ width: 100%;
+ min-width: 0;
+ height: 100%;
+ padding: 18px 16px;
+ border-right: 1px solid var(--hairline);
+ background: rgba(250, 251, 250, 0.94);
+ box-shadow: none;
+ transform: none;
+ transition: opacity 140ms ease;
+ z-index: 15;
+ }
+
+ [data-theme="dark"] .drawer {
+ background: rgba(26, 26, 27, 0.96);
+ }
+
+ .app-shell.desktop-drawer-collapsed .drawer {
+ width: 0;
+ padding-right: 0;
+ padding-left: 0;
+ border-right: 0;
+ opacity: 0;
+ pointer-events: none;
+ }
+
+ .drawer-header .icon-button,
+ .drawer-subheader .icon-button:last-child {
+ display: none;
+ }
+
+ .chat-pane {
+ grid-area: chat;
+ max-width: none;
+ padding: 24px 24px 18px;
+ }
+
+ .chat-content {
+ max-width: 1040px;
+ }
+
+ .message-stack {
+ max-width: min(78%, 760px);
+ }
+
+ .message-row.is-assistant .message-stack {
+ max-width: 100%;
+ }
+
+ .composer-wrap {
+ --desktop-composer-gutter: max(24px, calc((100% - 1040px) / 2));
+ grid-area: composer;
+ max-width: none;
+ padding: 8px 24px 18px;
+ }
+
+ .composer-wrap > .queued-drafts-panel,
+ .composer-wrap > .composer-run-status,
+ .composer-wrap > .composer {
+ width: min(1040px, 100%);
+ margin-right: auto;
+ margin-left: auto;
+ }
+
+ .composer-drop-overlay {
+ inset: 8px var(--desktop-composer-gutter) 18px;
+ width: min(1040px, calc(100% - 48px));
+ margin-right: auto;
+ margin-left: auto;
+ }
+
+ .shortcut-menu {
+ right: var(--desktop-composer-gutter);
+ left: var(--desktop-composer-gutter);
+ }
+
+ .attach-menu {
+ left: var(--desktop-composer-gutter);
+ }
+
+ .permission-menu {
+ left: calc(var(--desktop-composer-gutter) + 42px);
+ }
+
+ .mode-menu {
+ left: calc(var(--desktop-composer-gutter) + 106px);
+ }
+
+ .skill-menu {
+ left: calc(var(--desktop-composer-gutter) + 154px);
+ }
+
+ .model-menu,
+ .send-mode-menu {
+ right: var(--desktop-composer-gutter);
+ }
+
+ .context-popover {
+ right: calc(var(--desktop-composer-gutter) + 84px);
+ }
+}
+
@media (max-width: 480px) {
.permission-pill {
max-width: 104px;
}
+ .composer-menu .mobile-attach-option {
+ display: flex;
+ }
+
+ .mode-select {
+ display: none;
+ }
+
.model-select {
- max-width: 104px;
+ width: max-content;
+ max-width: min(44vw, 136px);
}
.skill-select {
- max-width: 86px;
+ display: none;
+ }
+
+ .mode-menu {
+ right: 12px;
+ left: 12px;
+ min-width: 0;
+ max-width: none;
+ }
+
+ .skill-menu {
+ right: 12px;
+ left: 12px;
+ min-width: 0;
+ max-width: none;
+ }
+
+ .context-status-button {
+ min-width: 28px;
+ padding: 0 5px;
+ }
+
+ .context-status-button > span:not(.context-status-dot) {
+ display: none;
}
}
@media (max-width: 380px) {
+ .composer-controls {
+ flex-wrap: nowrap;
+ align-items: center;
+ gap: 4px;
+ }
+
+ .control-left {
+ display: flex;
+ gap: 4px;
+ width: auto;
+ flex: 1 1 auto;
+ }
+
+ .control-right {
+ gap: 3px;
+ width: auto;
+ flex: 0 0 auto;
+ }
+
+ .control-left .ghost-icon {
+ width: 34px;
+ height: 32px;
+ }
+
.permission-pill {
- max-width: 92px;
+ justify-self: start;
+ flex: 0 0 auto;
+ max-width: 54px;
overflow: hidden;
}
+ .permission-label-full {
+ display: none;
+ }
+
+ .permission-label-short {
+ display: inline;
+ }
+
+ .mode-select {
+ flex: 0 0 auto;
+ max-width: 62px;
+ }
+
+ .skill-select {
+ flex: 0 0 34px;
+ }
+
.model-select {
- max-width: 86px;
+ max-width: min(44vw, 136px);
}
.skill-select {
diff --git a/client/src/theme-preference.js b/client/src/theme-preference.js
new file mode 100644
index 0000000..4ca3c3a
--- /dev/null
+++ b/client/src/theme-preference.js
@@ -0,0 +1,37 @@
+export const THEME_OPTIONS = [
+ { value: 'system', label: '自动' },
+ { value: 'light', label: '白色' },
+ { value: 'dark', label: '黑色' }
+];
+
+export const THEME_META_COLORS = {
+ light: '#f7f7f4',
+ dark: '#171717'
+};
+
+const THEME_VALUES = new Set(THEME_OPTIONS.map((option) => option.value));
+
+export function normalizeThemePreference(preference, fallback = 'system') {
+ if (THEME_VALUES.has(preference)) {
+ return preference;
+ }
+ return THEME_VALUES.has(fallback) ? fallback : 'system';
+}
+
+export function resolveThemePreference(preference, systemPrefersDark = false) {
+ const normalized = normalizeThemePreference(preference);
+ if (normalized === 'system') {
+ return systemPrefersDark ? 'dark' : 'light';
+ }
+ return normalized;
+}
+
+export function applyThemeToDocument(document, effectiveTheme) {
+ if (!document?.documentElement) {
+ return;
+ }
+ const theme = effectiveTheme === 'dark' ? 'dark' : 'light';
+ document.documentElement.dataset.theme = theme;
+ const themeColor = document.querySelector?.('meta[name="theme-color"]');
+ themeColor?.setAttribute('content', THEME_META_COLORS[theme]);
+}
diff --git a/client/src/theme-preference.test.mjs b/client/src/theme-preference.test.mjs
new file mode 100644
index 0000000..2713d2f
--- /dev/null
+++ b/client/src/theme-preference.test.mjs
@@ -0,0 +1,47 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import {
+ THEME_META_COLORS,
+ THEME_OPTIONS,
+ applyThemeToDocument,
+ normalizeThemePreference,
+ resolveThemePreference
+} from './theme-preference.js';
+
+test('theme preference normalizes stored values', () => {
+ assert.equal(normalizeThemePreference('system'), 'system');
+ assert.equal(normalizeThemePreference('light'), 'light');
+ assert.equal(normalizeThemePreference('dark'), 'dark');
+ assert.equal(normalizeThemePreference('unexpected'), 'system');
+ assert.equal(normalizeThemePreference(null, 'light'), 'light');
+});
+
+test('system theme resolves from the OS preference', () => {
+ assert.equal(resolveThemePreference('system', true), 'dark');
+ assert.equal(resolveThemePreference('system', false), 'light');
+ assert.equal(resolveThemePreference('dark', false), 'dark');
+ assert.equal(resolveThemePreference('light', true), 'light');
+});
+
+test('theme options expose auto, light, and dark choices', () => {
+ assert.deepEqual(THEME_OPTIONS.map((option) => [option.value, option.label]), [
+ ['system', '自动'],
+ ['light', '白色'],
+ ['dark', '黑色']
+ ]);
+});
+
+test('applyThemeToDocument updates dataset and theme-color meta', () => {
+ const meta = { content: '', setAttribute(name, value) { this[name] = value; } };
+ const document = {
+ documentElement: { dataset: {} },
+ querySelector(selector) {
+ return selector === 'meta[name="theme-color"]' ? meta : null;
+ }
+ };
+
+ applyThemeToDocument(document, 'dark');
+
+ assert.equal(document.documentElement.dataset.theme, 'dark');
+ assert.equal(meta.content, THEME_META_COLORS.dark);
+});
diff --git a/client/src/ui-css.test.mjs b/client/src/ui-css.test.mjs
new file mode 100644
index 0000000..26254a0
--- /dev/null
+++ b/client/src/ui-css.test.mjs
@@ -0,0 +1,25 @@
+import assert from 'node:assert/strict';
+import fs from 'node:fs/promises';
+import test from 'node:test';
+
+function blockFor(css, selector) {
+ const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+ const match = css.match(new RegExp(`${escaped}\\s*\\{([^}]*)\\}`, 'm'));
+ return match?.[1] || '';
+}
+
+test('pairing screen centers the pairing panel on wide viewports', async () => {
+ const css = await fs.readFile(new URL('./styles.css', import.meta.url), 'utf8');
+ const rule = blockFor(css, '.pairing-screen');
+
+ assert.match(rule, /justify-content:\s*center/);
+ assert.match(rule, /align-items:\s*center/);
+});
+
+test('light theme user bubbles are light, not dark chat bubbles', async () => {
+ const css = await fs.readFile(new URL('./styles.css', import.meta.url), 'utf8');
+ const root = blockFor(css, ':root');
+
+ assert.doesNotMatch(root, /--bubble-user:\s*#18181b/i);
+ assert.doesNotMatch(root, /--bubble-user-text:\s*#ffffff/i);
+});
diff --git a/client/src/upload-inputs.js b/client/src/upload-inputs.js
new file mode 100644
index 0000000..349cd00
--- /dev/null
+++ b/client/src/upload-inputs.js
@@ -0,0 +1,40 @@
+function asArray(value) {
+ return Array.from(value || []);
+}
+
+function isImageFile(file) {
+ return Boolean(file && String(file.type || '').startsWith('image/'));
+}
+
+export function filesFromClipboardEvent(event) {
+ const data = event?.clipboardData;
+ if (!data) {
+ return [];
+ }
+
+ const itemFiles = asArray(data.items)
+ .filter((item) => item?.kind === 'file' && String(item.type || '').startsWith('image/'))
+ .map((item) => item.getAsFile?.())
+ .filter(isImageFile);
+
+ if (itemFiles.length) {
+ return itemFiles;
+ }
+
+ return asArray(data.files).filter(isImageFile);
+}
+
+export function filesFromDropEvent(event) {
+ return asArray(event?.dataTransfer?.files).filter(Boolean);
+}
+
+export function dragEventHasFiles(event) {
+ const transfer = event?.dataTransfer;
+ if (!transfer) {
+ return false;
+ }
+ if (asArray(transfer.files).length > 0) {
+ return true;
+ }
+ return asArray(transfer.types).includes('Files');
+}
diff --git a/client/src/upload-inputs.test.mjs b/client/src/upload-inputs.test.mjs
new file mode 100644
index 0000000..500a0a9
--- /dev/null
+++ b/client/src/upload-inputs.test.mjs
@@ -0,0 +1,77 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import {
+ dragEventHasFiles,
+ filesFromClipboardEvent,
+ filesFromDropEvent
+} from './upload-inputs.js';
+
+function fakeFile(name, type) {
+ return { name, type, size: 1234 };
+}
+
+function fakeClipboardItem(file) {
+ return {
+ kind: 'file',
+ type: file.type,
+ getAsFile: () => file
+ };
+}
+
+test('filesFromClipboardEvent extracts only pasted image files', () => {
+ const image = fakeFile('plot.png', 'image/png');
+ const textFile = fakeFile('notes.txt', 'text/plain');
+ const event = {
+ clipboardData: {
+ items: [
+ fakeClipboardItem(image),
+ fakeClipboardItem(textFile),
+ { kind: 'string', type: 'text/plain', getAsFile: () => null }
+ ],
+ files: []
+ }
+ };
+
+ assert.deepEqual(filesFromClipboardEvent(event), [image]);
+});
+
+test('filesFromClipboardEvent ignores plain text paste', () => {
+ const event = {
+ clipboardData: {
+ items: [{ kind: 'string', type: 'text/plain', getAsFile: () => null }],
+ files: []
+ }
+ };
+
+ assert.deepEqual(filesFromClipboardEvent(event), []);
+});
+
+test('filesFromClipboardEvent falls back to clipboardData.files for images', () => {
+ const image = fakeFile('clipboard.jpg', 'image/jpeg');
+ const event = {
+ clipboardData: {
+ items: [],
+ files: [image, fakeFile('document.pdf', 'application/pdf')]
+ }
+ };
+
+ assert.deepEqual(filesFromClipboardEvent(event), [image]);
+});
+
+test('filesFromDropEvent returns all dropped files', () => {
+ const image = fakeFile('screen.png', 'image/png');
+ const sheet = fakeFile('table.xlsx', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
+ const event = {
+ dataTransfer: {
+ files: [image, sheet]
+ }
+ };
+
+ assert.deepEqual(filesFromDropEvent(event), [image, sheet]);
+});
+
+test('dragEventHasFiles detects drag payloads that include files', () => {
+ assert.equal(dragEventHasFiles({ dataTransfer: { types: ['text/plain'] } }), false);
+ assert.equal(dragEventHasFiles({ dataTransfer: { types: ['Files'] } }), true);
+ assert.equal(dragEventHasFiles({ dataTransfer: { files: [fakeFile('a.png', 'image/png')] } }), true);
+});
diff --git a/docs/pr-screenshots/desktop-model-menu.png b/docs/pr-screenshots/desktop-model-menu.png
new file mode 100644
index 0000000..8099b87
Binary files /dev/null and b/docs/pr-screenshots/desktop-model-menu.png differ
diff --git a/docs/pr-screenshots/mobile-attachment-menu.png b/docs/pr-screenshots/mobile-attachment-menu.png
new file mode 100644
index 0000000..a152ce1
Binary files /dev/null and b/docs/pr-screenshots/mobile-attachment-menu.png differ
diff --git a/docs/superpowers/plans/2026-05-07-codexmobile-adaptive-shell.md b/docs/superpowers/plans/2026-05-07-codexmobile-adaptive-shell.md
new file mode 100644
index 0000000..48be90a
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-07-codexmobile-adaptive-shell.md
@@ -0,0 +1,788 @@
+# CodexMobile Adaptive Shell Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Turn CodexMobile's desktop view into a usable adaptive shell with a docked collapsible drawer, wider chat/composer column, and desktop paste/drag file upload.
+
+**Architecture:** Keep the existing `App.jsx` component structure and make the first pass CSS-first. Add one focused helper module for paste/drop file extraction so upload behavior can be tested without rendering the full React app. Reuse the existing `/api/uploads` and `attachments` flow.
+
+**Tech Stack:** React 18, Vite, Node.js built-in `node:test`, CSS media queries, existing CodexMobile upload API.
+
+---
+
+## File Structure
+
+- Create `client/src/upload-inputs.js`: pure helpers for clipboard/drop file extraction and drag file detection.
+- Create `client/src/upload-inputs.test.mjs`: unit tests for paste/drop extraction behavior.
+- Modify `client/src/App.jsx`: import upload helpers, add composer paste/drop handlers, add desktop drawer collapse state, and wire the top menu button to mobile open vs desktop collapse behavior.
+- Modify `client/src/styles.css`: replace the desktop phone-frame breakpoint with a `>=1024px` adaptive shell, dock/collapse the drawer, widen chat/composer, and style the drop overlay.
+
+Do not modify `server/codex-app-server.js`; it has unrelated local changes.
+
+---
+
+### Task 1: Upload Input Extraction Helpers
+
+**Files:**
+- Create: `client/src/upload-inputs.js`
+- Create: `client/src/upload-inputs.test.mjs`
+
+- [ ] **Step 1: Write the failing tests**
+
+Create `client/src/upload-inputs.test.mjs` with:
+
+```js
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import {
+ dragEventHasFiles,
+ filesFromClipboardEvent,
+ filesFromDropEvent
+} from './upload-inputs.js';
+
+function fakeFile(name, type) {
+ return { name, type, size: 1234 };
+}
+
+function fakeClipboardItem(file) {
+ return {
+ kind: 'file',
+ type: file.type,
+ getAsFile: () => file
+ };
+}
+
+test('filesFromClipboardEvent extracts only pasted image files', () => {
+ const image = fakeFile('plot.png', 'image/png');
+ const textFile = fakeFile('notes.txt', 'text/plain');
+ const event = {
+ clipboardData: {
+ items: [
+ fakeClipboardItem(image),
+ fakeClipboardItem(textFile),
+ { kind: 'string', type: 'text/plain', getAsFile: () => null }
+ ],
+ files: []
+ }
+ };
+
+ assert.deepEqual(filesFromClipboardEvent(event), [image]);
+});
+
+test('filesFromClipboardEvent ignores plain text paste', () => {
+ const event = {
+ clipboardData: {
+ items: [{ kind: 'string', type: 'text/plain', getAsFile: () => null }],
+ files: []
+ }
+ };
+
+ assert.deepEqual(filesFromClipboardEvent(event), []);
+});
+
+test('filesFromClipboardEvent falls back to clipboardData.files for images', () => {
+ const image = fakeFile('clipboard.jpg', 'image/jpeg');
+ const event = {
+ clipboardData: {
+ items: [],
+ files: [image, fakeFile('document.pdf', 'application/pdf')]
+ }
+ };
+
+ assert.deepEqual(filesFromClipboardEvent(event), [image]);
+});
+
+test('filesFromDropEvent returns all dropped files', () => {
+ const image = fakeFile('screen.png', 'image/png');
+ const sheet = fakeFile('table.xlsx', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
+ const event = {
+ dataTransfer: {
+ files: [image, sheet]
+ }
+ };
+
+ assert.deepEqual(filesFromDropEvent(event), [image, sheet]);
+});
+
+test('dragEventHasFiles detects drag payloads that include files', () => {
+ assert.equal(dragEventHasFiles({ dataTransfer: { types: ['text/plain'] } }), false);
+ assert.equal(dragEventHasFiles({ dataTransfer: { types: ['Files'] } }), true);
+ assert.equal(dragEventHasFiles({ dataTransfer: { files: [fakeFile('a.png', 'image/png')] } }), true);
+});
+```
+
+- [ ] **Step 2: Run tests to verify they fail because the module is missing**
+
+Run:
+
+```powershell
+node --test client/src/upload-inputs.test.mjs
+```
+
+Expected: FAIL with an import/module-not-found error for `client/src/upload-inputs.js`.
+
+- [ ] **Step 3: Add the minimal helper implementation**
+
+Create `client/src/upload-inputs.js` with:
+
+```js
+function asArray(value) {
+ return Array.from(value || []);
+}
+
+function isImageFile(file) {
+ return Boolean(file && String(file.type || '').startsWith('image/'));
+}
+
+export function filesFromClipboardEvent(event) {
+ const data = event?.clipboardData;
+ if (!data) {
+ return [];
+ }
+
+ const itemFiles = asArray(data.items)
+ .filter((item) => item?.kind === 'file' && String(item.type || '').startsWith('image/'))
+ .map((item) => item.getAsFile?.())
+ .filter(isImageFile);
+
+ if (itemFiles.length) {
+ return itemFiles;
+ }
+
+ return asArray(data.files).filter(isImageFile);
+}
+
+export function filesFromDropEvent(event) {
+ return asArray(event?.dataTransfer?.files).filter(Boolean);
+}
+
+export function dragEventHasFiles(event) {
+ const transfer = event?.dataTransfer;
+ if (!transfer) {
+ return false;
+ }
+ if (asArray(transfer.files).length > 0) {
+ return true;
+ }
+ return asArray(transfer.types).includes('Files');
+}
+```
+
+- [ ] **Step 4: Run tests to verify they pass**
+
+Run:
+
+```powershell
+node --test client/src/upload-inputs.test.mjs
+```
+
+Expected: PASS, 5 tests.
+
+- [ ] **Step 5: Commit the helper**
+
+Run:
+
+```powershell
+git add client/src/upload-inputs.js client/src/upload-inputs.test.mjs
+git commit -m "feat: add upload input extraction helpers"
+```
+
+---
+
+### Task 2: Composer Paste And Drag/Drop Upload
+
+**Files:**
+- Modify: `client/src/App.jsx`
+- Test: `client/src/upload-inputs.test.mjs`
+
+- [ ] **Step 1: Run the focused helper tests before wiring React**
+
+Run:
+
+```powershell
+node --test client/src/upload-inputs.test.mjs
+```
+
+Expected: PASS. This guards the helper behavior before UI wiring.
+
+- [ ] **Step 2: Import the helper functions**
+
+In `client/src/App.jsx`, add this import next to the other local imports:
+
+```js
+import {
+ dragEventHasFiles,
+ filesFromClipboardEvent,
+ filesFromDropEvent
+} from './upload-inputs.js';
+```
+
+- [ ] **Step 3: Add drag state and handlers inside `Composer`**
+
+Inside `function Composer(...)`, after the existing `useState` calls for `openMenu`, `skillFilter`, `cursorPosition`, and `fileSearch`, add:
+
+```js
+ const [dragDepth, setDragDepth] = useState(0);
+ const dropActive = dragDepth > 0;
+```
+
+After `handleFiles(event, kind)`, add:
+
+```js
+ function uploadFiles(files) {
+ if (!files.length) {
+ return;
+ }
+ onUploadFiles(files);
+ setOpenMenu(null);
+ }
+
+ function handlePaste(event) {
+ const files = filesFromClipboardEvent(event);
+ if (!files.length) {
+ return;
+ }
+ event.preventDefault();
+ uploadFiles(files);
+ }
+
+ function handleDragEnter(event) {
+ if (!dragEventHasFiles(event)) {
+ return;
+ }
+ event.preventDefault();
+ setDragDepth((value) => value + 1);
+ }
+
+ function handleDragOver(event) {
+ if (!dragEventHasFiles(event)) {
+ return;
+ }
+ event.preventDefault();
+ event.dataTransfer.dropEffect = 'copy';
+ }
+
+ function handleDragLeave(event) {
+ if (!dragEventHasFiles(event)) {
+ return;
+ }
+ event.preventDefault();
+ setDragDepth((value) => Math.max(0, value - 1));
+ }
+
+ function handleDrop(event) {
+ if (!dragEventHasFiles(event)) {
+ return;
+ }
+ event.preventDefault();
+ setDragDepth(0);
+ uploadFiles(filesFromDropEvent(event));
+ }
+```
+
+- [ ] **Step 4: Wire the form and textarea events**
+
+Change the `