@pheem49/mint 1.15.0 → 1.16.0

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

@@ -1,3 +1,4 @@
+import SelectField from './SelectField'
 import React, { useState, useRef, useCallback, useEffect } from 'react'
 import '../css/veo-studio.css'
 import { getActiveModel, setActiveModel, subscribeModelChange } from '../utils/modelManager'
@@ -276,12 +277,12 @@ export default function VeoStudioPanel({ view, onSendToChat }: VeoStudioPanelPro
                 <label className="veo-studio-label" htmlFor="veo-studio-provider" style={{ display: 'flex', alignItems: 'center', width: '100%', height: '18px' }}>
                   <span>Provider</span>
                 </label>
-                <select
+                <SelectField aria-label="Provider"
                   id="veo-studio-provider"
                   className="veo-studio-textarea"
-                  style={{ padding: '8px 10px', height: '38px', cursor: 'pointer' }}
+
                   value={selectedProvider}
-                  onChange={(e) => handleProviderChange(e.target.value)}
+                  onValueChange={(nextValue) => handleProviderChange(nextValue)}
                   disabled={generating}
                 >
                   {providers.available.map((prov) => (
@@ -289,25 +290,25 @@ export default function VeoStudioPanel({ view, onSendToChat }: VeoStudioPanelPro
                       {providerLabel(prov).replace(/^[^a-zA-Z0-9]+/, '')}
                     </option>
                   ))}
-                </select>
+                </SelectField>
               </div>
 
               <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '4px' }}>
                 <label className="veo-studio-label" htmlFor="veo-studio-model" style={{ display: 'flex', alignItems: 'center', height: '18px' }}>
                   Model
                 </label>
-                <select
+                <SelectField aria-label="Model"
                   id="veo-studio-model"
                   className="veo-studio-textarea"
-                  style={{ padding: '8px 10px', height: '38px', cursor: 'pointer' }}
+
                   value={selectedModel}
-                  onChange={(e) => handleModelChange(e.target.value)}
+                  onValueChange={(nextValue) => handleModelChange(nextValue)}
                   disabled={generating}
                 >
                   {modelOptions.map(({ value, label }) => (
                     <option key={value} value={value}>{label}</option>
                   ))}
-                </select>
+                </SelectField>
               </div>
             </div>
 

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

@@ -0,0 +1,36 @@
+import { memo, useEffect, useMemo, useRef, useState } from 'react'
+import { X } from 'lucide-react'
+import type { AgentProgress } from '../types'
+import { viewedImagesFrom } from '../utils/viewedImages'
+import '../css/viewed-images.css'
+
+function ViewedImage({ image }: { image: ReturnType<typeof viewedImagesFrom>[number] }) {
+  const [broken, setBroken] = useState(false)
+  const [expanded, setExpanded] = useState(false)
+  const dialog = useRef<HTMLDialogElement>(null)
+  useEffect(() => { setBroken(false) }, [image.src])
+  useEffect(() => {
+    if (expanded) dialog.current?.showModal()
+  }, [expanded])
+
+  return <figure className="viewed-image" data-viewed-image={image.id}>
+    {broken ? <p className="viewed-image-error" role="status">Image preview unavailable</p> :
+      <button type="button" className="viewed-image-button" aria-label={`Expand ${image.name}`} onClick={() => setExpanded(true)}>
+        <img src={image.src} alt={`Viewed image: ${image.name}`} loading="lazy" onError={() => setBroken(true)} />
+      </button>}
+    <figcaption title={image.path}>{image.name}</figcaption>
+    <dialog ref={dialog} className="viewed-image-dialog" aria-label={`Image preview: ${image.name}`}
+      onClose={() => setExpanded(false)} onClick={event => { if (event.target === event.currentTarget) dialog.current?.close() }}>
+      <header><span title={image.path}>{image.name}</span><button type="button" aria-label="Close image preview" onClick={() => dialog.current?.close()}><X size={18} /></button></header>
+      {expanded && <img src={image.src} alt={image.name} />}
+    </dialog>
+  </figure>
+}
+
+export default memo(function ViewedImages({ progress }: { progress: AgentProgress[] }) {
+  const images = useMemo(() => viewedImagesFrom(progress), [progress])
+  if (!images.length) return null
+  return <section className="viewed-images" aria-label="Images viewed by Mint">
+    {images.map(image => <ViewedImage key={image.id} image={image} />)}
+  </section>
+})

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

