@pheem49/mint 1.16.0 → 1.18.0

package/src/renderer/shared/components/{ChatPanel.tsx → chat/ChatPanel.tsx}

@@ -1,11 +1,12 @@
-import McpToolResults from './McpToolResults'
-import ViewedImages from './ViewedImages'
+import { SpeechPlayer } from '../../speech/player'
+import McpToolResults from '../activity/McpToolResults'
+import ViewedImages from '../activity/ViewedImages'
 import { CollapsiblePasteInput } from './CollapsiblePasteInput'
 import { ContextCompactionStatus } from './ContextCompactionStatus'
-import { activeCompactionFrom } from '../utils/contextCompaction'
-import { useEffect, useMemo, useRef, useState, useCallback, Fragment, type ChangeEvent, type ClipboardEvent, type DragEvent, type FormEvent, type KeyboardEvent, type RefObject } from 'react'
-import { EMPTY_AGENT_PROGRESS, hasAgentToolActivity, thoughtsFrom, extendedThoughtsFrom, mergeFileChanges, parseFileChangesFromProgress } from '../agentProgress'
-import { visibleInteractionsDuringRun } from '../conversation/syncView'
+import { activeCompactionFrom } from '../../utils/contextCompaction'
+import { useEffect, useMemo, useRef, useState, useCallback, Fragment, lazy, Suspense, useSyncExternalStore, type ChangeEvent, type ClipboardEvent, type DragEvent, type FormEvent, type KeyboardEvent, type RefObject } from 'react'
+import { EMPTY_AGENT_PROGRESS, hasAgentToolActivity, thoughtsFrom, extendedThoughtsFrom, mergeFileChanges, parseFileChangesFromProgress } from '../../agentProgress'
+import { visibleInteractionsDuringRun } from '../../conversation/syncView'
 import {
   GEMINI_MODELS,
   OPENAI_MODELS,
@@ -16,44 +17,70 @@ import {
   LOCAL_MODELS,
   OLLAMA_MODELS,
   GEMINI_LIVE_VOICES,
-} from '../constants/models'
-import { badge, providerLabel, fallbackNotice } from '../utils/providers'
-import { parseWebSearchSources } from '../utils/agentActivity'
-import { useLatestCallback } from '../utils/useLatestCallback'
+} from '../../constants/models'
+import { badge, providerLabel, fallbackNotice } from '../../utils/providers'
+import { parseWebSearchSources } from '../../utils/agentActivity'
+import { useLatestCallback } from '../../utils/useLatestCallback'
 import SlashChoicePanel from './SlashChoicePanel'
 import SlashSuggestions, { type SlashSuggestionsHandle } from './SlashSuggestions'
 import { ChatCodeBlock } from './ChatCodeBlock'
-import { renderApprovalDetails, renderDiff, type ApprovalDetails } from '../utils/approval'
+import { renderApprovalDetails, renderDiff, type ApprovalDetails } from '../../utils/approval'
 import { ApprovalCard } from './ApprovalCard'
-import { readableAssistantText, cleanSpeechText, renderSpeakerIcon, renderCopyIcon } from '../utils/markdown'
+import { FormattedMessage, readableAssistantText, renderSpeakerIcon, renderCopyIcon } from '../../utils/markdown'
 import { ThinkingBlock } from './ThinkingBlock'
 import ChatMessageItem from './ChatMessageItem'
-import { FormattedMessage } from './FormattedMessage'
-import { ProgressActivity } from './ProgressActivity'
+import ProviderBrandIcon from '../ui/ProviderBrandIcon'
+import { AgentActivityDrawer } from '../activity/AgentActivityDrawer'
+import { TurnFileChanges, type RewindRequestPayload } from './TurnFileChanges'
+import { SubagentStatusStrip } from '../activity/SubagentStatusStrip'
 import { VirtualChatHistory, type VirtualChatHistoryHandle } from './VirtualChatHistory'
-import { ArtifactPreviewPanel, type ArtifactFile } from './ArtifactPreviewPanel'
-import { RewindModal } from './RewindModal'
-import type { AgentProgress, ChatResponse, DiffHunk, FileChange, GitCheckpoint, RuntimeStatus } from '../types'
-import { numericSetting, shouldShowSessionDivider, formatSessionDividerLabel } from '../utils/ui'
+import type { ArtifactFile } from '../../utils/artifacts'
+import type { AgentProgress, ChatResponse, DiffHunk, FileChange, GitCheckpoint, QueuedPrompt, RuntimeStatus } from '../../types'
+import { shouldShowSessionDivider, formatSessionDividerLabel, createTrimmedImagePreview } from '../../utils/ui'
 import { useVoiceInput } from '@/voiceInput'
 import VoicePill from './VoicePill'
-import { useGeminiLiveVoice } from '../utils/useGeminiLiveVoice'
+import { useGeminiLiveVoice } from '../../utils/useGeminiLiveVoice'
 import GeminiLiveOverlay from './GeminiLiveOverlay'
-import { isSupportedDocument, SUPPORTED_DOCUMENT_ACCEPT } from '../utils/documentTypes'
+import { isSupportedDocument, SUPPORTED_DOCUMENT_ACCEPT } from '../../utils/documentTypes'
 import ModelSelectorPopover from './ModelSelectorPopover'
-import GitBranchSelector from './GitBranchSelector'
-import WorkspaceSelector from './WorkspaceSelector'
-import ToolsPanelToggle from './ToolsPanelToggle'
-import SessionSourcesPopover from './SessionSourcesPopover'
-import { ModsPanel } from './ModsPanel'
-import CodeReviewPage from './CodeReviewPage'
-import type { ToolSurface } from './ToolSurfacePage'
-import '../css/thinking-status.css'
-import '../css/slash-choice.css'
+import ChatModeSelector from './ChatModeSelector'
+import GitBranchSelector from '../workspace/GitBranchSelector'
+import WorkspaceSelector from '../workspace/WorkspaceSelector'
+import ToolsPanelToggle from '../workspace/ToolsPanelToggle'
+import { ModsPanel } from '../extensions/ModsPanel'
+import type { ToolSurface } from '../workspace/ToolSurfacePage'
+import { WORKSPACE_PATH_MIME, WORKSPACE_FILE_MIME, WORKSPACE_IMAGE_MIME, isImageFileName, resolveImageToDataUri, formatWorkspaceReference } from '../../utils/workspaceDrag'
+import QueuedMessagesBanner from './QueuedMessagesBanner'
+import '../../css/thinking-status.css'
+import '../../css/slash-choice.css'
+
+import { catalogPlatform, conversationPlatform, runtimePlatform } from '../../platform'
+
+const ArtifactPreviewPanel = lazy(() => import('../workspace/ArtifactPreviewPanel').then(m => ({ default: m.ArtifactPreviewPanel })))
+const RewindModal = lazy(() => import('./RewindModal').then(m => ({ default: m.RewindModal })))
+const CodeReviewPage = lazy(() => import('../workspace/CodeReviewPage'))
+
+export function shouldProbeOllamaModels(status?: RuntimeStatus | null, settingsConfig?: any): boolean {
+  return status?.activeProvider === 'ollama' || Boolean(settingsConfig?.ollamaHost || settingsConfig?.ollamaModel)
+}
 
-import { catalogPlatform, conversationPlatform, runtimePlatform } from '../platform'
+export function ThinkingElapsedMeta() {
+  const [elapsedSeconds, setElapsedSeconds] = useState(0)
+  useEffect(() => {
+    const startTime = Date.now()
+    const timer = setInterval(() => {
+      setElapsedSeconds(Math.round((Date.now() - startTime) / 1000))
+    }, 1000)
+    return () => clearInterval(timer)
+  }, [])
+  return (
+    <span className="thinking-status-meta">
+      {` · ${elapsedSeconds}s · Esc to cancel`}
+    </span>
+  )
+}
 
