@pheem49/mint 1.14.0 → 1.16.0

package/src/renderer/shared/components/ChatPanel.tsx

@@ -1,5 +1,11 @@
+import McpToolResults from './McpToolResults'
+import ViewedImages from './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 { hasAgentToolActivity, thoughtsFrom, parseFileChangesFromProgress } from '../agentProgress'
+import { EMPTY_AGENT_PROGRESS, hasAgentToolActivity, thoughtsFrom, extendedThoughtsFrom, mergeFileChanges, parseFileChangesFromProgress } from '../agentProgress'
+import { visibleInteractionsDuringRun } from '../conversation/syncView'
 import {
   GEMINI_MODELS,
   OPENAI_MODELS,
@@ -12,45 +18,82 @@ import {
   GEMINI_LIVE_VOICES,
 } from '../constants/models'
 import { badge, providerLabel, fallbackNotice } from '../utils/providers'
-import { activitiesFrom, parseWebSearchSources, type AgentActivity, type AgentActivityView } from '../utils/agentActivity'
+import { parseWebSearchSources } from '../utils/agentActivity'
+import { useLatestCallback } from '../utils/useLatestCallback'
+import SlashChoicePanel from './SlashChoicePanel'
 import SlashSuggestions, { type SlashSuggestionsHandle } from './SlashSuggestions'
-import { AgentActivityTable } from './AgentActivityTable'
 import { ChatCodeBlock } from './ChatCodeBlock'
 import { renderApprovalDetails, renderDiff, type ApprovalDetails } from '../utils/approval'
 import { ApprovalCard } from './ApprovalCard'
-import { renderFormattedMessage, readableAssistantText, cleanSpeechText, renderSpeakerIcon, renderCopyIcon } from '../utils/markdown'
+import { readableAssistantText, cleanSpeechText, renderSpeakerIcon, renderCopyIcon } from '../utils/markdown'
 import { ThinkingBlock } from './ThinkingBlock'
-import SourcesBlock from './SourcesBlock'
 import ChatMessageItem from './ChatMessageItem'
-import { AgentActivityDrawer } from './AgentActivityDrawer'
+import { FormattedMessage } from './FormattedMessage'
+import { ProgressActivity } from './ProgressActivity'
+import { VirtualChatHistory, type VirtualChatHistoryHandle } from './VirtualChatHistory'
 import { ArtifactPreviewPanel, type ArtifactFile } from './ArtifactPreviewPanel'
 import { RewindModal } from './RewindModal'
-import type { DiffHunk, FileChange, GitCheckpoint } from '../types'
+import type { AgentProgress, ChatResponse, DiffHunk, FileChange, GitCheckpoint, RuntimeStatus } from '../types'
 import { numericSetting, shouldShowSessionDivider, formatSessionDividerLabel } from '../utils/ui'
 import { useVoiceInput } from '@/voiceInput'
+import VoicePill from './VoicePill'
 import { useGeminiLiveVoice } from '../utils/useGeminiLiveVoice'
 import GeminiLiveOverlay from './GeminiLiveOverlay'
 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 { catalogPlatform, conversationPlatform, runtimePlatform } from '../platform'
+
+const STREAM_MARKDOWN_UPDATE_MS = 120
+
+function useThrottledValue<T>(value: T, intervalMs: number): T {
+  const [throttledValue, setThrottledValue] = useState(value)
+  const latestValueRef = useRef(value)
+  const lastUpdateRef = useRef(0)
+  const timerRef = useRef<ReturnType<typeof window.setTimeout> | null>(null)
 
-import {
-  APP_ICON_PATH,
-  type AgentProgress,
-  type ChatResponse,
-  type RuntimeStatus,
-  getTtsUrls,
-  startGeminiLiveSession,
-  sendGeminiLiveAudioChunk,
-  stopGeminiLiveSession,
-  listGitCheckpoints,
-  rollbackGitCheckpoint,
-  undoGitCheckpoint,
-  fetchProviderModels,
-} from '@/tauri'
+  useEffect(() => {
+    latestValueRef.current = value
+    if (Object.is(value, throttledValue)) return
 
+    const flush = () => {
+      timerRef.current = null
+      lastUpdateRef.current = Date.now()
+      setThrottledValue(latestValueRef.current)
+    }
+    const remaining = intervalMs - (Date.now() - lastUpdateRef.current)
+    if (remaining <= 0) flush()
+    else if (timerRef.current === null) timerRef.current = window.setTimeout(flush, remaining)
+  }, [value, throttledValue, intervalMs])
 
-interface ChatPanelProps {
+  useEffect(() => () => {
+    if (timerRef.current !== null) window.clearTimeout(timerRef.current)
+  }, [])
+
+  return throttledValue
+}
+
+const {
+  getTtsUrls, startGeminiLiveSession, sendGeminiLiveAudioChunk, stopGeminiLiveSession,
+  listGitCheckpoints, rollbackGitCheckpoint, undoGitCheckpoint,
+} = conversationPlatform
+const { fetchProviderModels } = catalogPlatform
+
+
+interface ChatPanelContract {
   interactions: any[]
+  sendingInteractionId?: number | null
+  hasOlder?: boolean
+  onLoadOlder?: () => Promise<void>
   sending: boolean
   sendingMessage: string
   sendingImageCount: number
@@ -66,13 +109,13 @@ interface ChatPanelProps {
   videoAttachments: Array<{ dataUri: string; name: string }>
   documentName: string
   pendingApproval: any | null
-  smartContext: boolean
   agentMode: boolean
   /** Desktop only — plan-mode-approval UI isn't available on web. */
   planMode?: boolean
   status: RuntimeStatus | null
   /** Desktop only — web has no local workspace-folder concept to select from. */
   workspacePath?: string
+  chatId: string
   chatEnd: RefObject<HTMLDivElement | null>
   welcomeInteraction: any
   onSubmit: (event: FormEvent<HTMLFormElement>) => void
@@ -87,15 +130,17 @@ interface ChatPanelProps {
   onRemoveDocument: () => void
   onStartWebSearch: () => void
   onCaptureScreen: () => void
-  onSetSmartContext: (enabled: boolean) => void
   onSetAgentMode: (enabled: boolean) => void
   /** Desktop only — see `planMode`. */
   onSetPlanMode?: (enabled: boolean) => void
   onSetProvider: (provider: string) => void
   /** Desktop only — see `workspacePath`. */
-  onSelectWorkspace?: () => void
+  onSelectWorkspace?: (path?: string) => void
+  onWorkspaceChanged?: () => void
+  recentWorkspacePaths: string[]
   onApproval: (approved: boolean, autoApproveSession?: boolean, answer?: string) => void
   settingsConfig: any
+  onUpdateSettings?: (config: any) => void
   onSetModel: (model: string) => void
   onSelectModelAndProvider?: (provider: string, model: string) => void
   onCancelMessage: () => void
@@ -103,11 +148,47 @@ interface ChatPanelProps {
   onSetGeminiLiveVoice: (voice: string) => Promise<void>
   /** Web only — desktop's window has no mobile-width sidebar to toggle. */
   onToggleMobileSidebar?: () => void
+  isCliSession?: boolean
+  cliSessionId?: string
+  onBackToCode?: () => void
+  conversationTitle?: string
+  slashChoice?: { command: string; title: string; options: { label: string; value: string }[] } | null
+  onOpenArtifact?: (artifact: ArtifactFile) => void
+  onOpenReview?: (review: Extract<ToolSurface, { kind: 'review' }>) => void
+  onSelectSlashChoice?: (value: string) => void
+  onDismissSlashChoice?: () => void
 }
 
+export type ConversationViewModel = Pick<ChatPanelContract,
+  | 'interactions' | 'sending' | 'sendingMessage' | 'sendingImageCount' | 'sendingVideoCount'
+  | 'streamedReply' | 'streamedResponse' | 'agentProgress' | 'agentActivitySnapshots'
+  | 'thinkingExpanded' | 'message' | 'imageAttachments' | 'videoAttachments' | 'documentName'
+  | 'pendingApproval' | 'agentMode' | 'planMode' | 'status' | 'workspacePath' | 'chatId' | 'recentWorkspacePaths'
+  | 'chatEnd' | 'welcomeInteraction' | 'settingsConfig' | 'isCliSession' | 'cliSessionId'
+  | 'conversationTitle' | 'slashChoice'
+  | 'hasOlder'
+  | 'sendingInteractionId'
+>
+export type ConversationActions = Omit<ChatPanelContract, keyof ConversationViewModel>
+
+interface ChatPanelProps {
+  conversation: ConversationViewModel
+  actions: ConversationActions
+  showSessionSources?: boolean
+  tools?: { modsPanelTarget: HTMLElement | null; onOpenMods: () => void; onToggle?: () => void; open: boolean; backgroundTaskCount: number }
+}
 
 export default function ChatPanel({
+  conversation,
+  actions,
+  tools,
+  showSessionSources = false,
+}: ChatPanelProps) {
+  const {
   interactions,
+  sendingInteractionId,
+  hasOlder,
+  onLoadOlder,
   sending,
   sendingMessage,
   sendingImageCount,
@@ -117,17 +198,18 @@ export default function ChatPanel({
   agentProgress,
   agentActivitySnapshots,
   thinkingExpanded,
-  onThinkingExpandedChange,
+  onThinkingExpandedChange: handleThinkingExpandedChange,
   message,
   imageAttachments,
   videoAttachments,
   documentName,
   pendingApproval,
-  smartContext,
   agentMode,
   planMode,
   status,
   workspacePath,
+  chatId,
+  recentWorkspacePaths,
   chatEnd,
   welcomeInteraction,
   onSubmit,
@@ -142,23 +224,81 @@ export default function ChatPanel({
   onRemoveDocument,
   onStartWebSearch,
   onCaptureScreen,
-  onSetSmartContext,
   onSetAgentMode,
   onSetPlanMode,
   onSetProvider,
   onSelectWorkspace,
+  onWorkspaceChanged,
   onApproval,
   settingsConfig,
+  onUpdateSettings,
   onSetModel,
   onSelectModelAndProvider,
   onCancelMessage,
   onClearMessages,
   onSetGeminiLiveVoice,
   onToggleMobileSidebar,
-}: ChatPanelProps) {
-  const agentActivities = activitiesFrom(agentProgress)
+  isCliSession,
+  cliSessionId,
+  onBackToCode,
+  conversationTitle,
+  slashChoice,
+  onOpenArtifact,
+  onOpenReview,
+  onSelectSlashChoice,
+  onDismissSlashChoice,
+  } = { ...conversation, ...actions }
+  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
+  // still showing turns submitted from other surfaces during that time.
+  const visibleInteractions = useMemo(
+    () => visibleInteractionsDuringRun(interactions, sending, sendingInteractionId),
+    [interactions, sending, sendingInteractionId],
+  )
+  // Keep the composer summary tied to the active/latest agent run. This is cheap
+  // metadata, but memoizing it avoids parsing the activity stream while typing.
+  const composerChanges = useMemo(() => parseFileChangesFromProgress(agentProgress), [agentProgress])
+  const composerAdditions = useMemo(
+    () => composerChanges.reduce((sum, change) => sum + change.additions, 0),
+    [composerChanges],
+  )
+  const composerDeletions = useMemo(
+    () => composerChanges.reduce((sum, change) => sum + change.deletions, 0),
+    [composerChanges],
+  )
+  const composerChangeLabel = composerChanges.length === 1
+    ? '1 file changed'
+    : `${composerChanges.length} files changed`
+  const historicalChanges = useMemo(() => {
+    const historicalGroups = interactions.map((interaction) => {
+      const interactionId = String(interaction.id)
+      const progress = agentActivitySnapshots[interactionId] ?? interaction.agentActivity ?? EMPTY_AGENT_PROGRESS
+      return parseFileChangesFromProgress(progress)
+    })
+    return mergeFileChanges(historicalGroups)
+  }, [agentActivitySnapshots, interactions])
+  // Review uses current data even from a memoized historical message's button.
+  // Merge the conversation only when requested, not on each progress update.
+  const getConversationChanges = useLatestCallback(() => mergeFileChanges([historicalChanges, composerChanges]))
+
+  const projectName = useMemo(() => {
+    if (!workspacePath) return null
+    const clean = workspacePath.replace(/[\\/]+$/, '').trim()
+    if (!clean) return null
+    const parts = clean.split(/[\\/]/)
+    return parts[parts.length - 1] || clean
+  }, [workspacePath])
+
+  // Markdown parsing can be expensive for code, tables, and interactive cards.
+  // Limit it to a steady cadence instead of parsing on every stream chunk.
+  const throttledStreamedReply = useThrottledValue(streamedReply, STREAM_MARKDOWN_UPDATE_MS)
+  const liveWebSources = useMemo(() => parseWebSearchSources(agentProgress), [agentProgress])
   const activeFallbackNotice = fallbackNotice(streamedResponse)
-  const lastThinkingProgress = [...agentProgress].reverse().find(p => p.type === 'Thinking')
+  const compaction = useMemo(() => activeCompactionFrom(agentProgress), [agentProgress])
+  const liveThoughts = useMemo(() => thoughtsFrom(agentProgress), [agentProgress])
+  const liveExtendedThoughts = useMemo(() => extendedThoughtsFrom(agentProgress), [agentProgress])
+  const lastThinkingProgress = useMemo(() => [...agentProgress].reverse().find(p => p.type === 'Thinking'), [agentProgress])
   let activeAgentName: string | null = null
   let activeModelName: string | null = null
   if (lastThinkingProgress && lastThinkingProgress.type === 'Thinking') {
@@ -168,10 +308,26 @@ export default function ChatPanel({
   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')) }))
+  }, [])
+
+  const openArtifact = useLatestCallback((artifact: ArtifactFile) => {
+    if (onOpenArtifact) onOpenArtifact(artifact)
+    else setActiveArtifact({ ...artifact, workspacePath: artifact.workspacePath ?? workspacePath })
+  })
+
+  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 })
+  })
 
   useEffect(() => {
     let cancelled = false
@@ -238,8 +394,11 @@ export default function ChatPanel({
   const [copiedId, setCopiedId] = useState<string | number | null>(null)
 
   const chatContainerRef = useRef<HTMLDivElement | null>(null)
+  const virtualHistoryRef = useRef<VirtualChatHistoryHandle | null>(null)
   const [showScrollToBottom, setShowScrollToBottom] = useState(false)
+  const [loadingOlder, setLoadingOlder] = useState(false)
   const isNearBottomRef = useRef(true)
+  const scrollFrameRef = useRef<number | null>(null)
 
   const handleChatScroll = useCallback(() => {
     const el = chatContainerRef.current
@@ -250,6 +409,32 @@ export default function ChatPanel({
     isNearBottomRef.current = nearBottom
   }, [])
 
+  const scheduleScrollToLatest = useCallback(() => {
+    if (!isNearBottomRef.current || scrollFrameRef.current !== null) return
+    scrollFrameRef.current = window.requestAnimationFrame(() => {
+      scrollFrameRef.current = null
+      const element = chatContainerRef.current
+      if (element && isNearBottomRef.current) {
+        // Smooth scrolling on every token restarts animations and causes jank.
+        virtualHistoryRef.current?.scrollToEnd()
+      }
+    })
+  }, [])
+
+  useEffect(() => {
+    scheduleScrollToLatest()
+  }, [interactions, sending, streamedReply, pendingApproval, agentProgress, scheduleScrollToLatest])
+
+  useEffect(() => {
+    isNearBottomRef.current = true
+    setShowScrollToBottom(false)
+    scheduleScrollToLatest()
+  }, [chatId, scheduleScrollToLatest])
+
+  useEffect(() => () => {
+    if (scrollFrameRef.current !== null) window.cancelAnimationFrame(scrollFrameRef.current)
+  }, [])
+
   useEffect(() => {
     const el = chatContainerRef.current
     if (!el) return
@@ -259,8 +444,9 @@ export default function ChatPanel({
   }, [activeArtifact])
 
   const scrollToBottom = useCallback(() => {
-    chatEnd.current?.scrollIntoView({ behavior: 'smooth' })
-  }, [chatEnd])
+    isNearBottomRef.current = true
+    virtualHistoryRef.current?.scrollToEnd()
+  }, [])
 
   const [splitRatio, setSplitRatio] = useState<number>(() => {
     try {
@@ -546,6 +732,7 @@ export default function ChatPanel({
     voiceModeRef,
     startRecognition,
     stopRecognition,
+    cancelRecognition,
     scheduleVoiceListen,
     clearRestartTimer
   } = useVoiceInput({
@@ -560,6 +747,7 @@ export default function ChatPanel({
   const geminiLiveEnabled = settingsConfig?.voiceMode === 'geminiLive'
   const geminiLive = useGeminiLiveVoice({
     workspacePath,
+    chatId,
     startSession: startGeminiLiveSession,
     sendAudioChunk: sendGeminiLiveAudioChunk,
     stopSession: stopGeminiLiveSession
@@ -568,8 +756,6 @@ export default function ChatPanel({
   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(' ')
-  const voiceStatus = speakingText ? 'speaking' : (sending || voiceAwaitingResponse) ? 'thinking' : isRecording ? 'listening' : voiceMode ? 'ready' : 'off'
-  const voiceStatusLabel = voiceStatus === 'speaking' ? 'Speaking' : voiceStatus === 'thinking' ? 'Thinking' : voiceStatus === 'listening' ? 'Listening' : 'Ready'
 
   const getAvailableModels = (provider: string) => {
     switch (provider) {
@@ -631,9 +817,6 @@ export default function ChatPanel({
     }
   }
   const activeModel = getActiveModel(activeProvider)
-  const workspaceName = workspacePath
-    ? workspacePath.split(/[\\/]/).filter(Boolean).pop() || workspacePath
-    : 'Select Project'
   const textareaRef = useRef<HTMLTextAreaElement>(null)
   const slashRef = useRef<SlashSuggestionsHandle>(null)
 
@@ -682,10 +865,10 @@ export default function ChatPanel({
   }
   // "Edit" on a past user message: drop its text back into the composer so it
   // can be tweaked and sent again as a new message (nothing is deleted).
-  const handleEditMessage = (text: string) => {
+  const handleEditMessage = useLatestCallback((text: string) => {
     setHistoryIndex(null)
     applyHistoryValue(text)
-  }
+  })
   const navigateHistoryNext = () => {
     if (historyIndex === null) return false
     if (historyIndex === 0) {
@@ -820,7 +1003,7 @@ export default function ChatPanel({
       scheduleVoiceListen(900)
     }
   }
-  const speak = (text: string) => {
+  const speak = useLatestCallback((text: string) => {
     const speechText = cleanSpeechText(text)
     if (!speechText) return
     if (speakingText === text) {
@@ -840,18 +1023,8 @@ export default function ChatPanel({
       return
     }
     speakNative(speechText, text)
-  }
-
-  const toggleRecording = () => {
-    if (isRecording) {
-      stopRecognition()
-      cancelSpeech()
-      return
-    }
+  })
 
-    cancelSpeech()
-    startRecognition()
-  }
   const resizeInput = (element: HTMLTextAreaElement) => {
     element.style.height = 'auto'
     element.style.height = `${Math.min(element.scrollHeight, 120)}px`
@@ -912,13 +1085,13 @@ export default function ChatPanel({
   }, [onPasteImage])
   useEffect(() => {
     const handleEscapeKeyDown = (event: globalThis.KeyboardEvent) => {
-      if (event.key === 'Escape' && sending) {
+      if (event.key === 'Escape' && sending && !sessionSourcesOpen) {
         onCancelMessage()
       }
     }
     window.addEventListener('keydown', handleEscapeKeyDown, true)
     return () => window.removeEventListener('keydown', handleEscapeKeyDown, true)
-  }, [sending, onCancelMessage])
+  }, [sending, onCancelMessage, sessionSourcesOpen])
   useEffect(() => {
     if (message) return
     const input = document.getElementById('chat-input') as HTMLTextAreaElement | null
@@ -967,35 +1140,12 @@ export default function ChatPanel({
     appendWorkspaceReference(reference)
   }
   const isEmptyChat = interactions.length === 0 && !sending && !pendingApproval
-  const renderCompletedActivity = useCallback((interaction: any) => {
-    const interactionId = String(interaction.id)
-    const progress = agentActivitySnapshots[interactionId] ?? interaction.agentActivity ?? []
-    const activityView = activitiesFrom(progress)
-    const isOpen = Boolean(openActivityIds[interactionId])
-    return (
-      <AgentActivityDrawer
-        activityView={activityView}
-        isOpen={isOpen}
-        onToggle={() => setOpenActivityIds((current) => ({ ...current, [interactionId]: !current[interactionId] }))}
-        isHistorical={true}
-        rawProgress={progress}
-      />
-    )
-  }, [agentActivitySnapshots, openActivityIds])
-
-  const renderWebSearchSources = useCallback((interaction: any) => {
-    const interactionId = String(interaction.id)
-    const progress = agentActivitySnapshots[interactionId] ?? interaction.agentActivity ?? []
-    const sources = parseWebSearchSources(progress)
-    if (sources.length === 0) return null
-
-    return <SourcesBlock sources={sources} />
-  }, [agentActivitySnapshots])
-
   const renderChangesList = (changes: ReturnType<typeof parseFileChangesFromProgress>, idPrefix: string) => {
+    const showAll = Boolean(showAllFileChanges[idPrefix])
+    const visibleChanges = showAll ? changes : changes.slice(0, 3)
     return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
-        {changes.map((change) => {
+      <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
@@ -1042,7 +1192,7 @@ export default function ChatPanel({
                         change.created && change.hunks.length > 0
                           ? change.hunks.map((h) => h.newText).filter(Boolean).join('\n')
                           : undefined
-                      setActiveArtifact({ path: change.path, content: fallbackContent })
+                    openArtifact({ path: change.path, content: fallbackContent })
                     }}
                     title="Open Live Preview Split View"
                   >
@@ -1083,13 +1233,24 @@ export default function ChatPanel({
             </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 ?? []
+    const progress = agentActivitySnapshots[interactionId] ?? interaction.agentActivity ?? EMPTY_AGENT_PROGRESS
     const changes = parseFileChangesFromProgress(progress)
     if (changes.length === 0) return null
 
@@ -1097,7 +1258,7 @@ export default function ChatPanel({
     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 = Boolean(openReviewIds[interactionId])
+    const isOpen = openReviewIds[interactionId] ?? true
 
     let summaryLabel = ''
     if (createdCount > 0 && modifiedCount === 0) {
@@ -1171,108 +1332,97 @@ export default function ChatPanel({
     }
 
     return (
-      <div className="file-changes-summary-container" style={{ marginBottom: '8px' }}>
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '8px' }}>
-          <button
-            type="button"
-            className="agent-activity-toggle file-changes-toggle"
-            aria-expanded={isOpen}
-            onClick={() => setOpenReviewIds((current) => ({ ...current, [interactionId]: !current[interactionId] }))}
-          >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: '2px' }}>
-              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
-              <polyline points="22 4 12 14.01 9 11.01" />
-            </svg>
-            <span>
-              {summaryLabel}
-              {createdCount > 0 && modifiedCount === 0 ? (
-                <span className="file-changes-count-add" style={{ marginLeft: '6px' }}>
-                  (+{totalAdditions} {totalAdditions === 1 ? 'line' : 'lines'})
+      <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>
-              ) : (
-                <>
-                  {totalAdditions > 0 && <span className="file-changes-count-add" style={{ marginLeft: '6px' }}>+{totalAdditions}</span>}
-                  {totalDeletions > 0 && <span className="file-changes-count-del" style={{ marginLeft: '4px' }}>-{totalDeletions}</span>}
-                </>
-              )}
-            </span>
-            <span aria-hidden="true">{isOpen ? '^' : '>'}</span>
-          </button>
-
-          <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.5" strokeLinecap="round" strokeLinejoin="round">
-              <polyline points="1 4 1 10 7 10" />
-              <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" />
-            </svg>
-            Rewind
-          </button>
-        </div>
-
-        {isOpen && (
-          <div className="agent-activity-card file-changes-card">
-            {renderChangesList(changes, interactionId)}
+              </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, openReviewIds, openFileDiffs, workspacePath])
+  }, [agentActivitySnapshots, getConversationChanges, openReviewIds, openFileDiffs, showAllFileChanges, workspacePath, onOpenArtifact, onOpenReview])
 
   const renderActiveFileChanges = () => {
-    const changes = parseFileChangesFromProgress(agentProgress)
+    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 = Boolean(openReviewIds['active-run'])
+    const isOpen = openReviewIds['active-run'] ?? true
 
     let summaryLabel = ''
     if (createdCount > 0 && modifiedCount === 0) {
-      summaryLabel = `${createdCount} ${createdCount === 1 ? 'file created' : 'files created'} in this run`
+      summaryLabel = `${createdCount} ${createdCount === 1 ? 'file created' : 'files created'}`
     } else if (createdCount > 0 && modifiedCount > 0) {
-      summaryLabel = `${createdCount} created, ${modifiedCount} modified in this run`
+      summaryLabel = `${createdCount} created, ${modifiedCount} modified`
     } else {
-      summaryLabel = `${changes.length} ${changes.length === 1 ? 'file changed' : 'files changed'} in this run`
+      summaryLabel = `${changes.length} ${changes.length === 1 ? 'file changed' : 'files changed'}`
     }
 
     return (
       <div className="message ai-message agent-activity-message" style={{ marginTop: '4px', marginBottom: '8px' }}>
         <div className="agent-activity-card file-changes-card">
-          <button
-            type="button"
-            className="agent-activity-toggle file-changes-toggle"
-            aria-expanded={isOpen}
-            onClick={() => setOpenReviewIds((current) => ({ ...current, 'active-run': !current['active-run'] }))}
-            style={{ border: 0, background: 'transparent', padding: 0 }}
-          >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: '2px' }}>
-              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
-              <polyline points="22 4 12 14.01 9 11.01" />
-            </svg>
-            <span>
-              {summaryLabel}
-              {createdCount > 0 && modifiedCount === 0 ? (
-                <span className="file-changes-count-add" style={{ marginLeft: '6px' }}>
-                  (+{totalAdditions} {totalAdditions === 1 ? 'line' : 'lines'})
+          <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>
-              ) : (
-                <>
-                  {totalAdditions > 0 && <span className="file-changes-count-add" style={{ marginLeft: '6px' }}>+{totalAdditions}</span>}
-                  {totalDeletions > 0 && <span className="file-changes-count-del" style={{ marginLeft: '4px' }}>-{totalDeletions}</span>}
-                </>
-              )}
-            </span>
-            <span aria-hidden="true">{isOpen ? '^' : '>'}</span>
-          </button>
+              </span>
+            </div>
+            <button
+              type="button"
+              className="file-changes-review-btn"
+              title="Review changed code"
+              onClick={() => {
+                openReview('All conversation changes', getConversationChanges())
+              }}
+            >
+              Review
+            </button>
+          </div>
 
           {isOpen && (
-            <div style={{ marginTop: '8px' }}>
+            <div className="file-changes-list-container" style={{ marginTop: '8px' }}>
               {renderChangesList(changes, 'active')}
             </div>
           )}
@@ -1281,6 +1431,111 @@ export default function ChatPanel({
     )
   }
 
+  const liveTurn = sending || pendingApproval ? (
+    <>
+      {sending && (
+        <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
+              progress={agentProgress}
+              id="live"
+              isOpen={openActivityIds['live'] ?? true}
+              onToggle={toggleActivity}
+              pendingApproval={!!pendingApproval}
+            />
+          )}
+          {renderActiveFileChanges()}
+          <div className="message ai-message thinking-message">
+            <div className="bubble-wrapper">
+              {!agentMode && liveExtendedThoughts.length > 0 && (
+                <ThinkingBlock
+                  blockKey="live-extended"
+                  thoughts={liveExtendedThoughts}
+                  isLive={true}
+                  variant="extended"
+                  expanded={thinkingExpanded['live-extended'] ?? true}
+                  onExpandedChange={onThinkingExpandedChange}
+                />
+              )}
+              {!agentMode && liveThoughts.length > 0 && liveExtendedThoughts.length === 0 && (
+                <ThinkingBlock
+                  blockKey="live"
+                  thoughts={liveThoughts}
+                  isLive={true}
+                  expanded={thinkingExpanded.live ?? true}
+                  onExpandedChange={onThinkingExpandedChange}
+                />
+              )}
+              <div className="message-bubble">
+                <McpToolResults progress={agentProgress} running />
+                <ViewedImages progress={agentProgress} />
+                <span>
+                  {compaction ? (
+                    <ContextCompactionStatus key={compaction.index} />
+                  ) : throttledStreamedReply ? (
+                    <FormattedMessage text={throttledStreamedReply} sources={liveWebSources} />
+                  ) : (
+                    <div className="thinking-status">
+                      <span className="thinking-status-label">
+                        <span aria-hidden="true">✦ </span>
+                        {activeAgentName && activeModelName
+                          ? `${activeAgentName} (${activeModelName}) is thinking...`
+                          : 'Thinking'}
+                      </span>
+                      <span className="thinking-status-meta">
+                        {` · ${elapsedSeconds}s · Esc to cancel`}
+                      </span>
+                    </div>
+                  )}
+                </span>
+              </div>
+              {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" />
+                    <span className="provider-chip-name">{streamedResponse.provider}</span>
+                    <span className="provider-chip-divider">/</span>
+                    <span className="provider-chip-model">{streamedResponse.model}</span>
+                  </span>
+                  {activeFallbackNotice && <span className="provider-fallback-notice">{activeFallbackNotice}</span>}
+                  {throttledStreamedReply && (
+                    <div className="message-action-buttons" style={{ display: 'flex', alignItems: 'center', gap: '4px', marginLeft: 'auto' }}>
+                      <button
+                        type="button"
+                        className={`msg-action-btn copy-btn ${copiedId === 'live' ? 'is-copied' : ''}`}
+                        onClick={() => handleCopyMessage('live', throttledStreamedReply)}
+                        title={copiedId === 'live' ? 'คัดลอกแล้ว (Copied!)' : 'คัดลอกข้อความ (Copy message)'}
+                      >
+                        {renderCopyIcon(copiedId === 'live')}
+                      </button>
+                      <button
+                        type="button"
+                        className={`msg-action-btn tts-btn ${speakingText === throttledStreamedReply ? 'is-speaking' : ''}`}
+                        onClick={() => speak(throttledStreamedReply)}
+                        title={speakingText === throttledStreamedReply ? 'Stop reading' : 'Read aloud'}
+                      >
+                        {renderSpeakerIcon(speakingText === throttledStreamedReply)}
+                      </button>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {pendingApproval && (
+        <ApprovalCard
+          key={pendingApproval.id || JSON.stringify(pendingApproval)}
+          pendingApproval={pendingApproval}
+          onApproval={onApproval}
+        />
+      )}
+    </>
+  ) : null
+
   const sectionContent = (
     <section
       className={`conversation-panel ${isEmptyChat ? 'is-empty' : ''}`}
@@ -1288,7 +1543,7 @@ export default function ChatPanel({
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
-      style={activeArtifact ? { 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}
+      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}
     >
         {isDragging && (
           <div
@@ -1317,7 +1572,7 @@ export default function ChatPanel({
               pointerEvents: 'auto',
             }}
           >
-            <div style={{ marginBottom: '16px', color: 'var(--accent)' }}>
+            <div style={{ marginBottom: '16px', color: 'var(--interactive-fg)' }}>
               <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                 <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
                 <circle cx="8.5" cy="8.5" r="1.5" />
@@ -1334,9 +1589,9 @@ export default function ChatPanel({
               className="mobile-menu-btn"
               type="button"
               onClick={onToggleMobileSidebar}
-              aria-label="Toggle menu"
+              aria-label="Open navigation menu"
             >
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                 <line x1="3" y1="12" x2="21" y2="12" />
                 <line x1="3" y1="6" x2="21" y2="6" />
                 <line x1="3" y1="18" x2="21" y2="18" />
@@ -1344,35 +1599,81 @@ export default function ChatPanel({
             </button>
           )}
           <div className="chat-header-title">
-            <img src={APP_ICON_PATH} alt="Logo" className="chat-header-logo" />
-            <span>Mint Agent</span>
+            {isCliSession ? (
+              <div className="chat-header-breadcrumb">
+                {onBackToCode && (
+                  <button
+                    type="button"
+                    className="chat-header-back-btn"
+                    onClick={onBackToCode}
+                    title="Back to Code sessions Hub"
+                  >
+                    <svg
+                      width="12"
+                      height="12"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2.5"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <path d="M15 18l-6-6 6-6" />
+                    </svg>
+                    <span>Code</span>
+                  </button>
+                )}
+                <span className="chat-header-sep">/</span>
+                <span className="chat-header-session-tag" title={cliSessionId || 'CLI Session'}>
+                  <span>
+                    {cliSessionId ? (cliSessionId === 'cli' ? 'cli' : `cli::${cliSessionId.replace(/^cli::/, '').slice(0, 7)}`) : 'cli'}
+                  </span>
+                </span>
+              </div>
+            ) : (
+              <div className="chat-header-brand-group">
+                <img src={runtimePlatform.appIconPath()} alt="Logo" className="chat-header-logo" />
+                <span
+                  className="chat-header-title-text"
+                  title={conversationTitle && conversationTitle.trim() && conversationTitle !== 'New chat' ? conversationTitle.trim() : 'Mint Agent'}
+                >
+                  {conversationTitle && conversationTitle.trim() && conversationTitle !== 'New chat' ? conversationTitle.trim() : 'Mint Agent'}
+                </span>
+                {projectName && (
+                  <span className="chat-header-project-pill" title={`Project: ${workspacePath}`}>
+                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+                      <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
+                    </svg>
+                    <span>{projectName}</span>
+                  </span>
+                )}
+              </div>
+            )}
           </div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <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
                 type="button"
-                className="chat-header-clear-btn"
+                className="chat-header-pill-btn"
                 title="Close Live Preview"
                 onClick={() => setActiveArtifact(null)}
-                style={{
-                  color: 'var(--accent)',
-                  background: 'color-mix(in srgb, var(--accent) 12%, transparent)',
-                  border: '1px solid color-mix(in srgb, var(--accent) 25%, transparent)',
-                  padding: '2px 8px',
-                  borderRadius: 'var(--radius-xs, 4px)',
-                  fontSize: '0.74rem',
-                  fontWeight: 600,
-                  cursor: 'pointer',
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  gap: '4px',
-                }}
               >
-                <span>Close Live Preview</span>
+                <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>
+                </svg>
+                <span>Close preview</span>
               </button>
             )}
-            <button className="chat-header-clear-btn" title="Clear Messages" onClick={onClearMessages}>
-              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+            <button
+              type="button"
+              className="chat-header-action-btn"
+              title="Clear conversation"
+              onClick={onClearMessages}
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                 <polyline points="3 6 5 6 21 6"></polyline>
                 <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                 <line x1="10" y1="11" x2="10" y2="17"></line>
@@ -1381,142 +1682,62 @@ export default function ChatPanel({
             </button>
           </div>
         </div>
-      <div className="chat-container" ref={chatContainerRef} onScroll={handleChatScroll}>
-        {interactions.map((interaction, index) => (
-          <Fragment key={interaction.id}>
-            {index > 0 && shouldShowSessionDivider(interactions[index - 1].createdAt, interaction.createdAt) && (
-              <div className="system-event-divider">
-                <div className="system-event-line" />
-                <div className="system-event-pill">
-                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                    <circle cx="12" cy="12" r="9" />
-                    <polyline points="12 7 12 12 15.5 14" />
-                  </svg>
-                  <span>{formatSessionDividerLabel(interaction.createdAt)}</span>
-                </div>
-                <div className="system-event-line" />
-              </div>
-            )}
-            <ChatMessageItem
-              interaction={interaction}
-              copiedId={copiedId}
-              onEditMessage={handleEditMessage}
-              speakingText={speakingText}
-              agentActivitySnapshots={agentActivitySnapshots}
-              thinkingExpanded={thinkingExpanded}
-              openActivityIds={openActivityIds}
-              openReviewIds={openReviewIds}
-              openFileDiffs={openFileDiffs}
-              onThinkingExpandedChange={onThinkingExpandedChange}
-              handleCopyMessage={handleCopyMessage}
-              speak={speak}
-              renderCompletedActivity={renderCompletedActivity}
-              renderFileChanges={renderFileChanges}
-              renderWebSearchSources={renderWebSearchSources}
-            />
-          </Fragment>
-        ))}
-
-        {sending && (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginBottom: '16px' }}>
-            <div className="message user-message"><div className="bubble-wrapper"><div className="message-bubble">{renderFormattedMessage([sendingMessage, sendingImageMarkers, sendingVideoMarkers].filter(Boolean).join(' '))}</div></div></div>
-            {agentMode && (
-              <AgentActivityDrawer
-                activityView={agentActivities}
-                isOpen={openActivityIds['live'] ?? true}
-                onToggle={() => setOpenActivityIds((current) => ({ ...current, live: !(current['live'] ?? true) }))}
-                pendingApproval={!!pendingApproval}
-                rawProgress={agentProgress}
-              />
-            )}
-            {renderActiveFileChanges()}
-            <div className="message ai-message thinking-message">
-              <div className="bubble-wrapper">
-                <ThinkingBlock
-                  blockKey="live"
-                  thoughts={thoughtsFrom(agentProgress)}
-                  isLive={true}
-                  expanded={thinkingExpanded.live ?? true}
-                  onExpandedChange={onThinkingExpandedChange}
-                  showEmptyHint={
-                    agentMode
-                    && hasAgentToolActivity(agentProgress)
-                    && thoughtsFrom(agentProgress).length === 0
-                    && !streamedReply
-                  }
-                />
-                <div className="message-bubble">
-                  <span>
-                    {streamedReply ? (
-                      renderFormattedMessage(streamedReply)
-                    ) : (
-                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: 'var(--text-soft, #94a3b8)' }}>
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" style={{ display: 'inline-block', flexShrink: 0 }}>
-                          <circle cx="12" cy="12" r="10" stroke="rgba(255, 255, 255, 0.12)" />
-                          <path d="M12 2a10 10 0 0 1 10 10" stroke="var(--accent)" strokeLinecap="round">
-                            <animateTransform
-                              attributeName="transform"
-                              type="rotate"
-                              from="0 12 12"
-                              to="360 12 12"
-                              dur="0.9s"
-                              repeatCount="indefinite"
-                            />
-                          </path>
-                        </svg>
-                         <span>
-                           {activeAgentName && activeModelName 
-                             ? `${activeAgentName} (${activeModelName}) is thinking... (${elapsedSeconds}s)`
-                             : `Thinking for ${elapsedSeconds}s (Esc to cancel)`
-                           }
-                         </span>
-                      </div>
-                    )}
-                  </span>
-                </div>
-                {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" />
-                      <span className="provider-chip-name">{streamedResponse.provider}</span>
-                      <span className="provider-chip-divider">/</span>
-                      <span className="provider-chip-model">{streamedResponse.model}</span>
-                    </span>
-                    {activeFallbackNotice && <span className="provider-fallback-notice">{activeFallbackNotice}</span>}
-                    {streamedReply && (
-                      <div className="message-action-buttons" style={{ display: 'flex', alignItems: 'center', gap: '4px', marginLeft: 'auto' }}>
-                        <button
-                          type="button"
-                          className={`msg-action-btn copy-btn ${copiedId === 'live' ? 'is-copied' : ''}`}
-                          onClick={() => handleCopyMessage('live', streamedReply)}
-                          title={copiedId === 'live' ? 'คัดลอกแล้ว (Copied!)' : 'คัดลอกข้อความ (Copy message)'}
-                        >
-                          {renderCopyIcon(copiedId === 'live')}
-                        </button>
-                        <button
-                          type="button"
-                          className={`msg-action-btn tts-btn ${speakingText === streamedReply ? 'is-speaking' : ''}`}
-                          onClick={() => speak(streamedReply)}
-                          title={speakingText === streamedReply ? 'Stop reading' : 'Read aloud'}
-                        >
-                          {renderSpeakerIcon(speakingText === streamedReply)}
-                        </button>
-                      </div>
-                    )}
+      <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,
+              border: '1px solid var(--border-color, #3a3a3a)', background: 'var(--surface, #252525)',
+              color: 'var(--text-secondary, #c0c0c0)', cursor: loadingOlder ? 'default' : 'pointer' }}
+            onClick={async () => {
+            setLoadingOlder(true)
+            try {
+              await onLoadOlder()
+            } finally { setLoadingOlder(false) }
+          }}>
+            {loadingOlder ? 'Loading earlier messages…' : 'Load earlier messages'}
+          </button>
+        )}
+        <VirtualChatHistory key={chatId} ref={virtualHistoryRef} items={visibleInteractions}
+          scrollRef={chatContainerRef} hasOlder={hasOlder}
+          renderRow={(index) => {
+            const interaction = visibleInteractions[index]
+            return (
+              <Fragment key={interaction.id}>
+                {index > 0 && shouldShowSessionDivider(visibleInteractions[index - 1].createdAt, interaction.createdAt) && (
+                  <div className="system-event-divider">
+                    <div className="system-event-line" />
+                    <div className="system-event-pill">
+                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <circle cx="12" cy="12" r="9" />
+                        <polyline points="12 7 12 12 15.5 14" />
+                      </svg>
+                      <span>{formatSessionDividerLabel(interaction.createdAt)}</span>
+                    </div>
+                    <div className="system-event-line" />
                   </div>
                 )}
-              </div>
-            </div>
-          </div>
-        )}
-
-        {pendingApproval && (
-          <ApprovalCard
-            key={pendingApproval.id || JSON.stringify(pendingApproval)}
-            pendingApproval={pendingApproval}
-            onApproval={onApproval}
-          />
-        )}
+                <ChatMessageItem
+                  interaction={interaction}
+                  copiedId={copiedId}
+                  onEditMessage={handleEditMessage}
+                  speakingText={speakingText}
+                  agentActivitySnapshots={agentActivitySnapshots}
+                  thinkingExpanded={thinkingExpanded}
+                  openActivityIds={openActivityIds}
+                  openReviewIds={openReviewIds}
+                  openFileDiffs={openFileDiffs}
+                  onThinkingExpandedChange={onThinkingExpandedChange}
+                  handleCopyMessage={handleCopyMessage}
+                  speak={speak}
+                  toggleActivity={toggleActivity}
+                  showAllFileChanges={showAllFileChanges}
+                  workspacePath={workspacePath}
+                  renderFileChanges={renderFileChanges}
+                />
+              </Fragment>
+            )
+          }}
+          tail={liveTurn} />
         {showScrollToBottom && (
           <button
             type="button"
@@ -1534,75 +1755,66 @@ export default function ChatPanel({
         <div ref={chatEnd} />
       </div>
 
-      <div className={`input-area ${voiceMode ? 'voice-active' : ''}`}>
-        {isEmptyChat && <div className="empty-chat-prompt">Mint Agent is ready to work</div>}
-        {onSelectWorkspace && (
-          <button type="button" className="workspace-select-btn" onClick={onSelectWorkspace}>
-            <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
-                <path d="M3 6h7l2 2h9v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"></path>
-              </svg>
+      <div className="input-area">
+        <ModsPanel workspacePath={workspacePath} chatId={chatId} panelTarget={tools?.modsPanelTarget} onOpen={tools?.onOpenMods ?? (() => {})} />
+        {composerChanges.length > 0 && (
+          <button
+            type="button"
+            className={`composer-change-status ${sending ? 'is-live' : ''}`}
+            onClick={() => openReview(composerChangeLabel, composerChanges)}
+            title="Review recent agent changes"
+          >
+            <span className="composer-change-status-copy">
+              {sending && <span className="composer-change-status-spinner" aria-hidden="true" />}
+              <span>{sending ? `Editing ${composerChanges.length} ${composerChanges.length === 1 ? 'file' : 'files'}…` : composerChangeLabel}</span>
+            </span>
+            <span className="composer-change-status-counts" aria-label={`${composerAdditions} additions and ${composerDeletions} deletions`}>
+              {composerAdditions > 0 && <strong>+{composerAdditions}</strong>}
+              {composerDeletions > 0 && <em>-{composerDeletions}</em>}
             </span>
-            <span>{workspaceName}</span>
-            <span aria-hidden="true">⌄</span>
           </button>
         )}
-        <div className="smart-context-bar">
-          <div className="smart-context-label" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-            <label className="toggle-switch">
-              <input type="checkbox" checked={smartContext} onChange={(event) => onSetSmartContext(event.target.checked)} />
-              <span className="slider round" />
-            </label>
-            <span>Smart Context (Auto-Screen)</span>
+        {isEmptyChat && (
+          <div className="empty-chat-prompt-wrap">
+            <div className="empty-chat-prompt">Mint Agent is ready to work</div>
+            {projectName && (
+              <div className="empty-chat-project-badge">
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
+                </svg>
+                <span>Working in <strong>{projectName}</strong></span>
+              </div>
+            )}
+          </div>
+        )}
+        {onSelectWorkspace && (
+          <div className="project-context-row">
+            <WorkspaceSelector
+              currentPath={workspacePath || ''}
+              recentPaths={recentWorkspacePaths}
+              onSelectWorkspace={onSelectWorkspace}
+            />
+            {workspacePath && <GitBranchSelector workspacePath={workspacePath} disabled={sending} onBranchChanged={onWorkspaceChanged} />}
           </div>
-          <div className="smart-context-label" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-            <label className="toggle-switch">
+        )}
+        <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" />
-            </label>
-            <span>Agent Mode</span>
-          </div>
+            </span>
+            <span className="smart-context-copy"><span className="smart-context-title">Agent mode</span></span>
+          </label>
           {onSetPlanMode && (
-            <div className="smart-context-label" style={{ display: 'flex', alignItems: 'center', gap: '8px' }} title="Investigate read-only and require plan approval before editing files or running commands">
-              <label className="toggle-switch">
+            <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" />
-              </label>
-              <span>Plan Mode</span>
-            </div>
+              </span>
+              <span className="smart-context-copy"><span className="smart-context-title">Plan mode</span></span>
+            </label>
           )}
         </div>
-        {voiceMode && (
-          <div className="voice-mode-bar" data-state={voiceStatus}>
-            <span className="voice-mode-dot" />
-            {voiceTranscript ? (
-              voiceTranscript === 'Listening to microphone...' ||
-              voiceTranscript === 'Listening...' ||
-              voiceTranscript === 'No speech detected' ||
-              voiceTranscript === 'Sent audio to AI' ? (
-                <span>{voiceTranscript}</span>
-              ) : (
-                <span style={{ display: 'flex', alignItems: 'center', gap: '4px', minWidth: 0, overflow: 'hidden' }}>
-                  <span>{voiceStatusLabel}:</span>
-                  <span className="voice-mode-transcript">"{voiceTranscript}"</span>
-                </span>
-              )
-            ) : (
-              <span>{voiceStatusLabel}</span>
-            )}
-          </div>
-        )}
-
-        <SlashSuggestions
-          ref={slashRef}
-          message={message}
-          onComplete={completeSuggestion}
-          workspacePath={workspacePath}
-          mcpServers={settingsConfig?.mcpServers}
-          anchorRef={textareaRef}
-          suppressed={historyIndex !== null}
-        />
-
         <form
           id="chat-form"
           className={geminiLiveEnabled ? 'has-live-btn' : ''}
@@ -1623,6 +1835,14 @@ export default function ChatPanel({
             if (onPasteImage(event.clipboardData)) event.preventDefault()
           }}
         >
+          {slashChoice && (
+            <SlashChoicePanel
+              choice={slashChoice}
+              inputRef={textareaRef}
+              onSelect={onSelectSlashChoice}
+              onDismiss={onDismissSlashChoice}
+            />
+          )}
           {(imageAttachments.length > 0 || videoAttachments.length > 0 || documentName) && (
             <div className="mint-attachment">
               {imageAttachments.map((attachment, idx) => (
@@ -1694,10 +1914,15 @@ export default function ChatPanel({
               History {historyIndex + 1}/{promptHistory.length}
             </div>
           )}
-          <textarea
+          <CollapsiblePasteInput
             id="chat-input"
-            ref={textareaRef}
+            inputRef={textareaRef}
             value={message}
+            onValueChange={(value) => {
+              onSetMessage(value)
+              if (historyIndex !== null) setHistoryIndex(null)
+            }}
+            onResizeInput={resizeInput}
             onChange={(event) => {
               resizeInput(event.currentTarget)
               onSetMessage(event.target.value)
@@ -1709,6 +1934,15 @@ export default function ChatPanel({
             placeholder="Ask anything, @ to mention, / for actions"
             rows={1}
           />
+          <SlashSuggestions
+            ref={slashRef}
+            message={message}
+            onComplete={completeSuggestion}
+            workspacePath={workspacePath}
+            mcpServers={settingsConfig?.mcpServers}
+            anchorRef={textareaRef}
+            suppressed={historyIndex !== null || Boolean(slashChoice)}
+          />
           <div className="chat-tool-menu-wrap" ref={toolMenuRef}>
               <button id="chat-tool-btn" type="button" aria-haspopup="menu" aria-expanded={toolMenuOpen} onClick={() => setToolMenuOpen((open) => !open)} style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
@@ -1779,7 +2013,10 @@ export default function ChatPanel({
           <input id="video-file-input" type="file" accept="video/mp4,video/webm,video/quicktime,video/x-matroska" onChange={onSelectVideo} style={{ display: 'none' }} />
           <input id="document-file-input" type="file" accept={SUPPORTED_DOCUMENT_ACCEPT} onChange={onSelectDocument} style={{ display: 'none' }} />
           <button id="screen-capture-btn" type="button" onClick={onCaptureScreen} aria-label="Capture screen">
-            <span className="screen-capture-eye" aria-hidden="true" />
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <rect x="2" y="3" width="20" height="15" rx="2" />
+              <path d="M8 22h8M12 18v4M7 10h10M12 5v10" />
+            </svg>
           </button>
           <ModelSelectorPopover
             activeProvider={status?.activeProvider ?? ''}
@@ -1795,28 +2032,45 @@ export default function ChatPanel({
                 onSetModel(model)
               }
             }}
+            onUpdateSettings={onUpdateSettings}
+          />
+          <VoicePill
+            id="voice-input-btn"
+            className="composer-voice-pill"
+            active={isRecording}
+            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"
+            size={28}
+            shape="pill"
+            reach={8}
+            mode="auto"
+            holdAfter={300}
+            reactive="simulated"
+            showTime
+            waveform
+            slideToCancel
+            cancelDistance={64}
+            attack={40}
+            release={240}
+            openDuration={200}
+            pressScale={0.95}
+            onStart={() => {
+              cancelSpeech()
+              return startRecognition()
+            }}
+            onStop={({ reason }) => {
+              cancelSpeech()
+              if (reason === 'release' || reason === 'tap' || reason === 'key') {
+                void stopRecognition()
+              } else {
+                void cancelRecognition()
+              }
+            }}
           />
-          <button
-            id="mic-btn"
-            className={`${isRecording ? 'is-recording' : ''} ${voiceMode ? 'voice-mode-active' : ''}`}
-            type="button"
-            onClick={toggleRecording}
-            title={voiceMode ? 'Disable voice conversation' : 'Enable voice conversation'}
-            style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}
-          >
-            {isRecording ? (
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect>
-              </svg>
-            ) : (
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
-                <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
-                <line x1="12" y1="19" x2="12" y2="23"></line>
-                <line x1="8" y1="23" x2="16" y2="23"></line>
-              </svg>
-            )}
-          </button>
           {geminiLiveEnabled && (
             <button
               id="gemini-live-btn"
@@ -1856,6 +2110,9 @@ export default function ChatPanel({
             </button>
           )}
         </form>
+        {voiceMode && !isRecording && voiceTranscript && (
+          <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.
@@ -1863,7 +2120,11 @@ export default function ChatPanel({
       {geminiLive.voiceMode && (
         <GeminiLiveOverlay
           status={
-            geminiLive.isPaused
+            geminiLive.errorMessage
+              ? 'error'
+              : !geminiLive.isRecording
+              ? 'connecting'
+              : geminiLive.isPaused
               ? 'paused'
               : geminiLive.isSpeaking
               ? 'speaking'
@@ -1874,6 +2135,7 @@ export default function ChatPanel({
           userTranscript={geminiLive.userTranscript}
           assistantTranscript={geminiLive.assistantTranscript}
           isPaused={geminiLive.isPaused}
+          analyserRef={geminiLive.analyserRef}
           onTogglePause={geminiLive.togglePause}
           onEndCall={() => geminiLive.setVoiceMode(false)}
           voice={settingsConfig?.geminiLiveVoice || 'Puck'}
@@ -1941,19 +2203,13 @@ export default function ChatPanel({
   return (
     <div
       ref={wrapperRef}
-      className={`chat-panel-split-wrapper ${activeArtifact ? 'has-preview' : 'no-preview'}`}
+      className={`chat-panel-split-wrapper ${activeArtifact || reviewPage ? 'has-preview' : 'no-preview'}`}
       style={{
-        width: '100%',
-        height: '100%',
-        overflow: 'hidden',
-        position: 'relative',
-        gridColumn: '1 / -1',
-        zIndex: 1,
         '--preview-width': `${(splitRatio * 100).toFixed(2)}%`,
       } as React.CSSProperties}
     >
       {sectionContent}
-      {activeArtifact && (
+      {(activeArtifact || reviewPage) && (
         <>
           <div
             className="preview-split-resizer"
@@ -1963,11 +2219,16 @@ export default function ChatPanel({
           >
             <div className="preview-split-resizer-grip" />
           </div>
-          <ArtifactPreviewPanel
-            artifact={activeArtifact}
-            onClose={() => setActiveArtifact(null)}
-            workspacePath={workspacePath}
-          />
+          {reviewPage ? (
+            <CodeReviewPage
+              title={reviewPage.title}
+              changes={reviewPage.changes}
+              workspacePath={workspacePath}
+              onBack={() => setReviewPage(null)}
+            />
+          ) : activeArtifact ? (
+            <ArtifactPreviewPanel artifact={activeArtifact} onClose={() => setActiveArtifact(null)} workspacePath={workspacePath} />
+          ) : null}
         </>
       )}
       {rewindModalState.isOpen && (