@pheem49/mint 1.14.0 → 1.16.0

package/src/renderer/shared/utils/viewedImages.ts

@@ -0,0 +1,26 @@
+import type { AgentProgress } from '../types'
+
+/** view_image returns an inline image, optionally followed by post-tool hook notes. */
+export function viewedImageDataUri(result: string): string | null {
+  const firstLine = result.trim().split('\n', 1)[0].trim()
+  return /^data:image\/(?:png|jpeg|gif|webp|svg\+xml);base64,[A-Za-z0-9+/]+={0,2}$/.test(firstLine)
+    ? firstLine : null
+}
+
+export function viewedImagesFrom(progress: AgentProgress[]) {
+  const images = new Map<string, { id: string; src: string; path: string; name: string }>()
+  let anonymousCount = 0
+  progress.forEach(event => {
+    if (event.type !== 'ToolEnd' || event.data.action !== 'view_image'
+      || (event.data.status && event.data.status !== 'success')) return
+    const src = viewedImageDataUri(event.data.result)
+    if (!src) return
+    const path = typeof event.data.input.path === 'string' ? event.data.input.path : ''
+    const name = path.replaceAll('\\', '/').split('/').at(-1) || 'Image'
+    // Legacy/parallel results may omit callId. Count only retained images so
+    // trimming unrelated progress cannot remount an image and close its dialog.
+    const id = event.data.callId || `view-image-${anonymousCount++}`
+    images.set(id, { id, src, path, name })
+  })
+  return [...images.values()]
+}

package/src/renderer/shared/utils/workspacePane.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest'
+import { workspacePaneLayout, workspacePaneKeyWidth, readWorkspacePaneWidth } from './workspacePane'
+
+describe('Workspace pane sizing', () => {
+  it('enforces the minimum and maximum on a wide window', () => {
+    expect(workspacePaneLayout(100, 1600).width).toBe(280)
+    expect(workspacePaneLayout(1000, 1600).width).toBe(720)
+  })
+  it('reserves space for the conversation and restores the preferred width after shrinking', () => {
+    expect(workspacePaneLayout(650, 1000)).toMatchObject({ width: 522, max: 522, stacked: false })
+    expect(workspacePaneLayout(650, 1500).width).toBe(650)
+  })
+  it('stacks the panes when their minimum widths cannot fit', () => {
+    expect(workspacePaneLayout(400, 757).stacked).toBe(true)
+    expect(workspacePaneLayout(400, 758).stacked).toBe(false)
+  })
+  it('validates persisted sizes and tolerates unavailable storage', () => {
+    for (const value of [null, '', 'oops', 'Infinity']) expect(readWorkspacePaneWidth(() => value)).toBe(400)
+    expect(readWorkspacePaneWidth(() => '560')).toBe(560)
+    expect(readWorkspacePaneWidth(() => '9999')).toBe(720)
+    expect(readWorkspacePaneWidth(() => { throw new Error('blocked') })).toBe(400)
+  })
+  it('supports keyboard resizing, bounded Home/End and default reset', () => {
+    const layout = workspacePaneLayout(400, 1000)
+    expect(workspacePaneKeyWidth('ArrowLeft', layout)).toBe(376)
+    expect(workspacePaneKeyWidth('ArrowRight', layout)).toBe(424)
+    expect(workspacePaneKeyWidth('Home', layout)).toBe(280)
+    expect(workspacePaneKeyWidth('End', layout)).toBe(522)
+    expect(workspacePaneKeyWidth('Enter', layout)).toBe(400)
+    expect(workspacePaneKeyWidth('Tab', layout)).toBeNull()
+    expect(workspacePaneKeyWidth('ArrowRight', workspacePaneLayout(720, 1600))).toBe(720)
+  })
+})

package/src/renderer/shared/utils/workspacePane.ts

