@pheem49/mint 1.15.0 → 1.17.0

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

@@ -0,0 +1,2182 @@
+import { createWorkspacePreviewOpener } 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 {
+  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, listChatSessions, pendingCompanionChat,
+} = 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 '../chat/ChatPanel'
+import ScreenCaptureDialog from '../studio/ScreenCaptureDialog'
+import DashboardSidebar, { type DashboardView } from './DashboardSidebar'
+import DesktopTitlebar from './DesktopTitlebar'
+import ErrorNotice from './ErrorNotice'
+import type { ToolSurface } from '../workspace/ToolSurfacePage'
+import SessionSources from '../workspace/SessionSources'
+import { shouldPollSessionSources, useSessionSources } from '../../utils/useSessionSources'
+import { useLatestCallback } from '../../utils/useLatestCallback'
+import { PreviewObjectUrls } from '../../utils/previewObjectUrls'
+import {
+  errorMessage,
+  readImage,
+  readDocument,
+  createTrimmedImagePreview,
+  createObjectUrlPreview,
+  applyThemeStyles,
+} from '../../utils/ui'
+import { workspacePaths } from '../../utils/workspaces'
+import { workspaceListPreferences } from '../../utils/workspaceListPreferences'
+import { executeSlashCommand } from '../../utils/slashCommandProcessor'
+import { captureScreenForChat } from '../../utils/screenCapture'
+import { useConversationCoordinator } from '../../conversation/useConversationCoordinator'
+import { isPersistedConversation, navigateToSavedConversation } from '../../conversation/projectNavigation'
+import type { PromptOptions } from '../../conversation/lifecycle'
+
+
+
+import { DEFAULT_CONFIG, migrateFontFamily, migrateTypographyScale } from '../../constants/config'
+import { BackgroundTerminals } from '../workspace/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 {
+    window.localStorage.setItem(LAST_ACTIVE_TIME_KEY, Date.now().toString())
+  } catch {
+    /* ignore */
+  }
+}
+
+function isDesktopRecentlyActive(): boolean {
+  if (typeof window === 'undefined') return false
+  if (!isTauriRuntime()) return false
+  const lastActiveStr = window.localStorage.getItem(LAST_ACTIVE_TIME_KEY)
+  if (!lastActiveStr) return false
+  const lastActive = parseInt(lastActiveStr, 10)
+  if (isNaN(lastActive) || lastActive <= 0) return false
+
+  const now = Date.now()
+  const diff = now - lastActive
+  if (diff < 0 || diff > DESKTOP_INACTIVITY_THRESHOLD_MS) {
+    return false
+  }
+
+  // Also verify same calendar day
+  const lastDate = new Date(lastActive).toDateString()
+  const today = new Date(now).toDateString()
+  return lastDate === today
+}
+
+// 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:'
+function readDraft(id: string | null | undefined): string {
+  if (!id) return ''
+  try {
+    return window.localStorage.getItem(`${DRAFT_KEY_PREFIX}${id}`) || ''
+  } catch {
+    return ''
+  }
+}
+const SIDEBAR_DEFAULT_WIDTH = 264
+const SIDEBAR_MIN_WIDTH = 200
+const SIDEBAR_MAX_WIDTH = 420
+/** Drag the sidebar edge past this width and it snaps fully closed on release. */
+const SIDEBAR_COLLAPSE_THRESHOLD = 170
+
+function createConversationId() {
+  const random = Math.random().toString(36).slice(2, 10)
+  return `conversation-${Date.now().toString(36)}-${random}`
+}
+
+function getConversationIdFromUrl(): string | null {
+  if (typeof window === 'undefined') return null
+  const pathname = window.location.pathname || ''
+  const hash = (window.location.hash || '').replace(/^#/, '')
+  const target = pathname || hash
+
+  const match = target.match(/^\/chat\/(.+)$/i) || target.match(/^\/c\/(.+)$/i)
+  if (match && match[1]) {
+    return decodeURIComponent(match[1])
+  }
+
+  const searchParams = new URLSearchParams(window.location.search)
+  const queryId = searchParams.get('id')
+  if (queryId) return queryId
+
+  return null
+}
+
+function isRootOrNewChatRoute(): boolean {
+  if (typeof window === 'undefined') return true
+  const pathname = (window.location.pathname || '').replace(/\/+$/, '')
+  const hash = (window.location.hash || '').replace(/^#\/?/, '').replace(/\/+$/, '')
+  const target = (pathname || hash).toLowerCase()
+
+  // Explicit conversation ID specified in URL
+  if (getConversationIdFromUrl()) {
+    return false
+  }
+
+  // Explicit other panel view (skills, mcp, plugins, etc.)
+  if (
+    target.includes('skills') ||
+    target.includes('mcp') ||
+    target.includes('plugins') ||
+    target.includes('picture') ||
+    target.includes('image-studio') ||
+    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
+  }
+
+  // Root or generic chat route without specific conversation ID
+  return !target || target === '' || target === '/chat' || target === 'chat' || target === '/index.html' || target === 'index.html'
+}
+
+function activeConversationId() {
+  const fromUrl = getConversationIdFromUrl()
+  if (fromUrl) {
+    window.localStorage.setItem(ACTIVE_CONVERSATION_ID_KEY, fromUrl)
+    touchActiveTimestamp()
+    return fromUrl
+  }
+
+  // Desktop Smart Inactivity:
+  // On Desktop App (Tauri), if the user was active recently (within 30 mins and on the same calendar day),
+  // resume the previous conversation so a quick window close/reopen or system restart doesn't drop context.
+  if (isTauriRuntime() && isDesktopRecentlyActive()) {
+    const existing = window.localStorage.getItem(ACTIVE_CONVERSATION_ID_KEY)
+    if (existing) {
+      touchActiveTimestamp()
+      return existing === 'conversation-default' ? 'cli' : existing
+    }
+  }
+
+  // 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()) {
+    const next = createConversationId()
+    touchActiveTimestamp()
+    return next
+  }
+
+  const existing = window.localStorage.getItem(ACTIVE_CONVERSATION_ID_KEY)
+  if (existing === 'conversation-default') {
+    window.localStorage.setItem(ACTIVE_CONVERSATION_ID_KEY, 'cli')
+    touchActiveTimestamp()
+    return 'cli'
+  }
+  if (existing) {
+    touchActiveTimestamp()
+    return existing
+  }
+  const next = createConversationId()
+  touchActiveTimestamp()
+  return next
+}
+
+const MOCK_WELCOME_INTERACTION = {
+  id: -1,
+  userText: '',
+  aiText: `Hi there! I'm Mint, your AI assistant! 🎯✨ I'm here and ready to help you with whatever you need. I've been organizing some background data to make things smoother for you. 💖\n\nBut the moment you start chatting with me, I'll put everything aside and focus on you! Is there something I can help you with today, or would you like to chat about something special? Let's do this! 🚀💪`,
+  provider: 'gemini',
+  model: 'gemini-3-flash-preview',
+  createdAt: new Date().toISOString(),
+}
+
+
+import { isSupportedDocument } from '../../utils/documentTypes'
+import { useProactiveSuggestions } from '@/proactiveSuggestions'
+
+const WorkspacePanel = lazy(() => import('@/components/WorkspacePanel'))
+const ToolSurfacePage = lazy(() => import('../workspace/ToolSurfacePage'))
+const SkillsView = lazy(() => import('../extensions/SkillsView'))
+const ScheduledTasksView = lazy(() => import('../extensions/ScheduledTasksView'))
+const LinkedFoldersView = lazy(() => import('../extensions/LinkedFoldersView'))
+const McpServersView = lazy(() => import('../extensions/McpServersView'))
+const PluginsView = lazy(() => import('../extensions/PluginsView'))
+const CliSessionsView = lazy(() => import('../extensions/CliSessionsView'))
+const LibraryPage = lazy(() => import('../studio/LibraryPage'))
+const ImageStudioPanel = lazy(() => import('../studio/ImageStudioPanel'))
+const VeoStudioPanel = lazy(() => import('../studio/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'
+  const hash = (window.location.hash || '').toLowerCase().replace(/^#/, '')
+  const pathname = (window.location.pathname || '').toLowerCase()
+  const target = hash || pathname
+
+  if (target.includes('skills')) return 'skills'
+  if (target.includes('mcp')) return 'mcp'
+  if (target.includes('plugins')) return 'plugins'
+  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'
+}
+
+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 '/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'
+}
+
+/** Keeps a desktop/browser notification body to one readable line. */
+function truncateForNotification(text: string, maxChars = 120): string {
+  const clean = text.replace(/\s+/g, ' ').trim()
+  return clean.length > maxChars ? `${clean.slice(0, maxChars)}…` : clean
+}
+
+/** One-line plain-text summary of an AgentApproval for a notification body
+ * — ApprovalCard's own renderApprovalDetails returns JSX, not text, so
+ * this is a separate, notification-only summary. AgentApproval serializes
+ * as a single-key-tagged object per variant, e.g. {"WriteFile": {path, ...}}. */
+function describeApproval(payload: any): string {
+  const entry = Object.entries(payload?.approval ?? {})[0]
+  const kind = entry?.[0]
+  const detail: any = entry?.[1]
+  switch (kind) {
+    case 'WriteFile': return `Write to ${detail?.path}?`
+    case 'ApplyPatch': return `Edit ${detail?.path}?`
+    case 'RunShell': return `Run: ${detail?.command}`
+    case 'NoteWrite': return `Save note to ${detail?.path}?`
+    case 'RunPlugin': return `Run plugin: ${detail?.name}?`
+    case 'McpTool': return `Use ${detail?.tool} on ${detail?.server}?`
+    case 'UserApproval': return detail?.title ?? 'Approval needed'
+    case 'AskUser': return detail?.question ?? 'Mint has a question'
+    case 'ExitPlanMode':
+    case 'EnterPlanMode':
+      return 'Plan mode change needs approval'
+    default: return 'Mint needs your approval to continue'
+  }
+}
+
+export default function MintDashboard() {
+  const isDesktopApp = isTauriRuntime()
+  const [view, setViewState] = useState<DashboardView>(getInitialViewFromUrl)
+  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.
+  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,
+    queuedPrompts, queuePaused,
+    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)
+    setViewState((prev) => {
+      const next = typeof newView === 'function' ? newView(prev) : newView
+      if (next === 'settings') {
+        if ((window as any).api?.openSettings) {
+          (window as any).api.openSettings()
+        } else {
+          if (window.location.pathname !== '/settings') {
+            window.history.pushState({}, '', '/settings')
+          }
+        }
+        return prev
+      }
+      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)
+      }
+      return mappedView
+    })
+  }
+
+  const savedNavigationEpoch = useRef(0)
+  useEffect(() => () => { savedNavigationEpoch.current += 1 }, [])
+  const savedNavigationRef = useRef<(id: string) => Promise<void>>(async () => {})
+  savedNavigationRef.current = async (id: string) => {
+    const epoch = ++savedNavigationEpoch.current
+    try {
+      const opened = await navigateToSavedConversation(id, {
+        listSessions: listChatSessions,
+        openSession: (session, view) => selectConversation(session.id, session, view),
+        isCurrent: () => savedNavigationEpoch.current === epoch,
+      })
+      if (!opened && savedNavigationEpoch.current === epoch) {
+        setError('This conversation no longer exists. Choose another conversation.')
+        changeView('chat')
+        setMobileSidebarOpen(true)
+      }
+    } catch (reason) { if (savedNavigationEpoch.current === epoch) setError(errorMessage(reason)) }
+  }
+
+  useEffect(() => {
+    const handleUrlChange = () => {
+      savedNavigationEpoch.current += 1
+      if (window.location.hash === '#' || window.location.hash === '#/') {
+        window.history.replaceState({}, '', window.location.pathname + window.location.search)
+      }
+      const pathname = (window.location.pathname || '').toLowerCase()
+      const hash = (window.location.hash || '').toLowerCase()
+      if (pathname.includes('/settings') || hash.includes('/settings')) return
+      const nextView = getInitialViewFromUrl()
+      setViewState(nextView)
+
+      const urlSessionId = getConversationIdFromUrl()
+      if (urlSessionId && urlSessionId !== conversationId) {
+        void savedNavigationRef.current(urlSessionId)
+      } else if (!urlSessionId && isRootOrNewChatRoute()) {
+        const next = createConversationId()
+        activateConversation(next)
+      }
+    }
+    window.addEventListener('popstate', handleUrlChange)
+    window.addEventListener('hashchange', handleUrlChange)
+    return () => {
+      window.removeEventListener('popstate', handleUrlChange)
+      window.removeEventListener('hashchange', handleUrlChange)
+    }
+  }, [conversationId, workspacePath])
+
+  useEffect(() => {
+    touchActiveTimestamp()
+    const handleActivity = () => touchActiveTimestamp()
+    window.addEventListener('beforeunload', handleActivity)
+    document.addEventListener('visibilitychange', handleActivity)
+    window.addEventListener('focus', handleActivity)
+    return () => {
+      window.removeEventListener('beforeunload', handleActivity)
+      document.removeEventListener('visibilitychange', handleActivity)
+      window.removeEventListener('focus', handleActivity)
+    }
+  }, [])
+  const [status, setStatus] = useState<RuntimeStatus | null>(null)
+  const [error, setError] = useState('')
+  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)
+    const openCompanionChat = async () => {
+      try {
+        const chatId = await pendingCompanionChat()
+        if (!chatId || disposed) return
+        initialRouteValidated.current = true
+        await savedNavigationRef.current(chatId)
+        if (!disposed) await pendingCompanionChat(chatId)
+      } catch (reason) { if (!disposed) setError(errorMessage(reason)) }
+    }
+    if (isTauriRuntime()) {
+      register(listen('companion-open-chat', () => { void openCompanionChat() }).then(unlisten => {
+        if (!disposed) void openCompanionChat()
+        return unlisten
+      }))
+    }
+    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 liveExtendedThinkingOpenRef = useRef(true)
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => window.localStorage.getItem('mint:sidebar-collapsed') === 'true')
+  const [toolSurfaces, setToolSurfaces] = useState<ToolSurface[]>([])
+  const toolSurfacesRef = useRef(toolSurfaces)
+  toolSurfacesRef.current = toolSurfaces
+  const workspacePreviewOpener = useRef<ReturnType<typeof createWorkspacePreviewOpener> | null>(null)
+  const previewObjectUrls = useRef(new PreviewObjectUrls())
+  useEffect(() => {
+    previewObjectUrls.current = new PreviewObjectUrls()
+    return () => previewObjectUrls.current.dispose()
+  }, [])
+  useEffect(() => {
+    previewObjectUrls.current.update(toolSurfaces.flatMap(surface => surface.kind === 'preview' ? [surface.artifact] : []))
+  }, [toolSurfaces])
+  const [activeSurfaceId, setActiveSurfaceId] = useState<string | null>(null)
+  const [toolsPanelOpen, setToolsPanelOpen] = useState(false)
+  const sessionSources = useSessionSources(
+    conversationId,
+    streamingConversationId === conversationId ? agentProgress : [],
+    shouldPollSessionSources(toolsPanelOpen, activeSurfaceId),
+  )
+  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 [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 initialRouteValidated = useRef(false)
+  useEffect(() => {
+    if (!dashboardDataReady || initialRouteValidated.current) return
+    initialRouteValidated.current = true
+    const chatId = getConversationIdFromUrl()
+    if (chatId) void savedNavigationRef.current(chatId)
+  }, [dashboardDataReady])
+  const [startupTimedOut, setStartupTimedOut] = useState(false)
+  const [settingsConfig, setSettingsConfig] = useState<any>(null)
+  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 { proactiveSuggestion, dismissProactiveSuggestion, handleProactiveAction } = useProactiveSuggestions((message) => setError(message))
+  const startupReady = dashboardDataReady || startupTimedOut
+
+  const handleUpdateSettingsField = async (field: string, value: any) => {
+    const currentConfig = notificationConfigRef.current || settingsConfig || DEFAULT_CONFIG
+    const nextConfig = { ...currentConfig, [field]: value }
+    notificationConfigRef.current = nextConfig
+    setSettingsConfig(nextConfig)
+
+    if ((window as any).settingsApi) {
+      await (window as any).settingsApi.saveSettings(nextConfig)
+    } else {
+      try {
+        await setProfileValue('user-settings', JSON.stringify(nextConfig))
+      } catch (e) {
+        console.error('Failed to save settings field:', e)
+      }
+    }
+  }
+
+  const handleConnectPlugin = (_plugin: string) => {}
+
+  const [isSearchOpen, setIsSearchOpen] = useState(false)
+  // A pending `needs_choice` from the shared slash engine — rendered as a chip bar.
+  const [pendingSlashChoice, setPendingSlashChoice] = useState<
+    { command: string; title: string; options: { label: string; value: string }[] } | null
+  >(null)
+
+  useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
+        event.preventDefault()
+        setIsSearchOpen((prev) => !prev)
+      } else if (event.key === 'Escape') {
+        setIsSearchOpen(false)
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [])
+
+
+  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 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 {
+      await update
+    } catch (e) {
+      console.error('Failed to update session workspace:', e)
+      setError(errorMessage(e))
+    } finally {
+      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([
+      getRuntimeStatus().then(setStatus),
+      refreshHistory(),
+      refreshChatSessions(),
+      window.settingsApi?.getSettings()
+        .then((loaded: any) => {
+          const migrated = migrateFontFamily(migrateTypographyScale(loaded))
+          setSettingsConfig(migrated)
+          applyThemeStyles({ ...DEFAULT_CONFIG, ...migrated })
+        }),
+    ]).then((results) => {
+      const failure = results.find((result) => result.status === 'rejected')
+      if (failure?.status === 'rejected') setError(errorMessage(failure.reason))
+      setDashboardDataReady(true)
+    })
+    const unlistenSpotlight = window.api.onSpotlightToChat((query) => {
+      changeView('chat')
+      conversationActions.compose(query)
+    })
+    const handleWindowFocus = () => {
+      getRuntimeStatus().then(setStatus).catch(() => {})
+      window.settingsApi?.getSettings?.().then((loaded: any) => {
+        if (loaded) {
+          const migrated = migrateFontFamily(migrateTypographyScale(loaded))
+          setSettingsConfig(migrated)
+          applyThemeStyles(migrated)
+        }
+      }).catch(() => {})
+      window.api?.clearAiNotifications?.()
+    }
+    window.addEventListener('focus', handleWindowFocus)
+
+    window.api?.onSettingsChanged?.((loaded: any) => {
+      const migrated = migrateFontFamily(migrateTypographyScale(loaded))
+      setSettingsConfig(migrated)
+      applyThemeStyles(migrated)
+      getRuntimeStatus().then(setStatus).catch(() => {})
+    })
+
+    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?.())
+    }
+  }, [])
+
+  useEffect(() => {
+    const timer = window.setTimeout(() => setStartupTimedOut(true), 10000)
+    return () => window.clearTimeout(timer)
+  }, [])
+
+  useEffect(() => {
+    if (view === 'workspace' && !agentMode) updateAgentMode(true)
+  }, [view, agentMode])
+
+  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: 'sources' | 'mods' | 'background') => {
+    setToolsPanelOpen(true)
+    setToolSurfaces(current => current.some(surface => surface.id === kind) ? current : [...current, { id: kind, kind, title: kind === 'sources' ? 'Sources' : 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 === 'sources' || 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('../../utils/artifacts').ArtifactFile) => {
+    if (!previewObjectUrls.current.accept(artifact)) return
+    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) => {
+    setToolsPanelOpen(true)
+    workspacePreviewOpener.current ??= createWorkspacePreviewOpener({
+      readWorkspaceFile: (file, workspace) => runtimePlatform.readWorkspaceFile(file, workspace),
+      readWorkspaceImage: (file, workspace) => runtimePlatform.readWorkspaceImage(file, workspace),
+      readWorkspaceMedia: (file, workspace) => runtimePlatform.readWorkspaceMedia(file, workspace),
+      startHtmlPreview: (workspace, file) => workspacePlatform.startHtmlPreview(workspace, file),
+      selectIfOpen: id => {
+        if (!toolSurfacesRef.current.some(surface => surface.id === id)) return false
+        setActiveSurfaceId(id)
+        return true
+      },
+      open: openArtifactSurface,
+    })
+    await workspacePreviewOpener.current(root, path)
+  }
+
+  const openReviewSurface = (review: Extract<ToolSurface, { kind: 'review' }>) => {
+    setToolsPanelOpen(true)
+    setToolSurfaces((current) => [...current.filter((surface) => surface.id !== review.id), review])
+    setActiveSurfaceId(review.id)
+  }
+
+  const openConversationReview = () => {
+    const conversationReviewChanges = mergeFileChanges([
+      ...interactions.map((interaction) => {
+        const interactionId = String(interaction.id)
+        return parseFileChangesFromProgress(agentActivitySnapshots[interactionId] ?? interaction.agentActivity ?? [])
+      }),
+      parseFileChangesFromProgress(agentProgress),
+    ])
+    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)
+      return
+    }
+    const next = !sidebarCollapsed
+    window.localStorage.setItem('mint:sidebar-collapsed', String(next))
+    setSidebarCollapsed(next)
+    setMobileSidebarOpen(false)
+  }
+
+  const handleSidebarResize = (width: number) => {
+    setSidebarWidth(Math.max(SIDEBAR_COLLAPSE_THRESHOLD, Math.min(SIDEBAR_MAX_WIDTH, width)))
+  }
+
+  const handleSidebarResizeEnd = (width: number) => {
+    if (width < SIDEBAR_COLLAPSE_THRESHOLD) {
+      // Dragged small enough — snap fully closed instead of leaving a sliver.
+      setSidebarWidth(SIDEBAR_DEFAULT_WIDTH)
+      window.localStorage.setItem('mint:sidebar-width', String(SIDEBAR_DEFAULT_WIDTH))
+      window.localStorage.setItem('mint:sidebar-collapsed', 'true')
+      setSidebarCollapsed(true)
+      return
+    }
+    const clamped = Math.max(SIDEBAR_MIN_WIDTH, Math.min(SIDEBAR_MAX_WIDTH, width))
+    setSidebarWidth(clamped)
+    window.localStorage.setItem('mint:sidebar-width', String(clamped))
+  }
+
+  const updateAgentMode = (enabled: boolean) => {
+    window.localStorage.setItem('mint:agent-mode', String(enabled))
+    setAgentMode(enabled)
+  }
+
+  const updatePlanMode = (enabled: boolean) => {
+    window.localStorage.setItem('mint:plan-mode', String(enabled))
+    setPlanMode(enabled)
+  }
+
+  const updateWorkspacePath = (path: string, persist = true) => {
+    const next = path.trim()
+    conversationActions.selectWorkspace(next)
+    const activeId = conversationActions.getSnapshot().conversationId
+    if (persist && isPersistedConversation(activeId, chatSessions)) {
+      void handleUpdateSessionWorkspace(activeId, next || null)
+    }
+  }
+
+  const handleApproval = conversationActions.resolveApproval
+  const handleCancelMessage = conversationActions.cancel
+
+  async function sendPrompt(promptText: string, options: PromptOptions = {}) {
+    if (conversationActions.getSnapshot().sending) return
+    setError('')
+    liveThinkingOpenRef.current = true
+    liveExtendedThinkingOpenRef.current = true
+    setThinkingExpanded(current => ({ ...current, live: true, 'live-extended': true }))
+    await conversationActions.sendPrompt(promptText, { ...options, agentMode, planMode })
+  }
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    const trimmed = conversationActions.getSnapshot().message.trim()
+    const currentImages = imageAttachments
+    const currentVideos = videoAttachments
+    const currentDocument = documentAttachment
+    const hasAttachments = currentImages.length > 0 || currentVideos.length > 0 || Boolean(currentDocument)
+    if (!trimmed && !hasAttachments) return
+
+    if (sending) {
+      conversationActions.queuePrompt({
+        text: trimmed,
+        imageAttachments: currentImages.map(img => ({ dataUri: img.dataUri, name: img.name })),
+        videoAttachments: currentVideos.map(vid => ({ dataUri: vid.dataUri, name: vid.name })),
+        documentAttachment: currentDocument,
+      })
+      conversationActions.clearComposer()
+      return
+    }
+
+    if (trimmed.startsWith('/')) {
+      // Shared Rust engine first (mint_core::slash). Anything it doesn't own
+      // 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, conversationId)
+      } catch {
+        engineResp = null
+      }
+      if (engineResp && engineResp.kind !== 'not_handled') {
+        conversationActions.clearComposer()
+        await handleEngineSlashResponse(trimmed, engineResp)
+        return
+      }
+
+      const slashResult = executeSlashCommand(trimmed)
+
+      if (slashResult.handled) {
+        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) conversationActions.attachImage({ dataUri: uri, name: 'Clipboard Image' })
+          }).catch(() => {})
+          return
+        } else if (slashResult.action === 'generate_veo') {
+          changeView('veo')
+          return
+        } else if (slashResult.action === 'open_settings') {
+          window.location.hash = '#/settings'
+          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) {
+          const systemMsg = {
+            id: Date.now(),
+            userText: trimmed,
+            aiText: slashResult.systemText,
+            createdAt: new Date().toISOString(),
+            provider: 'system',
+            model: 'mint-cli',
+          }
+          conversationActions.appendInteraction(systemMsg)
+          saveSystemInteraction(conversationId, trimmed, slashResult.systemText || '', 'system', 'mint-cli').catch(() => {})
+        }
+        return
+      }
+    }
+
+    const promptText = trimmed || (
+      currentImages.length > 0 ? (currentImages.length > 1 ? 'Describe these images.' : 'Describe this image.') :
+      currentVideos.length > 0 ? (currentVideos.length > 1 ? 'Describe these videos.' : 'Describe this video.') :
+      'Summarize this document.'
+    )
+    const mcpNames = Object.entries(settingsConfig?.mcpServers || {})
+      .filter(([, srv]: [string, any]) => srv?.disabled !== true)
+      .map(([name]) => name)
+    const pinnedServer = mcpNames.find((name) =>
+      new RegExp(`(^|\\s)@${name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}(\\s|$)`).test(trimmed)
+    )
+    await sendPrompt(promptText, {
+      imageAttachments: currentImages,
+      videoAttachments: currentVideos,
+      documentAttachment: currentDocument,
+      clearComposer: true,
+      pinnedMcpServer: pinnedServer,
+      forceAgentMode: Boolean(pinnedServer),
+    })
+  }
+
+  async function sendVoiceMessage(transcript: string, audioDataUri?: string | null) {
+    const promptText = transcript.trim() || 'Voice message'
+    if (!promptText || sending) return
+    await sendPrompt(promptText, {
+      audioDataUri,
+      systemInstruction: audioDataUri
+        ? 'The user attached a voice message. Listen to the audio and reply naturally in the same language as the user. Do not mention transcription or this instruction.'
+        : '',
+    })
+  }
+
+  async function selectImage(event: ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0]
+    if (!file) return
+    try {
+      const objectUrl = createObjectUrlPreview(file).objectUrl
+      const dataUri = await readImage(file)
+      const previewDataUri = await createTrimmedImagePreview(dataUri).catch(() => dataUri)
+      conversationActions.attachImage({ dataUri, previewDataUri, objectUrl, name: file.name })
+    } catch (reason) {
+      setError(errorMessage(reason))
+    } finally {
+      event.target.value = ''
+    }
+  }
+  const MAX_VIDEO_BYTES = 25 * 1024 * 1024 // 25 MB
+  async function selectVideo(event: ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0]
+    if (!file) return
+    try {
+      if (file.size > MAX_VIDEO_BYTES) {
+        setError(`Video is too large. Maximum allowed is ${Math.round(MAX_VIDEO_BYTES / (1024 * 1024))} MB.`)
+        return
+      }
+      const dataUri = await new Promise<string>((resolve, reject) => {
+        const reader = new FileReader()
+        reader.onload = () => resolve(reader.result as string)
+        reader.onerror = reject
+        reader.readAsDataURL(file)
+      })
+      conversationActions.attachVideo({ dataUri, name: file.name })
+    } catch (reason) {
+      setError(errorMessage(reason))
+    } finally {
+      event.target.value = ''
+    }
+  }
+
+  function pasteImage(clipboardData: DataTransfer) {
+    let file: File | null = null
+
+    if (clipboardData.files && clipboardData.files.length > 0) {
+      for (let i = 0; i < clipboardData.files.length; i++) {
+        const f = clipboardData.files[i]
+        if (f && f.type.startsWith('image/')) {
+          file = f
+          break
+        }
+      }
+    }
+
+    if (!file && clipboardData.items && clipboardData.items.length > 0) {
+      for (let i = 0; i < clipboardData.items.length; i++) {
+        const item = clipboardData.items[i]
+        if (item && item.type.startsWith('image/')) {
+          const f = item.getAsFile()
+          if (f) {
+            file = f
+            break
+          }
+        }
+      }
+    }
+
+    if (!file) {
+      if (isDesktopApp) {
+        // Fallback for Tauri desktop app where WebKitGTK/WebView clipboard paste events do not provide file handles
+        const now = Date.now()
+        if (now - lastNativePasteTimeRef.current > 100) {
+          lastNativePasteTimeRef.current = now
+          readClipboardImage().then((dataUri) => {
+            if (dataUri) {
+              const name = 'Pasted image'
+              createTrimmedImagePreview(dataUri)
+                .catch(() => dataUri)
+                .then((previewDataUri) => {
+                  conversationActions.attachImage({ dataUri, previewDataUri, name })
+                })
+            }
+          }).catch((err) => {
+            console.warn('Failed to read clipboard image via Tauri API:', err)
+          })
+        }
+      }
+      // No image in the clipboard (e.g. pasting plain text) — nothing more
+      // to do here regardless of platform. Must return before `readImage`
+      // below, which requires a real File and would otherwise be called
+      // with `file` still null on every non-image paste.
+      return false
+    }
+
+
+
+    readImage(file)
+      .then((dataUri) => {
+        const name = file.name && file.name !== 'image.png' ? file.name : 'Pasted image'
+        createTrimmedImagePreview(dataUri)
+          .catch(() => dataUri)
+          .then((previewDataUri) => {
+            conversationActions.attachImage({ dataUri, previewDataUri, name })
+          })
+      })
+      .catch((reason) => setError(errorMessage(reason)))
+    return true
+  }
+
+
+
+  async function selectDocument(event: ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0]
+    if (!file) return
+    try {
+      if (!isSupportedDocument(file.name)) {
+        throw new Error('Unsupported document type')
+      }
+      conversationActions.attachDocument({
+        filename: file.name,
+        dataUri: await readDocument(file),
+      })
+    } catch (reason) {
+      setError(errorMessage(reason))
+    } finally {
+      event.target.value = ''
+    }
+  }
+
+  function startWebSearch() {
+    updateAgentMode(true)
+    const currentMessage = conversationActions.getSnapshot().message.trim()
+    conversationActions.compose(currentMessage ? `Search web: ${currentMessage}` : 'Search web: ')
+  }
+
+  async function selectWorkspace(path?: string, showWorkspace = false) {
+    const targetView = isDesktopApp && (showWorkspace || view === 'workspace') ? 'workspace' : 'chat'
+    await conversationActions.selectProject(
+      async () => {
+        const selected = path || await selectLinkedFolderPath()
+        if (selected) workspaceListPreferences.restore(selected)
+        return selected
+      },
+      {
+        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 startLiveTranslation() {
+    setScreenCaptureOpen(false)
+    await new Promise<void>((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())))
+    try {
+      await window.api.startVision()
+    } catch (reason) {
+      setError(errorMessage(reason))
+    }
+  }
+
+  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()
+        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') {
+            window.history.pushState({}, '', '/chat')
+          }
+        }
+        return
+      } else {
+        if (!window.confirm(`${action} will clear the current conversation history. Continue?`)) return
+        await conversationActions.clearHistory()
+      }
+    } catch (reason) {
+      setError(errorMessage(reason))
+    }
+  }
+
+  // Append a synthetic "system" message to the current conversation — used by
+  // the slash-command dispatcher for `/help`-style output and `/cron` etc.
+  // listings. Mirrors the inline push in `handleSubmit`.
+  function pushSystemMessage(userText: string, aiText: string) {
+    const systemMsg = {
+      id: Date.now(),
+      userText,
+      aiText,
+      createdAt: new Date().toISOString(),
+      provider: 'system',
+      model: 'mint-cli',
+    }
+    conversationActions.appendInteraction(systemMsg)
+    saveSystemInteraction(conversationId, userText, aiText, 'system', 'mint-cli').catch(() => {})
+  }
+
+  // Map the shared engine's nav target onto a DashboardView.
+  function slashNavView(target: string): DashboardView {
+    switch (target) {
+      case 'linked_folders':
+        return 'link'
+      case 'cron':
+        return 'cron'
+      case 'skills':
+        return 'skills'
+      case 'plugins':
+        return 'plugins'
+      case 'mcp':
+        return 'mcp'
+      case 'veo':
+        return 'veo'
+      default:
+        return 'chat'
+    }
+  }
+
+  // Act on a response from the shared Rust slash engine (mint_core::slash).
+  async function handleEngineSlashResponse(userText: string, resp: SlashResponse) {
+    switch (resp.kind) {
+      case 'message':
+        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) 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
+        if (planModeChange) setPlanMode(planModeChange.enabled)
+        const providerChange = resp.effects.find((e) => e.kind === 'provider_changed') as
+          | { kind: 'provider_changed'; display: string }
+          | undefined
+        if (providerChange) {
+          // 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.
+          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 conversationActions.clearHistory().catch(() => {})
+        }
+        if (resp.markdown) pushSystemMessage(userText, resp.markdown)
+        if (resp.effects.some((e) => e.kind !== 'history_cleared' && e.kind !== 'workspace_changed')) {
+          // Desktop also gets a `settings-changed` push; refetch anyway so web stays in sync.
+          ;(window as any).settingsApi?.getSettings?.().then((c: any) => c && setSettingsConfig(c)).catch(() => {})
+          getRuntimeStatus().then(setStatus).catch(() => {})
+        }
+        break
+      }
+      case 'navigate':
+        if (resp.markdown) pushSystemMessage(userText, resp.markdown)
+        changeView(slashNavView(resp.target as any))
+        break
+      case 'forward_to_agent':
+        if (resp.plan_mode) setPlanMode(true)
+        if (resp.agent_mode) setAgentMode(true)
+        await sendPrompt(resp.prompt, { clearComposer: true })
+        break
+      case 'needs_choice':
+        setPendingSlashChoice({ command: resp.command, title: resp.title, options: resp.options })
+        break
+      case 'exit':
+        break
+    }
+  }
+
+  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, selectedSession?: ChatSession, targetView: 'chat' | 'workspace' = 'chat') {
+    savedNavigationEpoch.current += 1
+    window.localStorage.setItem(ACTIVE_CONVERSATION_ID_KEY, id)
+    touchActiveTimestamp()
+    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') {
+      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.startsWith('cli') && item.id !== 'conversation-default')
+      const currentChatId = conversationActions.getSnapshot().conversationId
+      const nextActive = id === currentChatId
+        ? (remaining[0]?.id ?? createConversationId())
+        : currentChatId
+
+      if (nextActive !== currentChatId) {
+        if (remaining.length > 0 && remaining[0]?.id) {
+          window.localStorage.setItem(ACTIVE_CONVERSATION_ID_KEY, nextActive)
+          if (typeof window !== 'undefined') {
+            window.history.replaceState({}, '', `/chat/${encodeURIComponent(nextActive)}`)
+          }
+        } else {
+          window.localStorage.removeItem(ACTIVE_CONVERSATION_ID_KEY)
+          if (typeof window !== 'undefined') {
+            window.history.replaceState({}, '', '/chat')
+          }
+        }
+        activateConversation(nextActive)
+        await conversationActions.refreshHistory()
+      }
+
+      await refreshChatSessions()
+    } catch (reason) {
+      setError(errorMessage(reason))
+    }
+  }
+
+  async function renameConversation(id: string, newTitle: string) {
+    if (!newTitle.trim()) return
+    try {
+      await renameChatSession(id, newTitle.trim())
+      await refreshChatSessions()
+    } catch (reason) {
+      setError(errorMessage(reason))
+    }
+  }
+
+  function formatProviderChangeText(provider: string, model: string) {
+    let providerName = provider
+    if (provider === 'gemini') providerName = 'Gemini'
+    else if (provider === 'openai') providerName = 'OpenAI'
+    else if (provider === 'openrouter') providerName = 'OpenRouter'
+    else if (provider === 'deepseek') providerName = 'DeepSeek'
+    else if (provider === 'anthropic') providerName = 'Claude'
+    else if (provider === 'huggingface') providerName = 'HF'
+    else if (provider === 'local_openai') providerName = 'Local'
+    else if (provider === 'ollama') providerName = 'Ollama'
+    else if (provider.startsWith('custom:')) {
+      const id = provider.replace(/^custom:/, '')
+      const cp = (settingsConfig?.customProviders ?? []).find((p: any) => p.id === id)
+      providerName = cp?.displayName || id
+    }
+
+    if (providerName && providerName === provider) {
+      providerName = providerName.charAt(0).toUpperCase() + providerName.slice(1)
+    }
+    return [providerName, model].filter(Boolean).join(' • ')
+  }
+
+  function getActiveModelName(config: any, provider: string) {
+    switch (provider) {
+      case 'gemini': return config.geminiModel || 'gemini-1.5-flash'
+      case 'openai': return config.openaiModel || 'gpt-4o'
+      case 'openrouter': return config.openrouterModel || 'anthropic/claude-3.5-sonnet'
+      case 'deepseek': return config.deepseekModel || 'deepseek-chat'
+      case 'anthropic': return config.anthropicModel || 'claude-3-5-sonnet-20240620'
+      case 'huggingface': return config.hfModel || 'meta-llama/Meta-Llama-3-8B-Instruct'
+      case 'local_openai': return config.localModelName || 'llama3'
+      case 'ollama': return config.ollamaModel || 'llama3:latest'
+      default: {
+        if (provider.startsWith('custom:')) {
+          const id = provider.replace(/^custom:/, '')
+          const cp = (config.customProviders ?? []).find((p: any) => p.id === id)
+          return (config.customModelSelections ?? {})[id] ?? cp?.models[0]?.modelId ?? ''
+        }
+        return ''
+      }
+    }
+  }
+
+  async function changeProvider(provider: string) {
+    try {
+      const config = await window.settingsApi.getSettings()
+      if (config.aiProvider === provider) return
+      config.aiProvider = provider
+      await window.settingsApi.saveSettings(config)
+      setSettingsConfig(config)
+      setStatus(await getRuntimeStatus())
+
+      // Record system event in chat history if conversation already has messages
+      const activeModel = getActiveModelName(config, provider)
+      const displayName = formatProviderChangeText(provider, activeModel)
+      if (interactions.length > 0) {
+        await saveSystemInteraction(conversationId, displayName, '', 'system', 'provider_change')
+        await refreshHistory()
+      }
+    } catch (reason) {
+      setError(errorMessage(reason))
+    }
+  }
+
+  async function changeModel(modelName: string) {
+    try {
+      const config = await window.settingsApi.getSettings()
+      const provider = config.aiProvider
+      const currentModel = getActiveModelName(config, provider)
+      if (currentModel === modelName) return
+      if (provider === 'gemini') {
+        config.geminiModel = modelName
+      } else if (provider === 'openai') {
+        config.openaiModel = modelName
+      } else if (provider === 'openrouter') {
+        config.openrouterModel = modelName
+      } else if (provider === 'deepseek') {
+        config.deepseekModel = modelName
+      } else if (provider === 'anthropic') {
+        config.anthropicModel = modelName
+      } else if (provider === 'huggingface') {
+        config.hfModel = modelName
+      } else if (provider === 'local_openai') {
+        config.localModelName = modelName
+      } else if (provider === 'ollama') {
+        config.ollamaModel = modelName
+      } else if (provider.startsWith('custom:')) {
+        const id = provider.replace(/^custom:/, '')
+        config.customModelSelections = {
+          ...(config.customModelSelections ?? {}),
+          [id]: modelName
+        }
+      }
+      await window.settingsApi.saveSettings(config)
+      setSettingsConfig(config)
+      setStatus(await getRuntimeStatus())
+
+      // Record system event in chat history if conversation already has messages
+      const displayName = formatProviderChangeText(provider, modelName)
+      if (interactions.length > 0) {
+        await saveSystemInteraction(conversationId, displayName, '', 'system', 'provider_change')
+        await refreshHistory()
+      }
+    } catch (reason) {
+      setError(errorMessage(reason))
+    }
+  }
+
+  async function changeProviderAndModel(provider: string, modelName: string) {
+    try {
+      const config = await window.settingsApi.getSettings()
+      config.aiProvider = provider
+      if (provider === 'gemini') {
+        config.geminiModel = modelName
+      } else if (provider === 'openai') {
+        config.openaiModel = modelName
+      } else if (provider === 'openrouter') {
+        config.openrouterModel = modelName
+      } else if (provider === 'deepseek') {
+        config.deepseekModel = modelName
+      } else if (provider === 'anthropic') {
+        config.anthropicModel = modelName
+      } else if (provider === 'huggingface') {
+        config.hfModel = modelName
+      } else if (provider === 'local_openai') {
+        config.localModelName = modelName
+      } else if (provider === 'ollama') {
+        config.ollamaModel = modelName
+      } else if (provider.startsWith('custom:')) {
+        const id = provider.replace(/^custom:/, '')
+        config.customModelSelections = {
+          ...(config.customModelSelections ?? {}),
+          [id]: modelName
+        }
+      }
+      await window.settingsApi.saveSettings(config)
+      setSettingsConfig(config)
+      setStatus(await getRuntimeStatus())
+
+      // Record system event in chat history if conversation already has messages
+      const displayName = formatProviderChangeText(provider, modelName)
+      if (interactions.length > 0) {
+        await saveSystemInteraction(conversationId, displayName, '', 'system', 'provider_change')
+        await refreshHistory()
+      }
+    } catch (reason) {
+      setError(errorMessage(reason))
+    }
+  }
+
+  async function changeGeminiLiveVoice(voiceName: string) {
+    try {
+      const config = await window.settingsApi.getSettings()
+      if (config.geminiLiveVoice === voiceName) return
+      config.geminiLiveVoice = voiceName
+      await window.settingsApi.saveSettings(config)
+      setSettingsConfig(config)
+    } catch (reason) {
+      setError(errorMessage(reason))
+    }
+  }
+
+  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,
+    queuedPrompts: queuedPrompts ?? [],
+    queuePaused: queuePaused ?? false,
+  }
+  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,
+    subscribeMessage: conversationActions.subscribe,
+    getMessage: () => conversationActions.getSnapshot().message,
+    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: openArtifactSurface,
+    onOpenReview: isDesktopApp ? openReviewSurface : undefined,
+    onRemoveQueuedPrompt: conversationActions.removeQueuedPrompt,
+    onEditQueuedPrompt: conversationActions.editQueuedPrompt,
+    onClearQueuedPrompts: conversationActions.clearQueuedPrompts,
+    onSteerQueuedPrompt: conversationActions.steerQueuedPrompt,
+    onResumeQueue: conversationActions.resumeQueue,
+  }
+
+  const stableToggleSidebar = useLatestCallback(toggleSidebar)
+  const stableSidebarResize = useLatestCallback(handleSidebarResize)
+  const stableSidebarResizeEnd = useLatestCallback(handleSidebarResizeEnd)
+  const stableClearHistory = useLatestCallback(clearHistory)
+  const stableSelectConversation = useLatestCallback(selectConversation)
+  const stableDeleteConversation = useLatestCallback(deleteConversation)
+  const stableRenameConversation = useLatestCallback(renameConversation)
+  const stableChangeView = useLatestCallback(changeView)
+  const stableBrowseFolderForMove = useLatestCallback(handleBrowseFolderForMove)
+  const stableNewChatInProject = useLatestCallback(handleNewChatInProject)
+
+  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)}
+          onShowWorkspace={() => { setToolsPanelOpen(false); changeView('workspace') }}
+          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}
+          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' : ''} ${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 && (
+          <button
+            type="button"
+            aria-label="Close navigation menu"
+            className="sidebar-backdrop"
+            onClick={() => setMobileSidebarOpen(false)}
+            style={{
+              position: 'fixed',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              background: 'rgba(0, 0, 0, 0.5)',
+              backdropFilter: 'blur(4px)',
+              zIndex: 9998,
+            }}
+          />
+        )}
+        {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}
+          sending={sending}
+          onToggleSidebar={stableToggleSidebar}
+          onSidebarResize={stableSidebarResize}
+          onSidebarResizeEnd={stableSidebarResizeEnd}
+          onClearHistory={stableClearHistory}
+          chatSessions={chatSessions}
+          activeConversationId={conversationId}
+          onSelectConversation={stableSelectConversation}
+          onDeleteConversation={stableDeleteConversation}
+          onRenameConversation={stableRenameConversation}
+          onSetView={stableChangeView}
+          isSearchOpen={isSearchOpen}
+          onSetSearchOpen={setIsSearchOpen}
+          showWorkspaceTab={isDesktopApp}
+          promoteMediaStudios={!isDesktopApp}
+          activeWorkspacePath={workspacePath}
+          recentWorkspacePaths={recentWorkspacePaths}
+          onBrowseFolder={isDesktopApp ? stableBrowseFolderForMove : undefined}
+          onUpdateSessionWorkspace={handleUpdateSessionWorkspace}
+          onNewChatInProject={stableNewChatInProject}
+        />
+        <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">
+                <span className="proactive-icon">✨</span>
+                <div className="proactive-message">{proactiveSuggestion.message}</div>
+                <button className="proactive-dismiss-btn" onClick={dismissProactiveSuggestion}>
+                  Dismiss
+                </button>
+              </div>
+              <div className="proactive-chips">
+                {proactiveSuggestion.suggestions?.map((sug: any, i: number) => (
+                  <button
+                    key={i}
+                    className="suggestion-chip"
+                    onClick={() => handleProactiveAction(sug.action)}
+                  >
+                    {sug.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+          {view === 'workspace' && (
+            <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>
+          )}
+        <ChatPanel conversation={chatConversation} actions={chatActions} tools={{
+          modsPanelTarget, onOpenMods: () => openUtilitySurface('mods'),
+          open: toolsPanelOpen, backgroundTaskCount,
+          onToggle: isDesktopApp ? undefined : () => setToolsPanelOpen(open => !open),
+        }} />
+        </main>
+        {toolsPanelOpen && (
+          <Suspense fallback={<LazyPanelFallback />}>
+            <ToolSurfacePage
+              surfaces={toolSurfaces}
+              activeSurfaceId={activeSurfaceId}
+              workspacePath={workspacePath}
+              desktopTools={isDesktopApp}
+              onDropWorkspaceFile={isDesktopApp ? file => openWorkspacePreview(file.root, file.path) : undefined}
+              backgroundTaskCount={backgroundTaskCount}
+              sourceCount={sessionSources.sources.length}
+              onOpenSources={() => openUtilitySurface('sources')}
+              sourcesContent={<SessionSources key={conversationId} {...sessionSources} onRetry={sessionSources.retry} onOpenLibrary={url => {
+                window.history.pushState({}, '', url)
+                window.dispatchEvent(new PopStateEvent('popstate'))
+                setToolsPanelOpen(false)
+              }} onOpenArtifact={openArtifactSurface} />}
+              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 className="web-view-scroll" style={{ flex: 1, overflowY: 'auto', background: 'transparent' }}>
+            <Suspense fallback={<LazyPanelFallback />}>
+              <McpServersView
+                config={settingsConfig || DEFAULT_CONFIG}
+                updateField={handleUpdateSettingsField}
+                detectTools={detectSystemTools}
+                onReauth={reauthMcpServer}
+                listServerTools={listMcpServerTools}
+              />
+            </Suspense>
+          </div>
+        )}
+        {view === 'plugins' && (
+          <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 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 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>
+        )}
+        {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">
+          <div className="startup-loading-dots" aria-hidden="true"><span /><span /><span /></div>
+          <div className="startup-loading-text">Loading Mint Agent</div>
+        </div>
+      </div>
+
+      {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>
+  )
+}