feat: Add page_refresh global tool and update voice shortcut to Ctrl+Space

- Add page_refresh tool to reload the page via MCP
- Change push-to-talk shortcut from Ctrl+S to Ctrl+Space
- Use capture phase for keyboard events to intercept before terminal

.claude/settings.local.json

@@ -45,7 +45,12 @@
       "mcp__agent-ui__localhost_4100-terminal_move",
       "mcp__agent-ui__localhost_4100-terminal_resize",
       "mcp__agent-ui__localhost_4100-terminal_toggle",
-      "mcp__agent-ui__localhost_4100-terminal_close"
+      "mcp__agent-ui__localhost_4100-terminal_close",
+      "mcp__agent-ui__localhost_4100-bubbleResponse",
+      "mcp__agent-ui__localhost_4100-notificar",
+      "mcp__agent-ui__localhost_4100-enviar_al_panel",
+      "mcp__agent-ui__localhost_4100-render_html",
+      "mcp__agent-ui__localhost_4100-load_vue_component"
     ]
   },
   "enableAllProjectMcpServers": true,

.mcp.json

@@ -6,7 +6,6 @@
       "args": [
         "git+https://gitea.nucleoriofrio.com/nucleo000/webmcp.git",
         "--mcp",
-        "--dev",
         "-p", "4102"
       ]
     }

frontend/src/App.vue

@@ -8,6 +8,7 @@ import ToolsDropdown from './components/ToolsDropdown.vue'
 import ConnectionDropdown from './components/ConnectionDropdown.vue'
 import FloatingTerminal from './components/FloatingTerminal.vue'
 import FloatingResponse from './components/FloatingResponse.vue'
+import FloatingVoice from './components/FloatingVoice.vue'
 import PwaInstallBanner from './components/PwaInstallBanner.vue'
 import { initWebMCP, getWebMCP, startTokenPolling, stopTokenPolling, connectWithToken } from './services/webmcp'
 import { initToolRegistry, activatePageTools, initToolsOnRefresh } from './services/toolRegistry'
@@ -18,6 +19,7 @@ import { useCanvasStore } from './stores/canvas'
 const route = useRoute()
 const router = useRouter()
 const showTerminal = ref(false)
+const showVoice = ref(false)
 const terminalRef = ref<InstanceType<typeof FloatingTerminal> | null>(null)
 const responseRef = ref<InstanceType<typeof FloatingResponse> | null>(null)
 const canvasStore = useCanvasStore()