@@ -0,0 +1,20 @@
+export const WORKSPACE_PANE_STORAGE_KEY = 'mint:workspace-panel-width'
+const MIN = 280
+const MAX = 720
+const DEFAULT = 400
+const clamp = (width: number, max = MAX) => Math.min(max, Math.max(MIN, Number.isFinite(width) ? width : DEFAULT))
+
+export function workspacePaneLayout(preferred: number, available: number) {
+  const max = Math.max(MIN, Math.min(MAX, available - 460 - 18))
+  return { width: clamp(preferred, max), min: MIN, max, stacked: available < MIN + 460 + 18 }
+}
+export function workspacePaneKeyWidth(key: string, layout: ReturnType<typeof workspacePaneLayout>): number | null {
+  const width = { ArrowLeft: layout.width - 24, ArrowRight: layout.width + 24, Home: layout.min, End: layout.max, Enter: DEFAULT }[key]
+  return width === undefined ? null : clamp(width, layout.max)
+}
+export function readWorkspacePaneWidth(read: () => string | null) {
+  try {
+    const value = read()
+    return value?.trim() && Number.isFinite(Number(value)) ? clamp(Number(value)) : DEFAULT
+  } catch { return DEFAULT }
+}

package/src/renderer/shared/utils/workspacePreview.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest'
+import { createWorkspacePreview } from './workspacePreview'
+
+const root = '/projects/Demo'
+describe('workspace preview loading', () => {
+  it('reads Markdown from the selected root and pins that root to the tab', async () => {
+    const artifact = await createWorkspacePreview(root, 'docs/README.md', {
+      readWorkspaceFile: async (path, workspace) => { expect([path, workspace]).toEqual(['docs/README.md', root]); return '# Hello\n\n**Mint**' },
+      startHtmlPreview: async () => { throw new Error('Markdown should not start a server') },
+    })
+    expect(artifact).toEqual({ path: 'docs/README.md', workspacePath: root, type: 'markdown', content: '# Hello\n\n**Mint**' })
+  })
+  for (const path of ['site/index.html', 'assets/photo.png', 'assets/icon.svg']) {
+    it(`serves ${path} without reading it as plain text before opening`, async () => {
+      const artifact = await createWorkspacePreview(root, path, {
+        readWorkspaceFile: async () => { throw new Error('The panel loads text separately; binary images must not be read as UTF-8') },
+        startHtmlPreview: async (workspace, file) => { expect([workspace, file]).toEqual([root, path]); return { url: `http://127.0.0.1:12345/${path}`, jobId: 'preview-1' } },
+      })
+      expect(artifact.path).toBe(path)
+      expect((artifact as any).workspacePath).toBe(root)
+      expect((artifact as any).url).toBe(`http://127.0.0.1:12345/${path}`)
+    })
+  }
+})

package/src/renderer/shared/utils/workspacePreview.ts

@@ -0,0 +1,16 @@
+import { detectArtifactType, type ArtifactFile } from '../components/ArtifactPreviewPanel'
+
+interface PreviewApi {
+  readWorkspaceFile(path: string, root?: string): Promise<string>
+  startHtmlPreview(root: string, path: string): Promise<{ url: string; jobId: string }>
+}
+
+export async function createWorkspacePreview(root: string, path: string, api: PreviewApi): Promise<ArtifactFile> {
+  const type = detectArtifactType(path)
+  if (type === 'code') throw new Error('This file type does not support Preview')
+  if (type === 'markdown') {
+    return { path, workspacePath: root, type, content: await api.readWorkspaceFile(path, root) }
+  }
+  const { url } = await api.startHtmlPreview(root, path)
+  return { path, workspacePath: root, type, url }
+}

package/src/renderer/shared/utils/workspaceSnapshot.test.ts

