From 59cc8ee87e3e5966ae4db0cdb141502769bbea76 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sun, 15 Feb 2026 23:33:29 -0600
Subject: [PATCH] feat: Migrate voice capture to composable with floating
 push-to-talk

Extract voice recording logic from FloatingVoice.vue into useVoiceCapture
composable. TranscriptCard now does real recording instead of mock typing.
InputSettings allows voice mode toggle (WebSpeech/Whisper GPU), mic
selection, and debug audio playback. ChatInput gets a settings gear button.

Long-press on FloatBubble shows a floating TranscriptCard (push-to-talk)
instead of opening the full PromptBar. Release stops recording after a
500ms buffer. Click still opens PromptBar normally.

Parallel MediaRecorder captures raw audio in WebSpeech mode for DB save
and debug playback. Transient errors (no-speech) no longer kill sessions.
Touch selection prevention on FloatBubble for tablets.
---
 frontend/src/components/AgentBar.vue          | 201 ++++-
 frontend/src/components/agent/FloatBubble.vue |  24 +-
 .../src/components/agent/InputSettings.vue    |  41 +
 frontend/src/components/agent/PromptBar.vue   | 736 +++++++++++++++++-
 .../src/components/agent/TranscriptCard.vue   |   6 +-
 5 files changed, 971 insertions(+), 37 deletions(-)

diff --git a/frontend/src/components/AgentBar.vue b/frontend/src/components/AgentBar.vue
index 9570af0..41de78a 100644
--- a/frontend/src/components/AgentBar.vue
+++ b/frontend/src/components/AgentBar.vue
@@ -2,8 +2,11 @@
 import { ref, reactive, onMounted, onBeforeUnmount, computed } from 'vue'
 import { endpoints } from '../config/endpoints'
 import type { Agent, AgentStatusState, ClaudeStatus } from '../types/agent'
+import { useVoiceCapture } from '../composables/useVoiceCapture'
+import { useCanvasStore } from '../stores/canvas'
 import FloatBubble from './agent/FloatBubble.vue'
 import PromptBar from './agent/PromptBar.vue'
+import TranscriptCard from './agent/TranscriptCard.vue'
 
 const agents = ref<Agent[]>([])
 const loading = ref(true)
@@ -22,6 +25,39 @@ const isRecordingActive = computed(() =>
   promptBarRef.value?.isRecording ?? false
 )
 
+// Floating transcript state (long-press recording)
+const canvasStore = useCanvasStore()
+const floatingVoice = useVoiceCapture({
+  onNotification: (msg, type, dur) => canvasStore.showNotification(msg, type, dur)
+})
+const floatingAgentId = ref<string | null>(null)
+const floatingAnchorRect = ref<DOMRect | null>(null)
+
+const floatingAgent = computed(() =>
+  enabledAgents.value.find(a => a.id === floatingAgentId.value) || null
+)
+
+const isFloatingRecording = computed(() =>
+  !!floatingAgentId.value && floatingVoice.isRecording.value
+)
+
+const floatingStyle = computed(() => {
+  if (!floatingAnchorRect.value) return {}
+  const rect = floatingAnchorRect.value
+  const bubbleCenterX = rect.left + rect.width / 2
+  const bottomOffset = window.innerHeight - rect.top + 12
+  const panelWidth = 320
+  let left = bubbleCenterX - panelWidth / 2
+  left = Math.max(12, Math.min(left, window.innerWidth - panelWidth - 12))
+  return {
+    position: 'fixed' as const,
+    bottom: `${bottomOffset}px`,
+    left: `${left}px`,
+    width: `${panelWidth}px`,
+    zIndex: 10000
+  }
+})
+
 const enabledAgents = computed(() =>
   agents.value.filter(a => a.uiConfig?.enabled)
 )
@@ -211,8 +247,56 @@ function handleBubbleClick(agent: Agent, event: MouseEvent) {
   openPromptBar(agent, event.currentTarget as HTMLElement, false)
 }
 
