refactor: reorganize chat view components and types

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

@@ -0,0 +1,346 @@
+import CommandMenu from '../../../CommandMenu';
+import ClaudeStatus from '../../../ClaudeStatus';
+import { MicButton } from '../../../MicButton.jsx';
+import ImageAttachment from './ImageAttachment';
+import PermissionRequestsBanner from './PermissionRequestsBanner';
+import ChatInputControls from './ChatInputControls';
+import { useTranslation } from 'react-i18next';
+import type {
+  ChangeEvent,
+  ClipboardEvent,
+  Dispatch,
+  FormEvent,
+  KeyboardEvent,
+  MouseEvent,
+  ReactNode,
+  RefObject,
+  SetStateAction,
+  TouchEvent,
+} from 'react';
+import type { PendingPermissionRequest, PermissionMode, Provider } from '../../types/types';
+
+interface MentionableFile {
+  name: string;
+  path: string;
+}
+
+interface SlashCommand {
+  name: string;
+  description?: string;
+  namespace?: string;
+  path?: string;
+  type?: string;
+  metadata?: Record<string, unknown>;
+  [key: string]: unknown;
+}
+
+interface ChatComposerProps {
+  pendingPermissionRequests: PendingPermissionRequest[];
+  handlePermissionDecision: (
+    requestIds: string | string[],
+    decision: { allow?: boolean; message?: string; rememberEntry?: string | null; updatedInput?: unknown },
+  ) => void;
+  handleGrantToolPermission: (suggestion: { entry: string; toolName: string }) => { success: boolean };
+  claudeStatus: { text: string; tokens: number; can_interrupt: boolean } | null;
+  isLoading: boolean;
+  onAbortSession: () => void;
+  provider: Provider | string;
+  permissionMode: PermissionMode | string;
+  onModeSwitch: () => void;
+  thinkingMode: string;
+  setThinkingMode: Dispatch<SetStateAction<string>>;
+  tokenBudget: { used?: number; total?: number } | null;
+  slashCommandsCount: number;
+  onToggleCommandMenu: () => void;
+  hasInput: boolean;
+  onClearInput: () => void;
+  isUserScrolledUp: boolean;
+  hasMessages: boolean;
+  onScrollToBottom: () => void;
+  onSubmit: (event: FormEvent<HTMLFormElement> | MouseEvent<HTMLButtonElement> | TouchEvent<HTMLButtonElement>) => void;
+  isDragActive: boolean;
+  attachedImages: File[];
+  onRemoveImage: (index: number) => void;
+  uploadingImages: Map<string, number>;
+  imageErrors: Map<string, string>;
+  showFileDropdown: boolean;
+  filteredFiles: MentionableFile[];
+  selectedFileIndex: number;
+  onSelectFile: (file: MentionableFile) => void;
+  filteredCommands: SlashCommand[];
+  selectedCommandIndex: number;
+  onCommandSelect: (command: SlashCommand, index: number, isHover: boolean) => void;
+  onCloseCommandMenu: () => void;
+  isCommandMenuOpen: boolean;
+  frequentCommands: SlashCommand[];
+  getRootProps: (...args: unknown[]) => Record<string, unknown>;
+  getInputProps: (...args: unknown[]) => Record<string, unknown>;
+  openImagePicker: () => void;
+  inputHighlightRef: RefObject<HTMLDivElement>;
+  renderInputWithMentions: (text: string) => ReactNode;
+  textareaRef: RefObject<HTMLTextAreaElement>;
+  input: string;
+  onInputChange: (event: ChangeEvent<HTMLTextAreaElement>) => void;
+  onTextareaClick: (event: MouseEvent<HTMLTextAreaElement>) => void;
+  onTextareaKeyDown: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
+  onTextareaPaste: (event: ClipboardEvent<HTMLTextAreaElement>) => void;
+  onTextareaScrollSync: (target: HTMLTextAreaElement) => void;
+  onTextareaInput: (event: FormEvent<HTMLTextAreaElement>) => void;
+  onInputFocusChange?: (focused: boolean) => void;
+  placeholder: string;
+  isTextareaExpanded: boolean;
+  sendByCtrlEnter?: boolean;
+  onTranscript: (text: string) => void;
+}
+
+export default function ChatComposer({
+  pendingPermissionRequests,
+  handlePermissionDecision,
+  handleGrantToolPermission,
+  claudeStatus,
+  isLoading,
+  onAbortSession,
+  provider,
+  permissionMode,
+  onModeSwitch,
+  thinkingMode,
+  setThinkingMode,
+  tokenBudget,
+  slashCommandsCount,
+  onToggleCommandMenu,
+  hasInput,
+  onClearInput,
+  isUserScrolledUp,
+  hasMessages,
+  onScrollToBottom,
+  onSubmit,
+  isDragActive,
+  attachedImages,
+  onRemoveImage,
+  uploadingImages,
+  imageErrors,
+  showFileDropdown,
+  filteredFiles,
+  selectedFileIndex,
+  onSelectFile,
+  filteredCommands,
+  selectedCommandIndex,
+  onCommandSelect,
+  onCloseCommandMenu,
+  isCommandMenuOpen,
+  frequentCommands,
+  getRootProps,
+  getInputProps,
+  openImagePicker,
+  inputHighlightRef,
+  renderInputWithMentions,
+  textareaRef,
+  input,
+  onInputChange,
+  onTextareaClick,
+  onTextareaKeyDown,
+  onTextareaPaste,
+  onTextareaScrollSync,
+  onTextareaInput,
+  onInputFocusChange,
+  placeholder,
+  isTextareaExpanded,
+  sendByCtrlEnter,
+  onTranscript,
+}: ChatComposerProps) {
+  const { t } = useTranslation('chat');
+  const AnyCommandMenu = CommandMenu as any;
+  const textareaRect = textareaRef.current?.getBoundingClientRect();
+  const commandMenuPosition = {
+    top: textareaRect ? Math.max(16, textareaRect.top - 316) : 0,
+    left: textareaRect ? textareaRect.left : 16,
+    bottom: textareaRect ? window.innerHeight - textareaRect.top + 8 : 90,
+  };
+
+  return (
+    <div className="p-2 sm:p-4 md:p-4 flex-shrink-0 pb-2 sm:pb-4 md:pb-6">
+      <div className="flex-1">
+        <ClaudeStatus
+          status={claudeStatus}
+          isLoading={isLoading}
+          onAbort={onAbortSession}
+          provider={provider}
+        />
+      </div>
+
+      <div className="max-w-4xl mx-auto mb-3">
+        <PermissionRequestsBanner
+          pendingPermissionRequests={pendingPermissionRequests}
+          handlePermissionDecision={handlePermissionDecision}
+          handleGrantToolPermission={handleGrantToolPermission}
+        />
+
+        <ChatInputControls
+          permissionMode={permissionMode}
+          onModeSwitch={onModeSwitch}
+          provider={provider}
+          thinkingMode={thinkingMode}
+          setThinkingMode={setThinkingMode}
+          tokenBudget={tokenBudget}
+          slashCommandsCount={slashCommandsCount}
+          onToggleCommandMenu={onToggleCommandMenu}
+          hasInput={hasInput}
+          onClearInput={onClearInput}
+          isUserScrolledUp={isUserScrolledUp}
+          hasMessages={hasMessages}
+          onScrollToBottom={onScrollToBottom}
+        />
+      </div>
+
+      <form onSubmit={onSubmit as (event: FormEvent<HTMLFormElement>) => void} className="relative max-w-4xl mx-auto">
+        {isDragActive && (
+          <div className="absolute inset-0 bg-blue-500/20 border-2 border-dashed border-blue-500 rounded-lg flex items-center justify-center z-50">
+            <div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-lg">
+              <svg className="w-8 h-8 text-blue-500 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                />
+              </svg>
+              <p className="text-sm font-medium">Drop images here</p>
+            </div>
+          </div>
+        )}
+
+        {attachedImages.length > 0 && (
+          <div className="mb-2 p-2 bg-gray-50 dark:bg-gray-800 rounded-lg">
+            <div className="flex flex-wrap gap-2">
+              {attachedImages.map((file, index) => (
+                <ImageAttachment
+                  key={index}
+                  file={file}
+                  onRemove={() => onRemoveImage(index)}
+                  uploadProgress={uploadingImages.get(file.name)}
+                  error={imageErrors.get(file.name)}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+
+        {showFileDropdown && filteredFiles.length > 0 && (
+          <div className="absolute bottom-full left-0 right-0 mb-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg max-h-48 overflow-y-auto z-50 backdrop-blur-sm">
+            {filteredFiles.map((file, index) => (
+              <div
+                key={file.path}
+                className={`px-4 py-3 cursor-pointer border-b border-gray-100 dark:border-gray-700 last:border-b-0 touch-manipulation ${
+                  index === selectedFileIndex
+                    ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300'
+                    : 'hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
+                }`}
+                onMouseDown={(event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                }}
+                onClick={(event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  onSelectFile(file);
+                }}
+              >
+                <div className="font-medium text-sm">{file.name}</div>
+                <div className="text-xs text-gray-500 dark:text-gray-400 font-mono">{file.path}</div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        <AnyCommandMenu
+          commands={filteredCommands}
+          selectedIndex={selectedCommandIndex}
+          onSelect={onCommandSelect}
+          onClose={onCloseCommandMenu}
+          position={commandMenuPosition}
+          isOpen={isCommandMenuOpen}
+          frequentCommands={frequentCommands}
+        />
+
+        <div
+          {...getRootProps()}
+          className={`relative bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-600 focus-within:ring-2 focus-within:ring-blue-500 dark:focus-within:ring-blue-500 focus-within:border-blue-500 transition-all duration-200 overflow-hidden ${
+            isTextareaExpanded ? 'chat-input-expanded' : ''
+          }`}
+        >
+          <input {...getInputProps()} />
+          <div ref={inputHighlightRef} aria-hidden="true" className="absolute inset-0 pointer-events-none overflow-hidden rounded-2xl">
+            <div className="chat-input-placeholder block w-full pl-12 pr-20 sm:pr-40 py-1.5 sm:py-4 text-transparent text-base leading-6 whitespace-pre-wrap break-words">
+              {renderInputWithMentions(input)}
+            </div>
+          </div>
+
+          <div className="relative z-10">
+            <textarea
+              ref={textareaRef}
+              value={input}
+              onChange={onInputChange}
+              onClick={onTextareaClick}
+              onKeyDown={onTextareaKeyDown}
+              onPaste={onTextareaPaste}
+              onScroll={(event) => onTextareaScrollSync(event.target as HTMLTextAreaElement)}
+              onFocus={() => onInputFocusChange?.(true)}
+              onBlur={() => onInputFocusChange?.(false)}
+              onInput={onTextareaInput}
+              placeholder={placeholder}
+              disabled={isLoading}
+              className="chat-input-placeholder block w-full pl-12 pr-20 sm:pr-40 py-1.5 sm:py-4 bg-transparent rounded-2xl focus:outline-none text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 disabled:opacity-50 resize-none min-h-[50px] sm:min-h-[80px] max-h-[40vh] sm:max-h-[300px] overflow-y-auto text-base leading-6 transition-all duration-200"
+              style={{ height: '50px' }}
+            />
+
+            <button
+              type="button"
+              onClick={openImagePicker}
+              className="absolute left-2 top-1/2 transform -translate-y-1/2 p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
+              title={t('input.attachImages')}
+            >
+              <svg className="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                />
+              </svg>
+            </button>
+
+            <div className="absolute right-16 sm:right-16 top-1/2 transform -translate-y-1/2" style={{ display: 'none' }}>
+              <MicButton onTranscript={onTranscript} className="w-10 h-10 sm:w-10 sm:h-10" />
+            </div>
+
+            <button
+              type="submit"
+              disabled={!input.trim() || isLoading}
+              onMouseDown={(event) => {
+                event.preventDefault();
+                onSubmit(event);
+              }}
+              onTouchStart={(event) => {
+                event.preventDefault();
+                onSubmit(event);
+              }}
+              className="absolute right-2 top-1/2 transform -translate-y-1/2 w-12 h-12 sm:w-12 sm:h-12 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed rounded-full flex items-center justify-center transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:ring-offset-gray-800"
+            >
+              <svg className="w-4 h-4 sm:w-5 sm:h-5 text-white transform rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
+              </svg>
+            </button>
+
+            <div
+              className={`absolute bottom-1 left-12 right-14 sm:right-40 text-xs text-gray-400 dark:text-gray-500 pointer-events-none hidden sm:block transition-opacity duration-200 ${
+                input.trim() ? 'opacity-0' : 'opacity-100'
+              }`}
+            >
+              {sendByCtrlEnter ? t('input.hintText.ctrlEnter') : t('input.hintText.enter')}
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}

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

@@ -0,0 +1,138 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import ThinkingModeSelector from '../../ThinkingModeSelector.jsx';
+import TokenUsagePie from '../../TokenUsagePie';
+import type { PermissionMode, Provider } from '../types';
+
+interface ChatInputControlsProps {
+  permissionMode: PermissionMode | string;
+  onModeSwitch: () => void;
+  provider: Provider | string;
+  thinkingMode: string;
+  setThinkingMode: React.Dispatch<React.SetStateAction<string>>;
+  tokenBudget: { used?: number; total?: number } | null;
+  slashCommandsCount: number;
+  onToggleCommandMenu: () => void;
+  hasInput: boolean;
+  onClearInput: () => void;
+  isUserScrolledUp: boolean;
+  hasMessages: boolean;
+  onScrollToBottom: () => void;
+}
+
+export default function ChatInputControls({
+  permissionMode,
+  onModeSwitch,
+  provider,
+  thinkingMode,
+  setThinkingMode,
+  tokenBudget,
+  slashCommandsCount,
+  onToggleCommandMenu,
+  hasInput,
+  onClearInput,
+  isUserScrolledUp,
+  hasMessages,
+  onScrollToBottom,
+}: ChatInputControlsProps) {
+  const { t } = useTranslation('chat');
+
+  return (
+    <div className="flex items-center justify-center gap-3">
+      <button
+        type="button"
+        onClick={onModeSwitch}
+        className={`px-3 py-1.5 rounded-lg text-sm font-medium border transition-all duration-200 ${
+          permissionMode === 'default'
+            ? 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-600'
+            : permissionMode === 'acceptEdits'
+              ? 'bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300 border-green-300 dark:border-green-600 hover:bg-green-100 dark:hover:bg-green-900/30'
+              : permissionMode === 'bypassPermissions'
+                ? 'bg-orange-50 dark:bg-orange-900/20 text-orange-700 dark:text-orange-300 border-orange-300 dark:border-orange-600 hover:bg-orange-100 dark:hover:bg-orange-900/30'
+                : 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-blue-300 dark:border-blue-600 hover:bg-blue-100 dark:hover:bg-blue-900/30'
+        }`}
+        title={t('input.clickToChangeMode')}
+      >
+        <div className="flex items-center gap-2">
+          <div
+            className={`w-2 h-2 rounded-full ${
+              permissionMode === 'default'
+                ? 'bg-gray-500'
+                : permissionMode === 'acceptEdits'
+                  ? 'bg-green-500'
+                  : permissionMode === 'bypassPermissions'
+                    ? 'bg-orange-500'
+                    : 'bg-blue-500'
+            }`}
+          />
+          <span>
+            {permissionMode === 'default' && t('codex.modes.default')}
+            {permissionMode === 'acceptEdits' && t('codex.modes.acceptEdits')}
+            {permissionMode === 'bypassPermissions' && t('codex.modes.bypassPermissions')}
+            {permissionMode === 'plan' && t('codex.modes.plan')}
+          </span>
+        </div>
+      </button>
+
+      {provider === 'claude' && (
+        <ThinkingModeSelector selectedMode={thinkingMode} onModeChange={setThinkingMode} onClose={() => {}} className="" />
+      )}
+
+      <TokenUsagePie used={tokenBudget?.used || 0} total={tokenBudget?.total || parseInt(import.meta.env.VITE_CONTEXT_WINDOW) || 160000} />
+
+      <button
+        type="button"
+        onClick={onToggleCommandMenu}
+        className="relative w-8 h-8 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded-full flex items-center justify-center transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:ring-offset-gray-800"
+        title={t('input.showAllCommands')}
+      >
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"
+          />
+        </svg>
+        {slashCommandsCount > 0 && (
+          <span
+            className="absolute -top-1 -right-1 bg-blue-600 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center"
+            style={{ fontSize: '10px' }}
+          >
+            {slashCommandsCount}
+          </span>
+        )}
+      </button>
+
+      {hasInput && (
+        <button
+          type="button"
+          onClick={onClearInput}
+          className="w-8 h-8 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-full flex items-center justify-center transition-all duration-200 group shadow-sm"
+          title="Clear input"
+        >
+          <svg
+            className="w-4 h-4 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100 transition-colors"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      )}
+
+      {isUserScrolledUp && hasMessages && (
+        <button
+          onClick={onScrollToBottom}
+          className="w-8 h-8 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg flex items-center justify-center transition-all duration-200 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:ring-offset-gray-800"
+          title="Scroll to bottom"
+        >
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,209 @@
+import { useTranslation } from 'react-i18next';
+import type { Dispatch, RefObject, SetStateAction } from 'react';
+import SessionProviderLogo from '../../../SessionProviderLogo';
+import MessageComponent from './MessageComponent';
+import ProviderSelectionEmptyState from './ProviderSelectionEmptyState';
+import type { ChatMessage, Provider } from '../../types/types';
+import type { Project, ProjectSession } from '../../../../types/app';
+
+interface ChatMessagesPaneProps {
+  scrollContainerRef: RefObject<HTMLDivElement>;
+  onWheel: () => void;
+  onTouchMove: () => void;
+  isLoadingSessionMessages: boolean;
+  chatMessages: ChatMessage[];
+  selectedSession: ProjectSession | null;
+  currentSessionId: string | null;
+  provider: Provider | string;
+  setProvider: (provider: Provider | string) => void;
+  textareaRef: RefObject<HTMLTextAreaElement>;
+  claudeModel: string;
+  setClaudeModel: (model: string) => void;
+  cursorModel: string;
+  setCursorModel: (model: string) => void;
+  codexModel: string;
+  setCodexModel: (model: string) => void;
+  tasksEnabled: boolean;
+  isTaskMasterInstalled: boolean | null;
+  onShowAllTasks?: (() => void) | null;
+  setInput: Dispatch<SetStateAction<string>>;
+  isLoadingMoreMessages: boolean;
+  hasMoreMessages: boolean;
+  totalMessages: number;
+  sessionMessagesCount: number;
+  visibleMessageCount: number;
+  visibleMessages: ChatMessage[];
+  loadEarlierMessages: () => void;
+  createDiff: any;
+  onFileOpen?: (filePath: string, diffInfo?: unknown) => void;
+  onShowSettings?: () => void;
+  onGrantToolPermission: (suggestion: { entry: string; toolName: string }) => { success: boolean };
+  autoExpandTools?: boolean;
+  showRawParameters?: boolean;
+  showThinking?: boolean;
+  selectedProject: Project;
+  isLoading: boolean;
+}
+
+function AssistantThinkingIndicator() {
+  const selectedProvider = (localStorage.getItem('selected-provider') || 'claude') as Provider;
+
+  return (
+    <div className="chat-message assistant">
+      <div className="w-full">
+        <div className="flex items-center space-x-3 mb-2">
+          <div className="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm flex-shrink-0 p-1 bg-transparent">
+            <SessionProviderLogo provider={selectedProvider} className="w-full h-full" />
+          </div>
+          <div className="text-sm font-medium text-gray-900 dark:text-white">
+            {selectedProvider === 'cursor' ? 'Cursor' : selectedProvider === 'codex' ? 'Codex' : 'Claude'}
+          </div>
+        </div>
+        <div className="w-full text-sm text-gray-500 dark:text-gray-400 pl-3 sm:pl-0">
+          <div className="flex items-center space-x-1">
+            <div className="animate-pulse">.</div>
+            <div className="animate-pulse" style={{ animationDelay: '0.2s' }}>
+              .
+            </div>
+            <div className="animate-pulse" style={{ animationDelay: '0.4s' }}>
+              .
+            </div>
+            <span className="ml-2">Thinking...</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function ChatMessagesPane({
+  scrollContainerRef,
+  onWheel,
+  onTouchMove,
+  isLoadingSessionMessages,
+  chatMessages,
+  selectedSession,
+  currentSessionId,
+  provider,
+  setProvider,
+  textareaRef,
+  claudeModel,
+  setClaudeModel,
+  cursorModel,
+  setCursorModel,
+  codexModel,
+  setCodexModel,
+  tasksEnabled,
+  isTaskMasterInstalled,
+  onShowAllTasks,
+  setInput,
+  isLoadingMoreMessages,
+  hasMoreMessages,
+  totalMessages,
+  sessionMessagesCount,
+  visibleMessageCount,
+  visibleMessages,
+  loadEarlierMessages,
+  createDiff,
+  onFileOpen,
+  onShowSettings,
+  onGrantToolPermission,
+  autoExpandTools,
+  showRawParameters,
+  showThinking,
+  selectedProject,
+  isLoading,
+}: ChatMessagesPaneProps) {
+  const { t } = useTranslation('chat');
+
+  return (
+    <div
+      ref={scrollContainerRef}
+      onWheel={onWheel}
+      onTouchMove={onTouchMove}
+      className="flex-1 overflow-y-auto overflow-x-hidden px-0 py-3 sm:p-4 space-y-3 sm:space-y-4 relative"
+    >
+      {isLoadingSessionMessages && chatMessages.length === 0 ? (
+        <div className="text-center text-gray-500 dark:text-gray-400 mt-8">
+          <div className="flex items-center justify-center space-x-2">
+            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-gray-400" />
+            <p>{t('session.loading.sessionMessages')}</p>
+          </div>
+        </div>
+      ) : chatMessages.length === 0 ? (
+        <ProviderSelectionEmptyState
+          selectedSession={selectedSession}
+          currentSessionId={currentSessionId}
+          provider={provider}
+          setProvider={setProvider}
+          textareaRef={textareaRef}
+          claudeModel={claudeModel}
+          setClaudeModel={setClaudeModel}
+          cursorModel={cursorModel}
+          setCursorModel={setCursorModel}
+          codexModel={codexModel}
+          setCodexModel={setCodexModel}
+          tasksEnabled={tasksEnabled}
+          isTaskMasterInstalled={isTaskMasterInstalled}
+          onShowAllTasks={onShowAllTasks}
+          setInput={setInput}
+        />
+      ) : (
+        <>
+          {isLoadingMoreMessages && (
+            <div className="text-center text-gray-500 dark:text-gray-400 py-3">
+              <div className="flex items-center justify-center space-x-2">
+                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-gray-400" />
+                <p className="text-sm">{t('session.loading.olderMessages')}</p>
+              </div>
+            </div>
+          )}
+
+          {hasMoreMessages && !isLoadingMoreMessages && (
+            <div className="text-center text-gray-500 dark:text-gray-400 text-sm py-2 border-b border-gray-200 dark:border-gray-700">
+              {totalMessages > 0 && (
+                <span>
+                  {t('session.messages.showingOf', { shown: sessionMessagesCount, total: totalMessages })} |
+                  <span className="text-xs">{t('session.messages.scrollToLoad')}</span>
+                </span>
+              )}
+            </div>
+          )}
+
+          {!hasMoreMessages && chatMessages.length > visibleMessageCount && (
+            <div className="text-center text-gray-500 dark:text-gray-400 text-sm py-2 border-b border-gray-200 dark:border-gray-700">
+              {t('session.messages.showingLast', { count: visibleMessageCount, total: chatMessages.length })} |
+              <button className="ml-1 text-blue-600 hover:text-blue-700 underline" onClick={loadEarlierMessages}>
+                {t('session.messages.loadEarlier')}
+              </button>
+            </div>
+          )}
+
+          {visibleMessages.map((message, index) => {
+            const prevMessage = index > 0 ? visibleMessages[index - 1] : null;
+            return (
+              <MessageComponent
+                key={index}
+                message={message}
+                index={index}
+                prevMessage={prevMessage}
+                createDiff={createDiff}
+                onFileOpen={onFileOpen}
+                onShowSettings={onShowSettings}
+                onGrantToolPermission={onGrantToolPermission}
+                autoExpandTools={autoExpandTools}
+                showRawParameters={showRawParameters}
+                showThinking={showThinking}
+                selectedProject={selectedProject}
+                provider={provider}
+              />
+            );
+          })}
+        </>
+      )}
+
+      {isLoading && <AssistantThinkingIndicator />}
+    </div>
+  );
+}
+

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

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+
+interface ImageAttachmentProps {
+  file: File;
+  onRemove: () => void;
+  uploadProgress?: number;
+  error?: string;
+}
+
+const ImageAttachment = ({ file, onRemove, uploadProgress, error }: ImageAttachmentProps) => {
+  const [preview, setPreview] = useState<string | undefined>(undefined);
+  
+  useEffect(() => {
+    const url = URL.createObjectURL(file);
+    setPreview(url);
+    return () => URL.revokeObjectURL(url);
+  }, [file]);
+  
+  return (
+    <div className="relative group">
+      <img src={preview} alt={file.name} className="w-20 h-20 object-cover rounded" />
+      {uploadProgress !== undefined && uploadProgress < 100 && (
+        <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
+          <div className="text-white text-xs">{uploadProgress}%</div>
+        </div>
+      )}
+      {error && (
+        <div className="absolute inset-0 bg-red-500/50 flex items-center justify-center">
+          <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </div>
+      )}
+      <button
+        onClick={onRemove}
+        className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1 opacity-0 group-hover:opacity-100"
+      >
+        <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+  );
+};
+
+export default ImageAttachment;
+
+

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

@@ -0,0 +1,188 @@
+import React, { useMemo, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { useTranslation } from 'react-i18next';
+import { normalizeInlineCodeFences } from '../../utils/chatFormatting';
+
+type MarkdownProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+type CodeBlockProps = {
+  node?: any;
+  inline?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+};
+
+const CodeBlock = ({ node, inline, className, children, ...props }: CodeBlockProps) => {
+  const { t } = useTranslation('chat');
+  const [copied, setCopied] = useState(false);
+  const raw = Array.isArray(children) ? children.join('') : String(children ?? '');
+  const looksMultiline = /[\r\n]/.test(raw);
+  const inlineDetected = inline || (node && node.type === 'inlineCode');
+  const shouldInline = inlineDetected || !looksMultiline;
+
+  if (shouldInline) {
+    return (
+      <code
+        className={`font-mono text-[0.9em] px-1.5 py-0.5 rounded-md bg-gray-100 text-gray-900 border border-gray-200 dark:bg-gray-800/60 dark:text-gray-100 dark:border-gray-700 whitespace-pre-wrap break-words ${
+          className || ''
+        }`}
+        {...props}
+      >
+        {children}
+      </code>
+    );
+  }
+
+  const match = /language-(\w+)/.exec(className || '');
+  const language = match ? match[1] : 'text';
+  const textToCopy = raw;
+
+  const handleCopy = () => {
+    const doSet = () => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    };
+    try {
+      if (navigator && navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(textToCopy).then(doSet).catch(() => {
+          const ta = document.createElement('textarea');
+          ta.value = textToCopy;
+          ta.style.position = 'fixed';
+          ta.style.opacity = '0';
+          document.body.appendChild(ta);
+          ta.select();
+          try {
+            document.execCommand('copy');
+          } catch {}
+          document.body.removeChild(ta);
+          doSet();
+        });
+      } else {
+        const ta = document.createElement('textarea');
+        ta.value = textToCopy;
+        ta.style.position = 'fixed';
+        ta.style.opacity = '0';
+        document.body.appendChild(ta);
+        ta.select();
+        try {
+          document.execCommand('copy');
+        } catch {}
+        document.body.removeChild(ta);
+        doSet();
+      }
+    } catch {}
+  };
+
+  return (
+    <div className="relative group my-2">
+      {language && language !== 'text' && (
+        <div className="absolute top-2 left-3 z-10 text-xs text-gray-400 font-medium uppercase">{language}</div>
+      )}
+
+      <button
+        type="button"
+        onClick={handleCopy}
+        className="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 focus:opacity-100 active:opacity-100 transition-opacity text-xs px-2 py-1 rounded-md bg-gray-700/80 hover:bg-gray-700 text-white border border-gray-600"
+        title={copied ? t('codeBlock.copied') : t('codeBlock.copyCode')}
+        aria-label={copied ? t('codeBlock.copied') : t('codeBlock.copyCode')}
+      >
+        {copied ? (
+          <span className="flex items-center gap-1">
+            <svg className="w-3.5 h-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>
+            {t('codeBlock.copied')}
+          </span>
+        ) : (
+          <span className="flex items-center gap-1">
+            <svg
+              className="w-3.5 h-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>
+            {t('codeBlock.copy')}
+          </span>
+        )}
+      </button>
+
+      <SyntaxHighlighter
+        language={language}
+        style={oneDark}
+        customStyle={{
+          margin: 0,
+          borderRadius: '0.5rem',
+          fontSize: '0.875rem',
+          padding: language && language !== 'text' ? '2rem 1rem 1rem 1rem' : '1rem',
+        }}
+        codeTagProps={{
+          style: {
+            fontFamily:
+              'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+          },
+        }}
+      >
+        {raw}
+      </SyntaxHighlighter>
+    </div>
+  );
+};
+
+const markdownComponents = {
+  code: CodeBlock,
+  blockquote: ({ children }: { children?: React.ReactNode }) => (
+    <blockquote className="border-l-4 border-gray-300 dark:border-gray-600 pl-4 italic text-gray-600 dark:text-gray-400 my-2">
+      {children}
+    </blockquote>
+  ),
+  a: ({ href, children }: { href?: string; children?: React.ReactNode }) => (
+    <a href={href} className="text-blue-600 dark:text-blue-400 hover:underline" target="_blank" rel="noopener noreferrer">
+      {children}
+    </a>
+  ),
+  p: ({ children }: { children?: React.ReactNode }) => <div className="mb-2 last:mb-0">{children}</div>,
+  table: ({ children }: { children?: React.ReactNode }) => (
+    <div className="overflow-x-auto my-2">
+      <table className="min-w-full border-collapse border border-gray-200 dark:border-gray-700">{children}</table>
+    </div>
+  ),
+  thead: ({ children }: { children?: React.ReactNode }) => <thead className="bg-gray-50 dark:bg-gray-800">{children}</thead>,
+  th: ({ children }: { children?: React.ReactNode }) => (
+    <th className="px-3 py-2 text-left text-sm font-semibold border border-gray-200 dark:border-gray-700">{children}</th>
+  ),
+  td: ({ children }: { children?: React.ReactNode }) => (
+    <td className="px-3 py-2 align-top text-sm border border-gray-200 dark:border-gray-700">{children}</td>
+  ),
+};
+
+export function Markdown({ children, className }: MarkdownProps) {
+  const content = normalizeInlineCodeFences(String(children ?? ''));
+  const remarkPlugins = useMemo(() => [remarkGfm, remarkMath], []);
+  const rehypePlugins = useMemo(() => [rehypeKatex], []);
+
+  return (
+    <div className={className}>
+      <ReactMarkdown remarkPlugins={remarkPlugins} rehypePlugins={rehypePlugins} components={markdownComponents as any}>
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+}

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

@@ -0,0 +1,430 @@
+// @ts-nocheck
+import React, { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import SessionProviderLogo from '../../../SessionProviderLogo';
+import type { ChatMessage, Provider } from '../../types/types';
+import { Markdown } from './Markdown';
+import { formatUsageLimitText } from '../../utils/chatFormatting';
+import { getClaudePermissionSuggestion } from '../../utils/chatPermissions';
+import type { Project } from '../../../../types/app';
+import { ToolRenderer, shouldHideToolResult } from '../../tools';
+
+type DiffLine = {
+  type: string;
+  content: string;
+  lineNum: number;
+};
+
+interface MessageComponentProps {
+  message: ChatMessage;
+  index: number;
+  prevMessage: ChatMessage | null;
+  createDiff: (oldStr: string, newStr: string) => DiffLine[];
+  onFileOpen?: (filePath: string, diffInfo?: any) => void;
+  onShowSettings?: () => void;
+  onGrantToolPermission?: (suggestion: any) => any;
+  autoExpandTools?: boolean;
+  showRawParameters?: boolean;
+  showThinking?: boolean;
+  selectedProject?: Project | null;
+  provider: Provider | string;
+}
+
+const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFileOpen, onShowSettings, onGrantToolPermission, autoExpandTools, showRawParameters, showThinking, selectedProject, provider }: MessageComponentProps) => {
+  const { t } = useTranslation('chat');
+  const isGrouped = prevMessage && prevMessage.type === message.type &&
+                   ((prevMessage.type === 'assistant') ||
+                    (prevMessage.type === 'user') ||
+                    (prevMessage.type === 'tool') ||
+                    (prevMessage.type === 'error'));
+  const messageRef = React.useRef(null);
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const permissionSuggestion = getClaudePermissionSuggestion(message, provider);
+  const [permissionGrantState, setPermissionGrantState] = React.useState('idle');
+
+
+  React.useEffect(() => {
+    setPermissionGrantState('idle');
+  }, [permissionSuggestion?.entry, message.toolId]);
+
+  React.useEffect(() => {
+    const node = messageRef.current;
+    if (!autoExpandTools || !node || !message.isToolUse) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && !isExpanded) {
+            setIsExpanded(true);
+            const details = node.querySelectorAll('details');
+            details.forEach(detail => {
+              detail.open = true;
+            });
+          }
+        });
+      },
+      { threshold: 0.1 }
+    );
+
+    observer.observe(node);
+
+    return () => {
+      observer.unobserve(node);
+    };
+  }, [autoExpandTools, isExpanded, message.isToolUse]);
+
+  const selectedProvider = useMemo(() => localStorage.getItem('selected-provider') || 'claude', []);
+  const formattedTime = useMemo(() => new Date(message.timestamp).toLocaleTimeString(), [message.timestamp]);
+
+  return (
+    <div
+      ref={messageRef}
+      className={`chat-message ${message.type} ${isGrouped ? 'grouped' : ''} ${message.type === 'user' ? 'flex justify-end px-3 sm:px-0' : 'px-3 sm:px-0'}`}
+    >
+      {message.type === 'user' ? (
+        /* User message bubble on the right */
+        <div className="flex items-end space-x-0 sm:space-x-3 w-full sm:w-auto sm:max-w-[85%] md:max-w-md lg:max-w-lg xl:max-w-xl">
+          <div className="bg-blue-600 text-white rounded-2xl rounded-br-md px-3 sm:px-4 py-2 shadow-sm flex-1 sm:flex-initial">
+            <div className="text-sm whitespace-pre-wrap break-words">
+              {message.content}
+            </div>
+            {message.images && message.images.length > 0 && (
+              <div className="mt-2 grid grid-cols-2 gap-2">
+                {message.images.map((img, idx) => (
+                  <img
+                    key={img.name || idx}
+                    src={img.data}
+                    alt={img.name}
+                    className="rounded-lg max-w-full h-auto cursor-pointer hover:opacity-90 transition-opacity"
+                    onClick={() => window.open(img.data, '_blank')}
+                  />
+                ))}
+              </div>
+            )}
+            <div className="text-xs text-blue-100 mt-1 text-right">
+              {formattedTime}
+            </div>
+          </div>
+          {!isGrouped && (
+            <div className="hidden sm:flex w-8 h-8 bg-blue-600 rounded-full items-center justify-center text-white text-sm flex-shrink-0">
+              U
+            </div>
+          )}
+        </div>
+      ) : (
+        /* Claude/Error/Tool messages on the left */
+        <div className="w-full">
+          {!isGrouped && (
+            <div className="flex items-center space-x-3 mb-2">
+              {message.type === 'error' ? (
+                <div className="w-8 h-8 bg-red-600 rounded-full flex items-center justify-center text-white text-sm flex-shrink-0">
+                  !
+                </div>
+              ) : message.type === 'tool' ? (
+                <div className="w-8 h-8 bg-gray-600 dark:bg-gray-700 rounded-full flex items-center justify-center text-white text-sm flex-shrink-0">
+                  🔧
+                </div>
+              ) : (
+                <div className="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm flex-shrink-0 p-1">
+                  <SessionProviderLogo provider={selectedProvider} className="w-full h-full" />
+                </div>
+              )}
+              <div className="text-sm font-medium text-gray-900 dark:text-white">
+                {message.type === 'error' ? t('messageTypes.error') : message.type === 'tool' ? t('messageTypes.tool') : (selectedProvider === 'cursor' ? t('messageTypes.cursor') : selectedProvider === 'codex' ? t('messageTypes.codex') : t('messageTypes.claude'))}
+              </div>
+            </div>
+          )}
+          
+          <div className="w-full">
+
+            {message.isToolUse ? (
+              <>
+                <div className="flex flex-col">
+                  <div className="flex flex-col">
+                    <Markdown className="prose prose-sm max-w-none dark:prose-invert">{message.displayText}</Markdown>
+                  </div>
+                </div>
+
+                {message.toolInput && (
+                  <ToolRenderer
+                    toolName={message.toolName}
+                    toolInput={message.toolInput}
+                    toolResult={message.toolResult}
+                    toolId={message.toolId}
+                    mode="input"
+                    onFileOpen={onFileOpen}
+                    createDiff={createDiff}
+                    selectedProject={selectedProject}
+                    autoExpandTools={autoExpandTools}
+                    showRawParameters={showRawParameters}
+                    onShowSettings={onShowSettings}
+                    rawToolInput={message.toolInput}
+                  />
+                )}
+                
+                {/* Tool Result Section */}
+                {message.toolResult && !shouldHideToolResult(message.toolName, message.toolResult) && (
+                  message.toolResult.isError ? (
+                    // Error results - red error box with content
+                    <div
+                      id={`tool-result-${message.toolId}`}
+                      className="relative mt-2 p-3 rounded border scroll-mt-4 bg-red-50/50 dark:bg-red-950/10 border-red-200/60 dark:border-red-800/40"
+                    >
+                      <div className="relative flex items-center gap-1.5 mb-2">
+                        <svg className="w-4 h-4 text-red-500 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                        <span className="text-xs font-medium text-red-700 dark:text-red-300">Error</span>
+                      </div>
+                      <div className="relative text-sm text-red-900 dark:text-red-100">
+                        <Markdown className="prose prose-sm max-w-none prose-red dark:prose-invert">
+                          {String(message.toolResult.content || '')}
+                        </Markdown>
+                        {permissionSuggestion && (
+                          <div className="mt-4 border-t border-red-200/60 dark:border-red-800/60 pt-3">
+                            <div className="flex flex-wrap items-center gap-2">
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  if (!onGrantToolPermission) return;
+                                  const result = onGrantToolPermission(permissionSuggestion);
+                                  if (result?.success) {
+                                    setPermissionGrantState('granted');
+                                  } else {
+                                    setPermissionGrantState('error');
+                                  }
+                                }}
+                                disabled={permissionSuggestion.isAllowed || permissionGrantState === 'granted'}
+                                className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-xs font-medium border transition-colors ${
+                                  permissionSuggestion.isAllowed || permissionGrantState === 'granted'
+                                    ? 'bg-green-100 dark:bg-green-900/30 border-green-300/70 dark:border-green-800/60 text-green-800 dark:text-green-200 cursor-default'
+                                    : 'bg-white/80 dark:bg-gray-900/40 border-red-300/70 dark:border-red-800/60 text-red-700 dark:text-red-200 hover:bg-white dark:hover:bg-gray-900/70'
+                                }`}
+                              >
+                                {permissionSuggestion.isAllowed || permissionGrantState === 'granted'
+                                  ? 'Permission added'
+                                  : `Grant permission for ${permissionSuggestion.toolName}`}
+                              </button>
+                              {onShowSettings && (
+                                <button
+                                  type="button"
+                                  onClick={(e) => { e.stopPropagation(); onShowSettings(); }}
+                                  className="text-xs text-red-700 dark:text-red-200 underline hover:text-red-800 dark:hover:text-red-100"
+                                >
+                                  Open settings
+                                </button>
+                              )}
+                            </div>
+                            <div className="mt-2 text-xs text-red-700/90 dark:text-red-200/80">
+                              Adds <span className="font-mono">{permissionSuggestion.entry}</span> to Allowed Tools.
+                            </div>
+                            {permissionGrantState === 'error' && (
+                              <div className="mt-2 text-xs text-red-700 dark:text-red-200">
+                                Unable to update permissions. Please try again.
+                              </div>
+                            )}
+                            {(permissionSuggestion.isAllowed || permissionGrantState === 'granted') && (
+                              <div className="mt-2 text-xs text-green-700 dark:text-green-200">
+                                Permission saved. Retry the request to use the tool.
+                              </div>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  ) : (
+                    // Non-error results - route through ToolRenderer (single source of truth)
+                    <div id={`tool-result-${message.toolId}`} className="scroll-mt-4">
+                      <ToolRenderer
+                        toolName={message.toolName}
+                        toolInput={message.toolInput}
+                        toolResult={message.toolResult}
+                        toolId={message.toolId}
+                        mode="result"
+                        onFileOpen={onFileOpen}
+                        createDiff={createDiff}
+                        selectedProject={selectedProject}
+                        autoExpandTools={autoExpandTools}
+                      />
+                    </div>
+                  )
+                )}
+              </>
+            ) : message.isInteractivePrompt ? (
+              // Special handling for interactive prompts
+              <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4">
+                <div className="flex items-start gap-3">
+                  <div className="w-8 h-8 bg-amber-500 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
+                    <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                  </div>
+                  <div className="flex-1">
+                    <h4 className="font-semibold text-amber-900 dark:text-amber-100 text-base mb-3">
+                      Interactive Prompt
+                    </h4>
+                    {(() => {
+                      const lines = message.content.split('\n').filter(line => line.trim());
+                      const questionLine = lines.find(line => line.includes('?')) || lines[0] || '';
+                      const options = [];
+                      
+                      // Parse the menu options
+                      lines.forEach(line => {
+                        // Match lines like "❯ 1. Yes" or "  2. No"
+                        const optionMatch = line.match(/[❯\s]*(\d+)\.\s+(.+)/);
+                        if (optionMatch) {
+                          const isSelected = line.includes('❯');
+                          options.push({
+                            number: optionMatch[1],
+                            text: optionMatch[2].trim(),
+                            isSelected
+                          });
+                        }
+                      });
+                      
+                      return (
+                        <>
+                          <p className="text-sm text-amber-800 dark:text-amber-200 mb-4">
+                            {questionLine}
+                          </p>
+                          
+                          {/* Option buttons */}
+                          <div className="space-y-2 mb-4">
+                            {options.map((option) => (
+                              <button
+                                key={option.number}
+                                className={`w-full text-left px-4 py-3 rounded-lg border-2 transition-all ${
+                                  option.isSelected
+                                    ? 'bg-amber-600 dark:bg-amber-700 text-white border-amber-600 dark:border-amber-700 shadow-md'
+                                    : 'bg-white dark:bg-gray-800 text-amber-900 dark:text-amber-100 border-amber-300 dark:border-amber-700'
+                                } cursor-not-allowed opacity-75`}
+                                disabled
+                              >
+                                <div className="flex items-center gap-3">
+                                  <span className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold ${
+                                    option.isSelected
+                                      ? 'bg-white/20'
+                                      : 'bg-amber-100 dark:bg-amber-800/50'
+                                  }`}>
+                                    {option.number}
+                                  </span>
+                                  <span className="text-sm sm:text-base font-medium flex-1">
+                                    {option.text}
+                                  </span>
+                                  {option.isSelected && (
+                                    <span className="text-lg">❯</span>
+                                  )}
+                                </div>
+                              </button>
+                            ))}
+                          </div>
+                          
+                          <div className="bg-amber-100 dark:bg-amber-800/30 rounded-lg p-3">
+                            <p className="text-amber-900 dark:text-amber-100 text-sm font-medium mb-1">
+                              ⏳ Waiting for your response in the CLI
+                            </p>
+                            <p className="text-amber-800 dark:text-amber-200 text-xs">
+                              Please select an option in your terminal where Claude is running.
+                            </p>
+                          </div>
+                        </>
+                      );
+                    })()}
+                  </div>
+                </div>
+              </div>
+            ) : message.isThinking ? (
+              /* Thinking messages - collapsible by default */
+              <div className="text-sm text-gray-700 dark:text-gray-300">
+                <details className="group">
+                  <summary className="cursor-pointer text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 font-medium flex items-center gap-2">
+                    <svg className="w-3 h-3 transition-transform group-open:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                    </svg>
+                    <span>💭 Thinking...</span>
+                  </summary>
+                  <div className="mt-2 pl-4 border-l-2 border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 text-sm">
+                    <Markdown className="prose prose-sm max-w-none dark:prose-invert prose-gray">
+                      {message.content}
+                    </Markdown>
+                  </div>
+                </details>
+              </div>
+            ) : (
+              <div className="text-sm text-gray-700 dark:text-gray-300">
+                {/* Thinking accordion for reasoning */}
+                {showThinking && message.reasoning && (
+                  <details className="mb-3">
+                    <summary className="cursor-pointer text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 font-medium">
+                      💭 Thinking...
+                    </summary>
+                    <div className="mt-2 pl-4 border-l-2 border-gray-300 dark:border-gray-600 italic text-gray-600 dark:text-gray-400 text-sm">
+                      <div className="whitespace-pre-wrap">
+                        {message.reasoning}
+                      </div>
+                    </div>
+                  </details>
+                )}
+
+                {(() => {
+                  const content = formatUsageLimitText(String(message.content || ''));
+
+                  // Detect if content is pure JSON (starts with { or [)
+                  const trimmedContent = content.trim();
+                  if ((trimmedContent.startsWith('{') || trimmedContent.startsWith('[')) &&
+                      (trimmedContent.endsWith('}') || trimmedContent.endsWith(']'))) {
+                    try {
+                      const parsed = JSON.parse(trimmedContent);
+                      const formatted = JSON.stringify(parsed, null, 2);
+
+                      return (
+                        <div className="my-2">
+                          <div className="flex items-center gap-2 mb-2 text-sm text-gray-600 dark:text-gray-400">
+                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                            </svg>
+                            <span className="font-medium">JSON Response</span>
+                          </div>
+                          <div className="bg-gray-800 dark:bg-gray-900 border border-gray-600/30 dark:border-gray-700 rounded-lg overflow-hidden">
+                            <pre className="p-4 overflow-x-auto">
+                              <code className="text-gray-100 dark:text-gray-200 text-sm font-mono block whitespace-pre">
+                                {formatted}
+                              </code>
+                            </pre>
+                          </div>
+                        </div>
+                      );
+                    } catch (e) {
+                      // Not valid JSON, fall through to normal rendering
+                    }
+                  }
+
+                  // Normal rendering for non-JSON content
+                  return message.type === 'assistant' ? (
+                    <Markdown className="prose prose-sm max-w-none dark:prose-invert prose-gray">
+                      {content}
+                    </Markdown>
+                  ) : (
+                    <div className="whitespace-pre-wrap">
+                      {content}
+                    </div>
+                  );
+                })()}
+              </div>
+            )}
+            
+            {!isGrouped && (
+              <div className="text-[11px] text-gray-400 dark:text-gray-500 mt-1">
+                {formattedTime}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});
+
+export default MessageComponent;
+
+

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

@@ -0,0 +1,109 @@
+import React from 'react';
+import type { PendingPermissionRequest } from '../../types/types';
+import { buildClaudeToolPermissionEntry, formatToolInputForDisplay } from '../../utils/chatPermissions';
+import { getClaudeSettings } from '../../utils/chatStorage';
+
+interface PermissionRequestsBannerProps {
+  pendingPermissionRequests: PendingPermissionRequest[];
+  handlePermissionDecision: (
+    requestIds: string | string[],
+    decision: { allow?: boolean; message?: string; rememberEntry?: string | null; updatedInput?: unknown },
+  ) => void;
+  handleGrantToolPermission: (suggestion: { entry: string; toolName: string }) => { success: boolean };
+}
+
+export default function PermissionRequestsBanner({
+  pendingPermissionRequests,
+  handlePermissionDecision,
+  handleGrantToolPermission,
+}: PermissionRequestsBannerProps) {
+  if (!pendingPermissionRequests.length) {
+    return null;
+  }
+
+  return (
+    <div className="mb-3 space-y-2">
+      {pendingPermissionRequests.map((request) => {
+        const rawInput = formatToolInputForDisplay(request.input);
+        const permissionEntry = buildClaudeToolPermissionEntry(request.toolName, rawInput);
+        const settings = getClaudeSettings();
+        const alreadyAllowed = permissionEntry ? settings.allowedTools.includes(permissionEntry) : false;
+        const rememberLabel = alreadyAllowed ? 'Allow (saved)' : 'Allow & remember';
+        const matchingRequestIds = permissionEntry
+          ? pendingPermissionRequests
+              .filter(
+                (item) =>
+                  buildClaudeToolPermissionEntry(item.toolName, formatToolInputForDisplay(item.input)) === permissionEntry,
+              )
+              .map((item) => item.requestId)
+          : [request.requestId];
+
+        return (
+          <div
+            key={request.requestId}
+            className="rounded-lg border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/20 p-3 shadow-sm"
+          >
+            <div className="flex flex-wrap items-start justify-between gap-3">
+              <div>
+                <div className="text-sm font-semibold text-amber-900 dark:text-amber-100">Permission required</div>
+                <div className="text-xs text-amber-800 dark:text-amber-200">
+                  Tool: <span className="font-mono">{request.toolName}</span>
+                </div>
+              </div>
+              {permissionEntry && (
+                <div className="text-xs text-amber-700 dark:text-amber-300">
+                  Allow rule: <span className="font-mono">{permissionEntry}</span>
+                </div>
+              )}
+            </div>
+
+            {rawInput && (
+              <details className="mt-2">
+                <summary className="cursor-pointer text-xs text-amber-800 dark:text-amber-200 hover:text-amber-900 dark:hover:text-amber-100">
+                  View tool input
+                </summary>
+                <pre className="mt-2 max-h-40 overflow-auto rounded-md bg-white/80 dark:bg-gray-900/60 border border-amber-200/60 dark:border-amber-800/60 p-2 text-xs text-amber-900 dark:text-amber-100 whitespace-pre-wrap">
+                  {rawInput}
+                </pre>
+              </details>
+            )}
+
+            <div className="mt-3 flex flex-wrap gap-2">
+              <button
+                type="button"
+                onClick={() => handlePermissionDecision(request.requestId, { allow: true })}
+                className="inline-flex items-center gap-2 rounded-md bg-amber-600 text-white text-xs font-medium px-3 py-1.5 hover:bg-amber-700 transition-colors"
+              >
+                Allow once
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  if (permissionEntry && !alreadyAllowed) {
+                    handleGrantToolPermission({ entry: permissionEntry, toolName: request.toolName });
+                  }
+                  handlePermissionDecision(matchingRequestIds, { allow: true, rememberEntry: permissionEntry });
+                }}
+                className={`inline-flex items-center gap-2 rounded-md text-xs font-medium px-3 py-1.5 border transition-colors ${
+                  permissionEntry
+                    ? 'border-amber-300 text-amber-800 hover:bg-amber-100 dark:border-amber-700 dark:text-amber-100 dark:hover:bg-amber-900/30'
+                    : 'border-gray-300 text-gray-400 cursor-not-allowed'
+                }`}
+                disabled={!permissionEntry}
+              >
+                {rememberLabel}
+              </button>
+              <button
+                type="button"
+                onClick={() => handlePermissionDecision(request.requestId, { allow: false, message: 'User denied tool use' })}
+                className="inline-flex items-center gap-2 rounded-md text-xs font-medium px-3 py-1.5 border border-red-300 text-red-700 hover:bg-red-50 dark:border-red-800 dark:text-red-200 dark:hover:bg-red-900/30 transition-colors"
+              >
+                Deny
+              </button>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,224 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import SessionProviderLogo from '../../../SessionProviderLogo';
+import NextTaskBanner from '../../../NextTaskBanner.jsx';
+import { CLAUDE_MODELS, CURSOR_MODELS, CODEX_MODELS } from '../../../../../shared/modelConstants';
+import type { Provider } from '../../types/types';
+import type { ProjectSession } from '../../../../types/app';
+
+interface ProviderSelectionEmptyStateProps {
+  selectedSession: ProjectSession | null;
+  currentSessionId: string | null;
+  provider: Provider | string;
+  setProvider: (next: Provider | string) => void;
+  textareaRef: React.RefObject<HTMLTextAreaElement>;
+  claudeModel: string;
+  setClaudeModel: (model: string) => void;
+  cursorModel: string;
+  setCursorModel: (model: string) => void;
+  codexModel: string;
+  setCodexModel: (model: string) => void;
+  tasksEnabled: boolean;
+  isTaskMasterInstalled: boolean | null;
+  onShowAllTasks?: (() => void) | null;
+  setInput: React.Dispatch<React.SetStateAction<string>>;
+}
+
+export default function ProviderSelectionEmptyState({
+  selectedSession,
+  currentSessionId,
+  provider,
+  setProvider,
+  textareaRef,
+  claudeModel,
+  setClaudeModel,
+  cursorModel,
+  setCursorModel,
+  codexModel,
+  setCodexModel,
+  tasksEnabled,
+  isTaskMasterInstalled,
+  onShowAllTasks,
+  setInput,
+}: ProviderSelectionEmptyStateProps) {
+  const { t } = useTranslation('chat');
+
+  const selectProvider = (nextProvider: Provider) => {
+    setProvider(nextProvider);
+    localStorage.setItem('selected-provider', nextProvider);
+    setTimeout(() => textareaRef.current?.focus(), 100);
+  };
+
+  return (
+    <div className="flex items-center justify-center h-full">
+      {!selectedSession && !currentSessionId && (
+        <div className="text-center px-6 sm:px-4 py-8">
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-3">{t('providerSelection.title')}</h2>
+          <p className="text-gray-600 dark:text-gray-400 mb-8">{t('providerSelection.description')}</p>
+
+          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-8">
+            <button
+              onClick={() => selectProvider('claude')}
+              className={`group relative w-64 h-32 bg-white dark:bg-gray-800 rounded-xl border-2 transition-all duration-200 hover:scale-105 hover:shadow-xl ${
+                provider === 'claude'
+                  ? 'border-blue-500 shadow-lg ring-2 ring-blue-500/20'
+                  : 'border-gray-200 dark:border-gray-700 hover:border-blue-400'
+              }`}
+            >
+              <div className="flex flex-col items-center justify-center h-full gap-3">
+                <SessionProviderLogo provider="claude" className="w-10 h-10" />
+                <div>
+                  <p className="font-semibold text-gray-900 dark:text-white">Claude Code</p>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('providerSelection.providerInfo.anthropic')}</p>
+                </div>
+              </div>
+              {provider === 'claude' && (
+                <div className="absolute top-2 right-2">
+                  <div className="w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center">
+                    <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+                    </svg>
+                  </div>
+                </div>
+              )}
+            </button>
+
+            <button
+              onClick={() => selectProvider('cursor')}
+              className={`group relative w-64 h-32 bg-white dark:bg-gray-800 rounded-xl border-2 transition-all duration-200 hover:scale-105 hover:shadow-xl ${
+                provider === 'cursor'
+                  ? 'border-purple-500 shadow-lg ring-2 ring-purple-500/20'
+                  : 'border-gray-200 dark:border-gray-700 hover:border-purple-400'
+              }`}
+            >
+              <div className="flex flex-col items-center justify-center h-full gap-3">
+                <SessionProviderLogo provider="cursor" className="w-10 h-10" />
+                <div>
+                  <p className="font-semibold text-gray-900 dark:text-white">Cursor</p>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('providerSelection.providerInfo.cursorEditor')}</p>
+                </div>
+              </div>
+              {provider === 'cursor' && (
+                <div className="absolute top-2 right-2">
+                  <div className="w-5 h-5 bg-purple-500 rounded-full flex items-center justify-center">
+                    <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+                    </svg>
+                  </div>
+                </div>
+              )}
+            </button>
+
+            <button
+              onClick={() => selectProvider('codex')}
+              className={`group relative w-64 h-32 bg-white dark:bg-gray-800 rounded-xl border-2 transition-all duration-200 hover:scale-105 hover:shadow-xl ${
+                provider === 'codex'
+                  ? 'border-gray-800 dark:border-gray-300 shadow-lg ring-2 ring-gray-800/20 dark:ring-gray-300/20'
+                  : 'border-gray-200 dark:border-gray-700 hover:border-gray-500 dark:hover:border-gray-400'
+              }`}
+            >
+              <div className="flex flex-col items-center justify-center h-full gap-3">
+                <SessionProviderLogo provider="codex" className="w-10 h-10" />
+                <div>
+                  <p className="font-semibold text-gray-900 dark:text-white">Codex</p>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('providerSelection.providerInfo.openai')}</p>
+                </div>
+              </div>
+              {provider === 'codex' && (
+                <div className="absolute top-2 right-2">
+                  <div className="w-5 h-5 bg-gray-800 dark:bg-gray-300 rounded-full flex items-center justify-center">
+                    <svg className="w-3 h-3 text-white dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+                    </svg>
+                  </div>
+                </div>
+              )}
+            </button>
+          </div>
+
+          <div className={`mb-6 transition-opacity duration-200 ${provider ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{t('providerSelection.selectModel')}</label>
+            {provider === 'claude' ? (
+              <select
+                value={claudeModel}
+                onChange={(e) => {
+                  const newModel = e.target.value;
+                  setClaudeModel(newModel);
+                  localStorage.setItem('claude-model', newModel);
+                }}
+                className="pl-4 pr-10 py-2 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 min-w-[140px]"
+              >
+                {CLAUDE_MODELS.OPTIONS.map(({ value, label }) => (
+                  <option key={value} value={value}>
+                    {label}
+                  </option>
+                ))}
+              </select>
+            ) : provider === 'codex' ? (
+              <select
+                value={codexModel}
+                onChange={(e) => {
+                  const newModel = e.target.value;
+                  setCodexModel(newModel);
+                  localStorage.setItem('codex-model', newModel);
+                }}
+                className="pl-4 pr-10 py-2 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-gray-500 min-w-[140px]"
+              >
+                {CODEX_MODELS.OPTIONS.map(({ value, label }) => (
+                  <option key={value} value={value}>
+                    {label}
+                  </option>
+                ))}
+              </select>
+            ) : (
+              <select
+                value={cursorModel}
+                onChange={(e) => {
+                  const newModel = e.target.value;
+                  setCursorModel(newModel);
+                  localStorage.setItem('cursor-model', newModel);
+                }}
+                className="pl-4 pr-10 py-2 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 min-w-[140px]"
+                disabled={provider !== 'cursor'}
+              >
+                {CURSOR_MODELS.OPTIONS.map(({ value, label }) => (
+                  <option key={value} value={value}>
+                    {label}
+                  </option>
+                ))}
+              </select>
+            )}
+          </div>
+
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            {provider === 'claude'
+              ? t('providerSelection.readyPrompt.claude', { model: claudeModel })
+              : provider === 'cursor'
+                ? t('providerSelection.readyPrompt.cursor', { model: cursorModel })
+                : provider === 'codex'
+                  ? t('providerSelection.readyPrompt.codex', { model: codexModel })
+                  : t('providerSelection.readyPrompt.default')}
+          </p>
+
+          {provider && tasksEnabled && isTaskMasterInstalled && (
+            <div className="mt-4 px-4 sm:px-0">
+              <NextTaskBanner onStartTask={() => setInput('Start the next task')} onShowAllTasks={onShowAllTasks} />
+            </div>
+          )}
+        </div>
+      )}
+      {selectedSession && (
+        <div className="text-center text-gray-500 dark:text-gray-400 px-6 sm:px-4">
+          <p className="font-bold text-lg sm:text-xl mb-3">{t('session.continue.title')}</p>
+          <p className="text-sm sm:text-base leading-relaxed">{t('session.continue.description')}</p>
+
+          {tasksEnabled && isTaskMasterInstalled && (
+            <div className="mt-4 px-4 sm:px-0">
+              <NextTaskBanner onStartTask={() => setInput('Start the next task')} onShowAllTasks={onShowAllTasks} />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}