feat(session): Add audio interrupt, STT auto-capture, and recognition badge timer

- Add interrupt button (stop AI speech mid-sentence) with isInterrupted flag
- Add "이건 뭐야?" STT keyword detection for voice-triggered photo capture
- Add 3-second auto-dismiss timer for recognition badge
- Add session.stop i18n translation key
- Reset isInterrupted on disconnect to prevent stale state on reconnect

Quality Score: 86/100
Co-Authored-By: Claude <noreply@anthropic.com>

Author: HyeonsangKim

src/app/session/page.tsx

@@ -7,7 +7,7 @@
 
 import { useState, useCallback, useEffect, useRef } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { Mic, MicOff, BookOpen, Camera, CameraOff, LogOut } from 'lucide-react';
+import { Mic, MicOff, BookOpen, Camera, CameraOff, LogOut, Square } from 'lucide-react';
 import { cn } from '@web/lib/utils';
 import { useT } from '@web/lib/i18n';
 import type { Locale } from '@shared/i18n';
@@ -34,6 +34,7 @@ export default function MainPage() {
     disconnect,
     toggleMic,
     toggleCamera,
+    interrupt,
     requestTopicDetail,
     sendTextMessage,
     sendPhoto,
@@ -75,6 +76,7 @@ export default function MainPage() {
   const [agentTransition, setAgentTransition] = useState<AgentSwitchData | null>(null);
   const [isAgentTransitioning, setIsAgentTransitioning] = useState(false);
   const [showSaved, setShowSaved] = useState<string | null>(null);
+  const [showRecognizedBadge, setShowRecognizedBadge] = useState(false);
 
   const cameraViewRef = useRef<CameraViewRef>(null);
   const prevAgentRef = useRef(activeAgent);
@@ -88,6 +90,17 @@ export default function MainPage() {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // 인식 배지 3초 후 자동 해제
+  useEffect(() => {
+    if (currentArtifact) {
+      setShowRecognizedBadge(true);
+      const timer = setTimeout(() => setShowRecognizedBadge(false), 3000);
+      return () => clearTimeout(timer);
+    } else {
+      setShowRecognizedBadge(false);
+    }
+  }, [currentArtifact]);
+
   // ── Onboarding handlers ─────────────────────────────────
 
   const handleLanguageSelect = useCallback((selected: Locale) => {
@@ -187,13 +200,12 @@ export default function MainPage() {
     }
   }, [diaryResult, router]);
 
-  // 복원 완료 시점에만 카메라 한 번 닫기 (이후 사용자가 다시 열 수 있음)
+  // 복원 완료 시에만 카메라 닫기
   useEffect(() => {
     if (restorationState.status === 'ready' && isCameraOpen) {
       setIsCameraOpen(false);
       toggleCamera(false);
     }
-    // isCameraOpen / toggleCamera 는 의도적으로 dep 제외 — status 전환 시 1회만 실행
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [restorationState.status]);
 
@@ -311,7 +323,22 @@ export default function MainPage() {
               />
             </div>
           </div>
-          <AudioVisualizer state={audioState} />
+          <div className="flex items-center gap-2">
+            <div className="flex-1">
+              <AudioVisualizer state={audioState} />
+            </div>
+            {audioState === 'speaking' && (
+              <button
+                onClick={interrupt}
+                className="w-7 h-7 rounded-full bg-red-500/20 border border-red-500/30
+                           flex items-center justify-center hover:bg-red-500/30 transition-colors
+                           animate-fade-in shrink-0"
+                aria-label={t('session.stop')}
+              >
+                <Square className="w-3 h-3 text-red-400 fill-red-400" />
+              </button>
+            )}
+          </div>
         </div>
       </div>
 
@@ -368,7 +395,7 @@ export default function MainPage() {
           <CameraView
             ref={cameraViewRef}
             isScanning={false}
-            isRecognized={!!currentArtifact}
+            isRecognized={showRecognizedBadge}
             isBlurred={false}
             onCapturePhoto={() => cameraViewRef.current?.capturePhoto() ?? ''}
           />

src/shared/i18n/translations.ts

@@ -264,6 +264,10 @@ const translations = {
     ko: '종료',
     en: 'Exit',
   },
+  'session.stop': {
+    ko: '멈춰',
+    en: 'Stop',
+  },
   'session.exitConfirm': {
     ko: '세션을 종료하시겠습니까?',
     en: 'End this session?',

src/web/hooks/use-live-session.ts

@@ -55,6 +55,24 @@ function toCivilization(value: string): Civilization {
   return VALID_CIVILIZATIONS.has(value) ? (value as Civilization) : 'Other';
 }
 
+/**
+ * "이건 뭐야?" 계열 키워드 감지.
+ * 카메라 열린 상태에서 이 패턴이 감지되면 자동 캡처 트리거.
+ */
+const WHAT_IS_THIS_PATTERNS = [
+  // Korean: "이거/이건/이게" + "뭐야/뭐지/뭔지/뭘까"
+  /이(?:거|건|게)\s*뭐/,
+  /뭐(?:야|지)\s*이(?:거|건|게)/,
+  /이(?:거|건|게)\s*(?:뭔|뭘)/,
+  // English
+  /what(?:'s| is) this/i,
+  /what(?:'s| is) that/i,
+];
+
+function isWhatIsThisQuery(text: string): boolean {
+  return WHAT_IS_THIS_PATTERNS.some((pattern) => pattern.test(text));
+}
+
 // ── 이벤트 핸들러 팩토리 ────────────────────────────────────
 
 interface SessionRefs {
@@ -65,6 +83,9 @@ interface SessionRefs {
   currentArtifact: React.RefObject<ArtifactSummary | null>;
   reconnect: React.RefObject<ReconnectManager | null>;
   geoCoords: React.RefObject<{ lat: number; lng: number }>;
+  cameraCapture: React.RefObject<CameraCapture | null>;
+  isCameraOpen: React.RefObject<boolean>;
+  lastAutoCaptureTime: React.RefObject<number>;
 }
 
 interface SessionSetters {
@@ -168,6 +189,19 @@ function createSessionEvents(refs: SessionRefs, setters: SessionSetters): LiveSe
       const cleaned = cleanSttText(data.text);
       if (!cleaned) return;
 
+      // "이건 뭐야?" 감지 → 카메라 열려있으면 자동 캡처 (5초 쿨다운)
+      if (
+        refs.isCameraOpen.current &&
+        isWhatIsThisQuery(cleaned) &&
+        Date.now() - refs.lastAutoCaptureTime.current > 5000
+      ) {
+        const photo = refs.cameraCapture.current?.capturePhoto();
+        if (photo) {
+          refs.lastAutoCaptureTime.current = Date.now();
+          refs.liveSession.current?.sendPhoto(photo, cleaned);
+        }
+      }
+
       setters.setTranscript(prev => {
         const last = prev[prev.length - 1];
         // 같은 유저 턴이면 이어붙이기 (3초 내)
@@ -338,6 +372,8 @@ export function useLiveSession(): UseLiveSessionReturn {
   const currentArtifactRef = useRef<ArtifactSummary | null>(null);
   const userIdRef = useRef<string>('');
   const geoCoordsRef = useRef<{ lat: number; lng: number }>({ lat: 0, lng: 0 });
+  const isCameraOpenRef = useRef(false);
+  const lastAutoCaptureTimeRef = useRef(0);
 
   // 브라우저 Geolocation으로 좌표 추적
   useEffect(() => {
@@ -415,6 +451,9 @@ export function useLiveSession(): UseLiveSessionReturn {
         currentArtifact: currentArtifactRef,
         reconnect: reconnectRef,
         geoCoords: geoCoordsRef,
+        cameraCapture: cameraCaptureRef,
+        isCameraOpen: isCameraOpenRef,
+        lastAutoCaptureTime: lastAutoCaptureTimeRef,
       };
       const setters: SessionSetters = {
         setSessionState, setTranscript, setCurrentArtifact,
@@ -516,8 +555,8 @@ export function useLiveSession(): UseLiveSessionReturn {
   }, []);
 
   const toggleCamera = useCallback((enabled: boolean) => {
-    // 카메라 ON/OFF는 프리뷰만 제어 — 프레임 스트리밍 없음
-    // 인식은 캡처 버튼(sendPhoto)으로만 트리거
+    isCameraOpenRef.current = enabled;
+    // 카메라 ON/OFF는 프리뷰만 제어 — 인식은 캡처 버튼(sendPhoto)으로만 트리거
     if (!enabled) {
       cameraCaptureRef.current?.stopFrameLoop();
     }

src/web/lib/gemini/live-api.ts

@@ -38,6 +38,7 @@ export class LiveSession {
   private userId = '';
   private visits: DiaryVisitInput[] = [];
   private lastCameraFrame: string | null = null;
+  private isInterrupted = false;
 
   constructor(events: LiveSessionEvents) {
     this.events = events;
@@ -101,6 +102,7 @@ export class LiveSession {
     this.ai = null;
     this.visits = [];
     this.lastCameraFrame = null;
+    this.isInterrupted = false;
     this.updateStatus('disconnected');
   }
 
@@ -162,6 +164,7 @@ export class LiveSession {
   }
 
   interrupt(): void {
+    this.isInterrupted = true;
     if (this.state.audioState === 'speaking') {
       this.updateAudioState('idle');
     }
@@ -221,6 +224,7 @@ export class LiveSession {
 
     // 3. 턴 완료 — 현재 트랜스크립트를 확정(isFinal)
     if (message.serverContent?.turnComplete) {
+      this.isInterrupted = false; // 인터럽트 플래그 리셋
       this.events.onTranscript({ text: '', delta: '', isFinal: true });
       this.updateAudioState('idle');
     }
@@ -520,6 +524,7 @@ export class LiveSession {
   // --- Helpers ---
 
   private handleAudioOutput(base64: string): void {
+    if (this.isInterrupted) return; // 인터럽트 중 — 오디오 드롭
     if (this.onAudioData) {
       this.onAudioData(base64);
     }