@pheem49/mint 1.14.0 → 1.16.0

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

@@ -1,41 +1,35 @@
-import { type ChangeEvent, type CSSProperties, type FormEvent, useEffect, useRef, useState } from 'react'
-import { mergeActivitySnapshots, trimAgentProgress } from '../agentProgress'
+import { createWorkspacePreview } from '../utils/workspacePreview'
+import { shouldNotify } from '../utils/notificationSettings'
+import { deliverNotification, receiveProactiveNotification } from '../utils/notifications'
+import '../css/notification-notice.css'
+import { lazy, Suspense, type ChangeEvent, type CSSProperties, type FormEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
-  clearChatHistory,
-  deleteChatSession,
-  renameChatSession,
-  getRecentInteractions,
-  saveSystemInteraction,
-  getRuntimeStatus,
-  setActiveModel,
-  listChatSessions,
-  listSavedPictures,
-  selectWorkspaceDirectory,
-  selectLinkedFolderPath,
-  saveInteractionAgentActivity,
-  streamChatMessage,
-  cancelChatMessage,
-  submitToolApproval,
-  listen,
-  readClipboardImage,
-  isTauriRuntime,
-  type AgentProgress,
-  type ChatResponse,
-  type ChatSession,
-  type DocumentAttachment,
-  type PictureEntry,
-  type RuntimeStatus,
-} from '@/tauri'
-
-import ChatPanel from './ChatPanel'
+  mergeFileChanges,
+  parseFileChangesFromProgress,
+} from '../agentProgress'
+import { catalogPlatform, conversationPlatform, mediaPlatform, runtimePlatform, workspacePlatform, type SlashResponse } from '../platform'
+import type { ChatSession, DocumentAttachment, RuntimeStatus } from '../types'
+
+const {
+  clearChatHistory, deleteChatSession, renameChatSession,
+  saveSystemInteraction, updateChatSessionWorkspace,
+  listen, readClipboardImage,
+} = conversationPlatform
+const { getRuntimeStatus, setActiveModel, selectWorkspaceDirectory, selectLinkedFolderPath, isTauriRuntime } = runtimePlatform
+const { convertFileSrc } = mediaPlatform
+const {
+  listLearnedSkills, addLearnedSkill, deleteLearnedSkill, detectSystemTools, reauthMcpServer,
+  listMcpServerTools, setProfileValue, listCronJobs, addCronJob, removeCronJob,
+  setCronJobEnabled, listLinkedFolders, addLinkedFolder, removeLinkedFolder, runSlashCommand,
+  linkedFolderStatus, refreshLinkedFolder, listLinkedFolderNotes, readLinkedFolderNote, openLinkedFolderNote,
+} = catalogPlatform
+
+import ChatPanel, { type ConversationActions, type ConversationViewModel } from './ChatPanel'
+import ScreenCaptureDialog from './ScreenCaptureDialog'
 import DashboardSidebar, { type DashboardView } from './DashboardSidebar'