@@ -0,0 +1,82 @@
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, type ReactNode, type RefObject } from 'react'
+import { defaultRangeExtractor, useVirtualizer, type Range } from '@tanstack/react-virtual'
+
+export interface VirtualChatHistoryHandle {
+  scrollToEnd: () => void
+}
+
+interface Props {
+  items: Array<{ id: string | number }>
+  scrollRef: RefObject<HTMLDivElement | null>
+  renderRow: (index: number) => ReactNode
+  tail?: ReactNode
+  hasOlder?: boolean
+}
+
+// The live turn is a measured row too: image, tool, and approval growth obey the
+// same anchoring policy as history. Only the viewport and a few neighbors mount.
+export const VirtualChatHistory = memo(forwardRef<VirtualChatHistoryHandle, Props>(function VirtualChatHistory({ items, scrollRef, renderRow, tail, hasOlder }, ref) {
+  const container = useRef<HTMLDivElement>(null)
+  const [scrollMargin, setScrollMargin] = useState(0)
+  const measuredMargin = useRef<number | null>(null)
+  // Parent DOM refs attach after child layout effects. Publish the scroll host
+  // after the commit so a newly mounted list always installs its observers.
+  const [scrollElement, setScrollElement] = useState<HTMLDivElement | null>(null)
+  useEffect(() => { setScrollElement(scrollRef.current) }, [scrollRef])
+  const getItemKey = useCallback((index: number) => index < items.length ? `turn:${items[index].id}` : 'live-turn', [items])
+  const hasTail = Boolean(tail)
+  const rangeExtractor = useCallback((range: Range) => {
+    const indexes = defaultRangeExtractor(range)
+    // Approval inputs and other live controls must retain their local state
+    // while the reader scrolls into history. Keep just this one extra row alive.
+    if (hasTail && !indexes.includes(items.length)) indexes.push(items.length)
+    return indexes
+  }, [items.length, hasTail])
+  const virtualizer = useVirtualizer<HTMLDivElement, HTMLDivElement>({
+    count: items.length + (tail ? 1 : 0),
+    getScrollElement: () => scrollElement,
+    getItemKey,
+    rangeExtractor,
+    estimateSize: () => 320,
+    overscan: 4,
+    gap: 10,
+    scrollMargin,
+    anchorTo: 'end',
+    followOnAppend: true,
+    scrollEndThreshold: 240,
+    useAnimationFrameWithResizeObserver: true,
+  })
+
+  useImperativeHandle(ref, () => ({ scrollToEnd: () => virtualizer.scrollToEnd() }), [virtualizer])
+
+  useLayoutEffect(() => {
+    const scroll = scrollElement
+    const list = container.current
+    if (!scroll || !list) return
+    const measureStart = () => {
+      const margin = list.getBoundingClientRect().top - scroll.getBoundingClientRect().top - scroll.clientTop + scroll.scrollTop
+      const previous = measuredMargin.current
+      measuredMargin.current = margin
+      setScrollMargin(margin)
+      // A disappearing Load older button shifts the list without changing a
+      // row's measured size. Compensate that prefix separately from row anchors.
+      if (previous !== null && previous !== margin && scroll.scrollTop > Math.min(previous, margin)) {
+        virtualizer.scrollToOffset(scroll.scrollTop + margin - previous)
+      }
+    }
+    measureStart()
+    const observer = new ResizeObserver(measureStart)
+    observer.observe(scroll)
+    return () => observer.disconnect()
+  }, [scrollElement, hasOlder, virtualizer])
+
+  useLayoutEffect(() => { if (scrollElement) virtualizer.scrollToEnd() }, [virtualizer, scrollElement])
+
+  return <div ref={container} className="virtual-chat-history" style={{ position: 'relative', width: '100%', height: virtualizer.getTotalSize(), flexShrink: 0, overflowAnchor: 'none' }}>
+    {virtualizer.getVirtualItems().map(row => <div key={row.key} data-index={row.index}
+      ref={virtualizer.measureElement} className="virtual-chat-row"
+      style={{ position: 'absolute', top: 0, left: 0, width: '100%', display: 'flow-root', transform: `translateY(${row.start - scrollMargin}px)` }}>
+      {row.index < items.length ? renderRow(row.index) : tail}
+    </div>)}
+  </div>
+}))

package/src/renderer/shared/components/VoicePill.css

