@pheem49/mint 1.14.0 → 1.16.0

package/src/renderer/src/components/ScreenPicker.tsx

@@ -1,579 +1,365 @@
-import React, { useEffect, useRef, useState } from 'react'
+import SelectField from '../../shared/components/SelectField'
+import { useEffect, useRef, useState, type PointerEvent } from 'react'
+import { invoke } from '@tauri-apps/api/core'
+import { createFrameChangeTracker, sampleFrame } from './liveTranslateFrames'
+import { LANGUAGE_KEY, LANGUAGES } from './liveTranslateLanguage'
+import './ScreenPicker.css'
+
+type Region = { x: number; y: number; width: number; height: number }
+type Point = { x: number; y: number }
+type CaptureGeometry = { x: number; y: number; scaleFactor: number; windowCapture: boolean }
+type Phase = 'selecting' | 'live' | 'paused'
+type Status = 'waiting' | 'watching' | 'translating' | 'unchanged' | 'error'
+type ControlAction = { type: 'pause' | 'resume' | 'change-area' | 'language'; languageChoice?: string; customLanguage?: string }
+const CAPTURE_INTERVAL_MS = 750
+
+function point(event: PointerEvent<HTMLElement>): Point {
+  return { x: Math.max(0, Math.min(window.innerWidth, event.clientX)), y: Math.max(0, Math.min(window.innerHeight, event.clientY)) }
+}
 