-import ImageStudioPanel from './ImageStudioPanel'
-import VeoStudioPanel from './VeoStudioPanel'
-import ModelPanel from '@/components/ModelPanel'
-import type { ModelInteraction } from '@/components/ModelPanel'
-import PicturesLibrary from '@/components/PicturesLibrary'
-import WorkspacePanel from '@/components/WorkspacePanel'
-import { CommandPalette } from './CommandPalette'
+import DesktopTitlebar from './DesktopTitlebar'
+import ErrorNotice from './ErrorNotice'
+import type { ToolSurface } from './ToolSurfacePage'
 import {
   errorMessage,
   readImage,
@@ -45,32 +39,37 @@ import {
   applyThemeStyles,
   parseUtcDate,
 } from '../utils/ui'
+import { workspacePaths } from '../utils/workspaces'
 import { executeSlashCommand } from '../utils/slashCommandProcessor'
+import { captureScreenForChat } from '../utils/screenCapture'
+import { useConversationCoordinator } from '../conversation/useConversationCoordinator'
+import { isPersistedConversation } from '../conversation/projectNavigation'
+import type { PromptOptions } from '../conversation/lifecycle'
 
 
-const EXPRESSIONS = [
-  "Default",
-  "Dumb Cat",
-  "Dumb Cat Eye Roll",
-  "Take Photo",
-  "Poke",
-  "Cat Filter",
-]
 
-const ACCESSORIES = [
-  "None",
-  "Apron",
-  "Glasses",
-  "Hold Pen",
-]
-
-import { DEFAULT_CONFIG } from '../constants/config'
+import { DEFAULT_CONFIG, migrateFontFamily, migrateTypographyScale } from '../constants/config'
+import { BackgroundTerminals } from './BackgroundTerminals'
 
 const LAST_WORKSPACE_PATH_KEY = 'mint:last-workspace-path'
+const RECENT_WORKSPACE_PATHS_KEY = 'mint:recent-workspace-paths'
+const MAX_RECENT_WORKSPACES = 8
 const ACTIVE_CONVERSATION_ID_KEY = 'mint:active-conversation-id'
 const LAST_ACTIVE_TIME_KEY = 'mint:last-active-timestamp'
 const DESKTOP_INACTIVITY_THRESHOLD_MS = 30 * 60 * 1000 // 30 minutes
 
+function readRecentWorkspacePaths(): string[] {
+  if (typeof window === 'undefined') return []
+  try {
+    const parsed: unknown = JSON.parse(window.localStorage.getItem(RECENT_WORKSPACE_PATHS_KEY) || '[]')
+    return Array.isArray(parsed)
+      ? [...new Set(parsed.filter((path): path is string => typeof path === 'string' && Boolean(path.trim())))].slice(0, MAX_RECENT_WORKSPACES)
+      : []
+  } catch {
+    return []
+  }
+}
+
 function touchActiveTimestamp() {
   if (typeof window === 'undefined') return
   try {
@@ -103,25 +102,14 @@ function isDesktopRecentlyActive(): boolean {
 // Unsent composer text, stashed per conversation so switching chats or
 // reloading the page doesn't lose an in-progress message.
 const DRAFT_KEY_PREFIX = 'mint:draft:'
-const draftStorageKey = (id: string) => `${DRAFT_KEY_PREFIX}${id}`
 function readDraft(id: string | null | undefined): string {
   if (!id) return ''
   try {
-    return window.localStorage.getItem(draftStorageKey(id)) || ''
+    return window.localStorage.getItem(`${DRAFT_KEY_PREFIX}${id}`) || ''
   } catch {
     return ''
   }
 }
-function writeDraft(id: string | null | undefined, value: string) {
-  if (!id) return
-  try {
-    if (value) window.localStorage.setItem(draftStorageKey(id), value)
-    else window.localStorage.removeItem(draftStorageKey(id))
-  } catch {
-    /* private mode / quota — draft persistence is best-effort */
-  }
-}
-
 const SIDEBAR_DEFAULT_WIDTH = 264
 const SIDEBAR_MIN_WIDTH = 200
 const SIDEBAR_MAX_WIDTH = 420
@@ -172,6 +160,10 @@ function isRootOrNewChatRoute(): boolean {
     target.includes('imagine') ||
     target.includes('veo-studio') ||
     target.includes('veo') ||
+    target.includes('code') ||
+    target === '/cli' ||
+    target === 'cli' ||
+    target.includes('cli-sessions') ||
     target.includes('settings')
   ) {
     return false
@@ -200,7 +192,7 @@ function activeConversationId() {
     }
   }
 
-  // When visiting Root URL ('/' or '/chat' without specific ID), always start a fresh New Chat
+  // When visiting Root URL ('/' or '/chat' without specific ID), always start a fresh New chat
   // (matching ChatGPT / Claude / Gemini industry-standard UX).
   // Applies to Web UI always, and Desktop App upon cold launch / inactivity / new day.
   if (isRootOrNewChatRoute()) {
@@ -234,31 +226,25 @@ const MOCK_WELCOME_INTERACTION = {
 }
 
 
-import SkillsView from './SkillsView'
-import ScheduledTasksView from './ScheduledTasksView'
-import LinkedFoldersView from './LinkedFoldersView'
-import McpServersView from './McpServersView'
-import PluginsView from './PluginsView'
 import { isSupportedDocument } from '../utils/documentTypes'
-import { useCompanionWidget } from '@/companionWidget'
-import {
-  listLearnedSkills,
-  addLearnedSkill,
-  deleteLearnedSkill,
-  detectSystemTools,
-  reauthMcpServer,
-  listMcpServerTools,
-  setProfileValue,
-  listCronJobs,
-  addCronJob,
-  removeCronJob,
-  setCronJobEnabled,
-  listLinkedFolders,
-  addLinkedFolder,
-  removeLinkedFolder,
-  runSlashCommand,
-} from '@/tauri'
-import type { SlashResponse } from '../platform'
+import { useProactiveSuggestions } from '@/proactiveSuggestions'
+
+const WorkspacePanel = lazy(() => import('@/components/WorkspacePanel'))
+const ToolSurfacePage = lazy(() => import('./ToolSurfacePage'))
+const SkillsView = lazy(() => import('./SkillsView'))
+const ScheduledTasksView = lazy(() => import('./ScheduledTasksView'))
+const LinkedFoldersView = lazy(() => import('./LinkedFoldersView'))
+const McpServersView = lazy(() => import('./McpServersView'))
+const PluginsView = lazy(() => import('./PluginsView'))
+const CliSessionsView = lazy(() => import('./CliSessionsView'))
+const LibraryPage = lazy(() => import('./LibraryPage'))
+const ImageStudioPanel = lazy(() => import('./ImageStudioPanel'))
+const VeoStudioPanel = lazy(() => import('./VeoStudioPanel'))
+const CommandPalette = lazy(() => import('./CommandPalette').then(({ CommandPalette: Component }) => ({ default: Component })))
+
+function LazyPanelFallback() {
+  return <div className="auth-gate-loading" style={{ minHeight: 160 }}>Loading panel…</div>
+}
 
 function getInitialViewFromUrl(): DashboardView {
   if (typeof window === 'undefined') return 'chat'
@@ -269,9 +255,10 @@ function getInitialViewFromUrl(): DashboardView {
   if (target.includes('skills')) return 'skills'
   if (target.includes('mcp')) return 'mcp'
   if (target.includes('plugins')) return 'plugins'
-  if (target.includes('picture')) return 'pictures'
+  if (target.includes('picture') || target.includes('library')) return 'pictures'
   if (target.includes('image-studio') || target.includes('imagine')) return 'imagine'
   if (target.includes('veo-studio') || target.includes('veo')) return 'veo'
+  if (target.includes('code') || target === '/cli' || target === 'cli' || target.includes('cli-sessions')) return 'code'
   return 'chat'
 }
 
@@ -279,9 +266,10 @@ function getCleanPathForView(v: string, activeId?: string): string {
   if (v === 'skills') return '/skills'
   if (v === 'mcp') return '/mcp'
   if (v === 'plugins') return '/plugins'
-  if (v === 'pictures') return '/pictures'
+  if (v === 'pictures') return '/library'
   if (v === 'imagine') return '/image-studio'
   if (v === 'veo' || v === 'veo_studio') return '/veo-studio'
+  if (v === 'code') return '/code'
   if (v === 'settings') return '/settings'
   if (activeId) return `/chat/${encodeURIComponent(activeId)}`
   return '/chat'
@@ -317,27 +305,93 @@ function describeApproval(payload: any): string {
   }
 }
 
-/** Fires the same notification mechanism as a finished AI reply, but only
- * while the window is unfocused — reused so both surfaces get identical
- * title/permission/dedupe behavior, just a different body string. */
-function notifyPendingApproval(payload: any) {
-  if (document.hidden || !document.hasFocus()) {
-    window.api?.notifyAiResponse?.(truncateForNotification(describeApproval(payload)))
-  }
-}
-
 export default function MintDashboard() {
   const isDesktopApp = isTauriRuntime()
   const [view, setViewState] = useState<DashboardView>(getInitialViewFromUrl)
-  const [conversationId, setConversationId] = useState(activeConversationId)
+  const [initialConversationId] = useState(activeConversationId)
   // Declared here (not further down with the rest of the workspace-related
-  // state) so the URL-change effect below can read it — that effect closes
-  // over `workspacePath` to scope its own `getRecentInteractions` call.
-  const [workspacePath, setWorkspacePath] = useState(() => window.localStorage.getItem(LAST_WORKSPACE_PATH_KEY) || '')
+  // state) so the URL-change effect below can read it.
+  const { conversation, actions: conversationActions } = useConversationCoordinator(
+    {
+      workspacePath: window.localStorage.getItem(LAST_WORKSPACE_PATH_KEY) || '',
+      message: readDraft(initialConversationId),
+    },
+    {
+      conversationId: initialConversationId,
+      draftKeyPrefix: DRAFT_KEY_PREFIX,
+      workspaceStorageKey: LAST_WORKSPACE_PATH_KEY,
+      historyVisible: view === 'chat',
+      onError: reason => setError(errorMessage(reason)),
+      onApproval: (payload, chatId) => notifyPendingApproval(payload, chatId),
+      onReply: (response, chatId) => {
+        if (document.hidden || !document.hasFocus()) return sendNotification(response.text || 'Mint finished your request.', chatId)
+      },
+      onActivityPersisted: id => {
+        const key = String(id)
+        setThinkingExpanded(current => ({ ...current,
+          ...(liveThinkingOpenRef.current ? { [key]: true } : {}),
+          ...(liveExtendedThinkingOpenRef.current ? { [`extended-${key}`]: true } : {}),
+        }))
+      },
+      onRunCompleted: async () => {
+        getRuntimeStatus().then(setStatus).catch(() => {})
+      },
+      onVisibleRunCompleted: chatId => {
+        const pathname = (window.location.pathname || '').replace(/\/+$/, '')
+        const hash = (window.location.hash || '').replace(/^#\/?/, '').replace(/\/+$/, '')
+        const target = (pathname || hash).toLowerCase()
+        if (!target || target === '/chat' || target === 'chat' || target === '/index.html' || target === 'index.html') {
+          window.history.replaceState({}, '', `/chat/${encodeURIComponent(chatId)}`)
+        }
+      },
+    },
+  )
+  const {
+    conversationId, workspacePath, message, imageAttachments, videoAttachments, documentAttachment,
+    sending, sendingMessage, sendingImageCount, sendingVideoCount, streamedReply,
+    streamedResponse, agentProgress, interactions, hasOlderInteractions,
+    streamingConversationId, activeTurnId, agentActivitySnapshots, pendingApprovals,
+    sessionAutoApproved, chatSessions,
+  } = conversation
+  const activateConversation = (id: string) => {
+    conversationActions.activate(id)
+  }
   // Web only in practice (desktop's window has no mobile-width breakpoint,
   // so nothing ever sets this true there) — declared unconditionally so
   // `changeView` can close it on every navigation without branching.
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false)
+  const [screenCaptureOpen, setScreenCaptureOpen] = useState(false)
+
+  useEffect(() => {
+    if (!mobileSidebarOpen) return
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setMobileSidebarOpen(false)
+    }
+    window.addEventListener('keydown', closeOnEscape)
+    return () => window.removeEventListener('keydown', closeOnEscape)
+  }, [mobileSidebarOpen])
+  const [workspaceRefreshRevision, setWorkspaceRefreshRevision] = useState(0)
+  const [recentWorkspacePaths, setRecentWorkspacePaths] = useState<string[]>(readRecentWorkspacePaths)
+
+  function rememberWorkspace(path: string) {
+    const recent = workspacePaths([path, ...readRecentWorkspacePaths()]).slice(0, MAX_RECENT_WORKSPACES)
+    try {
+      window.localStorage.setItem(RECENT_WORKSPACE_PATHS_KEY, JSON.stringify(recent))
+    } catch {
+      /* Keep the in-memory recent list usable when storage is unavailable. */
+    }
+    setRecentWorkspacePaths(recent)
+  }
+
+  useEffect(() => {
+    if (workspacePath.trim()) rememberWorkspace(workspacePath)
+  }, [workspacePath])
+
+  async function selectCodeHubFolder() {
+    const selected = await selectLinkedFolderPath()
+    if (selected) rememberWorkspace(selected)
+    return selected
+  }
 
   const changeView = (newView: any, targetConversationId?: string) => {
     setMobileSidebarOpen(false)
@@ -353,7 +407,10 @@ export default function MintDashboard() {
         }
         return prev
       }
-      const mappedView: DashboardView = (next === 'veo_studio' ? 'veo' : next) as DashboardView
+      const requestedView: DashboardView = (next === 'veo_studio' ? 'veo' : next) as DashboardView
+      // The Web app can select a project for chat context, but its local file
+      // browser is Desktop-only. Keep any Workspace navigation on Web in chat.
+      const mappedView: DashboardView = !isDesktopApp && requestedView === 'workspace' ? 'chat' : requestedView
       const targetPath = getCleanPathForView(mappedView, targetConversationId || conversationId)
       if (typeof window !== 'undefined' && window.location.pathname !== targetPath) {
         window.history.pushState({}, '', targetPath)
@@ -376,23 +433,13 @@ export default function MintDashboard() {
       const urlSessionId = getConversationIdFromUrl()
       if (urlSessionId && urlSessionId !== conversationId) {
         window.localStorage.setItem(ACTIVE_CONVERSATION_ID_KEY, urlSessionId)
-        setConversationId(urlSessionId)
-        getRecentInteractions(50, urlSessionId, workspacePath || null).then((history) => {
-          const reversed = history.reverse()
-          setInteractions(reversed)
-          setAgentActivitySnapshots((current) => mergeActivitySnapshots(current, reversed))
+        activateConversation(urlSessionId)
+        conversationActions.refreshHistory().catch((error) => {
+          console.error('Failed to load conversation history:', error)
         })
       } else if (!urlSessionId && isRootOrNewChatRoute()) {
         const next = createConversationId()
-        setConversationId(next)
-        setInteractions([])
-        setAgentActivitySnapshots({})
-        setStreamedReply('')
-        setStreamedResponse(null)
-        setMessage('')
-        setImageAttachments([])
-        setDocumentAttachment(null)
-        setAgentProgress([])
+        activateConversation(next)
       }
     }
     window.addEventListener('popstate', handleUrlChange)
@@ -417,69 +464,99 @@ export default function MintDashboard() {
   }, [])
   const [status, setStatus] = useState<RuntimeStatus | null>(null)
   const [error, setError] = useState('')
-  const [message, setMessage] = useState(() => readDraft(conversationId))
-  // When `conversationId` changes we swap `message` to that chat's saved draft;
-  // this ref tells the persist effect to skip the render right after that swap,
-  // so the outgoing chat's text is never written under the incoming chat's key.
-  const skipDraftPersistRef = useRef(false)
-  const [interactions, setInteractions] = useState<any[]>([])
-  const [pictures, setPictures] = useState<PictureEntry[]>([])
-  const [sending, setSending] = useState(false)
-  const [sendingMessage, setSendingMessage] = useState('')
-  const [sendingImageCount, setSendingImageCount] = useState(0)
-  const [sendingVideoCount, setSendingVideoCount] = useState(0)
-  const [streamedReply, setStreamedReply] = useState('')
-  const [streamedResponse, setStreamedResponse] = useState<ChatResponse | null>(null)
-  const [streamingConversationId, setStreamingConversationId] = useState<string | null>(null)
-  const [agentProgress, setAgentProgress] = useState<AgentProgress[]>([])
-  const [agentActivitySnapshots, setAgentActivitySnapshots] = useState<Record<string, AgentProgress[]>>({})
+  const [notificationNotice, setNotificationNotice] = useState<{ message: string; chatId?: string; type?: string } | null>(null)
+  const notificationNavigationRef = useRef(selectConversation)
+  notificationNavigationRef.current = selectConversation
+  const sendNotification = (body: string, chatId?: string, kind: 'replies' | 'approvals' | 'system' = 'replies') => deliverNotification(
+    () => shouldNotify(notificationConfigRef.current?.notificationSettings, kind, 'os')
+      ? window.api?.notifyAiResponse?.(truncateForNotification(body), chatId) : undefined,
+    setError,
+  )
+  const notifyPendingApproval = (payload: any, chatId?: string) => {
+    if (document.hidden || !document.hasFocus()) {
+      void sendNotification(describeApproval(payload), chatId ?? payload.chatId, 'approvals')
+    }
+  }
+  useEffect(() => {
+    let disposed = false
+    const cleanups: Array<() => void> = []
+    const register = (subscription: Promise<any> | undefined) => {
+      subscription?.then(unlisten => {
+        if (typeof unlisten !== 'function') return
+        if (disposed) unlisten()
+        else cleanups.push(unlisten)
+      }).catch(reason => { if (!disposed) setError(errorMessage(reason)) })
+    }
+    const openChat = (chatId?: string) => {
+      if (chatId) void notificationNavigationRef.current(chatId).catch(reason => setError(errorMessage(reason)))
+    }
+    const clicked = (event: Event) => openChat((event as CustomEvent).detail?.chatId)
+    window.addEventListener('mint:notification-click', clicked)
+    register(listen('notification-clicked', (event: { payload: { chatId?: string } }) => openChat(event.payload?.chatId)))
+    register(Promise.resolve(window.api?.onProactiveNotification?.((payload: any) => {
+      if (disposed) return
+      void receiveProactiveNotification(payload, document.hidden || !document.hasFocus(),
+        notice => { if (shouldNotify(notificationConfigRef.current?.notificationSettings, 'system', 'inApp')) setNotificationNotice(notice) },
+        (body, chatId) => sendNotification(body, chatId, 'system'))
+        .catch(reason => setError(errorMessage(reason)))
+    })))
+    const visible = () => { if (!document.hidden) window.api?.clearAiNotifications?.() }
+    document.addEventListener('visibilitychange', visible)
+    return () => {
+      disposed = true
+      cleanups.forEach(unlisten => unlisten())
+      window.removeEventListener('mint:notification-click', clicked)
+      document.removeEventListener('visibilitychange', visible)
+    }
+  }, [])
+
   const [thinkingExpanded, setThinkingExpanded] = useState<Record<string, boolean>>({})
   const liveThinkingOpenRef = useRef(true)
-  const [imageAttachments, setImageAttachments] = useState<Array<{ dataUri: string; name: string; previewDataUri?: string }>>([])
-  const [videoAttachments, setVideoAttachments] = useState<Array<{ dataUri: string; name: string }>>([])
-  const [documentAttachment, setDocumentAttachment] = useState<DocumentAttachment | null>(null)
-  const [pendingApproval, setPendingApproval] = useState<any | null>(null)
-  const [sessionAutoApproved, setSessionAutoApproved] = useState(false)
-  const sessionAutoApprovedRef = useRef(false)
+  const liveExtendedThinkingOpenRef = useRef(true)
   const [sidebarCollapsed, setSidebarCollapsed] = useState(() => window.localStorage.getItem('mint:sidebar-collapsed') === 'true')
+  const [toolSurfaces, setToolSurfaces] = useState<ToolSurface[]>([])
+  const [activeSurfaceId, setActiveSurfaceId] = useState<string | null>(null)
+  const [toolsPanelOpen, setToolsPanelOpen] = useState(false)
+  const [modsPanelTarget, setModsPanelTarget] = useState<HTMLDivElement | null>(null)
+  const [backgroundPanelTarget, setBackgroundPanelTarget] = useState<HTMLDivElement | null>(null)
+  const [backgroundTaskCount, setBackgroundTaskCount] = useState(0)
+  const [terminalRightWidth, setTerminalRightWidth] = useState(() => {
+    const saved = Number(window.localStorage.getItem('mint:terminal-right-width'))
+    return saved >= 280 && saved <= 900 ? saved : 440
+  })
+  const terminalSaveTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const [sidebarWidth, setSidebarWidth] = useState(() => {
     const saved = Number(window.localStorage.getItem('mint:sidebar-width'))
     return saved >= SIDEBAR_MIN_WIDTH && saved <= SIDEBAR_MAX_WIDTH ? saved : SIDEBAR_DEFAULT_WIDTH
   })
-  const [smartContext, setSmartContext] = useState(() => window.localStorage.getItem('mint:smart-context') !== 'false')
+  const recentAgentChanges = parseFileChangesFromProgress(agentProgress)
+  const conversationReviewChanges = mergeFileChanges([
+    ...interactions.map((interaction) => {
+      const interactionId = String(interaction.id)
+      return parseFileChangesFromProgress(agentActivitySnapshots[interactionId] ?? interaction.agentActivity ?? [])
+    }),
+    parseFileChangesFromProgress(agentProgress),
+  ])
+
   const [agentMode, setAgentMode] = useState(() => window.localStorage.getItem('mint:agent-mode') === 'true')
   const [planMode, setPlanMode] = useState(() => window.localStorage.getItem('mint:plan-mode') === 'true')
   const [toastMessage, setToastMessage] = useState('')
   const [dashboardDataReady, setDashboardDataReady] = useState(false)
   const [startupTimedOut, setStartupTimedOut] = useState(false)
   const [settingsConfig, setSettingsConfig] = useState<any>(null)
-  const [chatSessions, setChatSessions] = useState<ChatSession[]>([])
+  const notificationConfigRef = useRef(settingsConfig)
+  notificationConfigRef.current = settingsConfig
+  useEffect(() => {
+    if (!shouldNotify(settingsConfig?.notificationSettings, 'system', 'inApp')) setNotificationNotice(null)
+    if (settingsConfig?.notificationSettings?.enabled === false || settingsConfig?.notificationSettings?.os === false) window.api?.clearAiNotifications?.()
+  }, [settingsConfig])
+  const availableWorkspacePaths = useMemo(() => workspacePaths(
+    recentWorkspacePaths, workspacePath, chatSessions.map(session => session.workspacePath),
+  ), [recentWorkspacePaths, workspacePath, chatSessions])
   const chatEnd = useRef<HTMLDivElement | null>(null)
   const lastNativePasteTimeRef = useRef(0)
-  const {
-    modelVisible,
-    scale,
-    interactionEnabled,
-    showInteractionGuide,
-    isLocked,
-    layoutPreset,
-    expressionIndex,
-    accessoryIndex,
-    modelReady,
-    proactiveSuggestion,
-    setScale,
-    setIsLocked,
-    setExpressionIndex,
-    setAccessoryIndex,
-    setModelReady,
-    toggleModel,
-    changeLayoutPreset,
-    updateInteractionEnabled,
-    updateInteractionGuide,
-    dismissProactiveSuggestion,
-    handleProactiveAction,
-  } = useCompanionWidget((message) => setError(message))
-  const startupReady = (dashboardDataReady && modelReady) || startupTimedOut
+  const { proactiveSuggestion, dismissProactiveSuggestion, handleProactiveAction } = useProactiveSuggestions((message) => setError(message))
+  const startupReady = dashboardDataReady || startupTimedOut
 
   const [mcpName, setMcpName] = useState('')
   const [mcpCmd, setMcpCmd] = useState('')
@@ -590,64 +667,6 @@ export default function MintDashboard() {
     }
   }, [isSearchOpen])
 
-  // Another process — the CLI's interactive chat, a scheduled task, a
-  // messaging bridge — can add messages to this same conversation while
-  // this page is open, and nothing here would otherwise notice: Mint's
-  // surfaces only share a SQLite file, not a live event bus, so this polls
-  // for changes instead of requiring a manual refresh. Kept in a ref rather
-  // than the effect's own dependency array so a poll landing doesn't tear
-  // down and recreate the interval on every tick.
-  const interactionsRef = useRef(interactions)
-  useEffect(() => {
-    interactionsRef.current = interactions
-  }, [interactions])
-
-  // Load the saved draft whenever the active conversation changes. Declared
-  // before the persist effect so it runs first within the same commit. The
-  // first run is a no-op: `message`'s initial value already came from the
-  // lazy `useState` initializer above.
-  const draftLoadedRef = useRef(false)
-  useEffect(() => {
-    if (!draftLoadedRef.current) {
-      draftLoadedRef.current = true
-      return
-    }
-    skipDraftPersistRef.current = true
-    setMessage(readDraft(conversationId))
-  }, [conversationId])
-
-  // Persist the composer text for the current conversation (debounced).
-  useEffect(() => {
-    if (skipDraftPersistRef.current) {
-      skipDraftPersistRef.current = false
-      return
-    }
-    const timer = window.setTimeout(() => writeDraft(conversationId, message), 300)
-    return () => window.clearTimeout(timer)
-  }, [message, conversationId])
-
-  useEffect(() => {
-    if (view !== 'chat' || !conversationId) return
-    const interval = window.setInterval(async () => {
-      // Skip while backgrounded (nothing to show anyone) or mid-send (a
-      // fetch landing here would clobber the in-flight optimistic/streamed
-      // reply with stale history).
-      if (document.visibilityState !== 'visible' || sending) return
-      try {
-        const history = (await getRecentInteractions(50, conversationId, workspacePath || null)).reverse()
-        const current = interactionsRef.current
-        const currentLast = current[current.length - 1]
-        const nextLast = history[history.length - 1]
-        if (current.length === history.length && currentLast?.id === nextLast?.id) return
-        setInteractions(history)
-        setAgentActivitySnapshots((snapshots) => mergeActivitySnapshots(snapshots, history))
-      } catch {
-        // Best-effort — a transient fetch failure just waits for the next tick.
-      }
-    }, 3000)
-    return () => window.clearInterval(interval)
-  }, [view, conversationId, sending, workspacePath])
-
   const filteredSessions = chatSessions.filter((session) => {
     if (session.kind === 'cli' || session.id === 'conversation-default') return false
     return session.title.toLowerCase().includes(searchQuery.toLowerCase())
@@ -699,28 +718,42 @@ export default function MintDashboard() {
   const groupedSearchSessions = groupSessionsByDate(filteredSessions)
 
 
-  async function refreshHistory() {
-    const history = await getRecentInteractions(50, conversationId, workspacePath || null)
-    const reversed = history.reverse()
-    setInteractions(reversed)
-    setAgentActivitySnapshots((current) => mergeActivitySnapshots(current, reversed))
-  }
-
-  async function refreshChatSessions() {
-    const sessions = await listChatSessions()
-    setChatSessions(sessions)
-  }
+  const refreshHistory = conversationActions.refreshHistory
+  const refreshChatSessions = useCallback(async () => {
+    try { await conversationActions.refreshSessions() }
+    catch (error) { console.error('Failed to refresh chat sessions:', error) }
+  }, [conversationActions])
+  const loadOlderInteractions = conversationActions.loadOlder
 
-  const [picturesRefreshing, setPicturesRefreshing] = useState(false)
-
-  async function refreshPictures() {
-    setPicturesRefreshing(true)
+  const workspaceUpdateQueues = useRef(new Map<string, Promise<void>>())
+  const handleUpdateSessionWorkspace = useCallback(async (sessionId: string, targetPath: string | null) => {
+    // Preserve selection order if the user switches folders quickly.
+    const previous = workspaceUpdateQueues.current.get(sessionId) ?? Promise.resolve()
+    const update = previous.catch(() => {}).then(async () => {
+      await updateChatSessionWorkspace(sessionId, targetPath)
+      await refreshChatSessions()
+    })
+    workspaceUpdateQueues.current.set(sessionId, update)
     try {
-      setPictures(await listSavedPictures())
+      await update
+    } catch (e) {
+      console.error('Failed to update session workspace:', e)
+      setError(errorMessage(e))
     } finally {
-      setPicturesRefreshing(false)
+      if (workspaceUpdateQueues.current.get(sessionId) === update) {
+        workspaceUpdateQueues.current.delete(sessionId)
+      }
     }
-  }
+  }, [refreshChatSessions])
+
+  const handleBrowseFolderForMove = useCallback(async () => {
+    try {
+      const selected = await selectWorkspaceDirectory()
+      return selected || null
+    } catch {
+      return null
+    }
+  }, [])
 
   useEffect(() => {
     Promise.allSettled([
@@ -729,8 +762,9 @@ export default function MintDashboard() {
       refreshChatSessions(),
       window.settingsApi?.getSettings()
         .then((loaded: any) => {
-          setSettingsConfig(loaded)
-          applyThemeStyles({ ...DEFAULT_CONFIG, ...loaded })
+          const migrated = migrateFontFamily(migrateTypographyScale(loaded))
+          setSettingsConfig(migrated)
+          applyThemeStyles({ ...DEFAULT_CONFIG, ...migrated })
         }),
     ]).then((results) => {
       const failure = results.find((result) => result.status === 'rejected')
@@ -739,21 +773,15 @@ export default function MintDashboard() {
     })
     const unlistenSpotlight = window.api.onSpotlightToChat((query) => {
       changeView('chat')
-      setMessage(query)
-    })
-    const unlistenVision = window.api.onVisionReady((image) => {
-      createTrimmedImagePreview(image)
-        .catch(() => image)
-        .then((previewDataUri) => {
-          setImageAttachments((current) => [...current, { dataUri: image, previewDataUri, name: 'Screen capture' }])
-        })
+      conversationActions.compose(query)
     })
     const handleWindowFocus = () => {
       getRuntimeStatus().then(setStatus).catch(() => {})
       window.settingsApi?.getSettings?.().then((loaded: any) => {
         if (loaded) {
-          setSettingsConfig(loaded)
-          applyThemeStyles(loaded)
+          const migrated = migrateFontFamily(migrateTypographyScale(loaded))
+          setSettingsConfig(migrated)
+          applyThemeStyles(migrated)
         }
       }).catch(() => {})
       window.api?.clearAiNotifications?.()
@@ -761,26 +789,20 @@ export default function MintDashboard() {
     window.addEventListener('focus', handleWindowFocus)
 
     window.api?.onSettingsChanged?.((loaded: any) => {
-      setSettingsConfig(loaded)
-      applyThemeStyles(loaded)
+      const migrated = migrateFontFamily(migrateTypographyScale(loaded))
+      setSettingsConfig(migrated)
+      applyThemeStyles(migrated)
       getRuntimeStatus().then(setStatus).catch(() => {})
     })
 
-    const unlistenPromise = listen<any>('tool-approval-requested', (event) => {
-      if (sessionAutoApprovedRef.current) {
-        submitToolApproval(event.payload.token, true).catch((err) => {
-          console.error("Auto approval failed:", err)
-        })
-      } else {
-        setPendingApproval(event.payload)
-        notifyPendingApproval(event.payload)
-      }
+    const unlistenPromise = listen('tool-approval-requested', (event: { payload: any }) => {
+      const chatId = event.payload.chatId as string | undefined
+      if (chatId) conversationActions.receiveApproval(chatId, event.payload)
     })
     return () => {
       window.removeEventListener('focus', handleWindowFocus)
       unlistenPromise?.then?.((unlisten) => unlisten?.())
       unlistenSpotlight?.then?.((unlisten) => unlisten?.())
-      unlistenVision?.then?.((unlisten) => unlisten?.())
     }
   }, [])
 
@@ -789,23 +811,195 @@ export default function MintDashboard() {
     return () => window.clearTimeout(timer)
   }, [])
 
-  useEffect(() => {
-    if (view === 'pictures' || view === 'imagine') refreshPictures().catch((reason: unknown) => setError(errorMessage(reason)))
-  }, [view])
-
   useEffect(() => {
     if (view === 'workspace' && !agentMode) updateAgentMode(true)
   }, [view, agentMode])
 
-  useEffect(() => {
-    chatEnd.current?.scrollIntoView({ behavior: 'smooth' })
-  }, [interactions, sending, streamedReply, pendingApproval, agentProgress])
-
   const showToast = (nextMessage: string) => {
     setToastMessage(nextMessage)
     setTimeout(() => setToastMessage((current) => current === nextMessage ? '' : current), 3000)
   }
 
+  const openMintBrowser = async (url: string, throwOnError = false) => {
+    if (!isDesktopApp) {
+      window.open(url, '_blank', 'noopener,noreferrer')
+      return
+    }
+    try {
+      showToast('Opening Co-browsing browser (Mint Auto)...')
+      const { invoke } = await import('@tauri-apps/api/core')
+      await invoke('open_mint_browser', { url })
+    } catch (error) {
+      if (throwOnError) throw error
+      showToast(`Could not open browser: ${String(error)}`)
+    }
+  }
+
+  const openHtmlFile = async (root: string, relativePath: string, mode: 'external' | 'mint') => {
+    if (!isDesktopApp && !['localhost', '127.0.0.1', '[::1]', '::1'].includes(window.location.hostname)) {
+      throw new Error('HTML preview requires a browser on the same machine as the Mint backend.')
+    }
+    const popup = !isDesktopApp && mode === 'external' ? window.open('about:blank', '_blank') : null
+    if (popup) popup.opener = null
+    try {
+      const preview = await workspacePlatform.startHtmlPreview(root, relativePath, !isDesktopApp && mode === 'mint')
+      if (mode === 'mint') {
+        if (isDesktopApp) await openMintBrowser(preview.url, true)
+      } else if (isDesktopApp) {
+        const { invoke } = await import('@tauri-apps/api/core')
+        await invoke('run_desktop_action', { action: { type: 'open_url', target: preview.url } })
+      } else {
+        if (!popup) throw new Error('Allow browser popups, then open the HTML file again.')
+        popup.location.replace(preview.url)
+      }
+      showToast('HTML preview is running. Open Tools → Background tasks to view or stop the server.')
+    } catch (error) {
+      popup?.close()
+      throw error
+    }
+  }
+
+  const openTerminalSurface = () => {
+    setToolsPanelOpen(true)
+    const id = `terminal:${Date.now()}:${Math.random().toString(36).slice(2, 7)}`
+    setToolSurfaces((current) => {
+      const terminalCount = current.filter((surface) => surface.kind === 'terminal').length
+      let baseTitle = 'terminal'
+      if (workspacePath && workspacePath.trim()) {
+        const cleanPath = workspacePath.trim().replace(/[\\/]+$/, '')
+        const folderName = cleanPath.split(/[\\/]/).pop()
+        if (folderName) baseTitle = folderName
+      }
+      const title = terminalCount === 0 ? baseTitle : `${baseTitle} (${terminalCount + 1})`
+      const next = { id, kind: 'terminal' as const, title }
+      setActiveSurfaceId(id)
+      return [...current, next]
+    })
+  }
+
+  const openUtilitySurface = (kind: 'mods' | 'background') => {
+    setToolsPanelOpen(true)
+    setToolSurfaces(current => current.some(surface => surface.id === kind) ? current : [...current, { id: kind, kind, title: kind === 'mods' ? 'Mods' : 'Background tasks' }])
+    setActiveSurfaceId(kind)
+  }
+
+  const closeToolsPanel = () => {
+    setToolsPanelOpen(false)
+    requestAnimationFrame(() => document.querySelector<HTMLButtonElement>('.tools-panel-toggle')?.focus())
+  }
+
+  const openNativeBrowser = (url = 'https://www.google.com') => {
+    void openMintBrowser(url)
+  }
+
+  const duplicateToolSurface = (id: string) => {
+    setToolSurfaces((current) => {
+      const source = current.find((surface) => surface.id === id)
+      if (!source) return current
+      if (source.kind === 'mods' || source.kind === 'background') return current
+      const duplicateId = `${source.kind}:${Date.now()}:${Math.random().toString(36).slice(2, 7)}`
+      const duplicate = { ...source, id: duplicateId, title: `${source.title} copy` } as ToolSurface
+      setActiveSurfaceId(duplicateId)
+      return [...current, duplicate]
+    })
+  }
+
+  const renameToolSurface = (id: string) => {
+    const source = toolSurfaces.find((surface) => surface.id === id)
+    if (!source) return
+    const nextTitle = window.prompt('Rename tab', source.title)?.trim()
+    if (!nextTitle) return
+    setToolSurfaces((current) => current.map((surface) => surface.id === id ? { ...surface, title: nextTitle } : surface))
+  }
+
+  const closeOtherToolSurfaces = (id: string) => {
+    setToolSurfaces((current) => current.filter((surface) => surface.id === id))
+    setActiveSurfaceId(id)
+  }
+
+  const toggleTerminalSurface = () => {
+    setToolSurfaces((current) => {
+      const terminal = current.find((surface) => surface.kind === 'terminal')
+      if (!terminal) {
+        const id = `terminal:${Date.now()}:${Math.random().toString(36).slice(2, 7)}`
+        setActiveSurfaceId(id)
+        return [...current, { id, kind: 'terminal' as const, title: 'Terminal' }]
+      }
+      setActiveSurfaceId((active) => active === terminal.id ? null : terminal.id)
+      return current
+    })
+  }
+
+  const checkForUpdatesFromMenu = async () => {
+    try {
+      const update = await window.settingsApi.checkForUpdates()
+      showToast(update?.available ? `Mint ${update.version} is available.` : 'Mint is up to date.')
+    } catch (error) {
+      showToast(`Could not check for updates: ${String(error)}`)
+    }
+  }
+
+  const openArtifactSurface = (artifact: import('./ArtifactPreviewPanel').ArtifactFile) => {
+    setToolsPanelOpen(true)
+    const fileName = artifact.path.replace(/\\/g, '/').split('/').pop() || artifact.path
+    artifact = { ...artifact, workspacePath: artifact.workspacePath ?? workspacePath }
+    const id = `preview:${JSON.stringify([artifact.workspacePath, artifact.path])}`
+    setToolSurfaces((current) => {
+      const next = current.filter((surface) => surface.id !== id)
+      return [...next, { id, kind: 'preview', title: fileName, artifact }]
+    })
+    setActiveSurfaceId(id)
+  }
+
+  const openWorkspacePreview = async (root: string, path: string) => {
+    const artifact = await createWorkspacePreview(root, path, {
+      readWorkspaceFile: (file, workspace) => runtimePlatform.readWorkspaceFile(file, workspace),
+      startHtmlPreview: (workspace, file) => workspacePlatform.startHtmlPreview(workspace, file),
+    })
+    openArtifactSurface(artifact)
+  }
+
+  const openReviewSurface = (review: Extract<ToolSurface, { kind: 'review' }>) => {
+    setToolsPanelOpen(true)
+    setToolSurfaces((current) => [...current.filter((surface) => surface.id !== review.id), review])
+    setActiveSurfaceId(review.id)
+  }
+
+  const openConversationReview = () => {
+    setToolsPanelOpen(true)
+    setToolSurfaces((current) => {
+      const reviewCount = current.filter((surface) => surface.kind === 'review').length
+      const id = `review:${Date.now()}:${Math.random().toString(36).slice(2, 7)}`
+      const title = reviewCount === 0 ? 'Review' : `Review (${reviewCount + 1})`
+      const next = {
+        id,
+        kind: 'review' as const,
+        title,
+        reviewTitle: 'All conversation changes',
+        changes: conversationReviewChanges,
+      }
+      setActiveSurfaceId(id)
+      return [...current, next]
+    })
+  }
+
+  const closeToolSurface = (id: string) => {
+    setToolSurfaces((current) => {
+      const index = current.findIndex((surface) => surface.id === id)
+      const next = current.filter((surface) => surface.id !== id)
+      setActiveSurfaceId((active) => {
+        if (active !== id) return active
+        return next[Math.max(0, index - 1)]?.id ?? null
+      })
+      return next
+    })
+  }
+
+  const closeAllToolSurfaces = () => {
+    setToolSurfaces([])
+    setActiveSurfaceId(null)
+  }
+
   const toggleSidebar = () => {
     if (window.innerWidth <= 760) {
       setMobileSidebarOpen(false)
@@ -835,11 +1029,6 @@ export default function MintDashboard() {
     window.localStorage.setItem('mint:sidebar-width', String(clamped))
   }
 
-  const updateSmartContext = (enabled: boolean) => {
-    window.localStorage.setItem('mint:smart-context', String(enabled))
-    setSmartContext(enabled)
-  }
-
   const updateAgentMode = (enabled: boolean) => {
     window.localStorage.setItem('mint:agent-mode', String(enabled))
     setAgentMode(enabled)
@@ -850,176 +1039,25 @@ export default function MintDashboard() {
     setPlanMode(enabled)
   }
 
-  const updateWorkspacePath = (path: string) => {
+  const updateWorkspacePath = (path: string, persist = true) => {
     const next = path.trim()
-    if (next) {
-      window.localStorage.setItem(LAST_WORKSPACE_PATH_KEY, next)
-    } else {
-      window.localStorage.removeItem(LAST_WORKSPACE_PATH_KEY)
+    conversationActions.selectWorkspace(next)
+    const activeId = conversationActions.getSnapshot().conversationId
+    if (persist && isPersistedConversation(activeId, chatSessions)) {
+      void handleUpdateSessionWorkspace(activeId, next || null)
     }
-    setWorkspacePath(next)
   }
 
-  useEffect(() => {
-    if (!sending) {
-      sessionAutoApprovedRef.current = false
-      setSessionAutoApproved(false)
-    }
-  }, [sending])
-
-  async function handleApproval(approved: boolean, autoApproveSession = false, answer?: string) {
-    if (!pendingApproval) return
-    try {
-      if (autoApproveSession) {
-        sessionAutoApprovedRef.current = true
-        setSessionAutoApproved(true)
-      }
-      await submitToolApproval(pendingApproval.token, approved, answer)
-    } catch (reason) {
-      setError(errorMessage(reason))
-    } finally {
-      setPendingApproval(null)
-    }
-  }
+  const handleApproval = conversationActions.resolveApproval
+  const handleCancelMessage = conversationActions.cancel
 
-  async function handleCancelMessage() {
-    if (!sending || !streamingConversationId) return
-    try {
-      await cancelChatMessage(streamingConversationId)
-    } catch (e) {
-      console.error("Failed to cancel message stream:", e)
-    } finally {
-      setSending(false)
-      setStreamingConversationId(null)
-      setSendingMessage('')
-      setSendingImageCount(0)
-      setSendingVideoCount(0)
-    }
-  }
-
-  async function sendPrompt(
-    promptText: string,
-    options: {
-      imageAttachments?: Array<{ dataUri: string; name: string; previewDataUri?: string }>
-      videoAttachments?: Array<{ dataUri: string; name: string }>
-      audioDataUri?: string | null
-      documentAttachment?: DocumentAttachment | null
-      systemInstruction?: string
-      clearComposer?: boolean
-      pinnedMcpServer?: string
-      forceAgentMode?: boolean
-    } = {},
-  ) {
-    if (sending) return
-    const outgoingImages = options.imageAttachments ?? []
-    const outgoingVideos = options.videoAttachments ?? []
-    const outgoingDocument = options.documentAttachment ?? null
-    const shouldUseAgentMode = agentMode || options.forceAgentMode || promptText.toLowerCase().startsWith('search web:')
-    const outgoingImage = outgoingImages.map((img) => img.dataUri).join(' ')
-    const outgoingVideo = outgoingVideos.map((vid) => vid.dataUri).join(' ')
-    const outgoingImageCount = outgoingImages.length
-    setSending(true)
-    setStreamingConversationId(conversationId)
-    setSendingMessage(promptText)
-    setSendingImageCount(outgoingImageCount)
-    setSendingVideoCount(outgoingVideos.length)
+  async function sendPrompt(promptText: string, options: PromptOptions = {}) {
+    if (conversationActions.getSnapshot().sending) return
     setError('')
-    setStreamedReply('')
-    setStreamedResponse(null)
-    setAgentProgress([])
     liveThinkingOpenRef.current = true
-    setThinkingExpanded((current) => ({ ...current, live: true }))
-    const progressSnapshot: AgentProgress[] = []
-    if (options.clearComposer) {
-      setMessage('')
-      setImageAttachments([])
-      setVideoAttachments([])
-      setDocumentAttachment(null)
-    }
-
-    try {
-      const response = await streamChatMessage(
-        shouldUseAgentMode ? promptText : `/chat ${promptText}`,
-        (chunk) => setStreamedReply((current) => `${current}${chunk}`),
-        outgoingImage,
-        options.audioDataUri ?? null,
-        outgoingVideo,
-        options.systemInstruction ?? '',
-        (progress) => {
-          progressSnapshot.push(progress)
-          setAgentProgress((current) => trimAgentProgress([...current, progress]))
-        },
-        outgoingDocument,
-        workspacePath || null,
-        conversationId,
-        undefined,
-        shouldUseAgentMode ? planMode : false,
-        options.pinnedMcpServer ?? null,
-        (payload) => {
-          if (sessionAutoApprovedRef.current) {
-            submitToolApproval(payload.token, true).catch((err) => {
-              console.error("Auto approval failed:", err)
-            })
-          } else {
-            setPendingApproval(payload)
-            notifyPendingApproval(payload)
-          }
-        },
-      )
-      setStreamedResponse(response)
-      if (document.hidden || !document.hasFocus()) {
-        window.api?.notifyAiResponse?.(truncateForNotification(response.text))
-      }
-      const history = (await getRecentInteractions(50, conversationId, workspacePath || null)).reverse()
-      let enrichedHistory = history
-      if (progressSnapshot.length > 0) {
-        const newestInteraction = [...history]
-          .reverse()
-          .find((interaction) => interaction.aiText === response.text || interaction.userText === promptText) ?? history[history.length - 1]
-        if (newestInteraction?.id != null) {
-          const interactionKey = String(newestInteraction.id)
-          enrichedHistory = history.map((interaction) =>
-            interaction.id === newestInteraction.id
-              ? { ...interaction, agentActivity: progressSnapshot }
-              : interaction,
-          )
-          setAgentActivitySnapshots((current) => ({
-            ...current,
-            [interactionKey]: progressSnapshot.slice(),
-          }))
-          if (liveThinkingOpenRef.current) {
-            setThinkingExpanded((current) => ({
-              ...current,
-              [interactionKey]: true,
-            }))
-          }
-          await saveInteractionAgentActivity(newestInteraction.id, progressSnapshot)
-        }
-      }
-      setInteractions(enrichedHistory)
-      setAgentActivitySnapshots((current) => mergeActivitySnapshots(current, enrichedHistory))
-      await refreshChatSessions()
-      await refreshPictures()
-      if (typeof window !== 'undefined') {
-        const pathname = (window.location.pathname || '').replace(/\/+$/, '')
-        const hash = (window.location.hash || '').replace(/^#\/?/, '').replace(/\/+$/, '')
-        const target = (pathname || hash).toLowerCase()
-        if (!target || target === '' || target === '/chat' || target === 'chat' || target === '/index.html' || target === 'index.html') {
-          window.history.replaceState({}, '', `/chat/${encodeURIComponent(conversationId)}`)
-        }
-      }
-      getRuntimeStatus().then(setStatus).catch(() => {})
-      setStreamedReply('')
-      setStreamedResponse(null)
-    } catch (reason) {
-      setError(errorMessage(reason))
-    } finally {
-      setSending(false)
-      setStreamingConversationId(null)
-      setSendingMessage('')
-      setSendingImageCount(0)
-      setSendingVideoCount(0)
-    }
+    liveExtendedThinkingOpenRef.current = true
+    setThinkingExpanded(current => ({ ...current, live: true, 'live-extended': true }))
+    await conversationActions.sendPrompt(promptText, { ...options, agentMode, planMode })
   }
 
   async function handleSubmit(event: FormEvent<HTMLFormElement>) {
@@ -1036,15 +1074,12 @@ export default function MintDashboard() {
       // comes back as `not_handled` and falls through to the TS processor below.
       let engineResp: SlashResponse | null = null
       try {
-        engineResp = await runSlashCommand(trimmed, workspacePath || null)
+        engineResp = await runSlashCommand(trimmed, workspacePath || null, conversationId)
       } catch {
         engineResp = null
       }
       if (engineResp && engineResp.kind !== 'not_handled') {
-        setMessage('')
-        setImageAttachments([])
-        setVideoAttachments([])
-        setDocumentAttachment(null)
+        conversationActions.clearComposer()
         await handleEngineSlashResponse(trimmed, engineResp)
         return
       }
@@ -1052,22 +1087,49 @@ export default function MintDashboard() {
       const slashResult = executeSlashCommand(trimmed)
 
       if (slashResult.handled) {
-        setMessage('')
-        setImageAttachments([])
-        setVideoAttachments([])
-        setDocumentAttachment(null)
+        conversationActions.clearComposer()
 
         if (slashResult.action === 'open_image_picker') {
           document.getElementById('vision-file-input')?.click()
           return
         } else if (slashResult.action === 'paste_image') {
           readClipboardImage().then((uri) => {
-            if (uri) setImageAttachments((curr) => [...curr, { dataUri: uri, name: 'Clipboard Image' }])
+            if (uri) conversationActions.attachImage({ dataUri: uri, name: 'Clipboard Image' })
           }).catch(() => {})
           return
         } else if (slashResult.action === 'generate_veo') {
           changeView('veo')
           return
+        } else if (slashResult.action === 'resume_session') {
+          const query = (slashResult.payload?.query || '').trim().toLowerCase()
+          const target = query
+            ? chatSessions.find((s) => s.id.toLowerCase() === query || s.id.toLowerCase().includes(query) || s.title.toLowerCase().includes(query))
+            : chatSessions.find((s) => s.id !== conversationId)
+          if (target) {
+            activateConversation(target.id)
+            const targetPath = getCleanPathForView('chat', target.id)
+            window.history.replaceState({}, '', targetPath)
+            const systemMsg = {
+              id: Date.now(),
+              userText: trimmed,
+              aiText: `🔄 Resumed session: **${target.title}** (\`${target.id}\`)`,
+              createdAt: new Date().toISOString(),
+              provider: 'system',
+              model: 'mint-cli',
+            }
+            conversationActions.appendInteraction(systemMsg)
+          } else {
+            const systemMsg = {
+              id: Date.now(),
+              userText: trimmed,
+              aiText: query ? `⚠️ No matching session found for "${query}".` : 'ℹ️ No other sessions found to resume.',
+              createdAt: new Date().toISOString(),
+              provider: 'system',
+              model: 'mint-cli',
+            }
+            conversationActions.appendInteraction(systemMsg)
+          }
+          return
         }
 
         if (slashResult.systemText) {
@@ -1079,7 +1141,7 @@ export default function MintDashboard() {
             provider: 'system',
             model: 'mint-cli',
           }
-          setInteractions((prev) => [...prev, systemMsg])
+          conversationActions.appendInteraction(systemMsg)
           saveSystemInteraction(conversationId, trimmed, slashResult.systemText || '', 'system', 'mint-cli').catch(() => {})
         }
         return
@@ -1125,12 +1187,7 @@ export default function MintDashboard() {
       const objectUrl = createObjectUrlPreview(file).objectUrl
       const dataUri = await readImage(file)
       const previewDataUri = await createTrimmedImagePreview(dataUri).catch(() => dataUri)
-      setImageAttachments((current) => {
-        if (current.some((item) => item.name === file.name && item.dataUri === dataUri)) {
-          return current
-        }
-        return [...current, { dataUri, previewDataUri, objectUrl, name: file.name }]
-      })
+      conversationActions.attachImage({ dataUri, previewDataUri, objectUrl, name: file.name })
     } catch (reason) {
       setError(errorMessage(reason))
     } finally {
@@ -1152,12 +1209,7 @@ export default function MintDashboard() {
         reader.onerror = reject
         reader.readAsDataURL(file)
       })
-      setVideoAttachments((current) => {
-        if (current.some((item) => item.name === file.name && item.dataUri === dataUri)) {
-          return current
-        }
-        return [...current, { dataUri, name: file.name }]
-      })
+      conversationActions.attachVideo({ dataUri, name: file.name })
     } catch (reason) {
       setError(errorMessage(reason))
     } finally {
@@ -1203,7 +1255,7 @@ export default function MintDashboard() {
               createTrimmedImagePreview(dataUri)
                 .catch(() => dataUri)
                 .then((previewDataUri) => {
-                  setImageAttachments((current) => [...current, { dataUri, previewDataUri, name }])
+                  conversationActions.attachImage({ dataUri, previewDataUri, name })
                 })
             }
           }).catch((err) => {
@@ -1226,7 +1278,7 @@ export default function MintDashboard() {
         createTrimmedImagePreview(dataUri)
           .catch(() => dataUri)
           .then((previewDataUri) => {
-            setImageAttachments((current) => [...current, { dataUri, previewDataUri, name }])
+            conversationActions.attachImage({ dataUri, previewDataUri, name })
           })
       })
       .catch((reason) => setError(errorMessage(reason)))
@@ -1242,7 +1294,7 @@ export default function MintDashboard() {
       if (!isSupportedDocument(file.name)) {
         throw new Error('Unsupported document type')
       }
-      setDocumentAttachment({
+      conversationActions.attachDocument({
         filename: file.name,
         dataUri: await readDocument(file),
       })
@@ -1255,22 +1307,28 @@ export default function MintDashboard() {
 
   function startWebSearch() {
     updateAgentMode(true)
-    setMessage((current) => current.trim() ? `Search web: ${current.trim()}` : 'Search web: ')
+    conversationActions.compose(message.trim() ? `Search web: ${message.trim()}` : 'Search web: ')
   }
 
-  async function selectWorkspace() {
-    try {
-      const selected = await selectWorkspaceDirectory()
-      if (selected) {
-        updateWorkspacePath(selected)
-        changeView('workspace')
-      }
-    } catch (reason) {
-      setError(errorMessage(reason))
-    }
+  async function selectWorkspace(path?: string, showWorkspace = false) {
+    const targetView = isDesktopApp && (showWorkspace || view === 'workspace') ? 'workspace' : 'chat'
+    await conversationActions.selectProject(
+      async () => path || await selectLinkedFolderPath(),
+      {
+        openSession: (session, nextView) => selectConversation(session.id, session, nextView),
+        newChat: (targetPath, nextView) => clearHistory('New chat', targetPath, nextView),
+        showCurrentView: nextView => changeView(nextView, conversationActions.getSnapshot().conversationId),
+      }, targetView,
+    )
+  }
+
+  function captureScreen() {
+    setScreenCaptureOpen(true)
   }
 
-  async function captureScreen() {
+  async function startLiveTranslation() {
+    setScreenCaptureOpen(false)
+    await new Promise<void>((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())))
     try {
       await window.api.startVision()
     } catch (reason) {
@@ -1278,20 +1336,28 @@ export default function MintDashboard() {
     }
   }
 
-  async function clearHistory(action: 'New chat' | 'Clear history') {
+  function attachScreenCapture(image: string) {
+    void createTrimmedImagePreview(image)
+      .catch(() => image)
+      .then((previewDataUri) => {
+        conversationActions.attachImage({ dataUri: image, previewDataUri, name: 'Screen capture' })
+        setScreenCaptureOpen(false)
+      })
+  }
+
+  async function clearHistory(action: 'New chat' | 'Clear history', targetWorkspacePath?: string | null, targetView: 'chat' | 'workspace' = 'chat') {
     try {
       if (action === 'New chat') {
         const next = createConversationId()
-        setConversationId(next)
-        setInteractions([])
-        setAgentActivitySnapshots({})
-        setStreamedReply('')
-        setStreamedResponse(null)
-        setMessage('')
-        setImageAttachments([])
-        setDocumentAttachment(null)
-        setAgentProgress([])
-        setViewState('chat')
+        activateConversation(next)
+        setViewState(targetView)
+
+        if (targetWorkspacePath !== undefined) {
+          updateWorkspacePath(targetWorkspacePath || '')
+        } else {
+          updateWorkspacePath(workspacePath)
+        }
+
         if (typeof window !== 'undefined') {
           const currentPath = (window.location.pathname || '').replace(/\/+$/, '')
           if (currentPath !== '' && currentPath !== '/chat') {
@@ -1301,14 +1367,8 @@ export default function MintDashboard() {
         return
       } else {
         if (!window.confirm(`${action} will clear the current conversation history. Continue?`)) return
-        await clearChatHistory(conversationId)
+        await conversationActions.clearHistory()
       }
-      setInteractions([])
-      setAgentActivitySnapshots({})
-      setStreamedReply('')
-      setStreamedResponse(null)
-      setMessage('')
-      setImageAttachments([])
     } catch (reason) {
       setError(errorMessage(reason))
     }
@@ -1326,7 +1386,7 @@ export default function MintDashboard() {
       provider: 'system',
       model: 'mint-cli',
     }
-    setInteractions((prev) => [...prev, systemMsg])
+    conversationActions.appendInteraction(systemMsg)
     saveSystemInteraction(conversationId, userText, aiText, 'system', 'mint-cli').catch(() => {})
   }
 
@@ -1354,13 +1414,19 @@ export default function MintDashboard() {
   async function handleEngineSlashResponse(userText: string, resp: SlashResponse) {
     switch (resp.kind) {
       case 'message':
-        pushSystemMessage(userText, resp.markdown)
+        pushSystemMessage(userText.startsWith('/mods set ') ? '/mods' : userText, resp.markdown)
+        if (userText.startsWith('/mods set ')) {
+          requestAnimationFrame(() => document.getElementById('chat-input')?.focus())
+        }
         break
       case 'applied': {
         const wsChange = resp.effects.find((e) => e.kind === 'workspace_changed') as
           | { kind: 'workspace_changed'; path: string }
           | undefined
-        if (wsChange) setWorkspacePath(wsChange.path)
+        if (wsChange) updateWorkspacePath(wsChange.path)
+        if (resp.effects.some((effect) => effect.kind === 'workspace_files_changed')) {
+          setWorkspaceRefreshRevision((revision) => revision + 1)
+        }
         const planModeChange = resp.effects.find((e) => e.kind === 'plan_mode_changed') as
           | { kind: 'plan_mode_changed'; enabled: boolean }
           | undefined
@@ -1372,21 +1438,17 @@ export default function MintDashboard() {
           // Render the same "✨ Gemini • model" chip the GUI's own /models shows.
           // The engine already logged the `provider_change` row into the shared
           // "cli" conversation, so this is just the immediate local echo.
-          setInteractions((prev) => [
-            ...prev,
-            {
-              id: Date.now(),
-              userText: providerChange.display,
-              aiText: '',
-              createdAt: new Date().toISOString(),
-              provider: 'system',
-              model: 'provider_change',
-            },
-          ])
+          conversationActions.appendInteraction({
+            id: Date.now(),
+            userText: providerChange.display,
+            aiText: '',
+            createdAt: new Date().toISOString(),
+            provider: 'system',
+            model: 'provider_change',
+          })
         }
         if (resp.effects.some((e) => e.kind === 'history_cleared')) {
-          await clearChatHistory(conversationId).catch(() => {})
-          setInteractions([])
+          await conversationActions.clearHistory().catch(() => {})
         }
         if (resp.markdown) pushSystemMessage(userText, resp.markdown)
         if (resp.effects.some((e) => e.kind !== 'history_cleared' && e.kind !== 'workspace_changed')) {
@@ -1415,40 +1477,64 @@ export default function MintDashboard() {
 
   function handleThinkingExpandedChange(key: string, open: boolean) {
     if (key === 'live') liveThinkingOpenRef.current = open
+    if (key === 'live-extended') liveExtendedThinkingOpenRef.current = open
     setThinkingExpanded((current) => ({ ...current, [key]: open }))
   }
 
-  async function selectConversation(id: string) {
+  async function selectConversation(id: string, selectedSession?: ChatSession, targetView: 'chat' | 'workspace' = 'chat') {
     window.localStorage.setItem(ACTIVE_CONVERSATION_ID_KEY, id)
     touchActiveTimestamp()
-    setConversationId(id)
-    changeView('chat', id)
-    setStreamedReply('')
-    setStreamedResponse(null)
-    setMessage('')
-    setImageAttachments([])
-    setDocumentAttachment(null)
-    setAgentProgress([])
-    const history = await getRecentInteractions(50, id, workspacePath || null)
-    const reversed = history.reverse()
-    setInteractions(reversed)
-    setAgentActivitySnapshots((current) => mergeActivitySnapshots(current, reversed))
+    activateConversation(id)
+    changeView(targetView, id)
+    const session = selectedSession ?? chatSessions.find((item) => item.id === id)
+    if (session) {
+      if (session.workspacePath) {
+        if (session.workspacePath !== workspacePath) {
+          updateWorkspacePath(session.workspacePath, false)
+        }
+      } else {
+        if (workspacePath) {
+          updateWorkspacePath('', false)
+        }
+      }
+    }
+    try {
+      await conversationActions.refreshHistory()
+    } catch (reason) {
+      setError(errorMessage(reason))
+    }
+  }
+
+  const handleNewChatInProject = (targetPath: string) => {
+    void clearHistory('New chat', targetPath)
   }
 
   async function deleteConversation(id: string) {
-    if (id === 'cli') return
+    if (id === 'cli') {
+      if (!window.confirm('Clear history for default CLI session? This cannot be undone.')) return
+      try {
+        await clearChatHistory('cli')
+        await refreshHistory()
+        await refreshChatSessions()
+        showToast('CLI session history cleared')
+      } catch (reason) {
+        setError(errorMessage(reason))
+      }
+      return
+    }
     const session = chatSessions.find((item) => item.id === id)
     const title = session?.title || 'this chat'
     if (!window.confirm(`Delete "${title}"? This will remove the conversation and its messages.`)) return
 
     try {
       await deleteChatSession(id)
-      const remaining = chatSessions.filter((item) => item.id !== id && item.kind !== 'cli' && item.id !== 'conversation-default')
-      const nextActive = id === conversationId
+      const remaining = chatSessions.filter((item) => item.id !== id && item.kind !== 'cli' && !item.id.startsWith('cli') && item.id !== 'conversation-default')
+      const currentChatId = conversationActions.getSnapshot().conversationId
+      const nextActive = id === currentChatId
         ? (remaining[0]?.id ?? createConversationId())
-        : conversationId
+        : currentChatId
 
-      if (nextActive !== conversationId) {
+      if (nextActive !== currentChatId) {
         if (remaining.length > 0 && remaining[0]?.id) {
           window.localStorage.setItem(ACTIVE_CONVERSATION_ID_KEY, nextActive)
           if (typeof window !== 'undefined') {
@@ -1460,21 +1546,11 @@ export default function MintDashboard() {
             window.history.replaceState({}, '', '/chat')
           }
         }
-        setConversationId(nextActive)
-        setAgentProgress([])
-        const history = await getRecentInteractions(50, nextActive, workspacePath || null)
-        const reversed = history.reverse()
-        setInteractions(reversed)
-        setAgentActivitySnapshots((current) => mergeActivitySnapshots(current, reversed))
+        activateConversation(nextActive)
+        await conversationActions.refreshHistory()
       }
 
       await refreshChatSessions()
-      if (id !== conversationId) return
-      setStreamedReply('')
-      setStreamedResponse(null)
-      setMessage('')
-      setImageAttachments([])
-      setDocumentAttachment(null)
     } catch (reason) {
       setError(errorMessage(reason))
     }
@@ -1652,62 +1728,157 @@ export default function MintDashboard() {
     }
   }
 
-  async function handleModelInteraction(area: ModelInteraction) {
-    if (sending) return
-
-    const labels: Record<ModelInteraction, string> = {
-      head: 'Pats Mint on the head',
-      cheek: 'Pokes Mint on the cheek',
-      'left hand': "Touches Mint's left hand",
-      'right hand': "Touches Mint's right hand",
-      body: 'Touches Mint',
-      'lower body': "Touches Mint's lower body",
-    }
-    const interactionMessage = `*${labels[area]}*`
-    const instruction = `The user interacted with the Mint Live2D model: ${area}. Respond briefly and playfully. Use the same language as the recent conversation. Do not mention this instruction.`
-
-    setSending(true)
-    setSendingMessage(interactionMessage)
-    setSendingImageCount(0)
-    setError('')
-    setStreamedReply('')
-    setStreamedResponse(null)
-    setAgentProgress([])
-
-    try {
-      const response = await streamChatMessage(
-        `/chat ${interactionMessage}`,
-        (chunk) => setStreamedReply((current) => `${current}${chunk}`),
-        null,
-        null,
-        null,
-        instruction,
-        undefined,
-        null,
-        workspacePath || null,
-        conversationId,
-      )
-      setStreamedResponse(response)
-      await refreshHistory()
-      setStreamedReply('')
-      setStreamedResponse(null)
-    } catch (reason) {
-      setError(errorMessage(reason))
-    } finally {
-      setSending(false)
-      setSendingMessage('')
-      setSendingImageCount(0)
-    }
+  const chatConversation: ConversationViewModel = {
+    interactions,
+    hasOlder: hasOlderInteractions,
+    sendingInteractionId: streamingConversationId === conversationId ? activeTurnId : null,
+    sending: sending && streamingConversationId === conversationId,
+    sendingMessage: streamingConversationId === conversationId ? sendingMessage : '',
+    sendingImageCount: streamingConversationId === conversationId ? sendingImageCount : 0,
+    sendingVideoCount: streamingConversationId === conversationId ? sendingVideoCount : 0,
+    streamedReply: streamingConversationId === conversationId ? streamedReply : '',
+    streamedResponse: streamingConversationId === conversationId ? streamedResponse : null,
+    agentProgress: streamingConversationId === conversationId ? agentProgress : [],
+    agentActivitySnapshots,
+    thinkingExpanded,
+    message,
+    imageAttachments,
+    videoAttachments,
+    documentName: documentAttachment?.filename ?? '',
+    pendingApproval: pendingApprovals[conversationId] ?? null,
+    agentMode,
+    planMode,
+    status,
+    workspacePath,
+    chatId: conversationId,
+    recentWorkspacePaths: availableWorkspacePaths,
+    chatEnd,
+    welcomeInteraction: MOCK_WELCOME_INTERACTION,
+    settingsConfig,
+    slashChoice: pendingSlashChoice,
+    isCliSession: conversationId.startsWith('cli') || conversationId === 'cli',
+    cliSessionId: conversationId.startsWith('cli') ? conversationId : undefined,
+    conversationTitle: chatSessions.find((session) => session.id === conversationId)?.title,
+  }
+  const chatActions: ConversationActions = {
+    onSelectSlashChoice: (value) => {
+      if (!pendingSlashChoice) return
+      const next = `${pendingSlashChoice.command} ${value}`
+      setPendingSlashChoice(null)
+      requestAnimationFrame(() => document.getElementById('chat-input')?.focus())
+      runSlashCommand(next, workspacePath || null, conversationId)
+        .then((response) => handleEngineSlashResponse(next, response))
+        .catch(() => {})
+    },
+    onDismissSlashChoice: () => setPendingSlashChoice(null),
+    onLoadOlder: loadOlderInteractions,
+    onThinkingExpandedChange: handleThinkingExpandedChange,
+    onSubmit: handleSubmit,
+    onSelectImage: selectImage,
+    onSelectVideo: selectVideo,
+    onSelectDocument: selectDocument,
+    onPasteImage: pasteImage,
+    onSetMessage: conversationActions.compose,
+    onSendVoiceMessage: sendVoiceMessage,
+    onRemoveImage: conversationActions.removeImage,
+    onRemoveVideo: conversationActions.removeVideo,
+    onRemoveDocument: () => conversationActions.attachDocument(null),
+    onStartWebSearch: startWebSearch,
+    onCaptureScreen: captureScreen,
+    onSetAgentMode: updateAgentMode,
+    onSetPlanMode: isDesktopApp ? updatePlanMode : undefined,
+    onSetProvider: changeProvider,
+    onSelectWorkspace: selectWorkspace,
+    onWorkspaceChanged: () => setWorkspaceRefreshRevision((revision) => revision + 1),
+    onApproval: handleApproval,
+    onUpdateSettings: (updated) => setSettingsConfig(updated),
+    onSetModel: changeModel,
+    onSelectModelAndProvider: changeProviderAndModel,
+    onCancelMessage: handleCancelMessage,
+    onClearMessages: () => clearHistory('Clear history'),
+    onSetGeminiLiveVoice: changeGeminiLiveVoice,
+    onToggleMobileSidebar: () => setMobileSidebarOpen(!mobileSidebarOpen),
+    onBackToCode: () => changeView('code'),
+    onOpenArtifact: isDesktopApp ? openArtifactSurface : undefined,
+    onOpenReview: isDesktopApp ? openReviewSurface : undefined,
   }
 
   return (
     <div className={`app-container ${startupReady ? '' : 'is-loading'}`}>
+      {screenCaptureOpen && (
+        <ScreenCaptureDialog
+          onClose={() => setScreenCaptureOpen(false)}
+          onAttach={attachScreenCapture}
+          capture={() => captureScreenForChat(isDesktopApp)}
+          onLiveTranslate={isDesktopApp ? () => { void startLiveTranslation() } : undefined}
+        />
+      )}
+      {isDesktopApp && (
+        <DesktopTitlebar
+          sidebarCollapsed={sidebarCollapsed}
+          onToggleSidebar={toggleSidebar}
+          onNewChat={() => clearHistory('New chat')}
+          onOpenWorkspace={() => selectWorkspace(undefined, true)}
+          onOpenTerminal={openTerminalSurface}
+          onToggleTerminal={toggleTerminalSurface}
+          onOpenBrowser={() => openNativeBrowser()}
+          toolsPanelOpen={toolsPanelOpen}
+          backgroundTaskCount={backgroundTaskCount}
+          onToggleToolsPanel={() => setToolsPanelOpen((open) => !open)}
+          onOpenSettings={() => changeView('settings')}
+          onCheckForUpdates={checkForUpdatesFromMenu}
+          onShowAbout={() => showToast('Mint Agent — AI workspace')}
+          workspacePath={workspacePath}
+          workspaceActive={view === 'workspace' && !toolsPanelOpen}
+          workspaceRevision={workspaceRefreshRevision}
+          sending={sending}
+          onWorkspaceUndoError={showToast}
+          terminalCount={toolSurfaces.filter((surface) => surface.kind === 'terminal').length}
+          chatId={conversationId}
+          liveProgress={streamingConversationId === conversationId ? agentProgress : []}
+          recentChanges={recentAgentChanges}
+          onOpenReview={(changes) => openReviewSurface({ id: `review:workspace:${Date.now()}`, kind: 'review', title: 'Review', reviewTitle: 'Recent agent changes', changes })}
+          onRefreshWorkspace={() => setWorkspaceRefreshRevision((revision) => revision + 1)}
+        />
+      )}
+      {notificationNotice && (
+        <section className="mint-notification-notice" role="status" data-kind={notificationNotice.type}>
+          <span>{notificationNotice.message}</span>
+          {notificationNotice.chatId && <button type="button" onClick={() => { void notificationNavigationRef.current(notificationNotice.chatId!); setNotificationNotice(null) }}>Open chat</button>}
+          <button type="button" aria-label="Dismiss notification" onClick={() => setNotificationNotice(null)}>×</button>
+        </section>
+      )}
+      {error && <ErrorNotice key={error} message={error} onDismiss={() => setError('')} />}
       <div
-        className={`app-body ${(sidebarCollapsed && window.innerWidth > 760) ? 'sidebar-collapsed' : ''} ${view === 'pictures' ? 'pictures-open' : ''} ${mobileSidebarOpen ? 'mobile-sidebar-open' : ''}`}
-        style={{ '--sidebar-expanded-width': `${sidebarWidth}px` } as CSSProperties}
+        className={`app-body ${(sidebarCollapsed && window.innerWidth > 760) ? 'sidebar-collapsed' : ''} ${view === 'pictures' ? 'pictures-open' : ''} ${mobileSidebarOpen ? 'mobile-sidebar-open' : ''} ${toolsPanelOpen ? 'tool-surface-active' : ''}`}
+        style={{
+          '--sidebar-expanded-width': `${sidebarWidth}px`,
+          '--terminal-dock-size': `${terminalRightWidth}px`,
+          // A terminal shown in the right tool surface resizes the surface
+          // itself (and therefore the remaining chat area), not just its
+          // inner xterm viewport.
+          '--tool-surface-width': `${terminalRightWidth}px`,
+        } as CSSProperties}
       >
+        {!isDesktopApp && view !== 'chat' && (
+          <button
+            type="button"
+            className="web-mobile-nav-btn"
+            aria-label="Open navigation menu"
+            aria-expanded={mobileSidebarOpen}
+            onClick={() => setMobileSidebarOpen(true)}
+          >
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
+              <line x1="3" y1="6" x2="21" y2="6" />
+              <line x1="3" y1="12" x2="21" y2="12" />
+              <line x1="3" y1="18" x2="21" y2="18" />
+            </svg>
+          </button>
+        )}
         {mobileSidebarOpen && (
-          <div
+          <button
+            type="button"
+            aria-label="Close navigation menu"
             className="sidebar-backdrop"
             onClick={() => setMobileSidebarOpen(false)}
             style={{
@@ -1722,17 +1893,11 @@ export default function MintDashboard() {
             }}
           />
         )}
+        {toastMessage && <div role="status" style={{ position: 'fixed', bottom: 22, right: 22, zIndex: 10000, padding: '12px 18px', borderRadius: 10, background: 'var(--bg-surface)', color: 'var(--text-main)', border: '1px solid var(--border-color)' }}>{toastMessage}</div>}
         <DashboardSidebar
           view={view}
           sidebarCollapsed={sidebarCollapsed}
-          modelVisible={modelVisible}
           sending={sending}
-          expressionIndex={expressionIndex}
-          accessoryIndex={accessoryIndex}
-          expressions={EXPRESSIONS}
-          accessories={ACCESSORIES}
-          interactionEnabled={interactionEnabled}
-          showInteractionGuide={showInteractionGuide}
           onToggleSidebar={toggleSidebar}
           onSidebarResize={handleSidebarResize}
           onSidebarResizeEnd={handleSidebarResizeEnd}
@@ -1743,18 +1908,17 @@ export default function MintDashboard() {
           onDeleteConversation={deleteConversation}
           onRenameConversation={renameConversation}
           onSetView={changeView}
-          onToggleModel={toggleModel}
-          onSetExpressionIndex={setExpressionIndex}
-          onSetAccessoryIndex={setAccessoryIndex}
-          onSetInteractionEnabled={updateInteractionEnabled}
-          onSetShowInteractionGuide={updateInteractionGuide}
-          onShowToast={showToast}
           isSearchOpen={isSearchOpen}
           onSetSearchOpen={setIsSearchOpen}
           showWorkspaceTab={isDesktopApp}
           promoteMediaStudios={!isDesktopApp}
+          activeWorkspacePath={workspacePath}
+          recentWorkspacePaths={recentWorkspacePaths}
+          onBrowseFolder={isDesktopApp ? handleBrowseFolderForMove : undefined}
+          onUpdateSessionWorkspace={handleUpdateSessionWorkspace}
+          onNewChatInProject={handleNewChatInProject}
         />
-        <main className={`assistant-workspace ${layoutPreset === 'chat-wide' ? 'layout-chat-wide' : 'layout-model-wide'} ${modelVisible || view === 'workspace' ? '' : 'model-hidden'} ${view === 'workspace' ? 'workspace-open' : ''}`} style={(view === 'skills' || view === 'mcp' || view === 'plugins' || view === 'cron' || view === 'link' || view === 'pictures' || view === 'imagine' || view === 'veo') ? { display: 'none' } : undefined}>
+        <main className={`assistant-workspace ${view === 'workspace' ? '' : 'chat-only'} ${view === 'workspace' ? 'workspace-open' : ''}`} style={(view === 'skills' || view === 'mcp' || view === 'plugins' || view === 'cron' || view === 'link' || view === 'pictures' || view === 'imagine' || view === 'veo' || view === 'code') ? { display: 'none' } : undefined}>
           {proactiveSuggestion && (
             <div className="proactive-bar" style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 100 }}>
               <div className="proactive-header">
@@ -1777,201 +1941,215 @@ export default function MintDashboard() {
               </div>
             </div>
           )}
-          {pendingSlashChoice && (
-            <div className="proactive-bar" style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 100 }}>
-              <div className="proactive-header">
-                <span className="proactive-icon">⚡</span>
-                <div className="proactive-message">{pendingSlashChoice.title}</div>
-                <button className="proactive-dismiss-btn" onClick={() => setPendingSlashChoice(null)}>
-                  Dismiss
-                </button>
-              </div>
-              <div className="proactive-chips">
-                {pendingSlashChoice.options.map((opt) => (
-                  <button
-                    key={opt.value}
-                    className="suggestion-chip"
-                    onClick={() => {
-                      const next = `${pendingSlashChoice.command} ${opt.value}`
-                      setPendingSlashChoice(null)
-                      runSlashCommand(next, workspacePath || null)
-                        .then((r) => handleEngineSlashResponse(next, r))
-                        .catch(() => {})
-                    }}
-                  >
-                    {opt.label}
-                  </button>
-                ))}
-              </div>
-            </div>
-          )}
           {view === 'workspace' && (
-            <WorkspacePanel
-              agentMode={agentMode}
-              sending={sending}
-              workspacePath={workspacePath}
-              onEnableAgentMode={() => updateAgentMode(true)}
-              onSetMessage={setMessage}
-              onWorkspaceReady={updateWorkspacePath}
-            />
+            <Suspense fallback={<LazyPanelFallback />}>
+              <WorkspacePanel
+                key={workspacePath}
+                agentMode={agentMode}
+                sending={sending}
+                workspacePath={workspacePath}
+                onEnableAgentMode={() => updateAgentMode(true)}
+                onSetMessage={conversationActions.compose}
+                onWorkspaceReady={updateWorkspacePath}
+                refreshRevision={workspaceRefreshRevision}
+                onOpenHtml={openHtmlFile}
+                onOpenPreview={openWorkspacePreview}
+              />
+            </Suspense>
           )}
-          <ModelPanel
-            scale={scale}
-            expressionIndex={expressionIndex}
-            accessoryIndex={accessoryIndex}
-            isLocked={isLocked}
-            isActive={modelVisible && view !== 'pictures' && view !== 'workspace' && view !== 'imagine' && view !== 'veo' && view !== 'skills' && view !== 'mcp' && view !== 'plugins'}
-            layoutPreset={layoutPreset}
-            sending={sending}
-            interactionEnabled={interactionEnabled}
-            showInteractionGuide={showInteractionGuide}
-            toastMessage={toastMessage}
-            onSetScale={setScale}
-            onSetLocked={setIsLocked}
-            onSetView={changeView}
-            onChangeLayoutPreset={changeLayoutPreset}
-            onDismissToast={() => setToastMessage('')}
-            onInteract={handleModelInteraction}
-            onModelLoadComplete={() => setModelReady(true)}
-          />
-          <ChatPanel
-            interactions={interactions}
-            sending={sending && streamingConversationId === conversationId}
-            sendingMessage={streamingConversationId === conversationId ? sendingMessage : ''}
-            sendingImageCount={streamingConversationId === conversationId ? sendingImageCount : 0}
-            streamedReply={streamingConversationId === conversationId ? streamedReply : ''}
-            streamedResponse={streamingConversationId === conversationId ? streamedResponse : null}
-            agentProgress={streamingConversationId === conversationId ? agentProgress : []}
-            sendingVideoCount={streamingConversationId === conversationId ? sendingVideoCount : 0}
-            agentActivitySnapshots={agentActivitySnapshots}
-            thinkingExpanded={thinkingExpanded}
-            onThinkingExpandedChange={handleThinkingExpandedChange}
-            message={message}
-            imageAttachments={imageAttachments}
-            videoAttachments={videoAttachments}
-            documentName={documentAttachment?.filename ?? ''}
-            pendingApproval={streamingConversationId === conversationId ? pendingApproval : null}
-            smartContext={smartContext}
-            agentMode={agentMode}
-            planMode={planMode}
-            status={status}
-            workspacePath={workspacePath}
-            chatEnd={chatEnd}
-            welcomeInteraction={MOCK_WELCOME_INTERACTION}
-            onSubmit={handleSubmit}
-            onSelectImage={selectImage}
-            onSelectVideo={selectVideo}
-            onSelectDocument={selectDocument}
-            onPasteImage={pasteImage}
-            onSetMessage={setMessage}
-            onSendVoiceMessage={sendVoiceMessage}
-            onRemoveImage={(idx: number) => {
-              setImageAttachments((current) => current.filter((_, i) => i !== idx))
-            }}
-            onRemoveVideo={(idx: number) => {
-              setVideoAttachments((current) => current.filter((_, i) => i !== idx))
-            }}
-            onRemoveDocument={() => setDocumentAttachment(null)}
-            onStartWebSearch={startWebSearch}
-            onCaptureScreen={captureScreen}
-            onSetSmartContext={updateSmartContext}
-            onSetAgentMode={updateAgentMode}
-            onSetPlanMode={isDesktopApp ? updatePlanMode : undefined}
-            onSetProvider={changeProvider}
-            onSelectWorkspace={isDesktopApp ? selectWorkspace : undefined}
-            settingsConfig={settingsConfig}
-            onSetModel={changeModel}
-            onSelectModelAndProvider={changeProviderAndModel}
-            onSetGeminiLiveVoice={changeGeminiLiveVoice}
-            onApproval={handleApproval}
-            onCancelMessage={handleCancelMessage}
-            onClearMessages={() => clearHistory('Clear history')}
-            onToggleMobileSidebar={() => setMobileSidebarOpen(!mobileSidebarOpen)}
-          />
+        <ChatPanel conversation={chatConversation} actions={chatActions} showSessionSources={!isDesktopApp} tools={{
+          modsPanelTarget, onOpenMods: () => openUtilitySurface('mods'),
+          open: toolsPanelOpen, backgroundTaskCount,
+          onToggle: isDesktopApp ? undefined : () => setToolsPanelOpen(open => !open),
+        }} />
         </main>
-        {view === 'skills' && (
-          <div style={{ flex: 1, overflowY: 'auto', background: 'transparent' }}>
-            <SkillsView
-              listSkills={listLearnedSkills}
-              addSkill={addLearnedSkill}
-              deleteSkill={deleteLearnedSkill}
+        {toolsPanelOpen && (
+          <Suspense fallback={<LazyPanelFallback />}>
+            <ToolSurfacePage
+              surfaces={toolSurfaces}
+              activeSurfaceId={activeSurfaceId}
               workspacePath={workspacePath}
+              desktopTools={isDesktopApp}
+              backgroundTaskCount={backgroundTaskCount}
+              onOpenMods={() => openUtilitySurface('mods')}
+              onOpenBackgroundTasks={() => openUtilitySurface('background')}
+              onModsPanelTarget={setModsPanelTarget}
+              onBackgroundPanelTarget={setBackgroundPanelTarget}
+              terminalSize={terminalRightWidth}
+              onSelect={setActiveSurfaceId}
+              onClose={closeToolSurface}
+              onCloseAll={closeAllToolSurfaces}
+              onDuplicate={duplicateToolSurface}
+              onRename={renameToolSurface}
+              onCloseOthers={closeOtherToolSurfaces}
+              onOpenTerminal={openTerminalSurface}
+              onOpenBrowser={() => openNativeBrowser()}
+              onOpenReview={openConversationReview}
+              onOpenFiles={() => {
+                setActiveSurfaceId(null)
+                setToolsPanelOpen(false)
+                changeView('workspace')
+              }}
+              onOpenSideChat={() => { setActiveSurfaceId(null); setToolsPanelOpen(false) }}
+              onClosePanel={closeToolsPanel}
+              onResizeTerminal={(size) => {
+                setTerminalRightWidth(size)
+                if (terminalSaveTimeoutRef.current) clearTimeout(terminalSaveTimeoutRef.current)
+                terminalSaveTimeoutRef.current = setTimeout(() => {
+                  window.localStorage.setItem('mint:terminal-right-width', String(size))
+                }, 250)
+              }}
+              onResizePanel={(size) => {
+                setTerminalRightWidth(size)
+                if (terminalSaveTimeoutRef.current) clearTimeout(terminalSaveTimeoutRef.current)
+                terminalSaveTimeoutRef.current = setTimeout(() => {
+                  window.localStorage.setItem('mint:terminal-right-width', String(size))
+                }, 250)
+              }}
             />
+          </Suspense>
+        )}
+        <BackgroundTerminals workspacePath={workspacePath} panelTarget={backgroundPanelTarget} onCountChange={setBackgroundTaskCount} />
+        {view === 'skills' && (
+          <div className="web-view-scroll" style={{ flex: 1, overflowY: 'auto', background: 'transparent' }}>
+            <Suspense fallback={<LazyPanelFallback />}>
+              <SkillsView
+                listSkills={listLearnedSkills}
+                addSkill={addLearnedSkill}
+                deleteSkill={deleteLearnedSkill}
+                workspacePath={workspacePath}
+              />
+            </Suspense>
           </div>
         )}
         {view === 'mcp' && (
-          <div style={{ flex: 1, overflowY: 'auto', background: 'transparent' }}>
-            <McpServersView
-              config={settingsConfig || DEFAULT_CONFIG}
-              updateField={handleUpdateSettingsField}
-              mcpName={mcpName}
-              setMcpName={setMcpName}
-              mcpCmd={mcpCmd}
-              setMcpCmd={setMcpCmd}
-              mcpArgs={mcpArgs}
-              setMcpArgs={setMcpArgs}
-              mcpEnv={mcpEnv}
-              setMcpEnv={setMcpEnv}
-              mcpIcon={mcpIcon}
-              setMcpIcon={setMcpIcon}
-              handleAddMcpServer={handleAddMcpServer}
-              handleRemoveMcpServer={handleRemoveMcpServer}
-              detectTools={detectSystemTools}
-              onReauth={reauthMcpServer}
-              listServerTools={listMcpServerTools}
-            />
+          <div className="web-view-scroll" style={{ flex: 1, overflowY: 'auto', background: 'transparent' }}>
+            <Suspense fallback={<LazyPanelFallback />}>
+              <McpServersView
+                config={settingsConfig || DEFAULT_CONFIG}
+                updateField={handleUpdateSettingsField}
+                mcpName={mcpName}
+                setMcpName={setMcpName}
+                mcpCmd={mcpCmd}
+                setMcpCmd={setMcpCmd}
+                mcpArgs={mcpArgs}
+                setMcpArgs={setMcpArgs}
+                mcpEnv={mcpEnv}
+                setMcpEnv={setMcpEnv}
+                mcpIcon={mcpIcon}
+                setMcpIcon={setMcpIcon}
+                handleAddMcpServer={handleAddMcpServer}
+                handleRemoveMcpServer={handleRemoveMcpServer}
+                detectTools={detectSystemTools}
+                onReauth={reauthMcpServer}
+                listServerTools={listMcpServerTools}
+              />
+            </Suspense>
           </div>
         )}
         {view === 'plugins' && (
-          <div style={{ flex: 1, overflowY: 'auto', background: 'transparent' }}>
-            <PluginsView
-              config={settingsConfig || DEFAULT_CONFIG}
-              updateField={handleUpdateSettingsField}
-              handleConnectPlugin={handleConnectPlugin}
-            />
+          <div className="web-view-scroll" style={{ flex: 1, overflowY: 'auto', background: 'transparent' }}>
+            <Suspense fallback={<LazyPanelFallback />}>
+              <PluginsView
+                config={settingsConfig || DEFAULT_CONFIG}
+                updateField={handleUpdateSettingsField}
+                handleConnectPlugin={handleConnectPlugin}
+              />
+            </Suspense>
           </div>
         )}
         {view === 'cron' && (
-          <div style={{ flex: 1, overflowY: 'auto', background: 'transparent' }}>
-            <ScheduledTasksView
-              listCronJobs={listCronJobs}
-              addCronJob={addCronJob}
-              removeCronJob={removeCronJob}
-              setCronJobEnabled={setCronJobEnabled}
-              workspacePath={workspacePath}
-            />
+          <div className="web-view-scroll" style={{ flex: 1, overflowY: 'auto', background: 'transparent' }}>
+            <Suspense fallback={<LazyPanelFallback />}>
+              <ScheduledTasksView
+                listCronJobs={listCronJobs}
+                addCronJob={addCronJob}
+                removeCronJob={removeCronJob}
+                setCronJobEnabled={setCronJobEnabled}
+                workspacePath={workspacePath}
+              />
+            </Suspense>
           </div>
         )}
         {view === 'link' && (
-          <div style={{ flex: 1, overflowY: 'auto', background: 'transparent' }}>
-            <LinkedFoldersView
-              listLinkedFolders={listLinkedFolders}
-              addLinkedFolder={addLinkedFolder}
-              removeLinkedFolder={removeLinkedFolder}
-              // Desktop: native Tauri picker. Web: asks `mint web` (same
-              // machine) to open its own dialog via a loopback-gated route.
-              selectFolder={selectLinkedFolderPath}
-            />
+          <div className="web-view-scroll" style={{ flex: 1, overflowY: 'auto', background: 'transparent' }}>
+            <Suspense fallback={<LazyPanelFallback />}>
+              <LinkedFoldersView
+                listLinkedFolders={listLinkedFolders}
+                addLinkedFolder={addLinkedFolder}
+                removeLinkedFolder={removeLinkedFolder}
+                linkedFolderStatus={linkedFolderStatus}
+                refreshLinkedFolder={refreshLinkedFolder}
+                listLinkedFolderNotes={listLinkedFolderNotes}
+                readLinkedFolderNote={readLinkedFolderNote}
+                openLinkedFolderNote={openLinkedFolderNote}
+                canOpenNote={isTauriRuntime()}
+                // Desktop: native Tauri picker. Web: asks `mint web` (same
+                // machine) to open its own dialog via a loopback-gated route.
+                selectFolder={selectLinkedFolderPath}
+              />
+            </Suspense>
           </div>
         )}
-        <PicturesLibrary view={view} pictures={pictures} onSetView={changeView} onRefreshPictures={refreshPictures} />
-        <ImageStudioPanel
-          view={view}
-          onRefreshPictures={refreshPictures}
-          onSendToChat={(_url, imgPrompt) => {
-            changeView('chat')
-            setMessage(imgPrompt)
-          }}
-          onToggleMobileSidebar={() => setMobileSidebarOpen(!mobileSidebarOpen)}
-        />
-        <VeoStudioPanel
-          view={view}
-          onSendToChat={(vidPrompt) => {
-            changeView('chat')
-            setMessage(vidPrompt)
-          }}
-          onToggleMobileSidebar={() => setMobileSidebarOpen(!mobileSidebarOpen)}
-        />
+        {view === 'code' && (
+          <div className="web-view-scroll" style={{ flex: 1, overflowY: 'auto', background: 'transparent' }}>
+            <Suspense fallback={<LazyPanelFallback />}>
+              <CliSessionsView
+                chatSessions={chatSessions}
+                activeConversationId={conversationId}
+                workspacePath={workspacePath}
+                recentWorkspacePaths={availableWorkspacePaths}
+                onSelectFolder={selectCodeHubFolder}
+                onSelectSession={(id) => {
+                  selectConversation(id)
+                }}
+                onDeleteSession={deleteConversation}
+                onRenameSession={renameConversation}
+                onRefreshSessions={refreshChatSessions}
+                onShowToast={showToast}
+              />
+            </Suspense>
+          </div>
+        )}
+        {view === 'pictures' && (
+          <Suspense fallback={<LazyPanelFallback />}>
+            <LibraryPage chatId={conversationId} onClose={() => changeView('chat')} onOpenConversation={id => { void selectConversation(id) }} />
+          </Suspense>
+        )}
+        {view === 'imagine' && (
+          <Suspense fallback={<LazyPanelFallback />}>
+            <ImageStudioPanel
+              view={view}
+              onSendToChat={async (imagePath, imgPrompt) => {
+                try {
+                  const response = await fetch(convertFileSrc(imagePath))
+                  if (!response.ok) throw new Error(`Unable to load image (${response.status})`)
+                  const blob = await response.blob()
+                  const imageName = imagePath.split(/[\\/]/).pop() || 'generated-image.png'
+                  const dataUri = await readImage(new File([blob], imageName, { type: blob.type || 'image/png' }))
+                  const previewDataUri = await createTrimmedImagePreview(dataUri).catch(() => dataUri)
+
+                  changeView('chat')
+                  conversationActions.compose(imgPrompt)
+                  conversationActions.attachImage({ dataUri, previewDataUri, name: imageName })
+                } catch (error) {
+                  showToast(`Could not attach image: ${errorMessage(error)}`)
+                }
+              }}
+            />
+          </Suspense>
+        )}
+        {view === 'veo' && (
+          <Suspense fallback={<LazyPanelFallback />}>
+            <VeoStudioPanel
+              view={view}
+              onSendToChat={(vidPrompt) => {
+                changeView('chat')
+                conversationActions.compose(vidPrompt)
+              }}
+            />
+          </Suspense>
+        )}
       </div>
       <div className={`startup-loading ${startupReady ? 'is-hidden' : ''}`} aria-live="polite" aria-busy={!startupReady}>
         <div className="startup-loading-content">
@@ -1979,54 +2157,47 @@ export default function MintDashboard() {
           <div className="startup-loading-text">Loading Mint Agent</div>
         </div>
       </div>
-      {error && (
-        <div className="mint-error" style={{ position: 'absolute', bottom: '20px', right: '20px', zIndex: 100, margin: 0, boxShadow: '0 8px 24px rgba(0,0,0,0.3)', display: 'flex', alignItems: 'center', gap: '8px' }}>
-          <span>{error}</span>
-          <button onClick={() => setError('')} style={{ background: 'transparent', border: 0, color: 'white', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', padding: 0 }}>
-            <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>
-          </button>
-        </div>
-      )}
 
-      <CommandPalette
-        isOpen={isSearchOpen}
-        onClose={() => setIsSearchOpen(false)}
-        onSelectChat={(chatId) => {
-          selectConversation(chatId)
-          setIsSearchOpen(false)
-        }}
-        onNewChat={() => {
-          clearHistory('New chat')
-          setIsSearchOpen(false)
-        }}
-        onSelectWorkspace={isDesktopApp ? selectWorkspace : undefined}
-        onOpenSettings={() => {
-          changeView('settings')
-          setIsSearchOpen(false)
-        }}
-        onChangeView={(targetView) => {
-          changeView(targetView)
-          setIsSearchOpen(false)
-        }}
-        onChangeModel={(model) => {
-          handleUpdateSettingsField('model', model)
-          setToastMessage(`Switched model to ${model}`)
-        }}
-        onChangeProvider={(provider) => {
-          handleUpdateSettingsField('provider', provider)
-          setToastMessage(`Switched provider to ${provider}`)
-        }}
-        onExecuteSlash={(cmd) => {
-          setMessage(cmd + ' ')
-          setIsSearchOpen(false)
-        }}
-        chatSessions={chatSessions}
-        currentChatId={conversationId}
-        workspacePath={workspacePath}
-      />
+      {isSearchOpen && (
+        <Suspense fallback={null}>
+          <CommandPalette
+            isOpen
+            onClose={() => setIsSearchOpen(false)}
+            onSelectChat={(chatId) => {
+              selectConversation(chatId)
+              setIsSearchOpen(false)
+            }}
+            onNewChat={() => {
+              clearHistory('New chat')
+              setIsSearchOpen(false)
+            }}
+            onSelectWorkspace={isDesktopApp ? selectWorkspace : undefined}
+            onOpenSettings={() => {
+              changeView('settings')
+              setIsSearchOpen(false)
+            }}
+            onChangeView={(targetView) => {
+              changeView(targetView)
+              setIsSearchOpen(false)
+            }}
+            onChangeModel={(model) => {
+              handleUpdateSettingsField('model', model)
+              setToastMessage(`Switched model to ${model}`)
+            }}
+            onChangeProvider={(provider) => {
+              handleUpdateSettingsField('provider', provider)
+              setToastMessage(`Switched provider to ${provider}`)
+            }}
+            onExecuteSlash={(cmd) => {
+              conversationActions.compose(cmd + ' ')
+              setIsSearchOpen(false)
+            }}
+            chatSessions={chatSessions}
+            currentChatId={conversationId}
+            workspacePath={workspacePath}
+          />
+        </Suspense>
+      )}
     </div>
   )
 }