@@ -0,0 +1,85 @@
+.voice-pill {
+  --vp-accent: #f5f5f5; --vp-icon: #a1a1aa; --vp-bg: #27272a; --vp-size: 28px; --vp-radius: 14px;
+  --vp-reach: 8px; --vp-extra: 0px; --vp-clock-w: 0px; --vp-wave-w: 0px; --vp-slide: 0px; --vp-cancel: 0;
+  --vp-stop: 9px; --vp-icon-size: 15px; --vp-time-size: 10px; --vp-open: 200ms; --vp-press: 0.95; --vp-hit: 8px;
+  --vp-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  position: relative; display: inline-grid; place-items: center; isolation: isolate;
+  width: var(--vp-size); height: var(--vp-size); margin: 0; padding: 0; border: 0;
+  border-radius: var(--vp-radius); background: transparent; color: var(--vp-icon); font-family: inherit;
+  cursor: pointer; outline: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent; touch-action: none;
+  transition: transform 160ms var(--vp-ease-out), color 150ms ease;
+}
+.voice-pill::before { content: ''; position: absolute; inset: calc(-1 * var(--vp-hit)); }
+.voice-pill[data-state='listening'] { z-index: 1; color: var(--vp-accent); }
+.voice-pill[data-pressed] { transform: scale(var(--vp-press)); }
+.voice-pill:disabled { opacity: 0.55; cursor: default; pointer-events: none; }
+.voice-pill__capsule {
+  position: absolute; inset: 0 0 0 calc(-1 * (var(--vp-reach) + var(--vp-extra)));
+  border-radius: var(--vp-radius); background: var(--vp-bg);
+  clip-path: inset(0 0 0 calc(var(--vp-reach) + var(--vp-extra)) round var(--vp-radius)); pointer-events: none;
+  transition: clip-path var(--vp-open) var(--vp-ease-out), background-color 150ms ease;
+}
+@media (hover: hover) and (pointer: fine) {
+  .voice-pill[data-state='idle']:not(:disabled):hover .voice-pill__capsule { background: color-mix(in srgb, var(--vp-icon) 10%, var(--vp-bg)); }
+}
+.voice-pill[data-state='listening'] .voice-pill__capsule { clip-path: inset(0 0 round var(--vp-radius)); }
+.voice-pill__time {
+  position: absolute; top: 0; bottom: 0; right: 100%; display: grid; place-items: center; width: var(--vp-clock-w); box-sizing: border-box;
+  color: var(--vp-accent); font-size: var(--vp-time-size); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1;
+  opacity: 0; filter: blur(2px); transform: translateX(var(--vp-slide)); pointer-events: none;
+  transition: opacity 200ms ease, filter 200ms ease, transform 240ms var(--vp-ease-out);
+}
+.voice-pill[data-state='listening'] .voice-pill__time { opacity: calc(1 - var(--vp-cancel)); filter: blur(0); }
+.voice-pill__wave {
+  position: absolute; top: 18%; right: calc(100% + var(--vp-clock-w)); width: var(--vp-wave-w); height: 64%;
+  opacity: 0; filter: blur(2px); transform: translateX(var(--vp-slide)); pointer-events: none;
+  transition: opacity 200ms ease, filter 200ms ease, transform 240ms var(--vp-ease-out);
+}
+.voice-pill[data-state='listening'] .voice-pill__wave { opacity: calc(1 - var(--vp-cancel)); filter: blur(0); }
+.voice-pill__cancel {
+  position: absolute; top: 0; bottom: 0; right: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 3px;
+  width: var(--vp-extra); color: var(--vp-accent); font-size: var(--vp-time-size); font-weight: 500; line-height: 1;
+  opacity: var(--vp-cancel); pointer-events: none;
+}
+.voice-pill[data-sliding] .voice-pill__time, .voice-pill[data-sliding] .voice-pill__wave, .voice-pill[data-sliding] .voice-pill__glyph { transition-property: opacity, filter; }
+.voice-pill__glyph { position: relative; display: grid; place-items: center; width: var(--vp-size); height: var(--vp-size); transform: translateX(var(--vp-slide)); transition: transform 240ms var(--vp-ease-out); }
+.voice-pill__glyph > * { grid-area: 1 / 1; transition: opacity 200ms ease, filter 200ms ease, transform 200ms var(--vp-ease-out); }
+.voice-pill__mic { display: inline-flex; }
+.voice-pill__stop { width: var(--vp-stop); height: var(--vp-stop); border-radius: 22%; background: currentColor; opacity: 0; filter: blur(2px); transform: scale(0.6); }
+.voice-pill[data-state='listening'] .voice-pill__mic { opacity: 0; filter: blur(2px); transform: scale(0.7); }
+.voice-pill[data-state='listening'] .voice-pill__stop { opacity: 1; filter: blur(0); transform: scale(1); }
+.voice-pill[data-input='key'] .voice-pill__capsule, .voice-pill[data-input='key'] .voice-pill__time, .voice-pill[data-input='key'] .voice-pill__glyph > * { transition-duration: 0ms; }
+.voice-pill:focus-visible { outline: 2px solid var(--vp-accent); outline-offset: 3px; }
+.composer-voice-feedback {
+  margin: 8px 4px 0; color: var(--text-muted); font-size: 12px; line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+/* VoicePill owns the microphone appearance and state; the composer owns placement. */
+#chat-form:has(.voice-pill.composer-voice-pill) {
+  /* Reserve capsule space immediately; only the capsule itself should expand. */
+  transition-property: background-color, border-color, box-shadow;
+}
+#chat-form .voice-pill.composer-voice-pill {
+  grid-column: 4; grid-row: 3;
+  width: var(--vp-size); height: var(--vp-size); display: inline-grid; justify-self: end; align-self: center;
+  border: 0; border-radius: var(--vp-radius); padding: 0; background: transparent; color: var(--vp-icon);
+  -webkit-app-region: no-drag;
+  transition: transform 160ms var(--vp-ease-out), color 150ms ease;
+}
+#chat-form .voice-pill.composer-voice-pill[data-state='listening'] { color: var(--vp-accent); }
+#chat-form .voice-pill.composer-voice-pill[data-pressed] { transform: scale(var(--vp-press)); }
+#chat-form:not(:has(.mint-attachment)) .composer-voice-pill { grid-row: 2; }
+#chat-form:has(.voice-pill.composer-voice-pill[data-state='listening']) { grid-template-columns: 32px 32px minmax(0, 1fr) 118px 32px; }
+#chat-form.has-live-btn:has(.voice-pill.composer-voice-pill[data-state='listening']) { grid-template-columns: 32px 32px minmax(0, 1fr) 118px 32px 32px; }
+@media (prefers-reduced-motion: reduce) {
+  .voice-pill, #chat-form .voice-pill.composer-voice-pill[data-pressed] { transform: none !important; transition: color 150ms ease; }
+  .voice-pill__capsule { transition: background-color 150ms ease; }
+  .voice-pill__glyph > * { filter: none !important; transform: none !important; transition: opacity 200ms ease; }
+  .voice-pill__time, .voice-pill__wave, .voice-pill__glyph { filter: none !important; transition-property: opacity; }
+}
+@media (forced-colors: active) {
+  .voice-pill { border: 1px solid ButtonText; }
+  .voice-pill:focus-visible { outline-color: Highlight; }
+  .voice-pill__stop { background: ButtonText; }
+}

