@pheem49/mint 1.14.0 → 1.15.0

package/src/renderer/src/components/SettingsWindow.tsx

@@ -1,4 +1,12 @@
 import React, { useState, useEffect, useRef } from 'react'
+import '../css/settings/base.css'
+import '../../shared/css/settings/general.css'
+import '../../shared/css/settings/profile.css'
+import '../../shared/css/settings/automation.css'
+import '../../shared/css/settings/theme.css'
+import '../../shared/css/settings/plugins.css'
+import '../../shared/css/settings/agents.css'
+import '../../shared/css/settings/shortcuts.css'
 import { getProfileValue, setProfileValue, setActiveModel, authUpdateProfile } from '../tauri'
 import { useAuthUser } from '../../shared/components/AuthGate'
 import { useProviderModels } from '../hooks/useProviderModels'
@@ -31,7 +39,7 @@ export type {
   CustomProviderConfig,
 } from '../../shared/types'
 
-import { DEFAULT_CONFIG } from '../../shared/constants/config'
+import { DEFAULT_CONFIG, migrateTypographyScale, migrateTuiTheme } from '../../shared/constants/config'
 export { DEFAULT_CONFIG }
 import { applyThemeStyles } from '../../shared/utils/ui'
 import { APP_VERSION } from '../../shared/version'
@@ -256,7 +264,7 @@ export default function SettingsWindow() {
         }
         
         if (loadedConfig) {
-          const merged = { ...DEFAULT_CONFIG, ...loadedConfig }
+          const merged = { ...DEFAULT_CONFIG, ...migrateTuiTheme(migrateTypographyScale(loadedConfig)) }
           setConfig(merged)
           
           // sync helper custom models
@@ -562,6 +570,27 @@ export default function SettingsWindow() {
     const updated = { ...config, [field]: value }
     setConfig(updated)
     applyThemeStyles(updated)
+    // Assistant Presence is a live window preference; save it immediately so
+    // closing Settings before pressing Save does not discard the choice.
+    if (field === 'showDesktopWidget' && window.settingsApi) {
+      void window.settingsApi.saveSettings(updated).catch((error) => {
+        console.error('Failed to save Assistant Presence setting:', error)
+      })
+    }
+  }
+
+  const updateFields = (patch: Partial<typeof DEFAULT_CONFIG>) => {
+    const updated = { ...config, ...patch }
+    setConfig(updated)
+    applyThemeStyles(updated)
+    // Theme choices are immediately visible in this window. Persist the same
+    // complete patch so the main window receives one consistent theme update
+    // instead of retaining a stale combination such as glass + no blur.
+    if (window.settingsApi) {
+      void window.settingsApi.saveSettings(updated).catch((error) => {
+        console.error('Failed to save live theme settings:', error)
+      })
+    }
   }
 
   return (
@@ -703,6 +732,7 @@ export default function SettingsWindow() {
             <ThemeTab
               config={config}
               updateField={updateField}
+              updateFields={updateFields}
             />
           )}
 
@@ -731,6 +761,14 @@ export default function SettingsWindow() {
               config={config}
               updateField={updateField}
               dynamicOllamaModels={dynamicOllamaModels}
+              providerModels={{
+                gemini: dynamicGeminiModels,
+                anthropic: dynamicAnthropicModels,
+                openai: dynamicOpenAIModels,
+                openrouter: dynamicOpenRouterModels,
+                deepseek: dynamicDeepSeekModels,
+                local_openai: dynamicLocalModels,
+              }}
             />
           )}
         </div>