-interface Rect {
-  startX: number
-  startY: number
-  currentX: number
-  currentY: number
-  width: number
-  height: number
+function regionBetween(start: Point, end: Point): Region {
+  return { x: Math.min(start.x, end.x), y: Math.min(start.y, end.y), width: Math.abs(end.x - start.x), height: Math.abs(end.y - start.y) }
 }
 
-interface NormalRect {
-  x: number
-  y: number
-  width: number
-  height: number
+function captureRect(region: Region, geometry: CaptureGeometry): Region {
+  return {
+    x: Math.round(geometry.x + region.x * geometry.scaleFactor),
+    y: Math.round(geometry.y + region.y * geometry.scaleFactor),
+    width: Math.max(1, Math.round(region.width * geometry.scaleFactor)),
+    height: Math.max(1, Math.round(region.height * geometry.scaleFactor)),
+  }
 }
 
 export default function ScreenPicker() {
-  const bgCanvasRef = useRef<HTMLCanvasElement>(null)
-  const overlayCanvasRef = useRef<HTMLCanvasElement>(null)
-  const translationBoxRef = useRef<HTMLDivElement>(null)
-  
-  const [isDrawing, setIsDrawing] = useState(false)
-  const [coords, setCoords] = useState<Rect>({ startX: 0, startY: 0, currentX: 0, currentY: 0, width: 0, height: 0 })
-  const [baseImage, setBaseImage] = useState<HTMLImageElement | null>(null)
-  const [selectedRect, setSelectedRect] = useState<NormalRect | null>(null)
-  
-  const [isTranslateMode, setIsTranslateMode] = useState(false)
-  const [isContinuousTranslateActive, setIsContinuousTranslateActive] = useState(false)
-  const [translationText, setTranslationText] = useState('')
-  const [translationPos, setTranslationPos] = useState({ left: 0, top: 0, maxWidth: 400 })
+  const [geometry, setGeometry] = useState<CaptureGeometry | null>(null)
+  const [phase, setPhase] = useState<Phase>('selecting')
+  const [selection, setSelection] = useState<Region | null>(null)
+  const [status, setStatus] = useState<Status>('waiting')
+  const [interactive, setInteractive] = useState(true)
+  const [translation, setTranslation] = useState('')
+  const [translationBackdrop, setTranslationBackdrop] = useState('')
+  const [error, setError] = useState('')
+  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 dragStart = useRef<Point | null>(null)
+  const previousPhase = useRef<Phase | null>(null)
+  const session = useRef(0)
+  const targetLanguage = languageChoice === 'custom' ? customLanguage.trim() : languageChoice
+  const selectedPixels = selection && geometry ? captureRect(selection, geometry) : null
 
-  const baseImageRef = useRef<HTMLImageElement | null>(null)
-  const isOverlayInteractableRef = useRef(true)
-  const screenshotRequestedRef = useRef(false)
-
-  // Initialize canvases and listen to screenshots
   useEffect(() => {
-    const loadScreenshot = (base64Data: string) => {
-      const img = new Image()
-      img.onload = () => {
-        baseImageRef.current = img
-        setBaseImage(img)
-        const bg = bgCanvasRef.current
-        if (bg) {
-          bg.width = window.innerWidth
-          bg.height = window.innerHeight
-          const bgCtx = bg.getContext('2d')
-          bgCtx?.drawImage(img, 0, 0, bg.width, bg.height)
-          drawDarkOverlay()
-        }
-      }
-      img.src = base64Data
-    }
-
-    const handleResize = () => {
-      const bg = bgCanvasRef.current
-      const overlay = overlayCanvasRef.current
-      if (bg && overlay) {
-        bg.width = window.innerWidth
-        bg.height = window.innerHeight
-        overlay.width = window.innerWidth
-        overlay.height = window.innerHeight
-        if (baseImageRef.current) {
-          const bgCtx = bg.getContext('2d')
-          bgCtx?.drawImage(baseImageRef.current, 0, 0, bg.width, bg.height)
+    let active = true
+    const refreshGeometry = () => {
+      void invoke<CaptureGeometry>('live_translate_geometry').then((value) => {
+        if (active) setGeometry(value)
+      }).catch((reason) => {
+        if (active) {
+          setError(reason instanceof Error ? reason.message : String(reason))
+          setStatus('error')
         }
-        drawDarkOverlay()
-      }
-    }
-
-    if (window.screenPickerApi) {
-      const pendingCapture = window.localStorage.getItem('mint:pending-screen-capture')
-      if (pendingCapture) {
-        window.localStorage.removeItem('mint:pending-screen-capture')
-        screenshotRequestedRef.current = true
-        loadScreenshot(pendingCapture)
-      } else if (!screenshotRequestedRef.current) {
-        screenshotRequestedRef.current = true
-        window.screenPickerApi.onScreenshot(loadScreenshot)
-      }
-
-      window.screenPickerApi.onTranslationResult((thaiText) => {
-        setTranslationText(thaiText)
       })
     }
-
-    window.addEventListener('resize', handleResize)
-    handleResize()
-
+    refreshGeometry()
+    window.addEventListener('resize', refreshGeometry)
     return () => {
-      window.removeEventListener('resize', handleResize)
+      active = false
+      window.removeEventListener('resize', refreshGeometry)
     }
   }, [])
 
-  const drawDarkOverlay = () => {
-    const overlay = overlayCanvasRef.current
-    if (!overlay) return
-    const overlayCtx = overlay.getContext('2d')
-    if (!overlayCtx) return
-    overlayCtx.clearRect(0, 0, overlay.width, overlay.height)
-    overlayCtx.fillStyle = 'rgba(0, 0, 0, 0.5)'
-    overlayCtx.fillRect(0, 0, overlay.width, overlay.height)
-  }
-
-  const normalizeRect = (r: Rect): NormalRect => {
-    return {
-      x: Math.min(r.startX, r.currentX),
-      y: Math.min(r.startY, r.currentY),
-      width: Math.abs(r.width),
-      height: Math.abs(r.height)
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') void window.screenPickerApi?.closePicker()
     }
-  }
-
-  const drawSelectionOutline = (rect: NormalRect) => {
-    const overlay = overlayCanvasRef.current
-    if (!overlay || !rect || rect.width === 0 || rect.height === 0) return
-    const overlayCtx = overlay.getContext('2d')
-    if (!overlayCtx) return
-    overlayCtx.clearRect(0, 0, overlay.width, overlay.height)
-    overlayCtx.strokeStyle = isTranslateMode ? '#10b981' : '#00ff88'
-    overlayCtx.lineWidth = 3
-    overlayCtx.strokeRect(rect.x, rect.y, rect.width, rect.height)
-  }
-
-  const drawSelection = (currentCoords: Rect) => {
-    const overlay = overlayCanvasRef.current
-    if (!overlay) return
-    const overlayCtx = overlay.getContext('2d')
-    if (!overlayCtx) return
-
-    drawDarkOverlay()
-
-    const rect = normalizeRect(currentCoords)
-    overlayCtx.clearRect(rect.x, rect.y, rect.width, rect.height)
-    overlayCtx.strokeStyle = isTranslateMode ? '#10b981' : '#00ff88'
-    overlayCtx.lineWidth = 2
-    overlayCtx.strokeRect(rect.x, rect.y, rect.width, rect.height)
-  }
-
-  const resetSelectionOverlay = () => {
-    setSelectedRect(null)
-    const overlay = overlayCanvasRef.current
-    if (overlay) overlay.style.pointerEvents = 'auto'
-    isOverlayInteractableRef.current = true
-    drawDarkOverlay()
-  }
-
-  const setOverlayInteractable = (isInteractable: boolean) => {
-    if (isOverlayInteractableRef.current === isInteractable) return
-    isOverlayInteractableRef.current = isInteractable
-    window.screenPickerApi?.setOverlayInteractable(isInteractable)
-  }
-
-  const stopTranslationMode = () => {
-    setIsContinuousTranslateActive(false)
-    const overlay = overlayCanvasRef.current
-    if (overlay) overlay.style.pointerEvents = 'auto'
-    window.screenPickerApi?.stopContinuousTranslation()
-    setOverlayInteractable(true)
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [])
 
-    const bg = bgCanvasRef.current
-    if (bg && baseImage) {
-      const bgCtx = bg.getContext('2d')
-      bgCtx?.clearRect(0, 0, bg.width, bg.height)
-      bgCtx?.drawImage(baseImage, 0, 0, bg.width, bg.height)
+  useEffect(() => {
+    let unlisten: (() => void) | undefined
+    let active = true
+    void import('@tauri-apps/api/event').then(({ listen }) =>
+      listen<boolean>('live-translate-interaction-mode', (event) => {
+        if (active) setInteractive(event.payload)
+      }).then((stop) => { if (active) unlisten = stop; else stop() }),
+    ).catch((reason) => {
+      if (active) setError(reason instanceof Error ? reason.message : String(reason))
+    })
+    return () => {
+      active = false
+      unlisten?.()
     }
+  }, [])
 
-    resetSelectionOverlay()
-  }
-
-  const setTranslationBoxPosition = (rect: NormalRect) => {
-    const margin = 10
-    const boxWidth = Math.min(400, Math.max(240, rect.width))
-    const left = Math.max(margin, Math.min(rect.x, window.innerWidth - boxWidth - margin))
-
-    // Estimate translation box height
-    const boxHeight = translationBoxRef.current?.offsetHeight || 80
-    const preferredTop = rect.y + rect.height + margin
-    const fallbackTop = Math.max(margin, rect.y - margin - boxHeight)
-    const top = preferredTop + boxHeight <= window.innerHeight ? preferredTop : fallbackTop
-
-    setTranslationPos({ left, top, maxWidth: boxWidth })
-  }
-
-  const cropAndSend = (rect: Rect) => {
-    if (rect.width === 0 || rect.height === 0 || !baseImage) return
-    const { x, y, width: w, height: h } = normalizeRect(rect)
-
-    const bg = bgCanvasRef.current
-    if (!bg) return
-
-    const scaleX = baseImage.width / bg.width
-    const scaleY = baseImage.height / bg.height
-
-    const cropX = x * scaleX
-    const cropY = y * scaleY
-    const cropW = w * scaleX
-    const cropH = h * scaleY
-
-    const cropCanvas = document.createElement('canvas')
-    cropCanvas.width = cropW
-    cropCanvas.height = cropH
-    const cropCtx = cropCanvas.getContext('2d')
-    if (!cropCtx) return
-
-    cropCtx.drawImage(baseImage, cropX, cropY, cropW, cropH, 0, 0, cropW, cropH)
-    const croppedBase64 = cropCanvas.toDataURL('image/png')
-
-    if (isTranslateMode) {
-      setIsContinuousTranslateActive(true)
-      const normRect = { x, y, width: w, height: h }
-      setSelectedRect(normRect)
-
-      const bg = bgCanvasRef.current
-      if (bg) {
-        const bgCtx = bg.getContext('2d')
-        bgCtx?.clearRect(0, 0, bg.width, bg.height)
-      }
-      
-      const overlay = overlayCanvasRef.current
-      if (overlay) overlay.style.pointerEvents = 'none'
-      
-      drawSelectionOutline(normRect)
-      setTranslationText('Auto-Translating...')
-      setTranslationBoxPosition(normRect)
-      setOverlayInteractable(false)
-
-      window.screenPickerApi?.startContinuousTranslation(normRect)
-    } else {
-      window.screenPickerApi?.sendSelection(croppedBase64)
-    }
-  }
+  useEffect(() => {
+    let unlisten: (() => void) | undefined
+    let active = true
+    void import('@tauri-apps/api/event').then(({ listen }) =>
+      listen<ControlAction>('live-translate-control', (event) => {
+        if (!active) return
+        const action = event.payload
+        if (action.type === 'pause') setPhase('paused')
+        if (action.type === 'resume') setPhase('live')
+        if (action.type === 'change-area') {
+          setPhase('selecting')
+          setTranslation('')
+          setTranslationBackdrop('')
+          setError('')
+        }
+        if (action.type === 'language') {
+          if (action.languageChoice) setLanguageChoice(action.languageChoice)
+          if (action.customLanguage !== undefined) setCustomLanguage(action.customLanguage)
+          setTranslation('')
+        }
+      }).then((stop) => { if (active) unlisten = stop; else stop() }),
+    ).catch((reason) => {
+      if (active) setError(reason instanceof Error ? reason.message : String(reason))
+    })
+    return () => { active = false; unlisten?.() }
+  }, [])
 
-  // Keyboard controls
   useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        if (isContinuousTranslateActive) {
-          e.preventDefault()
-          stopTranslationMode()
-        } else {
-          window.screenPickerApi?.closePicker()
+    const prior = previousPhase.current
+    previousPhase.current = phase
+    if (phase === 'paused' || (phase === 'live' && prior === 'paused')) return
+    const enabled = phase === 'live'
+    let active = true
+    const applyPhase = async () => {
+      if (phase === 'selecting' && prior && prior !== 'selecting') {
+        try {
+          await invoke('close_desktop_window', { label: 'live-translate-controls' })
+        } catch (reason) {
+          if (active) setError(reason instanceof Error ? reason.message : String(reason))
         }
       }
+      try {
+        await invoke('set_live_translate_passthrough', { enabled })
+        if (active) setInteractive(!enabled)
+      } catch (reason) {
+        if (!active) return
+        setInteractive(true)
+        setError(reason instanceof Error ? reason.message : String(reason))
+        setStatus('error')
+        if (enabled) setPhase('selecting')
+      }
     }
-    window.addEventListener('keydown', handleKeyDown)
-    return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [isContinuousTranslateActive])
+    void applyPhase()
+    return () => { active = false }
+  }, [phase])
 
-  // Mouse move tracker for translation box interactivity
   useEffect(() => {
-    const handleMouseMove = (e: MouseEvent) => {
-      if (!isContinuousTranslateActive) return
-      const box = translationBoxRef.current
-      if (!box) return
+    if (targetLanguage) window.localStorage.setItem(LANGUAGE_KEY, targetLanguage)
+  }, [targetLanguage])
 
-      const rect = box.getBoundingClientRect()
-      const isInsideBox =
-        e.clientX >= rect.left &&
-        e.clientX <= rect.right &&
-        e.clientY >= rect.top &&
-        e.clientY <= rect.bottom
-
-      setOverlayInteractable(isInsideBox)
+  useEffect(() => {
+    if (phase !== 'live' || interactive || !selectedPixels || !targetLanguage) return
+    const currentSession = ++session.current
+    let timer: ReturnType<typeof setTimeout> | undefined
+    let translating = false
+    let queued: string | null = null
+    let hasChanged = createFrameChangeTracker()
+    let retryAt = 0
+    let retryChanged = false
+    let translationFailed = false
+    let stopped = false
+    const rect = selectedPixels
+
+    const translate = async (image: string) => {
+      if (translating) { queued = image; return }
+      translating = true
+      setStatus('translating')
+      let failed = false
+      try {
+        const result = await invoke<string>('translate_captured_frame', { image, targetLanguage })
+        translationFailed = false
+        if (!stopped && session.current === currentSession && !queued) {
+          setTranslation(result.trim())
+          setTranslationBackdrop(image)
+          setError('')
+        }
+      } catch (reason) {
+        failed = true
+        translationFailed = true
+        retryChanged = queued !== null
+        queued = null
+        retryAt = Date.now() + 5000
+        if (!stopped && session.current === currentSession) {
+          setError(reason instanceof Error ? reason.message : String(reason))
+          setStatus('error')
+        }
+      } finally {
+        translating = false
+        if (!stopped && session.current === currentSession) {
+          if (queued) {
+            const latest = queued
+            queued = null
+            void translate(latest)
+          } else if (!failed) setStatus('watching')
+        }
+      }
     }
-    window.addEventListener('mousemove', handleMouseMove)
-    return () => window.removeEventListener('mousemove', handleMouseMove)
-  }, [isContinuousTranslateActive])
 
-  const handleMouseDown = (e: React.MouseEvent<HTMLCanvasElement>) => {
-    if (isContinuousTranslateActive) return
-    setIsDrawing(true)
-    const newCoords = {
-      startX: e.clientX,
-      startY: e.clientY,
-      currentX: e.clientX,
-      currentY: e.clientY,
-      width: 0,
-      height: 0
+    const poll = async () => {
+      if (stopped) return
+      let captureFailed = false
+      let captureRetryDelay = 5000
+      try {
+        const image = await invoke<string>('capture_translation_frame', { rect })
+        if (stopped || session.current !== currentSession) return
+        const current = await sampleFrame(image)
+        if (stopped || session.current !== currentSession) return
+        if (Date.now() >= retryAt) {
+          const changed = hasChanged(current)
+          if (changed || retryChanged) {
+            retryChanged = false
+            setTranslation('')
+            void translate(image)
+          }
+          else if (!translating && !translationFailed) setStatus('unchanged')
+        }
+      } catch (reason) {
+        captureFailed = true
+        if (!stopped && session.current === currentSession) {
+          const message = reason instanceof Error ? reason.message : String(reason)
+          if (message.includes('Click the game') || message.includes('outside the active game') || message.includes('No source window')) captureRetryDelay = CAPTURE_INTERVAL_MS
+          setError(message)
+          setStatus('error')
+        }
+      } finally {
+        if (!stopped && session.current === currentSession) {
+          timer = window.setTimeout(poll, captureFailed ? captureRetryDelay : CAPTURE_INTERVAL_MS)
+        }
+      }
     }
-    setCoords(newCoords)
-  }
 
-  const handleCanvasMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
-    if (!isDrawing) return
-    const newCoords = {
-      ...coords,
-      currentX: e.clientX,
-      currentY: e.clientY,
-      width: e.clientX - coords.startX,
-      height: e.clientY - coords.startY
+    void poll()
+    return () => {
+      stopped = true
+      session.current += 1
+      if (timer) window.clearTimeout(timer)
     }
-    setCoords(newCoords)
-    drawSelection(newCoords)
+  }, [phase, interactive, selectedPixels?.x, selectedPixels?.y, selectedPixels?.width, selectedPixels?.height, targetLanguage])
+
+  const startSelection = (event: PointerEvent<HTMLDivElement>) => {
+    if (phase !== 'selecting' || !geometry) return
+    dragStart.current = point(event)
+    setSelection(null)
+    setError('')
+    setStatus('waiting')
+    event.currentTarget.setPointerCapture(event.pointerId)
   }
 
-  const handleMouseUp = (e: React.MouseEvent<HTMLCanvasElement>) => {
-    if (!isDrawing) return
-    setIsDrawing(false)
-    const finalCoords = {
-      ...coords,
-      currentX: e.clientX,
-      currentY: e.clientY,
-      width: e.clientX - coords.startX,
-      height: e.clientY - coords.startY
-    }
-    setCoords(finalCoords)
-    cropAndSend(finalCoords)
+  const moveSelection = (event: PointerEvent<HTMLDivElement>) => {
+    if (dragStart.current) setSelection(regionBetween(dragStart.current, point(event)))
   }
 
-  const handleToggleTranslateMode = () => {
-    const nextMode = !isTranslateMode
-    setIsTranslateMode(nextMode)
-    if (nextMode) {
-      resetSelectionOverlay()
+  const finishSelection = (event: PointerEvent<HTMLDivElement>) => {
+    if (!dragStart.current) return
+    const next = regionBetween(dragStart.current, point(event))
+    dragStart.current = null
+    const roomForResult = geometry?.windowCapture || Math.max(next.y, window.innerHeight - next.y - next.height) >= 88
+    if (next.width < 120 || next.height < 72) {
+      setError('Select an area at least 120 × 72 px.')
+      setStatus('error')
+      setSelection(null)
+    } else if (!roomForResult) {
+      setError('Leave a little space above or below the frame for the translation.')
+      setStatus('error')
+      setSelection(null)
     } else {
-      if (isContinuousTranslateActive) {
-        stopTranslationMode()
-      } else {
-        resetSelectionOverlay()
-      }
+      setSelection(next)
     }
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId)
   }
 
-  const handleFullscreen = () => {
-    if (baseImage && !isTranslateMode) {
-      window.screenPickerApi?.sendSelection(baseImage.src)
+  const begin = async () => {
+    if (!selectedPixels || !targetLanguage) return
+    try {
+      await invoke('open_live_translate_controls')
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : String(reason))
+      setStatus('error')
+      return
     }
+    setTranslation('')
+    setTranslationBackdrop('')
+    setError('')
+    setStatus('waiting')
+    setPhase('live')
   }
 
-  const handleCancel = () => {
-    window.screenPickerApi?.closePicker()
+  const returnToSource = () => {
+    void invoke('set_live_translate_passthrough', { enabled: true }).catch((reason) => {
+      setError(reason instanceof Error ? reason.message : String(reason))
+      setStatus('error')
+    })
   }
 
-  return (
-    <div style={{ width: '100vw', height: '100vh', overflow: 'hidden', position: 'relative', background: 'transparent' }}>
-      <style>{`
-        .vision-glow {
-          position: absolute;
-          inset: 0;
-          pointer-events: none;
-          box-shadow: inset 0 0 70px rgba(16, 185, 129, 0.18);
-          z-index: 5;
-        }
-
-        #toolbar {
-          position: absolute;
-          top: 24px;
-          left: 50%;
-          transform: translateX(-50%);
-          z-index: 10;
-          background: rgba(15, 23, 42, 0.85);
-          backdrop-filter: blur(10px);
-          -webkit-backdrop-filter: blur(10px);
-          border: 1px solid rgba(255, 255, 255, 0.08);
-          padding: 8px 20px;
-          border-radius: 999px;
-          box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
-          display: flex;
-          align-items: center;
-          gap: 12px;
-          color: #f8fafc;
-          font-family: 'Outfit', 'Inter', sans-serif;
-          animation: slide-down 0.4s cubic-bezier(0.16, 1, 0.3, 1);
-        }
-
-        @keyframes slide-down {
-          from { transform: translate(-50%, -20px); opacity: 0; }
-          to { transform: translate(-50%, 0); opacity: 1; }
-        }
-
-        .hint {
-          font-size: 0.82rem;
-          color: #94a3b8;
-          margin-right: 12px;
-          font-weight: 400;
-        }
-
-        .screen-picker-btn {
-          font-family: inherit;
-          font-size: 0.8rem;
-          font-weight: 500;
-          padding: 8px 16px;
-          border-radius: 999px;
-          border: 1px solid transparent;
-          cursor: pointer;
-          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-          display: flex;
-          align-items: center;
-          gap: 6px;
-          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-        }
-
-        .screen-picker-btn:hover {
-          transform: translateY(-1px);
-          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-        }
-
-        .screen-picker-btn:active {
-          transform: translateY(0);
-        }
-
-        .btn-translate {
-          background: rgba(16, 185, 129, 0.15);
-          color: #a7f3d0;
-          border-color: rgba(16, 185, 129, 0.3);
-        }
-
-        .btn-translate:hover {
-          background: rgba(16, 185, 129, 0.3);
-          color: #ecfdf5;
-        }
-
-        .btn-translate.active {
-          background: #10b981;
-          color: #ffffff;
-          border-color: #059669;
-          box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
-        }
-
-        .btn-primary {
-          background: rgba(16, 185, 129, 0.15);
-          color: #a7f3d0;
-          border-color: rgba(16, 185, 129, 0.3);
-        }
-
-        .btn-primary:hover {
-          background: rgba(16, 185, 129, 0.3);
-          color: #ecfdf5;
-        }
-
-        .btn-danger {
-          background: rgba(239, 68, 68, 0.15);
-          color: #fecaca;
-          border-color: rgba(239, 68, 68, 0.3);
-        }
-
-        .btn-danger:hover {
-          background: rgba(239, 68, 68, 0.3);
-          color: #fef2f2;
-        }
-
-        .loading-spinner {
-          display: inline-block;
-          width: 14px;
-          height: 14px;
-          border: 2px solid rgba(255, 255, 255, 0.2);
-          border-radius: 50%;
-          border-top-color: #10b981;
-          animation: picker-spin 0.8s linear infinite;
-          margin-right: 8px;
-        }
-
-        @keyframes picker-spin {
-          to { transform: rotate(360deg); }
-        }
-
-        #translation-box {
-          position: absolute;
-          background: rgba(15, 23, 42, 0.9);
-          backdrop-filter: blur(10px);
-          -webkit-backdrop-filter: blur(10px);
-          border: 1px solid rgba(255, 255, 255, 0.1);
-          color: #f8fafc;
-          padding: 14px 18px;
-          border-radius: 12px;
-          font-family: 'Inter', sans-serif;
-          font-size: 0.9rem;
-          line-height: 1.6;
-          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
-          z-index: 100;
-          animation: fade-in 0.2s ease-out;
-        }
-
-        @keyframes fade-in {
-          from { opacity: 0; transform: scale(0.95); }
-          to { opacity: 1; transform: scale(1); }
-        }
-
-        .close-translate-btn {
-          position: absolute;
-          top: -10px;
-          right: -10px;
-          background: #ef4444;
-          color: white;
-          border: 2px solid rgba(15, 23, 42, 0.95);
-          border-radius: 999px;
-          min-width: 38px;
-          height: 22px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
-          font-size: 0.7rem;
-          font-weight: 700;
-          letter-spacing: 0.05em;
-          text-transform: uppercase;
-          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-          transition: all 0.2s;
-        }
-
-        .close-translate-btn:hover {
-          background: #dc2626;
-          transform: scale(1.05);
-        }
-      `}</style>
+  const resultStyle = (() => {
+    if (!selection) return undefined
+    if (geometry?.windowCapture) {
+      return {
+        left: selection.x,
+        top: selection.y,
+        width: selection.width,
+        height: selection.height,
+      }
+    }
+    const below = window.innerHeight - (selection.y + selection.height) - 16
+    const above = selection.y - 16
+    const placeBelow = below >= 80 || below >= above
+    const maxHeight = Math.min(180, Math.max(0, placeBelow ? below : above))
+    return {
+      left: selection.x,
+      top: placeBelow ? selection.y + selection.height + 8 : selection.y - maxHeight - 8,
+      width: Math.min(window.innerWidth - selection.x - 16, Math.max(220, selection.width)),
+      maxHeight,
+    }
+  })()
 
-      <div className="vision-glow"></div>
-      {!isContinuousTranslateActive && (
-        <div id="toolbar">
-          <span className="hint" id="hint-text">
-            {isTranslateMode ? 'Drag over text to translate to Thai' : 'Click and drag to select a region'}
-          </span>
-          <button
-            className={`screen-picker-btn btn-translate ${isTranslateMode ? 'active' : ''}`}
-            onClick={handleToggleTranslateMode}
-            style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}
-          >
-            {isTranslateMode ? (
-              'Stop Translate'
-            ) : (
-              <>
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
-                  <circle cx="12" cy="12" r="10"></circle>
-                  <line x1="2" y1="12" x2="22" y2="12"></line>
-                  <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
-                </svg>
-                <span>Live Translate</span>
-              </>
-            )}
-          </button>
-          {!isTranslateMode && (
-            <button className="screen-picker-btn btn-primary" onClick={handleFullscreen}>
-              Full Screen
-            </button>
-          )}
-          <button className="screen-picker-btn btn-danger" onClick={handleCancel}>
-            Cancel
-          </button>
+  return (
+    <div className="live-translate">
+      {phase === 'selecting' && (
+        <div className="live-translate-picker" onPointerDown={startSelection} onPointerMove={moveSelection} onPointerUp={finishSelection} onPointerCancel={finishSelection}>
+          {!geometry && <div className="live-translate-loading">{error || 'Preparing live screen…'}</div>}
+          {selection && <div className="live-translate-selection" style={{ left: selection.x, top: selection.y, width: selection.width, height: selection.height }} />}
+          {!selection && <div className="live-translate-crosshair" aria-hidden="true" />}
         </div>
       )}
 
-      <canvas ref={bgCanvasRef} id="bg-canvas" style={{ position: 'absolute', top: 0, left: 0, zIndex: 1 }} />
-      <canvas
-        ref={overlayCanvasRef}
-        id="overlay-canvas"
-        style={{ position: 'absolute', top: 0, left: 0, zIndex: 2, cursor: 'crosshair' }}
-        onMouseDown={handleMouseDown}
-        onMouseMove={handleCanvasMouseMove}
-        onMouseUp={handleMouseUp}
-      />
+      {phase !== 'selecting' && selection && (
+        <>
+          <div className="live-translate-live-frame" style={{ left: selection.x, top: selection.y, width: selection.width, height: selection.height }} aria-hidden="true" />
+          {translation && <div className="live-translate-result" style={resultStyle} aria-live="polite" aria-label={`Translation to ${targetLanguage}`}>
+            {geometry?.windowCapture && translationBackdrop && <img className="live-translate-result-backdrop" src={translationBackdrop} alt="" aria-hidden="true" />}
+            <div className="live-translate-result-text">{translation}</div>
+          </div>}
+        </>
+      )}
 
-      <div
-        ref={translationBoxRef}
-        id="translation-box"
-        style={{
-          display: isContinuousTranslateActive ? 'block' : 'none',
-          position: 'absolute',
-          left: `${translationPos.left}px`,
-          top: `${translationPos.top}px`,
-          maxWidth: `${translationPos.maxWidth}px`,
-          zIndex: 100
-        }}
-      >
-        <div className="close-translate-btn" onClick={stopTranslationMode}>
-          Esc
-        </div>
-        <div id="translation-content">
-          {translationText === 'Auto-Translating...' && (
-            <span className="loading-spinner"></span>
-          )}
-          {translationText}
-        </div>
-      </div>
+      {(phase === 'selecting' || interactive) && <div className="live-translate-toolbar">
+        <div className="live-translate-brand"><span aria-hidden="true">◈</span><div><strong>Live translate</strong><small>{phase === 'selecting' ? 'Draw a frame around the text' : interactive ? 'Controls active · click-through off' : 'Click-through on · Alt+Shift+L for controls'}</small></div></div>
+        <label className="live-translate-language">To
+          <SelectField fullWidth={false} value={languageChoice} onValueChange={(nextValue) => setLanguageChoice(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)} maxLength={64} placeholder="Language name" aria-label="Custom target language" />}
+        {phase === 'selecting' ? (
+          <button type="button" className="live-translate-primary" onClick={() => void begin()} disabled={!selectedPixels || !targetLanguage}>Translate this area</button>
+        ) : (
+          <>
+            {interactive && <button type="button" className="live-translate-primary" onClick={returnToSource}>Return to game or book</button>}
+            <button type="button" onClick={() => setPhase(phase === 'live' ? 'paused' : 'live')}>{phase === 'live' ? 'Pause' : 'Resume'}</button>
+            <button type="button" onClick={() => { setPhase('selecting'); setTranslation(''); setError('') }}>Change area</button>
+          </>
+        )}
+        <button type="button" className="live-translate-close" onClick={() => void window.screenPickerApi?.closePicker()} aria-label="Close live translate">×</button>
+      </div>}
+      {phase === 'selecting' && <div className="live-translate-help">{selection ? `${Math.round(selection.width)} × ${Math.round(selection.height)} px selected` : 'Drag a frame around text on your screen (at least 120 × 72 px)'} · Esc to close</div>}
+      {status === 'error' && error && <div className="live-translate-error" role="alert">{error}</div>}
     </div>
   )
 }