feat: add mode selector dropdown to chat input toolbar

src/components/chat/ChatView.tsx

@@ -436,6 +436,8 @@ export function ChatView({ sessionId, initialMessages = [], initialHasMore = fal
         effort={selectedEffort}
         onEffortChange={setSelectedEffort}
         sdkInitMeta={initMetaRef.current}
+        mode={mode}
+        onModeChange={handleModeChange}
       />
       <ChatComposerActionBar
         left={<ImageGenToggle />}

src/components/chat/MessageInput.tsx

@@ -18,6 +18,7 @@ import { SlashCommandPopover } from './SlashCommandPopover';
 import { CliToolsPopover } from './CliToolsPopover';
 import { ModelSelectorDropdown } from './ModelSelectorDropdown';
 import { EffortSelectorDropdown } from './EffortSelectorDropdown';
+import { ModeSelectorDropdown } from './ModeSelectorDropdown';
 import { FileAwareSubmitButton, AttachFileButton, FileTreeAttachmentBridge, FileAttachmentsCapsules, CommandBadge, CliBadge } from './MessageInputParts';
 import {
   Tooltip,
@@ -53,6 +54,9 @@ interface MessageInputProps {
   onEffortChange?: (effort: string | undefined) => void;
   /** SDK init metadata — when available, used to validate command/skill availability */
   sdkInitMeta?: { tools?: unknown; slash_commands?: unknown; skills?: unknown } | null;
+  /** Current chat mode (code / plan) */
+  mode?: string;
+  onModeChange?: (mode: string) => void;
 }
 
 export function MessageInput({
@@ -71,6 +75,8 @@ export function MessageInput({
   effort: effortProp,
   onEffortChange,
   sdkInitMeta,
+  mode,
+  onModeChange,
 }: MessageInputProps) {
   const { t, locale } = useTranslation();
   const imageGen = useImageGen();
@@ -417,6 +423,14 @@ export function MessageInput({
                   </TooltipContent>
                 </Tooltip>
 
+                {/* Mode selector (Code / Plan) */}
+                {mode && onModeChange && (
+                  <ModeSelectorDropdown
+                    currentMode={mode}
+                    onModeChange={onModeChange}
+                  />
+                )}
+
                 {/* Model selector */}
                 <ModelSelectorDropdown
                   currentModelValue={currentModelValue}

src/components/chat/ModeSelectorDropdown.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { useRef, useState, useEffect } from 'react';
+import { CaretDown } from '@/components/ui/icon';
+import { cn } from '@/lib/utils';
+import { useTranslation } from '@/hooks/useTranslation';
+import type { TranslationKey } from '@/i18n';
+import { PromptInputButton } from '@/components/ai-elements/prompt-input';
+import {
+  CommandList,
+  CommandListItem,
+  CommandListGroup,
+} from '@/components/patterns';
+
+const MODES = ['code', 'plan'] as const;
+
+interface ModeSelectorDropdownProps {
+  currentMode: string;
+  onModeChange: (mode: string) => void;
+}
+
+export function ModeSelectorDropdown({
+  currentMode,
+  onModeChange,
+}: ModeSelectorDropdownProps) {
+  const { t } = useTranslation();
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  // Close on outside click
+  useEffect(() => {
+    if (!menuOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setMenuOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [menuOpen]);
+
+  const labelKey = `messageInput.mode${currentMode.charAt(0).toUpperCase() + currentMode.slice(1)}` as TranslationKey;
+
+  return (
+    <div className="relative" ref={menuRef}>
+      <PromptInputButton onClick={() => setMenuOpen((prev) => !prev)}>
+        <span className="text-xs">{t(labelKey)}</span>
+        <CaretDown size={10} className={cn("transition-transform duration-200", menuOpen && "rotate-180")} />
+      </PromptInputButton>
+
+      {menuOpen && (
+        <CommandList className="w-32 mb-1.5 rounded-lg">
+          <CommandListGroup label={t('messageInput.modeLabel' as TranslationKey)}>
+            <div className="py-0.5">
+              {MODES.map((mode) => (
+                <CommandListItem
+                  key={mode}
+                  active={currentMode === mode}
+                  onClick={() => {
+                    onModeChange(mode);
+                    setMenuOpen(false);
+                  }}
+                  className="justify-between"
+                >
+                  <span className="text-xs">{t(`messageInput.mode${mode.charAt(0).toUpperCase() + mode.slice(1)}` as TranslationKey)}</span>
+                  {currentMode === mode && <span className="text-xs">&#10003;</span>}
+                </CommandListItem>
+              ))}
+            </div>
+          </CommandListGroup>
+        </CommandList>
+      )}
+    </div>
+  );
+}

src/i18n/en.ts

@@ -47,6 +47,7 @@ const en = {
   'messageInput.memoryDesc': 'Edit project memory file',
   'messageInput.modeCode': 'Code',
   'messageInput.modePlan': 'Plan',
+  'messageInput.modeLabel': 'Mode',
   'messageInput.aiSuggested': 'AI Suggested',
 
   // ── Streaming message ───────────────────────────────────────

src/i18n/zh.ts

@@ -44,6 +44,7 @@ const zh: Record<TranslationKey, string> = {
   'messageInput.memoryDesc': '编辑项目记忆文件',
   'messageInput.modeCode': '代码',
   'messageInput.modePlan': '计划',
+  'messageInput.modeLabel': '模式',
   'messageInput.aiSuggested': 'AI 推荐',
 
   // ── Streaming message ───────────────────────────────────────