@pheem49/mint 1.17.0 → 1.18.0

package/src/renderer/shared/components/chat/ChatPanel.tsx

@@ -36,18 +36,20 @@ import { SubagentStatusStrip } from '../activity/SubagentStatusStrip'
 import { VirtualChatHistory, type VirtualChatHistoryHandle } from './VirtualChatHistory'
 import type { ArtifactFile } from '../../utils/artifacts'
 import type { AgentProgress, ChatResponse, DiffHunk, FileChange, GitCheckpoint, QueuedPrompt, RuntimeStatus } from '../../types'
-import { shouldShowSessionDivider, formatSessionDividerLabel } from '../../utils/ui'
+import { shouldShowSessionDivider, formatSessionDividerLabel, createTrimmedImagePreview } from '../../utils/ui'
 import { useVoiceInput } from '@/voiceInput'
 import VoicePill from './VoicePill'
 import { useGeminiLiveVoice } from '../../utils/useGeminiLiveVoice'
 import GeminiLiveOverlay from './GeminiLiveOverlay'
 import { isSupportedDocument, SUPPORTED_DOCUMENT_ACCEPT } from '../../utils/documentTypes'
 import ModelSelectorPopover from './ModelSelectorPopover'
+import ChatModeSelector from './ChatModeSelector'
 import GitBranchSelector from '../workspace/GitBranchSelector'
 import WorkspaceSelector from '../workspace/WorkspaceSelector'
 import ToolsPanelToggle from '../workspace/ToolsPanelToggle'
 import { ModsPanel } from '../extensions/ModsPanel'
 import type { ToolSurface } from '../workspace/ToolSurfacePage'
+import { WORKSPACE_PATH_MIME, WORKSPACE_FILE_MIME, WORKSPACE_IMAGE_MIME, isImageFileName, resolveImageToDataUri, formatWorkspaceReference } from '../../utils/workspaceDrag'
 import QueuedMessagesBanner from './QueuedMessagesBanner'
 import '../../css/thinking-status.css'
 import '../../css/slash-choice.css'
@@ -78,7 +80,7 @@ export function ThinkingElapsedMeta() {
   )
 }
 
