@pheem49/mint 1.16.0 → 1.18.0

package/src/renderer/shared/components/{CollapsiblePasteInput.tsx → chat/CollapsiblePasteInput.tsx}

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState, type RefObject, type TextareaHTMLAttributes } from 'react'
-import { insertPastedText, pastedTextLabel } from '../utils/pastedText'
-import '../css/collapsed-paste.css'
+import { insertPastedText, pastedTextLabel } from '../../utils/pastedText'
+import '../../css/collapsed-paste.css'
 
 type Props = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'> & {
   value: string

package/src/renderer/shared/components/{DiffReviewModal.tsx → chat/DiffReviewModal.tsx}

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo } from 'react'
-import '../css/management-views.css'
+import '../../css/management-views.css'
 
 export interface DiffReviewModalProps {
   isOpen: boolean
@@ -206,7 +206,7 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
           <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0, flex: 1 }}>
             <div
               className="management-card-icon"
-              style={{ width: 34, height: 34, fontSize: '0.72rem', fontWeight: 700, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'color-mix(in srgb, var(--accent) 15%, transparent)', color: 'var(--interactive-fg)', borderRadius: '6px' }}
+              style={{ width: 34, height: 34, fontSize: '0.72rem', fontWeight: 700, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'color-mix(in srgb, var(--accent) 15%, transparent)', color: 'var(--interactive-fg)', borderRadius: 'var(--radius-sm, 8px)' }}
             >
               DIFF
             </div>
@@ -237,7 +237,7 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                     color: 'var(--interactive-fg)',
                     background: 'color-mix(in srgb, var(--accent) 15%, transparent)',
                     padding: '1px 6px',
-                    borderRadius: '4px',
+                    borderRadius: 'var(--radius-xs, 6px)',
                   }}
                 >
                   +{additions}
@@ -246,10 +246,10 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                   style={{
                     fontSize: '0.75rem',
                     fontWeight: 700,
-                    color: 'var(--status-error, #f87171)',
-                    background: 'var(--hover-delete-bg, rgba(239, 68, 68, 0.15))',
+                    color: 'var(--status-error-fg)',
+                    background: 'var(--status-error-bg)',
                     padding: '1px 6px',
-                    borderRadius: '4px',
+                    borderRadius: 'var(--radius-xs, 6px)',
                   }}
                 >
                   -{deletions}
@@ -259,10 +259,10 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                     style={{
                       fontSize: '0.72rem',
                       fontWeight: 700,
-                      color: '#fbbf24',
-                      background: 'rgba(245, 158, 11, 0.15)',
+                      color: 'var(--status-warning-fg)',
+                      background: 'var(--status-warning-bg)',
                       padding: '1px 6px',
-                      borderRadius: '4px',
+                      borderRadius: 'var(--radius-xs, 6px)',
                       textTransform: 'none',
                     }}
                   >
@@ -308,7 +308,7 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
             padding: 0,
             overflowY: 'auto',
             flex: 1,
-            background: '#090d16',
+            background: 'var(--bg-canvas)',
             fontFamily: 'Consolas, Monaco, "JetBrains Mono", monospace',
             fontSize: '0.8rem',
             lineHeight: 1.5,
@@ -322,11 +322,11 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                   position: 'sticky',
                   top: 0,
                   zIndex: 2,
-                  background: '#0e1526',
+                  background: 'var(--bg-surface-raised)',
                   padding: '6px 12px',
-                  borderBottom: '1px solid rgba(255,255,255,0.08)',
-                  borderRight: '1px solid rgba(255,255,255,0.08)',
-                  color: '#94a3b8',
+                  borderBottom: '1px solid var(--border-subtle)',
+                  borderRight: '1px solid var(--border-subtle)',
+                  color: 'var(--text-muted)',
                   fontWeight: 600,
                   fontSize: '0.75rem',
                 }}
@@ -339,10 +339,10 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                   position: 'sticky',
                   top: 0,
                   zIndex: 2,
-                  background: '#0e1526',
+                  background: 'var(--bg-surface-raised)',
                   padding: '6px 12px',
-                  borderBottom: '1px solid rgba(255,255,255,0.08)',
-                  color: '#94a3b8',
+                  borderBottom: '1px solid var(--border-subtle)',
+                  color: 'var(--text-muted)',
                   fontWeight: 600,
                   fontSize: '0.75rem',
                 }}
