feat(web): polish chat rendering and fix remote session interactions (#567)

* feat(web): polish chat rendering

Refresh the web chat presentation across user messages, tool cards, code blocks, diffs, reasoning, and Mermaid diagrams.\n\nAdd focused regression coverage for bubble/status behavior, code and diff rendering, clipboard output, Mermaid theming, and message-window updates.

* fix(web): stabilize chat tool rendering

Preserve manual scroll anchors while older messages and tool dialogs update, and align code, diff, and tool result rendering with chat typography.

Add chat font-weight settings, ignore local Playwright CLI artifacts, document the Angular commit-message convention, and cover the scroll, result, code, diff, and settings behavior with focused tests.

Constraint: User requested committing all current workspace diffs with Angular-style commit messaging

Tested: bun run typecheck:web && bun run test:web && git diff --check

Co-authored-by: OmX <omx@oh-my-codex.dev>

* style(tool-card): polish question and permission card styles

Align AskUserQuestion option surfaces and permission action hierarchy with the existing tool card visual language while preserving interaction logic. Extract shared option presentation helpers and theme-driven hover/muted colors to reduce duplication.

Constraint: Frontend style-only polish; preserve existing permission and answer submission behavior

Rejected: Keep screenshot artifacts in the repo | they are local visual review output, not source

Confidence: high

Scope-risk: narrow

Tested: git diff --check; bun run typecheck:web; bun run test:web; bun run build:web

Not-tested: manual cross-browser visual QA beyond local Playwright inspection

Co-authored-by: OmX <omx@oh-my-codex.dev>

* fix(cli): keep Claude remote plan prompts actionable

Handle Claude remote /plan locally so HAPI switches plan permission mode before forwarding any prompt text. This avoids Claude Code treating /plan as an unknown skill and ending with only a ready event.

Constraint: Claude SDK result messages are not conversation log entries, so command handling must happen before the prompt reaches Claude.\nRejected: surfacing SDK result summaries in web chat | would expose transport-level summaries broadly instead of fixing the slash-command path.\nConfidence: high\nScope-risk: narrow\nDirective: Keep Claude remote slash commands that alter runtime mode in the CLI special-command parser.\nTested: bun test cli/src/parsers/specialCommands.test.ts; bun typecheck; git diff --check\nNot-tested: Manual GitHub-hosted runner deployment.

* fix(web): polish tool result rendering

* fix(web): preserve collapsed session order

* fix(chat): settle initial thread scroll

* fix(settings): remove chat font weight option

* fix(web): remove font weight bootstrap code

* chore: remove unrelated branch artifacts

* test(web): update consumed message invocation test

* fix(chat): cancel initial scroll settling on manual scroll

---------

Co-authored-by: huhaoyu.hahahu <huhaoyu.hahahu@bytedance.com>
Co-authored-by: OmX <omx@oh-my-codex.dev>

cli/src/claude/runClaude.ts

@@ -282,6 +282,41 @@ export async function runClaude(options: StartOptions = {}): Promise<void> {
             return;
         }
 
+        if (specialCommand.type === 'plan') {
+            logger.debug('[start] Detected /plan command');
+            currentPermissionMode = specialCommand.mode ?? 'plan';
+            currentSessionRef.current?.setPermissionMode(currentPermissionMode);
+            currentSessionRef.current?.pushKeepAlive();
+            session.sendSessionEvent({
+                type: 'permission-mode-changed',
+                mode: currentPermissionMode
+            });
+
+            const enhancedMode: EnhancedMode = {
+                permissionMode: currentPermissionMode,
+                model: messageModel,
+                effort: messageEffort,
+                fallbackModel: messageFallbackModel,
+                customSystemPrompt: messageCustomSystemPrompt,
+                appendSystemPrompt: messageAppendSystemPrompt,
+                allowedTools: messageAllowedTools,
+                disallowedTools: messageDisallowedTools
+            };
+
+            if (!specialCommand.prompt) {
+                if (localId) {
+                    session.emitMessagesConsumed([localId]);
+                }
+                logger.debugLargeJson('[start] /plan command applied without prompt:', message);
+                return;
+            }
+
+            const planPrompt = formatMessageWithAttachments(specialCommand.prompt, message.content.attachments);
+            messageQueue.push(planPrompt, enhancedMode, localId);
+            logger.debugLargeJson('[start] /plan command prompt pushed to queue:', message);
+            return;
+        }
+
         // Push with resolved permission mode, model, system prompts, and tools
         const enhancedMode: EnhancedMode = {
             permissionMode: messagePermissionMode ?? 'default',

cli/src/parsers/specialCommands.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { parseCompact, parseClear, parseSpecialCommand } from './specialCommands';
+import { parseCompact, parseClear, parsePlan, parseSpecialCommand } from './specialCommands';
 
 describe('parseCompact', () => {
     it('should parse /compact command with argument', () => {
@@ -49,6 +49,49 @@ describe('parseClear', () => {
     });
 });
 
+describe('parsePlan', () => {
+    it('should parse /plan without a prompt', () => {
+        const result = parsePlan('/plan');
+        expect(result).toEqual({
+            isPlan: true,
+            mode: 'plan',
+            prompt: undefined
+        });
+    });
+
+    it('should parse /plan with a prompt', () => {
+        const result = parsePlan('/plan 帮我规划五一行程');
+        expect(result).toEqual({
+            isPlan: true,
+            mode: 'plan',
+            prompt: '帮我规划五一行程'
+        });
+    });
+
+    it('should strip matching quotes around the prompt', () => {
+        const result = parsePlan('/plan "帮我规划五一行程"');
+        expect(result).toEqual({
+            isPlan: true,
+            mode: 'plan',
+            prompt: '帮我规划五一行程'
+        });
+    });
+
+    it('should parse /plan off as default mode', () => {
+        const result = parsePlan('/plan off');
+        expect(result).toEqual({
+            isPlan: true,
+            mode: 'default',
+            prompt: undefined
+        });
+    });
+
+    it('should not parse partial matches', () => {
+        expect(parsePlan('/planner test').isPlan).toBe(false);
+        expect(parsePlan('please /plan this').isPlan).toBe(false);
+    });
+});
+
 describe('parseSpecialCommand', () => {
     it('should detect compact command', () => {
         const result = parseSpecialCommand('/compact optimize');
@@ -62,6 +105,13 @@ describe('parseSpecialCommand', () => {
         expect(result.originalMessage).toBeUndefined();
     });
 
+    it('should detect plan command with prompt', () => {
+        const result = parseSpecialCommand('/plan "帮我规划五一行程"');
+        expect(result.type).toBe('plan');
+        expect(result.mode).toBe('plan');
+        expect(result.prompt).toBe('帮我规划五一行程');
+    });
+
     it('should return null for regular messages', () => {
         const result = parseSpecialCommand('hello world');
         expect(result.type).toBeNull();
@@ -72,10 +122,12 @@ describe('parseSpecialCommand', () => {
         // Test with extra whitespace
         expect(parseSpecialCommand('  /compact test  ').type).toBe('compact');
         expect(parseSpecialCommand('  /clear  ').type).toBe('clear');
+        expect(parseSpecialCommand('  /plan test  ').type).toBe('plan');
         
         // Test partial matches should not trigger
         expect(parseSpecialCommand('some /compact text').type).toBeNull();
         expect(parseSpecialCommand('/compactor').type).toBeNull();
         expect(parseSpecialCommand('/clearing').type).toBeNull();
+        expect(parseSpecialCommand('/planner').type).toBeNull();
     });
-});
+});

cli/src/parsers/specialCommands.ts

@@ -11,9 +11,17 @@ export interface ClearCommandResult {
     isClear: boolean;
 }
 
+export interface PlanCommandResult {
+    isPlan: boolean;
+    mode: 'plan' | 'default';
+    prompt?: string;
+}
+
 export interface SpecialCommandResult {
-    type: 'compact' | 'clear' | null;
+    type: 'compact' | 'clear' | 'plan' | null;
     originalMessage?: string;
+    mode?: 'plan' | 'default';
+    prompt?: string;
 }
 
 /**
@@ -55,6 +63,52 @@ export function parseClear(message: string): ClearCommandResult {
     };
 }
 
+function stripMatchingQuotes(value: string): string {
+    const trimmed = value.trim();
+    if (trimmed.length < 2) {
+        return trimmed;
+    }
+
+    const first = trimmed[0];
+    const last = trimmed[trimmed.length - 1];
+    if ((first === '"' && last === '"') || (first === '\'' && last === '\'')) {
+        return trimmed.slice(1, -1).trim();
+    }
+
+    return trimmed;
+}
+
+/**
+ * Parse /plan command for remote Claude sessions.
+ * - /plan: switch to Claude plan permission mode.
+ * - /plan off: switch back to default mode.
+ * - /plan <prompt>: switch to plan mode and send the remaining prompt.
+ */
+export function parsePlan(message: string): PlanCommandResult {
+    const trimmed = message.trim();
+    const match = /^\/plan(?:\s+([\s\S]*))?$/i.exec(trimmed);
+    if (!match) {
+        return {
+            isPlan: false,
+            mode: 'plan'
+        };
+    }
+
+    const rawArg = match[1]?.trim() ?? '';
+    if (rawArg.toLowerCase() === 'off') {
+        return {
+            isPlan: true,
+            mode: 'default'
+        };
+    }
+
+    return {
+        isPlan: true,
+        mode: 'plan',
+        prompt: rawArg ? stripMatchingQuotes(rawArg) : undefined
+    };
+}
+
 /**
  * Unified parser for special commands
  * Returns the type of command and original message if applicable
@@ -74,8 +128,18 @@ export function parseSpecialCommand(message: string): SpecialCommandResult {
             type: 'clear'
         };
     }
+
+    const planResult = parsePlan(message);
+    if (planResult.isPlan) {
+        return {
+            type: 'plan',
+            mode: planResult.mode,
+            prompt: planResult.prompt,
+            originalMessage: message.trim()
+        };
+    }
     
     return {
         type: null
     };
-}
+}