package/src/renderer/src/components/SpotlightWindow.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react'
+import '../css/spotlight.css'
 import { evaluateArithmetic } from '../calculator'
 
 const COMMANDS = [

package/src/renderer/src/components/WidgetWindow.tsx

@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from 'react'
+import '../css/widget.css'
+import { getCurrentWindow } from '@tauri-apps/api/window'
 
 export default function WidgetWindow() {
   const [state, setState] = useState('idle')
-
   useEffect(() => {
     if (window.widgetAPI?.onStateChange) {
       window.widgetAPI.onStateChange((newState: string) => {
@@ -13,12 +14,26 @@ export default function WidgetWindow() {
 
   const stateLabel = state.charAt(0).toUpperCase() + state.slice(1)
 
+  const handleMouseDown = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (event.button !== 0) return
+    void getCurrentWindow().startDragging().catch((error) => {
+      console.error('Failed to drag Assistant Presence:', error)
+    })
+  }
+
   return (
     <div id="widget-container" className={`state-${state}`}>
       <div className="aura-container">
         <div className="aura"></div>
       </div>
-      <div className="character-body">
+      <button
+        type="button"
+        className="character-body"
+        aria-label={`Open Mint chat. Assistant is ${stateLabel.toLowerCase()}.`}
+        title="Open Mint chat"
+        onClick={() => void window.widgetAPI.openChat()}
+        onMouseDown={handleMouseDown}
+      >
         {/* Eyes / Face */}
         <div className="eyes">
           <div className="eye left"></div>
@@ -26,7 +41,16 @@ export default function WidgetWindow() {
         </div>
         {/* Mouth/Indicator */}
         <div className="mouth"></div>
-      </div>
+      </button>
+      <button
+        type="button"
+        className="widget-hide-btn"
+        aria-label="Turn off Assistant Presence"
+        title="Turn off Assistant Presence"
+        onClick={() => void window.widgetAPI.setVisible(false)}
+      >
+        ×
+      </button>
       {/* Status Badge */}
       <div className="status-badge" id="status-badge">
         {stateLabel}

package/src/renderer/src/components/WorkspacePanel.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect, useState } from 'react'
-import { getWorkspaceTree, type WorkspaceTreeEntry, createWorkspaceFile, createWorkspaceFolder, deleteWorkspaceItem } from '../tauri'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { workspacePlatform } from '@shared/platform'
+import type { WorkspaceSnapshot, WorkspaceTreeEntry } from '@shared/types'
 import {
   materialFolderIcon,
   materialFileIcon,
@@ -15,6 +16,7 @@ interface WorkspacePanelProps {
   onEnableAgentMode: () => void
   onSetMessage: (message: string) => void
   onWorkspaceReady: (path: string) => void
+  refreshRevision?: number
 }
 
 const FILE_LABEL: Record<string, string> = {
@@ -29,7 +31,7 @@ const FILE_LABEL: Record<string, string> = {
 }
 
 
-function TreeNode({ entry, level, onRefresh, workspacePath }: { entry: WorkspaceTreeEntry; level: number; onRefresh: () => void; workspacePath: string; key?: string }) {
+function TreeNode({ entry, level, onSnapshot, workspacePath, revision }: { entry: WorkspaceTreeEntry; level: number; onSnapshot: (snapshot: WorkspaceSnapshot) => void; workspacePath: string; revision: number; key?: string }) {
   const [open, setOpen] = useState(level < 1)
   const isDirectory = entry.kind === 'directory'
   const hasChildren = entry.children.length > 0
@@ -44,9 +46,8 @@ function TreeNode({ entry, level, onRefresh, workspacePath }: { entry: Workspace
     if (!confirmed) return
 
     try {
-      const absolutePath = `${workspacePath}/${entry.path}`
-      await deleteWorkspaceItem(absolutePath)
-      onRefresh()
+      const snapshot = await workspacePlatform.deleteWorkspaceItem({ root: workspacePath, relativePath: entry.path, revision })
+      onSnapshot(snapshot)
     } catch (err) {
       alert(`Failed to delete item: ${err instanceof Error ? err.message : String(err)}`)
     }
@@ -83,7 +84,7 @@ function TreeNode({ entry, level, onRefresh, workspacePath }: { entry: Workspace
       {isDirectory && open && hasChildren && (
         <div className="workspace-tree-children">
           {entry.children.map((child) => (
-            <TreeNode key={child.path} entry={child} level={level + 1} onRefresh={onRefresh} workspacePath={workspacePath} />
+            <TreeNode key={child.path} entry={child} level={level + 1} onSnapshot={onSnapshot} workspacePath={workspacePath} revision={revision} />
           ))}
         </div>
       )}
@@ -91,46 +92,58 @@ function TreeNode({ entry, level, onRefresh, workspacePath }: { entry: Workspace
   )
 }
 
-export default function WorkspacePanel({ agentMode, sending, workspacePath, onEnableAgentMode, onSetMessage, onWorkspaceReady }: WorkspacePanelProps) {
+export default function WorkspacePanel({ agentMode, sending, workspacePath, onEnableAgentMode, onSetMessage, onWorkspaceReady, refreshRevision = 0 }: WorkspacePanelProps) {
   const [tree, setTree] = useState<WorkspaceTreeEntry | null>(null)
+  const [revision, setRevision] = useState(0)
+  const revisionRef = useRef(0)
+  const refreshInFlightRef = useRef(false)
   const [error, setError] = useState('')
 
-  const refresh = async () => {
+  const applySnapshot = useCallback((snapshot: WorkspaceSnapshot) => {
+    setTree(snapshot.tree)
+    revisionRef.current = snapshot.revision
+    setRevision(snapshot.revision)
+    if (snapshot.path !== workspacePath) onWorkspaceReady(snapshot.path)
+  }, [onWorkspaceReady, workspacePath])
+  const refresh = useCallback(async () => {
     if (!workspacePath.trim()) {
       setError('')
       setTree(null)
       return
     }
+    if (refreshInFlightRef.current) return
 
+    refreshInFlightRef.current = true
     try {
       setError('')
-      const nextTree = await getWorkspaceTree(workspacePath)
-      setTree(nextTree)
-      if (nextTree.path !== workspacePath) onWorkspaceReady(nextTree.path)
+      applySnapshot(await workspacePlatform.getWorkspaceSnapshot({ root: workspacePath, relativePath: '', revision: revisionRef.current }))
     } catch (reason) {
       setError(reason instanceof Error ? reason.message : String(reason))
+    } finally {
+      refreshInFlightRef.current = false
     }
-  }
+  }, [applySnapshot, workspacePath])
 
   useEffect(() => {
-    refresh()
+    void refresh()
 
-    // Refresh when the window gains focus (e.g., switching back from VS Code)
-    const handleFocus = () => {
-      refresh()
+    // There is no filesystem event stream behind this native snapshot API.
+    // Catch up immediately when returning to the app and use a low-frequency
+    // fallback only while this panel is actually visible and focused.
+    const refreshWhenActive = () => {
+      if (document.visibilityState === 'visible' && document.hasFocus()) void refresh()
     }
-    window.addEventListener('focus', handleFocus)
+    window.addEventListener('focus', refreshWhenActive)
+    document.addEventListener('visibilitychange', refreshWhenActive)
 
-    // Poll every 15 seconds to catch edits/updates in real-time
-    const interval = setInterval(() => {
-      refresh()
-    }, 15000)
+    const interval = window.setInterval(refreshWhenActive, 30000)
 
     return () => {
-      window.removeEventListener('focus', handleFocus)
+      window.removeEventListener('focus', refreshWhenActive)
+      document.removeEventListener('visibilitychange', refreshWhenActive)
       clearInterval(interval)
     }
-  }, [workspacePath])
+  }, [workspacePath, refreshRevision, refresh])
 
   const handleCreateFile = async () => {
     if (!workspacePath.trim()) return
@@ -139,9 +152,7 @@ export default function WorkspacePanel({ agentMode, sending, workspacePath, onEn
 
     try {
       setError('')
-      const fullPath = `${workspacePath}/${name.trim()}`
-      await createWorkspaceFile(fullPath)
-      await refresh()
+      applySnapshot(await workspacePlatform.createWorkspaceFile({ root: workspacePath, relativePath: name.trim(), revision }))
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err))
     }
@@ -154,9 +165,7 @@ export default function WorkspacePanel({ agentMode, sending, workspacePath, onEn
 
     try {
       setError('')
-      const fullPath = `${workspacePath}/${name.trim()}`
-      await createWorkspaceFolder(fullPath)
-      await refresh()
+      applySnapshot(await workspacePlatform.createWorkspaceFolder({ root: workspacePath, relativePath: name.trim(), revision }))
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err))
     }
@@ -165,21 +174,30 @@ export default function WorkspacePanel({ agentMode, sending, workspacePath, onEn
   return (
     <section className="workspace-panel">
       <header className="workspace-panel-header">
-        <div>
-          <span className="workspace-kicker">Agent Workspace</span>
-          <h2>Workspace</h2>
+        <div className="workspace-title-group">
+          <span className="workspace-title-icon material-icon folder" aria-hidden="true">
+            <img src={folderOpenIcon} alt="" draggable={false} />
+          </span>
+          <div className="workspace-title-copy">
+            <h2 title={workspacePath || 'Workspace'}>{tree?.name || workspacePath.split(/[\\/]/).filter(Boolean).pop() || 'Workspace'}</h2>
+          </div>
+          <span className="workspace-agent-pill" data-state={sending ? 'thinking' : agentMode ? 'agent' : 'idle'}>
+            {sending ? 'Running' : agentMode ? 'Agent mode' : 'Manual'}
+          </span>
+        </div>
+        <div className="workspace-panel-actions" aria-label="Workspace actions">
+          <button type="button" onClick={handleCreateFile} disabled={!workspacePath.trim()} aria-label="New file" title="New file">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M12 11v6M9 14h6"/></svg>
+          </button>
+          <button type="button" onClick={handleCreateFolder} disabled={!workspacePath.trim()} aria-label="New folder" title="New folder">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M12 10v6M9 13h6"/></svg>
+          </button>
+          <button type="button" onClick={refresh} disabled={!workspacePath.trim()} aria-label="Refresh workspace" title="Refresh workspace">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M20 7v5h-5M4 17v-5h5"/><path d="M5.6 9a7 7 0 0 1 11.55-2.6L20 12M4 12l2.85 5.6A7 7 0 0 0 18.4 15"/></svg>
+          </button>
         </div>
-        <span className="workspace-agent-pill" data-state={sending ? 'thinking' : agentMode ? 'agent' : 'idle'}>
-          {sending ? 'Running' : agentMode ? 'Agent mode' : 'Manual'}
-        </span>
       </header>
 
-      <div className="workspace-panel-actions">
-        <button type="button" onClick={handleCreateFile} disabled={!workspacePath.trim()}>New File</button>
-        <button type="button" onClick={handleCreateFolder} disabled={!workspacePath.trim()}>New Folder</button>
-        <button type="button" onClick={refresh} disabled={!workspacePath.trim()}>Refresh</button>
-      </div>
-
       <div className="workspace-tree-shell">
         {error ? (
           <div className="workspace-tree-empty">{error}</div>
@@ -194,7 +212,7 @@ export default function WorkspacePanel({ agentMode, sending, workspacePath, onEn
             </div>
             <div className="workspace-tree">
               {tree.children.map((entry) => (
-                <TreeNode key={entry.path} entry={entry} level={0} onRefresh={refresh} workspacePath={workspacePath} />
+                <TreeNode key={entry.path} entry={entry} level={0} onSnapshot={applySnapshot} workspacePath={workspacePath} revision={revision} />
               ))}
             </div>
           </>

package/src/renderer/src/components/browser-shell.css

@@ -0,0 +1,185 @@
+.mint-browser-shell {
+  width: 100vw;
+  height: 100%;
+  overflow: hidden;
+  color: #e5e7eb;
+  background: transparent;
+  font-family: 'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+.mint-browser-tabs {
+  display: flex;
+  align-items: end;
+  gap: 6px;
+  height: 42px;
+  padding: 7px 14px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  background: #151619;
+}
+
+.mint-browser-tab {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: min(250px, 42vw);
+  height: 35px;
+  padding: 0 9px 0 12px;
+  border: 1px solid rgba(255, 255, 255, 0.11);
+  border-bottom-color: #25272c;
+  border-radius: 9px 9px 0 0;
+  color: #f3f4f6;
+  background: #24262a;
+  font-size: 0.78rem;
+}
+
+.mint-browser-tab-icon {
+  color: #34d399;
+  font-size: 0.58rem;
+}
+
+.mint-browser-tab-title {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mint-browser-tab-close,
+.mint-browser-new-tab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  color: #9ca3af;
+  background: transparent;
+}
+
+.mint-browser-tab-close {
+  width: 23px;
+  height: 23px;
+  border-radius: 5px;
+  font-size: 1rem;
+}
+
+.mint-browser-tab-close:hover,
+.mint-browser-new-tab:hover {
+  color: #f9fafb;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.mint-browser-new-tab {
+  width: 30px;
+  height: 30px;
+  margin-bottom: 2px;
+  border-radius: 6px;
+  font-size: 1.25rem;
+}
+
+.mint-browser-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  width: 100%;
+  height: 50px;
+  padding: 7px 14px 8px;
+  background: #1b1c20;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.mint-browser-nav-group {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex: 0 0 auto;
+}
+
+.mint-browser-nav-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  flex: 0 0 auto;
+  border: 0;
+  border-radius: 6px;
+  color: #a7adb8;
+  background: transparent;
+  font-size: 1.15rem;
+}
+
+.mint-browser-nav-button:hover {
+  color: #f1f5f9;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.mint-browser-address-input {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  flex: 1;
+  height: 34px;
+  gap: 8px;
+  padding-left: 11px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 9px;
+  color: #9ca3af;
+  background: #24262b;
+}
+
+.mint-browser-address-wrap {
+  position: relative;
+  min-width: 0;
+  flex: 1;
+}
+
+.mint-browser-address-wrap .mint-browser-address-input {
+  width: 100%;
+}
+
+.mint-browser-address-input:focus-within {
+  border-color: rgba(52, 211, 153, 0.65);
+  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.12);
+}
+
+.mint-browser-address-icon {
+  color: #9ca3af;
+  font-size: 0.95rem;
+}
+
+.mint-browser-address-input input {
+  min-width: 0;
+  flex: 1;
+  border: 0;
+  outline: 0;
+  color: #f1f5f9;
+  background: transparent;
+  font: 0.8rem ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+.mint-browser-address-input > button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 100%;
+  border: 0;
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 0 8px 8px 0;
+  color: #34d399;
+  background: transparent;
+}
+
+.mint-browser-address-input > button:hover {
+  background: rgba(52, 211, 153, 0.12);
+}
+
+.mint-browser-address-input svg {
+  width: 15px;
+  height: 15px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}

package/src/renderer/src/components/browser-suggestions-popup.css

@@ -0,0 +1,55 @@
+.browser-suggestions-popup {
+  width: 100vw;
+  min-height: 52px;
+  overflow: hidden;
+  padding: 5px 0;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 10px;
+  color: #f3f4f6;
+  background: #2a2b30;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42);
+  font-family: 'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+.browser-suggestions-popup-item {
+  display: grid;
+  grid-template-columns: 24px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 7px;
+  width: 100%;
+  min-height: 38px;
+  padding: 7px 12px;
+  border: 0;
+  color: #f3f4f6;
+  background: transparent;
+  text-align: left;
+  font: inherit;
+  font-size: 0.78rem;
+}
+
+.browser-suggestions-popup-item:hover,
+.browser-suggestions-popup-item:focus-visible {
+  outline: 0;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.browser-suggestions-popup-icon {
+  color: #aeb4bf;
+  font-size: 1rem;
+  text-align: center;
+}
+
+.browser-suggestions-popup-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.browser-suggestions-popup-detail {
+  overflow: hidden;
+  max-width: 170px;
+  color: #aeb4bf;
+  font-size: 0.7rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/renderer/src/components/liveTranslateFrames.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest'
+import { hasMeaningfulFrameChange } from './liveTranslateFrames'
+
+describe('live translation change detection', () => {
+  const frame = () => new Uint8ClampedArray(160 * 90).fill(110)
+
+  it('translates the first frame and skips identical frames', () => {
+    const first = frame()
+    expect(hasMeaningfulFrameChange(null, first)).toBe(true)
+    expect(hasMeaningfulFrameChange(first, frame())).toBe(false)
+  })
+
+  it('ignores a blinking caret but reacts to a changed line', () => {
+    const first = frame()
+    const caret = frame()
+    caret.fill(220, 500, 508)
+    expect(hasMeaningfulFrameChange(first, caret)).toBe(false)
+
+    const changedLine = frame()
+    changedLine.fill(220, 500, 530)
+    expect(hasMeaningfulFrameChange(first, changedLine)).toBe(true)
+  })
+})

package/src/renderer/src/components/liveTranslateFrames.ts

@@ -0,0 +1,34 @@
+const SAMPLE_WIDTH = 160
+const SAMPLE_HEIGHT = 90
+
+export async function sampleFrame(dataUri: string): Promise<Uint8ClampedArray> {
+  const image = new Image()
+  await new Promise<void>((resolve, reject) => {
+    image.onload = () => resolve()
+    image.onerror = () => reject(new Error('Unable to read the selected screen area.'))
+    image.src = dataUri
+  })
+  const canvas = document.createElement('canvas')
+  canvas.width = SAMPLE_WIDTH
+  canvas.height = SAMPLE_HEIGHT
+  const context = canvas.getContext('2d', { willReadFrequently: true })
+  if (!context) throw new Error('Unable to compare screen frames.')
+  context.drawImage(image, 0, 0, SAMPLE_WIDTH, SAMPLE_HEIGHT)
+  const rgba = context.getImageData(0, 0, SAMPLE_WIDTH, SAMPLE_HEIGHT).data
+  const gray = new Uint8ClampedArray(SAMPLE_WIDTH * SAMPLE_HEIGHT)
+  for (let pixel = 0; pixel < gray.length; pixel += 1) {
+    const offset = pixel * 4
+    gray[pixel] = Math.round(rgba[offset] * 0.299 + rgba[offset + 1] * 0.587 + rgba[offset + 2] * 0.114)
+  }
+  return gray
+}
+
+/** Ignore compression noise and a blinking caret, but catch changed words or lines. */
+export function hasMeaningfulFrameChange(previous: Uint8ClampedArray | null, current: Uint8ClampedArray): boolean {
+  if (!previous || previous.length !== current.length) return true
+  let changed = 0
+  for (let pixel = 0; pixel < current.length; pixel += 1) {
+    if (Math.abs(current[pixel] - previous[pixel]) >= 28) changed += 1
+  }
+  return changed >= Math.max(20, Math.ceil(current.length * 0.0015))
+}