@pheem49/mint 1.15.0 → 1.16.0

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

@@ -0,0 +1,8 @@
+import type { ModTestReport } from '../mods'
+
+export function ModSessionControls({ enabled, busy, onToggle }: { enabled: boolean; busy: boolean; onToggle: (enabled: boolean) => void }) {
+  return <div className="mod-session-controls"><button type="button" disabled={busy} aria-pressed={enabled} onClick={() => onToggle(!enabled)}>Hot reload: {enabled ? 'On' : 'Off'}</button><p className="mod-hint">Applies to this session. Mods with permissions require review for each new revision.</p></div>
+}
+export function ModTestResults({ report }: { report: ModTestReport }) {
+  return <section aria-label="Mod test results"><p role="status">{report.passed} passed · {report.failed} failed</p>{report.tests.map((test,i) => <div key={i}><strong>{test.passed ? '✓' : '✗'} {test.name}</strong><p className="mod-hint">{test.file}</p>{test.error && <pre className="mod-error">{test.error}</pre>}</div>)}</section>
+}

package/src/renderer/shared/components/ModUi.test.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, it, expect } from 'vitest'
+import { ModUi } from './ModUi'
+import type { ModNode } from '../mods'
+import { ModSessionControls, ModTestResults } from './ModSessionControls'
+import { modViewport } from '../utils/modViewport'
+
+describe('Mod UI', () => {
+  it('reports available band pixels and an estimated text width on both graphical surfaces', () => {
+    for (const surface of ['web','desktop'] as const) expect(modViewport(664,40,surface,true)).toEqual({surface,widthPx:640,heightPx:40,columns:80,rows:2,sidePanelOpen:true})
+    expect(modViewport(0,40,'web',false)).toBeNull()
+  })
+  it('shows session reload state and failing test diagnostics', () => {
+    const controls=renderToStaticMarkup(<ModSessionControls enabled busy={false} onToggle={() => {}} />)
+    expect(controls).toContain('aria-pressed="true"')
+    expect(controls).toContain('Hot reload')
+    const report=renderToStaticMarkup(<ModTestResults report={{ passed: 1, failed: 1, tests: [
+      { file: 'weather.test.ts', name: 'updates', passed: true },
+      { file: 'weather.test.ts', name: 'storm', passed: false, error: 'Expected Storm' },
+    ] }} />)
+    expect(report).toContain('1 passed')
+    expect(report).toContain('storm')
+    expect(report).toContain('Expected Storm')
+  })
+  it('inherits stack colors into controls and allows a child to restore default text', () => {
+    const html = renderToStaticMarkup(<ModUi node={{ type: 'stack', color: 'cyan', children: [
+      { type: 'button', label: 'Inspect', action: 'inspect' },
+      { type: 'badge', text: 'Measured' },
+      { type: 'text', text: 'Normal', color: 'default' },
+    ] }} onAction={() => {}} />)
+    expect(html).toContain('<button class="mod-color-cyan"')
+    expect(html).toContain('mod-badge mod-color-cyan')
+    expect(html).toContain('mod-text mod-color-default')
+  })
+  it('renders a weather row with a colored label and uncolored metrics', () => {
+    const html = renderToStaticMarkup(<ModUi node={{ type: 'stack', direction: 'row', children: [
+      { type: 'text', text: '☂ Showers', color: 'blue' },
+      { type: 'text', text: '67.2% · 134.4k / 200k · ▁▂▃▄▅▆▇█ · ▲ +98.3k last turn' },
+    ] } as ModNode} onAction={() => {}} />)
+    expect(html).toContain('mod-stack-row')
+    expect(html).toContain('mod-color-blue')
+    expect(html).toContain('☂ Showers')
+    expect(html).toContain('134.4k / 200k')
+  })
+  it('renders text literally and exposes a labeled control', () => {
+    const html = renderToStaticMarkup(<ModUi node={{ type: 'stack', children: [
+      { type: 'text', text: '<script>literal</script>' },
+      { type: 'button', label: 'Add task', action: 'add' },
+    ] }} onAction={() => {}} />)
+    expect(html).toContain('&lt;script&gt;literal&lt;/script&gt;')
+    expect(html).toContain('Add task')
+    expect(html).not.toContain('<script>')
+  })
+  it('renders accessible progress and tabular data', () => {
+    const html = renderToStaticMarkup(<ModUi node={{ type: 'stack', children: [
+      { type: 'progress', label: 'Budget', value: 20, max: 100 },
+      { type: 'table', columns: ['Task'], rows: [['Write tests']] },
+    ] }} onAction={() => {}} />)
+    expect(html).toContain('aria-label="Budget"')
+    expect(html).toContain('value="20"')
+    expect(html).toContain('<th>Task</th>')
+    expect(html).toContain('<td>Write tests</td>')
+  })
+})

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

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react'
+import type { ModNode } from '../mods'
+
+function ModInput({ node, color, onAction }: { node: ModNode; color: string; onAction: (action: string, value?: string) => void }) {
+  const value = String(node.value ?? '')
+  const [draft, setDraft] = useState(value)
+  useEffect(() => { setDraft(value) }, [value, node.action])
+  return <label className={`mod-input${color}`}>{node.label}<input value={draft} onChange={event => setDraft(event.target.value)} onKeyDown={event => {
+    if (event.key === 'Enter' && node.action) { event.preventDefault(); onAction(node.action, event.currentTarget.value) }
+  }} /></label>
+}
+
+export function ModUi({ node, onAction, inheritedColor }: { node: ModNode; onAction: (action: string, value?: string) => void; inheritedColor?: ModNode['color'] }) {
+  const selectedColor = node.color ?? inheritedColor
+  const color = ['default', 'yellow', 'cyan', 'blue', 'magenta', 'red'].includes(selectedColor ?? '') ? ` mod-color-${selectedColor}` : ''
+  switch (node.type) {
+    case 'stack': return <div className={`mod-stack${node.direction === 'row' ? ' mod-stack-row' : ''}${color}`}>{node.children?.map((child, i) => <ModUi key={i} node={child} onAction={onAction} inheritedColor={selectedColor} />)}</div>
+    case 'text': return <p className={`mod-text${color}`}>{node.text}</p>
+    case 'badge': return <span className={`mod-badge${color}`}>{node.text}</span>
+    case 'button': return <button className={color.trim() || undefined} type="button" onClick={() => node.action && onAction(node.action)}>{node.label}</button>
+    case 'input': return <ModInput node={node} color={color} onAction={onAction} />
+    case 'progress': return <label className={`mod-progress${color}`}>{node.label}<progress aria-label={node.label} value={Number(node.value)} max={node.max} /></label>
+    case 'table': return <div className={`mod-table-scroll${color}`}><table><thead><tr>{node.columns?.map((column, i) => <th key={i}>{column}</th>)}</tr></thead><tbody>{node.rows?.map((row, i) => <tr key={i}>{row.map((cell, j) => <td key={j}>{cell}</td>)}</tr>)}</tbody></table></div>
+    default: return null
+  }
+}

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