@@ -0,0 +1,49 @@
+import { expect, it } from 'vitest'
+import { WorkspaceSnapshotReader } from './workspaceSnapshot'
+import type { WorkspaceSnapshot } from '../types'
+
+const snapshot = (path: string): WorkspaceSnapshot => ({ path, revision: 1, git: { isRepository: false, currentBranch: null, detachedHead: null, branches: [], remoteBranches: [], isDirty: false }, tree: { name: path, path: '', kind: 'directory', children: [] } })
+const request = (root: string) => ({ root, relativePath: '', revision: 0 })
+
+it('starts the new project load immediately and discards the late previous project snapshot', async () => {
+  let finish!: (value: WorkspaceSnapshot) => void
+  const reader = new WorkspaceSnapshotReader(async ({ root }) => root === '/old' ? new Promise(resolve => { finish = resolve }) : snapshot(root))
+  const old = reader.refresh(request('/old'))
+  expect(await reader.refresh(request('/new'))).toMatchObject({ path: '/new' })
+  finish(snapshot('/old-canonical'))
+  expect(await old).toBeNull()
+})
+it('does not publish a snapshot or canonical path after the panel unmounts', async () => {
+  let finish!: (value: WorkspaceSnapshot) => void
+  const reader = new WorkspaceSnapshotReader(() => new Promise(resolve => { finish = resolve }))
+  const pending = reader.refresh(request('/old'))
+  reader.dispose()
+  finish(snapshot('/old-canonical'))
+  expect(await pending).toBeNull()
+})
+it('suppresses errors from superseded requests while reporting the current project failure', async () => {
+  let reject!: (error: Error) => void
+  const reader = new WorkspaceSnapshotReader(async ({ root }) => {
+    if (root === '/old') return new Promise((_resolve, fail) => { reject = fail })
+    throw new Error('new project unavailable')
+  })
+  const old = reader.refresh(request('/old'))
+  await expect(reader.refresh(request('/new'))).rejects.toThrow('new project unavailable')
+  reject(new Error('old project unavailable'))
+  expect(await old).toBeNull()
+})
+it('deduplicates simultaneous refreshes for one root without dropping later refreshes', async () => {
+  let finish!: (value: WorkspaceSnapshot) => void
+  let reads = 0
+  const reader = new WorkspaceSnapshotReader(() => { reads++; return new Promise(resolve => { finish = resolve }) })
+  const first = reader.refresh(request('/project'))
+  const duplicate = reader.refresh(request('/project'))
+  expect(reads).toBe(1)
+  expect(await duplicate).toBeNull()
+  finish(snapshot('/project'))
+  expect(await first).toMatchObject({ path: '/project' })
+  const later = reader.refresh(request('/project'))
+  expect(reads).toBe(2)
+  finish(snapshot('/project'))
+  expect(await later).toMatchObject({ path: '/project' })
+})

package/src/renderer/shared/utils/workspaceSnapshot.ts

@@ -0,0 +1,26 @@
+import type { WorkspaceOperation, WorkspaceSnapshot } from '../types'
+export class WorkspaceSnapshotReader {
+  private generation = 0
+  private inFlightRoot: string | null = null
+  private disposed = false
+  constructor(private read: (request: WorkspaceOperation) => Promise<WorkspaceSnapshot>) {}
+  async refresh(request: WorkspaceOperation): Promise<WorkspaceSnapshot | null> {
+    if (this.disposed || this.inFlightRoot === request.root) return null
+    const generation = ++this.generation
+    this.inFlightRoot = request.root
+    try {
+      const snapshot = await this.read(request)
+      return !this.disposed && generation === this.generation ? snapshot : null
+    } catch (error) {
+      if (this.disposed || generation !== this.generation) return null
+      throw error
+    } finally {
+      if (generation === this.generation) this.inFlightRoot = null
+    }
+  }
+  dispose() {
+    this.disposed = true
+    this.generation++
+    this.inFlightRoot = null
+  }
+}

package/src/renderer/shared/utils/workspaces.ts

@@ -0,0 +1,10 @@
+/** Workspace catalog shared by the chat and Code hub pickers. */
+export function normalizeWorkspacePath(path?: string | null): string {
+  const normalized = (path || '').trim().replace(/\\/g, '/')
+  if (/^[a-z]:\/+$/i.test(normalized)) return normalized.slice(0, 3)
+  return normalized.replace(/\/+$/, '') || (normalized.startsWith('/') ? '/' : '')
+}
+
+export function workspacePaths(recentPaths: string[], currentPath?: string, sessionPaths: (string | undefined)[] = []): string[] {
+  return [...new Set([...recentPaths, currentPath, ...sessionPaths].map(normalizeWorkspacePath).filter(Boolean))]
+}

package/src/renderer/shared/workspaceUndo.ts

