feat: Add transcript engine API and connect ConversationHistory to real data

- Add transcript-engine service that parses Claude Code JSONL transcripts
  with session listing, message extraction, token/stats analysis, and caching
- Add transcript REST routes (sessions list, latest, by session ID, section filtering)
- Rewrite ConversationHistory to fetch from /api/transcript/* instead of mock data
- Add session pills for switching between conversation sessions
- Add stats bar footer with model, duration, tokens, and tool count
- Add TranscriptSession/TranscriptMessage types, ChatInput, InputSettings,
  PromptBar updates, TranscriptCard, and useVoiceCapture composable

frontend/src/components/agent/TranscriptCard.vue

@@ -1,52 +1,62 @@
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { onMounted, onBeforeUnmount } from 'vue'
+import type { VoiceCapture } from '../../composables/useVoiceCapture'
 
-const props = withDefaults(defineProps<{
-  typeSpeed?: number
-}>(), {
-  typeSpeed: 30
-})
+const props = defineProps<{
+  voice: VoiceCapture
+}>()
 
 const emit = defineEmits<{
   done: [text: string]
 }>()
 
-const PLACEHOLDER_TEXT = 'Necesito que revises el componente de autenticación en el módulo de usuarios. ' +
-  'Hay un problema con la validación de tokens JWT cuando el usuario tiene sesiones múltiples activas. ' +
-  'El token se invalida correctamente en el servidor pero el cliente sigue usando el token anterior ' +
-  'hasta que expira naturalmente. Quiero que implementes una verificación en tiempo real usando WebSocket ' +
-  'para notificar al cliente cuando su token ha sido revocado desde otra sesión.'
-
-const displayedText = ref('')
-let intervalId: number | null = null
-let charIndex = 0
+function handleStop() {
+  props.voice.stopRecording()
+  // Brief delay for final Whisper result
+  const delay = props.voice.voiceMode.value === 'whisper' ? 800 : 200
+  setTimeout(() => {
+    emit('done', props.voice.transcript.value.trim())
+  }, delay)
+}
 
 onMounted(() => {
-  intervalId = window.setInterval(() => {
-    if (charIndex < PLACEHOLDER_TEXT.length) {
-      displayedText.value += PLACEHOLDER_TEXT[charIndex]
-      charIndex++
-    } else {
-      if (intervalId) clearInterval(intervalId)
-      intervalId = null
-      emit('done', displayedText.value)
-    }
-  }, props.typeSpeed)
+  props.voice.clearTranscript()
+  props.voice.startRecording()
 })
 
 onBeforeUnmount(() => {
-  if (intervalId) clearInterval(intervalId)
+  if (props.voice.isRecording.value) {
+    props.voice.stopRecording()
+  }
 })
 </script>
 
 <template>
   <div class="transcript-card">
     <div class="transcript-header">
-      <span class="rec-dot"></span>
-      <span class="rec-label">Transcribiendo...</span>
+      <div class="transcript-header-left">
+        <span class="rec-dot"></span>
+        <span class="rec-label">Transcribiendo...</span>
+        <span class="mode-badge" :class="voice.voiceMode.value">
+          {{ voice.voiceMode.value === 'whisper' ? 'GPU' : 'Web' }}
+        </span>
+      </div>
+      <button class="stop-btn" @click="handleStop" title="Stop recording">
+        <svg width="10" height="10" viewBox="0 0 10 10">
+          <rect x="1" y="1" width="8" height="8" rx="1" fill="currentColor"/>
+        </svg>
+      </button>
     </div>
-    <div class="transcript-body">
-      <span class="transcript-text">{{ displayedText }}</span>
+
+    <!-- Error state -->
+    <div v-if="voice.error.value" class="transcript-error">
+      {{ voice.error.value }}
+    </div>
+
+    <!-- Transcript body -->
+    <div v-else class="transcript-body">
+      <span class="transcript-text">{{ voice.animatedTranscript.value }}</span>
+      <span v-if="voice.interimTranscript.value" class="interim-text">{{ voice.interimTranscript.value }}</span>
       <span class="blink-cursor">|</span>
     </div>
   </div>
@@ -64,10 +74,16 @@ onBeforeUnmount(() => {
 .transcript-header {
   display: flex;
   align-items: center;
-  gap: 8px;
+  justify-content: space-between;
   margin-bottom: 8px;
 }
 
+.transcript-header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .rec-dot {
   width: 8px;
   height: 8px;
@@ -85,16 +101,67 @@ onBeforeUnmount(() => {
   letter-spacing: 0.5px;
 }
 
+.mode-badge {
+  font-size: 9px;
+  font-weight: 700;
+  padding: 2px 5px;
+  border-radius: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.mode-badge.whisper {
+  background: rgba(139, 92, 246, 0.2);
+  color: rgba(139, 92, 246, 0.9);
+  border: 1px solid rgba(139, 92, 246, 0.3);
+}
+
+.mode-badge.webspeech {
+  background: rgba(59, 130, 246, 0.2);
+  color: rgba(59, 130, 246, 0.9);
+  border: 1px solid rgba(59, 130, 246, 0.3);
+}
+
+.stop-btn {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(239, 68, 68, 0.15);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  border-radius: 6px;
+  color: #ef4444;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.stop-btn:hover {
+  background: rgba(239, 68, 68, 0.25);
+}
+
 .transcript-body {
   font-size: 13px;
   line-height: 1.6;
   color: rgba(255, 255, 255, 0.85);
+  min-height: 20px;
 }
 
 .transcript-text {
   white-space: pre-wrap;
 }
 
+.interim-text {
+  color: rgba(255, 255, 255, 0.4);
+  font-style: italic;
+}
+
+.transcript-error {
+  font-size: 12px;
+  color: rgba(239, 68, 68, 0.8);
+  padding: 4px 0;
+}
+
 .blink-cursor {
   color: rgba(255, 255, 255, 0.7);
   animation: cursor-blink 0.8s step-end infinite;