@@ -516,7 +516,15 @@ export default function ModelSelectorPopover({
 
   // Keyboard navigation
   const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (!isOpen) return
+    if (!isOpen || e.nativeEvent.isComposing) return
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      setIsOpen(false)
+      triggerRef.current?.focus()
+      return
+    }
+    // Let tabs and thinking controls keep their own keyboard behavior.
+    if (mobilePane !== 'models' || e.target instanceof HTMLButtonElement) return
 
     if (e.key === 'ArrowDown') {
       e.preventDefault()
@@ -536,11 +544,8 @@ export default function ModelSelectorPopover({
       if (item) {
         onSelect(item.providerId, item.model)
         setIsOpen(false)
+        triggerRef.current?.focus()
       }
-    } else if (e.key === 'Escape') {
-      e.preventDefault()
-      setIsOpen(false)
-      triggerRef.current?.focus()
     }
   }
 
@@ -645,6 +650,7 @@ export default function ModelSelectorPopover({
                 ref={searchInputRef}
                 type="text"
                 className="model-spotlight-input"
+                aria-label="Search models"
                 placeholder="Search models..."
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
@@ -716,7 +722,8 @@ export default function ModelSelectorPopover({
                                   onClick={() => {
                                     setInspectedItem({ providerId: group.providerId, model: m })
                                     onSelect(group.providerId, m)
-                                    if (window.matchMedia('(max-width: 760px)').matches) setMobilePane('options')
+                                    setIsOpen(false)
+                                    triggerRef.current?.focus()
                                   }}
                                   onMouseEnter={() => {
                                     setHighlightedIndex(currentIndex)
@@ -870,7 +877,7 @@ export default function ModelSelectorPopover({
                 </div>
 
                 {!inspectedThinking.supported && (
-                  <div className="model-unsupported-note" style={{ color: inspectedThinking.enabled ? 'var(--accent, #10b981)' : undefined }}>
+                  <div className="model-unsupported-note" style={{ color: inspectedThinking.enabled ? 'var(--interactive-fg)' : undefined }}>
                     {inspectedThinking.enabled
                       ? 'Thinking enabled (force toggle)'
                       : 'Not flagged as reasoning model by default (toggle to force enable)'}

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

@@ -0,0 +1,156 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { ChevronDown, Puzzle, Upload } from 'lucide-react'
+import { modsPlatform, runtimePlatform } from '../platform'
+import type { ModOperation, ModRecord, ModResponse, ModTestReport } from '../mods'
+import { ModUi } from './ModUi'
+import { ModSessionControls, ModTestResults } from './ModSessionControls'
+import { modViewport } from '../utils/modViewport'
+import '../css/mods.css'
+
+export function ModsPanel({ workspacePath, chatId, panelTarget, onOpen }: { workspacePath?: string | null; chatId: string; panelTarget?: HTMLElement | null; onOpen: () => void }) {
+  const [data, setData] = useState<ModResponse>({ mods: [] })
+  const open = Boolean(panelTarget)
+  const onOpenRef = useRef(onOpen); onOpenRef.current = onOpen
+  const [tab, setTab] = useState('manage')
+  const [error, setError] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const [reports, setReports] = useState<Record<string, ModTestReport>>({})
+  const rootRef = useRef<HTMLDivElement>(null)
+  const openRef = useRef(open); openRef.current = open
+  const currentScope = useRef('')
+  currentScope.current = `${workspacePath}\0${chatId}`
+  const [scope, setScope] = useState<'chat' | 'workspace' | 'global'>('chat')
+  const generation = useRef(0)
+  const importRef = useRef<HTMLInputElement>(null)
+  const seen = useRef(new Set<string>())
+
+  useEffect(() => {
+    const current = ++generation.current
+    let stopped = false
+    let timer: ReturnType<typeof setTimeout>
+    setData({ mods: [] }); setLoading(Boolean(workspacePath && chatId)); setBusy(false); setError(''); setTab('manage'); seen.current.clear(); setReports({})
+    async function refresh() {
+      if (!workspacePath || !chatId || stopped) return
+      try {
+        const value = await modsPlatform.operation({ workspacePath, chatId, action: 'list' })
+        if (!stopped && generation.current === current) {
+          setData(value); setLoading(false)
+          const fresh = value.mods?.find(m => m.enabled && m.snapshot?.ui.side_panel && !seen.current.has(m.id))
+          value.mods?.filter(m => m.enabled).forEach(m => seen.current.add(m.id))
+          if (fresh) { onOpenRef.current(); setTab(fresh.id) }
+        }
+      } catch (e) { if (!stopped && generation.current === current) { setError(String(e)); setLoading(false) } }
+      if (!stopped) timer = setTimeout(refresh, 1000)
+    }
+    void refresh()
+    return () => {
+      stopped = true; clearTimeout(timer)
+      if (workspacePath && chatId) void modsPlatform.operation({ workspacePath, chatId, action: 'close' }).catch(() => {})
+    }
+  }, [workspacePath, chatId])
+
+  useEffect(() => {
+    const element=rootRef.current
+    if (!element || !workspacePath || !chatId) return
+    let stopped=false
+    let previous=''
+    let timer: ReturnType<typeof setTimeout> | undefined
+    const surface=runtimePlatform.isTauriRuntime() ? 'desktop' as const : 'web' as const
+    async function reportViewport() {
+      if (stopped) return
+      const bounds=element!.getBoundingClientRect()
+      const viewport=modViewport(bounds.width,bounds.height,surface,openRef.current)
+      if (!viewport) return
+      const signature=JSON.stringify(viewport)
+      if (signature===previous) return
+      previous=signature
+      try { await modsPlatform.operation({ workspacePath: workspacePath!, chatId, action: 'viewport', viewport }) }
+      catch (e) { if (!stopped) setError(String(e)) }
+    }
+    const schedule=() => { clearTimeout(timer); timer=setTimeout(() => { void reportViewport() }, 100) }
+    const observer=typeof ResizeObserver==='undefined' ? undefined : new ResizeObserver(schedule)
+    observer?.observe(element); window.addEventListener('resize',schedule); schedule()
+    return () => { stopped=true; clearTimeout(timer); observer?.disconnect(); window.removeEventListener('resize',schedule) }
+  }, [workspacePath, chatId, open])
+
+  const operate = useCallback(async (operation: Omit<ModOperation, 'workspacePath' | 'chatId'>) => {
+    if (!workspacePath || currentScope.current !== `${workspacePath}\0${chatId}`) return
+    const current = generation.current
+    setBusy(true); setError('')
+    try {
+      const value = await modsPlatform.operation({ ...operation, workspacePath, chatId })
+      if (current !== generation.current) return
+      if (value.testReport && operation.id) setReports(current => ({ ...current, [operation.id!]: value.testReport! }))
+      if (value.package) {
+        const bytes = Uint8Array.from(atob(value.package), c => c.charCodeAt(0))
+        const url = URL.createObjectURL(new Blob([bytes], { type: 'application/zip' }))
+        const link = document.createElement('a'); link.href = url; link.download = value.filename || 'mod.mintmod'; link.click(); URL.revokeObjectURL(url)
+      }
+      const latest = await modsPlatform.operation({ workspacePath, chatId, action: 'list' })
+      if (current === generation.current) setData(latest)
+    } catch (e) { if (current === generation.current) setError(String(e)) }
+    finally { if (current === generation.current) setBusy(false) }
+  }, [workspacePath, chatId])
+
+  const activate = (mod: ModRecord) => {
+    const permissions = mod.manifest?.permissions || []
+    if (permissions.length && !window.confirm(`Enable ${mod.name}?\nRevision: ${mod.hash}\nPermissions: ${permissions.join(', ')}\nReview the source below before approving.`)) return
+    if (scope !== 'chat' && !window.confirm(`Enable ${mod.name} for ${scope === 'global' ? 'all workspaces as a personal copy' : 'all chats in this workspace'}?`)) return
+    void operate({ action: 'enable', id: mod.id, scope, expectedHash: mod.hash, grantPermissions: permissions.length > 0 })
+  }
+  const action = (mod: ModRecord, name: string, value?: string) => void operate({ action: 'action', id: mod.id, instanceId: mod.instanceId, command: name, value })
+  const mods = data.mods || []
+  const active = mods.filter(m => m.enabled)
+  const sidePanelMods = active.filter(m => m.snapshot?.ui.side_panel)
+  const selected = mods.find(m => m.id === tab)
+
+  return <>
+    <div className="mint-mods" ref={rootRef}>
+      {active.map(mod => mod.snapshot?.ui.above_composer && <section key={mod.id} className="mod-band" aria-label={mod.name}>
+        <ModUi node={mod.snapshot.ui.above_composer} onAction={(name, value) => action(mod, name, value)} />
+      </section>)}
+      {panelTarget && createPortal(<aside className="mods-panel mint-mods" aria-label="Workspace mods">
+      <header className="mods-panel-header"><span className="mods-panel-icon" aria-hidden="true"><Puzzle size={18} /></span><div className="mods-panel-title"><strong>Mods</strong><p>{mods.length} installed · {active.length} active</p></div></header>
+      {sidePanelMods.length > 0 && <nav aria-label="Mod panels"><button type="button" aria-pressed={tab === 'manage'} onClick={() => setTab('manage')}>Manage</button>{sidePanelMods.map(m => <button key={m.id} type="button" aria-pressed={tab === m.id} onClick={() => setTab(m.id)}>{m.name}</button>)}</nav>}
+      {error && <p role="alert" className="mod-error">{error}</p>}
+      {selected?.snapshot?.ui.side_panel && tab !== 'manage' ? <section className="mod-content"><ModUi node={selected.snapshot.ui.side_panel} onAction={(name, value) => action(selected, name, value)} /></section> : <div className="mod-content">
+        <div className="mods-toolbar"><label htmlFor="mods-scope">Enable for <select id="mods-scope" value={scope} onChange={e => setScope(e.target.value as typeof scope)}><option value="chat">This chat</option><option value="workspace">This workspace</option><option value="global">All workspaces</option></select></label><button type="button" className="mods-import" disabled={busy || !workspacePath || !chatId} onClick={() => importRef.current?.click()}><Upload size={14} aria-hidden="true" />Import</button></div>
+        <input ref={importRef} type="file" accept=".mintmod" hidden onChange={async e => {
+          const file = e.target.files?.[0]; e.target.value = ''; if (!file) return
+          if (file.size > 1024 * 1024) { setError('Package exceeds 1 MiB'); return }
+          const bytes = new Uint8Array(await file.arrayBuffer())
+          let binary = ''; for (const b of bytes) binary += String.fromCharCode(b)
+          const packed = btoa(binary)
+          if (currentScope.current !== `${workspacePath}\0${chatId}`) return
+          try {
+            const info = await modsPlatform.operation({ workspacePath: workspacePath!, chatId, action: 'inspect_package', package: packed })
+            if (currentScope.current !== `${workspacePath}\0${chatId}`) return
+            if (info.expectedHash && !window.confirm(`Replace source for ${info.id}? The active revision stays unchanged until you enable the imported source.`)) return
+            await operate({ action: 'import', package: packed, expectedHash: info.expectedHash || undefined })
+          } catch (e) { if (currentScope.current === `${workspacePath}\0${chatId}`) setError(String(e)) }
+        }} />
+        {loading && <p role="status" className="mods-empty">Loading mods…</p>}
+        {!loading && !mods.length && <div className="mods-empty"><Puzzle size={22} aria-hidden="true" /><strong>{workspacePath ? 'No mods yet' : 'Choose a workspace'}</strong><p>{workspacePath ? 'Ask Mint to create one, or import a .mintmod package. Imported mods stay off until enabled.' : 'Choose a workspace in chat to manage its mods.'}</p></div>}
+        {mods.map(mod => <article key={mod.id} className="mod-entry">
+          <div className="mod-entry-heading"><div><strong>{mod.name}</strong><small>Version {mod.manifest?.version || 'unknown'}</small></div><span className={`mod-status ${mod.error ? 'is-error' : mod.enabled ? 'is-active' : ''}`}>{mod.error ? 'Error' : mod.enabled ? 'Active' : 'Off'}</span></div>
+          {mod.changed && <p className="mod-hint">Source changed · active revision preserved</p>}
+          {mod.reloadError && <p role="alert" className="mod-error">Reload: {mod.reloadError}</p>}
+          {(mod.error || mod.sourceError) && <p role="alert" className="mod-error">{mod.error || mod.sourceError}</p>}
+          <p className="mod-hint">{mod.manifest?.permissions?.join(', ') || 'UI, events and mod state'}</p>
+          <div className="mod-entry-footer"><button type="button" className={`mod-primary-action ${mod.enabled && !mod.changed ? 'is-disable' : ''}`} disabled={busy || !mod.manifest} onClick={() => mod.enabled && !mod.changed ? void operate({ action: 'disable', id: mod.id }) : activate(mod)}>{mod.enabled && !mod.changed ? 'Disable' : mod.changed ? 'Validate & reload' : 'Enable'}</button>
+          <details className="mod-entry-more"><summary>More options <ChevronDown size={13} aria-hidden="true" /></summary>
+            <div className="mod-actions"><button type="button" disabled={busy || !mod.source} onClick={() => void operate({ action: 'export', id: mod.id })}>Export</button><button type="button" disabled={busy || !mod.source} onClick={() => void operate({ action: 'test', id: mod.id })}>Run tests</button></div>
+            {reports[mod.id] && <ModTestResults report={reports[mod.id]} />}
+            <details><summary>Source & diagnostics</summary><pre>{mod.source}</pre><pre>{mod.snapshot?.logs?.join('\n') || 'No log messages'}</pre><p className="mod-hint">Active revision: {mod.activeHash || 'None'}</p></details>
+            {mod.revisions.length > 1 && <label className="mod-revisions">Restore source revision <select value="" disabled={busy} onChange={e => { const hash = e.target.value; if (hash && window.confirm('Restore this source revision? Review and enable it after restoring.')) void operate({ action: 'rollback', id: mod.id, hash, expectedHash: mod.hash }) }}><option value="">Choose revision</option>{mod.revisions.filter(h => h !== mod.hash).map(h => <option key={h} value={h}>{h.slice(0, 12)}</option>)}</select></label>}
+          </details></div>
+        </article>)}
+        {data.toolRequests?.map(request => <article className="mod-entry" key={request.id}><strong>{request.modId}: {request.action}</strong><pre>{JSON.stringify(request.input, null, 2)}</pre><button type="button" disabled={busy} onClick={() => { if (window.confirm(`Run ${request.action} requested by ${request.modId}?\n${JSON.stringify(request.input, null, 2)}`)) void operate({ action: 'run_request', command: request.id, grantPermissions: true }) }}>Review & run tool</button></article>)}
+        <details className="mod-session-settings"><summary>Session settings <ChevronDown size={13} aria-hidden="true" /></summary><ModSessionControls enabled={data.session?.hotReload ?? false} busy={busy} onToggle={enabled => void operate({ action: 'hot_reload', value: enabled })} /></details>
+      </div>}
+      </aside>, panelTarget)}
+    </div>
+  </>
+}

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

@@ -0,0 +1,17 @@
+import { memo, useCallback } from 'react'
+import type { AgentProgress } from '../types'
+import { activitiesFrom } from '../utils/agentActivity'
+import { AgentActivityDrawer } from './AgentActivityDrawer'
+
+export const ProgressActivity = memo(function ProgressActivity({ progress, id, isOpen, onToggle, historical = false, pendingApproval = false }: {
+  progress: AgentProgress[]
+  id: string
+  isOpen: boolean
+  onToggle: (id: string) => void
+  historical?: boolean
+  pendingApproval?: boolean
+}) {
+  const toggle = useCallback(() => onToggle(id), [id, onToggle])
+  return <AgentActivityDrawer activityView={activitiesFrom(progress)} rawProgress={progress}
+    isOpen={isOpen} onToggle={toggle} isHistorical={historical} pendingApproval={pendingApproval} />
+})

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

@@ -0,0 +1,42 @@
+import { useEffect, useRef } from 'react'
+import type { WorkspaceHistoryEntry } from '../types'
+
+export function undoDescription(entry: WorkspaceHistoryEntry) {
+  switch (entry.kind) {
+    case 'edit': return entry.backup ? 'Restore the saved content from before this edit.' : 'Move the file created by this edit to Trash.'
+    case 'create': return 'Move this created file or folder to Trash.'
+    case 'trash': return 'Restore this file or folder to its original location.'
+    case 'move': return `Move ${entry.destination || entry.path} back to ${entry.path}.`
+    default: return entry.label
+  }
+}
+
+export function HistoryDetails({ entry }: { entry: WorkspaceHistoryEntry }) {
+  return <dl className="review-history-details">
+    <dt>File</dt><dd>{entry.path}</dd>
+    <dt>Action</dt><dd>{entry.label.replace(/^Undo /, '')}</dd>
+    {entry.destination && <><dt>Destination</dt><dd>{entry.destination}</dd></>}
+    <dt>Undo will</dt><dd>{undoDescription(entry)}</dd>
+  </dl>
+}
+
+export function UndoConfirmation({ entry, busy, error, onCancel, onConfirm }: {
+  entry: WorkspaceHistoryEntry; busy: boolean; error: string; onCancel: () => void; onConfirm: () => void
+}) {
+  const dialog = useRef<HTMLDialogElement>(null)
+  useEffect(() => {
+    const element = dialog.current
+    element?.showModal()
+    return () => element?.close()
+  }, [])
+  return <dialog ref={dialog} className="review-undo-dialog" aria-labelledby="review-undo-title" onCancel={event => { event.preventDefault(); if (!busy) onCancel() }}>
+    <h3 id="review-undo-title">Confirm Undo</h3>
+    <HistoryDetails entry={entry} />
+    <p>Undo is refused if the file has changed since this action or the destination is occupied.</p>
+    {error && <p role="alert">{error}</p>}
+    <div className="review-undo-actions">
+      <button type="button" autoFocus disabled={busy} onClick={onCancel}>Cancel</button>
+      <button type="button" disabled={busy} onClick={onConfirm}>{busy ? 'Undoing…' : 'Confirm Undo'}</button>
+    </div>
+  </dialog>
+}

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

@@ -1,3 +1,4 @@
+import SelectField from './SelectField'
 import React, { useState, useEffect } from 'react'
 import type { GitCheckpoint, FileChange } from '../types'
 
@@ -192,26 +193,18 @@ export const RewindModal: React.FC<RewindModalProps> = ({
                 Target Checkpoint
               </span>
               {checkpoints.length > 1 && (
-                <select
+                <SelectField aria-label="Target checkpoint" fullWidth={false}
                   value={selectedStep}
-                  onChange={(e) => setSelectedStep(Number(e.target.value))}
+                  onValueChange={(nextValue) => setSelectedStep(Number(nextValue))}
                   disabled={isLoading}
-                  style={{
-                    background: 'var(--input-bg, #111)',
-                    color: 'var(--text-main)',
-                    border: '1px solid var(--border)',
-                    borderRadius: '6px',
-                    fontSize: '12px',
-                    padding: '3px 8px',
-                    cursor: 'pointer',
-                  }}
+
                 >
                   {checkpoints.map((cp) => (
                     <option key={cp.step} value={cp.step}>
                       Step {cp.step} ({cp.commitHash.slice(0, 7)})
                     </option>
                   ))}
-                </select>
+                </SelectField>
               )}
             </div>
 

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

@@ -32,19 +32,13 @@ export function RunSummaryDashboard({ summary, className = '' }: Props) {
       ? 'run-summary-badge rollback'
       : 'run-summary-badge failure'
 
-  const statusColor = isSuccess
-    ? 'var(--status-speaking, #22c55e)'
-    : isRolledBack
-      ? '#f59e0b'
-      : 'var(--status-error, #ef4444)'
-
   return (
     <div className={`run-summary-card ${className}`}>
       {/* Header */}
       <div className="run-summary-header">
         <div className="run-summary-title">
-          <Activity style={{ width: '15px', height: '15px', color: statusColor }} />
-          <span>Run telemetry #{summary.runId}</span>
+          <Activity size={16} aria-hidden="true" />
+          <span className="run-summary-heading"><strong>Run summary</strong><small title={`Run ${summary.runId}`}>#{summary.runId}</small></span>
         </div>
         <div>
           <span className={badgeClass}>
@@ -80,8 +74,8 @@ export function RunSummaryDashboard({ summary, className = '' }: Props) {
             <span>Tools</span>
           </div>
           <div className="run-kpi-value">
-            {summary.toolCallsCount}{' '}
-            <span className="run-kpi-subtext">({summary.retriesCount} retry)</span>
+            {summary.toolCallsCount}
+            {summary.retriesCount > 0 && <span className="run-kpi-subtext"> · {summary.retriesCount} retried</span>}
           </div>
         </div>
 
@@ -100,12 +94,12 @@ export function RunSummaryDashboard({ summary, className = '' }: Props) {
                 {summary.filesCreated.length}{' '}
                 <span className="run-kpi-subtext">created</span>
               </>
-            ) : (
+            ) : summary.filesChanged.length > 0 ? (
               <>
                 {summary.filesChanged.length}{' '}
                 <span className="run-kpi-subtext">modified</span>
               </>
-            )}
+            ) : <>0 <span className="run-kpi-subtext">files</span></>}
           </div>
         </div>
       </div>

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

@@ -1,3 +1,4 @@
+import SelectField from './SelectField'
 import React, { useState, useEffect, useMemo } from 'react'
 import { DateTime } from 'luxon'
 import { renderScheduledTasksSvgIcon, renderTaskLogoIcon } from '../constants/plugins'
@@ -465,17 +466,17 @@ export const ScheduledTasksView: React.FC<ScheduledTasksViewProps> = React.memo(
                   <div className="management-form-group">
                     <label className="management-label">When to run</label>
                     <div className="schedule-inline-row">
-                      <select
+                      <SelectField fullWidth={false} aria-label="When to run"
                         className="management-input-field schedule-repeat-select"
                         value={repeatMode}
-                        onChange={(e) => setRepeatMode(e.target.value as typeof repeatMode)}
+                        onValueChange={(nextValue) => setRepeatMode(nextValue as typeof repeatMode)}
                       >
                         <option value="daily">Daily</option>
                         <option value="weekly">Weekly</option>
                         <option value="monthly">Monthly</option>
                         <option value="once">One-time</option>
                         <option value="custom">Custom (cron)</option>
-                      </select>
+                      </SelectField>
 
                       {repeatMode === 'weekly' && (
                         <>
@@ -534,17 +535,17 @@ export const ScheduledTasksView: React.FC<ScheduledTasksViewProps> = React.memo(
                           onChange={(e) => setTimeOfDay(e.target.value)}
                           required
                         />
-                        <select
+                        <SelectField fullWidth={false} aria-label="Time zone"
                           className="management-input-field schedule-timezone-select"
                           value={taskTimezone}
-                          onChange={(e) => setTaskTimezone(e.target.value)}
+                          onValueChange={(nextValue) => setTaskTimezone(nextValue)}
                         >
                           {timezoneOptions.map((tz) => (
                             <option key={tz} value={tz}>
                               {tz}
                             </option>
                           ))}
-                        </select>
+                        </SelectField>
                       </div>
                     )}
                   </div>

package/src/renderer/shared/components/SelectField.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+
+import SelectField from './SelectField'
+
+describe('Mint dropdown field', () => {
+  it('preserves a controlled numeric checkpoint and its accessible label', async () => {
+    const html = renderToStaticMarkup(<SelectField value={2} id="checkpoint" aria-label="Target checkpoint" disabled>
+      <option value={1}>Step 1</option><option value={2}>Step 2</option>
+    </SelectField>)
+    expect(html).toContain('Step 2')
+    expect(html).toContain('role="combobox"')
+    expect(html).toContain('id="checkpoint"')
+    expect(html).toContain('aria-label="Target checkpoint"')
+    expect(html).toContain('disabled=""')
+  })
+  it('preserves conditional and mapped labels, including a custom model entry', async () => {
+    const html = renderToStaticMarkup(<SelectField value="custom">
+      {['a','b'].map(v=><option key={v} value={v}>{v}</option>)}
+      {false && <option value="hidden">Hidden</option>}
+      <option value="custom">Custom model ID…</option>
+    </SelectField>)
+    expect(html).toContain('Custom model ID…')
+    expect(html).not.toContain('Hidden')
+  })
+})

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

@@ -0,0 +1,38 @@
+import { Children, Fragment, isValidElement, type CSSProperties, type ReactNode } from 'react'
+import GlideSelect, { type GlideOption } from './GlideSelect'
+
+interface SelectFieldProps {
+  children: ReactNode
+  value?: string | number
+  defaultValue?: string | number
+  onValueChange?: (value: string) => void
+  disabled?: boolean
+  id?: string
+  'aria-label'?: string
+  'aria-labelledby'?: string
+  className?: string
+  title?: string
+  style?: CSSProperties
+  fullWidth?: boolean
+}
+
+function optionsFromChildren(children: ReactNode): GlideOption[] {
+  return Children.toArray(children).flatMap(child => {
+    if (!isValidElement<{ value?: string | number; children?: ReactNode }>(child)) return []
+    if (child.type === Fragment) return optionsFromChildren(child.props.children)
+    if (child.type !== 'option') return []
+    const label = Children.toArray(child.props.children).join('')
+    return [{ value: String(child.props.value ?? label), label }]
+  })
+}
+
+/** Shared field adapter keeps Mint's dynamic option lists and value callbacks intact. */
+export default function SelectField({ children, value, defaultValue, onValueChange, disabled,
+  id, 'aria-label': ariaLabel, 'aria-labelledby': labelledBy, className, title, style, fullWidth = true }: SelectFieldProps) {
+  return <GlideSelect options={optionsFromChildren(children)}
+    value={value === undefined ? undefined : String(value)}
+    defaultValue={defaultValue === undefined ? undefined : String(defaultValue)}
+    onChange={onValueChange} disabled={disabled} id={id} ariaLabel={ariaLabel ?? title ?? 'Select'} labelledBy={labelledBy}
+    className={className ? `mint-select-field ${className}` : 'mint-select-field'} title={title}
+    style={style} fullWidth={fullWidth} />
+}

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

@@ -0,0 +1,48 @@
+import { useState } from 'react'
+import { File, FileText, Globe, Image, Paperclip, Video } from 'lucide-react'
+import type { SessionSource } from '../utils/sessionSources'
+import '../css/session-sources.css'
+
+function SourceIcon({ source }: { source: SessionSource }) {
+  const src = source.kind === 'web' ? source.faviconUrl : source.thumbnailDataUri
+  const [failedSrc, setFailedSrc] = useState<string>()
+  const Icon = source.kind === 'web' ? Globe : source.kind === 'image' ? Image : source.kind === 'video' ? Video : /\.(pdf|md|txt|docx?)$/i.test(source.name) ? FileText : File
+  return <span className={`session-source-icon is-${source.kind}`}>
+    {src && src !== failedSrc ? <img src={src} alt="" loading="lazy" referrerPolicy="no-referrer" onError={() => setFailedSrc(src)} /> : <Icon size={15} aria-hidden="true" />}
+  </span>
+}
+
+export default function SessionSources({ sources, loading, error, onRetry, onOpenLibrary }: {
+  sources: SessionSource[]; loading: boolean; error: string; onRetry: () => void; onOpenLibrary: (url: string) => void
+}) {
+  const [expanded, setExpanded] = useState(false)
+  const groups = [
+    { label: 'Images', kinds: ['image'] },
+    { label: 'Files', kinds: ['file', 'video'] },
+    { label: 'Web searches', kinds: ['web'] },
+  ]
+  const initialSources = groups.flatMap(group => sources.filter(source => group.kinds.includes(source.kind)).slice(0, 2))
+  const shown = expanded ? sources : initialSources
+  return <section className="session-sources" aria-label="Session sources">
+    <header className="session-sources-heading"><span><Paperclip size={13} aria-hidden="true" />Sources <small>This session</small></span><span>{sources.length}</span></header>
+    {loading && <p className="session-sources-empty" role="status">Loading session sources…</p>}
+    {error && <div className="session-sources-error" role="status"><span>Could not load saved sources.</span><button type="button" onClick={onRetry}>Retry</button></div>}
+    {!loading && !error && sources.length === 0 && <p className="session-sources-empty">Images and files you send, and pages found by web search, will appear here.</p>}
+    {groups.map(group => {
+      const items = shown.filter(source => group.kinds.includes(source.kind))
+      if (!items.length) return null
+      return <div className="session-sources-group" key={group.label}>
+        <h3>{group.label}</h3>
+        <ul>{items.map(source => {
+          const content = <><SourceIcon source={source} /><span className="session-source-copy"><strong>{source.name}</strong><small>{source.detail}</small></span></>
+          return <li key={source.id}>{source.url ? <a className="session-source-row" href={source.url} target={source.kind === 'web' ? '_blank' : undefined} rel={source.kind === 'web' ? 'noopener noreferrer' : undefined} title={source.url} onClick={event => {
+            if (source.kind === 'web' || event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return
+            event.preventDefault()
+            onOpenLibrary(source.url)
+          }}>{content}</a> : <div className="session-source-row" title={source.name}>{content}</div>}</li>
+        })}</ul>
+      </div>
+    })}
+    {sources.length > initialSources.length && <button type="button" className="session-sources-more" aria-expanded={expanded} onClick={() => setExpanded(value => !value)}>{expanded ? 'Show less' : `Show ${sources.length - shown.length} more sources`}</button>}
+  </section>
+}