-const STREAM_MARKDOWN_UPDATE_MS = 120
+const STREAM_MARKDOWN_UPDATE_MS = 32
 
 function useThrottledValue<T>(value: T, intervalMs: number): T {
   const [throttledValue, setThrottledValue] = useState(value)
@@ -150,6 +152,7 @@ interface ChatPanelContract {
   onSelectVideo: (event: ChangeEvent<HTMLInputElement>) => void
   onSelectDocument: (event: ChangeEvent<HTMLInputElement>) => void
   onPasteImage: (clipboardData: DataTransfer) => boolean
+  onAttachImage?: (image: { dataUri: string; previewDataUri?: string; objectUrl?: string; name: string }) => void
   onSetMessage: (message: string) => void
   onSendVoiceMessage: (message: string, audioDataUri?: string | null) => Promise<void>
   onRemoveImage: (idx: number) => void
@@ -191,6 +194,9 @@ interface ChatPanelContract {
   onClearQueuedPrompts?: () => void
   onSteerQueuedPrompt?: (id: string) => void
   onResumeQueue?: () => void
+  onResendFrom?: (fromId: number, newPrompt: string) => Promise<void> | void
+  onSyncHistory?: () => void
+  onReceiveApproval?: (approval: { token: string; approval: Record<string, unknown> }) => void
 }
 
 export type ConversationViewModel = Pick<ChatPanelContract,
@@ -269,6 +275,7 @@ export default function ChatPanel({
   onSelectVideo,
   onSelectDocument,
   onPasteImage,
+  onAttachImage,
   onSetMessage,
   onSendVoiceMessage,
   onRemoveImage,
@@ -306,6 +313,9 @@ export default function ChatPanel({
   onClearQueuedPrompts,
   onSteerQueuedPrompt,
   onResumeQueue,
+  onResendFrom,
+  onSyncHistory,
+  onReceiveApproval,
   } = { ...conversation, ...actions }
   const message = useComposerDraft(initialMessage, actions.subscribeMessage, actions.getMessage)
   const onThinkingExpandedChange = useLatestCallback(handleThinkingExpandedChange)
@@ -380,8 +390,12 @@ export default function ChatPanel({
   })
 
   const openReview = useLatestCallback((title: string, changes: FileChange[]) => {
-    if (onOpenReview) onOpenReview({ id: `review:${Date.now()}`, kind: 'review', title: 'Review', reviewTitle: title, changes })
-    else setReviewPage({ title, changes })
+    if (onOpenReview) {
+      setReviewPage(null)
+      onOpenReview({ id: `review:${Date.now()}`, kind: 'review', title: 'Review', reviewTitle: title, changes })
+    } else {
+      setReviewPage({ title, changes })
+    }
   })
 
   const openAllConversationReview = useLatestCallback(() => {
@@ -691,6 +705,36 @@ export default function ChatPanel({
   const dragCounter = useRef(0)
   const lastDropTimeRef = useRef(0)
 
+  const resizeInput = useCallback((element: HTMLTextAreaElement) => {
+    element.style.height = 'auto'
+    element.style.height = `${Math.min(element.scrollHeight, 120)}px`
+  }, [])
+
+  // Direct file reference insertion into chat input
+  const handleReferenceFile = useCallback((rawPath: string) => {
+    const formatted = formatWorkspaceReference(rawPath, workspacePath).trim()
+    if (!formatted) return
+    const token = `${formatted} `
+    const textarea = textareaRef.current
+    if (!textarea) {
+      onSetMessage(message.trim() ? `${message.trimEnd()} ${token}` : token)
+      return
+    }
+    const start = textarea.selectionStart ?? message.length
+    const end = textarea.selectionEnd ?? message.length
+    const before = message.slice(0, start)
+    const after = message.slice(end)
+    const spacingBefore = before && !before.endsWith(' ') && !before.endsWith('\n') ? ' ' : ''
+    const updated = `${before}${spacingBefore}${token}${after}`
+    onSetMessage(updated)
+    const nextCursor = (before + spacingBefore + token).length
+    requestAnimationFrame(() => {
+      textarea.focus()
+      textarea.setSelectionRange(nextCursor, nextCursor)
+      resizeInput(textarea)
+    })
+  }, [message, onSetMessage, workspacePath, resizeInput])
+
   const handleDragEnter = (e: DragEvent<HTMLElement>) => {
     e.preventDefault()
     if (e.dataTransfer?.types?.includes('Files')) {
@@ -711,6 +755,14 @@ export default function ChatPanel({
 
   const handleDragOver = (e: DragEvent<HTMLElement>) => {
     e.preventDefault()
+    if (
+      e.dataTransfer?.types?.includes(WORKSPACE_PATH_MIME) ||
+      e.dataTransfer?.types?.includes(WORKSPACE_FILE_MIME) ||
+      e.dataTransfer?.types?.includes(WORKSPACE_IMAGE_MIME) ||
+      e.dataTransfer?.types?.includes('application/x-mint-workspace-path')
+    ) {
+      e.dataTransfer.dropEffect = 'copy'
+    }
   }
 
   const handleDrop = (e: DragEvent<HTMLElement>) => {
@@ -719,6 +771,27 @@ export default function ChatPanel({
     dragCounter.current = 0
     setIsDragging(false)
 
+    const wsPath =
+      e.dataTransfer?.getData(WORKSPACE_IMAGE_MIME) ||
+      e.dataTransfer?.getData(WORKSPACE_PATH_MIME) ||
+      e.dataTransfer?.getData('application/x-mint-workspace-path')
+    const plainRef = e.dataTransfer?.getData('text/plain')?.trim() || ''
+    const fileRef =
+      e.dataTransfer?.getData(WORKSPACE_PATH_MIME) ||
+      e.dataTransfer?.getData('application/x-mint-workspace-path') ||
+      (plainRef.startsWith('@') ? plainRef : '')
+    if (wsPath || fileRef) {
+      void tryAttachDroppedImage(e.dataTransfer).then((attached) => {
+        if (!attached) {
+          const raw = fileRef || wsPath
+          if (raw) {
+            handleReferenceFile(raw)
+          }
+        }
+      })
+      return
+    }
+
     const now = Date.now()
     if (now - lastDropTimeRef.current < 250) {
       return
@@ -792,9 +865,31 @@ export default function ChatPanel({
     chatId,
     startSession: startGeminiLiveSession,
     sendAudioChunk: sendGeminiLiveAudioChunk,
-    stopSession: stopGeminiLiveSession
+    stopSession: stopGeminiLiveSession,
+    onTurnSaved: () => {
+      onSyncHistory?.()
+    },
+    onToolActivity: () => {
+      onWorkspaceChanged?.()
+    },
+    onApprovalRequested: (approval) => {
+      onReceiveApproval?.(approval)
+    },
   })
 
+  useEffect(() => {
+    const onTriggerVoice = () => {
+      if (geminiLiveEnabled) {
+        geminiLive.setVoiceMode(true)
+      } else {
+        setVoiceMode(true)
+        void startRecognition()
+      }
+    }
+    window.addEventListener('mint:trigger-voice', onTriggerVoice)
+    return () => window.removeEventListener('mint:trigger-voice', onTriggerVoice)
+  }, [geminiLiveEnabled, geminiLive, setVoiceMode, startRecognition])
+
   const canSubmit = Boolean(message.trim() || imageAttachments.length > 0 || videoAttachments.length > 0 || documentName)
   const sendingImageMarkers = Array.from({ length: sendingImageCount }, (_, index) => `[Image #${index + 1}]`).join(' ')
   const sendingVideoMarkers = Array.from({ length: sendingVideoCount || 0 }, (_, index) => `[Video #${index + 1}]`).join(' ')
@@ -1006,10 +1101,6 @@ export default function ChatPanel({
     historyReadyRef.current = false; submittedDuringSessionRef.current = false; lastAutoSpokenIdRef.current = null
   }, [chatId])
 
-  const resizeInput = (element: HTMLTextAreaElement) => {
-    element.style.height = 'auto'
-    element.style.height = `${Math.min(element.scrollHeight, 120)}px`
-  }
   useEffect(() => {
     return () => {
       void speechPlayerRef.current?.dispose()
@@ -1113,13 +1204,77 @@ export default function ChatPanel({
     if (!trimmed) return
     onSetMessage(message.trim() ? `${message.trimEnd()} ${trimmed} ` : `${trimmed} `)
   }
+
+  const tryAttachDroppedImage = async (dataTransfer: DataTransfer): Promise<boolean> => {
+    if (!onAttachImage) return false
+
+    const rawImage = dataTransfer.getData(WORKSPACE_IMAGE_MIME)
+    let imagePayload: { path?: string; root?: string; url?: string; name?: string } | null = null
+    if (rawImage) {
+      try {
+        imagePayload = JSON.parse(rawImage)
+      } catch {
+        // ignore
+      }
+    }
+
+    const wsPath =
+      imagePayload?.path ||
+      dataTransfer.getData(WORKSPACE_PATH_MIME) ||
+      dataTransfer.getData('application/x-mint-workspace-path')
+    const plainText = dataTransfer.getData('text/plain')
+    const uriList = dataTransfer.getData('text/uri-list')
+    const candidatePath = (wsPath || plainText || uriList || '').replace(/^@/, '').trim()
+
+    const isImg =
+      Boolean(imagePayload) ||
+      isImageFileName(candidatePath) ||
+      candidatePath.startsWith('blob:') ||
+      candidatePath.startsWith('data:image/') ||
+      Boolean(imagePayload?.url)
+    if (!isImg) return false
+
+    const name = imagePayload?.name || candidatePath.split(/[\\/]/).pop()?.split('?')[0] || 'image.png'
+    const root = imagePayload?.root || workspacePath || ''
+    const url =
+      imagePayload?.url ||
+      (candidatePath.startsWith('http') || candidatePath.startsWith('blob:') || candidatePath.startsWith('data:image/')
+        ? candidatePath
+        : '')
+
+    let dataUri = ''
+    if (url) {
+      dataUri = await resolveImageToDataUri(url, root, (p, r) => runtimePlatform.readWorkspaceImage(p, r))
+    }
+    if (!dataUri && candidatePath) {
+      dataUri = await resolveImageToDataUri(candidatePath, root, (p, r) => runtimePlatform.readWorkspaceImage(p, r))
+    }
+
+    if (dataUri) {
+      const previewDataUri = await createTrimmedImagePreview(dataUri).catch(() => dataUri)
+      onAttachImage({ dataUri, previewDataUri, name })
+      textareaRef.current?.focus()
+      return true
+    }
+    return false
+  }
+
   const handleWorkspaceDrop = (event: DragEvent<HTMLElement>) => {
-    const reference =
-      event.dataTransfer.getData('application/x-mint-workspace-path') ||
-      event.dataTransfer.getData('text/plain')
-    if (!reference.trim().startsWith('@')) return
     event.preventDefault()
-    appendWorkspaceReference(reference)
+    const wsPath =
+      event.dataTransfer.getData(WORKSPACE_PATH_MIME) ||
+      event.dataTransfer.getData('application/x-mint-workspace-path')
+    const plainText = event.dataTransfer.getData('text/plain')
+    const reference = wsPath || plainText
+
+    void tryAttachDroppedImage(event.dataTransfer).then((attached) => {
+      if (attached) return
+      if (!reference) return
+      const trimmed = reference.trim()
+      if (wsPath || trimmed.startsWith('@')) {
+        handleReferenceFile(trimmed)
+      }
+    })
   }
   const isEmptyChat = interactions.length === 0 && !sending && !pendingApproval
 
@@ -1157,12 +1312,16 @@ export default function ChatPanel({
               onToggle={toggleActivity}
               pendingApproval={!!pendingApproval}
               chatId={chatId}
+              workspacePath={workspacePath}
+              onReferenceFile={handleReferenceFile}
               onOpenArtifact={openArtifact}
             />
           )}
           <TurnFileChanges
             changes={composerChanges}
             isLive
+            workspacePath={workspacePath}
+            onReferenceFile={handleReferenceFile}
             onOpenArtifact={openArtifact}
             onOpenReview={openAllConversationReview}
           />
@@ -1188,7 +1347,7 @@ export default function ChatPanel({
                 />
               )}
               <div className="message-bubble">
-                <McpToolResults progress={agentProgress} running chatId={chatId} />
+                <McpToolResults progress={agentProgress} running chatId={chatId} mode="artifacts-only" />
                 <ViewedImages progress={agentProgress} chatId={chatId} onOpenArtifact={openArtifact} />
                 <span>
                   {compaction ? (
@@ -1223,7 +1382,7 @@ export default function ChatPanel({
                         type="button"
                         className={`msg-action-btn copy-btn ${copiedId === 'live' ? 'is-copied' : ''}`}
                         onClick={() => handleCopyMessage('live', throttledStreamedReply)}
-                        title={copiedId === 'live' ? 'คัดลอกแล้ว (Copied!)' : 'คัดลอกข้อความ (Copy message)'}
+                        title={copiedId === 'live' ? 'Copied!' : 'Copy message'}
                       >
                         {renderCopyIcon(copiedId === 'live')}
                       </button>
@@ -1281,7 +1440,7 @@ export default function ChatPanel({
               background: 'var(--bg-backdrop)',
               backdropFilter: 'blur(8px)',
               border: '2px dashed var(--accent)',
-              borderRadius: '16px',
+              borderRadius: 'var(--radius-xl, 18px)',
               margin: '12px',
               display: 'flex',
               flexDirection: 'column',
@@ -1404,7 +1563,7 @@ export default function ChatPanel({
       <div className="chat-container" ref={chatContainerRef} onScroll={handleChatScroll} style={{ overflowAnchor: 'none' }}>
         {hasOlder && onLoadOlder && (
           <button type="button" className="load-older-messages" disabled={loadingOlder}
-            style={{ display: 'block', margin: '0 auto 20px', padding: '7px 14px', borderRadius: 8,
+            style={{ display: 'block', margin: '0 auto 20px', padding: '7px 14px', borderRadius: 'var(--radius-md, 10px)',
               border: '1px solid var(--border-color, #3a3a3a)', background: 'var(--surface, #252525)',
               color: 'var(--text-secondary, #c0c0c0)', cursor: loadingOlder ? 'default' : 'pointer' }}
             onClick={async () => {
@@ -1439,13 +1598,18 @@ export default function ChatPanel({
                   interaction={interaction}
                   copiedId={copiedId}
                   onEditMessage={handleEditMessage}
+                  onResendFrom={onResendFrom}
                   speakingText={speakingText}
                   agentActivitySnapshots={agentActivitySnapshots}
                   openActivityIds={openActivityIds}
+                  thinkingExpanded={thinkingExpanded}
+                  onThinkingExpandedChange={onThinkingExpandedChange}
                   handleCopyMessage={handleCopyMessage}
                   speak={speak}
                   toggleActivity={toggleActivity}
                   chatId={chatId}
+                  workspacePath={workspacePath}
+                  onReferenceFile={handleReferenceFile}
                   customProviders={settingsConfig?.customProviders}
                   onOpenArtifact={openArtifact}
                   onOpenReview={openAllConversationReview}
@@ -1519,24 +1683,6 @@ export default function ChatPanel({
             {workspacePath && <GitBranchSelector workspacePath={workspacePath} disabled={sending} onBranchChanged={onWorkspaceChanged} />}
           </div>
         )}
-        <div className="smart-context-bar">
-          <label className={`smart-context-option ${agentMode ? 'is-active' : ''}`}>
-            <span className="toggle-switch">
-              <input type="checkbox" checked={agentMode} onChange={(event) => onSetAgentMode(event.target.checked)} />
-              <span className="slider round" />
-            </span>
-            <span className="smart-context-copy"><span className="smart-context-title">Agent mode</span></span>
-          </label>
-          {onSetPlanMode && (
-            <label className={`smart-context-option ${planMode ? 'is-active' : ''}`} title="Investigate read-only and require plan approval before editing files or running commands">
-              <span className="toggle-switch">
-                <input type="checkbox" checked={Boolean(planMode)} onChange={(event) => onSetPlanMode(event.target.checked)} />
-                <span className="slider round" />
-              </span>
-              <span className="smart-context-copy"><span className="smart-context-title">Plan mode</span></span>
-            </label>
-          )}
-        </div>
         {queuedPrompts && queuedPrompts.length > 0 && (
           <QueuedMessagesBanner
             queuedPrompts={queuedPrompts}
@@ -1559,7 +1705,12 @@ export default function ChatPanel({
             onSubmit(event)
           }}
           onDragOver={(event) => {
-            if (event.dataTransfer.types.includes('application/x-mint-workspace-path')) {
+            if (
+              event.dataTransfer.types.includes(WORKSPACE_PATH_MIME) ||
+              event.dataTransfer.types.includes(WORKSPACE_FILE_MIME) ||
+              event.dataTransfer.types.includes(WORKSPACE_IMAGE_MIME) ||
+              event.dataTransfer.types.includes('application/x-mint-workspace-path')
+            ) {
               event.preventDefault()
               event.dataTransfer.dropEffect = 'copy'
             }
@@ -1664,6 +1815,18 @@ export default function ChatPanel({
               if (historyIndex !== null) setHistoryIndex(null)
             }}
             onKeyDown={handleInputKeyDown}
+            onDragOver={(event) => {
+              if (
+                event.dataTransfer.types.includes(WORKSPACE_PATH_MIME) ||
+                event.dataTransfer.types.includes(WORKSPACE_FILE_MIME) ||
+                event.dataTransfer.types.includes(WORKSPACE_IMAGE_MIME) ||
+                event.dataTransfer.types.includes('application/x-mint-workspace-path') ||
+                event.dataTransfer.types.includes('text/plain')
+              ) {
+                event.preventDefault()
+                event.dataTransfer.dropEffect = 'copy'
+              }
+            }}
             onDrop={handleWorkspaceDrop}
             placeholder="Ask anything, @ to mention, / for actions"
             rows={1}
@@ -1752,22 +1915,31 @@ export default function ChatPanel({
               <path d="M8 22h8M12 18v4M7 10h10M12 5v10" />
             </svg>
           </button>
-          <ModelSelectorPopover
-            activeProvider={status?.activeProvider ?? ''}
-            activeModel={activeModel}
-            availableProviders={status?.availableProviders ?? []}
-            settingsConfig={settingsConfig}
-            dynamicOllamaModels={dynamicOllamaModels}
-            onSelect={(provider, model) => {
-              if (onSelectModelAndProvider) {
-                onSelectModelAndProvider(provider, model)
-              } else {
-                onSetProvider(provider)
-                onSetModel(model)
-              }
-            }}
-            onUpdateSettings={onUpdateSettings}
-          />
+          <div className="chat-composer-pills">
+            <ModelSelectorPopover
+              activeProvider={status?.activeProvider ?? ''}
+              activeModel={activeModel}
+              availableProviders={status?.availableProviders ?? []}
+              settingsConfig={settingsConfig}
+              dynamicOllamaModels={dynamicOllamaModels}
+              onSelect={(provider, model) => {
+                if (onSelectModelAndProvider) {
+                  onSelectModelAndProvider(provider, model)
+                } else {
+                  onSetProvider(provider)
+                  onSetModel(model)
+                }
+              }}
+              onUpdateSettings={onUpdateSettings}
+            />
+            <ChatModeSelector
+              agentMode={agentMode}
+              onSetAgentMode={onSetAgentMode}
+              planMode={planMode}
+              onSetPlanMode={onSetPlanMode}
+              disabled={sending}
+            />
+          </div>
           <VoicePill
             id="voice-input-btn"
             className="composer-voice-pill"
@@ -1887,6 +2059,8 @@ export default function ChatPanel({
           onEndCall={() => geminiLive.setVoiceMode(false)}
           voice={settingsConfig?.geminiLiveVoice || 'Puck'}
           voices={GEMINI_LIVE_VOICES}
+          pendingApproval={pendingApproval}
+          onApproval={onApproval}
           onChangeVoice={async (voiceName) => {
             await onSetGeminiLiveVoice(voiceName)
             geminiLive.restart()

package/src/renderer/shared/components/chat/DiffReviewModal.tsx

@@ -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}
@@ -249,7 +249,7 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                     color: 'var(--status-error-fg)',
                     background: 'var(--status-error-bg)',
                     padding: '1px 6px',
-                    borderRadius: '4px',
+                    borderRadius: 'var(--radius-xs, 6px)',
                   }}
                 >
                   -{deletions}
@@ -262,7 +262,7 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                       color: 'var(--status-warning-fg)',
                       background: 'var(--status-warning-bg)',
                       padding: '1px 6px',
-                      borderRadius: '4px',
+                      borderRadius: 'var(--radius-xs, 6px)',
                       textTransform: 'none',
                     }}
                   >
@@ -533,9 +533,9 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
         >
           <div style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>
             <span>Shortcut: </span>
-            <kbd style={{ background: 'var(--bg-surface-soft)', border: '1px solid var(--border-subtle)', 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: 'var(--bg-surface-soft)', border: '1px solid var(--border-subtle)', 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

@@ -1,7 +1,13 @@
 import React from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { describe, expect, it } from 'vitest'
-import GeminiLiveOverlay from './GeminiLiveOverlay'
+import GeminiLiveOverlay, { resolveLiveOverlayEscape } from './GeminiLiveOverlay'
+import {
+  applyLiveTranscriptFragment,
+  downsampleToPcm16,
+  routeGeminiLiveSideEffects,
+  stopQueuedAudioPlayback,
+} from '../../utils/useGeminiLiveVoice'
 
 const props = {
   userTranscript: '', assistantTranscript: '', isPaused: false,
@@ -21,4 +27,139 @@ describe('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')
+  })
 })
+
+