@@ -157,11 +159,29 @@ watch(() => route.name, (newPage) => {
       </svg>
     </button>
 
+    <!-- Voice FAB Button -->
+    <button
+      class="voice-fab"
+      :class="{ active: showVoice }"
+      @click="showVoice = !showVoice"
+      title="Voice Input"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
+        <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
+        <line x1="12" y1="19" x2="12" y2="23"/>
+        <line x1="8" y1="23" x2="16" y2="23"/>
+      </svg>
+    </button>
+
     <!-- Floating Terminal -->
     <FloatingTerminal ref="terminalRef" v-model="showTerminal" />
 
     <!-- Floating Response (Agent UI messages) -->
     <FloatingResponse ref="responseRef" />
+
+    <!-- Floating Voice Input -->
+    <FloatingVoice v-model="showVoice" />
   </div>
 </template>
 
@@ -257,6 +277,40 @@ watch(() => route.name, (newPage) => {
   box-shadow: 0 12px 32px rgba(239, 68, 68, 0.5);
 }
 
+/* Voice FAB */
+.voice-fab {
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  color: white;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 9998;
+}
+
+.voice-fab:hover {
+  transform: scale(1.08);
+  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.5);
+}
+
+.voice-fab.active {
+  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
+}
+
+.voice-fab.active:hover {
+  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.5);
+}
+
 @media (max-width: 768px) {
   .terminal-fab {
     bottom: 16px;
@@ -269,5 +323,12 @@ watch(() => route.name, (newPage) => {
     opacity: 0;
     pointer-events: none;
   }
+
+  .voice-fab {
+    bottom: 16px;
+    left: 16px;
+    width: 44px;
+    height: 44px;
+  }
 }
 </style>

frontend/src/components/ConnectionDropdown.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useCanvasStore } from '../stores/canvas'
 import { connectWithToken, getConnectionInfo } from '../services/webmcp'
@@ -10,6 +10,18 @@ const { isConnected, isReconnecting, connectionStatus, connectionInfo } = storeT
 const isOpen = ref(false)
 const tokenInput = ref('')
 const isConnecting = ref(false)
+const justConnected = ref(false)
+
+// Watch for connection changes and trigger animation
+watch(isConnected, (newValue, oldValue) => {
+  if (newValue && !oldValue) {
+    // Just connected - trigger animation
+    justConnected.value = true
+    setTimeout(() => {
+      justConnected.value = false
+    }, 2500) // Animation duration
+  }
+})
 
 const statusText = computed(() => {
   if (isReconnecting.value) return 'Reconnecting...'
@@ -73,7 +85,7 @@ onUnmounted(() => {
 
 <template>
   <div class="connection-dropdown-container">
-    <button class="dropdown-trigger" @click.stop="toggleDropdown" title="WebMCP Connection">
+    <button class="dropdown-trigger" :class="{ 'just-connected': justConnected }" @click.stop="toggleDropdown" title="WebMCP Connection">
       <span class="status-dot" :class="statusClass"></span>
       <span>MCP</span>
       <svg class="chevron" :class="{ open: isOpen }" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -141,6 +153,7 @@ onUnmounted(() => {
 <style scoped>
 .connection-dropdown-container {
   position: relative;
+  overflow: visible;
 }
 
 .dropdown-trigger {
@@ -360,4 +373,39 @@ onUnmounted(() => {
   text-align: center;
   padding: 0.5rem 0;
 }
+
+/* Connection animation - Smooth effect */
+.dropdown-trigger.just-connected {
+  animation: connectionPulse 2s ease-in-out;
+}
+
+@keyframes connectionPulse {
+  0% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
+    border-color: var(--border-color);
+  }
+  15% {
+    transform: scale(1.05);
+    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4),
+                0 0 20px rgba(16, 185, 129, 0.2);
+    border-color: #10b981;
+  }
+  30% {
+    transform: scale(1);
+    box-shadow: 0 0 12px rgba(16, 185, 129, 0.5),
+                0 0 30px rgba(16, 185, 129, 0.25);
+    border-color: #34d399;
+  }
+  50% {
+    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4),
+                0 0 35px rgba(16, 185, 129, 0.2);
+    border-color: #10b981;
+  }
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
+    border-color: var(--border-color);
+  }
+}
 </style>

frontend/src/components/FloatingTerminal.vue

@@ -436,7 +436,14 @@ defineExpose({
     isOpen: isOpen.value,
     position: position.value,
     size: size.value
-  })
+  }),
+  sendInput: (text: string) => {
+    if (socket && socket.readyState === WebSocket.OPEN) {
+      socket.send(JSON.stringify({ type: 'input', data: text + '\r' }))
+      return true
+    }
+    return false
+  }
 })
 </script>
 

frontend/src/components/FloatingVoice.vue

@@ -0,0 +1,697 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
+import { useCanvasStore } from '../stores/canvas'
+
+const props = defineProps<{
+  modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+const canvasStore = useCanvasStore()
+
+const isOpen = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+// Recording state
+const isRecording = ref(false)
+const transcript = ref('')
+const interimTranscript = ref('')
+const error = ref('')
+
+// Position and drag state
+const position = ref({ x: 0, y: 0 })
+const hasCustomPosition = ref(false)
+const isDragging = ref(false)
+const dragOffset = ref({ x: 0, y: 0 })
+const containerRef = ref<HTMLElement | null>(null)
+
+// Speech recognition
+let recognition: SpeechRecognition | null = null
+
+// WebSocket connection (own session)
+const WS_URL = `ws://${window.location.hostname}:4103`
+let socket: WebSocket | null = null
+const connected = ref(false)
+
+// Push-to-talk state (Ctrl+S)
+let keyDownTime = 0
+let holdTimeout: number | null = null
+const isPushToTalk = ref(false)
+
+const displayText = computed(() => {
+  if (interimTranscript.value) {
+    return transcript.value + ' ' + interimTranscript.value
+  }
+  return transcript.value || 'Presiona el micrófono o mantén Ctrl+Space...'
+})
+
+const containerStyle = computed(() => {
+  if (!hasCustomPosition.value) {
+    return { bottom: '80px', left: '16px' }
+  }
+  return {
+    top: `${position.value.y}px`,
+    left: `${position.value.x}px`,
+    bottom: 'auto',
+    right: 'auto'
+  }
+})
+
+function initRecognition() {
+  const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition
+
+  if (!SpeechRecognition) {
+    error.value = 'Speech recognition not supported in this browser'
+    return null
+  }
+
+  const rec = new SpeechRecognition()
+  rec.continuous = true
+  rec.interimResults = true
+  rec.lang = 'es-ES'
+
+  rec.onresult = (event: SpeechRecognitionEvent) => {
+    let interim = ''
+    let final = ''
+
+    for (let i = event.resultIndex; i < event.results.length; i++) {
+      const result = event.results[i]
+      if (result.isFinal) {
+        final += result[0].transcript + ' '
+      } else {
+        interim += result[0].transcript
+      }
+    }
+
+    if (final) {
+      transcript.value += final
+    }
+    interimTranscript.value = interim
+  }
+
+  rec.onerror = (event: SpeechRecognitionErrorEvent) => {
+    console.error('[Voice] Recognition error:', event.error)
+    if (event.error === 'not-allowed') {
+      error.value = 'Microphone access denied'
+    } else {
+      error.value = `Error: ${event.error}`
+    }
+    isRecording.value = false
+  }
+
+  rec.onend = () => {
+    if (isRecording.value) {
+      // Restart if still recording (browser stops after silence)
+      rec.start()
+    }
+  }
+
+  return rec
+}
+
+function toggleRecording() {
+  if (isRecording.value) {
+    stopRecording()
+  } else {
+    startRecording()
+  }
+}
+
+function startRecording() {
+  error.value = ''
+  if (!recognition) {
+    recognition = initRecognition()
+  }
+  if (recognition) {
+    try {
+      recognition.start()
+      isRecording.value = true
+    } catch (e) {
+      console.error('[Voice] Failed to start:', e)
+    }
+  }
+}
+
+function stopRecording() {
+  if (recognition) {
+    recognition.stop()
+  }
+  isRecording.value = false
+  interimTranscript.value = ''
+}
+
+function clearTranscript() {
+  transcript.value = ''
+  interimTranscript.value = ''
+}
+
+function connectSocket() {
+  console.log('[Voice] connectSocket called, current socket:', socket?.readyState)
+  if (socket && socket.readyState === WebSocket.OPEN) return
+
+  socket = new WebSocket(WS_URL)
+
+  socket.onopen = () => {
+    console.log('[Voice] WebSocket connected, readyState:', socket?.readyState)
+    connected.value = true
+  }
+
+  socket.onclose = () => {
+    console.log('[Voice] WebSocket closed')
+    connected.value = false
+    socket = null
+  }
+
+  socket.onerror = (e) => {
+    console.error('[Voice] WebSocket error:', e)
+    connected.value = false
+  }
+}
+
+function disconnectSocket() {
+  if (socket) {
+    socket.close()
+    socket = null
+    connected.value = false
+  }
+}
+
+function sendTranscript() {
+  const text = transcript.value.trim()
+  if (!text) return
+
+  if (!socket || socket.readyState !== WebSocket.OPEN) {
+    canvasStore.showNotification('Not connected to terminal', 'error')
+    return
+  }
+
+  // Send text character by character then Enter
+  const chars = (text + '\r').split('')
+  let i = 0
+  const typeChar = () => {
+    if (i < chars.length && socket && socket.readyState === WebSocket.OPEN) {
+      socket.send(JSON.stringify({ type: 'input', data: chars[i] }))
+      i++
+      setTimeout(typeChar, 15)
+    } else if (i >= chars.length) {
+      canvasStore.showNotification('Voice message sent', 'success')
+      clearTranscript()
+      close()
+    }
+  }
+  typeChar()
+}
+
+function close() {
+  stopRecording()
+  isOpen.value = false
+}
+
+// Drag handlers
+function startDrag(e: MouseEvent) {
+  if ((e.target as HTMLElement).closest('.window-controls')) return
+
+  isDragging.value = true
+  const rect = containerRef.value?.getBoundingClientRect()
+  if (rect) {
+    dragOffset.value = {
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
+    }
+  }
+  document.addEventListener('mousemove', onDrag)
+  document.addEventListener('mouseup', stopDrag)
+}
+
+function onDrag(e: MouseEvent) {
+  if (!isDragging.value) return
+
+  const w = containerRef.value?.offsetWidth || 300
+  const h = containerRef.value?.offsetHeight || 200
+
+  const minX = -w * 0.75
+  const maxX = window.innerWidth - w * 0.25
+  const minY = -h * 0.75
+  const maxY = window.innerHeight - h * 0.25
+
+  position.value = {
+    x: Math.max(minX, Math.min(e.clientX - dragOffset.value.x, maxX)),
+    y: Math.max(minY, Math.min(e.clientY - dragOffset.value.y, maxY))
+  }
+  hasCustomPosition.value = true
+}
+
+function stopDrag() {
+  isDragging.value = false
+  document.removeEventListener('mousemove', onDrag)
+  document.removeEventListener('mouseup', stopDrag)
+}
+
+// Keyboard shortcut handlers (Ctrl+Space)
+function handleKeyDown(e: KeyboardEvent) {
+  if (e.ctrlKey && e.key === ' ') {
+    e.preventDefault()
+    e.stopImmediatePropagation() // Prevent terminal and other handlers from receiving
+
+    // Ignore if already holding
+    if (keyDownTime > 0) return
+
+    keyDownTime = Date.now()
+
+    // Open panel and connect if not open
+    if (!isOpen.value) {
+      isOpen.value = true
+    }
+
+    // Start recording after 150ms hold
+    holdTimeout = window.setTimeout(() => {
+      if (keyDownTime > 0 && !isRecording.value) {
+        isPushToTalk.value = true
+        startRecording()
+      }
+    }, 150)
+  }
+}
+
+function handleKeyUp(e: KeyboardEvent) {
+  // Only react to Space release when Ctrl+Space was pressed
+  if (e.key === ' ' && keyDownTime > 0) {
+    e.preventDefault()
+    e.stopImmediatePropagation() // Prevent terminal and other handlers from receiving
+    console.log('[Voice] Key S released, isPushToTalk:', isPushToTalk.value, 'isRecording:', isRecording.value)
+
+    if (holdTimeout) {
+      clearTimeout(holdTimeout)
+      holdTimeout = null
+    }
+
+    // If was push-to-talk recording, stop and send after 1200ms
+    if (isPushToTalk.value && isRecording.value) {
+      console.log('[Voice] Stopping recording, will send in 1200ms')
+      stopRecording()
+      setTimeout(() => {
+        console.log('[Voice] Sending transcript:', transcript.value.trim())
+        console.log('[Voice] Socket state:', socket?.readyState)
+        if (transcript.value.trim()) {
+          sendTranscriptAndClose()
+        } else {
+          // No transcript, just close
+          isPushToTalk.value = false
+          close()
+        }
+      }, 1200)
+    }
+
+    keyDownTime = 0
+  }
+}
+
+// Send and close for push-to-talk mode
+function sendTranscriptAndClose() {
+  console.log('[Voice] sendTranscriptAndClose called')
+  const text = transcript.value.trim()
+  if (!text) {
+    console.log('[Voice] No text, closing')
+    isPushToTalk.value = false
+    close()
+    return
+  }
+
+  console.log('[Voice] Text to send:', text)
+  console.log('[Voice] Socket:', socket, 'readyState:', socket?.readyState)
+
+  if (!socket || socket.readyState !== WebSocket.OPEN) {
+    canvasStore.showNotification('Not connected to terminal', 'error')
+    isPushToTalk.value = false
+    return
+  }
+
+  // Send text character by character then Enter
+  const chars = (text + '\r').split('')
+  let i = 0
+  const typeChar = () => {
+    if (i < chars.length && socket && socket.readyState === WebSocket.OPEN) {
+      socket.send(JSON.stringify({ type: 'input', data: chars[i] }))
+      i++
+      setTimeout(typeChar, 15)
+    } else if (i >= chars.length) {
+      canvasStore.showNotification('Voice message sent', 'success')
+      clearTranscript()
+      isPushToTalk.value = false
+      close()
+    }
+  }
+  typeChar()
+}
+
+onMounted(() => {
+  recognition = initRecognition()
+  // Use capture phase to intercept before terminal or other elements
+  document.addEventListener('keydown', handleKeyDown, { capture: true })
+  document.addEventListener('keyup', handleKeyUp, { capture: true })
+})
+
+onBeforeUnmount(() => {
+  stopRecording()
+  recognition = null
+  disconnectSocket()
+  document.removeEventListener('keydown', handleKeyDown, { capture: true })
+  document.removeEventListener('keyup', handleKeyUp, { capture: true })
+  document.removeEventListener('mousemove', onDrag)
+  document.removeEventListener('mouseup', stopDrag)
+  if (holdTimeout) clearTimeout(holdTimeout)
+})
+
+// Connect when panel opens, disconnect when closes
+watch(isOpen, (open) => {
+  if (open) {
+    connectSocket()
+  } else {
+    disconnectSocket()
+  }
+})
+
+// Expose methods
+defineExpose({
+  open: () => { isOpen.value = true },
+  close,
+  startRecording,
+  stopRecording,
+  getTranscript: () => transcript.value
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="voice-slide">
+      <div
+        v-if="isOpen"
+        ref="containerRef"
+        class="voice-window"
+        :class="{ dragging: isDragging }"
+        :style="containerStyle"
+      >
+        <div class="glass">
+          <!-- Titlebar -->
+          <div class="titlebar" @mousedown="startDrag">
+            <div class="left">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
+                <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
+                <line x1="12" y1="19" x2="12" y2="23"/>
+                <line x1="8" y1="23" x2="16" y2="23"/>
+              </svg>
+              <span>Voice</span>
+              <i class="dot" :class="{ recording: isRecording, ptt: isPushToTalk }"></i>
+            </div>
+            <div class="window-controls">
+              <button class="x" @click="close" title="Close">
+                <svg width="8" height="8" viewBox="0 0 10 10">
+                  <line x1="0" y1="0" x2="10" y2="10" stroke="currentColor" stroke-width="1.5"/>
+                  <line x1="10" y1="0" x2="0" y2="10" stroke="currentColor" stroke-width="1.5"/>
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          <!-- Content -->
+          <div class="content">
+            <div class="transcript" :class="{ empty: !transcript && !interimTranscript }">
+              <span class="final">{{ transcript }}</span>
+              <span class="interim">{{ interimTranscript }}</span>
+              <span v-if="!transcript && !interimTranscript" class="placeholder">
+                Presiona el micrófono o mantén Ctrl+Space...
+              </span>
+            </div>
+
+            <div v-if="error" class="error">{{ error }}</div>
+          </div>
+
+          <!-- Controls -->
+          <div class="controls">
+            <button
+              class="rec-btn"
+              :class="{ active: isRecording }"
+              @click="toggleRecording"
+              :title="isRecording ? 'Stop' : 'Record'"
+            >
+              <svg v-if="!isRecording" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
+                <path d="M19 10v2a7 7 0 0 1-14 0v-2" fill="none" stroke="currentColor" stroke-width="2"/>
+                <line x1="12" y1="19" x2="12" y2="23" stroke="currentColor" stroke-width="2"/>
+                <line x1="8" y1="23" x2="16" y2="23" stroke="currentColor" stroke-width="2"/>
+              </svg>
+              <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                <rect x="6" y="6" width="12" height="12" rx="2"/>
+              </svg>
+            </button>
+
+            <button class="action-btn" @click="clearTranscript" title="Clear" :disabled="!transcript">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <polyline points="3 6 5 6 21 6"/>
+                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+              </svg>
+            </button>
+
+            <button
+              class="action-btn send"
+              @click="sendTranscript"
+              title="Send to Claude"
+              :disabled="!transcript.trim()"
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <line x1="22" y1="2" x2="11" y2="13"/>
+                <polygon points="22 2 15 22 11 13 2 9 22 2"/>
+              </svg>
+              <span>Send</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.voice-window {
+  position: fixed;
+  width: 320px;
+  z-index: 9998;
+}
+
+.voice-window.dragging {
+  user-select: none;
+}
+
+.glass {
+  display: flex;
+  flex-direction: column;
+  background: rgba(200, 215, 235, 0.35);
+  backdrop-filter: blur(24px) saturate(1.6);
+  -webkit-backdrop-filter: blur(24px) saturate(1.6);
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  box-shadow:
+    0 0 0 1px rgba(80, 120, 180, 0.25),
+    0 6px 24px rgba(0, 0, 0, 0.25),
+    inset 0 1px 0 rgba(255, 255, 255, 0.6);
+  overflow: hidden;
+}
+
+.titlebar {
+  height: 26px;
+  padding: 0 6px;
+  background: rgba(255, 255, 255, 0.25);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: grab;
+  user-select: none;
+}
+
+.titlebar:active {
+  cursor: grabbing;
+}
+
+.left {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: #222;
+  font: 500 11px/1 system-ui, sans-serif;
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #999;
+}
+
+.dot.recording {
+  background: #e33;
+  box-shadow: 0 0 6px #e33;
+  animation: pulse 0.8s infinite;
+}
+
+.dot.ptt {
+  background: #f90;
+  box-shadow: 0 0 6px #f90;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.window-controls {
+  display: flex;
+  gap: 2px;
+}
+
+.window-controls button {
+  width: 20px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.3);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 3px;
+  color: #333;
+  cursor: pointer;
+}
+
+.window-controls button:hover {
+  background: rgba(255, 255, 255, 0.5);
+}
+
+.window-controls button.x:hover {
+  background: linear-gradient(180deg, #e66 0%, #c33 100%);
+  border-color: #a22;
+  color: #fff;
+}
+
+.content {
+  padding: 12px;
+  min-height: 80px;
+  max-height: 150px;
+  overflow-y: auto;
+}
+
+.transcript {
+  font-size: 13px;
+  line-height: 1.5;
+  color: #222;
+}
+
+.transcript.empty {
+  color: #666;
+  font-style: italic;
+}
+
+.transcript .interim {
+  color: #666;
+  font-style: italic;
+}
+
+.transcript .placeholder {
+  color: #888;
+}
+
+.error {
+  margin-top: 8px;
+  padding: 6px 10px;
+  background: rgba(220, 50, 50, 0.15);
+  border-radius: 4px;
+  color: #c33;
+  font-size: 11px;
+}
+
+.controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  background: rgba(255, 255, 255, 0.15);
+  border-top: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.rec-btn {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(180deg, #f5f5f5 0%, #ddd 100%);
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  color: #333;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.rec-btn:hover {
+  background: linear-gradient(180deg, #fff 0%, #eee 100%);
+}
+
+.rec-btn.active {
+  background: linear-gradient(180deg, #e55 0%, #c33 100%);
+  border-color: #a22;
+  color: #fff;
+  animation: pulse 1s infinite;
+}
+
+.action-btn {
+  height: 28px;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: rgba(255, 255, 255, 0.4);
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  color: #333;
+  font-size: 11px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.action-btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.6);
+}
+
+.action-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.action-btn.send {
+  margin-left: auto;
+  background: linear-gradient(180deg, #4a9 0%, #3a8 100%);
+  border-color: #2a7;
+  color: #fff;
+}
+
+.action-btn.send:hover:not(:disabled) {
+  background: linear-gradient(180deg, #5ba 0%, #4a9 100%);
+}
+
+/* Transitions */
+.voice-slide-enter-active,
+.voice-slide-leave-active {
+  transition: all 0.2s ease;
+}
+
+.voice-slide-enter-from,
+.voice-slide-leave-to {
+  opacity: 0;
+  transform: translateY(16px) scale(0.95);
+}
+</style>

frontend/src/services/toolRegistry.ts

@@ -127,7 +127,7 @@ function getToolConfigs(): Map<string, ToolConfig> {
 
 // Category to tool names mapping
 const categoryTools: Record<ToolCategory, string[]> = {
-  global: ['get_current_page', 'navigate_to', 'list_available_tools', 'activate_tool', 'deactivate_tool', 'pin_tool'],
+  global: ['get_current_page', 'navigate_to', 'list_available_tools', 'activate_tool', 'deactivate_tool', 'pin_tool', 'page_refresh'],
   canvas: ['render_html', 'render_vue_component'],
   component: ['save_vue_component', 'load_vue_component', 'list_vue_components', 'delete_vue_component'],
   theme: ['get_design_tokens', 'get_active_theme', 'set_theme_variable', 'save_theme', 'list_themes', 'switch_theme', 'reset_theme'],

frontend/src/services/tools/handlers/globalHandlers.ts

@@ -208,6 +208,21 @@ export function createGlobalHandlers(callbacks: ToolManagementCallbacks): ToolCo
 
         return `Herramienta "${args.tool_name}" pinneada. Permanecera activa al cambiar de pagina.`
       }
+    },
+    {
+      name: 'page_refresh',
+      description: 'Recarga la pagina completamente.',
+      category: 'global',
+      schema: {
+        type: 'object',
+        properties: {}
+      },
+      handler: () => {
+        setTimeout(() => {
+          window.location.reload()
+        }, 100)
+        return 'Recargando pagina...'
+      }
     }
   ]
 }

frontend/src/services/tools/toolDefinitions.ts

@@ -15,6 +15,7 @@ export const ALL_TOOL_METAS: ToolMeta[] = [
   { name: 'activate_tool', description: 'Activa una herramienta MCP', category: 'global' },
   { name: 'deactivate_tool', description: 'Desactiva una herramienta MCP', category: 'global' },
   { name: 'pin_tool', description: 'Pinnea una herramienta', category: 'global' },
+  { name: 'page_refresh', description: 'Recarga la pagina completamente', category: 'global' },
 
   // Canvas tools
   { name: 'render_html', description: 'Renderiza HTML en el canvas', category: 'canvas' },
@@ -65,7 +66,7 @@ export const ALL_TOOL_METAS: ToolMeta[] = [
   { name: 'terminal_toggle', description: 'Alterna abrir/cerrar el terminal', category: 'terminal' },
   { name: 'terminal_move', description: 'Mueve la ventana del terminal a una posicion', category: 'terminal' },
   { name: 'terminal_resize', description: 'Cambia el tamano de la ventana del terminal', category: 'terminal' },
-
+  
   // Response UI tools
   { name: 'bubbleResponse', description: 'Muestra un mensaje del agente en la UI', category: 'terminal' }
 ]