@@ -357,13 +357,13 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                       key={idx}
                       style={{
                         gridColumn: '1 / -1',
-                        background: 'rgba(56, 189, 248, 0.08)',
-                        color: '#38bdf8',
+                        background: 'var(--status-info-bg)',
+                        color: 'var(--status-info-fg)',
                         padding: '4px 12px',
                         fontSize: '0.72rem',
                         fontWeight: 600,
-                        borderTop: '1px solid rgba(56, 189, 248, 0.2)',
-                        borderBottom: '1px solid rgba(56, 189, 248, 0.2)',
+                        borderTop: '1px solid var(--status-info-border)',
+                        borderBottom: '1px solid var(--status-info-border)',
                       }}
                     >
                       {row.hunkHeader}
@@ -381,8 +381,8 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                       style={{
                         display: 'flex',
                         borderRight: '1px solid var(--border)',
-                        background: left?.isDel ? 'color-mix(in srgb, var(--status-error, #ef4444) 14%, transparent)' : 'transparent',
-                        borderLeft: left?.isDel ? '3px solid var(--status-error, #ef4444)' : '3px solid transparent',
+                        background: left?.isDel ? 'var(--diff-del-bg)' : 'transparent',
+                        borderLeft: left?.isDel ? '3px solid var(--diff-del-border)' : '3px solid transparent',
                         minHeight: '22px',
                       }}
                     >
@@ -391,7 +391,7 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                           width: '44px',
                           textAlign: 'right',
                           paddingRight: '10px',
-                          color: left?.isDel ? 'var(--status-error, #f87171)' : 'var(--text-muted)',
+                          color: left?.isDel ? 'var(--diff-del-gutter)' : 'var(--text-muted)',
                           userSelect: 'none',
                           flexShrink: 0,
                         }}
@@ -403,7 +403,7 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                           whiteSpace: 'pre-wrap',
                           wordBreak: 'break-all',
                           paddingRight: '8px',
-                          color: left?.isDel ? 'var(--hover-delete, #fca5a5)' : 'var(--text-chat, var(--text-main))',
+                          color: left?.isDel ? 'var(--diff-del-text)' : 'var(--text-chat, var(--text-main))',
                         }}
                       >
                         {left ? left.content : ''}
@@ -414,8 +414,8 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                     <div
                       style={{
                         display: 'flex',
-                        background: right?.isAdd ? 'color-mix(in srgb, var(--accent) 14%, transparent)' : 'transparent',
-                        borderLeft: right?.isAdd ? '3px solid var(--accent)' : '3px solid transparent',
+                        background: right?.isAdd ? 'var(--diff-add-bg)' : 'transparent',
+                        borderLeft: right?.isAdd ? '3px solid var(--diff-add-border)' : '3px solid transparent',
                         minHeight: '22px',
                       }}
                     >
@@ -424,7 +424,7 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                           width: '44px',
                           textAlign: 'right',
                           paddingRight: '10px',
-                          color: right?.isAdd ? 'var(--accent)' : 'var(--text-muted)',
+                          color: right?.isAdd ? 'var(--diff-add-gutter)' : 'var(--text-muted)',
                           userSelect: 'none',
                           flexShrink: 0,
                         }}
@@ -436,7 +436,7 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                           whiteSpace: 'pre-wrap',
                           wordBreak: 'break-all',
                           paddingRight: '8px',
-                          color: right?.isAdd ? 'var(--accent-hover, var(--accent))' : 'var(--text-chat, var(--text-main))',
+                          color: right?.isAdd ? 'var(--diff-add-text)' : 'var(--text-chat, var(--text-main))',
                         }}
                       >
                         {right ? right.content : ''}
@@ -454,13 +454,13 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                     <div
                       key={idx}
                       style={{
-                        background: 'rgba(56, 189, 248, 0.08)',
-                        color: '#38bdf8',
+                        background: 'var(--status-info-bg)',
+                        color: 'var(--status-info-fg)',
                         padding: '4px 12px',
                         fontSize: '0.72rem',
                         fontWeight: 600,
-                        borderTop: '1px solid rgba(56, 189, 248, 0.2)',
-                        borderBottom: '1px solid rgba(56, 189, 248, 0.2)',
+                        borderTop: '1px solid var(--status-info-border)',
+                        borderBottom: '1px solid var(--status-info-border)',
                       }}
                     >
                       {line.content}
