@pheem49/mint 1.6.3 → 1.7.0

package/src/renderer/src-web/components/ChatPanel.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState, Fragment, type ChangeEvent, type ClipboardEvent, type FormEvent, type KeyboardEvent, type RefObject, type DragEvent } from 'react'
+import { hasAgentToolActivity, thoughtsFrom } from '../agentProgress'
 import {
   type AgentProgress,
   type ChatResponse,
@@ -260,6 +261,64 @@ function renderApprovalDetails(approval: any): ApprovalDetails {
   return { title: 'Unknown Action', body: JSON.stringify(approval, null, 2), reason: 'Requires approval to proceed.', isDangerous: false }
 }
 
+function renderDiff(diffText: string) {
+  if (!diffText) return null
+  const lines = diffText.split('\n')
+  return (
+    <div style={{ 
+      background: '#0b0f19', 
+      borderRadius: '6px', 
+      padding: '8px', 
+      border: '1px solid rgba(255, 255, 255, 0.08)', 
+      overflowX: 'auto', 
+      maxHeight: '400px',
+      fontFamily: 'monospace',
+      fontSize: '0.74rem',
+      lineHeight: '1.4',
+    }}>
+      {lines.map((line, idx) => {
+        let style: any = {
+          whiteSpace: 'pre-wrap',
+          padding: '2px 6px',
+        }
+        
+        if (line.startsWith('@@') || line.startsWith('---') || line.startsWith('+++')) {
+          style = {
+            ...style,
+            color: '#64748b',
+            fontWeight: 'bold',
+          }
+        } else if (line.startsWith('+')) {
+          style = {
+            ...style,
+            background: 'rgba(16, 185, 129, 0.12)',
+            borderLeft: '3px solid #10b981',
+            color: '#a7f3d0'
+          }
+        } else if (line.startsWith('-')) {
+          style = {
+            ...style,
+            background: 'rgba(239, 68, 68, 0.12)',
+            borderLeft: '3px solid #ef4444',
+            color: '#fca5a5'
+          }
+        } else {
+          style = {
+            ...style,
+            color: '#e2e8f0',
+          }
+        }
+        
+        return (
+          <div key={idx} style={style}>
+            {line}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
 interface ChatPanelProps {
   interactions: any[]
   sending: boolean
@@ -269,6 +328,8 @@ interface ChatPanelProps {
   streamedResponse: ChatResponse | null
   agentProgress: AgentProgress[]
   agentActivitySnapshots: Record<string, AgentProgress[]>
+  thinkingExpanded: Record<string, boolean>
+  onThinkingExpandedChange: (key: string, open: boolean) => void
   message: string
   imageAttachments: Array<{ dataUri: string; name: string; previewDataUri?: string }>
   documentName: string
@@ -298,55 +359,414 @@ interface ChatPanelProps {
   onSetModel: (model: string) => void
 }
 
+function ChatCodeBlock({ code, language }: { code: string; language: string; key?: any }) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch (err) {
+      console.error('Failed to copy code: ', err)
+    }
+  }
+
+  const handleDownload = () => {
+    try {
+      const blob = new Blob([code], { type: 'text/plain;charset=utf-8' })
+      const url = URL.createObjectURL(blob)
+      const link = document.createElement('a')
+      link.href = url
+      link.download = `code.${language === 'plaintext' ? 'txt' : language}`
+      link.click()
+      URL.revokeObjectURL(url)
+    } catch (err) {
+      console.error('Failed to download code: ', err)
+    }
+  }
+
+  const displayLang = language.charAt(0).toUpperCase() + language.slice(1).toLowerCase()
+
+  return (
+    <div className="chat-code-block-container" style={{ whiteSpace: 'normal' }}>
+      <div className="chat-code-block-header">
+        <span className="chat-code-block-lang">{displayLang}</span>
+        <div className="chat-code-block-actions">
+          <button type="button" onClick={handleDownload} title="Download code" className="chat-code-action-btn">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+              <polyline points="7 10 12 15 17 10" />
+              <line x1="12" y1="15" x2="12" y2="3" />
+            </svg>
+          </button>
+          <button type="button" onClick={handleCopy} title="Copy code" className="chat-code-action-btn">
+            {copied ? (
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+            ) : (
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+              </svg>
+            )}
+          </button>
+        </div>
+      </div>
+      <pre className="chat-code-block-body">
+        <code>{code}</code>
+      </pre>
+    </div>
+  )
+}
+
+const isTableLine = (line: string): boolean => {
+  const trimmed = line.trim()
+  return trimmed.startsWith('|') && trimmed.endsWith('|') && trimmed.length > 1
+}
+
 function renderFormattedMessage(text: string) {
   const displayText = readableAssistantText(text)
   if (!displayText) return null
-  
-  const lines = displayText.split('\n')
-  return lines.map((line, lineIndex) => {
-    const headerMatch = line.match(/^(#{1,6})\s+(.*)$/)
-    
-    const formatInline = (str: string) => {
-      const parts = str.split(/\*\*([\s\S]*?)\*\*/g)
-      return parts.map((part, partIndex) => {
-        if (partIndex % 2 === 1) {
+
+  const formatInline = (str: string) => {
+    const codeParts = str.split(/`([\s\S]*?)`/g)
+    return codeParts.map((codePart, codeIndex) => {
+      if (codeIndex % 2 === 1) {
+        return (
+          <code key={`code-${codeIndex}`} className="chat-inline-code">
+            {codePart}
+          </code>
+        )
+      }
+      const boldParts = codePart.split(/\*\*([\s\S]*?)\*\*/g)
+      return boldParts.map((boldPart, boldIndex) => {
+        if (boldIndex % 2 === 1) {
           return (
-            <strong key={partIndex} className="chat-bold-highlight">
-              {part}
+            <strong key={`bold-${boldIndex}`} className="chat-bold-highlight">
+              {boldPart}
             </strong>
           )
         }
-        return part
+        return boldPart
       })
+    })
+  }
+
+  const renderHtmlTable = (tableLines: string[], key: string) => {
+    const rows: string[][] = []
+    for (const line of tableLines) {
+      const trimmed = line.trim()
+      if (!trimmed) continue
+      const content = trimmed.slice(1, -1)
+      const contentEscaped = content.replace(/\\\|/g, '\u0000')
+      const cols = contentEscaped.split('|').map(s => s.replace(/\u0000/g, '|').trim())
+      rows.push(cols)
     }
 
-    if (headerMatch) {
-      const level = headerMatch[1].length
-      const content = headerMatch[2]
-      
-      const style = {
-        fontWeight: 'bold',
-        display: 'block',
-        marginTop: level === 1 ? '16px' : level === 2 ? '14px' : '10px',
-        marginBottom: '6px',
-        fontSize: level === 1 ? '1.25em' : level === 2 ? '1.15em' : '1.05em',
-        color: 'var(--text-main)'
+    if (rows.length === 0) return null
+
+    let hasSeparator = false
+    let separatorIdx = -1
+    for (let i = 0; i < rows.length; i++) {
+      const row = rows[i]
+      if (row.length > 0 && row.every(col => /^[-\s:]+$/.test(col))) {
+        hasSeparator = true
+        separatorIdx = i
+        break
+      }
+    }
+
+    let headerRow: string[] | null = null
+    const dataRows: string[][] = []
+
+    if (hasSeparator) {
+      if (separatorIdx > 0) {
+        headerRow = rows[separatorIdx - 1]
+        for (let i = 0; i < rows.length; i++) {
+          if (i !== separatorIdx && i !== separatorIdx - 1) {
+            dataRows.push(rows[i])
+          }
+        }
+      } else {
+        for (let i = 0; i < rows.length; i++) {
+          if (i !== separatorIdx) {
+            dataRows.push(rows[i])
+          }
+        }
+      }
+    } else {
+      headerRow = rows[0]
+      for (let i = 1; i < rows.length; i++) {
+        dataRows.push(rows[i])
       }
-      
-      return (
-        <span key={lineIndex} style={style}>
-          {formatInline(content)}
-        </span>
-      )
     }
 
     return (
-      <Fragment key={lineIndex}>
-        {formatInline(line)}
-        {lineIndex < lines.length - 1 && '\n'}
-      </Fragment>
+      <div key={key} className="chat-table-container" style={{
+        overflowX: 'auto',
+        margin: '14px 0',
+        width: '100%',
+        borderRadius: '8px',
+        border: '1px solid rgba(255, 255, 255, 0.12)',
+        background: 'rgba(30, 41, 59, 0.35)',
+        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+      }}>
+        <table className="chat-table" style={{
+          width: '100%',
+          borderCollapse: 'collapse',
+          fontSize: '0.86rem',
+          textAlign: 'left',
+          lineHeight: '1.5',
+        }}>
+          {headerRow && (
+            <thead>
+              <tr style={{
+                background: 'rgba(255, 255, 255, 0.04)',
+                borderBottom: '2px solid rgba(255, 255, 255, 0.15)',
+              }}>
+                {headerRow.map((col, idx) => (
+                  <th key={`th-${idx}`} style={{
+                    padding: '12px 16px',
+                    fontWeight: 700,
+                    color: 'var(--accent, #38bdf8)',
+                    fontFamily: 'ui-sans-serif, system-ui, sans-serif',
+                  }}>
+                    {formatInline(col)}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+          )}
+          <tbody>
+            {dataRows.map((row, rIdx) => (
+              <tr key={`tr-${rIdx}`} style={{
+                background: rIdx % 2 === 1 ? 'rgba(255, 255, 255, 0.015)' : 'transparent',
+                borderBottom: rIdx < dataRows.length - 1 ? '1px solid rgba(255, 255, 255, 0.08)' : 'none',
+              }}>
+                {row.map((col, cIdx) => (
+                  <td key={`td-${cIdx}`} style={{
+                    padding: '12px 16px',
+                    color: 'var(--text-main, #e2e8f0)',
+                  }}>
+                    {formatInline(col)}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
     )
-  })
+  }
+
+  const lines = displayText.split('\n')
+  const items: any[] = []
+
+  let inCodeBlock = false
+  let codeBlockLang = ''
+  let codeBlockLines: string[] = []
+
+  let inTable = false
+  let tableLines: string[] = []
+
+  const flushTable = (index: number) => {
+    if (tableLines.length > 0) {
+      items.push(renderHtmlTable(tableLines, `table-${index}`))
+      tableLines = []
+      inTable = false
+    }
+  }
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+
+    if (line.trim().startsWith('```')) {
+      if (inTable) {
+        flushTable(i)
+      }
+      if (inCodeBlock) {
+        const codeText = codeBlockLines.join('\n')
+        items.push(
+          <ChatCodeBlock
+            key={`code-block-${i}`}
+            code={codeText}
+            language={codeBlockLang}
+          />
+        )
+        inCodeBlock = false
+        codeBlockLines = []
+      } else {
+        inCodeBlock = true
+        codeBlockLang = line.trim().slice(3).trim() || 'plaintext'
+      }
+      continue
+    }
+
+    if (inCodeBlock) {
+      codeBlockLines.push(line)
+      continue
+    }
+
+    if (isTableLine(line)) {
+      inTable = true
+      tableLines.push(line)
+    } else {
+      if (inTable) {
+        flushTable(i)
+      }
+
+      const headerMatch = line.match(/^(#{1,6})\s+(.*)$/)
+      if (headerMatch) {
+        const level = headerMatch[1].length
+        const content = headerMatch[2]
+
+        const style = {
+          fontWeight: 'bold',
+          display: 'block',
+          marginTop: level === 1 ? '16px' : level === 2 ? '14px' : '10px',
+          marginBottom: '6px',
+          fontSize: level === 1 ? '1.25em' : level === 2 ? '1.15em' : '1.05em',
+          color: 'var(--text-main)',
+        }
+
+        items.push(
+          <span key={`line-${i}`} style={style}>
+            {formatInline(content)}
+          </span>
+        )
+      } else {
+        const listMatch = line.match(/^(\s*)([-*+])\s+(.*)$/)
+        if (listMatch) {
+          const indent = listMatch[1]
+          const content = listMatch[3]
+          items.push(
+            <Fragment key={`line-${i}`}>
+              {indent}• {formatInline(content)}
+              {i < lines.length - 1 && '\n'}
+            </Fragment>
+          )
+        } else {
+          items.push(
+            <Fragment key={`line-${i}`}>
+              {formatInline(line)}
+              {i < lines.length - 1 && '\n'}
+            </Fragment>
+          )
+        }
+      }
+    }
+  }
+
+  if (inTable) {
+    flushTable(lines.length)
+  }
+
+  if (inCodeBlock && codeBlockLines.length > 0) {
+    const codeText = codeBlockLines.join('\n')
+    items.push(
+      <ChatCodeBlock
+        key={`code-block-end`}
+        code={codeText}
+        language={codeBlockLang}
+      />
+    )
+  }
+
+  return items
+}
+
+const THINKING_LABELS = {
+  live: 'Thinking…',
+  completed: (count: number) => `Thinking process (${count} steps)`,
+  step: (index: number) => `Step ${index}`,
+  emptyHint: 'Model didn\'t send thinking steps this time',
+} as const
+
+function ThinkingBlock({
+  thoughts,
+  isLive = false,
+  blockKey,
+  expanded,
+  onExpandedChange,
+  showEmptyHint = false,
+}: {
+  thoughts: string[]
+  isLive?: boolean
+  blockKey: string
+  expanded?: boolean
+  onExpandedChange?: (key: string, open: boolean) => void
+  showEmptyHint?: boolean
+}) {
+  const contentRef = useRef<HTMLDivElement>(null)
+  const isControlled = expanded !== undefined && Boolean(onExpandedChange)
+  const [localOpen, setLocalOpen] = useState(isLive)
+  const isOpen = isControlled ? Boolean(expanded) : localOpen
+
+  const setOpen = (open: boolean) => {
+    if (isControlled && onExpandedChange) onExpandedChange(blockKey, open)
+    else setLocalOpen(open)
+  }
+
+  useEffect(() => {
+    if (isLive && !isControlled) setLocalOpen(true)
+  }, [isLive, isControlled])
+
+  useEffect(() => {
+    if (!isLive || !isOpen || !contentRef.current) return
+    contentRef.current.scrollTop = contentRef.current.scrollHeight
+  }, [thoughts, isLive, isOpen])
+
+  if (thoughts.length === 0 && !showEmptyHint) return null
+
+  if (thoughts.length === 0) {
+    return (
+      <div className="thinking-block thinking-block-empty-state" data-live={isLive ? 'true' : 'false'}>
+        <span className="thinking-block-empty">{THINKING_LABELS.emptyHint}</span>
+      </div>
+    )
+  }
+
+  return (
+    <div className={`thinking-block${isLive ? ' is-live' : ''}`}>
+      <button
+        type="button"
+        className="thinking-block-header"
+        onClick={() => setOpen(!isOpen)}
+        aria-expanded={isOpen}
+      >
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
+          <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+          <line x1="12" y1="17" x2="12.01" y2="17" />
+          <circle cx="12" cy="12" r="10" />
+        </svg>
+        <span className="thinking-block-label">
+          {isLive ? THINKING_LABELS.live : THINKING_LABELS.completed(thoughts.length)}
+        </span>
+        {isLive && <span className="thinking-block-live-dot" aria-hidden="true" />}
+        <span className={`thinking-block-chevron${isOpen ? ' is-open' : ''}`} aria-hidden="true">
+          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+            <polyline points="9 18 15 12 9 6" />
+          </svg>
+        </span>
+      </button>
+      {isOpen && (
+        <div className="thinking-block-body">
+          <div className="thinking-block-content" ref={contentRef}>
+            {thoughts.map((thought, index) => (
+              <div className="thinking-block-step" key={`${blockKey}-${index}`}>
+                {thoughts.length > 1 && (
+                  <div className="thinking-block-step-label">{THINKING_LABELS.step(index + 1)}</div>
+                )}
+                <div className="thinking-block-step-body">{renderFormattedMessage(thought)}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
 }
 
 function readableAssistantText(text: string) {
@@ -518,6 +938,8 @@ export default function ChatPanel({
   streamedResponse,
   agentProgress,
   agentActivitySnapshots,
+  thinkingExpanded,
+  onThinkingExpandedChange,
   message,
   imageAttachments,
   documentName,
@@ -607,6 +1029,25 @@ export default function ChatPanel({
   }
   const activeModel = getActiveModel(activeProvider)
 
+  const [elapsedSeconds, setElapsedSeconds] = useState(0)
+
+  useEffect(() => {
+    if (!sending) {
+      setElapsedSeconds(0)
+      return
+    }
+
+    const startTime = Date.now()
+    setElapsedSeconds(0)
+
+    const timer = setInterval(() => {
+      const elapsed = Math.round((Date.now() - startTime) / 1000)
+      setElapsedSeconds(elapsed)
+    }, 1000)
+
+    return () => clearInterval(timer)
+  }, [sending])
+
   const [isRecording, setIsRecording] = useState(false)
   const [voiceMode, setVoiceMode] = useState(false)
   const [voiceTranscript, setVoiceTranscript] = useState('')
@@ -628,7 +1069,7 @@ export default function ChatPanel({
   const speakingRef = useRef<string | null>(null)
   const restartTimerRef = useRef<number | null>(null)
   const voiceStatus = speakingText ? 'speaking' : (sending || voiceAwaitingResponse) ? 'thinking' : isRecording ? 'listening' : voiceMode ? 'ready' : 'off'
-  const voiceStatusLabel = voiceStatus === 'speaking' ? 'กำลังตอบ' : voiceStatus === 'thinking' ? 'กำลังคิด' : voiceStatus === 'listening' ? 'กำลังฟัง' : 'พร้อมฟัง'
+  const voiceStatusLabel = voiceStatus === 'speaking' ? 'Speaking' : voiceStatus === 'thinking' ? 'Thinking' : voiceStatus === 'listening' ? 'Listening' : 'Ready'
 
   const clearRestartTimer = () => {
     if (restartTimerRef.current === null) return
@@ -750,7 +1191,7 @@ export default function ChatPanel({
   }
   const startAudioRecording = async (autoSend: boolean) => {
     if (!navigator.mediaDevices?.getUserMedia || typeof MediaRecorder === 'undefined') {
-      alert('ขออภัย ระบบนี้ไม่สามารถเข้าถึงไมค์หรืออัดเสียงในเบราว์เซอร์นี้ได้')
+      alert("Sorry, this system cannot access the microphone or record audio in this browser")
       voiceModeRef.current = false
       setVoiceMode(false)
       return
@@ -773,7 +1214,7 @@ export default function ChatPanel({
       mediaStreamRef.current = stream
       mediaRecorderRef.current = recorder
       audioContextRef.current = audioContext
-      setVoiceTranscript('กำลังฟังเสียงจากไมค์')
+      setVoiceTranscript('Listening to microphone...')
 
       recorder.ondataavailable = (event) => {
         if (event.data.size > 0) chunks.push(event.data)
@@ -788,13 +1229,13 @@ export default function ChatPanel({
         setIsRecording(false)
         if (!autoSend || !voiceModeRef.current || chunks.length === 0) return
         if (!heardVoice) {
-          setVoiceTranscript('ยังไม่ได้ยินเสียงพูด')
+          setVoiceTranscript('No speech detected')
           scheduleVoiceListen(700)
           return
         }
         const blob = new Blob(chunks, { type: recorder.mimeType || 'audio/webm' })
         const audioDataUri = await blobToDataUri(blob)
-        setVoiceTranscript('ส่งเสียงให้ AI แล้ว')
+        setVoiceTranscript('Sent audio to AI')
         voiceAwaitingResponseRef.current = true
         setVoiceAwaitingResponse(true)
         onSendVoiceMessage('', audioDataUri)
@@ -818,7 +1259,7 @@ export default function ChatPanel({
         if (peak > 12) {
           heardVoice = true
           quietSince = 0
-          setVoiceTranscript('กำลังฟัง...')
+          setVoiceTranscript('Listening...')
         } else if (heardVoice) {
           quietSince = quietSince || now
         }
@@ -833,7 +1274,7 @@ export default function ChatPanel({
       setIsRecording(false)
       voiceModeRef.current = false
       setVoiceMode(false)
-      alert('เปิดไมค์ไม่สำเร็จ กรุณาตรวจสิทธิ์ microphone ของเบราว์เซอร์')
+      alert('Failed to open microphone. Please check microphone permissions in your browser')
     }
   }
   const startRecognition = (autoSend: boolean) => {
@@ -1351,8 +1792,8 @@ export default function ChatPanel({
           }}
         >
           <div style={{ fontSize: '3.5rem', marginBottom: '16px' }}>🖼️</div>
-          <div style={{ fontSize: '1.25rem', fontWeight: 'bold', letterSpacing: '0.5px' }}>วางไฟล์เพื่อแนบข้อมูล</div>
-          <div style={{ fontSize: '0.85rem', color: '#94a3b8', marginTop: '8px' }}>รองรับรูปภาพ (PNG, JPEG, WebP, GIF) และไฟล์ PDF</div>
+          <div style={{ fontSize: '1.25rem', fontWeight: 'bold', letterSpacing: '0.5px' }}>Drag files to attach data</div>
+          <div style={{ fontSize: '0.85rem', color: '#94a3b8', marginTop: '8px' }}>Supports images (PNG, JPEG, WebP, GIF) and PDF files</div>
         </div>
       )}
 
@@ -1375,6 +1816,19 @@ export default function ChatPanel({
               <div className="bubble-wrapper">
                 {renderCompletedActivity(interaction)}
                 {renderFileChanges(interaction)}
+                {(() => {
+                  const progress = agentActivitySnapshots[String(interaction.id)] ?? interaction.agentActivity ?? []
+                  const thoughts = thoughtsFrom(progress)
+                  return (
+                    <ThinkingBlock
+                      blockKey={String(interaction.id)}
+                      thoughts={thoughts}
+                      expanded={thinkingExpanded[String(interaction.id)] ?? false}
+                      onExpandedChange={onThinkingExpandedChange}
+                      showEmptyHint={hasAgentToolActivity(progress) && thoughts.length === 0}
+                    />
+                  )
+                })()}
                 <div className="message-bubble" style={{ whiteSpace: 'pre-wrap' }}>{renderFormattedMessage(interaction.aiText)}</div>
                 <div className="message-time" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                   <button className="provider-badge">{interaction.provider} • {interaction.model}</button>
@@ -1396,7 +1850,7 @@ export default function ChatPanel({
                       opacity: 0.7,
                       transition: 'all 0.2s',
                     }}
-                    title={speakingText === interaction.aiText ? "หยุดอ่านออกเสียง" : "อ่านออกเสียง"}
+                    title={speakingText === interaction.aiText ? "Stop reading" : "Read aloud"}
                   >
                     {renderSpeakerIcon(speakingText === interaction.aiText)}
                   </button>
@@ -1425,7 +1879,43 @@ export default function ChatPanel({
             {renderActiveFileChanges()}
             <div className="message ai-message thinking-message">
               <div className="bubble-wrapper">
-                <div className="message-bubble"><span>{streamedReply ? renderFormattedMessage(streamedReply) : 'Thinking...'}</span></div>
+                <ThinkingBlock
+                  blockKey="live"
+                  thoughts={thoughtsFrom(agentProgress)}
+                  isLive={true}
+                  expanded={thinkingExpanded.live ?? true}
+                  onExpandedChange={onThinkingExpandedChange}
+                  showEmptyHint={
+                    agentMode
+                    && hasAgentToolActivity(agentProgress)
+                    && thoughtsFrom(agentProgress).length === 0
+                    && !streamedReply
+                  }
+                />
+                <div className="message-bubble">
+                  <span>
+                    {streamedReply ? (
+                      renderFormattedMessage(streamedReply)
+                    ) : (
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: 'var(--text-soft, #94a3b8)' }}>
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" style={{ display: 'inline-block', flexShrink: 0 }}>
+                          <circle cx="12" cy="12" r="10" stroke="rgba(255, 255, 255, 0.12)" />
+                          <path d="M12 2a10 10 0 0 1 10 10" stroke="var(--accent)" strokeLinecap="round">
+                            <animateTransform
+                              attributeName="transform"
+                              type="rotate"
+                              from="0 12 12"
+                              to="360 12 12"
+                              dur="0.9s"
+                              repeatCount="indefinite"
+                            />
+                          </path>
+                        </svg>
+                        <span>Thinking for {elapsedSeconds}s</span>
+                      </div>
+                    )}
+                  </span>
+                </div>
                 {streamedResponse && (
                   <div className="message-time" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                     <button className="provider-badge">{badge(streamedResponse.provider, streamedResponse.model)}</button>
@@ -1447,7 +1937,7 @@ export default function ChatPanel({
                           opacity: 0.7,
                           transition: 'all 0.2s',
                         }}
-                        title={speakingText === streamedReply ? "หยุดอ่านออกเสียง" : "อ่านออกเสียง"}
+                        title={speakingText === streamedReply ? "Stop reading" : "Read aloud"}
                       >
                          {renderSpeakerIcon(speakingText === streamedReply)}
                       </button>
@@ -1459,6 +1949,38 @@ export default function ChatPanel({
           </div>
         )}
 
+        {pendingApproval && (() => {
+          const details = renderApprovalDetails(pendingApproval.approval)
+          const writeFile = pendingApproval.approval?.WriteFile
+          const applyPatch = pendingApproval.approval?.ApplyPatch
+          const diffText = writeFile?.diff || applyPatch?.diff
+
+          return (
+            <div className="message ai-message" style={{ width: '100%' }}>
+              <div className="bubble-wrapper" style={{ width: '100%' }}>
+                <div className="action-card approval-card" data-tier={details.isDangerous ? 'dangerous' : undefined} style={{ width: '100%' }}>
+                  <div className="approval-card-content" style={{ width: '100%' }}>
+                    <div className="approval-card-title">{details.title}</div>
+                    <div className="approval-card-body" style={{ whiteSpace: 'pre-wrap', fontFamily: 'monospace' }}>{details.body}</div>
+                    {diffText ? (
+                      <div className="approval-card-diff-container" style={{ marginTop: '8px', width: '100%' }}>
+                        <div style={{ fontSize: '0.8rem', fontWeight: 600, color: 'var(--text-soft, #94a3b8)', marginBottom: '4px' }}>Diff:</div>
+                        {renderDiff(diffText)}
+                      </div>
+                    ) : (
+                      details.reason && <div className="approval-card-reason" style={{ whiteSpace: 'pre-wrap', fontFamily: 'monospace' }}>{details.reason}</div>
+                    )}
+                  </div>
+                  <div className="approval-card-actions">
+                    <button type="button" className="approval-btn approval-btn-approve" onClick={() => onApproval(true)}>Approve</button>
+                    <button type="button" className="approval-btn" style={{ backgroundColor: 'rgba(16, 185, 129, 0.22)', borderColor: 'rgba(16, 185, 129, 0.4)', color: '#a7f3d0' }} onClick={() => onApproval(true, true)}>Approve this session</button>
+                    <button type="button" className="approval-btn approval-btn-cancel" onClick={() => onApproval(false)}>Cancel</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )
+        })()}
         <div ref={chatEnd} />
       </div>