@pheem49/mint 1.15.0 → 1.17.0

package/src/renderer/tests/sessionSources.browser.tsx

@@ -0,0 +1,168 @@
+import React, { useState } from 'react'
+import { createRoot } from 'react-dom/client'
+import ToolSurfacePage from '../shared/components/workspace/ToolSurfacePage'
+import ToolsPanelToggle from '../shared/components/workspace/ToolsPanelToggle'
+import { useSessionSources } from '../shared/utils/useSessionSources'
+import SessionSources from '../shared/components/workspace/SessionSources'
+import { installRendererPlatform, installWorkspacePlatform, type RendererAdapter, type WorkspacePlatform } from '../shared/platform'
+import type { ConversationSources } from '../shared/types'
+import { sourceAttachments } from '../shared/utils/sourceAttachments'
+import '../src/css/desktop-tools.css'
+
+const canvas = document.createElement('canvas'); canvas.width = 640; canvas.height = 400
+const context = canvas.getContext('2d')!; context.fillStyle = '#256853'; context.fillRect(0, 0, 640, 400); context.fillStyle = '#dcfce7'; context.font = '36px sans-serif'; context.fillText('Test image', 200, 210)
+const originalImage = canvas.toDataURL('image/png')
+const preview = await sourceAttachments({ imageAttachments: [{ name: 'reference.png', dataUri: originalImage }] })
+const data: ConversationSources = {
+  attachments: [
+    { ...preview[0], id: 1, interactionId: 2, libraryItemId: 'reference-item' },
+    ...['Math-Data-Science-Exam.pdf', '01_slr_model_assumptions.md', '02_least_squares_estimation.md', '03_coefficient_accuracy.md', '04_r_squared_rse.md', '05_statistic.md'].map((name, index) => ({ id: index + 2, interactionId: 4 + index, name, kind: 'file' as const, mimeType: name.endsWith('.pdf') ? 'application/pdf' : 'text/markdown', thumbnailDataUri: null })),
+  ],
+  webSearchProgress: [{ type: 'ToolEnd', data: { action: 'web_search', input: { query: 'linear regression' }, result: '1. Linear regression reference\nURL: https://example.com/regression\nReference material\n\n2. Least squares guide\nURL: https://docs.example.com/least-squares\nA guide' } }],
+}
+let fail = false
+let deferA = false
+let resolveA: ((value: ConversationSources) => void) | null = null
+installRendererPlatform({ getConversationSources: async (chatId: string) => {
+  if (fail) throw new Error('Offline')
+  if (chatId === 'A' && deferA) return new Promise<ConversationSources>(resolve => { resolveA = resolve })
+  return chatId === 'A' ? data : { attachments: [], webSearchProgress: [] }
+} } as unknown as RendererAdapter)
+installWorkspacePlatform({ getGitBranchInfo: async () => ({ isRepository: true, currentBranch: 'Rust', isDirty: true, branches: [], remoteBranches: [], detachedHead: null }) } as unknown as WorkspacePlatform)
+
+function Fixture() {
+  const [chatId, setChatId] = useState('A')
+  const [open, setOpen] = useState(false)
+  const [selected, setSelected] = useState(false)
+  const session = useSessionSources(chatId, [], open)
+  const noop = () => {}
+  const close = () => { setOpen(false); requestAnimationFrame(() => document.querySelector<HTMLButtonElement>('.tools-panel-toggle')?.focus()) }
+  const desktop = location.pathname.includes('sessionSources')
+
+  return <>
+    <style>{`*{box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden}.assistant-workspace{flex:1;min-width:0}body{margin:0;background:#111113;color:#e8eaed;font-family:Arial,sans-serif;--text-main:#e8eaed;--text-secondary:#c5cad1;--text-muted:#8b939f;--bg-overlay:#111113;--surface-strong:#25262b;--border:#33353b;--accent:#7edbb5;--border-subtle:#27292d;--bg-surface-soft:#1a1b20;--bg-surface-hover:#22242a}.fixture-bar{display:flex;align-items:center;justify-content:flex-end;gap:12px;height:50px;padding:8px 16px;border-bottom:1px solid #33353b}#qa-results{position:fixed;bottom:6px;left:8px;max-width:calc(100vw - 16px);font-size:10px;white-space:pre-wrap;pointer-events:none}`}</style>
+    <header className="fixture-bar"><span>Session sources fixture</span><button id="switch-chat" onClick={() => setChatId(id => id === 'A' ? 'B' : 'A')}>Switch session</button><ToolsPanelToggle open={open} count={0} onToggle={() => setOpen(v => !v)} /></header>
+    <div className={`app-body ${open ? 'tool-surface-active' : ''}`} style={{ position: 'relative', height: 'calc(100dvh - 50px)', display: 'flex' }}>
+      <main className="assistant-workspace"><h1>Conversation</h1><textarea aria-label="Message" defaultValue="Keep my draft" /></main>
+      {open && <ToolSurfacePage surfaces={selected ? [{ id: 'sources', kind: 'sources', title: 'Sources' }] : []} activeSurfaceId={selected ? 'sources' : null} terminalSize={440} desktopTools={desktop}
+        sourceCount={session.sources.length} onOpenSources={() => setSelected(true)}
+        sourcesContent={<SessionSources key={chatId} {...session} onRetry={session.retry} onOpenLibrary={url => { window.history.pushState({}, '', url); window.dispatchEvent(new PopStateEvent('popstate')); close() }} />}
+        onSelect={noop} onClose={() => setSelected(false)} onCloseAll={() => setSelected(false)} onDuplicate={noop} onRename={noop} onCloseOthers={noop} onResizeTerminal={noop} onResizePanel={noop}
+        onOpenTerminal={noop} onOpenBrowser={noop} onOpenReview={noop} onOpenFiles={noop} onOpenMods={noop} onOpenBackgroundTasks={noop} onModsPanelTarget={noop} onBackgroundPanelTarget={noop} onClosePanel={close} />}
+    </div>
+    <pre id="qa-results">Running…</pre>
+  </>
+}
+createRoot(document.getElementById('root')!).render(<Fixture />)
+const delay = (ms = 50) => new Promise(resolve => setTimeout(resolve, ms))
+async function waitFor(check: () => boolean, name: string) { for (let i = 0; i < 100; i++) { if (check()) return; await delay() } throw new Error(name) }
+const results: string[] = []
+const check = (condition: unknown, name: string) => { if (!condition) throw new Error(name); results.push(`PASS ${name}`) }
+function click(selector: string) { const target = document.querySelector<HTMLElement>(selector); if (!target) throw new Error(`Missing ${selector}`); target.click() }
+async function run() {
+  await waitFor(() => Boolean(document.querySelector('.tools-panel-toggle')), 'Tools trigger')
+  check(!document.querySelector('.session-sources-toggle'), 'standalone Sources button is removed')
+  click('.tools-panel-toggle')
+  await waitFor(() => document.querySelector('[aria-label="9 session sources"]'), 'Sources count')
+  check(true, 'Tools launcher shows the current session source count')
+  click('[title="Session sources"]')
+  await waitFor(() => Boolean(document.querySelector('.session-source-row')), 'Saved sources')
+  check(document.querySelectorAll('.session-source-row').length === 9, 'all session sources are visible without expanding')
+  check(document.querySelector<HTMLAnchorElement>('.session-source-row[href^="/library"]')?.getAttribute('href') === '/library?item=reference-item', 'source image links to its Library original')
+  check(document.querySelector('.session-source-icon img'), 'sent image has a thumbnail')
+  check(preview[0].name === 'reference.png' && (preview[0].thumbnailDataUri?.length || 0) < 262144, 'thumbnail generation preserves name and bounds payload size')
+  check(document.querySelector('.session-sources')?.textContent?.includes('Math-Data-Science-Exam.pdf'), 'sent document appears with filename')
+  if (location.search.includes('preview')) { document.getElementById('qa-results')!.textContent = ''; return }
+  check(!document.querySelector('.session-sources-more'), 'Sources does not hide items behind Show more')
+  check([...document.querySelectorAll('.session-sources-group h3')].map(el => el.textContent).join('|') === 'Images1|Files6|Web searches2', 'group headings show their counts')
+  const search = document.querySelector<HTMLInputElement>('[aria-label="Search Sources"]')!
+  check(search, 'larger source collections offer search')
+  const enterSearch = async (value: string) => {
+    Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(search, value)
+    search.dispatchEvent(new Event('input', { bubbles: true }))
+    await delay()
+  }
+  await enterSearch('LEAST_SQUARES')
+  check(document.querySelectorAll('.session-source-row').length === 1 && document.querySelector('.session-source-row')?.textContent?.includes('02_least_squares'), 'search filters names without case sensitivity')
+  await enterSearch('docs.example.com')
+  check(document.querySelectorAll('.session-source-row').length === 1, 'search filters domains')
+  await enterSearch('no-such-source')
+  check(document.querySelector('.session-sources-empty')?.textContent?.includes('No sources match'), 'unmatched search explains its empty result')
+  await enterSearch('')
+  check(document.querySelectorAll('.session-source-row').length === 9, 'clearing search restores every source')
+  const titleStyle = getComputedStyle(document.querySelector('.session-source-copy strong')!)
+  check(titleStyle.webkitLineClamp === '2' && titleStyle.whiteSpace === 'normal', 'source titles allow two lines')
+  check(document.querySelector<HTMLAnchorElement>('.session-source-row[href^="https:"]')?.href === 'https://example.com/regression', 'historical web searches link to source pages')
+  document.getAnimations().forEach(animation => animation.finish())
+  await delay()
+  check(document.documentElement.scrollWidth <= innerWidth, 'Tools does not overflow the page')
+  const popover = document.querySelector<HTMLElement>('.tool-surface-sources')!
+  check(popover.getBoundingClientRect().right <= innerWidth && popover.getBoundingClientRect().left >= 0, 'Sources tool fits viewport')
+  check(getComputedStyle(popover).overflowY === 'auto', 'Sources tool can scroll')
+  fail = true; await waitFor(() => Boolean(document.querySelector('.session-sources-error')), 'Error state')
+  check(document.querySelectorAll('.session-source-row').length === 9, 'refresh error preserves known sources')
+  fail = false; click('.session-sources-error button'); await waitFor(() => !document.querySelector('.session-sources-error'), 'Retry')
+  check(true, 'retry recovers')
+  deferA = true; click('.tools-panel-toggle'); await delay(); click('.tools-panel-toggle'); await waitFor(() => Boolean(resolveA), 'Pending A request')
+  click('#switch-chat'); await waitFor(() => Boolean(document.querySelector('.session-sources-empty')), 'Empty B')
+  resolveA!(data); await delay()
+  check(document.querySelectorAll('.session-source-row').length === 0, 'late response cannot leak another session sources')
+  check(document.querySelector('.session-sources-empty')?.textContent?.includes('Images and files you send'), 'empty session explains what appears here')
+  deferA=false;click('#switch-chat')
+  await waitFor(()=>Boolean(document.querySelector('.session-source-row[href^="/library"]')),'Sources for internal navigation')
+  let navigated=false
+  const navigation=()=>{navigated=true}
+  window.addEventListener('popstate',navigation)
+  const libraryLink=document.querySelector<HTMLAnchorElement>('.session-source-row[href^="/library"]')!
+  const clickEvent=new MouseEvent('click',{bubbles:true,cancelable:true,button:0})
+  let preventedByComponent=false
+  const suppressReload=(event:MouseEvent)=>{preventedByComponent=event.defaultPrevented;event.preventDefault()}
+  document.addEventListener('click',suppressReload)
+  libraryLink.dispatchEvent(clickEvent)
+  document.removeEventListener('click',suppressReload)
+  check(preventedByComponent && navigated, 'Library source navigation preserves the live application and composer')
+  window.removeEventListener('popstate',navigation)
+  await waitFor(()=>!document.querySelector('.tool-surface-page'),'Source navigation closes Tools')
+  check(document.querySelector<HTMLTextAreaElement>('textarea')?.value === 'Keep my draft', 'Library navigation preserves the draft')
+  click('.tools-panel-toggle'); await waitFor(() => Boolean(document.querySelector('.tool-surface-sources')), 'Sources reopens')
+  document.querySelector<HTMLButtonElement>('[role="tab"]')!.focus()
+  document.activeElement!.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+  await waitFor(() => !document.querySelector('.tool-surface-page'), 'Escape closes Sources tool')
+  await waitFor(() => document.activeElement === document.querySelector('.tools-panel-toggle'), 'Escape restores focus to Tools')
+  check(true, 'Escape restores focus to Tools')
+  const iconFixture = document.createElement('div')
+  document.body.append(iconFixture)
+  const iconRoot = createRoot(iconFixture)
+  iconRoot.render(<SessionSources sources={[
+    { id: 'web-good', kind: 'web', name: 'Website with icon', detail: 'example.com', url: 'https://example.com/with-icon', faviconUrl: originalImage },
+    { id: 'web-broken', kind: 'web', name: 'Website without icon', detail: 'other.example', url: 'https://other.example/no-icon', faviconUrl: 'data:image/png;base64,AA==' },
+    { id: 'image-thumbnail', kind: 'image', name: 'reference.png', detail: 'Image', thumbnailDataUri: originalImage },
+  ]} loading={false} error="" onRetry={() => {}} onOpenLibrary={() => {}} />)
+  await waitFor(() => Boolean(iconFixture.querySelector<HTMLImageElement>('.is-web img')?.naturalWidth), 'Website favicon loads')
+  const favicon = iconFixture.querySelector<HTMLImageElement>('.is-web img')!
+  check(favicon.width === 20 && favicon.height === 20, 'website favicon fits its existing icon slot')
+  check(favicon.referrerPolicy === 'no-referrer', 'favicon request omits the chat page referrer')
+  await waitFor(() => Boolean(iconFixture.querySelector('[href="https://other.example/no-icon"] .is-web svg')), 'Unavailable favicon falls back')
+  check(!iconFixture.querySelector('[href="https://other.example/no-icon"] img'), 'failed favicon uses the globe instead of a broken image')
+  check(iconFixture.querySelector<HTMLImageElement>('.is-image img')?.width === 30, 'attachment thumbnails retain their existing size')
+  favicon.dispatchEvent(new Event('error'))
+  await waitFor(() => Boolean(iconFixture.querySelector('[href="https://example.com/with-icon"] .is-web svg')), 'Late favicon failure falls back')
+  check(Boolean(iconFixture.querySelector('[href="https://example.com/with-icon"]')), 'favicon failure preserves the source link')
+  iconRoot.unmount(); iconFixture.remove()
+  let openedArtifact: any = null
+  const artifactFixture = document.createElement('div')
+  document.body.append(artifactFixture)
+  const artifactRoot = createRoot(artifactFixture)
+  artifactRoot.render(<SessionSources sources={[
+    { id: 'img-1', kind: 'image', name: 'photo.png', detail: 'Image', thumbnailDataUri: originalImage },
+  ]} loading={false} error="" onRetry={() => {}} onOpenLibrary={() => {}} onOpenArtifact={art => { openedArtifact = art }} />)
+  await waitFor(() => Boolean(artifactFixture.querySelector('.session-source-row')), 'Image row ready')
+  const imgRow = artifactFixture.querySelector<HTMLAnchorElement>('.session-source-row')!
+  check(imgRow.getAttribute('title')?.includes('Open image preview in Tools'), 'image source row indicates tool preview')
+  imgRow.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, button: 0 }))
+  await waitFor(() => Boolean(openedArtifact), 'Image opens via onOpenArtifact')
+  check(openedArtifact?.type === 'image' && openedArtifact?.path === 'sources/img-1/photo.png', 'image opens as artifact preview')
+  artifactRoot.unmount(); artifactFixture.remove()
+  document.getElementById('qa-results')!.textContent = results.join('\n') + '\nALL PASSED'
+}
+run().catch(error => { document.getElementById('qa-results')!.textContent = results.join('\n') + `\nFAIL ${error.message}` })