@@ -469,7 +469,7 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                 }
                 if (line.type === 'meta') {
                   return (
-                    <div key={idx} style={{ color: '#64748b', padding: '2px 12px', fontWeight: 600 }}>
+                    <div key={idx} style={{ color: 'var(--text-muted)', padding: '2px 12px', fontWeight: 600 }}>
                       {line.content}
                     </div>
                   )
@@ -481,14 +481,14 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                 let prefix = ' '
 
                 if (line.type === 'add') {
-                  bg = 'color-mix(in srgb, var(--accent) 14%, transparent)'
-                  borderL = '3px solid var(--accent)'
-                  textCol = 'var(--text-chat, var(--text-main))'
+                  bg = 'var(--diff-add-bg)'
+                  borderL = '3px solid var(--diff-add-border)'
+                  textCol = 'var(--diff-add-text)'
                   prefix = '+'
                 } else if (line.type === 'del') {
-                  bg = 'color-mix(in srgb, var(--status-error, #ef4444) 14%, transparent)'
-                  borderL = '3px solid var(--status-error, #ef4444)'
-                  textCol = 'var(--text-chat, var(--text-main))'
+                  bg = 'var(--diff-del-bg)'
+                  borderL = '3px solid var(--diff-del-border)'
+                  textCol = 'var(--diff-del-text)'
                   prefix = '-'
                 }
 
@@ -508,7 +508,7 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                     <span style={{ width: '42px', textAlign: 'right', color: 'var(--text-muted)', paddingRight: '8px', userSelect: 'none', flexShrink: 0 }}>
                       {line.newNum || ''}
                     </span>
-                    <span style={{ width: '16px', color: line.type === 'add' ? 'var(--accent)' : line.type === 'del' ? 'var(--status-error, #f87171)' : 'var(--text-muted)', userSelect: 'none' }}>
+                    <span style={{ width: '16px', color: line.type === 'add' ? 'var(--diff-add-gutter)' : line.type === 'del' ? 'var(--diff-del-gutter)' : 'var(--text-muted)', userSelect: 'none' }}>
                       {prefix}
                     </span>
                     <span style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-all', color: textCol }}>
@@ -531,11 +531,11 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
             justifyContent: 'space-between',
           }}
         >
-          <div style={{ fontSize: '0.8rem', color: 'var(--text-muted, #94a3b8)' }}>
+          <div style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>
             <span>Shortcut: </span>
-            <kbd style={{ background: 'rgba(255,255,255,0.1)', padding: '2px 5px', borderRadius: 4, fontSize: '0.72rem' }}>Esc</kbd> Cancel
+            <kbd style={{ background: 'var(--bg-surface-soft)', border: '1px solid var(--border-subtle)', padding: '2px 5px', borderRadius: 'var(--radius-xs, 6px)', fontSize: '0.72rem' }}>Esc</kbd> Cancel
             <span style={{ margin: '0 8px' }}>•</span>
-            <kbd style={{ background: 'rgba(255,255,255,0.1)', padding: '2px 5px', borderRadius: 4, fontSize: '0.72rem' }}>Cmd/Ctrl+Enter</kbd> Approve
+            <kbd style={{ background: 'var(--bg-surface-soft)', border: '1px solid var(--border-subtle)', padding: '2px 5px', borderRadius: 'var(--radius-xs, 6px)', fontSize: '0.72rem' }}>Cmd/Ctrl+Enter</kbd> Approve
           </div>
 
           <div style={{ display: 'flex', gap: 10 }}>

package/src/renderer/shared/components/chat/GeminiLiveOverlay.test.tsx

