Merge branch 'main' into feature/add-copy-support-for-assistant-messages

The plain-text copy path for assistant messages was lossy when the message
contained fenced code blocks. We were unwrapping triple-backtick blocks first
and then running the rest of the markdown cleanup against the extracted code.
That caused valid code lines that start with markdown-like prefixes, such as
`#`, `-`, `*`, or `1.`, to be rewritten as headings or list items instead of
being copied verbatim.

This change protects fenced code before the generic markdown normalization runs.
Each fenced block is captured into a temporary array, replaced with a unique
placeholder token, and then restored after the existing regex passes finish.
The stored code trims only the trailing newline that comes from the fenced block
wrapper, so the restored content stays clean without altering the actual code.

As a result, "Copy as text" now preserves code inside fenced blocks exactly as
rendered, while keeping the existing markdown-to-plain-text behavior unchanged
for the rest of the message content.

shared/modelConstants.js

@@ -13,14 +13,14 @@
 export const CLAUDE_MODELS = {
   // Models in SDK format (what the actual SDK accepts)
   OPTIONS: [
-    { value: 'sonnet', label: 'Sonnet' },
-    { value: 'opus', label: 'Opus' },
-    { value: 'haiku', label: 'Haiku' },
-    { value: 'opusplan', label: 'Opus Plan' },
-    { value: 'sonnet[1m]', label: 'Sonnet [1M]' }
+    { value: "sonnet", label: "Sonnet" },
+    { value: "opus", label: "Opus" },
+    { value: "haiku", label: "Haiku" },
+    { value: "opusplan", label: "Opus Plan" },
+    { value: "sonnet[1m]", label: "Sonnet [1M]" },
   ],
 
-  DEFAULT: 'sonnet'
+  DEFAULT: "sonnet",
 };
 
 /**
@@ -28,28 +28,28 @@ export const CLAUDE_MODELS = {
  */
 export const CURSOR_MODELS = {
   OPTIONS: [
-    { value: 'opus-4.6-thinking', label: 'Claude 4.6 Opus (Thinking)' },
-    { value: 'gpt-5.3-codex', label: 'GPT-5.3' },
-    { value: 'gpt-5.2-high', label: 'GPT-5.2 High' },
-    { value: 'gemini-3-pro', label: 'Gemini 3 Pro' },
-    { value: 'opus-4.5-thinking', label: 'Claude 4.5 Opus (Thinking)' },
-    { value: 'gpt-5.2', label: 'GPT-5.2' },
-    { value: 'gpt-5.1', label: 'GPT-5.1' },
-    { value: 'gpt-5.1-high', label: 'GPT-5.1 High' },
-    { value: 'composer-1', label: 'Composer 1' },
-    { value: 'auto', label: 'Auto' },
-    { value: 'sonnet-4.5', label: 'Claude 4.5 Sonnet' },
-    { value: 'sonnet-4.5-thinking', label: 'Claude 4.5 Sonnet (Thinking)' },
-    { value: 'opus-4.5', label: 'Claude 4.5 Opus' },
-    { value: 'gpt-5.1-codex', label: 'GPT-5.1 Codex' },
-    { value: 'gpt-5.1-codex-high', label: 'GPT-5.1 Codex High' },
-    { value: 'gpt-5.1-codex-max', label: 'GPT-5.1 Codex Max' },
-    { value: 'gpt-5.1-codex-max-high', label: 'GPT-5.1 Codex Max High' },
-    { value: 'opus-4.1', label: 'Claude 4.1 Opus' },
-    { value: 'grok', label: 'Grok' }
+    { value: "opus-4.6-thinking", label: "Claude 4.6 Opus (Thinking)" },
+    { value: "gpt-5.3-codex", label: "GPT-5.3" },
+    { value: "gpt-5.2-high", label: "GPT-5.2 High" },
+    { value: "gemini-3-pro", label: "Gemini 3 Pro" },
+    { value: "opus-4.5-thinking", label: "Claude 4.5 Opus (Thinking)" },
+    { value: "gpt-5.2", label: "GPT-5.2" },
+    { value: "gpt-5.1", label: "GPT-5.1" },
+    { value: "gpt-5.1-high", label: "GPT-5.1 High" },
+    { value: "composer-1", label: "Composer 1" },
+    { value: "auto", label: "Auto" },
+    { value: "sonnet-4.5", label: "Claude 4.5 Sonnet" },
+    { value: "sonnet-4.5-thinking", label: "Claude 4.5 Sonnet (Thinking)" },
+    { value: "opus-4.5", label: "Claude 4.5 Opus" },
+    { value: "gpt-5.1-codex", label: "GPT-5.1 Codex" },
+    { value: "gpt-5.1-codex-high", label: "GPT-5.1 Codex High" },
+    { value: "gpt-5.1-codex-max", label: "GPT-5.1 Codex Max" },
+    { value: "gpt-5.1-codex-max-high", label: "GPT-5.1 Codex Max High" },
+    { value: "opus-4.1", label: "Claude 4.1 Opus" },
+    { value: "grok", label: "Grok" },
   ],
 
-  DEFAULT: 'gpt-5-3-codex'
+  DEFAULT: "gpt-5-3-codex",
 };
 
 /**
@@ -57,17 +57,16 @@ export const CURSOR_MODELS = {
  */
 export const CODEX_MODELS = {
   OPTIONS: [
-    { value: 'gpt-5.4', label: 'GPT-5.4' },
-    { value: 'gpt-5.3-codex', label: 'GPT-5.3 Codex' },
-    { value: 'gpt-5.3-codex', label: 'GPT-5.3 Codex' },
-    { value: 'gpt-5.2-codex', label: 'GPT-5.2 Codex' },
-    { value: 'gpt-5.2', label: 'GPT-5.2' },
-    { value: 'gpt-5.1-codex-max', label: 'GPT-5.1 Codex Max' },
-    { value: 'o3', label: 'O3' },
-    { value: 'o4-mini', label: 'O4-mini' }
+    { value: "gpt-5.4", label: "GPT-5.4" },
+    { value: "gpt-5.3-codex", label: "GPT-5.3 Codex" },
+    { value: "gpt-5.2-codex", label: "GPT-5.2 Codex" },
+    { value: "gpt-5.2", label: "GPT-5.2" },
+    { value: "gpt-5.1-codex-max", label: "GPT-5.1 Codex Max" },
+    { value: "o3", label: "O3" },
+    { value: "o4-mini", label: "O4-mini" },
   ],
 
-  DEFAULT: 'gpt-5.4'
+  DEFAULT: "gpt-5.4",
 };
 
 /**
@@ -75,16 +74,19 @@ export const CODEX_MODELS = {
  */
 export const GEMINI_MODELS = {
   OPTIONS: [
-    { value: 'gemini-3.1-pro-preview', label: 'Gemini 3.1 Pro Preview' },
-    { value: 'gemini-3-pro-preview', label: 'Gemini 3 Pro Preview' },
-    { value: 'gemini-3-flash-preview', label: 'Gemini 3 Flash Preview' },
-    { value: 'gemini-2.5-flash', label: 'Gemini 2.5 Flash' },
-    { value: 'gemini-2.5-pro', label: 'Gemini 2.5 Pro' },
-    { value: 'gemini-2.0-flash-lite', label: 'Gemini 2.0 Flash Lite' },
-    { value: 'gemini-2.0-flash', label: 'Gemini 2.0 Flash' },
-    { value: 'gemini-2.0-pro-exp', label: 'Gemini 2.0 Pro Experimental' },
-    { value: 'gemini-2.0-flash-thinking-exp', label: 'Gemini 2.0 Flash Thinking' }
+    { value: "gemini-3.1-pro-preview", label: "Gemini 3.1 Pro Preview" },
+    { value: "gemini-3-pro-preview", label: "Gemini 3 Pro Preview" },
+    { value: "gemini-3-flash-preview", label: "Gemini 3 Flash Preview" },
+    { value: "gemini-2.5-flash", label: "Gemini 2.5 Flash" },
+    { value: "gemini-2.5-pro", label: "Gemini 2.5 Pro" },
+    { value: "gemini-2.0-flash-lite", label: "Gemini 2.0 Flash Lite" },
+    { value: "gemini-2.0-flash", label: "Gemini 2.0 Flash" },
+    { value: "gemini-2.0-pro-exp", label: "Gemini 2.0 Pro Experimental" },
+    {
+      value: "gemini-2.0-flash-thinking-exp",
+      label: "Gemini 2.0 Flash Thinking",
+    },
   ],
 
-  DEFAULT: 'gemini-2.5-flash'
+  DEFAULT: "gemini-2.5-flash",
 };