package/src/renderer/tests/skills.browser.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<style>*{box-sizing:border-box}body{margin:24px;background:#121212;color:#eee;font-family:Arial,sans-serif}pre{white-space:pre-wrap}</style></head>
+<body><div id="root"></div><pre id="result">RUNNING</pre>
+<script type="module">
+import React from 'react';
+import {createRoot} from 'react-dom/client';
+import {AgentActivityTable} from '/shared/components/AgentActivityTable.tsx';
+import {activitiesFrom} from '/shared/utils/agentActivity.ts';
+const root=createRoot(document.getElementById('root'));
+const input={path:'/repo/.agents/skills/review/SKILL.md',skill_name:'review'};
+const start={type:'ToolStart',data:{action:'read_file',input}};
+const end=result=>({type:'ToolEnd',data:{action:'read_file',input,result}});
+async function render(events){root.render(React.createElement(AgentActivityTable,{activityView:activitiesFrom(events)}));await new Promise(resolve=>setTimeout(resolve,50));}
+function check(text){if(!document.getElementById('root').textContent.includes(text))throw Error(`Missing ${text}`)}
+try {
+  await render([start]);check('Reading skill: review');
+  await render([start,end('[Loaded skill: review]\nReview the changed files.')]);check('Loaded skill: review');
+  await render([start,end('Error: denied')]);check('Failed to read skill: review');
+  await render([start,end('1 | header only')]);check('Read skill preview: review');
+  await render([start,end('[Loaded skill: review]\nReview the changed files.')]);
+  document.getElementById('result').textContent='PASS: rendered reading, loaded, failed, and preview states';
+} catch(error){document.getElementById('result').textContent='FAIL: '+error.stack;}
+</script></body></html>

package/src/renderer/tests/toolsPanel.browser.html

@@ -0,0 +1 @@
+<!doctype html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"></head><body><div id="root"></div><script type="module" src="./toolsPanel.browser.tsx"></script></body></html>

package/src/renderer/tests/toolsPanel.browser.tsx

@@ -0,0 +1,113 @@
+import React, { useState } from 'react'
+import { createRoot } from 'react-dom/client'
+import ToolSurfacePage, { type ToolSurface } from '../shared/components/workspace/ToolSurfacePage'
+import ToolsPanelToggle from '../shared/components/workspace/ToolsPanelToggle'
+import { ModsPanel } from '../shared/components/extensions/ModsPanel'
+import { BackgroundTerminals } from '../shared/components/workspace/BackgroundTerminals'
+import { installRendererPlatform, type RendererAdapter } from '../shared/platform'
+import type { BackgroundJob } from '../shared/types'
+
+// Isolated browser fixture: only the external runtime boundary is replaced.
+const job: BackgroundJob = { id: 'job-1', command: 'npm run dev', cwd: '/workspace/alpha', workspacePath: '/workspace/alpha', chatId: 'chat-a', pid: 10, status: 'running', exitCode: null, error: null, startedAt: 0, endedAt: null, elapsedSeconds: 12, serverUrl: null }
+const other = { ...job, id: 'job-2', workspacePath: '/workspace/beta', cwd: '/workspace/beta' }
+let jobs = [job, other]
+let failJobs = false
+let modCloses = 0
+let listCalls = 0
+let outputCalls = 0
+let stopCalls = 0
+const enabledMod = { id: 'weather', name: 'Weather', enabled: true, hash: 'rev-1', activeHash: 'rev-1', revisions: ['rev-1'], manifest: { version: '1.0.0', permissions: [] }, snapshot: { ui: { above_composer: { type: 'text', text: 'Weather band' } } } }
+let mods = [enabledMod]
+installRendererPlatform({
+  isTauriRuntime: () => false,
+  listBackgroundJobs: async (workspace?: string) => { listCalls++; if (failJobs) throw new Error('offline'); return workspace ? jobs.filter(j => j.workspacePath === workspace) : [...jobs] },
+  getBackgroundJob: async (id: string) => { outputCalls++; return { ...jobs.find(j => j.id === id), stdout: 'Server ready', stderr: '', truncated: false } },
+  stopBackgroundJob: async (id: string) => { stopCalls++; jobs = jobs.map(j => j.id === id ? { ...j, status: 'stopped', exitCode: 0 } : j); return jobs.find(j => j.id === id) },
+  deleteBackgroundJob: async (id: string) => { jobs = jobs.filter(j => j.id !== id) },
+  modsOperation: async (op: { action: string; workspacePath: string }) => {
+    if (op.action === 'close') modCloses++
+    return { mods: op.workspacePath.endsWith('alpha') ? mods : [], session: { hotReload: false } }
+  },
+} as unknown as RendererAdapter)
+
+function Fixture() {
+  const [open, setOpen] = useState(false)
+  const [surfaces, setSurfaces] = useState<ToolSurface[]>([])
+  const [active, setActive] = useState<string | null>(null)
+  const [workspace, setWorkspace] = useState('/workspace/alpha')
+  const [count, setCount] = useState(0)
+  const [modsTarget, setModsTarget] = useState<HTMLDivElement | null>(null)
+  const [tasksTarget, setTasksTarget] = useState<HTMLDivElement | null>(null)
+  const desktop = new URLSearchParams(location.search).has('desktop')
+  const utility = (kind: 'mods' | 'background') => {
+    setOpen(true); setActive(kind)
+    setSurfaces(previous => previous.some(s => s.id === kind) ? previous : [...previous, { id: kind, kind, title: kind === 'mods' ? 'Mods' : 'Background tasks' }])
+  }
+  const noop = () => {}
+  return <>
+    <style>{`*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;--text-main:#e7ece9;--text-muted:#9aa5a0;--bg-surface:#181c1a;--panel-bg:#181c1a;--surface-bg:#222824;--surface-strong:#2c342e;--border:#38413b;--accent:#7edbb5;--accent-subtle:#253e32;background:#111613;color:var(--text-main)}.app-body{position:relative;height:calc(100dvh - 50px);display:flex}.assistant-workspace{flex:1;padding:24px;min-width:0}.fixture-header{height:50px;display:flex;align-items:center;gap:12px;padding:8px 16px}.fixture-composer{margin-top:60px}#qa-results{position:fixed;bottom:0;left:0;z-index:1000;max-width:45vw;font-size:10px;white-space:pre-wrap;pointer-events:none}`}</style>
+    <header className="fixture-header"><span>Mint Tools fixture</span><ToolsPanelToggle open={open} count={count} onToggle={() => setOpen(v => !v)} className={desktop ? 'mint-titlebar-icon-button' : ''} /><button id="switch-workspace" onClick={() => setWorkspace(w => w.endsWith('alpha') ? '/workspace/beta' : '/workspace/alpha')}>Switch workspace</button></header>
+    <div className={`app-body ${open ? 'tool-surface-active' : ''}`} style={{ '--tool-surface-width': '440px' } as React.CSSProperties}>
+      <main className="assistant-workspace"><h1>Conversation</h1><p>{workspace}</p><div className="fixture-composer"><ModsPanel workspacePath={workspace} chatId="chat-a" panelTarget={modsTarget} onOpen={() => utility('mods')} /><textarea aria-label="Message" placeholder="Ask Mint…" /></div></main>
+      {open && <ToolSurfacePage surfaces={surfaces} activeSurfaceId={active} workspacePath={workspace} terminalSize={440} desktopTools={desktop} backgroundTaskCount={count}
+        onSelect={setActive} onClose={id => { setSurfaces(s => s.filter(v => v.id !== id)); setActive(null) }} onCloseAll={noop} onDuplicate={noop} onRename={noop} onCloseOthers={noop} onResizeTerminal={noop} onResizePanel={noop}
+        onOpenSources={noop} onOpenTerminal={noop} onOpenBrowser={noop} onOpenReview={noop} onOpenFiles={noop} onOpenMods={() => utility('mods')} onOpenBackgroundTasks={() => utility('background')} onModsPanelTarget={setModsTarget} onBackgroundPanelTarget={setTasksTarget} onClosePanel={() => setOpen(false)} />}
+      <BackgroundTerminals workspacePath={workspace} panelTarget={tasksTarget} onCountChange={setCount} />
+    </div>
+    <pre id="qa-results">Running…</pre>
+  </>
+}
+createRoot(document.getElementById('root')!).render(<Fixture />)
+
+const delay = (ms = 50) => new Promise(resolve => setTimeout(resolve, ms))
+async function waitFor(check: () => boolean, label: string) {
+  for (let n = 0; n < 100; n++) { if (check()) return; await delay() }
+  throw new Error(label)
+}
+function click(selector: string) { const target = document.querySelector<HTMLElement>(selector); if (!target) throw new Error(`Missing ${selector}`); target.click() }
+const results: string[] = []
+const check = (condition: unknown, name: string) => { if (!condition) throw new Error(name); results.push(`PASS ${name}`) }
+async function run() {
+  await waitFor(() => Boolean(document.querySelector('.tools-task-count')), 'Initial task count')
+  check(document.querySelector('.tools-task-count')?.textContent === '1', 'badge counts current workspace while Tools is closed')
+  check(document.body.textContent?.includes('Weather band'), 'mod band renders with Tools closed')
+  click('.tools-panel-toggle'); await delay()
+  click('[title="Background tasks"]'); await waitFor(() => Boolean(document.querySelector('.background-terminal-job')), 'Tasks panel')
+  check(document.querySelector('.tool-surface-page .background-terminal-panel'), 'tasks render inside Tools')
+  check(document.querySelectorAll('.background-terminal-job').length === 1, 'workspace filter excludes other jobs')
+  click('.background-terminal-actions button'); await waitFor(() => Boolean(document.querySelector('.background-terminal-log')?.textContent?.includes('Server ready')), 'Output')
+  check(outputCalls > 0, 'output loads on demand')
+  click('.background-terminal-stop'); await waitFor(() => stopCalls === 1 && !document.querySelector('.tools-panel-toggle .tools-task-count'), 'Stop and badge')
+  check(document.querySelector('.background-terminal-state')?.textContent === 'stopped', 'Stop updates job status and badge')
+  click('[aria-label="Close tools panel"]'); await delay()
+  const callsBefore = listCalls; await delay(1100)
+  check(listCalls > callsBefore, 'monitor keeps polling while Tools is closed')
+  check(modCloses === 0, 'closing Tools keeps mod session alive')
+  click('.tools-panel-toggle'); await delay()
+  click('[aria-label="Switch tool"]'); await delay(); click('[title="Workspace mods"]')
+  await waitFor(() => Boolean(document.querySelector('.mods-panel')), 'Mods panel')
+  check(document.querySelector('.tool-surface-page .mods-panel'), 'mods render inside Tools')
+  check(document.querySelector('.mods-panel')?.textContent?.includes('Weather'), 'installed mod appears in Tools')
+  check(document.body.textContent?.includes('Weather band'), 'mod band survives tab switching')
+  click('#switch-workspace'); await waitFor(() => Boolean(document.querySelector('.mods-empty')), 'New workspace mods')
+  check(!document.querySelector('.mods-panel')?.textContent?.includes('Weather'), 'workspace switch clears previous mods')
+  await waitFor(() => document.querySelector('.tools-panel-toggle .tools-task-count')?.textContent === '1', 'New workspace count')
+  check(true, 'workspace switch refreshes badge')
+  click('[role="tab"]'); await waitFor(() => Boolean(document.querySelector('.background-terminal-job')), 'Other workspace tasks')
+  check(document.querySelector('.background-terminal-job')?.textContent?.includes('job-2'), 'tasks follow workspace switch')
+  failJobs = true; await waitFor(() => Boolean(document.querySelector('.background-terminal-error')), 'Error state')
+  check(document.querySelector('.background-terminal-stop')?.hasAttribute('disabled'), 'connection failure disables Stop')
+  failJobs = false; await delay(1100)
+  check(!document.querySelector('.background-terminal-error'), 'polling recovers after connection failure')
+  // Measure the resting layout rather than an in-flight entrance transform.
+  document.getAnimations().forEach(animation => animation.finish())
+  await delay()
+  check(document.documentElement.scrollWidth <= innerWidth, 'no page horizontal overflow')
+  const filter = document.querySelector<HTMLInputElement>('.background-terminal-filter input')!
+  filter.focus()
+  filter.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+  await delay()
+  check(!document.querySelector('.tool-surface-page'), 'Escape closes Tools from portalled task content')
+  document.getElementById('qa-results')!.textContent = results.join('\n') + '\nALL PASSED'
+}
+if (!location.search.includes('preview')) run().catch(error => { document.getElementById('qa-results')!.textContent = results.join('\n') + `\nFAIL ${error.message}` })

package/src/renderer/tests/viewedImages.browser.html

@@ -0,0 +1 @@
+<!doctype html><html data-theme="dark"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"></head><body><div id="root"></div><script type="module" src="./viewedImages.browser.tsx"></script></body></html>

package/src/renderer/tests/viewedImages.browser.tsx

@@ -0,0 +1,93 @@
+import React, { useState } from 'react'
+import { createRoot } from 'react-dom/client'
+import ChatMessageItem from '../shared/components/chat/ChatMessageItem'
+import { ProgressActivity } from '../shared/components/activity/AgentActivityDrawer'
+import ViewedImages from '../shared/components/activity/ViewedImages'
+import type { AgentProgress } from '../shared/types'
+import { compactAgentProgressForPersistence, reduceLiveAgentProgress } from '../shared/agentProgress'
+import '../shared/theme/tokens.css'
+if (new URLSearchParams(location.search).get('platform') === 'desktop') {
+  await import('../src/css/app-shell.css'); await import('../src/css/chat.css')
+} else {
+  await import('../src-web/css/app-shell.css'); await import('../src-web/css/chat.css')
+}
+
+const canvas = document.createElement('canvas'); canvas.width = 960; canvas.height = 600
+const context = canvas.getContext('2d')!
+context.fillStyle = '#1b3534'; context.fillRect(0, 0, 960, 600)
+context.fillStyle = '#8bd8c3'; context.fillRect(56, 56, 848, 100)
+context.fillStyle = '#dce9e4'; context.font = '28px sans-serif'; context.fillText('view_image · screenshot.png', 56, 220)
+context.strokeStyle = '#8bd8c3'; context.lineWidth = 3; context.strokeRect(56, 270, 390, 260); context.strokeRect(480, 270, 424, 260)
+const image = canvas.toDataURL('image/png')
+const svg = `data:image/svg+xml;base64,${btoa('<svg xmlns="http://www.w3.org/2000/svg" width="420" height="260"><rect width="420" height="260" fill="#21343b"/><circle cx="210" cy="130" r="80" fill="#91d6b5"/></svg>')}`
+const input = { path: '/workspace/ภาพตัวอย่างที่มีชื่อไฟล์ยาวเพื่อทดสอบการแสดงผลบนโทรศัพท์มือถือ.png' }
+const start: AgentProgress = { type: 'ToolStart', data: { action: 'view_image', input } }
+const textActivity: AgentProgress = { type: 'ToolEnd', data: { action: 'read_file', input: {}, result: 'Read' } }
+const finished: AgentProgress[] = [textActivity, textActivity, start,
+  { type: 'ToolEnd', data: { action: 'view_image', input, result: `${image}\n\n[Hook] Viewed successfully` } },
+  { type: 'ToolEnd', data: { callId: 'image-2', action: 'view_image', input: { path: '/workspace/diagram.svg' }, result: svg } },
+]
+const noop = () => {}
+let continueRun = noop
+function Fixture() {
+  const [done, setDone] = useState(false)
+  const [mode, setMode] = useState('live')
+  const [open, setOpen] = useState(true)
+  const [continued, setContinued] = useState(false)
+  continueRun = () => setContinued(true)
+  const progress = done ? continued ? Array.from({ length: 40 }, () => ({ ...textActivity })).reduce(reduceLiveAgentProgress, finished) : finished : [start]
+  return <>
+    <style>{`*{box-sizing:border-box}body{margin:0;padding:16px;background:#101112;color:var(--text-main);font-family:Arial,sans-serif}.fixture-controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.fixture-message{max-width:760px;margin:auto;min-width:0}#qa-results{white-space:pre-wrap;font-size:10px;overflow-wrap:anywhere}.message-bubble{width:100%}`}</style>
+    <div className="fixture-controls"><button id="finish" onClick={() => setDone(true)}>Finish view_image</button><button id="history" onClick={() => setMode('history')}>Reload saved history</button><button id="switch" onClick={() => setMode('other')}>Other conversation</button><button id="live" onClick={() => setMode('live')}>Live view</button></div>
+    <div className="fixture-message">
+      {mode === 'live' ? <><ProgressActivity progress={progress} id="live" isOpen={open} onToggle={() => setOpen(value => !value)} /><div className="message ai-message"><div className="bubble-wrapper"><div className="message-bubble"><ViewedImages progress={progress} /></div></div></div></>
+        : <ChatMessageItem interaction={{ id: mode === 'other' ? 8 : 7, status: 'completed', aiText: 'I have inspected the images.', userText: 'ช่วยดูรูปภาพนี้หน่อย', createdAt: '2026-10-16T05:00:00Z', agentActivity: mode === 'other' ? [] : JSON.parse(JSON.stringify(compactAgentProgressForPersistence(finished))) }} copiedId={null} speakingText={null} agentActivitySnapshots={{}} thinkingExpanded={{}} onThinkingExpandedChange={noop} handleCopyMessage={noop} speak={noop} toggleActivity={noop} renderFileChanges={() => null} />}
+    </div><pre id="qa-results">Running…</pre>
+  </>
+}
+createRoot(document.getElementById('root')!).render(<Fixture />)
+const delay = (ms = 40) => new Promise(resolve => setTimeout(resolve, ms))
+async function waitFor(check: () => boolean, name: string) { for (let i = 0; i < 120; i++) { if (check()) return; await delay() } throw new Error(name) }
+const results: string[] = []
+const check = (value: unknown, name: string) => { if (!value) throw new Error(name); results.push(`PASS ${name}`) }
+const click = (selector: string) => { const element = document.querySelector<HTMLElement>(selector); if (!element) throw new Error(`Missing ${selector}`); element.focus(); element.click() }
+async function run() {
+  await waitFor(() => Boolean(document.querySelector('.agent-activity-item')), 'Tool starts')
+  check(!document.querySelector('[data-viewed-image]'), 'no image appears before view_image completes')
+  click('#finish')
+  await waitFor(() => document.querySelectorAll('.viewed-image-button img').length === 2, 'Both results appear')
+  await waitFor(() => [...document.querySelectorAll<HTMLImageElement>('.viewed-image-button img')].every(img => img.naturalWidth > 0), 'PNG and SVG load')
+  // Capture final layout without depending on headless compositor animation timing.
+  document.getAnimations().forEach(animation => { if (animation.effect?.getTiming().iterations !== Infinity) animation.finish() })
+  check(getComputedStyle(document.querySelector('.message')!).opacity === '1', 'chat content is visibly rendered')
+  check(document.querySelector('.agent-activity-target-text')!.getBoundingClientRect().width > 40, 'view_image row keeps room for the file path')
+  check(document.documentElement.scrollWidth <= innerWidth, 'images and long filenames fit viewport')
+  click('.agent-activity-item')
+  await waitFor(() => Boolean(document.querySelector('.agent-activity-output')), 'Expanded tool output')
+  check(!document.querySelector('.agent-activity-output')?.textContent?.includes('data:image/'), 'tool output does not dump base64')
+  check(document.querySelector('.agent-activity-output')?.textContent?.includes('[Hook] Viewed successfully'), 'hook notes remain readable')
+  if (location.search.includes('preview')) { document.getElementById('qa-results')!.textContent = ''; return }
+  const trigger = document.querySelector<HTMLButtonElement>('.viewed-image-button')!
+  trigger.focus(); trigger.click()
+  await waitFor(() => Boolean(document.querySelector('dialog[open] img')), 'Expanded preview')
+  check(document.querySelector<HTMLImageElement>('dialog[open] img')?.naturalWidth === 960, 'expanded preview uses original pixels')
+  const rect = document.querySelector('dialog[open]')!.getBoundingClientRect()
+  check(rect.left >= 0 && rect.right <= innerWidth && rect.bottom <= innerHeight, 'expanded preview fits viewport')
+  const openedDialog = document.querySelector('dialog[open]')
+  continueRun(); await delay(100)
+  check(document.querySelector('dialog[open]') === openedDialog, 'preview stays open as older activity is trimmed during a run')
+  click('dialog[open] button')
+  await waitFor(() => !document.querySelector('dialog[open]'), 'Preview closes')
+  check(document.activeElement === trigger, 'closing preview restores keyboard focus')
+  click('#history')
+  await waitFor(() => Boolean(document.querySelector('.agent-activity-history')), 'Saved history mounts')
+  check(!document.querySelector('.agent-activity-card-history') && document.querySelectorAll('[data-viewed-image]').length === 2, 'saved images remain visible with Activity collapsed')
+  click('#switch'); await waitFor(() => !document.querySelector('[data-viewed-image]'), 'Session switch')
+  check(!document.querySelector('[data-viewed-image]'), 'images do not leak into another conversation')
+  click('#live'); await waitFor(() => document.querySelectorAll('[data-viewed-image]').length === 2, 'Live view returns')
+  document.querySelector('.viewed-image-button img')!.dispatchEvent(new Event('error'))
+  await waitFor(() => Boolean(document.querySelector('.viewed-image-error')), 'Image error')
+  check(document.querySelectorAll('.viewed-image-button').length === 1, 'a broken image leaves other images available')
+  document.getElementById('qa-results')!.textContent = results.join('\n') + '\nALL PASSED'
+}
+run().catch(error => { document.getElementById('qa-results')!.textContent = results.join('\n') + `\nFAIL ${error.message}` })

package/src/renderer/tests/voiceDictation.browser.html

@@ -0,0 +1,101 @@
+<!doctype html><html><head><meta charset="utf-8"><title>Mint dictation regression checks</title></head>
+<body><div id="root"></div><pre id="result">RUNNING</pre><script type="module">
+import React from 'react'; import {createRoot} from 'react-dom/client';
+import {useSpeechToText} from '../shared/utils/speech';
+import {useNativeVoiceInput} from '../shared/utils/useNativeVoiceInput';
+const wait=()=>new Promise(resolve=>setTimeout(resolve,30));
+const assert=(ok,message)=>{if(!ok)throw Error(message)};
+let root,voice,changeDraft,changeChat,recognition,transcript,finishTranscript;let endDelay=0;
+const writes=[],sends=[],checks=[];
+class Recognition {
+ constructor(){recognition=this;this.results=[]}
+ start(){setTimeout(()=>this.onstart?.(),0)}
+ stop(){setTimeout(()=>this.onend?.(),endDelay)}
+ abort(){}
+ result(text,final=true,index=this.results.length){
+  const result=[{transcript:text}];result.isFinal=final;this.results[index]=result;
+  this.onresult?.({resultIndex:index,results:this.results});
+ }
+}
+window.SpeechRecognition=Recognition;
+function Web(){
+ const [message,setMessage]=React.useState('Existing');changeDraft=setMessage;const [chatId,setChatId]=React.useState('chat-a');changeChat=setChatId;
+ voice=useSpeechToText({chatId,message,sending:false,isSpeaking:false,onSetMessage:text=>{writes.push(text);setMessage(text)},onSendVoiceMessage:async text=>sends.push(text)});
+ return null;
+}
+function Native(){
+ const [message,setMessage]=React.useState('Existing');changeDraft=setMessage;const [chatId,setChatId]=React.useState('chat-a');changeChat=setChatId;
+ voice=useNativeVoiceInput({chatId,message,onSetMessage:text=>{writes.push(text);setMessage(text)},onSendVoiceMessage:async text=>sends.push(text),
+  startRecording:async()=>{},cancelRecording:async()=>{},stopRecordingAndTranscribe:()=>transcript});
+ return null;
+}
+async function mount(Component){
+ if(root){root.unmount();await wait()}
+ writes.length=0;sends.length=0;root=createRoot(document.getElementById('root'));
+ root.render(React.createElement(Component));await wait();
+}
+async function check(name,run){try{await run();checks.push('PASS '+name)}catch(error){checks.push('FAIL '+name+': '+error.message)}}
+window.runVoiceDictationChecks=async()=>{
+ await check('web retains every final phrase and never sends',async()=>{
+  await mount(Web);await voice.startRecognition();await wait();
+  recognition.result('First sentence. ');recognition.result('Second sentence.');
+  assert(writes.length===0&&sends.length===0,'must wait for stop');
+  voice.stopRecognition();await wait();
+  assert(writes.join('|')==='Existing First sentence. Second sentence.',JSON.stringify({writes,sends}));
+  assert(sends.length===0,'dictation sent a chat message');
+ });
+ await check('web replaces interim results without duplicating final results',async()=>{
+  await mount(Web);await voice.startRecognition();await wait();
+  recognition.result('hello ',true);recognition.result('worl',false);
+  recognition.result('world',true,1);recognition.result('world',true,1);
+  changeDraft('Edited draft');await wait();voice.stopRecognition();await wait();
+  assert(writes.join('|')==='Edited draft hello world',JSON.stringify(writes));
+  assert(sends.length===0,'dictation sent a chat message');
+ });
+ await check('web cancel discards all recognized phrases',async()=>{
+  await mount(Web);await voice.startRecognition();await wait();recognition.result('discard');
+  voice.cancelRecognition();await wait();assert(writes.length===0&&sends.length===0,'canceled text was applied');
+ });
+ await check('desktop stop appends to latest draft and never sends',async()=>{
+  await mount(Native);transcript=new Promise(resolve=>{finishTranscript=resolve});
+  await voice.startRecognition();await wait();const stop=voice.stopRecognition();
+  changeDraft('Edited while transcribing');await wait();finishTranscript('  Native words  ');await stop;await wait();
+  assert(writes.join('|')==='Edited while transcribing Native words',JSON.stringify({writes,sends}));
+  assert(sends.length===0,'desktop sent a chat message');
+ });
+ await check('desktop cancellation during transcription leaves draft alone',async()=>{
+  await mount(Native);transcript=new Promise(resolve=>{finishTranscript=resolve});
+  await voice.startRecognition();await wait();const stop=voice.stopRecognition();
+  const cancel=voice.cancelRecognition();finishTranscript('discard');await stop;await cancel;await wait();
+  assert(writes.length===0&&sends.length===0,'canceled text was applied');
+ });
+ await check('desktop empty transcript leaves draft alone',async()=>{
+  await mount(Native);transcript=Promise.resolve('  ');await voice.startRecognition();await wait();
+  await voice.stopRecognition();await wait();assert(writes.length===0&&sends.length===0,'empty text changed the draft');
+ });
+ await check('desktop discards delayed transcript after switching chats',async()=>{
+  await mount(Native);transcript=new Promise(resolve=>{finishTranscript=resolve});await voice.startRecognition();await wait();
+  const stopping=voice.stopRecognition();changeChat('chat-b');changeDraft('Other chat draft');await wait();
+  finishTranscript('private words from chat A');await stopping;await wait();
+  assert(writes.length===0&&sends.length===0,'old transcript was inserted into the new chat');
+ });
+ await check('web discards pending recognition after switching chats',async()=>{
+  await mount(Web);await voice.startRecognition();await wait();recognition.result('private words from chat A');
+  endDelay=80;voice.stopRecognition();changeChat('chat-b');changeDraft('Other chat draft');await wait();await new Promise(resolve=>setTimeout(resolve,100));endDelay=0;
+  assert(writes.length===0&&sends.length===0,'old recognition was inserted into the new chat');
+ });
+ await check('unsupported browser shows popup and leaves draft alone',async()=>{
+  await mount(Web);const original=window.SpeechRecognition,webkit=window.webkitSpeechRecognition,alert=window.alert;const popups=[];
+  try{
+   window.SpeechRecognition=undefined;window.webkitSpeechRecognition=undefined;window.alert=text=>popups.push(text);
+   const started=await voice.startRecognition();await wait();
+   assert(started===false&&!voice.isRecording&&!voice.voiceMode,'unsupported browser entered recording mode');
+   assert(popups.length===1&&popups[0].includes('Chrome or Edge'),'unsupported popup missing');
+   assert(writes.length===0&&sends.length===0,'unsupported microphone changed the draft');
+  }finally{window.SpeechRecognition=original;window.webkitSpeechRecognition=webkit;window.alert=alert}
+ });
+ root.unmount();root=null;
+ document.getElementById('result').textContent=checks.join('\n');
+ return checks;
+}
+</script></body></html>

package/src/renderer/tests/voicePill.browser.html

@@ -0,0 +1,80 @@
+<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Mint VoicePill interaction checks</title></head>
+<body style="background:#18181b;color:#f5f5f5;font-family:system-ui;margin:32px"><h1>Mint VoicePill</h1><div id="root" style="padding:24px 140px"></div><pre id="result">RUNNING</pre>
+<script type="module">
+import React from 'react';import {createRoot} from 'react-dom/client';
+import VoicePill from '../shared/components/chat/VoicePill';
+import {useNativeVoiceInput} from '../shared/utils/useNativeVoiceInput';
+import {useSpeechToText} from '../shared/utils/speech';
+const wait=(ms=60)=>new Promise(done=>setTimeout(done,ms));const lines=[];
+const assert=(ok,line)=>{if(!ok)throw Error(line);lines.push(line)};
+// Drive scheduled component frames deterministically; Chrome virtual-time timers can outrun compositor frames.
+const frames=new Map();let frameId=0;
+window.requestAnimationFrame=callback=>{frames.set(++frameId,callback);return frameId};
+window.cancelAnimationFrame=id=>frames.delete(id);
+const advanceFrames=count=>{const now=performance.now();for(let i=0;i<count;i++){const batch=[...frames.values()];frames.clear();batch.forEach(callback=>callback(now+i*20))}};
+const root=createRoot(document.getElementById('root'));
+const events=[];let setDisabled,unmountPill;
+const button=()=>document.querySelector('.voice-pill');
+const pointer=(type,x=180)=>button().dispatchEvent(new PointerEvent(type,{button:0,pointerId:7,isPrimary:true,clientX:x,bubbles:true,cancelable:true}));
+const tap=async()=>{pointer('pointerdown');await wait(30);pointer('pointerup');await wait()};
+const key=key=>button().dispatchEvent(new KeyboardEvent('keydown',{key,bubbles:true,cancelable:true}));
+try {
+ function Fixture(){
+  const [disabled,disable]=React.useState(false);setDisabled=disable;
+  const [shown,show]=React.useState(true);unmountPill=()=>show(false);
+  return shown?React.createElement(VoicePill,{disabled,onStart:e=>events.push(['start',e]),onStop:e=>events.push(['stop',e])}):null;
+ }
+ root.render(React.createElement(Fixture));await wait(180);
+ assert(button().getAttribute('aria-pressed')==='false','idle microphone is not marked recording');
+ await tap();assert(button().getAttribute('aria-pressed')==='true','short tap latches recording');
+ advanceFrames(64);assert(button().querySelector('.voice-pill__time').textContent!=='0:00','elapsed clock advances');
+ const canvas=button().querySelector('canvas');const pixels=canvas.getContext('2d').getImageData(0,0,canvas.width,canvas.height).data;
+ assert(pixels.some((v,i)=>i%4===3&&v>0),'authored scrolling waveform renders canvas pixels ('+canvas.width+'x'+canvas.height+')');
+ await tap();assert(events.at(-1)[1].reason==='tap'&&button().getAttribute('aria-pressed')==='false','second tap stops latched recording');
+ pointer('pointerdown');await wait(360);pointer('pointerup');await wait();assert(events.at(-1)[1].reason==='release','held recording stops on release');
+ pointer('pointerdown');await wait();pointer('pointermove',140);await wait();assert(button().dataset.sliding!==undefined,'held left drag reveals cancel affordance');
+ pointer('pointermove',110);await wait();const count=events.length;pointer('pointerup',110);await wait();
+ assert(events.at(-1)[1].reason==='cancel'&&events.length===count,'crossing cancel distance cancels once without release result');
+ pointer('pointerdown');await wait();pointer('pointercancel');await wait();assert(events.at(-1)[1].reason==='cancel','pointer cancellation never submits');
+ key('Enter');await wait();assert(button().getAttribute('aria-pressed')==='true','keyboard starts recording');
+ key('Escape');await wait();assert(events.at(-1)[1].reason==='escape','Escape cancels keyboard recording');
+ await tap();window.dispatchEvent(new Event('blur'));await wait();assert(events.at(-1)[1].reason==='blur','window blur cancels latched recording');
+ await tap();setDisabled(true);await wait();assert(events.at(-1)[1].reason==='disabled'&&button().disabled,'disabling cancels microphone');
+ setDisabled(false);await wait();await tap();unmountPill();await wait();assert(events.at(-1)[1].reason==='unmount'&&frames.size===0,'unmount stops listening and animation frames');
+ const calls=[];let ready;
+ function NativeFixture(){
+  const voice=useNativeVoiceInput({startRecording:()=>new Promise(resolve=>{calls.push('start');ready=resolve}),
+   cancelRecording:async()=>{calls.push('discard')},stopRecordingAndTranscribe:async()=>{calls.push('transcribe');return 'Native words'},message:'Existing',onSetMessage:text=>calls.push('draft:'+text),onSendVoiceMessage:async text=>calls.push('send:'+text)});
+  return React.createElement(VoicePill,{active:voice.isRecording,onStart:voice.startRecognition,
+   onStop:e=>['tap','release','key'].includes(e.reason)?voice.stopRecognition():voice.cancelRecognition()});
+ }
+ root.render(React.createElement(NativeFixture));await wait();pointer('pointerdown');await wait();
+ assert(button().getAttribute('aria-pressed')==='false'&&button().getAttribute('aria-busy')==='true','actual state waits for native device startup');
+ pointer('pointermove',110);pointer('pointerup',110);ready();await wait();
+ assert(calls.join(',')==='start,discard'&&button().getAttribute('aria-pressed')==='false','native pending-start cancellation discards without transcription');
+ pointer('pointerdown');await wait();ready();await wait();pointer('pointerup');await wait();
+ assert(button().getAttribute('aria-pressed')==='true','native success opens listening capsule');
+ await tap();await wait();assert(calls.at(-2)==='transcribe'&&calls.at(-1)==='draft:Existing Native words'&&!calls.some(call=>call.startsWith('send:')),'normal native stop appends transcript to composer without sending');
+ root.render(React.createElement('div'));await wait();
+ const instances=[],messages=[],sends=[];let denied=false;
+ class Recognition {
+  constructor(){instances.push(this)}
+  start(){setTimeout(()=>{if(denied){this.onerror?.({error:'not-allowed'});this.onend?.()}else this.onstart?.()},20)}
+  result(text){const result=[{transcript:text}];result.isFinal=true;this.onresult?.({resultIndex:0,results:[result]})}
+  stop(){setTimeout(()=>this.onend?.(),20)}
+  abort(){this.aborted=true;setTimeout(()=>this.onend?.(),20)}
+ }
+ window.SpeechRecognition=Recognition;
+ function WebFixture(){
+  const voice=useSpeechToText({language:'en',message:'Existing',sending:false,isSpeaking:false,onSetMessage:text=>messages.push(text),onSendVoiceMessage:async text=>sends.push(text)});
+  return React.createElement(VoicePill,{active:voice.isRecording,onStart:()=>voice.startRecognition(),
+   onStop:e=>['tap','release','key'].includes(e.reason)?voice.stopRecognition():voice.cancelRecognition()});
+ }
+ root.render(React.createElement(WebFixture));await wait();await tap();instances.at(-1).result('cancelled words');
+ key('Escape');await wait();assert(instances.at(-1).aborted&&messages.length===0&&sends.length===0,'Web cancellation aborts and discards recognized text');
+ await tap();instances.at(-1).result('hello');await tap();await wait();
+ assert(messages.join(',')==='Existing hello'&&sends.length===0,'Web normal stop preserves dictation into existing composer');
+ denied=true;await tap();await wait();assert(button().getAttribute('aria-pressed')==='false'&&!button().getAttribute('aria-busy'),'permission refusal returns to idle');
+ document.getElementById('result').textContent='PASS\n'+lines.join('\n');
+} catch(error){document.getElementById('result').textContent='FAIL: '+error.message+'\n'+lines.join('\n');console.error(error)}
+</script></body></html>