@@ -0,0 +1,165 @@
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import GeminiLiveOverlay, { resolveLiveOverlayEscape } from './GeminiLiveOverlay'
+import {
+  applyLiveTranscriptFragment,
+  downsampleToPcm16,
+  routeGeminiLiveSideEffects,
+  stopQueuedAudioPlayback,
+} from '../../utils/useGeminiLiveVoice'
+
+const props = {
+  userTranscript: '', assistantTranscript: '', isPaused: false,
+  onTogglePause() {}, onEndCall() {}, voice: 'Puck', voices: ['Puck', 'Kore'], onChangeVoice() {},
+}
+
+describe('Live conversation', () => {
+  it('shows connection progress before a microphone session exists', () => {
+    const html = renderToStaticMarkup(<GeminiLiveOverlay {...props} status={'connecting' as any} />)
+    expect(html).toContain('Connecting')
+    expect(html).not.toContain('Say something to get started')
+  })
+  it('exposes named call controls and spoken conversation separately from the decorative orb', () => {
+    const html = renderToStaticMarkup(<GeminiLiveOverlay {...props} status="listening" userTranscript="สวัสดี" assistantTranscript="Hello" />)
+    expect(html).toContain('aria-label="Pause microphone"')
+    expect(html).toContain('aria-label="End Live conversation"')
+    expect(html).toContain('สวัสดี')
+    expect(html).toContain('Hello')
+  })
+  it('stops and disconnects all queued audio sources when interrupted', () => {
+    let stopped1 = false, disconnected1 = false
+    let stopped2 = false, disconnected2 = false
+    const sources = new Set<any>([
+      { stop() { stopped1 = true }, disconnect() { disconnected1 = true } },
+      { stop() { stopped2 = true }, disconnect() { disconnected2 = true } },
+    ])
+    const nextPlaybackTimeRef = { current: 12.5 }
+    const speakingTimeoutRef = { current: null as number | null }
+    let speaking = true
+
+    stopQueuedAudioPlayback(sources, nextPlaybackTimeRef, speakingTimeoutRef, (val) => { speaking = val })
+
+    expect(stopped1).toBe(true)
+    expect(disconnected1).toBe(true)
+    expect(stopped2).toBe(true)
+    expect(disconnected2).toBe(true)
+    expect(sources.size).toBe(0)
+    expect(nextPlaybackTimeRef.current).toBe(0)
+    expect(speaking).toBe(false)
+  })
+  it('renders an inline ApprovalCard inside the Live overlay when a voice tool requests approval', () => {
+    const html = renderToStaticMarkup(
+      <GeminiLiveOverlay
+        {...props}
+        status="thinking"
+        pendingApproval={{
+          token: 'tok-1',
+          approval: {
+            RunShell: {
+              command: 'cargo test --workspace',
+              mode: 'workspace-write',
+              background: false,
+            },
+          },
+        }}
+        onApproval={() => {}}
+      />
+    )
+    expect(html).toContain('cargo test --workspace')
+    expect(html).toContain('Allow once')
+    expect(html).toContain('Reject')
+  })
+  it('routes turn persistence, tool activity, and approval requests from Gemini Live events', () => {
+    let turnsSaved = 0
+    let toolActivities = 0
+    const approvals: Array<{ token: string; approval: Record<string, unknown> }> = []
+    const callbacks = {
+      onTurnSaved: () => { turnsSaved += 1 },
+      onToolActivity: () => { toolActivities += 1 },
+      onApprovalRequested: (payload: { token: string; approval: Record<string, unknown> }) => {
+        approvals.push(payload)
+      },
+    }
+
+    routeGeminiLiveSideEffects({ type: 'turnComplete' }, callbacks)
+    expect(turnsSaved).toBe(1)
+
+    routeGeminiLiveSideEffects({ type: 'interrupted' }, callbacks)
+    expect(turnsSaved).toBe(2)
+
+    routeGeminiLiveSideEffects({ type: 'closed' }, callbacks)
+    expect(turnsSaved).toBe(3)
+
+    routeGeminiLiveSideEffects(
+      { type: 'toolStatus', action: 'read_file', input: { path: 'README.md' }, result: 'ok' },
+      callbacks,
+    )
+    expect(toolActivities).toBe(1)
+
+    routeGeminiLiveSideEffects(
+      {
+        type: 'approvalRequested',
+        token: 'tok-live-99',
+        approval: { RunShell: { command: 'ls', mode: 'read-only', background: false } },
+      },
+      callbacks,
+    )
+    expect(approvals).toEqual([
+      {
+        token: 'tok-live-99',
+        approval: { RunShell: { command: 'ls', mode: 'read-only', background: false } },
+      },
+    ])
+  })
+  it('downsamples mic audio to 16kHz PCM16 with boxcar anti-aliasing instead of nearest-neighbor aliasing', () => {
+    // 1. Direct 16kHz -> 16kHz conversion with clamping
+    const direct = downsampleToPcm16(new Float32Array([0, 0.5, -0.5, 1.5, -1.5]), 16000, 16000)
+    expect(Array.from(direct)).toEqual([0, 16384, -16384, 32767, -32768])
+
+    // 2. 48kHz -> 16kHz (ratio = 3): high-frequency alternating [1.0, -1.0, 0.0] averages to 0
+    // (nearest-neighbor would alias to +32767!), while steady [0.5, 0.5, 0.5] averages to 16384.
+    const antiAliased = downsampleToPcm16(
+      new Float32Array([1.0, -1.0, 0.0, 0.5, 0.5, 0.5]),
+      48000,
+      16000,
+    )
+    expect(Array.from(antiAliased)).toEqual([0, 16384])
+
+    // 3. Fractional 44.1kHz -> 16kHz (ratio = 2.75625) preserves DC level accurately
+    const dc44k = new Float32Array(441).fill(0.25)
+    const resampled = downsampleToPcm16(dc44k, 44100, 16000)
+    expect(resampled.length).toBe(160)
+    expect(resampled.every((sample) => Math.abs(sample - 8192) <= 1)).toBe(true)
+  })
+  it('accumulates interleaved user and assistant transcript fragments within a turn without wiping either line', () => {
+    const state = {
+      userTranscript: '',
+      assistantTranscript: '',
+      userFresh: true,
+      assistantFresh: true,
+    }
+    // User starts speaking, assistant starts replying while final user fragment arrives
+    applyLiveTranscriptFragment(state, 'user', 'ช่วยดู ')
+    applyLiveTranscriptFragment(state, 'assistant', 'ได้ครับ ')
+    applyLiveTranscriptFragment(state, 'user', 'ไฟล์ README หน่อย')
+    applyLiveTranscriptFragment(state, 'assistant', 'กำลังอ่านไฟล์ให้ครับ')
+
+    expect(state.userTranscript).toBe('ช่วยดู ไฟล์ README หน่อย')
+    expect(state.assistantTranscript).toBe('ได้ครับ กำลังอ่านไฟล์ให้ครับ')
+
+    // After turnComplete (resetting fresh flags), the next turn starts clean lines
+    state.userFresh = true
+    state.assistantFresh = true
+    applyLiveTranscriptFragment(state, 'user', 'ขอบคุณครับ')
+    expect(state.userTranscript).toBe('ขอบคุณครับ')
+    expect(state.assistantTranscript).toBe('ได้ครับ กำลังอ่านไฟล์ให้ครับ')
+  })
+  it('guards Escape key in GeminiLiveOverlay when voice picker or pending approval is active', () => {
+    expect(resolveLiveOverlayEscape({ voicePickerOpen: true, hasPendingApproval: false })).toBe('close_voice_picker')
+    expect(resolveLiveOverlayEscape({ voicePickerOpen: false, hasPendingApproval: true })).toBe('ignore')
+    expect(resolveLiveOverlayEscape({ voicePickerOpen: false, hasPendingApproval: false })).toBe('end_call')
+  })
+})
+
+