src/components/chat/view/subcomponents/MessageComponent.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useMemo } from 'react';
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import SessionProviderLogo from '../../../llm-logo-provider/SessionProviderLogo';
 import type {
@@ -9,10 +9,10 @@ import type {
 } from '../../types/types';
 import { formatUsageLimitText } from '../../utils/chatFormatting';
 import { getClaudePermissionSuggestion } from '../../utils/chatPermissions';
-import { copyTextToClipboard } from '../../../../utils/clipboard';
 import type { Project } from '../../../../types/app';
 import { ToolRenderer, shouldHideToolResult } from '../../tools';
 import { Markdown } from './Markdown';
+import MessageCopyControl from './MessageCopyControl';
 
 type DiffLine = {
   type: string;
@@ -20,7 +20,7 @@ type DiffLine = {
   lineNum: number;
 };
 
-interface MessageComponentProps {
+type MessageComponentProps = {
   message: ChatMessage;
   prevMessage: ChatMessage | null;
   createDiff: (oldStr: string, newStr: string) => DiffLine[];
@@ -32,7 +32,7 @@ interface MessageComponentProps {
   showThinking?: boolean;
   selectedProject?: Project | null;
   provider: Provider | string;
-}
+};
 
 type InteractiveOption = {
   number: string;
@@ -41,6 +41,7 @@ type InteractiveOption = {
 };
 
 type PermissionGrantState = 'idle' | 'granted' | 'error';
+const COPY_HIDDEN_TOOL_NAMES = new Set(['Bash', 'Edit', 'Write', 'ApplyPatch']);
 
 const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, onShowSettings, onGrantToolPermission, autoExpandTools, showRawParameters, showThinking, selectedProject, provider }: MessageComponentProps) => {
   const { t } = useTranslation('chat');
@@ -49,18 +50,32 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, o
       (prevMessage.type === 'user') ||
       (prevMessage.type === 'tool') ||
       (prevMessage.type === 'error'));
-  const messageRef = React.useRef<HTMLDivElement | null>(null);
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const messageRef = useRef<HTMLDivElement | null>(null);
+  const [isExpanded, setIsExpanded] = useState(false);
   const permissionSuggestion = getClaudePermissionSuggestion(message, provider);
-  const [permissionGrantState, setPermissionGrantState] = React.useState<PermissionGrantState>('idle');
-  const [messageCopied, setMessageCopied] = React.useState(false);
+  const [permissionGrantState, setPermissionGrantState] = useState<PermissionGrantState>('idle');
+  const userCopyContent = String(message.content || '');
+  const formattedMessageContent = useMemo(
+    () => formatUsageLimitText(String(message.content || '')),
+    [message.content]
+  );
+  const assistantCopyContent = message.isToolUse
+    ? String(message.displayText || message.content || '')
+    : formattedMessageContent;
+  const isCommandOrFileEditToolResponse = Boolean(
+    message.isToolUse && COPY_HIDDEN_TOOL_NAMES.has(String(message.toolName || ''))
+  );
+  const shouldShowUserCopyControl = message.type === 'user' && userCopyContent.trim().length > 0;
+  const shouldShowAssistantCopyControl = message.type === 'assistant' &&
+    assistantCopyContent.trim().length > 0 &&
+    !isCommandOrFileEditToolResponse;
 
 
-  React.useEffect(() => {
+  useEffect(() => {
     setPermissionGrantState('idle');
   }, [permissionSuggestion?.entry, message.toolId]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const node = messageRef.current;
     if (!autoExpandTools || !node || !message.isToolUse) return;
 
@@ -120,43 +135,9 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, o
               </div>
             )}
             <div className="mt-1 flex items-center justify-end gap-1 text-xs text-blue-100">
-              <button
-                type="button"
-                onClick={() => {
-                  const text = String(message.content || '');
-                  if (!text) return;
-
-                  copyTextToClipboard(text).then((success) => {
-                    if (!success) return;
-                    setMessageCopied(true);
-                  });
-                }}
-                title={messageCopied ? t('copyMessage.copied') : t('copyMessage.copy')}
-                aria-label={messageCopied ? t('copyMessage.copied') : t('copyMessage.copy')}
-              >
-                {messageCopied ? (
-                  <svg className="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor">
-                    <path
-                      fillRule="evenodd"
-                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
-                ) : (
-                  <svg
-                    className="h-3.5 w-3.5"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  >
-                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-                    <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path>
-                  </svg>
-                )}
-              </button>
+              {shouldShowUserCopyControl && (
+                <MessageCopyControl content={userCopyContent} messageType="user" />
+              )}
               <span>{formattedTime}</span>
             </div>
           </div>
@@ -430,7 +411,7 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, o
                 )}
 
                 {(() => {
-                  const content = formatUsageLimitText(String(message.content || ''));
+                  const content = formattedMessageContent;
 
                   // Detect if content is pure JSON (starts with { or [)
                   const trimmedContent = content.trim();
@@ -476,9 +457,12 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, o
               </div>
             )}
 
-            {!isGrouped && (
-              <div className="mt-1 text-[11px] text-gray-400 dark:text-gray-500">
-                {formattedTime}
+            {(shouldShowAssistantCopyControl || !isGrouped) && (
+              <div className="mt-1 flex w-full items-center gap-2 text-[11px] text-gray-400 dark:text-gray-500">
+                {shouldShowAssistantCopyControl && (
+                  <MessageCopyControl content={assistantCopyContent} messageType="assistant" />
+                )}
+                {!isGrouped && <span>{formattedTime}</span>}
               </div>
             )}
           </div>

src/components/chat/view/subcomponents/MessageCopyControl.tsx

@@ -0,0 +1,215 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { copyTextToClipboard } from '../../../../utils/clipboard';
+
+const COPY_SUCCESS_TIMEOUT_MS = 2000;
+
+type CopyFormat = 'text' | 'markdown';
+
+type CopyFormatOption = {
+  format: CopyFormat;
+  label: string;
+};
+
+// Converts markdown into readable plain text for "Copy as text".
+const convertMarkdownToPlainText = (markdown: string): string => {
+  let plainText = markdown.replace(/\r\n/g, '\n');
+  const codeBlocks: string[] = [];
+  plainText = plainText.replace(/```[\w-]*\n([\s\S]*?)```/g, (_match, code: string) => {
+    const placeholder = `@@CODEBLOCK${codeBlocks.length}@@`;
+    codeBlocks.push(code.replace(/\n$/, ''));
+    return placeholder;
+  });
+  plainText = plainText.replace(/`([^`]+)`/g, '$1');
+  plainText = plainText.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '$1');
+  plainText = plainText.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '$1');
+  plainText = plainText.replace(/^>\s?/gm, '');
+  plainText = plainText.replace(/^#{1,6}\s+/gm, '');
+  plainText = plainText.replace(/^[-*+]\s+/gm, '');
+  plainText = plainText.replace(/^\d+\.\s+/gm, '');
+  plainText = plainText.replace(/(\*\*|__)(.*?)\1/g, '$2');
+  plainText = plainText.replace(/(\*|_)(.*?)\1/g, '$2');
+  plainText = plainText.replace(/~~(.*?)~~/g, '$1');
+  plainText = plainText.replace(/<\/?[^>]+(>|$)/g, '');
+  plainText = plainText.replace(/\n{3,}/g, '\n\n');
+  plainText = plainText.replace(/@@CODEBLOCK(\d+)@@/g, (_match, index: string) => codeBlocks[Number(index)] ?? '');
+  return plainText.trim();
+};
+
+const MessageCopyControl = ({
+  content,
+  messageType,
+}: {
+  content: string;
+  messageType: 'user' | 'assistant';
+}) => {
+  const { t } = useTranslation('chat');
+  const canSelectCopyFormat = messageType === 'assistant';
+  const defaultFormat: CopyFormat = canSelectCopyFormat ? 'markdown' : 'text';
+  const [selectedFormat, setSelectedFormat] = useState<CopyFormat>(defaultFormat);
+  const [copied, setCopied] = useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const copyFeedbackTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const copyFormatOptions: CopyFormatOption[] = useMemo(
+    () => [
+      {
+        format: 'markdown',
+        label: t('copyMessage.copyAsMarkdown', { defaultValue: 'Copy as markdown' }),
+      },
+      {
+        format: 'text',
+        label: t('copyMessage.copyAsText', { defaultValue: 'Copy as text' }),
+      },
+    ],
+    [t]
+  );
+
+  const selectedFormatTag = selectedFormat === 'markdown'
+    ? t('copyMessage.markdownShort', { defaultValue: 'MD' })
+    : t('copyMessage.textShort', { defaultValue: 'TXT' });
+
+  const copyPayload = useMemo(() => {
+    if (selectedFormat === 'markdown') {
+      return content;
+    }
+    return convertMarkdownToPlainText(content);
+  }, [content, selectedFormat]);
+
+  useEffect(() => {
+    setSelectedFormat(defaultFormat);
+    setIsDropdownOpen(false);
+  }, [defaultFormat]);
+
+  useEffect(() => {
+    // Close the dropdown when clicking anywhere outside this control.
+    const closeOnOutsideClick = (event: MouseEvent) => {
+      if (!isDropdownOpen) return;
+      const target = event.target as Node;
+      if (dropdownRef.current && !dropdownRef.current.contains(target)) {
+        setIsDropdownOpen(false);
+      }
+    };
+
+    window.addEventListener('mousedown', closeOnOutsideClick);
+    return () => {
+      window.removeEventListener('mousedown', closeOnOutsideClick);
+    };
+  }, [isDropdownOpen]);
+
+  useEffect(() => {
+    return () => {
+      if (copyFeedbackTimerRef.current) {
+        clearTimeout(copyFeedbackTimerRef.current);
+      }
+    };
+  }, []);
+
+  const handleCopyClick = async () => {
+    if (!copyPayload.trim()) return;
+    const didCopy = await copyTextToClipboard(copyPayload);
+    if (!didCopy) return;
+
+    setCopied(true);
+    if (copyFeedbackTimerRef.current) {
+      clearTimeout(copyFeedbackTimerRef.current);
+    }
+    copyFeedbackTimerRef.current = setTimeout(() => {
+      setCopied(false);
+    }, COPY_SUCCESS_TIMEOUT_MS);
+  };
+
+  const handleFormatChange = (format: CopyFormat) => {
+    setSelectedFormat(format);
+    setIsDropdownOpen(false);
+  };
+
+  const toneClass = messageType === 'user'
+    ? 'text-blue-100 hover:text-white'
+    : 'text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300';
+  const copyTitle = copied ? t('copyMessage.copied') : t('copyMessage.copy');
+  const rootClassName = canSelectCopyFormat
+    ? 'relative flex min-w-0 flex-1 items-center gap-0.5 sm:min-w-max sm:flex-none sm:w-auto'
+    : 'relative flex items-center gap-0.5';
+
+  return (
+    <div ref={dropdownRef} className={rootClassName}>
+      <button
+        type="button"
+        onClick={handleCopyClick}
+        title={copyTitle}
+        aria-label={copyTitle}
+        className={`inline-flex items-center gap-1 rounded px-1 py-0.5 transition-colors ${toneClass}`}
+      >
+        {copied ? (
+          <svg className="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor">
+            <path
+              fillRule="evenodd"
+              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+              clipRule="evenodd"
+            />
+          </svg>
+        ) : (
+          <svg
+            className="h-3.5 w-3.5"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+            <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
+          </svg>
+        )}
+        <span className="text-[10px] font-semibold uppercase tracking-wide">{selectedFormatTag}</span>
+      </button>
+
+      {canSelectCopyFormat && (
+        <>
+          <button
+            type="button"
+            onClick={() => setIsDropdownOpen((prev) => !prev)}
+            className={`rounded px-1 py-0.5 transition-colors ${toneClass}`}
+            aria-label={t('copyMessage.selectFormat', { defaultValue: 'Select copy format' })}
+            title={t('copyMessage.selectFormat', { defaultValue: 'Select copy format' })}
+          >
+            <svg
+              className={`h-3 w-3 transition-transform ${isDropdownOpen ? 'rotate-180' : ''}`}
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+            </svg>
+          </button>
+
+          {isDropdownOpen && (
+            <div className="absolute left-auto top-full z-30 mt-1 min-w-36 rounded-md border border-gray-200 bg-white p-1 shadow-lg dark:border-gray-700 dark:bg-gray-900">
+              {copyFormatOptions.map((option) => {
+                const isSelected = option.format === selectedFormat;
+                return (
+                  <button
+                    key={option.format}
+                    type="button"
+                    onClick={() => handleFormatChange(option.format)}
+                    className={`block w-full rounded px-2 py-1.5 text-left transition-colors ${isSelected
+                      ? 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
+                      : 'text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800/60'
+                      }`}
+                  >
+                    <span className="block text-xs font-medium">{option.label}</span>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default MessageCopyControl;

src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx

@@ -1,12 +1,17 @@
-import React from 'react';
-import { Check, ChevronDown } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import SessionProviderLogo from '../../../llm-logo-provider/SessionProviderLogo';
-import { CLAUDE_MODELS, CURSOR_MODELS, CODEX_MODELS, GEMINI_MODELS } from '../../../../../shared/modelConstants';
-import type { ProjectSession, SessionProvider } from '../../../../types/app';
-import { NextTaskBanner } from '../../../task-master';
+import React from "react";
+import { Check, ChevronDown } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import SessionProviderLogo from "../../../llm-logo-provider/SessionProviderLogo";
+import {
+  CLAUDE_MODELS,
+  CURSOR_MODELS,
+  CODEX_MODELS,
+  GEMINI_MODELS,
+} from "../../../../../shared/modelConstants";
+import type { ProjectSession, SessionProvider } from "../../../../types/app";
+import { NextTaskBanner } from "../../../task-master";
 
-interface ProviderSelectionEmptyStateProps {
+type ProviderSelectionEmptyStateProps = {
   selectedSession: ProjectSession | null;
   currentSessionId: string | null;
   provider: SessionProvider;
@@ -24,7 +29,7 @@ interface ProviderSelectionEmptyStateProps {
   isTaskMasterInstalled: boolean | null;
   onShowAllTasks?: (() => void) | null;
   setInput: React.Dispatch<React.SetStateAction<string>>;
-}
+};
 
 type ProviderDef = {
   id: SessionProvider;
@@ -37,50 +42,56 @@ type ProviderDef = {
 
 const PROVIDERS: ProviderDef[] = [
   {
-    id: 'claude',
-    name: 'Claude Code',
-    infoKey: 'providerSelection.providerInfo.anthropic',
-    accent: 'border-primary',
-    ring: 'ring-primary/15',
-    check: 'bg-primary text-primary-foreground',
+    id: "claude",
+    name: "Claude Code",
+    infoKey: "providerSelection.providerInfo.anthropic",
+    accent: "border-primary",
+    ring: "ring-primary/15",
+    check: "bg-primary text-primary-foreground",
   },
   {
-    id: 'cursor',
-    name: 'Cursor',
-    infoKey: 'providerSelection.providerInfo.cursorEditor',
-    accent: 'border-violet-500 dark:border-violet-400',
-    ring: 'ring-violet-500/15',
-    check: 'bg-violet-500 text-white',
+    id: "cursor",
+    name: "Cursor",
+    infoKey: "providerSelection.providerInfo.cursorEditor",
+    accent: "border-violet-500 dark:border-violet-400",
+    ring: "ring-violet-500/15",
+    check: "bg-violet-500 text-white",
   },
   {
-    id: 'codex',
-    name: 'Codex',
-    infoKey: 'providerSelection.providerInfo.openai',
-    accent: 'border-emerald-600 dark:border-emerald-400',
-    ring: 'ring-emerald-600/15',
-    check: 'bg-emerald-600 dark:bg-emerald-500 text-white',
+    id: "codex",
+    name: "Codex",
+    infoKey: "providerSelection.providerInfo.openai",
+    accent: "border-emerald-600 dark:border-emerald-400",
+    ring: "ring-emerald-600/15",
+    check: "bg-emerald-600 dark:bg-emerald-500 text-white",
   },
   {
-    id: 'gemini',
-    name: 'Gemini',
-    infoKey: 'providerSelection.providerInfo.google',
-    accent: 'border-blue-500 dark:border-blue-400',
-    ring: 'ring-blue-500/15',
-    check: 'bg-blue-500 text-white',
+    id: "gemini",
+    name: "Gemini",
+    infoKey: "providerSelection.providerInfo.google",
+    accent: "border-blue-500 dark:border-blue-400",
+    ring: "ring-blue-500/15",
+    check: "bg-blue-500 text-white",
   },
 ];
 
 function getModelConfig(p: SessionProvider) {
-  if (p === 'claude') return CLAUDE_MODELS;
-  if (p === 'codex') return CODEX_MODELS;
-  if (p === 'gemini') return GEMINI_MODELS;
+  if (p === "claude") return CLAUDE_MODELS;
+  if (p === "codex") return CODEX_MODELS;
+  if (p === "gemini") return GEMINI_MODELS;
   return CURSOR_MODELS;
 }
 
-function getModelValue(p: SessionProvider, c: string, cu: string, co: string, g: string) {
-  if (p === 'claude') return c;
-  if (p === 'codex') return co;
-  if (p === 'gemini') return g;
+function getModelValue(
+  p: SessionProvider,
+  c: string,
+  cu: string,
+  co: string,
+  g: string,
+) {
+  if (p === "claude") return c;
+  if (p === "codex") return co;
+  if (p === "gemini") return g;
   return cu;
 }
 
@@ -103,24 +114,41 @@ export default function ProviderSelectionEmptyState({
   onShowAllTasks,
   setInput,
 }: ProviderSelectionEmptyStateProps) {
-  const { t } = useTranslation('chat');
-  const nextTaskPrompt = t('tasks.nextTaskPrompt', { defaultValue: 'Start the next task' });
+  const { t } = useTranslation("chat");
+  const nextTaskPrompt = t("tasks.nextTaskPrompt", {
+    defaultValue: "Start the next task",
+  });
 
   const selectProvider = (next: SessionProvider) => {
     setProvider(next);
-    localStorage.setItem('selected-provider', next);
+    localStorage.setItem("selected-provider", next);
     setTimeout(() => textareaRef.current?.focus(), 100);
   };
 
   const handleModelChange = (value: string) => {
-    if (provider === 'claude') { setClaudeModel(value); localStorage.setItem('claude-model', value); }
-    else if (provider === 'codex') { setCodexModel(value); localStorage.setItem('codex-model', value); }
-    else if (provider === 'gemini') { setGeminiModel(value); localStorage.setItem('gemini-model', value); }
-    else { setCursorModel(value); localStorage.setItem('cursor-model', value); }
+    if (provider === "claude") {
+      setClaudeModel(value);
+      localStorage.setItem("claude-model", value);
+    } else if (provider === "codex") {
+      setCodexModel(value);
+      localStorage.setItem("codex-model", value);
+    } else if (provider === "gemini") {
+      setGeminiModel(value);
+      localStorage.setItem("gemini-model", value);
+    } else {
+      setCursorModel(value);
+      localStorage.setItem("cursor-model", value);
+    }
   };
 
   const modelConfig = getModelConfig(provider);
-  const currentModel = getModelValue(provider, claudeModel, cursorModel, codexModel, geminiModel);
+  const currentModel = getModelValue(
+    provider,
+    claudeModel,
+    cursorModel,
+    codexModel,
+    geminiModel,
+  );
 
   /* ── New session — provider picker ── */
   if (!selectedSession && !currentSessionId) {
@@ -130,10 +158,10 @@ export default function ProviderSelectionEmptyState({
           {/* Heading */}
           <div className="mb-8 text-center">
             <h2 className="text-lg font-semibold tracking-tight text-foreground sm:text-xl">
-              {t('providerSelection.title')}
+              {t("providerSelection.title")}
             </h2>
             <p className="mt-1 text-[13px] text-muted-foreground">
-              {t('providerSelection.description')}
+              {t("providerSelection.description")}
             </p>
           </div>
 
@@ -149,23 +177,30 @@ export default function ProviderSelectionEmptyState({
                     relative flex flex-col items-center gap-2.5 rounded-xl border-[1.5px] px-2
                     pb-4 pt-5 transition-all duration-150
                     active:scale-[0.97]
-                    ${active
-                      ? `${p.accent} ${p.ring} bg-card shadow-sm ring-2`
-                      : 'border-border bg-card/60 hover:border-border/80 hover:bg-card'
+                    ${
+                      active
+                        ? `${p.accent} ${p.ring} bg-card shadow-sm ring-2`
+                        : "border-border bg-card/60 hover:border-border/80 hover:bg-card"
                     }
                   `}
                 >
                   <SessionProviderLogo
                     provider={p.id}
-                    className={`h-9 w-9 transition-transform duration-150 ${active ? 'scale-110' : ''}`}
+                    className={`h-9 w-9 transition-transform duration-150 ${active ? "scale-110" : ""}`}
                   />
                   <div className="text-center">
-                    <p className="text-[13px] font-semibold leading-none text-foreground">{p.name}</p>
-                    <p className="mt-1 text-[10px] leading-tight text-muted-foreground">{t(p.infoKey)}</p>
+                    <p className="text-[13px] font-semibold leading-none text-foreground">
+                      {p.name}
+                    </p>
+                    <p className="mt-1 text-[10px] leading-tight text-muted-foreground">
+                      {t(p.infoKey)}
+                    </p>
                   </div>
                   {/* Check badge */}
                   {active && (
-                    <div className={`absolute -right-1 -top-1 h-[18px] w-[18px] rounded-full ${p.check} flex items-center justify-center shadow-sm`}>
+                    <div
+                      className={`absolute -right-1 -top-1 h-[18px] w-[18px] rounded-full ${p.check} flex items-center justify-center shadow-sm`}
+                    >
                       <Check className="h-2.5 w-2.5" strokeWidth={3} />
                     </div>
                   )}
@@ -175,9 +210,13 @@ export default function ProviderSelectionEmptyState({
           </div>
 
           {/* Model picker — appears after provider is chosen */}
-          <div className={`transition-all duration-200 ${provider ? 'translate-y-0 opacity-100' : 'pointer-events-none translate-y-1 opacity-0'}`}>
+          <div
+            className={`transition-all duration-200 ${provider ? "translate-y-0 opacity-100" : "pointer-events-none translate-y-1 opacity-0"}`}
+          >
             <div className="mb-5 flex items-center justify-center gap-2">
-              <span className="text-sm text-muted-foreground">{t('providerSelection.selectModel')}</span>
+              <span className="text-sm text-muted-foreground">
+                {t("providerSelection.selectModel")}
+              </span>
               <div className="relative">
                 <select
                   value={currentModel}
@@ -185,9 +224,13 @@ export default function ProviderSelectionEmptyState({
                   tabIndex={-1}
                   className="cursor-pointer appearance-none rounded-lg border border-border/60 bg-muted/50 py-1.5 pl-3 pr-7 text-sm font-medium text-foreground transition-colors hover:bg-muted focus:outline-none focus:ring-2 focus:ring-primary/20"
                 >
-                  {modelConfig.OPTIONS.map(({ value, label }: { value: string; label: string }) => (
-                    <option key={value} value={value}>{label}</option>
-                  ))}
+                  {modelConfig.OPTIONS.map(
+                    ({ value, label }: { value: string; label: string }) => (
+                      <option key={value + label} value={value}>
+                        {label}
+                      </option>
+                    ),
+                  )}
                 </select>
                 <ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground" />
               </div>
@@ -196,10 +239,18 @@ export default function ProviderSelectionEmptyState({
             <p className="text-center text-sm text-muted-foreground/70">
               {
                 {
-                  claude: t('providerSelection.readyPrompt.claude', { model: claudeModel }),
-                  cursor: t('providerSelection.readyPrompt.cursor', { model: cursorModel }),
-                  codex: t('providerSelection.readyPrompt.codex', { model: codexModel }),
-                  gemini: t('providerSelection.readyPrompt.gemini', { model: geminiModel }),
+                  claude: t("providerSelection.readyPrompt.claude", {
+                    model: claudeModel,
+                  }),
+                  cursor: t("providerSelection.readyPrompt.cursor", {
+                    model: cursorModel,
+                  }),
+                  codex: t("providerSelection.readyPrompt.codex", {
+                    model: codexModel,
+                  }),
+                  gemini: t("providerSelection.readyPrompt.gemini", {
+                    model: geminiModel,
+                  }),
                 }[provider]
               }
             </p>
@@ -208,7 +259,10 @@ export default function ProviderSelectionEmptyState({
           {/* Task banner */}
           {provider && tasksEnabled && isTaskMasterInstalled && (
             <div className="mt-5">
-              <NextTaskBanner onStartTask={() => setInput(nextTaskPrompt)} onShowAllTasks={onShowAllTasks} />
+              <NextTaskBanner
+                onStartTask={() => setInput(nextTaskPrompt)}
+                onShowAllTasks={onShowAllTasks}
+              />
             </div>
           )}
         </div>
@@ -221,12 +275,19 @@ export default function ProviderSelectionEmptyState({
     return (
       <div className="flex h-full items-center justify-center">
         <div className="max-w-md px-6 text-center">
-          <p className="mb-1.5 text-lg font-semibold text-foreground">{t('session.continue.title')}</p>
-          <p className="text-sm leading-relaxed text-muted-foreground">{t('session.continue.description')}</p>
+          <p className="mb-1.5 text-lg font-semibold text-foreground">
+            {t("session.continue.title")}
+          </p>
+          <p className="text-sm leading-relaxed text-muted-foreground">
+            {t("session.continue.description")}
+          </p>
 
           {tasksEnabled && isTaskMasterInstalled && (
             <div className="mt-5">
-              <NextTaskBanner onStartTask={() => setInput(nextTaskPrompt)} onShowAllTasks={onShowAllTasks} />
+              <NextTaskBanner
+                onStartTask={() => setInput(nextTaskPrompt)}
+                onShowAllTasks={onShowAllTasks}
+              />
             </div>
           )}
         </div>