package/src/renderer/shared/components/VoicePill.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react'
+export type VoiceStopReason = 'release' | 'tap' | 'key' | 'escape' | 'blur' | 'cancel' | 'disabled' | 'mic-denied' | 'unmount'
+export interface VoicePillProps {
+  accentColor?: string; iconColor?: string; background?: string; size?: number; shape?: 'pill' | 'rounded'; reach?: number
+  showTime?: boolean; waveform?: boolean; slideToCancel?: boolean; cancelDistance?: number; attack?: number; release?: number
+  sensitivity?: number; floor?: number; openDuration?: number; pressScale?: number; mode?: 'auto' | 'hold' | 'toggle'; holdAfter?: number
+  reactive?: 'simulated' | 'mic'; disabled?: boolean; ariaLabel?: string; className?: string
+  onStart?: (event: { source: 'simulated' | 'mic' }) => void | boolean | Promise<void | boolean>
+  onStop?: (event: { reason: VoiceStopReason; duration: number }) => void
+  active?: boolean; id?: string; title?: string
+}
+export default function VoicePill(props: VoicePillProps): ReactNode

package/src/renderer/shared/components/VoicePill.jsx

@@ -0,0 +1,190 @@
+'use client';
+
+// React Bits VoicePill source supplied for this integration. Mint adds actual
+// recorder-state synchronization, async startup handling, and cancellation cleanup.
+import { useEffect, useRef, useState } from 'react';
+import { HugeiconsIcon } from '@hugeicons/react';
+import { ArrowLeft01Icon, Mic01Icon } from '@hugeicons/core-free-icons';
+import './VoicePill.css';
+
+const LOOP = 4.8;
+const SYLLABLES = [[0.1,0.16,0.9],[0.3,0.12,0.7],[0.5,0.2,1],[0.95,0.14,0.8],[1.15,0.1,0.6],[1.3,0.22,0.95],[1.9,0.16,0.85],[2.12,0.12,0.7],[2.3,0.18,0.9],[2.55,0.1,0.5],[3.05,0.24,1],[3.4,0.12,0.75],[3.6,0.16,0.9]];
+const MIC_BINS = [[1,4],[4,11],[11,33]];
+const MIC_GAIN = 2.2, DT_MAX = 0.05, SLIDE_MIN = 4, WAVE_EVERY = 4, WAVE_MAX = 80;
+const simulatedLevel = t => {
+  const u = t % LOOP;
+  let a = 0.06;
+  for (const [s,d,p] of SYLLABLES) {
+    const x = (u-s)/d;
+    if (x >= 0 && x <= 1) a = Math.max(a,p*0.5*(1-Math.cos(2*Math.PI*x)));
+  }
+  return a*(0.7+0.3*Math.abs(Math.sin(2*Math.PI*7.1*u)));
+};
+const micLevel = (analyser,buf) => {
+  analyser.getByteFrequencyData(buf);
+  let total = 0;
+  for (const [lo,hi] of MIC_BINS) {
+    let s = 0;
+    for(let i=lo;i<hi;i++) s+=buf[i];
+    total+=s/((hi-lo)*255);
+  }
+  return total/MIC_BINS.length*MIC_GAIN;
+};
+const drawWave = (s,canvas,level,color,floor) => {
+  const dpr=Math.min(2,window.devicePixelRatio||1),rect=canvas.getBoundingClientRect();
+  const W=Math.max(1,Math.round(rect.width*dpr)),H=Math.max(1,Math.round(rect.height*dpr));
+  if(canvas.width!==W||canvas.height!==H){canvas.width=W;canvas.height=H;}
+  const ctx=canvas.getContext('2d');if(!ctx)return;
+  s.acc=Math.max(s.acc,level);s.tick=(s.tick+1)%WAVE_EVERY;
+  if(s.tick===0){s.hist.push(s.acc);s.acc=0;if(s.hist.length>WAVE_MAX)s.hist.shift();}
+  const bw=2*dpr,step=3*dpr,shift=s.tick/WAVE_EVERY*step;
+  ctx.clearRect(0,0,W,H);ctx.fillStyle=color;
+  for(let i=0;i<s.hist.length;i++){
+    const v=s.hist[s.hist.length-1-i],x=W-(i+1)*step-shift;if(x+bw<0)break;
+    const h=Math.max(bw,(floor+(1-floor)*v)*H),t=Math.min(1,Math.max(0,(x+bw/2)/(W*0.55))),fade=t*t*(3-2*t);
+    ctx.globalAlpha=(0.35+0.65*v)*fade;ctx.beginPath();ctx.roundRect(x,(H-h)/2,bw,h,bw/2);ctx.fill();
+  }
+  ctx.globalAlpha=1;
+};
+const clock=ms=>{const s=Math.floor(ms/1000);return `${Math.floor(s/60)}:${String(s%60).padStart(2,'0')}`;};
+const openMic=async(s,generation)=>{
+  const Ctx=window.AudioContext||window.webkitAudioContext;
+  if(!Ctx||!navigator.mediaDevices?.getUserMedia)throw new Error('unsupported');
+  s.audio??={ctx:new Ctx()};const a=s.audio;
+  if(a.ctx.state==='suspended')await a.ctx.resume();
+  const stream=await navigator.mediaDevices.getUserMedia({audio:true});
+  if(!s.listening||s.generation!==generation){stream.getTracks().forEach(t=>t.stop());return;}
+  a.stream=stream;a.src=a.ctx.createMediaStreamSource(stream);a.analyser=a.ctx.createAnalyser();
+  a.analyser.fftSize=256;a.analyser.smoothingTimeConstant=0;a.src.connect(a.analyser);a.buf=new Uint8Array(a.analyser.frequencyBinCount);
+};
+const closeMic=s=>{
+  const a=s.audio;if(!a?.stream)return;
+  a.stream.getTracks().forEach(t=>t.stop());a.src?.disconnect();a.stream=null;a.src=null;a.analyser=null;a.buf=null;
+};
+
+export default function VoicePill({
+  accentColor='#f5f5f5',iconColor='#a1a1aa',background='#27272a',size=28,shape='pill',reach=8,
+  showTime=true,waveform=true,slideToCancel=true,cancelDistance=64,attack=40,release=240,sensitivity=1,
+  floor=0.1,openDuration=200,pressScale=0.95,mode='auto',holdAfter=300,reactive='simulated',
+  disabled=false,ariaLabel='Dictate',onStart,onStop,className='',active,id,title
+}){
+  const [listening,setListening]=useState(Boolean(active));
+  const [pending,setPending]=useState(false);
+  const [pressed,setPressed]=useState(false);
+  const [input,setInput]=useState('pointer');
+  const timeRef=useRef(null),rootRef=useRef(null),waveRef=useRef(null);
+  const st=useRef({listening:Boolean(active),pointerId:null,ownPress:false,downX:0,sliding:false,hist:[],tick:0,acc:0,downAt:0,startedAt:0,raf:0,last:0,env:0,t0:0,audio:null,generation:0});
+  const cfg=useRef({});
+  cfg.current={attack,release,sensitivity,floor,mode,holdAfter,reactive,showTime,waveform,slideToCancel,cancelDistance,accentColor,onStart,onStop,active,disabled};
+  const frame=now=>{
+    const s=st.current,c=cfg.current,dt=Math.min((now-s.last)/1000,DT_MAX);s.last=now;
+    let target=0;
+    if(s.listening){if(s.audio?.analyser)target=micLevel(s.audio.analyser,s.audio.buf);else if(c.reactive!=='mic')target=simulatedLevel((now-s.t0)/1000);}
+    target=Math.min(1,target*c.sensitivity);
+    const tau=Math.max(1,target>s.env?c.attack:c.release)/1000;s.env+=(target-s.env)*(1-Math.exp(-dt/tau));
+    if(s.listening&&c.showTime&&timeRef.current){const text=clock(now-s.startedAt);if(timeRef.current.textContent!==text)timeRef.current.textContent=text;}
+    if(s.listening&&c.waveform&&waveRef.current)drawWave(s,waveRef.current,s.env,c.accentColor,c.floor);
+    s.raf=s.listening?requestAnimationFrame(frame):0;
+  };
+  const begin=kind=>{
+    const s=st.current,c=cfg.current;if(s.listening||c.disabled)return;
+    s.listening=true;s.generation++;const generation=s.generation;
+    s.hist=[];s.tick=0;s.acc=0;s.env=0;s.startedAt=performance.now();s.t0=s.startedAt;s.last=s.startedAt;
+    if(timeRef.current)timeRef.current.textContent='0:00';
+    setListening(c.active===undefined);setPending(c.active!==undefined);setInput(kind);
+    if(!s.raf)s.raf=requestAnimationFrame(frame);
+    try{
+      const started=c.onStart?.({source:c.reactive});
+      Promise.resolve(started).then(ok=>{
+        if(s.generation!==generation)return;
+        setPending(false);if(ok===false)end('start-failed',false);
+      }).catch(()=>{if(s.generation===generation)end('start-failed',false);});
+    }catch{end('start-failed',false);}
+    if(c.reactive==='mic')openMic(s,generation).catch(()=>{if(s.generation===generation)end('mic-denied');});
+  };
+  const end=(reason,notify=true)=>{
+    const s=st.current,c=cfg.current;if(!s.listening)return;
+    s.listening=false;s.generation++;closeMic(s);cancelAnimationFrame(s.raf);s.raf=0;
+    setListening(false);setPending(false);setInput(reason==='key'||reason==='escape'?'key':'pointer');
+    if(notify)c.onStop?.({reason,duration:Math.round(performance.now()-s.startedAt)});
+  };
+  const settleSlide=()=>{
+    st.current.sliding=false;const root=rootRef.current;if(!root)return;
+    delete root.dataset.sliding;root.style.setProperty('--vp-slide','0px');root.style.setProperty('--vp-cancel','0');
+  };
+  const onPointerMove=e=>{
+    const s=st.current,c=cfg.current,root=rootRef.current;
+    if(!root||s.pointerId!==e.pointerId||!c.slideToCancel||!s.listening||!s.ownPress)return;
+    const dx=e.clientX-s.downX;if(!s.sliding&&dx>-SLIDE_MIN)return;
+    s.sliding=true;root.dataset.sliding='';const pull=Math.min(c.cancelDistance+24,Math.max(0,-dx));
+    root.style.setProperty('--vp-slide',`${-pull}px`);const progress=Math.min(1,pull/c.cancelDistance);
+    root.style.setProperty('--vp-cancel',progress.toFixed(3));if(progress>=1){settleSlide();end('cancel');}
+  };
+  const onPointerDown=e=>{
+    const s=st.current;if(disabled||e.button!==0||!e.isPrimary||s.pointerId!==null)return;
+    e.preventDefault();e.currentTarget.focus({preventScroll:true});
+    s.pointerId=e.pointerId;s.downX=e.clientX;s.downAt=performance.now();
+    try{e.currentTarget.setPointerCapture(e.pointerId);}catch{}
+    setPressed(true);s.ownPress=!s.listening;if(!s.listening)begin('pointer');
+  };
+  const clearPress=e=>{
+    const s=st.current;if(e.pointerId!==s.pointerId)return false;
+    s.pointerId=null;setPressed(false);if(s.sliding)settleSlide();
+    try{if(e.currentTarget.hasPointerCapture(e.pointerId))e.currentTarget.releasePointerCapture(e.pointerId);}catch{}
+    return true;
+  };
+  const onPointerUp=e=>{
+    const s=st.current,c=cfg.current;if(!clearPress(e)||!s.listening)return;
+    const held=performance.now()-s.downAt,isHold=c.mode==='hold'||(c.mode==='auto'&&held>=c.holdAfter);
+    if(s.ownPress){if(isHold)end('release');}else end(held<c.holdAfter?'tap':'release');
+  };
+  const onPointerCancel=e=>{if(clearPress(e))end('cancel');};
+  const onKeyDown=e=>{
+    if(e.key==='Escape'&&st.current.listening){e.preventDefault();e.stopPropagation();settleSlide();end('escape');return;}
+    if((e.key===' '||e.key==='Enter')&&!e.repeat){e.preventDefault();if(st.current.listening)end('key');else begin('key');}
+  };
+  const onClick=e=>{
+    if(e.detail===0&&st.current.pointerId===null&&!e.nativeEvent.pointerType){if(st.current.listening)end('key');else begin('key');}
+  };
+  useEffect(()=>{
+    if(active===undefined)return;
+    const s=st.current;
+    if(active){
+      if(!s.listening){s.listening=true;s.generation++;s.hist=[];s.env=0;}
+      s.startedAt=performance.now();s.t0=s.startedAt;s.last=s.startedAt;
+      setListening(true);setPending(false);if(!s.raf)s.raf=requestAnimationFrame(frame);
+    }else if(s.listening)end('external',false);
+  },[active]);
+  useEffect(()=>{
+    if(!listening&&!pending)return;
+    const stop=()=>{settleSlide();st.current.pointerId=null;setPressed(false);end('blur');};
+    const onVis=()=>{if(document.hidden)stop();};
+    window.addEventListener('blur',stop);document.addEventListener('visibilitychange',onVis);
+    return()=>{window.removeEventListener('blur',stop);document.removeEventListener('visibilitychange',onVis);};
+  },[listening,pending]);
+  useEffect(()=>{if(disabled){settleSlide();st.current.pointerId=null;setPressed(false);end('disabled');}},[disabled]);
+  useEffect(()=>{
+    const s=st.current;
+    return()=>{
+      if(s.listening){s.listening=false;s.generation++;cfg.current.onStop?.({reason:'unmount',duration:Math.round(performance.now()-s.startedAt)});}
+      closeMic(s);cancelAnimationFrame(s.raf);s.raf=0;s.audio?.ctx.close();
+    };
+  },[]);
+  const radius=shape==='rounded'?Math.round(size*0.29):size/2,hit=Math.max(0,Math.min(10,(44-size)/2));
+  const timeSize=Math.max(10,Math.round(size*0.36)),clockW=showTime?Math.round(timeSize*2.5)+4:0,waveW=waveform?Math.round(size*1.9):0,extra=clockW+waveW;
+  return <button id={id} title={title} type="button" disabled={disabled} aria-label={ariaLabel} aria-pressed={listening} aria-busy={pending||undefined}
+    className={`voice-pill${className?` ${className}`:''}`} data-state={listening?'listening':'idle'} data-pending={pending?'':undefined}
+    data-pressed={pressed?'':undefined} data-input={input} data-time={showTime?'':undefined} ref={rootRef}
+    onPointerDown={onPointerDown} onPointerMove={onPointerMove} onPointerUp={onPointerUp} onPointerCancel={onPointerCancel}
+    onLostPointerCapture={onPointerCancel} onKeyDown={onKeyDown} onClick={onClick} onContextMenu={e=>e.preventDefault()}
+    style={{'--vp-accent':accentColor,'--vp-icon':iconColor,'--vp-bg':background,'--vp-size':`${size}px`,'--vp-radius':`${radius}px`,
+      '--vp-reach':`${reach}px`,'--vp-extra':`${extra}px`,'--vp-clock-w':`${clockW}px`,'--vp-wave-w':`${waveW}px`,
+      '--vp-stop':`${Math.round(size*0.32)}px`,'--vp-icon-size':`${Math.round(size*0.54)}px`,'--vp-time-size':`${timeSize}px`,
+      '--vp-open':`${openDuration}ms`,'--vp-press':pressScale,'--vp-hit':`${hit}px`}}>
+    <span className="voice-pill__capsule" aria-hidden="true" />
+    {waveform?<canvas ref={waveRef} className="voice-pill__wave" aria-hidden="true" />:null}
+    {slideToCancel?<span className="voice-pill__cancel" aria-hidden="true"><HugeiconsIcon icon={ArrowLeft01Icon} size={12} strokeWidth={2.2}/><span>Cancel</span></span>:null}
+    {showTime?<span ref={timeRef} className="voice-pill__time" aria-hidden="true">0:00</span>:null}
+    <span className="voice-pill__glyph" aria-hidden="true"><span className="voice-pill__mic"><HugeiconsIcon icon={Mic01Icon} size={Math.round(size*0.54)} strokeWidth={2}/></span><span className="voice-pill__stop"/></span>
+  </button>;
+}

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