package/src/renderer/shared/components/{GeminiLiveOverlay.tsx → chat/GeminiLiveOverlay.tsx}

@@ -1,8 +1,9 @@
 import { useEffect, useRef, useState, type RefObject } from 'react'
 import { createPortal } from 'react-dom'
 import { Mic, MicOff, PhoneOff, Volume2 } from 'lucide-react'
-import { VoicePoweredOrb } from './ui/voice-powered-orb'
-import { Button } from './ui/button'
+import { VoicePoweredOrb } from '../ui/voice-powered-orb'
+import { Button } from '../ui/button'
+import { ApprovalCard } from './ApprovalCard'
 import './GeminiLiveOverlay.css'
 
 export interface GeminiLiveOverlayProps {
@@ -16,6 +17,8 @@ export interface GeminiLiveOverlayProps {
   voices: readonly string[]
   onChangeVoice: (voice: string) => void
   analyserRef?: RefObject<AnalyserNode | null>
+  pendingApproval?: any | null
+  onApproval?: (approved: boolean, autoApprove?: boolean, answer?: string) => void
 }
 const STATUS_LABEL: Record<GeminiLiveOverlayProps['status'], string> = {
   connecting: 'Connecting', listening: 'Listening', speaking: 'Speaking',
@@ -30,14 +33,27 @@ const STATUS_HINT: Record<GeminiLiveOverlayProps['status'], string> = {
   error: 'End this call and try again when you’re ready.',
 }
 
+export function resolveLiveOverlayEscape(state: {
+  voicePickerOpen: boolean
+  hasPendingApproval: boolean
+}): 'close_voice_picker' | 'ignore' | 'end_call' {
+  if (state.voicePickerOpen) return 'close_voice_picker'
+  if (state.hasPendingApproval) return 'ignore'
+  return 'end_call'
+}
+
 export default function GeminiLiveOverlay({
   status, userTranscript, assistantTranscript, isPaused, onTogglePause, onEndCall,
-  voice, voices, onChangeVoice, analyserRef,
+  voice, voices, onChangeVoice, analyserRef, pendingApproval, onApproval,
 }: GeminiLiveOverlayProps) {
   const [voicePickerOpen, setVoicePickerOpen] = useState(false)
   const dialogRef = useRef<HTMLDivElement>(null)
   const endCall = useRef(onEndCall)
   endCall.current = onEndCall
+  const voicePickerOpenRef = useRef(voicePickerOpen)
+  voicePickerOpenRef.current = voicePickerOpen
+  const hasPendingApprovalRef = useRef(Boolean(pendingApproval && onApproval))
+  hasPendingApprovalRef.current = Boolean(pendingApproval && onApproval)
   // The decorative orb must not own a microphone in this call surface.
   const emptyAnalyser = useRef<AnalyserNode | null>(null)
   useEffect(() => {
@@ -47,9 +63,26 @@ export default function GeminiLiveOverlay({
     const dialog = dialogRef.current!
     dialog.querySelector<HTMLButtonElement>('[data-call-control]:not(:disabled), [aria-label="End Live conversation"]')?.focus()
     const onKey = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') { event.preventDefault(); endCall.current(); return }
+      if (event.key === 'Escape') {
+        const action = resolveLiveOverlayEscape({
+          voicePickerOpen: voicePickerOpenRef.current,
+          hasPendingApproval: hasPendingApprovalRef.current,
+        })
+        if (action === 'close_voice_picker') {
+          event.preventDefault()
+          setVoicePickerOpen(false)
+        } else if (action === 'end_call') {
+          event.preventDefault()
+          endCall.current()
+        }
+        return
+      }
       if (event.key !== 'Tab') return
-      const controls = Array.from(dialog.querySelectorAll<HTMLElement>('button:not(:disabled), [tabindex="0"]'))
+      const controls = Array.from(
+        dialog.querySelectorAll<HTMLElement>(
+          'button:not(:disabled), input:not(:disabled), textarea:not(:disabled), [tabindex="0"]',
+        ),
+      )
       const first = controls[0], last = controls[controls.length - 1]
       if (event.shiftKey && (document.activeElement === first || !dialog.contains(document.activeElement))) {
         event.preventDefault(); last?.focus()
@@ -85,6 +118,15 @@ export default function GeminiLiveOverlay({
             {assistantTranscript && <p className="gemini-live-transcript-line"><span className="gemini-live-transcript-speaker">Mint</span>{assistantTranscript}</p>}
           </> : <p className="live-orb-empty">{status === 'connecting' ? 'Your conversation will appear here.' : status === 'error' ? 'No conversation yet.' : 'Say something to get started…'}</p>}
         </div>
+        {pendingApproval && onApproval && (
+          <div className="gemini-live-approval" style={{ width: '100%', textAlign: 'left' }}>
+            <ApprovalCard
+              key={pendingApproval.id || JSON.stringify(pendingApproval)}
+              pendingApproval={pendingApproval}
+              onApproval={onApproval}
+            />
+          </div>
+        )}
         <div className="gemini-live-voice-picker">
           <Button type="button" variant="ghost" className="gemini-live-voice-btn" aria-label="Change voice" aria-expanded={voicePickerOpen} aria-haspopup="listbox" onClick={() => setVoicePickerOpen(open => !open)}>
             <Volume2 size={16} aria-hidden="true" /><span>{voice}</span>

package/src/renderer/shared/components/{ModelSelectorPopover.tsx → chat/ModelSelectorPopover.tsx}

@@ -1,8 +1,8 @@
 import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'
 import { useProviderModels } from '@/hooks/useProviderModels'
-import { catalogPlatform } from '../platform'
-import { HF_MODELS, getModelMetadata, isFreeModel, OPENROUTER_POPULAR_MODELS } from '../constants/models'
-import type { CustomProviderConfig } from '../types'
+import { catalogPlatform } from '../../platform'
+import { HF_MODELS, getModelMetadata, hasNativeThinkingSupport, isFreeModel, OPENROUTER_POPULAR_MODELS } from '../../constants/models'
+import type { CustomProviderConfig } from '../../types'
 import anthropicLogo from '@lobehub/icons-static-svg/icons/anthropic.svg?url'
 import deepseekLogo from '@lobehub/icons-static-svg/icons/deepseek-color.svg?url'
 import geminiLogo from '@lobehub/icons-static-svg/icons/gemini-color.svg?url'
@@ -427,17 +427,28 @@ export default function ModelSelectorPopover({
   // Helper to resolve a model's thinking status
   const getThinkingConfig = useCallback((model: string, provider: string) => {
     const meta = getModelMetadata(model, provider)
+    const hasNative = hasNativeThinkingSupport(model, provider)
+    if (!meta.supportsThinking) {
+      return {
+        supported: false,
+        hasNative: false,
+        enabled: false,
+        effort: 'medium',
+      }
+    }
     const override = modelThinkingOverrides[model]
     if (override) {
       return {
-        supported: meta.supportsThinking,
+        supported: true,
+        hasNative,
         enabled: override.enabled ?? true,
         effort: (override.effort || 'medium').toLowerCase(),
       }
     }
     return {
-      supported: meta.supportsThinking,
-      enabled: meta.supportsThinking ? (settingsConfig?.thinkingEnabled ?? true) : false,
+      supported: true,
+      hasNative,
+      enabled: hasNative ? (settingsConfig?.thinkingEnabled ?? true) : false,
       effort: (settingsConfig?.thinkingEffort || 'medium').toLowerCase(),
     }
   }, [modelThinkingOverrides, settingsConfig?.thinkingEnabled, settingsConfig?.thinkingEffort])
@@ -567,7 +578,7 @@ export default function ModelSelectorPopover({
   }, [currentInspected])
 
   const inspectedThinking = useMemo(() => {
-    if (!currentInspected) return { supported: false, enabled: false, effort: 'medium' }
+    if (!currentInspected) return { supported: false, hasNative: false, enabled: false, effort: 'medium' }
     return getThinkingConfig(currentInspected.model, currentInspected.providerId)
   }, [currentInspected, getThinkingConfig])
 
@@ -857,9 +868,12 @@ export default function ModelSelectorPopover({
                   <button
                     type="button"
                     role="switch"
+                    disabled={!inspectedThinking.supported}
                     aria-checked={inspectedThinking.enabled}
                     className={`model-detail-switch ${inspectedThinking.enabled ? 'checked' : ''}`}
+                    style={!inspectedThinking.supported ? { opacity: 0.45, cursor: 'not-allowed' } : undefined}
                     onClick={() => {
+                      if (!inspectedThinking.supported) return
                       persistThinking(
                         currentInspected.model,
                         !inspectedThinking.enabled,
@@ -867,7 +881,9 @@ export default function ModelSelectorPopover({
                       )
                     }}
                     title={
-                      inspectedThinking.enabled
+                      !inspectedThinking.supported
+                        ? 'Thinking is not available for non-text models'
+                        : inspectedThinking.enabled
                         ? 'Disable thinking'
                         : 'Enable thinking'
                     }
@@ -876,16 +892,28 @@ export default function ModelSelectorPopover({
                   </button>
                 </div>
 
-                {!inspectedThinking.supported && (
-                  <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)'}
-                  </div>
-                )}
+                <div
+                  className="model-unsupported-note"
+                  style={{
+                    color:
+                      inspectedThinking.supported && inspectedThinking.enabled
+                        ? 'var(--interactive-fg)'
+                        : undefined,
+                  }}
+                >
+                  {!inspectedThinking.supported
+                    ? 'Non-text model (image/audio/embedding) — Thinking is not applicable'
+                    : inspectedThinking.enabled
+                    ? inspectedThinking.hasNative
+                      ? 'Native Reasoning API active'
+                      : 'Prompted Chain-of-Thought (<think>) active'
+                    : inspectedThinking.hasNative
+                    ? 'Supports Native Reasoning API'
+                    : 'Supports Prompted Chain-of-Thought (<think>)'}
+                </div>
 
                 {/* Effort Section (visible when Thinking is ON) */}
-                {inspectedThinking.enabled && (
+                {inspectedThinking.supported && inspectedThinking.enabled && (
                   <div className="model-effort-section">
                     <div className="model-detail-section-title">Effort</div>
                     <div className="model-effort-list">