-function handleBubbleHold(agent: Agent, el: HTMLElement) {
-  openPromptBar(agent, el, true)
+async function handleBubbleHold(agent: Agent, el: HTMLElement) {
+  // Close PromptBar if open
+  if (activeAgentId.value) {
+    handlePromptClose()
+  }
+  // Open floating transcript
+  floatingAnchorRect.value = el.getBoundingClientRect()
+  floatingAgentId.value = agent.id
+  await floatingVoice.init()
+  floatingVoice.clearTranscript()
+  floatingVoice.startRecording()
+}
+
+function handleBubbleHoldRelease() {
+  if (!floatingAgentId.value || !floatingVoice.isRecording.value) return
+  // Buffer 500ms for trailing words, then stop and emit done via TranscriptCard
+  setTimeout(() => {
+    if (floatingVoice.isRecording.value) {
+      floatingVoice.stopRecording()
+      // Wait for final Whisper result if needed
+      const delay = floatingVoice.voiceMode.value === 'whisper' ? 800 : 200
+      setTimeout(() => {
+        const text = floatingVoice.transcript.value.trim()
+        closeFloating()
+        if (text) {
+          console.log(`[AgentBar] Voice submit to ${floatingAgent.value?.id}:`, text)
+        }
+      }, delay)
+    }
+  }, 500)
+}
+
+function handleFloatingDone(text: string) {
+  closeFloating()
+  if (text.trim()) {
+    console.log(`[AgentBar] Voice submit to ${floatingAgent.value?.id}:`, text)
+  }
+}
+
+function closeFloating() {
+  if (floatingVoice.isRecording.value) {
+    floatingVoice.stopRecording()
+  }
+  floatingVoice.cleanup()
+  floatingAgentId.value = null
+  floatingAnchorRect.value = null
+}
+
+function handleFloatingClose() {
+  closeFloating()
 }
 
 function handlePromptClose() {
@@ -234,6 +318,7 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   statusWs?.close()
+  floatingVoice.cleanup()
   if (reconnectTimeout) clearTimeout(reconnectTimeout)
   for (const [, timers] of agentTimers) {
     for (const key of Object.keys(timers)) {
@@ -251,9 +336,10 @@ onBeforeUnmount(() => {
       :key="agent.id"
       :agent="agent"
       :status="agentStatuses[agent.id]"
-      :recording="activeAgentId === agent.id && isRecordingActive"
+      :recording="(activeAgentId === agent.id && isRecordingActive) || (floatingAgentId === agent.id && isFloatingRecording)"
       @click="handleBubbleClick(agent, $event)"
       @hold="handleBubbleHold(agent, $event)"
+      @holdrelease="handleBubbleHoldRelease"
     />
   </div>
 
@@ -267,6 +353,27 @@ onBeforeUnmount(() => {
     @close="handlePromptClose"
     @submit="handlePromptSubmit"
   />
+
+  <!-- Floating transcript (long-press recording) -->
+  <Teleport to="body">
+    <Transition name="float-transcript">
+      <div v-if="floatingAgentId && floatingAnchorRect" class="float-transcript-backdrop" @click.self="handleFloatingClose">
+        <div class="float-transcript-panel" :style="floatingStyle">
+          <div class="ft-header">
+            <div
+              v-if="floatingAgent"
+              class="ft-badge"
+              :style="{ background: floatingAgent.uiConfig?.gradient || floatingAgent.uiConfig?.color }"
+            >
+              {{ floatingAgent.uiConfig?.shortLabel }}
+            </div>
+            <span class="ft-label">{{ floatingAgent?.uiConfig?.label || floatingAgent?.name }}</span>
+          </div>
+          <TranscriptCard :voice="floatingVoice" @done="handleFloatingDone" />
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
 </template>
 
 <style scoped>
@@ -281,10 +388,98 @@ onBeforeUnmount(() => {
   pointer-events: none;
 }
 
+/* Floating transcript */
+.float-transcript-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+}
+
+.float-transcript-panel {
+  background: rgba(15, 10, 26, 0.9);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 14px;
+  padding: 10px 12px;
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
+  transform-origin: bottom center;
+}
+
+.ft-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.ft-badge {
+  width: 22px;
+  height: 22px;
+  border-radius: 7px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 9px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.ft-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.5);
+  font-family: system-ui, sans-serif;
+}
+
+/* Transition */
+.float-transcript-enter-active {
+  transition: opacity 0.2s ease;
+}
+
+.float-transcript-enter-active .float-transcript-panel {
+  animation: ft-enter 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+.float-transcript-enter-from {
+  opacity: 0;
+}
+
+.float-transcript-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.float-transcript-leave-active .float-transcript-panel {
+  animation: ft-leave 0.15s ease both;
+}
+
+.float-transcript-leave-to {
+  opacity: 0;
+}
+
+@keyframes ft-enter {
+  0% { opacity: 0; transform: translateY(10px) scale(0.9); }
+  100% { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes ft-leave {
+  0% { opacity: 1; transform: translateY(0) scale(1); }
+  100% { opacity: 0; transform: translateY(8px) scale(0.95); }
+}
+
 @media (max-width: 768px) {
   .agent-bubbles {
     bottom: 80px;
     gap: 12px;
   }
+
+  .float-transcript-panel {
+    left: 8px !important;
+    right: 8px;
+    width: auto !important;
+  }
 }
 </style>
diff --git a/frontend/src/components/agent/FloatBubble.vue b/frontend/src/components/agent/FloatBubble.vue
index 21196d0..ea236dd 100644
--- a/frontend/src/components/agent/FloatBubble.vue
+++ b/frontend/src/components/agent/FloatBubble.vue
@@ -11,9 +11,10 @@ const props = defineProps<{
 const emit = defineEmits<{
   click: [event: MouseEvent]
   hold: [el: HTMLElement]
+  holdrelease: []
 }>()
 
-const HOLD_MS = 400
+const HOLD_MS = 200
 let holdTimer: number | null = null
 let didHold = false
 let holdTarget: HTMLElement | null = null
@@ -30,13 +31,18 @@ function onPointerDown(e: PointerEvent) {
 
 function onPointerUp(e: PointerEvent) {
   clearHold()
-  if (!didHold) {
+  if (didHold) {
+    emit('holdrelease')
+  } else {
     emit('click', e as unknown as MouseEvent)
   }
 }
 
 function onPointerCancel() {
   clearHold()
+  if (didHold) {
+    emit('holdrelease')
+  }
 }
 
 function clearHold() {
@@ -124,7 +130,10 @@ function bubbleTitle() {
     @pointerdown.prevent="onPointerDown"
     @pointerup="onPointerUp"
     @pointercancel="onPointerCancel"
+    @touchstart.prevent
     @contextmenu.prevent
+    @selectstart.prevent
+    @dragstart.prevent
     @mouseenter="!isAnimating() && (($event.currentTarget as HTMLElement).style.boxShadow = bubbleHoverShadow())"
     @mouseleave="!isAnimating() && (($event.currentTarget as HTMLElement).style.boxShadow = bubbleStyle().boxShadow || '')"
   >
@@ -194,7 +203,8 @@ function bubbleTitle() {
   -webkit-user-select: none;
   user-select: none;
   -webkit-touch-callout: none;
-  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: none;
   position: relative;
 }
 
@@ -543,6 +553,14 @@ function bubbleTitle() {
   50% { opacity: 0.7; }
 }
 
+/* Prevent touch selection on all children */
+.agent-bubble * {
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-touch-callout: none;
+  pointer-events: none;
+}
+
 /* ====================== LABELS ====================== */
 
 .bubble-label {
diff --git a/frontend/src/components/agent/InputSettings.vue b/frontend/src/components/agent/InputSettings.vue
index ba4894d..d9c550c 100644
--- a/frontend/src/components/agent/InputSettings.vue
+++ b/frontend/src/components/agent/InputSettings.vue
@@ -1,18 +1,41 @@
 <script setup lang="ts">
 import type { VoiceCapture } from '../../composables/useVoiceCapture'
 
+interface SessionInfo {
+  id: string
+  startTime: string
+  messageCount: number
+  model: string
+}
+
 const props = defineProps<{
   voice: VoiceCapture
+  sessions?: SessionInfo[]
+  activeSessionId?: string | null
 }>()
 
 const emit = defineEmits<{
   close: []
+  'select-session': [sessionId: string]
 }>()
 
 function handleMicSelect(e: Event) {
   const target = e.target as HTMLSelectElement
   props.voice.selectMicrophone(target.value)
 }
+
+function handleSessionSelect(e: Event) {
+  const target = e.target as HTMLSelectElement
+  emit('select-session', target.value)
+}
+
+function formatSessionLabel(s: SessionInfo): string {
+  if (!s.startTime) return `${s.id.slice(0, 8)}... (${s.messageCount} msgs)`
+  const d = new Date(s.startTime)
+  const date = d.toLocaleDateString('es', { month: 'short', day: 'numeric' })
+  const time = d.toLocaleTimeString('es', { hour: '2-digit', minute: '2-digit' })
+  return `${date} ${time} · ${s.messageCount} msgs`
+}
 </script>
 
 <template>
@@ -27,6 +50,24 @@ function handleMicSelect(e: Event) {
       </button>
     </div>
 
+    <!-- Session Selector -->
+    <div v-if="sessions && sessions.length > 0" class="is-section">
+      <label class="is-label">Session</label>
+      <select
+        class="is-select"
+        :value="activeSessionId || ''"
+        @change="handleSessionSelect"
+      >
+        <option
+          v-for="session in sessions"
+          :key="session.id"
+          :value="session.id"
+        >
+          {{ formatSessionLabel(session) }}
+        </option>
+      </select>
+    </div>
+
     <!-- Voice Mode Toggle -->
     <div class="is-section">
       <label class="is-label">Mode</label>
diff --git a/frontend/src/components/agent/PromptBar.vue b/frontend/src/components/agent/PromptBar.vue
index ea1e15b..b0a529e 100644
--- a/frontend/src/components/agent/PromptBar.vue
+++ b/frontend/src/components/agent/PromptBar.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, reactive, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
 import type { Agent } from '../../types/agent'
+import { endpoints } from '../../config/endpoints'
 import { useVoiceCapture } from '../../composables/useVoiceCapture'
 import { useCanvasStore } from '../../stores/canvas'
 import ChatInput from './ChatInput.vue'
@@ -8,23 +9,39 @@ import TranscriptCard from './TranscriptCard.vue'
 import InputSettings from './InputSettings.vue'
 import ConversationHistory from './ConversationHistory.vue'
 
+interface ClaudeUsage {
+  subscription: { type: string; tier: string; label: string; multiplier: number }
+  today: { messages: number; outputTokens: number; sessions: number }
+  daily: { used: number; limit: number; percent: number }
+  weekly: { used: number; limit: number; percent: number }
+  status: 'normal' | 'elevated' | 'extended' | 'limit_approaching'
+}
+
 interface ChatMessage {
   id: number
   role: 'user' | 'agent'
   content: string
   status: 'sent' | 'thinking' | 'done'
+  uuid?: string
+  intervention?: {
+    type: 'permission' | 'question' | 'plan'
+    requestId?: string
+    toolName?: string
+    toolInput?: unknown
+    options?: Array<{ label: string; description?: string }>
+    resolved?: boolean
+    decision?: string
+  }
 }
 
-const MOCK_RESPONSES = [
-  'Entendido. Revisé el código y encontré el problema — la validación se saltaba cuando el token venía en formato Bearer sin espacio. Ya está corregido.',
-  'Listo. Implementé los cambios en el componente. Los tests existentes siguen pasando y agregué dos nuevos para cubrir el edge case que mencionas.',
-  'Analicé la estructura del módulo. Hay 3 archivos que necesitan cambios: el store, el middleware de auth y el composable de sesión. ¿Procedo con los tres?',
-  'Hecho. El refactor reduce la complejidad ciclomática de 12 a 4. Eliminé las condiciones redundantes y extraje la lógica de retry a un helper separado.',
-  'Encontré el bug. El problema era una race condition en el useEffect — se desmontaba el componente antes de que la promise resolviera. Agregué un abort controller.',
-]
+interface SessionInfo {
+  id: string
+  startTime: string
+  messageCount: number
+  model: string
+}
 
 let idCounter = 0
-let thinkTimer: number | null = null
 
 const props = defineProps<{
   agent: Agent
@@ -51,6 +68,29 @@ const showHistory = ref(false)
 const showSettings = ref(false)
 const messages = reactive<ChatMessage[]>([])
 
+// Real-time transcript state
+const ws = ref<WebSocket | null>(null)
+const sessions = ref<SessionInfo[]>([])
+const activeSessionId = ref<string | null>(null)
+
+// Session + global stats
+const sessionStats = ref<{
+  model: string
+  startTime: string
+  duration: number
+  lastStopReason: string
+  stats: { messageCount: number; toolCallCount: number; thinkingBlocks: number; errors: number }
+  tokens: { totalInput: number; totalOutput: number; totalCacheRead: number; totalCacheCreation: number }
+} | null>(null)
+
+const claudeStats = ref<{
+  today: { messageCount: number; sessionCount: number; toolCallCount: number; tokensByModel: Record<string, number> } | null
+  totalSessions: number
+  totalMessages: number
+} | null>(null)
+
+const claudeUsage = ref<ClaudeUsage | null>(null)
+
 const panelStyle = computed(() => {
   if (!props.anchorRect) return {}
   const bubbleCenterX = props.anchorRect.left + props.anchorRect.width / 2
@@ -72,6 +112,28 @@ const hasContent = computed(() =>
   messages.length > 0 || showTranscript.value || showHistory.value || showSettings.value
 )
 
+// ── Formatting helpers ──
+
+function shortModel(model: string): string {
+  if (!model) return '?'
+  if (model.includes('opus')) return 'opus-4'
+  if (model.includes('sonnet')) return 'sonnet-4'
+  if (model.includes('haiku')) return 'haiku-4'
+  return model.split('-').slice(0, 2).join('-')
+}
+
+function formatTime(iso: string): string {
+  if (!iso) return '--:--'
+  return new Date(iso).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+}
+
+function formatTokens(n: number): string {
+  if (!n || n <= 0) return '0'
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M'
+  if (n >= 1_000) return (n / 1_000).toFixed(1) + 'k'
+  return String(n)
+}
+
 async function scrollToBottom() {
   await nextTick()
   if (contentEl.value) {
@@ -79,23 +141,303 @@ async function scrollToBottom() {
   }
 }
 
-function pushAgentResponse(agentMsg: ChatMessage) {
-  const delay = 1200 + Math.random() * 800
-  thinkTimer = window.setTimeout(() => {
-    agentMsg.content = MOCK_RESPONSES[Math.floor(Math.random() * MOCK_RESPONSES.length)]
-    agentMsg.status = 'done'
-    scrollToBottom()
-  }, delay)
+// ── Agent matching ──
+
+function matchesAgent(agentName: string): boolean {
+  const a = props.agent
+  const name = agentName.toLowerCase()
+  return a.id.toLowerCase() === name ||
+    a.name.toLowerCase() === name ||
+    (a.uiConfig?.label || '').toLowerCase() === name
 }
 
+// ── WebSocket for real-time updates ──
+
+function connectWs() {
+  if (ws.value?.readyState === WebSocket.OPEN) return
+
+  ws.value = new WebSocket(endpoints.claudeStatus)
+
+  ws.value.onmessage = (event) => {
+    try {
+      const msg = JSON.parse(event.data)
+
+      // Real-time transcript messages
+      if (msg.type === 'transcript-update') {
+        const agentName = msg.agent || 'main'
+        if (matchesAgent(agentName)) {
+          appendTranscriptMessages(msg.messages || [])
+          // Increment session stats counts
+          if (sessionStats.value && msg.messages?.length) {
+            sessionStats.value.stats.messageCount += msg.messages.length
+          }
+        }
+      }
+
+      // Agent status (thinking indicator)
+      if (msg.type === 'claude-status') {
+        const agentName = msg.agent || 'main'
+        if (matchesAgent(agentName)) {
+          handleStatusUpdate(msg.status)
+        }
+      }
+
+      // Permission requests → intervention card with buttons
+      if (msg.type === 'claude-permission') {
+        const agentName = msg.agent || 'main'
+        if (!msg.agent || matchesAgent(agentName)) {
+          addPermissionCard(msg)
+        }
+      }
+
+      // Hook events → detect AskUserQuestion and plan mode
+      if (msg.type === 'claude-hook') {
+        const agentName = msg.agent_name || 'main'
+        if (matchesAgent(agentName)) {
+          const toolName = msg.tool_name || ''
+          const event = msg.hook_event_name || ''
+
+          if (event === 'PreToolUse' && toolName === 'AskUserQuestion') {
+            addQuestionCard(msg)
+          }
+          if (event === 'PreToolUse' && (toolName === 'ExitPlanMode' || toolName === 'EnterPlanMode')) {
+            addPlanCard(msg, toolName)
+          }
+        }
+      }
+    } catch { /* ignore */ }
+  }
+
+  ws.value.onclose = () => {
+    // Don't reconnect if panel is closed
+    if (!props.visible) return
+    setTimeout(connectWs, 2000)
+  }
+}
+
+function disconnectWs() {
+  if (ws.value) {
+    ws.value.onclose = null // Prevent reconnect
+    ws.value.close()
+    ws.value = null
+  }
+}
+
+// ── Transcript message handling ──
+
+function appendTranscriptMessages(newMsgs: any[]) {
+  // Remove thinking bubble before appending
+  const hasAssistant = newMsgs.some(m => m.role === 'assistant')
+  if (hasAssistant) {
+    removeThinkingBubble()
+  }
+
+  for (const msg of newMsgs) {
+    // Deduplicate by uuid
+    if (msg.uuid && messages.some(m => m.uuid === msg.uuid)) continue
+
+    messages.push({
+      id: ++idCounter,
+      role: msg.role === 'user' ? 'user' : 'agent',
+      content: msg.content || '',
+      status: 'done',
+      uuid: msg.uuid
+    })
+  }
+
+  scrollToBottom()
+}
+
+function handleStatusUpdate(status: string) {
+  if (status === 'processing' || status === 'thinking') {
+    ensureThinkingBubble()
+  } else if (status === 'idle') {
+    removeThinkingBubble()
+  }
+}
+
+function ensureThinkingBubble() {
+  const last = messages[messages.length - 1]
+  if (last?.status === 'thinking') return
+  messages.push({ id: ++idCounter, role: 'agent', content: '', status: 'thinking' })
+  scrollToBottom()
+}
+
+function removeThinkingBubble() {
+  const idx = messages.findIndex(m => m.status === 'thinking')
+  if (idx !== -1) messages.splice(idx, 1)
+}
+
+// ── Intervention cards ──
+
+function addPermissionCard(msg: any) {
+  if (messages.some(m => m.intervention?.requestId === msg.requestId)) return
+
+  const input = msg.tool_input || {}
+  let detail = ''
+  if (msg.tool_name === 'Bash') {
+    detail = input.command || ''
+  } else if (msg.tool_name === 'Edit' || msg.tool_name === 'Write') {
+    detail = input.file_path || ''
+  } else {
+    detail = JSON.stringify(input).slice(0, 200)
+  }
+
+  messages.push({
+    id: ++idCounter,
+    role: 'agent',
+    content: detail,
+    status: 'done',
+    intervention: {
+      type: 'permission',
+      requestId: msg.requestId,
+      toolName: msg.tool_name,
+      toolInput: input,
+      resolved: false
+    }
+  })
+  scrollToBottom()
+}
+
+function addQuestionCard(msg: any) {
+  const input = msg.tool_input || {}
+  const questions = input.questions || []
+  const q = questions[0]
+  messages.push({
+    id: ++idCounter,
+    role: 'agent',
+    content: q?.question || 'Claude is asking a question',
+    status: 'done',
+    intervention: {
+      type: 'question',
+      toolName: 'AskUserQuestion',
+      toolInput: input,
+      options: q?.options || []
+    }
+  })
+  scrollToBottom()
+}
+
+function addPlanCard(_msg: any, toolName: string) {
+  const isEnter = toolName === 'EnterPlanMode'
+  messages.push({
+    id: ++idCounter,
+    role: 'agent',
+    content: isEnter ? 'Entering plan mode...' : 'Plan ready for review',
+    status: 'done',
+    intervention: {
+      type: 'plan',
+      toolName
+    }
+  })
+  scrollToBottom()
+}
+
+async function respondPermission(msgId: number, requestId: string, decision: 'allow' | 'deny') {
+  try {
+    await fetch('/api/claude-permission-respond', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ requestId, decision })
+    })
+    const msg = messages.find(m => m.id === msgId)
+    if (msg?.intervention) {
+      msg.intervention.resolved = true
+      msg.intervention.decision = decision
+    }
+  } catch (e) {
+    console.error('[PromptBar] Failed to respond permission:', e)
+  }
+}
+
+async function loadPendingPermissions() {
+  try {
+    const res = await fetch('/api/claude-permission')
+    if (!res.ok) return
+    const data = await res.json()
+    for (const perm of data.pending || []) {
+      addPermissionCard(perm)
+    }
+  } catch { /* silent */ }
+}
+
+// ── History loading ──
+
+async function loadHistory(sessionId?: string) {
+  try {
+    const url = sessionId
+      ? `/api/transcript/${sessionId}`
+      : `/api/transcript/active?agent=${props.agent.id}`
+    const res = await fetch(url)
+    if (!res.ok) return
+
+    const data = await res.json()
+    activeSessionId.value = data.sessionId || null
+
+    messages.length = 0
+    idCounter = 0
+
+    for (const msg of data.messages || []) {
+      messages.push({
+        id: ++idCounter,
+        role: msg.role === 'user' ? 'user' : 'agent',
+        content: msg.content || '',
+        status: 'done',
+        uuid: msg.uuid
+      })
+    }
+
+    // Extract session stats
+    if (data.model || data.stats) {
+      sessionStats.value = {
+        model: data.model || '',
+        startTime: data.startTime || '',
+        duration: data.duration || 0,
+        lastStopReason: data.lastStopReason || '',
+        stats: data.stats || { messageCount: 0, toolCallCount: 0, thinkingBlocks: 0, errors: 0 },
+        tokens: data.tokens || { totalInput: 0, totalOutput: 0, totalCacheRead: 0, totalCacheCreation: 0 }
+      }
+    }
+
+    scrollToBottom()
+  } catch (e) {
+    console.error('[PromptBar] Failed to load history:', e)
+  }
+}
+
+async function fetchSessions() {
+  try {
+    const res = await fetch('/api/transcript/sessions')
+    if (!res.ok) return
+    sessions.value = await res.json()
+  } catch { /* silent */ }
+}
+
+async function fetchClaudeStats() {
+  try {
+    const res = await fetch('/api/claude-stats')
+    if (res.ok) claudeStats.value = await res.json()
+  } catch { /* silent */ }
+}
+
+async function fetchClaudeUsage() {
+  try {
+    const res = await fetch('/api/claude-usage')
+    if (res.ok) claudeUsage.value = await res.json()
+  } catch { /* silent */ }
+}
+
+function handleSessionChange(sessionId: string) {
+  activeSessionId.value = sessionId
+  loadHistory(sessionId)
+}
+
+// ── User actions ──
+
 function handleSubmit(text: string) {
   messages.push({ id: ++idCounter, role: 'user', content: text, status: 'sent' })
   emit('submit', text)
-
-  const agentMsg: ChatMessage = { id: ++idCounter, role: 'agent', content: '', status: 'thinking' }
-  messages.push(agentMsg)
-  scrollToBottom()
-  pushAgentResponse(agentMsg)
+  // Real response will arrive via transcript-update WebSocket
 }
 
 function handleMic() {
@@ -112,11 +454,8 @@ function handleTranscriptDone(text: string) {
   if (!text.trim()) return
 
   messages.push({ id: ++idCounter, role: 'user', content: text, status: 'sent' })
-
-  const agentMsg: ChatMessage = { id: ++idCounter, role: 'agent', content: '', status: 'thinking' }
-  messages.push(agentMsg)
-  scrollToBottom()
-  pushAgentResponse(agentMsg)
+  emit('submit', text)
+  // Real response will arrive via transcript-update WebSocket
 }
 
 function toggleSettings() {
@@ -140,6 +479,20 @@ watch(() => props.visible, async (v) => {
     showSettings.value = false
     messages.length = 0
     idCounter = 0
+    sessionStats.value = null
+    claudeStats.value = null
+    claudeUsage.value = null
+
+    console.log('[PromptBar] Opening for agent:', props.agent.id)
+
+    // Load real conversation history + sessions list + global stats + usage
+    await Promise.all([loadHistory(), fetchSessions(), fetchClaudeStats(), fetchClaudeUsage(), loadPendingPermissions()])
+
+    console.log('[PromptBar] Loaded', messages.length, 'messages, sessions:', sessions.value.length)
+
+    // Connect WebSocket for real-time updates
+    connectWs()
+
     await voice.init()
     await nextTick()
     if (props.startRecording) {
@@ -148,13 +501,13 @@ watch(() => props.visible, async (v) => {
       chatInputEl.value?.focus()
     }
   } else {
-    // Cleanup when panel closes
+    disconnectWs()
     if (voice.isRecording.value) {
       voice.stopRecording()
     }
     voice.cleanup()
   }
-})
+}, { immediate: true })
 
 defineExpose({ isRecording })
 
@@ -164,7 +517,7 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   document.removeEventListener('keydown', handleKeydown)
-  if (thinkTimer) clearTimeout(thinkTimer)
+  disconnectWs()
   voice.cleanup()
 })
 </script>
@@ -188,6 +541,55 @@ onBeforeUnmount(() => {
             </button>
           </div>
 
+          <!-- Info bar -->
+          <div v-if="sessionStats || claudeUsage" class="pb-info-bar">
+            <div v-if="sessionStats" class="pb-info-line">
+              <span class="accent">{{ shortModel(sessionStats.model) }}</span>
+              <span class="sep">&middot;</span>
+              <span>{{ formatTime(sessionStats.startTime) }}</span>
+              <span class="sep">&middot;</span>
+              <span>{{ sessionStats.stats.messageCount }} msgs</span>
+              <span class="sep">&middot;</span>
+              <span>{{ sessionStats.stats.toolCallCount }} tools</span>
+              <span v-if="sessionStats.stats.thinkingBlocks > 0" class="sep">&middot;</span>
+              <span v-if="sessionStats.stats.thinkingBlocks > 0" title="Thinking blocks">&#129504; {{ sessionStats.stats.thinkingBlocks }}</span>
+              <span v-if="sessionStats.stats.errors > 0" class="sep">&middot;</span>
+              <span v-if="sessionStats.stats.errors > 0" class="error-count" title="Errors">{{ sessionStats.stats.errors }} err</span>
+            </div>
+            <div v-if="sessionStats" class="pb-info-line">
+              <span>{{ formatTokens(sessionStats.tokens.totalInput + sessionStats.tokens.totalOutput) }} tokens</span>
+              <template v-if="claudeStats?.today">
+                <span class="sep">&middot;</span>
+                <span>hoy: {{ claudeStats.today.sessionCount }} sesiones</span>
+                <span class="sep">&middot;</span>
+                <span>{{ claudeStats.today.messageCount }} msgs</span>
+              </template>
+            </div>
+            <!-- Usage limits bar -->
+            <div v-if="claudeUsage" class="pb-info-line pb-usage-line">
+              <div class="pb-usage-track">
+                <div
+                  class="pb-usage-fill"
+                  :class="claudeUsage.status"
+                  :style="{ width: Math.min(claudeUsage.daily.percent, 100) + '%' }"
+                ></div>
+              </div>
+              <span class="pb-usage-percent" :class="claudeUsage.status">{{ claudeUsage.daily.percent }}%</span>
+              <span class="sep">&middot;</span>
+              <span>{{ claudeUsage.subscription.label }}</span>
+              <span class="sep">&middot;</span>
+              <span>~{{ claudeUsage.daily.used }}/{{ claudeUsage.daily.limit }}</span>
+              <span
+                v-if="claudeUsage.status === 'extended'"
+                class="pb-usage-badge extended"
+              >uso extra</span>
+              <span
+                v-else-if="claudeUsage.status === 'limit_approaching'"
+                class="pb-usage-badge approaching"
+              >cerca del limite</span>
+            </div>
+          </div>
+
           <!-- Conversation content area -->
           <div ref="contentEl" class="pb-content" :class="{ empty: !hasContent }">
             <div
@@ -199,6 +601,66 @@ onBeforeUnmount(() => {
               <template v-if="msg.role === 'user'">
                 <div class="msg-bubble user-bubble">{{ msg.content }}</div>
               </template>
+
+              <!-- Intervention card -->
+              <template v-else-if="msg.intervention">
+                <div class="intervention-card" :class="`intervention--${msg.intervention.type}`">
+                  <!-- Permission card -->
+                  <template v-if="msg.intervention.type === 'permission'">
+                    <div class="intv-header">
+                      <svg class="intv-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                        <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
+                        <line x1="12" y1="9" x2="12" y2="13"/>
+                        <line x1="12" y1="17" x2="12.01" y2="17"/>
+                      </svg>
+                      <span class="intv-title">Permission: {{ msg.intervention.toolName }}</span>
+                    </div>
+                    <div class="intv-detail">{{ msg.content }}</div>
+                    <div v-if="!msg.intervention.resolved" class="intv-actions">
+                      <button class="intv-btn intv-btn--allow" @click="respondPermission(msg.id, msg.intervention.requestId!, 'allow')">Allow</button>
+                      <button class="intv-btn intv-btn--deny" @click="respondPermission(msg.id, msg.intervention.requestId!, 'deny')">Deny</button>
+                    </div>
+                    <div v-else class="intv-resolved" :class="msg.intervention.decision === 'allow' ? 'resolved--allow' : 'resolved--deny'">
+                      {{ msg.intervention.decision === 'allow' ? 'Allowed' : 'Denied' }}
+                    </div>
+                  </template>
+
+                  <!-- Question card (info only) -->
+                  <template v-else-if="msg.intervention.type === 'question'">
+                    <div class="intv-header">
+                      <svg class="intv-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="12" cy="12" r="10"/>
+                        <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"/>
+                      </svg>
+                      <span class="intv-title">Question</span>
+                    </div>
+                    <div class="intv-detail">{{ msg.content }}</div>
+                    <div v-if="msg.intervention.options?.length" class="intv-options">
+                      <div v-for="(opt, i) in msg.intervention.options" :key="i" class="intv-option">
+                        <span class="opt-label">{{ opt.label }}</span>
+                        <span v-if="opt.description" class="opt-desc">{{ opt.description }}</span>
+                      </div>
+                    </div>
+                    <div class="intv-hint">Respond in terminal</div>
+                  </template>
+
+                  <!-- Plan card (info only) -->
+                  <template v-else-if="msg.intervention.type === 'plan'">
+                    <div class="intv-header">
+                      <svg class="intv-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+                        <polyline points="14 2 14 8 20 8"/>
+                        <line x1="16" y1="13" x2="8" y2="13"/>
+                        <line x1="16" y1="17" x2="8" y2="17"/>
+                      </svg>
+                      <span class="intv-title">{{ msg.content }}</span>
+                    </div>
+                    <div class="intv-hint">Review in terminal</div>
+                  </template>
+                </div>
+              </template>
+
               <template v-else>
                 <div class="msg-bubble agent-bubble">
                   <div v-if="msg.status === 'thinking'" class="thinking-inline">
@@ -212,7 +674,14 @@ onBeforeUnmount(() => {
             </div>
 
             <TranscriptCard v-if="showTranscript" :voice="voice" @done="handleTranscriptDone" />
-            <InputSettings v-if="showSettings" :voice="voice" @close="showSettings = false" />
+            <InputSettings
+              v-if="showSettings"
+              :voice="voice"
+              :sessions="sessions"
+              :active-session-id="activeSessionId"
+              @close="showSettings = false"
+              @select-session="handleSessionChange"
+            />
             <ConversationHistory v-if="showHistory" :agent="agent" />
           </div>
 
@@ -304,6 +773,94 @@ onBeforeUnmount(() => {
   color: rgba(255, 255, 255, 0.7);
 }
 
+/* Info bar */
+.pb-info-bar {
+  padding: 6px 14px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  font-size: 11px;
+  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
+  color: rgba(255, 255, 255, 0.4);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.pb-info-line {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.pb-info-line .sep {
+  opacity: 0.3;
+}
+
+.pb-info-line .accent {
+  color: rgba(99, 102, 241, 0.7);
+}
+
+.pb-info-line .error-count {
+  color: rgba(239, 68, 68, 0.7);
+}
+
+/* Usage bar */
+.pb-usage-line {
+  margin-top: 2px;
+}
+
+.pb-usage-track {
+  width: 60px;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 2px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.pb-usage-fill {
+  height: 100%;
+  border-radius: 2px;
+  transition: width 0.4s ease;
+}
+
+.pb-usage-fill.normal { background: rgba(34, 197, 94, 0.7); }
+.pb-usage-fill.elevated { background: rgba(234, 179, 8, 0.7); }
+.pb-usage-fill.limit_approaching { background: rgba(249, 115, 22, 0.7); }
+.pb-usage-fill.extended { background: rgba(239, 68, 68, 0.7); }
+
+.pb-usage-percent {
+  font-weight: 600;
+  font-size: 10px;
+}
+
+.pb-usage-percent.normal { color: rgba(34, 197, 94, 0.7); }
+.pb-usage-percent.elevated { color: rgba(234, 179, 8, 0.7); }
+.pb-usage-percent.limit_approaching { color: rgba(249, 115, 22, 0.7); }
+.pb-usage-percent.extended { color: rgba(239, 68, 68, 0.7); }
+
+.pb-usage-badge {
+  font-size: 9px;
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  margin-left: 2px;
+}
+
+.pb-usage-badge.extended {
+  background: rgba(239, 68, 68, 0.15);
+  color: rgba(239, 68, 68, 0.8);
+  border: 1px solid rgba(239, 68, 68, 0.2);
+}
+
+.pb-usage-badge.approaching {
+  background: rgba(249, 115, 22, 0.15);
+  color: rgba(249, 115, 22, 0.8);
+  border: 1px solid rgba(249, 115, 22, 0.2);
+}
+
 /* Content area */
 .pb-content {
   max-height: 350px;
@@ -459,6 +1016,127 @@ onBeforeUnmount(() => {
   }
 }
 
+/* Intervention cards */
+.intervention-card {
+  max-width: 95%;
+  padding: 10px 12px;
+  border-radius: 10px;
+  font-size: 12px;
+  font-family: system-ui, sans-serif;
+  animation: msg-in 0.2s ease-out;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.intervention--permission {
+  background: rgba(239, 68, 68, 0.08);
+  border: 1px solid rgba(239, 68, 68, 0.2);
+  animation: permission-pulse 2s ease-in-out infinite;
+}
+
+.intervention--question {
+  background: rgba(99, 102, 241, 0.08);
+  border: 1px solid rgba(99, 102, 241, 0.2);
+}
+
+.intervention--plan {
+  background: rgba(168, 85, 247, 0.08);
+  border: 1px solid rgba(168, 85, 247, 0.2);
+}
+
+.intv-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.intv-icon { flex-shrink: 0; }
+.intervention--permission .intv-icon { color: #f87171; }
+.intervention--question .intv-icon { color: #818cf8; }
+.intervention--plan .intv-icon { color: #a78bfa; }
+
+.intv-title {
+  font-weight: 600;
+  font-size: 11.5px;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.intv-detail {
+  font-size: 11px;
+  font-family: 'SF Mono', monospace;
+  color: rgba(255, 255, 255, 0.5);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.intv-actions {
+  display: flex;
+  gap: 6px;
+  margin-top: 2px;
+}
+
+.intv-btn {
+  padding: 4px 14px;
+  border-radius: 6px;
+  border: none;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.intv-btn--allow {
+  background: rgba(16, 185, 129, 0.15);
+  color: #34d399;
+  border: 1px solid rgba(16, 185, 129, 0.25);
+}
+.intv-btn--allow:hover { background: rgba(16, 185, 129, 0.3); }
+
+.intv-btn--deny {
+  background: rgba(239, 68, 68, 0.15);
+  color: #f87171;
+  border: 1px solid rgba(239, 68, 68, 0.25);
+}
+.intv-btn--deny:hover { background: rgba(239, 68, 68, 0.3); }
+
+.intv-resolved {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 4px;
+  width: fit-content;
+}
+.resolved--allow { background: rgba(16, 185, 129, 0.15); color: #34d399; }
+.resolved--deny { background: rgba(239, 68, 68, 0.15); color: #f87171; }
+
+.intv-options {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.intv-option {
+  padding: 4px 8px;
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+}
+.opt-label { font-size: 11px; color: rgba(255, 255, 255, 0.7); }
+.opt-desc { font-size: 10px; color: rgba(255, 255, 255, 0.35); }
+
+.intv-hint {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.3);
+  font-style: italic;
+}
+
+@keyframes permission-pulse {
+  0%, 100% { border-color: rgba(239, 68, 68, 0.2); }
+  50% { border-color: rgba(239, 68, 68, 0.4); }
+}
+
 /* Mobile */
 @media (max-width: 768px) {
   .prompt-bar-panel {
diff --git a/frontend/src/components/agent/TranscriptCard.vue b/frontend/src/components/agent/TranscriptCard.vue
index d14572a..35d7eb7 100644
--- a/frontend/src/components/agent/TranscriptCard.vue
+++ b/frontend/src/components/agent/TranscriptCard.vue
@@ -20,8 +20,10 @@ function handleStop() {
 }
 
 onMounted(() => {
-  props.voice.clearTranscript()
-  props.voice.startRecording()
+  if (!props.voice.isRecording.value) {
+    props.voice.clearTranscript()
+    props.voice.startRecording()
+  }
 })
 
 onBeforeUnmount(() => {