@pheem49/mint 1.15.0 → 1.17.0

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

@@ -1,2665 +0,0 @@
-import { lazy, Suspense, type ChangeEvent, type CSSProperties, type FormEvent, useCallback, useEffect, useRef, useState } from 'react'
-import {
-  compactAgentProgressForPersistence,
-  mergeActivitySnapshots,
-  mergeFileChanges,
-  parseFileChangesFromProgress,
-} from '../agentProgress'
-import { catalogPlatform, conversationPlatform, mediaPlatform, runtimePlatform, type SlashResponse } from '../platform'
-import type { AgentProgress, ChatResponse, ChatSession, DocumentAttachment, PictureEntry, RuntimeStatus } from '../types'
-
-const {
-  clearChatHistory, deleteChatSession, renameChatSession,
-  getConversationSnapshot, getConversationChanges,
-  saveSystemInteraction, listChatSessions, updateChatSessionWorkspace, saveInteractionAgentActivity, streamChatMessage,
-  cancelChatMessage, submitToolApproval, listen, readClipboardImage,
-} = conversationPlatform
-const { getRuntimeStatus, setActiveModel, selectWorkspaceDirectory, selectLinkedFolderPath, isTauriRuntime } = runtimePlatform
-const { listSavedPictures, convertFileSrc } = mediaPlatform
-const {
-  listLearnedSkills, addLearnedSkill, deleteLearnedSkill, detectSystemTools, reauthMcpServer,
-  listMcpServerTools, setProfileValue, listCronJobs, addCronJob, removeCronJob,
-  setCronJobEnabled, listLinkedFolders, addLinkedFolder, removeLinkedFolder, runSlashCommand,
-  linkedFolderStatus, refreshLinkedFolder, listLinkedFolderNotes, readLinkedFolderNote, openLinkedFolderNote,
-} = catalogPlatform
-
-import ChatPanel, { type ConversationActions, type ConversationViewModel } from './ChatPanel'
-import ScreenCaptureDialog from './ScreenCaptureDialog'
-import DashboardSidebar, { type DashboardView } from './DashboardSidebar'
-import DesktopTitlebar from './DesktopTitlebar'
-import type { ModelInteraction } from '@/components/ModelPanel'
-import type { ToolSurface } from './ToolSurfacePage'
-import {
-  errorMessage,
-  readImage,
-  readDocument,
-  createTrimmedImagePreview,
-  createObjectUrlPreview,
-  applyThemeStyles,
-  parseUtcDate,
-} from '../utils/ui'
-import { executeSlashCommand } from '../utils/slashCommandProcessor'
-import { captureScreenForChat } from '../utils/screenCapture'
-import { useConversationCoordinator } from '../conversation/useConversationCoordinator'
-import { matchesActiveRun, matchesActiveSession } from '../conversation/syncView'
-
-
-const EXPRESSIONS = [
-  "Default",
-  "Dumb Cat",
-  "Dumb Cat Eye Roll",
-  "Take Photo",
-  "Poke",
-  "Cat Filter",
-]
-
-const ACCESSORIES = [
-  "None",
-  "Apron",
-  "Glasses",
-  "Hold Pen",
-]
-
-import { DEFAULT_CONFIG, migrateTypographyScale } from '../constants/config'
-
-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 { useCompanionWidget } from '@/companionWidget'
-
-const ModelPanel = lazy(() => import('@/components/ModelPanel'))
-const WorkspacePanel = lazy(() => import('@/components/WorkspacePanel'))
-const ToolSurfacePage = lazy(() => import('./ToolSurfacePage'))
-const SkillsView = lazy(() => import('./SkillsView'))
-const ScheduledTasksView = lazy(() => import('./ScheduledTasksView'))
-const LinkedFoldersView = lazy(() => import('./LinkedFoldersView'))
-const McpServersView = lazy(() => import('./McpServersView'))
-const PluginsView = lazy(() => import('./PluginsView'))
-const CliSessionsView = lazy(() => import('./CliSessionsView'))
-const PicturesLibrary = lazy(() => import('@/components/PicturesLibrary'))
-const ImageStudioPanel = lazy(() => import('./ImageStudioPanel'))
-const VeoStudioPanel = lazy(() => import('./VeoStudioPanel'))
-const CommandPalette = lazy(() => import('./CommandPalette').then(({ CommandPalette: Component }) => ({ default: Component })))
-
-function LazyPanelFallback() {
-  return <div className="auth-gate-loading" style={{ minHeight: 160 }}>Loading panel…</div>
-}
-
-function getInitialViewFromUrl(): DashboardView {
-  if (typeof window === 'undefined') return 'chat'
-  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')) 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 '/pictures'
-  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'
-  }
-}
-
-/** Fires the same notification mechanism as a finished AI reply, but only
- * while the window is unfocused — reused so both surfaces get identical
- * title/permission/dedupe behavior, just a different body string. */
-function notifyPendingApproval(payload: any) {
-  if (document.hidden || !document.hasFocus()) {
-    window.api?.notifyAiResponse?.(truncateForNotification(describeApproval(payload)))
-  }
-}
-
-export default function MintDashboard() {
-  const isDesktopApp = isTauriRuntime()
-  const [view, setViewState] = useState<DashboardView>(getInitialViewFromUrl)
-  const [conversationId, setConversationId] = useState(activeConversationId)
-  // 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(conversationId),
-    },
-    {
-      conversationId,
-      draftKeyPrefix: DRAFT_KEY_PREFIX,
-      workspaceStorageKey: LAST_WORKSPACE_PATH_KEY,
-    },
-  )
-  const {
-    workspacePath, message, imageAttachments, videoAttachments, documentAttachment,
-    sending, sendingMessage, sendingImageCount, sendingVideoCount, streamedReply,
-    streamedResponse, agentProgress,
-  } = conversation
-  const activeConversationRef = useRef(conversationId)
-  const sessionGenerationRef = useRef(0)
-  const runGenerationRef = useRef(0)
-  const conversationCursorRef = useRef<{ chatId: string; cursor: number } | null>(null)
-  const historyLoadSerialRef = useRef(0)
-  const [pendingApprovals, setPendingApprovals] = useState<Record<string, { token: string; approval: any }>>({})
-  const autoApprovedChatIdRef = useRef<string | null>(null)
-  const isCurrentSession = (chatId: string, generation: number) => matchesActiveSession(
-    { chatId, generation },
-    { chatId: activeConversationRef.current, generation: sessionGenerationRef.current },
-  )
-  const activateConversation = (id: string) => {
-    if (activeConversationRef.current !== id) {
-      activeConversationRef.current = id
-      sessionGenerationRef.current += 1
-      runGenerationRef.current += 1
-      conversationCursorRef.current = null
-      setInteractions([])
-      setHasOlderInteractions(false)
-      setAgentActivitySnapshots({})
-      setStreamingConversationId(null)
-      setActiveTurnId(null)
-    }
-    setConversationId(id)
-  }
-  async function loadConversationHistory(chatId: string, generation: number) {
-    const serial = ++historyLoadSerialRef.current
-    const snapshot = await getConversationSnapshot(chatId, null, 50)
-    if (!isCurrentSession(chatId, generation) || serial !== historyLoadSerialRef.current) return
-    const currentCursor = conversationCursorRef.current
-    if (currentCursor?.chatId === chatId && currentCursor.cursor > snapshot.cursor) return
-    conversationCursorRef.current = { chatId, cursor: snapshot.cursor }
-    setInteractions((current) => {
-      if (!isCurrentSession(chatId, generation) || serial !== historyLoadSerialRef.current) return current
-      if (conversationCursorRef.current?.chatId === chatId
-        && conversationCursorRef.current.cursor > snapshot.cursor) return current
-      return snapshot.interactions
-    })
-    setHasOlderInteractions((current) => {
-      if (!isCurrentSession(chatId, generation) || serial !== historyLoadSerialRef.current) return current
-      if (conversationCursorRef.current?.chatId === chatId
-        && conversationCursorRef.current.cursor > snapshot.cursor) return current
-      return snapshot.hasOlder
-    })
-    setAgentActivitySnapshots((current) => {
-      if (!isCurrentSession(chatId, generation) || serial !== historyLoadSerialRef.current) return current
-      if (conversationCursorRef.current?.chatId === chatId
-        && conversationCursorRef.current.cursor > snapshot.cursor) return current
-      return mergeActivitySnapshots(current, snapshot.interactions)
-    })
-  }
-  // 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)
-
-  useEffect(() => {
-    const currentPath = workspacePath.trim()
-    if (!currentPath) return
-    const recent = [currentPath, ...readRecentWorkspacePaths().filter((path) => path !== currentPath)]
-      .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)
-  }, [workspacePath])
-
-  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 mappedView: DashboardView = (next === 'veo_studio' ? 'veo' : next) as DashboardView
-      const targetPath = getCleanPathForView(mappedView, targetConversationId || conversationId)
-      if (typeof window !== 'undefined' && window.location.pathname !== targetPath) {
-        window.history.pushState({}, '', targetPath)
-      }
-      return mappedView
-    })
-  }
-
-  useEffect(() => {
-    const handleUrlChange = () => {
-      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) {
-        window.localStorage.setItem(ACTIVE_CONVERSATION_ID_KEY, urlSessionId)
-        activateConversation(urlSessionId)
-        const generation = sessionGenerationRef.current
-        loadConversationHistory(urlSessionId, generation).catch((error) => {
-          console.error('Failed to load conversation history:', error)
-        })
-      } else if (!urlSessionId && isRootOrNewChatRoute()) {
-        const next = createConversationId()
-        activateConversation(next)
-        setInteractions([])
-        setAgentActivitySnapshots({})
-        conversationActions.switchSession()
-      }
-    }
-    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('')
-  // When `conversationId` changes we swap `message` to that chat's saved draft;
-  // this ref tells the persist effect to skip the render right after that swap,
-  // so the outgoing chat's text is never written under the incoming chat's key.
-  const [interactions, setInteractions] = useState<any[]>([])
-  const [hasOlderInteractions, setHasOlderInteractions] = useState(false)
-  const [pictures, setPictures] = useState<PictureEntry[]>([])
-  const [streamingConversationId, setStreamingConversationId] = useState<string | null>(null)
-  const [activeTurnId, setActiveTurnId] = useState<number | null>(null)
-  const [agentActivitySnapshots, setAgentActivitySnapshots] = useState<Record<string, AgentProgress[]>>({})
-  const [thinkingExpanded, setThinkingExpanded] = useState<Record<string, boolean>>({})
-  const liveThinkingOpenRef = useRef(true)
-  const liveExtendedThinkingOpenRef = useRef(true)
-  const [sessionAutoApproved, setSessionAutoApproved] = useState(false)
-  const sessionAutoApprovedRef = useRef(false)
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => window.localStorage.getItem('mint:sidebar-collapsed') === 'true')
-  const [toolSurfaces, setToolSurfaces] = useState<ToolSurface[]>([])
-  const [activeSurfaceId, setActiveSurfaceId] = useState<string | null>(null)
-  const [toolsPanelOpen, setToolsPanelOpen] = useState(false)
-  const [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 recentAgentChanges = parseFileChangesFromProgress(agentProgress)
-  const conversationReviewChanges = mergeFileChanges([
-    ...interactions.map((interaction) => {
-      const interactionId = String(interaction.id)
-      return parseFileChangesFromProgress(agentActivitySnapshots[interactionId] ?? interaction.agentActivity ?? [])
-    }),
-    parseFileChangesFromProgress(agentProgress),
-  ])
-  const workspaceSourceNames = [
-    ...imageAttachments.map((attachment) => attachment.name),
-    ...videoAttachments.map((attachment) => attachment.name),
-    documentAttachment?.filename || '',
-  ]
-
-  const [agentMode, setAgentMode] = useState(() => window.localStorage.getItem('mint:agent-mode') === 'true')
-  const [planMode, setPlanMode] = useState(() => window.localStorage.getItem('mint:plan-mode') === 'true')
-  const [toastMessage, setToastMessage] = useState('')
-  const [dashboardDataReady, setDashboardDataReady] = useState(false)
-  const [startupTimedOut, setStartupTimedOut] = useState(false)
-  const [settingsConfig, setSettingsConfig] = useState<any>(null)
-  const [chatSessions, setChatSessions] = useState<ChatSession[]>([])
-  const chatEnd = useRef<HTMLDivElement | null>(null)
-  const lastNativePasteTimeRef = useRef(0)
-  const {
-    modelVisible,
-    scale,
-    interactionEnabled,
-    showInteractionGuide,
-    isLocked,
-    layoutPreset,
-    expressionIndex,
-    accessoryIndex,
-    modelReady,
-    proactiveSuggestion,
-    setScale,
-    setIsLocked,
-    setExpressionIndex,
-    setAccessoryIndex,
-    setModelReady,
-    toggleModel,
-    changeLayoutPreset,
-    updateInteractionEnabled,
-    updateInteractionGuide,
-    dismissProactiveSuggestion,
-    handleProactiveAction,
-  } = useCompanionWidget((message) => setError(message))
-  const startupReady = (dashboardDataReady && modelReady) || startupTimedOut
-
-  const [mcpName, setMcpName] = useState('')
-  const [mcpCmd, setMcpCmd] = useState('')
-  const [mcpArgs, setMcpArgs] = useState('')
-  const [mcpEnv, setMcpEnv] = useState('')
-  const [mcpIcon, setMcpIcon] = useState('')
-
-  const handleUpdateSettingsField = async (field: string, value: any) => {
-    const currentConfig = settingsConfig || DEFAULT_CONFIG
-    const updatedConfig = { ...currentConfig, [field]: value }
-    setSettingsConfig(updatedConfig)
-
-    if ((window as any).settingsApi) {
-      await (window as any).settingsApi.saveSettings(updatedConfig)
-    } else {
-      try {
-        await setProfileValue('user-settings', JSON.stringify(updatedConfig))
-      } catch (e) {
-        console.error('Failed to save settings field:', e)
-      }
-    }
-  }
-
-  const handleAddMcpServer = async (allowAll?: boolean) => {
-    if (!mcpName.trim() || !mcpCmd.trim()) {
-      alert('Please provide at least a server name and command.')
-      return
-    }
-
-    let parsedEnv = {}
-    if (mcpEnv.trim()) {
-      try {
-        parsedEnv = JSON.parse(mcpEnv)
-      } catch {
-        alert('Invalid JSON in Environment variable field.')
-        return
-      }
-    }
-
-    const name = mcpName.trim()
-    const argList = mcpArgs.split(/\s+/).filter(Boolean)
-    const currentConfig = settingsConfig || DEFAULT_CONFIG
-    const updated: any = {
-      ...currentConfig,
-      mcpServers: {
-        ...currentConfig?.mcpServers,
-        [name]: {
-          command: mcpCmd.trim(),
-          args: argList,
-          env: parsedEnv,
-          icon: mcpIcon.trim() || undefined,
-        },
-      },
-    }
-    if (allowAll) {
-      updated.allowedMcpTools = { ...(currentConfig?.allowedMcpTools || {}), [name]: ['*'] }
-    }
-
-    setSettingsConfig(updated)
-    if ((window as any).settingsApi) {
-      await (window as any).settingsApi.saveSettings(updated)
-    } else {
-      try {
-        await setProfileValue('user-settings', JSON.stringify(updated))
-      } catch (e) {
-        console.error('Failed to save settings field:', e)
-      }
-    }
-    setMcpName('')
-    setMcpCmd('')
-    setMcpArgs('')
-    setMcpEnv('')
-    setMcpIcon('')
-  }
-
-  const handleRemoveMcpServer = async (name: string) => {
-    const currentConfig = settingsConfig || DEFAULT_CONFIG
-    const updated = { ...(currentConfig?.mcpServers || {}) }
-    delete updated[name]
-    await handleUpdateSettingsField('mcpServers', updated)
-  }
-
-  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)
-  const [searchQuery, setSearchQuery] = useState('')
-
-  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)
-  }, [])
-
-  useEffect(() => {
-    if (!isSearchOpen) {
-      setSearchQuery('')
-    }
-  }, [isSearchOpen])
-
-  // Another process — the CLI's interactive chat, a scheduled task, a
-  // messaging bridge — can add messages to this same conversation while
-  // this page is open, and nothing here would otherwise notice: Mint's
-  // surfaces only share a SQLite file, not a live event bus, so this polls
-  // for changes instead of requiring a manual refresh. Kept in a ref rather
-  // than the effect's own dependency array so a poll landing doesn't tear
-  // down and recreate the interval on every tick.
-  const interactionsRef = useRef(interactions)
-  const chatPollInFlightRef = useRef<{ chatId: string; generation: number } | null>(null)
-  useEffect(() => {
-    interactionsRef.current = interactions
-  }, [interactions])
-  useEffect(() => {
-    if (interactions.length === 0) setHasOlderInteractions(false)
-  }, [interactions.length])
-
-  // Load the saved draft whenever the active conversation changes. Declared
-  // before the persist effect so it runs first within the same commit. The
-  // first run is a no-op: `message`'s initial value already came from the
-  // lazy `useState` initializer above.
-  useEffect(() => {
-    if (view !== 'chat' || !conversationId) return
-    let disposed = false
-    const generation = sessionGenerationRef.current
-    const isCurrent = () => !disposed && isCurrentSession(conversationId, generation)
-    const syncHistory = async () => {
-      // A shared SQLite database has no cross-process event bus. Refresh as
-      // soon as the user returns, but avoid work while hidden or overlapping
-      // a slow read with the next polling tick.
-      if (
-        !isCurrent() ||
-        document.visibilityState !== 'visible' ||
-        (chatPollInFlightRef.current?.chatId === conversationId
-          && chatPollInFlightRef.current.generation === generation)
-      ) return
-
-      const poll = { chatId: conversationId, generation }
-      chatPollInFlightRef.current = poll
-      try {
-        if (conversationCursorRef.current?.chatId !== conversationId) {
-          await loadConversationHistory(conversationId, generation)
-          return
-        }
-        let cursor = conversationCursorRef.current.cursor
-        let changed = false
-        for (let page = 0; page < 10; page++) {
-          const batch = await getConversationChanges(conversationId, cursor, 100)
-          if (!isCurrent()) return
-          if (conversationCursorRef.current?.chatId === conversationId
-            && conversationCursorRef.current.cursor > batch.cursor) return
-          cursor = batch.cursor
-          if (batch.changes.length > 0) {
-            changed = true
-            setInteractions((current) => {
-              if (!isCurrent()) return current
-              if (conversationCursorRef.current?.chatId === conversationId
-                && conversationCursorRef.current.cursor > batch.cursor) return current
-              const byId = new Map(current.map((interaction) => [interaction.id, interaction]))
-              for (const change of batch.changes) {
-                if (change.interaction) byId.set(change.interactionId, change.interaction)
-                else byId.delete(change.interactionId)
-              }
-              return Array.from(byId.values()).sort((a, b) => a.id - b.id)
-            })
-            setAgentActivitySnapshots((current) => {
-              if (!isCurrent()) return current
-              if (conversationCursorRef.current?.chatId === conversationId
-                && conversationCursorRef.current.cursor > batch.cursor) return current
-              const merged = { ...current }
-              for (const change of batch.changes) {
-                const key = String(change.interactionId)
-                if (change.interaction) {
-                  if (change.interaction.agentActivity && Array.isArray(change.interaction.agentActivity)) {
-                    merged[key] = change.interaction.agentActivity
-                  }
-                } else {
-                  delete merged[key]
-                }
-              }
-              return merged
-            })
-          }
-          if (!batch.hasMore) break
-        }
-        if (conversationCursorRef.current?.chatId === conversationId
-          && conversationCursorRef.current.cursor > cursor) return
-        conversationCursorRef.current = { chatId: conversationId, cursor }
-        if (changed) {
-          const sessions = await listChatSessions()
-          if (isCurrent()) setChatSessions(sessions)
-        }
-      } catch {
-        // Best-effort — a transient fetch failure just waits for the next tick.
-      } finally {
-        if (chatPollInFlightRef.current === poll) chatPollInFlightRef.current = null
-      }
-    }
-
-    const syncWhenActive = () => { void syncHistory() }
-    syncWhenActive()
-    window.addEventListener('focus', syncWhenActive)
-    document.addEventListener('visibilitychange', syncWhenActive)
-    const interval = window.setInterval(syncWhenActive, 1500)
-
-    return () => {
-      disposed = true
-      window.clearInterval(interval)
-      window.removeEventListener('focus', syncWhenActive)
-      document.removeEventListener('visibilitychange', syncWhenActive)
-    }
-  }, [view, conversationId, workspacePath])
-
-  const filteredSessions = chatSessions.filter((session) => {
-    if (session.kind === 'cli' || session.id === 'conversation-default') return false
-    return session.title.toLowerCase().includes(searchQuery.toLowerCase())
-  })
-
-  const groupSessionsByDate = (sessions: ChatSession[]) => {
-    const groups: { [key: string]: ChatSession[] } = {}
-    
-    sessions.forEach((session) => {
-      const dateStr = session.updatedAt || session.createdAt
-      if (!dateStr) {
-        const groupName = 'Other'
-        if (!groups[groupName]) groups[groupName] = []
-        groups[groupName].push(session)
-        return
-      }
-
-      const date = parseUtcDate(dateStr)
-      const today = new Date()
-      const yesterday = new Date()
-      yesterday.setDate(today.getDate() - 1)
-
-      let groupName = ''
-      if (date.toDateString() === today.toDateString()) {
-        groupName = 'Today'
-      } else if (date.toDateString() === yesterday.toDateString()) {
-        groupName = 'Yesterday'
-      } else {
-        const diffTime = Math.abs(today.getTime() - date.getTime())
-        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
-        if (diffDays <= 7) {
-          groupName = 'Previous 7 days'
-        } else if (diffDays <= 30) {
-          groupName = 'Previous 30 days'
-        } else {
-          groupName = date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
-        }
-      }
-
-      if (!groups[groupName]) {
-        groups[groupName] = []
-      }
-      groups[groupName].push(session)
-    })
-
-    return groups
-  }
-
-  const groupedSearchSessions = groupSessionsByDate(filteredSessions)
-
-
-  async function refreshHistory() {
-    const chatId = conversationId
-    const generation = sessionGenerationRef.current
-    await loadConversationHistory(chatId, generation)
-  }
-
-  const refreshChatSessions = useCallback(async () => {
-    try {
-      const sessions = await listChatSessions()
-      setChatSessions((prev) => {
-        if (
-          prev.length === sessions.length &&
-          prev.every(
-            (s, i) =>
-              s.id === sessions[i]?.id &&
-              s.updatedAt === sessions[i]?.updatedAt &&
-              s.title === sessions[i]?.title &&
-              s.messageCount === sessions[i]?.messageCount &&
-              s.totalBytes === sessions[i]?.totalBytes
-          )
-        ) {
-          return prev
-        }
-        return sessions
-      })
-    } catch (e) {
-      console.error('Failed to refresh chat sessions:', e)
-    }
-  }, [])
-
-  useEffect(() => {
-    const refreshVisible = () => {
-      if (document.visibilityState === 'visible') void refreshChatSessions()
-    }
-    const interval = window.setInterval(refreshVisible, 5000)
-    window.addEventListener('focus', refreshVisible)
-    document.addEventListener('visibilitychange', refreshVisible)
-    return () => {
-      window.clearInterval(interval)
-      window.removeEventListener('focus', refreshVisible)
-      document.removeEventListener('visibilitychange', refreshVisible)
-    }
-  }, [refreshChatSessions])
-
-  const loadOlderInteractions = useCallback(async () => {
-    const generation = sessionGenerationRef.current
-    const firstId = interactionsRef.current[0]?.id
-    if (firstId == null) return
-    const page = await getConversationSnapshot(conversationId, firstId, 50)
-    if (!isCurrentSession(conversationId, generation)) return
-    setHasOlderInteractions(page.hasOlder)
-    if (page.interactions.length === 0) return
-    setInteractions((current) => {
-      if (!isCurrentSession(conversationId, generation)) return current
-      const byId = new Map([...page.interactions, ...current].map((interaction) => [interaction.id, interaction]))
-      return Array.from(byId.values()).sort((a, b) => a.id - b.id)
-    })
-  }, [conversationId])
-
-  const handleUpdateSessionWorkspace = useCallback(async (sessionId: string, targetPath: string | null) => {
-    try {
-      await updateChatSessionWorkspace(sessionId, targetPath)
-      await refreshChatSessions()
-    } catch (e) {
-      console.error('Failed to update session workspace:', e)
-    }
-  }, [refreshChatSessions])
-
-  const handleBrowseFolderForMove = useCallback(async () => {
-    try {
-      const selected = await selectWorkspaceDirectory()
-      return selected || null
-    } catch {
-      return null
-    }
-  }, [])
-
-  const [picturesRefreshing, setPicturesRefreshing] = useState(false)
-
-  async function refreshPictures() {
-    setPicturesRefreshing(true)
-    try {
-      setPictures(await listSavedPictures())
-    } finally {
-      setPicturesRefreshing(false)
-    }
-  }
-
-  useEffect(() => {
-    Promise.allSettled([
-      getRuntimeStatus().then(setStatus),
-      refreshHistory(),
-      refreshChatSessions(),
-      window.settingsApi?.getSettings()
-        .then((loaded: any) => {
-          const migrated = 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 unlistenVision = window.api.onVisionReady((image) => {
-      createTrimmedImagePreview(image)
-        .catch(() => image)
-        .then((previewDataUri) => {
-          conversationActions.attachImage({ dataUri: image, previewDataUri, name: 'Screen capture' })
-        })
-    })
-    const handleWindowFocus = () => {
-      getRuntimeStatus().then(setStatus).catch(() => {})
-      window.settingsApi?.getSettings?.().then((loaded: any) => {
-        if (loaded) {
-          const migrated = migrateTypographyScale(loaded)
-          setSettingsConfig(migrated)
-          applyThemeStyles(migrated)
-        }
-      }).catch(() => {})
-      window.api?.clearAiNotifications?.()
-    }
-    window.addEventListener('focus', handleWindowFocus)
-
-    window.api?.onSettingsChanged?.((loaded: any) => {
-      const migrated = 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) return
-      if (sessionAutoApprovedRef.current && autoApprovedChatIdRef.current === chatId) {
-        submitToolApproval(event.payload.token, true).catch((err) => {
-          console.error("Auto approval failed:", err)
-        })
-      } else {
-        setPendingApprovals((current) => ({ ...current, [chatId]: event.payload }))
-        notifyPendingApproval(event.payload)
-      }
-    })
-    return () => {
-      window.removeEventListener('focus', handleWindowFocus)
-      unlistenPromise?.then?.((unlisten) => unlisten?.())
-      unlistenSpotlight?.then?.((unlisten) => unlisten?.())
-      unlistenVision?.then?.((unlisten) => unlisten?.())
-    }
-  }, [])
-
-  useEffect(() => {
-    const timer = window.setTimeout(() => setStartupTimedOut(true), 10000)
-    return () => window.clearTimeout(timer)
-  }, [])
-
-  useEffect(() => {
-    if (view === 'pictures' || view === 'imagine') refreshPictures().catch((reason: unknown) => setError(errorMessage(reason)))
-  }, [view])
-
-  useEffect(() => {
-    if (view === 'workspace' && !agentMode) updateAgentMode(true)
-  }, [view, agentMode])
-
-  const showToast = (nextMessage: string) => {
-    setToastMessage(nextMessage)
-    setTimeout(() => setToastMessage((current) => current === nextMessage ? '' : current), 3000)
-  }
-
-  const openMintBrowser = async (url: string) => {
-    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) {
-      showToast(`Could not open browser: ${String(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 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
-      const duplicateId = `${source.kind}:${Date.now()}:${Math.random().toString(36).slice(2, 7)}`
-      const duplicate = { ...source, id: duplicateId, title: `${source.title} copy` } as ToolSurface
-      setActiveSurfaceId(duplicateId)
-      return [...current, duplicate]
-    })
-  }
-
-  const renameToolSurface = (id: string) => {
-    const source = toolSurfaces.find((surface) => surface.id === id)
-    if (!source) return
-    const nextTitle = window.prompt('Rename tab', source.title)?.trim()
-    if (!nextTitle) return
-    setToolSurfaces((current) => current.map((surface) => surface.id === id ? { ...surface, title: nextTitle } : surface))
-  }
-
-  const closeOtherToolSurfaces = (id: string) => {
-    setToolSurfaces((current) => current.filter((surface) => surface.id === id))
-    setActiveSurfaceId(id)
-  }
-
-  const toggleTerminalSurface = () => {
-    setToolSurfaces((current) => {
-      const terminal = current.find((surface) => surface.kind === 'terminal')
-      if (!terminal) {
-        const id = `terminal:${Date.now()}:${Math.random().toString(36).slice(2, 7)}`
-        setActiveSurfaceId(id)
-        return [...current, { id, kind: 'terminal' as const, title: 'Terminal' }]
-      }
-      setActiveSurfaceId((active) => active === terminal.id ? null : terminal.id)
-      return current
-    })
-  }
-
-  const checkForUpdatesFromMenu = async () => {
-    try {
-      const update = await window.settingsApi.checkForUpdates()
-      showToast(update?.available ? `Mint ${update.version} is available.` : 'Mint is up to date.')
-    } catch (error) {
-      showToast(`Could not check for updates: ${String(error)}`)
-    }
-  }
-
-  const openArtifactSurface = (artifact: import('./ArtifactPreviewPanel').ArtifactFile) => {
-    setToolsPanelOpen(true)
-    const fileName = artifact.path.replace(/\\/g, '/').split('/').pop() || artifact.path
-    const id = `preview:${artifact.path}`
-    setToolSurfaces((current) => {
-      const next = current.filter((surface) => surface.id !== id)
-      return [...next, { id, kind: 'preview', title: fileName, artifact }]
-    })
-    setActiveSurfaceId(id)
-  }
-
-  const openReviewSurface = (review: Extract<ToolSurface, { kind: 'review' }>) => {
-    setToolsPanelOpen(true)
-    setToolSurfaces((current) => [...current.filter((surface) => surface.id !== review.id), review])
-    setActiveSurfaceId(review.id)
-  }
-
-  const openConversationReview = () => {
-    setToolsPanelOpen(true)
-    setToolSurfaces((current) => {
-      const reviewCount = current.filter((surface) => surface.kind === 'review').length
-      const id = `review:${Date.now()}:${Math.random().toString(36).slice(2, 7)}`
-      const title = reviewCount === 0 ? 'Review' : `Review (${reviewCount + 1})`
-      const next = {
-        id,
-        kind: 'review' as const,
-        title,
-        reviewTitle: 'All conversation changes',
-        changes: conversationReviewChanges,
-      }
-      setActiveSurfaceId(id)
-      return [...current, next]
-    })
-  }
-
-  const closeToolSurface = (id: string) => {
-    setToolSurfaces((current) => {
-      const index = current.findIndex((surface) => surface.id === id)
-      const next = current.filter((surface) => surface.id !== id)
-      setActiveSurfaceId((active) => {
-        if (active !== id) return active
-        return next[Math.max(0, index - 1)]?.id ?? null
-      })
-      return next
-    })
-  }
-
-  const closeAllToolSurfaces = () => {
-    setToolSurfaces([])
-    setActiveSurfaceId(null)
-  }
-
-  const toggleSidebar = () => {
-    if (window.innerWidth <= 760) {
-      setMobileSidebarOpen(false)
-      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) => {
-    const next = path.trim()
-    conversationActions.selectWorkspace(next)
-  }
-
-  useEffect(() => {
-    if (!sending) {
-      sessionAutoApprovedRef.current = false
-      autoApprovedChatIdRef.current = null
-      setSessionAutoApproved(false)
-    }
-  }, [sending])
-
-  async function handleApproval(approved: boolean, autoApproveSession = false, answer?: string) {
-    const chatId = conversationId
-    const pendingApproval = pendingApprovals[chatId]
-    if (!pendingApproval) return
-    try {
-      if (autoApproveSession) {
-        sessionAutoApprovedRef.current = true
-        autoApprovedChatIdRef.current = chatId
-        setSessionAutoApproved(true)
-      }
-      await submitToolApproval(pendingApproval.token, approved, answer)
-      setPendingApprovals((current) => {
-        if (current[chatId]?.token !== pendingApproval.token) return current
-        const next = { ...current }
-        delete next[chatId]
-        return next
-      })
-    } catch (reason) {
-      setError(errorMessage(reason))
-    }
-  }
-
-  async function handleCancelMessage() {
-    if (!sending || !streamingConversationId) return
-    runGenerationRef.current += 1
-    try {
-      await conversationActions.executeCancellation(() =>
-        cancelChatMessage(streamingConversationId),
-      )
-    } catch (e) {
-      console.error("Failed to cancel message stream:", e)
-    } finally {
-      setPendingApprovals((current) => {
-        const next = { ...current }
-        delete next[streamingConversationId]
-        return next
-      })
-      setStreamingConversationId(null)
-      setActiveTurnId(null)
-    }
-  }
-
-  async function sendPrompt(
-    promptText: string,
-    options: {
-      imageAttachments?: Array<{ dataUri: string; name: string; previewDataUri?: string }>
-      videoAttachments?: Array<{ dataUri: string; name: string }>
-      audioDataUri?: string | null
-      documentAttachment?: DocumentAttachment | null
-      systemInstruction?: string
-      clearComposer?: boolean
-      pinnedMcpServer?: string
-      forceAgentMode?: boolean
-    } = {},
-  ) {
-    if (sending) return
-    const originChatId = conversationId
-    const originWorkspacePath = workspacePath || null
-    const sessionGeneration = sessionGenerationRef.current
-    const runGeneration = ++runGenerationRef.current
-    const originRun = { chatId: originChatId, sessionGeneration, runGeneration }
-    const isCurrentRun = () => matchesActiveRun(originRun, {
-      chatId: activeConversationRef.current,
-      sessionGeneration: sessionGenerationRef.current,
-      runGeneration: runGenerationRef.current,
-    })
-    let turnId: number | null = null
-    const outgoingImages = options.imageAttachments ?? []
-    const outgoingVideos = options.videoAttachments ?? []
-    const outgoingDocument = options.documentAttachment ?? null
-    const shouldUseAgentMode = agentMode || options.forceAgentMode || promptText.toLowerCase().startsWith('search web:')
-    const outgoingImage = outgoingImages.map((img) => img.dataUri).join(' ')
-    const outgoingVideo = outgoingVideos.map((vid) => vid.dataUri).join(' ')
-    const outgoingImageCount = outgoingImages.length
-    conversationActions.startRun(promptText, outgoingImageCount, outgoingVideos.length)
-    setStreamingConversationId(conversationId)
-    setActiveTurnId(null)
-    setError('')
-    liveThinkingOpenRef.current = true
-    liveExtendedThinkingOpenRef.current = true
-    setThinkingExpanded((current) => ({ ...current, live: true, 'live-extended': true }))
-    const progressSnapshot: AgentProgress[] = []
-    let pendingProgress: AgentProgress[] = []
-    let progressFlushTimer: ReturnType<typeof setTimeout> | null = null
-    const flushPendingProgress = () => {
-      if (progressFlushTimer) {
-        clearTimeout(progressFlushTimer)
-        progressFlushTimer = null
-      }
-      if (pendingProgress.length === 0) return
-      const batch = pendingProgress
-      pendingProgress = []
-      if (isCurrentRun()) conversationActions.receiveProgress(batch)
-    }
-    const queueProgress = (progress: AgentProgress) => {
-      pendingProgress.push(progress)
-      if (progress.type !== 'ThinkingDelta') {
-        flushPendingProgress()
-      } else if (!progressFlushTimer) {
-        progressFlushTimer = setTimeout(flushPendingProgress, 75)
-      }
-    }
-    if (options.clearComposer) {
-      conversationActions.clearComposer()
-    }
-
-    try {
-      const response = await conversationActions.executeStream((onChunk) => streamChatMessage(
-        shouldUseAgentMode ? promptText : `/chat ${promptText}`,
-        onChunk,
-        outgoingImage,
-        options.audioDataUri ?? null,
-        outgoingVideo,
-        options.systemInstruction ?? '',
-        (progress) => {
-          progressSnapshot.push(progress)
-          queueProgress(progress)
-        },
-        outgoingDocument,
-        originWorkspacePath,
-        originChatId,
-        undefined,
-        shouldUseAgentMode ? planMode : false,
-        options.pinnedMcpServer ?? null,
-        (payload) => {
-          if (sessionAutoApprovedRef.current && autoApprovedChatIdRef.current === originChatId) {
-            submitToolApproval(payload.token, true).catch((err) => {
-              console.error("Auto approval failed:", err)
-            })
-          } else {
-            setPendingApprovals((current) => ({ ...current, [originChatId]: payload }))
-            notifyPendingApproval(payload)
-          }
-        },
-        (id) => {
-          turnId = id
-          if (isCurrentRun()) setActiveTurnId(id)
-        },
-      ), isCurrentRun)
-      flushPendingProgress()
-      if (document.hidden || !document.hasFocus()) {
-        window.api?.notifyAiResponse?.(truncateForNotification(response.text))
-      }
-      const persistedProgress = compactAgentProgressForPersistence(progressSnapshot)
-      if (persistedProgress.length > 0) {
-        if (turnId != null) {
-          const interactionKey = String(turnId)
-          await saveInteractionAgentActivity(turnId, persistedProgress)
-          if (isCurrentRun()) {
-            setAgentActivitySnapshots((current) => ({
-              ...current,
-              [interactionKey]: persistedProgress.slice(),
-            }))
-            setThinkingExpanded((current) => ({
-              ...current,
-              ...(liveThinkingOpenRef.current ? { [interactionKey]: true } : {}),
-              ...(liveExtendedThinkingOpenRef.current ? { [`extended-${interactionKey}`]: true } : {}),
-            }))
-          }
-        } else {
-          console.warn('Agent activity was not saved because the stream did not provide a turn ID')
-        }
-      }
-      if (isCurrentRun()) {
-        try {
-          await loadConversationHistory(originChatId, sessionGeneration)
-        } catch (error) {
-          console.error('Failed to refresh completed conversation:', error)
-        }
-      }
-      await refreshChatSessions()
-      await refreshPictures()
-      if (isCurrentRun() && typeof window !== 'undefined') {
-        const pathname = (window.location.pathname || '').replace(/\/+$/, '')
-        const hash = (window.location.hash || '').replace(/^#\/?/, '').replace(/\/+$/, '')
-        const target = (pathname || hash).toLowerCase()
-        if (!target || target === '' || target === '/chat' || target === 'chat' || target === '/index.html' || target === 'index.html') {
-          window.history.replaceState({}, '', `/chat/${encodeURIComponent(originChatId)}`)
-        }
-      }
-      getRuntimeStatus().then(setStatus).catch(() => {})
-      if (isCurrentRun()) conversationActions.clearStream()
-    } catch (reason) {
-      if (isCurrentRun()) setError(errorMessage(reason))
-    } finally {
-      flushPendingProgress()
-      setPendingApprovals((current) => {
-        if (!current[originChatId]) return current
-        const next = { ...current }
-        delete next[originChatId]
-        return next
-      })
-      if (isCurrentRun()) {
-        conversationActions.finishRun()
-        setStreamingConversationId(null)
-        setActiveTurnId(null)
-      }
-    }
-  }
-
-  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault()
-    const trimmed = message.trim()
-    const currentImages = imageAttachments
-    const currentVideos = videoAttachments
-    const currentDocument = documentAttachment
-    const hasAttachments = currentImages.length > 0 || currentVideos.length > 0 || Boolean(currentDocument)
-    if ((!trimmed && !hasAttachments) || sending) 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)
-      } 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 === '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',
-            }
-            setInteractions((prev) => [...prev, 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',
-            }
-            setInteractions((prev) => [...prev, systemMsg])
-          }
-          return
-        }
-
-        if (slashResult.systemText) {
-          const systemMsg = {
-            id: Date.now(),
-            userText: trimmed,
-            aiText: slashResult.systemText,
-            createdAt: new Date().toISOString(),
-            provider: 'system',
-            model: 'mint-cli',
-          }
-          setInteractions((prev) => [...prev, 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)
-    conversationActions.compose(message.trim() ? `Search web: ${message.trim()}` : 'Search web: ')
-  }
-
-  async function selectWorkspace(path?: string) {
-    try {
-      const selected = path || await selectWorkspaceDirectory()
-      if (selected) {
-        updateWorkspacePath(selected)
-        changeView('workspace')
-      }
-    } catch (reason) {
-      setError(errorMessage(reason))
-    }
-  }
-
-  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) {
-    const originChatId = conversationId
-    const generation = sessionGenerationRef.current
-    try {
-      if (action === 'New chat') {
-        const next = createConversationId()
-        activateConversation(next)
-        setInteractions([])
-        setAgentActivitySnapshots({})
-        conversationActions.switchSession()
-        setViewState('chat')
-
-        if (targetWorkspacePath !== undefined) {
-          updateWorkspacePath(targetWorkspacePath || '')
-        } else {
-          const currentSession = chatSessions.find((s) => s.id === conversationId)
-          if (!currentSession || !currentSession.workspacePath) {
-            updateWorkspacePath('')
-          } else {
-            updateWorkspacePath(currentSession.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 clearChatHistory(originChatId)
-      }
-      if (!isCurrentSession(originChatId, generation)) return
-      setInteractions([])
-      setAgentActivitySnapshots({})
-      conversationActions.switchSession()
-    } 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',
-    }
-    setInteractions((prev) => [...prev, 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, resp.markdown)
-        break
-      case 'applied': {
-        const wsChange = resp.effects.find((e) => e.kind === 'workspace_changed') as
-          | { kind: 'workspace_changed'; path: string }
-          | undefined
-        if (wsChange) conversationActions.selectWorkspace(wsChange.path)
-        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.
-          setInteractions((prev) => [
-            ...prev,
-            {
-              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')) {
-          const chatId = conversationId
-          const generation = sessionGenerationRef.current
-          await clearChatHistory(chatId).catch(() => {})
-          if (isCurrentSession(chatId, generation)) {
-            setInteractions([])
-          }
-        }
-        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) {
-    window.localStorage.setItem(ACTIVE_CONVERSATION_ID_KEY, id)
-    touchActiveTimestamp()
-    activateConversation(id)
-    const generation = sessionGenerationRef.current
-    changeView('chat', id)
-    conversationActions.switchSession()
-    const session = chatSessions.find((item) => item.id === id)
-    if (session) {
-      if (session.workspacePath) {
-        if (session.workspacePath !== workspacePath) {
-          updateWorkspacePath(session.workspacePath)
-        }
-      } else {
-        if (workspacePath) {
-          updateWorkspacePath('')
-        }
-      }
-    }
-    try {
-      await loadConversationHistory(id, generation)
-    } catch (reason) {
-      if (isCurrentSession(id, generation)) setError(errorMessage(reason))
-    }
-  }
-
-  const handleNewChatInProject = useCallback((targetPath: string) => {
-    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 = activeConversationRef.current
-      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)
-        const generation = sessionGenerationRef.current
-        conversationActions.clearProgress()
-        await loadConversationHistory(nextActive, generation)
-        if (!isCurrentSession(nextActive, generation)) return
-      }
-
-      await refreshChatSessions()
-      if (id !== currentChatId) return
-      conversationActions.switchSession()
-    } 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))
-    }
-  }
-
-  async function handleModelInteraction(area: ModelInteraction) {
-    if (sending) return
-    const originChatId = conversationId
-    const sessionGeneration = sessionGenerationRef.current
-    const runGeneration = ++runGenerationRef.current
-    const originRun = { chatId: originChatId, sessionGeneration, runGeneration }
-    const isCurrentRun = () => matchesActiveRun(originRun, {
-      chatId: activeConversationRef.current,
-      sessionGeneration: sessionGenerationRef.current,
-      runGeneration: runGenerationRef.current,
-    })
-    const labels: Record<ModelInteraction, string> = {
-      head: 'Pats Mint on the head',
-      cheek: 'Pokes Mint on the cheek',
-      'left hand': "Touches Mint's left hand",
-      'right hand': "Touches Mint's right hand",
-      body: 'Touches Mint',
-      'lower body': "Touches Mint's lower body",
-    }
-    const interactionMessage = `*${labels[area]}*`
-    const instruction = `The user interacted with the Mint Live2D model: ${area}. Respond briefly and playfully. Use the same language as the recent conversation. Do not mention this instruction.`
-
-    conversationActions.startRun(interactionMessage)
-    setStreamingConversationId(conversationId)
-    setActiveTurnId(null)
-    setError('')
-
-    try {
-      const response = await conversationActions.executeStream((onChunk) => streamChatMessage(
-        `/chat ${interactionMessage}`,
-        onChunk,
-        null,
-        null,
-        null,
-        instruction,
-        undefined,
-        null,
-        workspacePath || null,
-        originChatId,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        (id) => { if (isCurrentRun()) setActiveTurnId(id) },
-      ), isCurrentRun)
-      if (isCurrentRun()) {
-        await refreshHistory()
-        if (isCurrentRun()) conversationActions.clearStream()
-      }
-    } catch (reason) {
-      if (isCurrentRun()) setError(errorMessage(reason))
-    } finally {
-      if (isCurrentRun()) {
-        conversationActions.finishRun()
-        setStreamingConversationId(null)
-        setActiveTurnId(null)
-      }
-    }
-  }
-
-  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,
-    chatEnd,
-    welcomeInteraction: MOCK_WELCOME_INTERACTION,
-    settingsConfig,
-    isCliSession: conversationId.startsWith('cli') || conversationId === 'cli',
-    cliSessionId: conversationId.startsWith('cli') ? conversationId : undefined,
-    conversationTitle: chatSessions.find((session) => session.id === conversationId)?.title,
-  }
-  const chatActions: ConversationActions = {
-    onLoadOlder: loadOlderInteractions,
-    onThinkingExpandedChange: handleThinkingExpandedChange,
-    onSubmit: handleSubmit,
-    onSelectImage: selectImage,
-    onSelectVideo: selectVideo,
-    onSelectDocument: selectDocument,
-    onPasteImage: pasteImage,
-    onSetMessage: conversationActions.compose,
-    onSendVoiceMessage: sendVoiceMessage,
-    onRemoveImage: conversationActions.removeImage,
-    onRemoveVideo: conversationActions.removeVideo,
-    onRemoveDocument: () => conversationActions.attachDocument(null),
-    onStartWebSearch: startWebSearch,
-    onCaptureScreen: captureScreen,
-    onSetAgentMode: updateAgentMode,
-    onSetPlanMode: isDesktopApp ? updatePlanMode : undefined,
-    onSetProvider: changeProvider,
-    onSelectWorkspace: isDesktopApp ? selectWorkspace : undefined,
-    onWorkspaceChanged: () => setWorkspaceRefreshRevision((revision) => revision + 1),
-    onApproval: handleApproval,
-    onUpdateSettings: (updated) => setSettingsConfig(updated),
-    onSetModel: changeModel,
-    onSelectModelAndProvider: changeProviderAndModel,
-    onCancelMessage: handleCancelMessage,
-    onClearMessages: () => clearHistory('Clear history'),
-    onSetGeminiLiveVoice: changeGeminiLiveVoice,
-    onToggleMobileSidebar: () => setMobileSidebarOpen(!mobileSidebarOpen),
-    onBackToCode: () => changeView('code'),
-    onOpenArtifact: isDesktopApp ? openArtifactSurface : undefined,
-    onOpenReview: isDesktopApp ? openReviewSurface : undefined,
-  }
-
-  return (
-    <div className={`app-container ${startupReady ? '' : 'is-loading'}`}>
-      {screenCaptureOpen && (
-        <ScreenCaptureDialog
-          onClose={() => setScreenCaptureOpen(false)}
-          onAttach={attachScreenCapture}
-          capture={() => captureScreenForChat(isDesktopApp)}
-          onLiveTranslate={isDesktopApp ? () => { void startLiveTranslation() } : undefined}
-        />
-      )}
-      {isDesktopApp && (
-        <DesktopTitlebar
-          sidebarCollapsed={sidebarCollapsed}
-          onToggleSidebar={toggleSidebar}
-          onNewChat={() => clearHistory('New chat')}
-          onOpenWorkspace={() => selectWorkspace()}
-          onOpenTerminal={openTerminalSurface}
-          onToggleTerminal={toggleTerminalSurface}
-          onOpenBrowser={() => openNativeBrowser()}
-          toolsPanelOpen={toolsPanelOpen}
-          onToggleToolsPanel={() => setToolsPanelOpen((open) => !open)}
-          onOpenSettings={() => changeView('settings')}
-          onCheckForUpdates={checkForUpdatesFromMenu}
-          onShowAbout={() => showToast('Mint Agent — AI workspace')}
-          workspacePath={workspacePath}
-          terminalCount={toolSurfaces.filter((surface) => surface.kind === 'terminal').length}
-          sourceNames={workspaceSourceNames}
-          recentChanges={recentAgentChanges}
-          onOpenReview={(changes) => openReviewSurface({ id: `review:workspace:${Date.now()}`, kind: 'review', title: 'Review', reviewTitle: 'Recent agent changes', changes })}
-          onRefreshWorkspace={() => setWorkspaceRefreshRevision((revision) => revision + 1)}
-        />
-      )}
-      <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,
-            }}
-          />
-        )}
-        <DashboardSidebar
-          view={view}
-          sidebarCollapsed={sidebarCollapsed}
-          modelVisible={modelVisible}
-          sending={sending}
-          expressionIndex={expressionIndex}
-          accessoryIndex={accessoryIndex}
-          expressions={EXPRESSIONS}
-          accessories={ACCESSORIES}
-          interactionEnabled={interactionEnabled}
-          showInteractionGuide={showInteractionGuide}
-          onToggleSidebar={toggleSidebar}
-          onSidebarResize={handleSidebarResize}
-          onSidebarResizeEnd={handleSidebarResizeEnd}
-          onClearHistory={clearHistory}
-          chatSessions={chatSessions}
-          activeConversationId={conversationId}
-          onSelectConversation={selectConversation}
-          onDeleteConversation={deleteConversation}
-          onRenameConversation={renameConversation}
-          onSetView={changeView}
-          onToggleModel={toggleModel}
-          onSetExpressionIndex={setExpressionIndex}
-          onSetAccessoryIndex={setAccessoryIndex}
-          onSetInteractionEnabled={updateInteractionEnabled}
-          onSetShowInteractionGuide={updateInteractionGuide}
-          onShowToast={showToast}
-          isSearchOpen={isSearchOpen}
-          onSetSearchOpen={setIsSearchOpen}
-          showWorkspaceTab={isDesktopApp}
-          promoteMediaStudios={!isDesktopApp}
-          activeWorkspacePath={workspacePath}
-          recentWorkspacePaths={recentWorkspacePaths}
-          onBrowseFolder={isDesktopApp ? handleBrowseFolderForMove : undefined}
-          onUpdateSessionWorkspace={handleUpdateSessionWorkspace}
-          onNewChatInProject={handleNewChatInProject}
-        />
-        <main className={`assistant-workspace ${layoutPreset === 'chat-wide' ? 'layout-chat-wide' : 'layout-model-wide'} ${modelVisible || view === 'workspace' ? '' : 'model-hidden'} ${view === 'workspace' ? 'workspace-open' : ''}`} style={(view === 'skills' || view === 'mcp' || view === 'plugins' || view === 'cron' || view === 'link' || view === 'pictures' || view === 'imagine' || view === 'veo' || 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>
-          )}
-          {pendingSlashChoice && (
-            <div className="proactive-bar" style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 100 }}>
-              <div className="proactive-header">
-                <span className="proactive-icon">⚡</span>
-                <div className="proactive-message">{pendingSlashChoice.title}</div>
-                <button className="proactive-dismiss-btn" onClick={() => setPendingSlashChoice(null)}>
-                  Dismiss
-                </button>
-              </div>
-              <div className="proactive-chips">
-                {pendingSlashChoice.options.map((opt) => (
-                  <button
-                    key={opt.value}
-                    className="suggestion-chip"
-                    onClick={() => {
-                      const next = `${pendingSlashChoice.command} ${opt.value}`
-                      setPendingSlashChoice(null)
-                      runSlashCommand(next, workspacePath || null)
-                        .then((r) => handleEngineSlashResponse(next, r))
-                        .catch(() => {})
-                    }}
-                  >
-                    {opt.label}
-                  </button>
-                ))}
-              </div>
-            </div>
-          )}
-          {view === 'workspace' && (
-            <Suspense fallback={<LazyPanelFallback />}>
-              <WorkspacePanel
-                agentMode={agentMode}
-                sending={sending}
-                workspacePath={workspacePath}
-                onEnableAgentMode={() => updateAgentMode(true)}
-                onSetMessage={conversationActions.compose}
-                onWorkspaceReady={updateWorkspacePath}
-                refreshRevision={workspaceRefreshRevision}
-              />
-            </Suspense>
-          )}
-          <Suspense fallback={null}>
-            <ModelPanel
-              scale={scale}
-              expressionIndex={expressionIndex}
-              accessoryIndex={accessoryIndex}
-              isLocked={isLocked}
-              isActive={modelVisible && view !== 'pictures' && view !== 'workspace' && view !== 'imagine' && view !== 'veo' && view !== 'skills' && view !== 'mcp' && view !== 'plugins'}
-              layoutPreset={layoutPreset}
-              sending={sending}
-              interactionEnabled={interactionEnabled}
-              showInteractionGuide={showInteractionGuide}
-              toastMessage={toastMessage}
-              onSetScale={setScale}
-              onSetLocked={setIsLocked}
-              onSetView={changeView}
-              onChangeLayoutPreset={changeLayoutPreset}
-              onDismissToast={() => setToastMessage('')}
-              onInteract={handleModelInteraction}
-              onModelLoadComplete={() => setModelReady(true)}
-            />
-          </Suspense>
-        <ChatPanel conversation={chatConversation} actions={chatActions} />
-        </main>
-        {isDesktopApp && toolsPanelOpen && (
-          <Suspense fallback={<LazyPanelFallback />}>
-            <ToolSurfacePage
-              surfaces={toolSurfaces}
-              activeSurfaceId={activeSurfaceId}
-              workspacePath={workspacePath}
-              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={() => setToolsPanelOpen(false)}
-              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>
-        )}
-        {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}
-                mcpName={mcpName}
-                setMcpName={setMcpName}
-                mcpCmd={mcpCmd}
-                setMcpCmd={setMcpCmd}
-                mcpArgs={mcpArgs}
-                setMcpArgs={setMcpArgs}
-                mcpEnv={mcpEnv}
-                setMcpEnv={setMcpEnv}
-                mcpIcon={mcpIcon}
-                setMcpIcon={setMcpIcon}
-                handleAddMcpServer={handleAddMcpServer}
-                handleRemoveMcpServer={handleRemoveMcpServer}
-                detectTools={detectSystemTools}
-                onReauth={reauthMcpServer}
-                listServerTools={listMcpServerTools}
-              />
-            </Suspense>
-          </div>
-        )}
-        {view === 'plugins' && (
-          <div 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}
-                onSelectSession={(id) => {
-                  selectConversation(id)
-                }}
-                onDeleteSession={deleteConversation}
-                onRenameSession={renameConversation}
-                onRefreshSessions={refreshChatSessions}
-                onShowToast={showToast}
-              />
-            </Suspense>
-          </div>
-        )}
-        {view === 'pictures' && (
-          <Suspense fallback={<LazyPanelFallback />}>
-            <PicturesLibrary view={view} pictures={pictures} onSetView={changeView} onRefreshPictures={refreshPictures} />
-          </Suspense>
-        )}
-        {view === 'imagine' && (
-          <Suspense fallback={<LazyPanelFallback />}>
-            <ImageStudioPanel
-              view={view}
-              onRefreshPictures={refreshPictures}
-              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>
-      {error && (
-        <div className="mint-error" style={{ position: 'absolute', bottom: '20px', right: '20px', zIndex: 100, margin: 0, boxShadow: '0 8px 24px rgba(0,0,0,0.3)', display: 'flex', alignItems: 'center', gap: '8px' }}>
-          <span>{error}</span>
-          <button onClick={() => setError('')} style={{ background: 'transparent', border: 0, color: 'white', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', padding: 0 }}>
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-              <line x1="18" y1="6" x2="6" y2="18"></line>
-              <line x1="6" y1="6" x2="18" y2="18"></line>
-            </svg>
-          </button>
-        </div>
-      )}
-
-      {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>
-  )
-}