-const STREAM_MARKDOWN_UPDATE_MS = 120
+const STREAM_MARKDOWN_UPDATE_MS = 32
 
 function useThrottledValue<T>(value: T, intervalMs: number): T {
   const [throttledValue, setThrottledValue] = useState(value)
@@ -83,7 +110,7 @@ function useThrottledValue<T>(value: T, intervalMs: number): T {
 }
 
 const {
-  getTtsUrls, startGeminiLiveSession, sendGeminiLiveAudioChunk, stopGeminiLiveSession,
+  speechRequest, startGeminiLiveSession, sendGeminiLiveAudioChunk, stopGeminiLiveSession,
   listGitCheckpoints, rollbackGitCheckpoint, undoGitCheckpoint,
 } = conversationPlatform
 const { fetchProviderModels } = catalogPlatform
@@ -118,11 +145,14 @@ interface ChatPanelContract {
   chatId: string
   chatEnd: RefObject<HTMLDivElement | null>
   welcomeInteraction: any
+  queuedPrompts?: QueuedPrompt[]
+  queuePaused?: boolean
   onSubmit: (event: FormEvent<HTMLFormElement>) => void
   onSelectImage: (event: ChangeEvent<HTMLInputElement>) => void
   onSelectVideo: (event: ChangeEvent<HTMLInputElement>) => void
   onSelectDocument: (event: ChangeEvent<HTMLInputElement>) => void
   onPasteImage: (clipboardData: DataTransfer) => boolean
+  onAttachImage?: (image: { dataUri: string; previewDataUri?: string; objectUrl?: string; name: string }) => void
   onSetMessage: (message: string) => void
   onSendVoiceMessage: (message: string, audioDataUri?: string | null) => Promise<void>
   onRemoveImage: (idx: number) => void
@@ -157,6 +187,16 @@ interface ChatPanelContract {
   onOpenReview?: (review: Extract<ToolSurface, { kind: 'review' }>) => void
   onSelectSlashChoice?: (value: string) => void
   onDismissSlashChoice?: () => void
+  subscribeMessage?: (notify: () => void) => () => void
+  getMessage?: () => string
+  onRemoveQueuedPrompt?: (id: string) => void
+  onEditQueuedPrompt?: (id: string) => void
+  onClearQueuedPrompts?: () => void
+  onSteerQueuedPrompt?: (id: string) => void
+  onResumeQueue?: () => void
+  onResendFrom?: (fromId: number, newPrompt: string) => Promise<void> | void
+  onSyncHistory?: () => void
+  onReceiveApproval?: (approval: { token: string; approval: Record<string, unknown> }) => void
 }
 
 export type ConversationViewModel = Pick<ChatPanelContract,
@@ -168,13 +208,32 @@ export type ConversationViewModel = Pick<ChatPanelContract,
   | 'conversationTitle' | 'slashChoice'
   | 'hasOlder'
   | 'sendingInteractionId'
+  | 'queuedPrompts'
+  | 'queuePaused'
 >
-export type ConversationActions = Omit<ChatPanelContract, keyof ConversationViewModel>
+export type ConversationActions = Omit<ChatPanelContract, keyof ConversationViewModel> & {
+  subscribeMessage?: (notify: () => void) => () => void
+  getMessage?: () => string
+}
+
+const NOOP_SUBSCRIBE = () => () => {}
+
+export function useComposerDraft(
+  fallbackMessage: string,
+  subscribe?: (notify: () => void) => () => void,
+  getMessage?: () => string,
+): string {
+  const getSnapshot = () => (getMessage ? getMessage() : fallbackMessage)
+  return useSyncExternalStore(
+    subscribe ?? NOOP_SUBSCRIBE,
+    getSnapshot,
+    getSnapshot,
+  )
+}
 
 interface ChatPanelProps {
   conversation: ConversationViewModel
   actions: ConversationActions
-  showSessionSources?: boolean
   tools?: { modsPanelTarget: HTMLElement | null; onOpenMods: () => void; onToggle?: () => void; open: boolean; backgroundTaskCount: number }
 }
 
@@ -182,7 +241,6 @@ export default function ChatPanel({
   conversation,
   actions,
   tools,
-  showSessionSources = false,
 }: ChatPanelProps) {
   const {
   interactions,
@@ -199,7 +257,7 @@ export default function ChatPanel({
   agentActivitySnapshots,
   thinkingExpanded,
   onThinkingExpandedChange: handleThinkingExpandedChange,
-  message,
+  message: initialMessage,
   imageAttachments,
   videoAttachments,
   documentName,
@@ -217,6 +275,7 @@ export default function ChatPanel({
   onSelectVideo,
   onSelectDocument,
   onPasteImage,
+  onAttachImage,
   onSetMessage,
   onSendVoiceMessage,
   onRemoveImage,
@@ -247,7 +306,18 @@ export default function ChatPanel({
   onOpenReview,
   onSelectSlashChoice,
   onDismissSlashChoice,
+  queuedPrompts = [],
+  queuePaused = false,
+  onRemoveQueuedPrompt,
+  onEditQueuedPrompt,
+  onClearQueuedPrompts,
+  onSteerQueuedPrompt,
+  onResumeQueue,
+  onResendFrom,
+  onSyncHistory,
+  onReceiveApproval,
   } = { ...conversation, ...actions }
+  const message = useComposerDraft(initialMessage, actions.subscribeMessage, actions.getMessage)
   const onThinkingExpandedChange = useLatestCallback(handleThinkingExpandedChange)
   // The initiating surface already renders a live prompt/reply pair below.
   // Hide its matching persisted turn until the local stream settles, while
@@ -306,14 +376,9 @@ export default function ChatPanel({
     activeModelName = (lastThinkingProgress.data as any).model_name || null
   }
   const [openActivityIds, setOpenActivityIds] = useState<Record<string, boolean>>({})
-  const [openReviewIds, setOpenReviewIds] = useState<Record<string, boolean>>({})
-  const [openFileDiffs, setOpenFileDiffs] = useState<Record<string, boolean>>({})
-  const [showAllFileChanges, setShowAllFileChanges] = useState<Record<string, boolean>>({})
   const [reviewPage, setReviewPage] = useState<{ title: string; changes: FileChange[] } | null>(null)
   const [activeArtifact, setActiveArtifact] = useState<ArtifactFile | null>(null)
   const [toolMenuOpen, setToolMenuOpen] = useState(false)
-  const [sessionSourcesOpen, setSessionSourcesOpen] = useState(false)
-  const [elapsedSeconds, setElapsedSeconds] = useState(0)
   const [dynamicOllamaModels, setDynamicOllamaModels] = useState<string[]>(OLLAMA_MODELS)
   const toggleActivity = useCallback((id: string) => {
     setOpenActivityIds(current => ({ ...current, [id]: !(current[id] ?? (id === 'live')) }))
@@ -325,11 +390,20 @@ export default function ChatPanel({
   })
 
   const openReview = useLatestCallback((title: string, changes: FileChange[]) => {
-    if (onOpenReview) onOpenReview({ id: `review:${Date.now()}`, kind: 'review', title: 'Review', reviewTitle: title, changes })
-    else setReviewPage({ title, changes })
+    if (onOpenReview) {
+      setReviewPage(null)
+      onOpenReview({ id: `review:${Date.now()}`, kind: 'review', title: 'Review', reviewTitle: title, changes })
+    } else {
+      setReviewPage({ title, changes })
+    }
+  })
+
+  const openAllConversationReview = useLatestCallback(() => {
+    openReview('All conversation changes', getConversationChanges())
   })
 
   useEffect(() => {
+    if (!shouldProbeOllamaModels(status, settingsConfig)) return
     let cancelled = false
     const fetchOllamaModels = async () => {
       const host = settingsConfig?.ollamaHost || 'http://localhost:11434'
@@ -372,24 +446,8 @@ export default function ChatPanel({
     return () => {
       cancelled = true
     }
-  }, [settingsConfig?.ollamaHost, settingsConfig?.ollamaModel])
-
-  useEffect(() => {
-    if (!sending) {
-      setElapsedSeconds(0)
-      return
-    }
-
-    const startTime = Date.now()
-    setElapsedSeconds(0)
-
-    const timer = setInterval(() => {
-      const elapsed = Math.round((Date.now() - startTime) / 1000)
-      setElapsedSeconds(elapsed)
-    }, 1000)
-
-    return () => clearInterval(timer)
-  }, [sending])
+  }, [status?.activeProvider, settingsConfig?.ollamaHost, settingsConfig?.ollamaModel])
+  const [speechError, setSpeechError] = useState('')
   const [speakingText, setSpeakingText] = useState<string | null>(null)
   const [copiedId, setCopiedId] = useState<string | number | null>(null)
 
@@ -637,8 +695,6 @@ export default function ChatPanel({
 
 
   const toolMenuRef = useRef<HTMLDivElement | null>(null)
-  const audioRef = useRef<HTMLAudioElement | null>(null)
-  const speechRunRef = useRef(0)
   const historyReadyRef = useRef(false)
   const submittedDuringSessionRef = useRef(false)
   const lastAutoSpokenIdRef = useRef<number | string | null>(null)
@@ -649,6 +705,36 @@ export default function ChatPanel({
   const dragCounter = useRef(0)
   const lastDropTimeRef = useRef(0)
 
+  const resizeInput = useCallback((element: HTMLTextAreaElement) => {
+    element.style.height = 'auto'
+    element.style.height = `${Math.min(element.scrollHeight, 120)}px`
+  }, [])
+
+  // Direct file reference insertion into chat input
+  const handleReferenceFile = useCallback((rawPath: string) => {
+    const formatted = formatWorkspaceReference(rawPath, workspacePath).trim()
+    if (!formatted) return
+    const token = `${formatted} `
+    const textarea = textareaRef.current
+    if (!textarea) {
+      onSetMessage(message.trim() ? `${message.trimEnd()} ${token}` : token)
+      return
+    }
+    const start = textarea.selectionStart ?? message.length
+    const end = textarea.selectionEnd ?? message.length
+    const before = message.slice(0, start)
+    const after = message.slice(end)
+    const spacingBefore = before && !before.endsWith(' ') && !before.endsWith('\n') ? ' ' : ''
+    const updated = `${before}${spacingBefore}${token}${after}`
+    onSetMessage(updated)
+    const nextCursor = (before + spacingBefore + token).length
+    requestAnimationFrame(() => {
+      textarea.focus()
+      textarea.setSelectionRange(nextCursor, nextCursor)
+      resizeInput(textarea)
+    })
+  }, [message, onSetMessage, workspacePath, resizeInput])
+
   const handleDragEnter = (e: DragEvent<HTMLElement>) => {
     e.preventDefault()
     if (e.dataTransfer?.types?.includes('Files')) {
@@ -669,6 +755,14 @@ export default function ChatPanel({
 
   const handleDragOver = (e: DragEvent<HTMLElement>) => {
     e.preventDefault()
+    if (
+      e.dataTransfer?.types?.includes(WORKSPACE_PATH_MIME) ||
+      e.dataTransfer?.types?.includes(WORKSPACE_FILE_MIME) ||
+      e.dataTransfer?.types?.includes(WORKSPACE_IMAGE_MIME) ||
+      e.dataTransfer?.types?.includes('application/x-mint-workspace-path')
+    ) {
+      e.dataTransfer.dropEffect = 'copy'
+    }
   }
 
   const handleDrop = (e: DragEvent<HTMLElement>) => {
@@ -677,6 +771,27 @@ export default function ChatPanel({
     dragCounter.current = 0
     setIsDragging(false)
 
+    const wsPath =
+      e.dataTransfer?.getData(WORKSPACE_IMAGE_MIME) ||
+      e.dataTransfer?.getData(WORKSPACE_PATH_MIME) ||
+      e.dataTransfer?.getData('application/x-mint-workspace-path')
+    const plainRef = e.dataTransfer?.getData('text/plain')?.trim() || ''
+    const fileRef =
+      e.dataTransfer?.getData(WORKSPACE_PATH_MIME) ||
+      e.dataTransfer?.getData('application/x-mint-workspace-path') ||
+      (plainRef.startsWith('@') ? plainRef : '')
+    if (wsPath || fileRef) {
+      void tryAttachDroppedImage(e.dataTransfer).then((attached) => {
+        if (!attached) {
+          const raw = fileRef || wsPath
+          if (raw) {
+            handleReferenceFile(raw)
+          }
+        }
+      })
+      return
+    }
+
     const now = Date.now()
     if (now - lastDropTimeRef.current < 250) {
       return
@@ -718,9 +833,8 @@ export default function ChatPanel({
   }
 
 
-  // The mic button always drives native push-to-talk transcription; Gemini Live is a
-  // separate "Live" button + overlay (see below), not a swap-in replacement for the
-  // same button.
+  // The mic button dictates into the composer (native capture on Desktop,
+  // browser speech recognition on Web). Gemini Live has its own button and overlay.
   const {
     isRecording,
     voiceMode,
@@ -736,6 +850,7 @@ export default function ChatPanel({
     scheduleVoiceListen,
     clearRestartTimer
   } = useVoiceInput({
+    chatId,
     onSendVoiceMessage,
     language: settingsConfig?.language,
     message,
@@ -750,9 +865,31 @@ export default function ChatPanel({
     chatId,
     startSession: startGeminiLiveSession,
     sendAudioChunk: sendGeminiLiveAudioChunk,
-    stopSession: stopGeminiLiveSession
+    stopSession: stopGeminiLiveSession,
+    onTurnSaved: () => {
+      onSyncHistory?.()
+    },
+    onToolActivity: () => {
+      onWorkspaceChanged?.()
+    },
+    onApprovalRequested: (approval) => {
+      onReceiveApproval?.(approval)
+    },
   })
 
+  useEffect(() => {
+    const onTriggerVoice = () => {
+      if (geminiLiveEnabled) {
+        geminiLive.setVoiceMode(true)
+      } else {
+        setVoiceMode(true)
+        void startRecognition()
+      }
+    }
+    window.addEventListener('mint:trigger-voice', onTriggerVoice)
+    return () => window.removeEventListener('mint:trigger-voice', onTriggerVoice)
+  }, [geminiLiveEnabled, geminiLive, setVoiceMode, startRecognition])
+
   const canSubmit = Boolean(message.trim() || imageAttachments.length > 0 || videoAttachments.length > 0 || documentName)
   const sendingImageMarkers = Array.from({ length: sendingImageCount }, (_, index) => `[Image #${index + 1}]`).join(' ')
   const sendingVideoMarkers = Array.from({ length: sendingVideoCount || 0 }, (_, index) => `[Video #${index + 1}]`).join(' ')
@@ -944,94 +1081,29 @@ export default function ChatPanel({
     submitOnEnter(event)
   }
 
-  const cancelSpeech = () => {
-    speechRunRef.current += 1
-    audioRef.current?.pause()
-    audioRef.current = null
-    speakingRef.current = null
-    if (typeof window !== 'undefined' && window.speechSynthesis) {
-      window.speechSynthesis.cancel()
-    }
-    setSpeakingText(null)
-  }
-  const speakNative = (text: string, displayText: string) => {
-    if (typeof window === 'undefined' || !window.speechSynthesis) {
-      setSpeakingText(null)
-      return
-    }
-    const hasThai = /[\u0e00-\u0e7f]/.test(text)
-    const utterance = new SpeechSynthesisUtterance(text)
-    utterance.lang = hasThai ? 'th-TH' : 'en-US'
-    utterance.volume = Math.max(0, Math.min(1, numericSetting(settingsConfig?.ttsVolume, 1)))
-    utterance.rate = Math.max(0.1, Math.min(10, numericSetting(settingsConfig?.ttsSpeed, 1)))
-    utterance.pitch = Math.max(0, Math.min(2, numericSetting(settingsConfig?.ttsPitch, 1)))
-    const voice = window.speechSynthesis.getVoices().find((item) => {
-      const lang = item.lang.toLowerCase()
-      const target = hasThai ? 'th' : 'en'
-      return lang.startsWith(target) || lang.includes(target)
-    })
-    if (voice) utterance.voice = voice
-    const finishSpeech = () => {
-      setSpeakingText((current) => (current === displayText ? null : current))
-      speakingRef.current = null
-      scheduleVoiceListen(900)
-    }
-    utterance.onend = finishSpeech
-    utterance.onerror = finishSpeech
-    speakingRef.current = displayText
-    setSpeakingText(displayText)
-    window.speechSynthesis.speak(utterance)
-  }
-  const playGoogleTts = async (text: string, displayText: string, runId: number) => {
-    const chunks = await getTtsUrls(text)
-    for (const chunk of chunks) {
-      if (speechRunRef.current !== runId) return
-      await new Promise<void>((resolve, reject) => {
-        const audio = new Audio(chunk.url)
-        audio.volume = Math.max(0, Math.min(1, numericSetting(settingsConfig?.ttsVolume, 1)))
-        audio.playbackRate = Math.max(0.25, Math.min(4, numericSetting(settingsConfig?.ttsSpeed, 1)))
-        audioRef.current = audio
-        audio.onended = () => resolve()
-        audio.onpause = () => resolve()
-        audio.onerror = () => reject(new Error('Google TTS playback failed'))
-        audio.play().catch(reject)
-      })
-    }
-    if (speechRunRef.current === runId) {
-      setSpeakingText((current) => (current === displayText ? null : current))
-      speakingRef.current = null
-      scheduleVoiceListen(900)
-    }
-  }
-  const speak = useLatestCallback((text: string) => {
-    const speechText = cleanSpeechText(text)
-    if (!speechText) return
-    if (speakingText === text) {
-      cancelSpeech()
-      return
-    }
-
-    cancelSpeech()
-    const runId = speechRunRef.current
-    speakingRef.current = text
-    setSpeakingText(text)
-    if (settingsConfig?.ttsProvider === 'google') {
-      playGoogleTts(speechText, text, runId).catch((error) => {
-        console.warn('Google TTS failed, falling back to native speech synthesis:', error)
-        if (speechRunRef.current === runId) speakNative(speechText, text)
-      })
-      return
-    }
-    speakNative(speechText, text)
+  const speechPlayerRef = useRef<SpeechPlayer | null>(null)
+  const speechTextRef = useRef<string | null>(null)
+  if (!speechPlayerRef.current) speechPlayerRef.current = new SpeechPlayer(speechRequest, state => {
+    setSpeakingText(state === 'idle' ? null : speechTextRef.current)
+    speakingRef.current = state === 'idle' ? null : speechTextRef.current
+    if (state === 'idle') scheduleVoiceListen(900)
+  }, message => setSpeechError(message))
+  const cancelSpeech = () => { void speechPlayerRef.current?.stop() }
+  const speak = useLatestCallback((text: string, turnId?: number, automatic = false) => {
+    if (!automatic && speakingText === text) { cancelSpeech(); return }
+    setSpeechError('')
+    speechTextRef.current = text
+    const saved = turnId ?? Number([...interactions].reverse().find(interaction => interaction.aiText === text)?.id)
+    void speechPlayerRef.current?.play({ chatId, text, turnId: Number.isFinite(saved) && saved > 0 ? saved : undefined, automatic })
   })
+  useEffect(() => { cancelSpeech() }, [chatId, sending])
+  useEffect(() => {
+    historyReadyRef.current = false; submittedDuringSessionRef.current = false; lastAutoSpokenIdRef.current = null
+  }, [chatId])
 
-  const resizeInput = (element: HTMLTextAreaElement) => {
-    element.style.height = 'auto'
-    element.style.height = `${Math.min(element.scrollHeight, 120)}px`
-  }
   useEffect(() => {
     return () => {
-      cancelSpeech()
+      void speechPlayerRef.current?.dispose()
     }
   }, [])
   useEffect(() => {
@@ -1061,7 +1133,7 @@ export default function ChatPanel({
     }
 
     lastAutoSpokenIdRef.current = latest.id
-    speak(latest.aiText)
+    speak(latest.aiText, Number(latest.id), true)
   }, [interactions, sending, settingsConfig?.enableVoiceReply, geminiLive.voiceMode, voiceMode])
   useEffect(() => {
     if (!toolMenuOpen) return
@@ -1085,13 +1157,14 @@ export default function ChatPanel({
   }, [onPasteImage])
   useEffect(() => {
     const handleEscapeKeyDown = (event: globalThis.KeyboardEvent) => {
-      if (event.key === 'Escape' && sending && !sessionSourcesOpen) {
+      const insideTools = event.target instanceof Element && event.target.closest('.tool-surface-page')
+      if (event.key === 'Escape' && sending && !event.defaultPrevented && !insideTools) {
         onCancelMessage()
       }
     }
     window.addEventListener('keydown', handleEscapeKeyDown, true)
     return () => window.removeEventListener('keydown', handleEscapeKeyDown, true)
-  }, [sending, onCancelMessage, sessionSourcesOpen])
+  }, [sending, onCancelMessage])
   useEffect(() => {
     if (message) return
     const input = document.getElementById('chat-input') as HTMLTextAreaElement | null
@@ -1131,305 +1204,100 @@ export default function ChatPanel({
     if (!trimmed) return
     onSetMessage(message.trim() ? `${message.trimEnd()} ${trimmed} ` : `${trimmed} `)
   }
-  const handleWorkspaceDrop = (event: DragEvent<HTMLElement>) => {
-    const reference =
-      event.dataTransfer.getData('application/x-mint-workspace-path') ||
-      event.dataTransfer.getData('text/plain')
-    if (!reference.trim().startsWith('@')) return
-    event.preventDefault()
-    appendWorkspaceReference(reference)
-  }
-  const isEmptyChat = interactions.length === 0 && !sending && !pendingApproval
-  const renderChangesList = (changes: ReturnType<typeof parseFileChangesFromProgress>, idPrefix: string) => {
-    const showAll = Boolean(showAllFileChanges[idPrefix])
-    const visibleChanges = showAll ? changes : changes.slice(0, 3)
-    return (
-      <div className="file-changes-list" style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
-        {visibleChanges.map((change) => {
-          const fileKey = `${idPrefix}-${change.path}`
-          const isDiffOpen = Boolean(openFileDiffs[fileKey])
-          const fileName = change.path.split('/').pop() || change.path
-          const dirPath = change.path.includes('/') ? change.path.substring(0, change.path.lastIndexOf('/')) : ''
-
-          return (
-            <div key={change.path} className="file-changes-item">
-              <div
-                className="file-changes-item-header"
-                onClick={() => setOpenFileDiffs((current) => ({ ...current, [fileKey]: !current[fileKey] }))}
-              >
-                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ color: 'var(--text-muted)' }}>
-                    <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
-                    <polyline points="14 2 14 8 20 8" />
-                  </svg>
-                  <span className={`file-changes-filename ${change.created ? 'is-new' : ''}`}>
-                    {fileName}
-                    {dirPath && <span className="file-changes-dirpath">{dirPath}</span>}
-                    {change.created && (
-                      <span className="file-changes-badge-new">
-                        [NEW FILE]
-                      </span>
-                    )}
-                  </span>
-                </div>
-                <div style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '0.76rem' }}>
-                  {change.created ? (
-                    <span className="file-changes-count-add">
-                      +{change.additions} {change.additions === 1 ? 'line' : 'lines'}
-                    </span>
-                  ) : (
-                    <>
-                      {change.additions > 0 && <span className="file-changes-count-add">+{change.additions}</span>}
-                      {change.deletions > 0 && <span className="file-changes-count-del">-{change.deletions}</span>}
-                    </>
-                  )}
-                  <button
-                    type="button"
-                    className="file-changes-preview-btn"
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      const fallbackContent =
-                        change.created && change.hunks.length > 0
-                          ? change.hunks.map((h) => h.newText).filter(Boolean).join('\n')
-                          : undefined
-                    openArtifact({ path: change.path, content: fallbackContent })
-                    }}
-                    title="Open Live Preview Split View"
-                  >
-                    Preview
-                  </button>
-                  <span style={{ color: 'var(--text-muted)', transform: isDiffOpen ? 'rotate(90deg)' : 'none', display: 'inline-block', transition: 'transform 0.15s' }}>&gt;</span>
-                </div>
-              </div>
-
-              {isDiffOpen && (
-                <div className="file-changes-diff-box">
-                  {change.hunks.map((hunk, hIdx) => (
-                    <div key={hIdx} className="file-changes-diff-hunk" style={{ marginBottom: hIdx < change.hunks.length - 1 ? '10px' : 0 }}>
-                      {hunk.oldText && (
-                        <div className="file-changes-diff-del">
-                          {hunk.oldText.split('\n').map((line, lIdx) => (
-                            <div key={lIdx} style={{ display: 'flex' }}>
-                              <span className="file-changes-diff-sign-del">-</span>
-                              <span>{line}</span>
-                            </div>
-                          ))}
-                        </div>
-                      )}
-                      {hunk.newText && (
-                        <div className="file-changes-diff-add">
-                          {hunk.newText.split('\n').map((line, lIdx) => (
-                            <div key={lIdx} style={{ display: 'flex' }}>
-                              <span className="file-changes-diff-sign-add">+</span>
-                              <span>{line}</span>
-                            </div>
-                          ))}
-                        </div>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          )
-        })}
-        {changes.length > 3 && (
-          <button
-            type="button"
-            className="file-changes-show-more"
-            aria-expanded={showAll}
-            onClick={() => setShowAllFileChanges((current) => ({ ...current, [idPrefix]: !current[idPrefix] }))}
-          >
-            {showAll ? 'Show fewer files' : `Show ${changes.length - 3} more ${changes.length - 3 === 1 ? 'file' : 'files'}`}
-            <span aria-hidden="true" className={showAll ? 'is-expanded' : ''}>⌄</span>
-          </button>
-        )}
-      </div>
-    )
-  }
 
-  const renderFileChanges = useCallback((interaction: any) => {
-    const interactionId = String(interaction.id)
-    const progress = agentActivitySnapshots[interactionId] ?? interaction.agentActivity ?? EMPTY_AGENT_PROGRESS
-    const changes = parseFileChangesFromProgress(progress)
-    if (changes.length === 0) return null
-
-    const totalAdditions = changes.reduce((sum, c) => sum + c.additions, 0)
-    const totalDeletions = changes.reduce((sum, c) => sum + c.deletions, 0)
-    const createdCount = changes.filter((c) => c.created).length
-    const modifiedCount = changes.length - createdCount
-    const isOpen = openReviewIds[interactionId] ?? true
-
-    let summaryLabel = ''
-    if (createdCount > 0 && modifiedCount === 0) {
-      summaryLabel = `${createdCount} ${createdCount === 1 ? 'file created' : 'files created'}`
-    } else if (createdCount > 0 && modifiedCount > 0) {
-      summaryLabel = `${createdCount} created, ${modifiedCount} modified`
-    } else {
-      summaryLabel = `${changes.length} ${changes.length === 1 ? 'file changed' : 'files changed'}`
-    }
+  const tryAttachDroppedImage = async (dataTransfer: DataTransfer): Promise<boolean> => {
+    if (!onAttachImage) return false
 
-    const handleRewind = async (e: React.MouseEvent) => {
-      e.stopPropagation()
-      const chatId = interaction.chatId || 'cli'
+    const rawImage = dataTransfer.getData(WORKSPACE_IMAGE_MIME)
+    let imagePayload: { path?: string; root?: string; url?: string; name?: string } | null = null
+    if (rawImage) {
       try {
-        const checkpoints = await listGitCheckpoints(chatId)
-        if (!checkpoints || checkpoints.length === 0) {
-          setUndoToastState({
-            visible: true,
-            message: 'No git checkpoints recorded for this session.',
-            canUndo: false,
-            isUndoing: false,
-            type: 'error',
-          })
-          return
-        }
-
-        // Targeted Step Checkpoint resolution:
-        // Match checkpoints against files touched in this specific interaction
-        const changePaths = new Set(changes.map((c) => c.path.trim().toLowerCase()))
-        const matching = checkpoints.filter((cp) => {
-          if (!cp.targetPath) return false
-          const cpPath = cp.targetPath.trim().toLowerCase()
-          return changePaths.has(cpPath) || Array.from(changePaths).some((p) => cpPath.endsWith(p) || p.endsWith(cpPath))
-        })
-
-        let targetCp: GitCheckpoint | null = null
-        if (matching.length > 0) {
-          // Earliest matching checkpoint represents the state immediately before this turn's modifications
-          targetCp = matching.reduce((earliest, curr) => (curr.step < earliest.step ? curr : earliest), matching[0])
-        } else {
-          // If no direct target path, try matching by timestamp
-          const interactionTs = interaction.createdAt ? new Date(interaction.createdAt).getTime() / 1000 : 0
-          if (interactionTs > 0) {
-            const afterCreated = checkpoints.filter((cp) => cp.timestamp >= interactionTs - 10)
-            if (afterCreated.length > 0) {
-              targetCp = afterCreated[0]
-            }
-          }
-          if (!targetCp) {
-            targetCp = checkpoints[checkpoints.length - 1]
-          }
-        }
-
-        setRewindModalState({
-          isOpen: true,
-          interaction,
-          changes,
-          checkpoints,
-          targetCheckpoint: targetCp,
-          isLoading: false,
-        })
-      } catch (err: any) {
-        setUndoToastState({
-          visible: true,
-          message: `Failed to load checkpoints: ${err.message || String(err)}`,
-          canUndo: false,
-          isUndoing: false,
-          type: 'error',
-        })
+        imagePayload = JSON.parse(rawImage)
+      } catch {
+        // ignore
       }
     }
 
-    return (
-      <div className="file-changes-summary-container">
-        <div className="agent-activity-card file-changes-card">
-          <div className="file-changes-summary-row">
-            <div className="file-changes-summary">
-              <span className="file-changes-summary-icon" aria-hidden="true">⊞</span>
-              <span className="file-changes-summary-copy">
-                <span className="file-changes-summary-label">{summaryLabel}</span>
-                <span className="file-changes-summary-counts">
-                  {totalAdditions > 0 && <span className="file-changes-count-add">+{totalAdditions}</span>}
-                  {totalDeletions > 0 && <span className="file-changes-count-del">-{totalDeletions}</span>}
-                </span>
-              </span>
-            </div>
-            <div className="file-changes-summary-actions">
-              <button
-                type="button"
-                className="file-changes-rewind-btn"
-                onClick={handleRewind}
-                title="Rewind workspace to before these file edits (Git Checkpoint)"
-              >
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <polyline points="1 4 7 4 7 10" />
-                  <path d="M3 9a9 9 0 1 0 2.13-5.36L1 7" />
-                </svg>
-                Undo
-              </button>
-              <button
-                type="button"
-                className="file-changes-review-btn"
-                title="Review changed code"
-                onClick={() => {
-                  openReview('All conversation changes', getConversationChanges())
-                }}
-              >
-                Review
-              </button>
-            </div>
-          </div>
-          {isOpen && <div className="file-changes-list-container">{renderChangesList(changes, interactionId)}</div>}
-        </div>
-      </div>
-    )
-  }, [agentActivitySnapshots, getConversationChanges, openReviewIds, openFileDiffs, showAllFileChanges, workspacePath, onOpenArtifact, onOpenReview])
-
-  const renderActiveFileChanges = () => {
-    const changes = composerChanges
-    if (changes.length === 0) return null
-
-    const totalAdditions = changes.reduce((sum, c) => sum + c.additions, 0)
-    const totalDeletions = changes.reduce((sum, c) => sum + c.deletions, 0)
-    const createdCount = changes.filter((c) => c.created).length
-    const modifiedCount = changes.length - createdCount
-    const isOpen = openReviewIds['active-run'] ?? true
-
-    let summaryLabel = ''
-    if (createdCount > 0 && modifiedCount === 0) {
-      summaryLabel = `${createdCount} ${createdCount === 1 ? 'file created' : 'files created'}`
-    } else if (createdCount > 0 && modifiedCount > 0) {
-      summaryLabel = `${createdCount} created, ${modifiedCount} modified`
-    } else {
-      summaryLabel = `${changes.length} ${changes.length === 1 ? 'file changed' : 'files changed'}`
+    const wsPath =
+      imagePayload?.path ||
+      dataTransfer.getData(WORKSPACE_PATH_MIME) ||
+      dataTransfer.getData('application/x-mint-workspace-path')
+    const plainText = dataTransfer.getData('text/plain')
+    const uriList = dataTransfer.getData('text/uri-list')
+    const candidatePath = (wsPath || plainText || uriList || '').replace(/^@/, '').trim()
+
+    const isImg =
+      Boolean(imagePayload) ||
+      isImageFileName(candidatePath) ||
+      candidatePath.startsWith('blob:') ||
+      candidatePath.startsWith('data:image/') ||
+      Boolean(imagePayload?.url)
+    if (!isImg) return false
+
+    const name = imagePayload?.name || candidatePath.split(/[\\/]/).pop()?.split('?')[0] || 'image.png'
+    const root = imagePayload?.root || workspacePath || ''
+    const url =
+      imagePayload?.url ||
+      (candidatePath.startsWith('http') || candidatePath.startsWith('blob:') || candidatePath.startsWith('data:image/')
+        ? candidatePath
+        : '')
+
+    let dataUri = ''
+    if (url) {
+      dataUri = await resolveImageToDataUri(url, root, (p, r) => runtimePlatform.readWorkspaceImage(p, r))
+    }
+    if (!dataUri && candidatePath) {
+      dataUri = await resolveImageToDataUri(candidatePath, root, (p, r) => runtimePlatform.readWorkspaceImage(p, r))
     }
 
-    return (
-      <div className="message ai-message agent-activity-message" style={{ marginTop: '4px', marginBottom: '8px' }}>
-        <div className="agent-activity-card file-changes-card">
-          <div className="file-changes-summary-row">
-            <div className="file-changes-summary">
-              <span className="file-changes-summary-icon" aria-hidden="true">✓</span>
-              <span className="file-changes-summary-copy">
-                <span className="file-changes-summary-label">{summaryLabel}</span>
-                <span className="file-changes-summary-counts">
-                  {totalAdditions > 0 && <span className="file-changes-count-add">+{totalAdditions}</span>}
-                  {totalDeletions > 0 && <span className="file-changes-count-del">-{totalDeletions}</span>}
-                </span>
-              </span>
-            </div>
-            <button
-              type="button"
-              className="file-changes-review-btn"
-              title="Review changed code"
-              onClick={() => {
-                openReview('All conversation changes', getConversationChanges())
-              }}
-            >
-              Review
-            </button>
-          </div>
+    if (dataUri) {
+      const previewDataUri = await createTrimmedImagePreview(dataUri).catch(() => dataUri)
+      onAttachImage({ dataUri, previewDataUri, name })
+      textareaRef.current?.focus()
+      return true
+    }
+    return false
+  }
 
-          {isOpen && (
-            <div className="file-changes-list-container" style={{ marginTop: '8px' }}>
-              {renderChangesList(changes, 'active')}
-            </div>
-          )}
-        </div>
-      </div>
-    )
+  const handleWorkspaceDrop = (event: DragEvent<HTMLElement>) => {
+    event.preventDefault()
+    const wsPath =
+      event.dataTransfer.getData(WORKSPACE_PATH_MIME) ||
+      event.dataTransfer.getData('application/x-mint-workspace-path')
+    const plainText = event.dataTransfer.getData('text/plain')
+    const reference = wsPath || plainText
+
+    void tryAttachDroppedImage(event.dataTransfer).then((attached) => {
+      if (attached) return
+      if (!reference) return
+      const trimmed = reference.trim()
+      if (wsPath || trimmed.startsWith('@')) {
+        handleReferenceFile(trimmed)
+      }
+    })
   }
+  const isEmptyChat = interactions.length === 0 && !sending && !pendingApproval
+
+  const handleRewindRequest = useLatestCallback((payload: RewindRequestPayload) => {
+    setRewindModalState({
+      isOpen: true,
+      interaction: payload.interaction,
+      changes: payload.changes,
+      checkpoints: payload.checkpoints,
+      targetCheckpoint: payload.targetCheckpoint,
+      isLoading: false,
+    })
+  })
+
+  const handleRewindError = useLatestCallback((message: string) => {
+    setUndoToastState({
+      visible: true,
+      message,
+      canUndo: false,
+      isUndoing: false,
+      type: 'error',
+    })
+  })
 
   const liveTurn = sending || pendingApproval ? (
     <>
@@ -1437,15 +1305,26 @@ export default function ChatPanel({
         <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginBottom: '16px' }}>
           <div className="message user-message"><div className="bubble-wrapper"><div className="message-bubble"><FormattedMessage text={[sendingMessage, sendingImageMarkers, sendingVideoMarkers].filter(Boolean).join(' ')} /></div></div></div>
           {agentMode && (
-            <ProgressActivity
+            <AgentActivityDrawer
               progress={agentProgress}
               id="live"
               isOpen={openActivityIds['live'] ?? true}
               onToggle={toggleActivity}
               pendingApproval={!!pendingApproval}
+              chatId={chatId}
+              workspacePath={workspacePath}
+              onReferenceFile={handleReferenceFile}
+              onOpenArtifact={openArtifact}
             />
           )}
-          {renderActiveFileChanges()}
+          <TurnFileChanges
+            changes={composerChanges}
+            isLive
+            workspacePath={workspacePath}
+            onReferenceFile={handleReferenceFile}
+            onOpenArtifact={openArtifact}
+            onOpenReview={openAllConversationReview}
+          />
           <div className="message ai-message thinking-message">
             <div className="bubble-wrapper">
               {!agentMode && liveExtendedThoughts.length > 0 && (
@@ -1468,8 +1347,8 @@ export default function ChatPanel({
                 />
               )}
               <div className="message-bubble">
-                <McpToolResults progress={agentProgress} running />
-                <ViewedImages progress={agentProgress} />
+                <McpToolResults progress={agentProgress} running chatId={chatId} mode="artifacts-only" />
+                <ViewedImages progress={agentProgress} chatId={chatId} onOpenArtifact={openArtifact} />
                 <span>
                   {compaction ? (
                     <ContextCompactionStatus key={compaction.index} />
@@ -1483,9 +1362,7 @@ export default function ChatPanel({
                           ? `${activeAgentName} (${activeModelName}) is thinking...`
                           : 'Thinking'}
                       </span>
-                      <span className="thinking-status-meta">
-                        {` · ${elapsedSeconds}s · Esc to cancel`}
-                      </span>
+                      <ThinkingElapsedMeta />
                     </div>
                   )}
                 </span>
@@ -1493,7 +1370,7 @@ export default function ChatPanel({
               {streamedResponse && (
                 <div className="message-time" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                   <span className="provider-model-chip" data-provider={(streamedResponse.provider || '').toLowerCase()} title={`${streamedResponse.provider} • ${streamedResponse.model}`}>
-                    <span className="provider-chip-dot" aria-hidden="true" />
+                    <ProviderBrandIcon provider={streamedResponse.provider} model={streamedResponse.model} customProviders={settingsConfig?.customProviders} size={13} />
                     <span className="provider-chip-name">{streamedResponse.provider}</span>
                     <span className="provider-chip-divider">/</span>
                     <span className="provider-chip-model">{streamedResponse.model}</span>
@@ -1505,15 +1382,16 @@ export default function ChatPanel({
                         type="button"
                         className={`msg-action-btn copy-btn ${copiedId === 'live' ? 'is-copied' : ''}`}
                         onClick={() => handleCopyMessage('live', throttledStreamedReply)}
-                        title={copiedId === 'live' ? 'คัดลอกแล้ว (Copied!)' : 'คัดลอกข้อความ (Copy message)'}
+                        title={copiedId === 'live' ? 'Copied!' : 'Copy message'}
                       >
                         {renderCopyIcon(copiedId === 'live')}
                       </button>
                       <button
                         type="button"
                         className={`msg-action-btn tts-btn ${speakingText === throttledStreamedReply ? 'is-speaking' : ''}`}
+                        disabled={sending}
                         onClick={() => speak(throttledStreamedReply)}
-                        title={speakingText === throttledStreamedReply ? 'Stop reading' : 'Read aloud'}
+                        title={sending ? 'Read after the reply finishes' : speakingText === throttledStreamedReply ? 'Stop reading' : 'Read aloud'}
                       >
                         {renderSpeakerIcon(speakingText === throttledStreamedReply)}
                       </button>
@@ -1545,6 +1423,7 @@ export default function ChatPanel({
       onDrop={handleDrop}
       style={activeArtifact || reviewPage ? { flex: '0 0 calc(100% - var(--preview-width, 50%))', width: 'calc(100% - var(--preview-width, 50%))', minWidth: '320px', maxWidth: 'none', margin: 0, position: 'relative' } : undefined}
     >
+        {speechError && <p role="status" style={{ padding: '8px 16px', fontSize: '12px', color: 'var(--text-muted)' }}>{speechError} <button type="button" onClick={() => setSpeechError('')}>Dismiss</button></p>}
         {isDragging && (
           <div
             className="drag-drop-overlay"
@@ -1558,16 +1437,16 @@ export default function ChatPanel({
               left: 0,
               right: 0,
               bottom: 0,
-              background: 'rgba(15, 23, 42, 0.82)',
+              background: 'var(--bg-backdrop)',
               backdropFilter: 'blur(8px)',
               border: '2px dashed var(--accent)',
-              borderRadius: '16px',
+              borderRadius: 'var(--radius-xl, 18px)',
               margin: '12px',
               display: 'flex',
               flexDirection: 'column',
               alignItems: 'center',
               justifyContent: 'center',
-              color: 'white',
+              color: 'var(--text-primary)',
               zIndex: 1000,
               pointerEvents: 'auto',
             }}
@@ -1651,7 +1530,6 @@ export default function ChatPanel({
             )}
           </div>
           <div className="chat-header-actions">
-            {showSessionSources && <SessionSourcesPopover chatId={chatId} liveProgress={agentProgress} open={sessionSourcesOpen} onOpenChange={setSessionSourcesOpen} />}
             {tools?.onToggle && <ToolsPanelToggle open={tools.open} count={tools.backgroundTaskCount} onToggle={tools.onToggle} />}
             {activeArtifact && (
               <button
@@ -1685,7 +1563,7 @@ export default function ChatPanel({
       <div className="chat-container" ref={chatContainerRef} onScroll={handleChatScroll} style={{ overflowAnchor: 'none' }}>
         {hasOlder && onLoadOlder && (
           <button type="button" className="load-older-messages" disabled={loadingOlder}
-            style={{ display: 'block', margin: '0 auto 20px', padding: '7px 14px', borderRadius: 8,
+            style={{ display: 'block', margin: '0 auto 20px', padding: '7px 14px', borderRadius: 'var(--radius-md, 10px)',
               border: '1px solid var(--border-color, #3a3a3a)', background: 'var(--surface, #252525)',
               color: 'var(--text-secondary, #c0c0c0)', cursor: loadingOlder ? 'default' : 'pointer' }}
             onClick={async () => {
@@ -1720,19 +1598,23 @@ export default function ChatPanel({
                   interaction={interaction}
                   copiedId={copiedId}
                   onEditMessage={handleEditMessage}
+                  onResendFrom={onResendFrom}
                   speakingText={speakingText}
                   agentActivitySnapshots={agentActivitySnapshots}
-                  thinkingExpanded={thinkingExpanded}
                   openActivityIds={openActivityIds}
-                  openReviewIds={openReviewIds}
-                  openFileDiffs={openFileDiffs}
+                  thinkingExpanded={thinkingExpanded}
                   onThinkingExpandedChange={onThinkingExpandedChange}
                   handleCopyMessage={handleCopyMessage}
                   speak={speak}
                   toggleActivity={toggleActivity}
-                  showAllFileChanges={showAllFileChanges}
+                  chatId={chatId}
                   workspacePath={workspacePath}
-                  renderFileChanges={renderFileChanges}
+                  onReferenceFile={handleReferenceFile}
+                  customProviders={settingsConfig?.customProviders}
+                  onOpenArtifact={openArtifact}
+                  onOpenReview={openAllConversationReview}
+                  onRewindRequest={handleRewindRequest}
+                  onRewindError={handleRewindError}
                 />
               </Fragment>
             )
@@ -1757,6 +1639,10 @@ export default function ChatPanel({
 
       <div className="input-area">
         <ModsPanel workspacePath={workspacePath} chatId={chatId} panelTarget={tools?.modsPanelTarget} onOpen={tools?.onOpenMods ?? (() => {})} />
+        <SubagentStatusStrip
+          progress={agentProgress}
+          onOpenDetails={() => toggleActivity('live')}
+        />
         {composerChanges.length > 0 && (
           <button
             type="button"
@@ -1797,24 +1683,18 @@ export default function ChatPanel({
             {workspacePath && <GitBranchSelector workspacePath={workspacePath} disabled={sending} onBranchChanged={onWorkspaceChanged} />}
           </div>
         )}
-        <div className="smart-context-bar">
-          <label className={`smart-context-option ${agentMode ? 'is-active' : ''}`}>
-            <span className="toggle-switch">
-              <input type="checkbox" checked={agentMode} onChange={(event) => onSetAgentMode(event.target.checked)} />
-              <span className="slider round" />
-            </span>
-            <span className="smart-context-copy"><span className="smart-context-title">Agent mode</span></span>
-          </label>
-          {onSetPlanMode && (
-            <label className={`smart-context-option ${planMode ? 'is-active' : ''}`} title="Investigate read-only and require plan approval before editing files or running commands">
-              <span className="toggle-switch">
-                <input type="checkbox" checked={Boolean(planMode)} onChange={(event) => onSetPlanMode(event.target.checked)} />
-                <span className="slider round" />
-              </span>
-              <span className="smart-context-copy"><span className="smart-context-title">Plan mode</span></span>
-            </label>
-          )}
-        </div>
+        {queuedPrompts && queuedPrompts.length > 0 && (
+          <QueuedMessagesBanner
+            queuedPrompts={queuedPrompts}
+            queuePaused={Boolean(queuePaused)}
+            sending={sending}
+            onRemove={onRemoveQueuedPrompt || (() => {})}
+            onEdit={onEditQueuedPrompt || (() => {})}
+            onClear={onClearQueuedPrompts || (() => {})}
+            onSteer={onSteerQueuedPrompt || (() => {})}
+            onResumeQueue={onResumeQueue}
+          />
+        )}
         <form
           id="chat-form"
           className={geminiLiveEnabled ? 'has-live-btn' : ''}
@@ -1825,7 +1705,12 @@ export default function ChatPanel({
             onSubmit(event)
           }}
           onDragOver={(event) => {
-            if (event.dataTransfer.types.includes('application/x-mint-workspace-path')) {
+            if (
+              event.dataTransfer.types.includes(WORKSPACE_PATH_MIME) ||
+              event.dataTransfer.types.includes(WORKSPACE_FILE_MIME) ||
+              event.dataTransfer.types.includes(WORKSPACE_IMAGE_MIME) ||
+              event.dataTransfer.types.includes('application/x-mint-workspace-path')
+            ) {
               event.preventDefault()
               event.dataTransfer.dropEffect = 'copy'
             }
@@ -1881,7 +1766,7 @@ export default function ChatPanel({
                     </svg>
                   </span>
                   <span style={{ fontSize: '0.76rem', color: 'var(--text-soft)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '220px' }}>{documentName}</span>
-                  <button type="button" onClick={onRemoveDocument} style={{ background: 'transparent', border: 0, color: '#ef4444', cursor: 'pointer', display: 'inline-flex', alignItems: 'center' }}>
+                  <button type="button" onClick={onRemoveDocument} style={{ background: 'transparent', border: 0, color: 'var(--status-error)', cursor: 'pointer', display: 'inline-flex', alignItems: 'center' }}>
                     <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                       <line x1="18" y1="6" x2="6" y2="18"></line>
                       <line x1="6" y1="6" x2="18" y2="18"></line>
@@ -1930,6 +1815,18 @@ export default function ChatPanel({
               if (historyIndex !== null) setHistoryIndex(null)
             }}
             onKeyDown={handleInputKeyDown}
+            onDragOver={(event) => {
+              if (
+                event.dataTransfer.types.includes(WORKSPACE_PATH_MIME) ||
+                event.dataTransfer.types.includes(WORKSPACE_FILE_MIME) ||
+                event.dataTransfer.types.includes(WORKSPACE_IMAGE_MIME) ||
+                event.dataTransfer.types.includes('application/x-mint-workspace-path') ||
+                event.dataTransfer.types.includes('text/plain')
+              ) {
+                event.preventDefault()
+                event.dataTransfer.dropEffect = 'copy'
+              }
+            }}
             onDrop={handleWorkspaceDrop}
             placeholder="Ask anything, @ to mention, / for actions"
             rows={1}
@@ -2018,22 +1915,31 @@ export default function ChatPanel({
               <path d="M8 22h8M12 18v4M7 10h10M12 5v10" />
             </svg>
           </button>
-          <ModelSelectorPopover
-            activeProvider={status?.activeProvider ?? ''}
-            activeModel={activeModel}
-            availableProviders={status?.availableProviders ?? []}
-            settingsConfig={settingsConfig}
-            dynamicOllamaModels={dynamicOllamaModels}
-            onSelect={(provider, model) => {
-              if (onSelectModelAndProvider) {
-                onSelectModelAndProvider(provider, model)
-              } else {
-                onSetProvider(provider)
-                onSetModel(model)
-              }
-            }}
-            onUpdateSettings={onUpdateSettings}
-          />
+          <div className="chat-composer-pills">
+            <ModelSelectorPopover
+              activeProvider={status?.activeProvider ?? ''}
+              activeModel={activeModel}
+              availableProviders={status?.availableProviders ?? []}
+              settingsConfig={settingsConfig}
+              dynamicOllamaModels={dynamicOllamaModels}
+              onSelect={(provider, model) => {
+                if (onSelectModelAndProvider) {
+                  onSelectModelAndProvider(provider, model)
+                } else {
+                  onSetProvider(provider)
+                  onSetModel(model)
+                }
+              }}
+              onUpdateSettings={onUpdateSettings}
+            />
+            <ChatModeSelector
+              agentMode={agentMode}
+              onSetAgentMode={onSetAgentMode}
+              planMode={planMode}
+              onSetPlanMode={onSetPlanMode}
+              disabled={sending}
+            />
+          </div>
           <VoicePill
             id="voice-input-btn"
             className="composer-voice-pill"
@@ -2041,9 +1947,9 @@ export default function ChatPanel({
             disabled={sending || voiceAwaitingResponse || geminiLive.voiceMode}
             ariaLabel="Voice input"
             title={isRecording ? 'Stop recording · Esc or slide left to cancel' : 'Tap to dictate · hold to record'}
-            accentColor="#f5f5f5"
-            iconColor="#a1a1aa"
-            background="#27272a"
+            accentColor="var(--text-primary)"
+            iconColor="var(--text-muted)"
+            background="var(--bg-surface-soft)"
             size={28}
             shape="pill"
             reach={8}
@@ -2089,18 +1995,34 @@ export default function ChatPanel({
             </button>
           )}
           {sending ? (
-            <button
-              id="send-btn"
-              className="stop-btn"
-              type="button"
-              onClick={onCancelMessage}
-              title="Stop generating"
-              style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}
-            >
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
-                <rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect>
-              </svg>
-            </button>
+            <div style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}>
+              {canSubmit && (
+                <button
+                  id="queue-btn"
+                  className="queue-btn"
+                  type="submit"
+                  title="Add to queue (Enter)"
+                  style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}
+                >
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <line x1="22" y1="2" x2="11" y2="13"></line>
+                    <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+                  </svg>
+                </button>
+              )}
+              <button
+                id="send-btn"
+                className="stop-btn"
+                type="button"
+                onClick={onCancelMessage}
+                title="Stop generating"
+                style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}
+              >
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+                  <rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect>
+                </svg>
+              </button>
+            </div>
           ) : (
             <button id="send-btn" type="submit" disabled={!canSubmit} style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -2114,9 +2036,6 @@ export default function ChatPanel({
           <p className="composer-voice-feedback" role="status">{voiceTranscript}</p>
         )}
       </div>
-      <p className="input-disclaimer">
-        Mint Agent is an AI gateway. Responses via third-party APIs. Verify critical info.
-      </p>
       {geminiLive.voiceMode && (
         <GeminiLiveOverlay
           status={
@@ -2140,6 +2059,8 @@ export default function ChatPanel({
           onEndCall={() => geminiLive.setVoiceMode(false)}
           voice={settingsConfig?.geminiLiveVoice || 'Puck'}
           voices={GEMINI_LIVE_VOICES}
+          pendingApproval={pendingApproval}
+          onApproval={onApproval}
           onChangeVoice={async (voiceName) => {
             await onSetGeminiLiveVoice(voiceName)
             geminiLive.restart()
@@ -2219,29 +2140,33 @@ export default function ChatPanel({
           >
             <div className="preview-split-resizer-grip" />
           </div>
-          {reviewPage ? (
-            <CodeReviewPage
-              title={reviewPage.title}
-              changes={reviewPage.changes}
-              workspacePath={workspacePath}
-              onBack={() => setReviewPage(null)}
-            />
-          ) : activeArtifact ? (
-            <ArtifactPreviewPanel artifact={activeArtifact} onClose={() => setActiveArtifact(null)} workspacePath={workspacePath} />
-          ) : null}
+          <Suspense fallback={null}>
+            {reviewPage ? (
+              <CodeReviewPage
+                title={reviewPage.title}
+                changes={reviewPage.changes}
+                workspacePath={workspacePath}
+                onBack={() => setReviewPage(null)}
+              />
+            ) : activeArtifact ? (
+              <ArtifactPreviewPanel artifact={activeArtifact} onClose={() => setActiveArtifact(null)} workspacePath={workspacePath} />
+            ) : null}
+          </Suspense>
         </>
       )}
       {rewindModalState.isOpen && (
-        <RewindModal
-          isOpen={rewindModalState.isOpen}
-          onClose={() => setRewindModalState((prev) => ({ ...prev, isOpen: false }))}
-          onConfirm={handleConfirmRewind}
-          checkpoints={rewindModalState.checkpoints}
-          targetCheckpoint={rewindModalState.targetCheckpoint}
-          changes={rewindModalState.changes}
-          workspacePath={workspacePath}
-          isLoading={rewindModalState.isLoading}
-        />
+        <Suspense fallback={null}>
+          <RewindModal
+            isOpen={rewindModalState.isOpen}
+            onClose={() => setRewindModalState((prev) => ({ ...prev, isOpen: false }))}
+            onConfirm={handleConfirmRewind}
+            checkpoints={rewindModalState.checkpoints}
+            targetCheckpoint={rewindModalState.targetCheckpoint}
+            changes={rewindModalState.changes}
+            workspacePath={workspacePath}
+            isLoading={rewindModalState.isLoading}
+          />
+        </Suspense>
       )}
     </div>
   )