@@ -0,0 +1,22 @@
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+
+import VoicePill from './VoicePill'
+
+describe('VoicePill status', () => {
+  it('exposes the actual recording state to assistive technology', () => {
+    const html = renderToStaticMarkup(<VoicePill active ariaLabel="Voice input" />)
+    expect(html).toContain('aria-pressed="true"')
+    expect(html).toContain('data-state="listening"')
+    expect(html).toContain('aria-label="Voice input"')
+    expect(html).toContain('voice-pill__wave')
+    expect(html).toContain('0:00')
+  })
+  it('renders a disabled idle microphone without a false recording state', () => {
+    const html = renderToStaticMarkup(<VoicePill disabled showTime={false} waveform={false} />)
+    expect(html).toContain('disabled=""')
+    expect(html).toContain('aria-pressed="false"')
+    expect(html).not.toContain('<canvas')
+  })
+})

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

@@ -1,11 +1,15 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { FileCode2, FolderOpen, GitBranch, RefreshCw, Terminal } from 'lucide-react'
 import { workspacePlatform } from '../platform'
-import type { FileChange, GitBranchInfo } from '../types'
+import type { AgentProgress, FileChange, GitBranchInfo } from '../types'
+import { useSessionSources } from '../utils/useSessionSources'
+import SessionSources from './SessionSources'
 
 interface WorkspaceContextPopoverProps {
   workspacePath: string
   terminalCount: number
-  sourceNames: string[]
+  chatId: string
+  liveProgress: AgentProgress[]
   recentChanges: FileChange[]
   onOpenWorkspace: () => void
   onOpenReview: (changes: FileChange[]) => void
@@ -20,7 +24,8 @@ function workspaceLabel(path: string) {
 export default function WorkspaceContextPopover({
   workspacePath,
   terminalCount,
-  sourceNames,
+  chatId,
+  liveProgress,
   recentChanges,
   onOpenWorkspace,
   onOpenReview,
@@ -30,6 +35,7 @@ export default function WorkspaceContextPopover({
   const [gitInfo, setGitInfo] = useState<GitBranchInfo | null>(null)
   const [isRefreshing, setIsRefreshing] = useState(false)
   const rootRef = useRef<HTMLDivElement>(null)
+  const { sources, loading: sourceLoading, error: sourceError, retry: retrySources } = useSessionSources(chatId, liveProgress, open)
 
   const refresh = useCallback(async () => {
     if (!workspacePath.trim()) {
@@ -73,7 +79,6 @@ export default function WorkspaceContextPopover({
   const additions = recentChanges.reduce((total, change) => total + Math.max(0, change.additions || 0), 0)
   const deletions = recentChanges.reduce((total, change) => total + Math.max(0, change.deletions || 0), 0)
   const hasReview = recentChanges.length > 0
-  const uniqueSources = [...new Set(sourceNames.filter(Boolean))]
 
   return (
     <div className="workspace-context" ref={rootRef}>
@@ -91,41 +96,41 @@ export default function WorkspaceContextPopover({
       {open && (
         <section className="workspace-context-popover" role="dialog" aria-label="Workspace context">
           <header className="workspace-context-heading">
-            <span>Workspace context</span>
+            <span className="workspace-context-heading-title"><FolderOpen size={16} aria-hidden="true" /> Workspace context</span>
             <button type="button" onClick={handleRefresh} disabled={isRefreshing} title="Refresh workspace status" aria-label="Refresh workspace status">
-              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 11a8 8 0 1 0 2 5.5"/><path d="M20 4v7h-7"/></svg>
+              <RefreshCw className={isRefreshing ? 'is-refreshing' : ''} size={15} aria-hidden="true" />
             </button>
           </header>
 
           <button type="button" className="workspace-context-row" onClick={() => { onOpenWorkspace(); setOpen(false) }}>
-            <span className="workspace-context-icon">▰</span>
+            <span className="workspace-context-icon"><FolderOpen size={16} aria-hidden="true" /></span>
             <span className="workspace-context-copy"><strong>{workspaceLabel(workspacePath)}</strong><small title={workspacePath}>{workspacePath || 'Choose a project folder'}</small></span>
             <span className="workspace-context-action">Open</span>
           </button>
 
           <div className="workspace-context-row is-static">
-            <span className="workspace-context-icon">⌘</span>
+            <span className="workspace-context-icon"><GitBranch size={16} aria-hidden="true" /></span>
             <span className="workspace-context-copy"><strong>{gitInfo?.isRepository ? (gitInfo.currentBranch || gitInfo.detachedHead || 'Detached HEAD') : 'No Git repository'}</strong><small>{gitInfo?.isRepository ? (gitInfo.isDirty ? 'Working tree has changes' : 'Working tree is clean') : 'Git status is unavailable'}</small></span>
             {gitInfo?.isRepository && <span className={`workspace-context-status${gitInfo.isDirty ? ' is-dirty' : ''}`}>{gitInfo.isDirty ? 'Changed' : 'Clean'}</span>}
           </div>
 
           <button type="button" className="workspace-context-row" disabled={!hasReview} onClick={() => { onOpenReview(recentChanges); setOpen(false) }}>
-            <span className="workspace-context-icon">▣</span>
+            <span className="workspace-context-icon"><FileCode2 size={16} aria-hidden="true" /></span>
             <span className="workspace-context-copy"><strong>Recent agent changes</strong><small>{hasReview ? `${recentChanges.length} file${recentChanges.length === 1 ? '' : 's'} changed in this run` : 'No changes in the current run'}</small></span>
             {hasReview && <span className="workspace-context-diff"><b>+{additions}</b><i>-{deletions}</i></span>}
           </button>
 
           <div className="workspace-context-row is-static">
-            <span className="workspace-context-icon">›_</span>
+            <span className="workspace-context-icon"><Terminal size={16} aria-hidden="true" /></span>
             <span className="workspace-context-copy"><strong>Terminal</strong><small>{terminalCount === 0 ? 'No terminal tabs open' : `${terminalCount} tab${terminalCount === 1 ? '' : 's'} open`}</small></span>
             <span className="workspace-context-status">{terminalCount}</span>
           </div>
 
-          <div className="workspace-context-sources">
-            <div className="workspace-context-sources-heading"><span>Sources</span><span>{uniqueSources.length}</span></div>
-            {uniqueSources.length === 0 ? <p>No files attached to this message.</p> : uniqueSources.slice(0, 3).map((name) => <p key={name} title={name}>▣ {name}</p>)}
-            {uniqueSources.length > 3 && <p className="workspace-context-more">+{uniqueSources.length - 3} more sources</p>}
-          </div>
+          <SessionSources key={chatId} sources={sources} loading={sourceLoading} error={sourceError} onRetry={retrySources} onOpenLibrary={url => {
+            window.history.pushState({}, '', url)
+            window.dispatchEvent(new PopStateEvent('popstate'))
+            setOpen(false)
+          }} />
         </section>
       )}
     </div>