@@ -0,0 +1,88 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { workspacePlatform } from './platform'
+import type { WorkspaceHistoryEntry, WorkspaceSnapshot } from './types'
+
+const busyRoots = new Set<string>()
+const HISTORY_EVENT = 'mint:workspace-history-changed'
+
+export function announceWorkspaceChange(snapshot: WorkspaceSnapshot) {
+  window.dispatchEvent(new CustomEvent(HISTORY_EVENT, { detail: snapshot }))
+}
+
+/** Shared by the workspace panel and titlebar; actions stay scoped to a root. */
+export function useWorkspaceUndo(root: string, revision = 0, onSnapshot?: (snapshot: WorkspaceSnapshot) => void) {
+  const [entries, setEntries] = useState<WorkspaceHistoryEntry[]>([])
+  const [loading, setLoading] = useState(false)
+  const loadedRoot = useRef(root)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+  const rootRef = useRef(root)
+  rootRef.current = root
+  const snapshotHandler = useRef(onSnapshot)
+  snapshotHandler.current = onSnapshot
+
+  useEffect(() => {
+    let active = true
+    let request = 0
+    if (loadedRoot.current !== root) {
+      loadedRoot.current = root
+      setEntries([])
+      setError('')
+      setBusy(false)
+    }
+    const refresh = async () => {
+      const current = ++request
+      if (!root.trim()) { setLoading(false); return }
+      setLoading(true)
+      try {
+        const result = await workspacePlatform.listWorkspaceHistory(root)
+        if (active && current === request) setEntries(result)
+      } catch (reason) {
+        if (active && current === request) setError(reason instanceof Error ? reason.message : String(reason))
+      } finally {
+        if (active && current === request) setLoading(false)
+      }
+    }
+    const changed = (event: Event) => {
+      const snapshot = (event as CustomEvent<WorkspaceSnapshot>).detail
+      if (snapshot?.path === root) {
+        snapshotHandler.current?.(snapshot)
+        void refresh()
+      }
+    }
+    void refresh()
+    window.addEventListener('focus', refresh)
+    window.addEventListener(HISTORY_EVENT, changed)
+    return () => {
+      active = false
+      window.removeEventListener('focus', refresh)
+      window.removeEventListener(HISTORY_EVENT, changed)
+    }
+  }, [root, revision])
+
+  const undo = useCallback(async (expectedId?: string) => {
+    if (!entries.length || busyRoots.has(root)) return false
+    if (expectedId && entries[0].id !== expectedId) {
+      setError("Workspace history changed; review the latest action before undoing")
+      return false
+    }
+    busyRoots.add(root)
+    setBusy(true)
+    setError('')
+    try {
+      const snapshot = await workspacePlatform.undoWorkspaceAction(root, revision, expectedId || entries[0].id)
+      announceWorkspaceChange(snapshot)
+      const result = await workspacePlatform.listWorkspaceHistory(root)
+      if (rootRef.current === root) setEntries(result)
+      return true
+    } catch (reason) {
+      if (rootRef.current === root) setError(reason instanceof Error ? reason.message : String(reason))
+      return false
+    } finally {
+      busyRoots.delete(root)
+      if (rootRef.current === root) setBusy(false)
+    }
+  }, [entries, root, revision])
+
+  return { entries, busy, loading, error, undo }
+}

package/src/renderer/src/App.tsx

@@ -4,12 +4,15 @@ import ChunkErrorBoundary from '../shared/components/ChunkErrorBoundary'
 import ModalErrorBoundary from '../shared/components/ModalErrorBoundary'
 import { lazyWithRetry } from '../shared/utils/lazyWithRetry'
 import { listen } from './tauri'
+import BrowserShell from './components/BrowserShell'
+import BrowserSuggestionsPopup from './components/BrowserSuggestionsPopup'
 
 const SettingsWindow = lazyWithRetry(() => import('./components/SettingsWindow'))
 const SpotlightWindow = lazy(() => import('./components/SpotlightWindow'))
 const WidgetWindow = lazy(() => import('./components/WidgetWindow'))
 const ProactiveGlow = lazy(() => import('./components/ProactiveGlow'))
 const ScreenPicker = lazy(() => import('./components/ScreenPicker'))
+const LiveTranslateControls = lazy(() => import('./components/LiveTranslateControls'))
 const MintDashboard = lazyWithRetry(() => import('./components/MintDashboard'))
 function getCurrentRoute(): string {
   if (typeof window === 'undefined') return '/'
@@ -19,6 +22,8 @@ function getCurrentRoute(): string {
 }
 
 export default function App() {
+  const isBrowserShell = typeof window !== 'undefined' && new URLSearchParams(window.location.search).get('mint-browser-shell') === '1'
+  const isBrowserSuggestions = typeof window !== 'undefined' && new URLSearchParams(window.location.search).get('mint-browser-suggestions') === '1'
   const [route, setRoute] = useState(getCurrentRoute)
 
   useEffect(() => {
@@ -28,7 +33,7 @@ export default function App() {
     window.addEventListener('popstate', handleUrlChange)
     window.addEventListener('hashchange', handleUrlChange)
 
-    // Fired by the tray "Settings" item (src-tauri/src/lib.rs) so it opens
+    // Fired by the tray "Settings" item (src-tauri/src/app/tray.rs) so it opens
     // the settings view in this window instead of spawning a separate one.
     const unlistenPromise = listen('open-settings', () => {
       window.location.hash = '#/settings'
@@ -62,6 +67,9 @@ export default function App() {
     return () => window.removeEventListener('vite:preloadError', handlePreloadError)
   }, [])
 
+  if (isBrowserShell) return <BrowserShell />
+  if (isBrowserSuggestions) return <BrowserSuggestionsPopup />
+
 
   // Auxiliary overlay windows (spotlight/widget/proactive-glow/screen-picker)
   // belong to an already-running, already-authenticated main session, so
@@ -94,6 +102,13 @@ export default function App() {
       </Suspense>
     )
   }
+  if (route.startsWith('/live-translate-controls')) {
+    return (
+      <Suspense fallback={null}>
+        <LiveTranslateControls />
+      </Suspense>
+    )
+  }
 
   const content = route.startsWith('/settings') ? (
     <>

package/src/renderer/src/components/BrowserShell.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useState } from 'react'
+import { invoke } from '@tauri-apps/api/core'
+import { listen } from '@tauri-apps/api/event'
+import { getCurrentWindow } from '@tauri-apps/api/window'
+import './browser-shell.css'
+
+const HOME_URL = 'https://www.google.com'
+
+function normalizeUrl(value: string) {
+  const trimmed = value.trim()
+  if (!trimmed) return HOME_URL
+  return /^https?:\/\//i.test(trimmed) ? trimmed : `https://${trimmed}`
+}
+
+function pageLabel(value: string) {
+  try {
+    return new URL(value).hostname.replace(/^www\./, '') || 'New tab'
+  } catch {
+    return 'New tab'
+  }
+}
+
+export default function BrowserShell() {
+  const [address, setAddress] = useState(HOME_URL)
+  const [draft, setDraft] = useState(HOME_URL)
+  const [addressFocused, setAddressFocused] = useState(false)
+
+  const setAddressFocus = (focused: boolean) => {
+    setAddressFocused(focused)
+    if (focused && draft.trim()) {
+      void invoke('show_mint_browser_suggestions', { query: draft })
+    } else {
+      window.setTimeout(() => void invoke('hide_mint_browser_suggestions'), 220)
+    }
+  }
+
+  useEffect(() => {
+    let unlisten: (() => void) | undefined
+    void listen<string>('mint-browser-address', (event) => {
+      setAddress(event.payload)
+      setDraft(event.payload)
+    }).then((cleanup) => { unlisten = cleanup })
+    return () => unlisten?.()
+  }, [])
+
+  const navigate = async (value = draft) => {
+    const next = normalizeUrl(value)
+    setAddress(next)
+    setDraft(next)
+    setAddressFocused(false)
+    await invoke('hide_mint_browser_suggestions')
+    await invoke('navigate_mint_browser', { url: next })
+  }
+
+  const label = pageLabel(address)
+
+  return (
+    <main className="mint-browser-shell">
+      <div className="mint-browser-tabs" role="tablist" aria-label="Browser tabs">
+        <div className="mint-browser-tab" role="tab" aria-selected="true">
+          <span className="mint-browser-tab-icon" aria-hidden="true">●</span>
+          <span className="mint-browser-tab-title">{label}</span>
+          <button type="button" className="mint-browser-tab-close" onClick={() => void getCurrentWindow().close()} aria-label="Close tab" title="Close browser">×</button>
+        </div>
+        <button type="button" className="mint-browser-new-tab" onClick={() => void navigate(HOME_URL)} aria-label="New tab" title="New tab">+</button>
+      </div>
+
+      <form className="mint-browser-toolbar" onSubmit={(event) => { event.preventDefault(); void navigate() }}>
+        <div className="mint-browser-nav-group">
+          <button type="button" className="mint-browser-nav-button" onClick={() => void invoke('browser_go_back')} aria-label="Go back" title="Back">‹</button>
+          <button type="button" className="mint-browser-nav-button" onClick={() => void invoke('browser_go_forward')} aria-label="Go forward" title="Forward">›</button>
+          <button type="button" className="mint-browser-nav-button" onClick={() => void navigate(HOME_URL)} aria-label="Home" title="Home">⌂</button>
+        </div>
+        <div className={`mint-browser-address-wrap${addressFocused ? ' is-open' : ''}`}>
+          <div className="mint-browser-address-input">
+          <span className="mint-browser-address-icon" aria-hidden="true">◎</span>
+          <input
+            value={draft}
+            onChange={(event) => {
+              const value = event.target.value
+              setDraft(value)
+              if (value.trim()) void invoke('show_mint_browser_suggestions', { query: value })
+              else void invoke('hide_mint_browser_suggestions')
+            }}
+            onFocus={() => setAddressFocus(true)}
+            onBlur={() => setAddressFocus(false)}
+            onKeyDown={(event) => {
+              if (event.key === 'Escape') {
+                setAddressFocused(false)
+                void invoke('hide_mint_browser_suggestions')
+                event.currentTarget.blur()
+              }
+            }}
+            aria-label="Web address"
+            aria-expanded={addressFocused}
+            aria-autocomplete="list"
+            spellCheck={false}
+          />
+          <button type="submit" aria-label="Open address" title="Open address">
+            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h13M13 6l6 6-6 6" /></svg>
+          </button>
+          </div>
+        </div>
+        <button type="button" className="mint-browser-nav-button" onClick={() => void invoke('browser_reload')} aria-label="Reload" title="Reload">↻</button>
+      </form>
+    </main>
+  )
+}

package/src/renderer/src/components/BrowserSuggestionsPopup.tsx

@@ -0,0 +1,91 @@
+import { useEffect, useMemo, useState } from 'react'
+import { invoke } from '@tauri-apps/api/core'
+import { listen } from '@tauri-apps/api/event'
+import './browser-suggestions-popup.css'
+
+const HOME_URL = 'https://www.google.com'
+
+function normalizeUrl(value: string) {
+  const trimmed = value.trim()
+  if (!trimmed) return HOME_URL
+  return /^https?:\/\//i.test(trimmed) ? trimmed : `https://${trimmed}`
+}
+
+function buildSuggestions(query: string) {
+  const trimmed = query.trim()
+  if (!trimmed) return []
+
+  const suggestions = [
+    {
+      label: trimmed,
+      detail: 'Search the web',
+      value: `https://www.google.com/search?q=${encodeURIComponent(trimmed)}`,
+      icon: '⌕',
+    },
+  ]
+
+  if (!/^https?:\/\//i.test(trimmed) && !trimmed.includes('.')) {
+    suggestions.push({
+      label: `${trimmed}.com`,
+      detail: 'Open website',
+      value: normalizeUrl(`${trimmed}.com`),
+      icon: '◎',
+    })
+  }
+
+  if (/^https?:\/\//i.test(trimmed) || trimmed.includes('.')) {
+    suggestions.push({
+      label: trimmed,
+      detail: 'Open address',
+      value: normalizeUrl(trimmed),
+      icon: '◎',
+    })
+  }
+
+  return suggestions
+}
+
+export default function BrowserSuggestionsPopup() {
+  const [query, setQuery] = useState('')
+  const suggestions = useMemo(() => buildSuggestions(query), [query])
+
+  useEffect(() => {
+    void invoke<string>('get_mint_browser_suggestion_query').then(setQuery)
+    let unlisten: (() => void) | undefined
+    void listen<string>('mint-browser-suggestions-update', (event) => {
+      setQuery(event.payload)
+    }).then((cleanup) => { unlisten = cleanup })
+    return () => unlisten?.()
+  }, [])
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') void invoke('hide_mint_browser_suggestions')
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [])
+
+  const selectSuggestion = async (value: string) => {
+    await invoke('navigate_mint_browser', { url: value })
+    await invoke('hide_mint_browser_suggestions')
+  }
+
+  return (
+    <main className="browser-suggestions-popup" role="listbox" aria-label="Address suggestions">
+      {suggestions.map((suggestion) => (
+        <button
+          key={suggestion.value}
+          type="button"
+          role="option"
+          className="browser-suggestions-popup-item"
+          onClick={() => void selectSuggestion(suggestion.value)}
+        >
+          <span className="browser-suggestions-popup-icon" aria-hidden="true">{suggestion.icon}</span>
+          <span className="browser-suggestions-popup-label">{suggestion.label}</span>
+          <span className="browser-suggestions-popup-detail">{suggestion.detail}</span>
+        </button>
+      ))}
+    </main>
+  )
+}

package/src/renderer/src/components/LiveTranslateControls.tsx

@@ -0,0 +1,65 @@
+import SelectField from '../../shared/components/SelectField'
+import { useState } from 'react'
+import { invoke } from '@tauri-apps/api/core'
+import { emitTo } from '@tauri-apps/api/event'
+import { LANGUAGE_KEY, LANGUAGES } from './liveTranslateLanguage'
+import './ScreenPicker.css'
+
+type ControlAction = { type: 'pause' | 'resume' | 'change-area' | 'language'; languageChoice?: string; customLanguage?: string }
+
+export default function LiveTranslateControls() {
+  const [savedLanguage] = useState(() => window.localStorage.getItem(LANGUAGE_KEY) || 'Thai')
+  const [languageChoice, setLanguageChoice] = useState(() => LANGUAGES.includes(savedLanguage) ? savedLanguage : 'custom')
+  const [customLanguage, setCustomLanguage] = useState(() => LANGUAGES.includes(savedLanguage) ? '' : savedLanguage)
+  const [paused, setPaused] = useState(false)
+  const [error, setError] = useState('')
+
+  const send = async (action: ControlAction) => {
+    try {
+      await emitTo('screen-picker', 'live-translate-control', action)
+      setError('')
+      return true
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : String(reason))
+      return false
+    }
+  }
+
+  const chooseLanguage = (choice: string, custom = customLanguage) => {
+    setLanguageChoice(choice)
+    if (choice === 'custom') setCustomLanguage(custom)
+    const language = choice === 'custom' ? custom.trim() : choice
+    if (language) window.localStorage.setItem(LANGUAGE_KEY, language)
+    void send({ type: 'language', languageChoice: choice, customLanguage: custom })
+  }
+
+  const close = async () => {
+    try {
+      await invoke('close_desktop_window', { label: 'screen-picker' })
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : String(reason))
+    }
+  }
+
+  return (
+    <div className="live-translate-controls">
+      <div className="live-translate-toolbar">
+        <div className="live-translate-brand" data-tauri-drag-region>
+          <span aria-hidden="true">◈</span>
+          <div><strong>Live translate</strong><small>Click through the frame</small></div>
+        </div>
+        <label className="live-translate-language">To
+          <SelectField fullWidth={false} value={languageChoice} onValueChange={(nextValue) => chooseLanguage(nextValue)} aria-label="Target language">
+            {LANGUAGES.map((language) => <option key={language} value={language}>{language}</option>)}
+            <option value="custom">Other language…</option>
+          </SelectField>
+        </label>
+        {languageChoice === 'custom' && <input className="live-translate-custom-language" value={customLanguage} onChange={(event) => { setCustomLanguage(event.target.value); chooseLanguage('custom', event.target.value) }} maxLength={64} placeholder="Language name" aria-label="Custom target language" />}
+        <button type="button" onClick={() => { void send({ type: paused ? 'resume' : 'pause' }).then((sent) => { if (sent) setPaused(!paused) }) }}>{paused ? 'Resume' : 'Pause'}</button>
+        <button type="button" onClick={() => { void send({ type: 'change-area' }) }}>Change area</button>
+        <button type="button" className="live-translate-close" onClick={() => void close()} aria-label="Close live translate">×</button>
+      </div>
+      {error && <div className="live-translate-controls-error" role="alert">{error}</div>}
+    </div>
+  )
+}

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

@@ -1,3 +1,5 @@
-// Re-export from the shared module — do NOT add logic here.
-// Edit src/renderer/shared/components/MintDashboard.tsx instead.
+// Keep desktop dashboard styles in the same lazy chunk as its shared view.
+import '../css/dashboard.css'
+
+// Re-export from the shared module — edit its logic there.
 export { default } from '../../shared/components/MintDashboard'