refactor: Improve voice and response modals UX

- Center both modals with dark backdrop and blur effect
- Make voice modal larger (420px) with bigger record button
- Make response modal larger (540px) with bigger text (18px)
- Remove auto-dismiss from bubbles - manual dismiss only
- Add backdrop click to close response modal
- Remove unused bottom sheet code from FloatingVoice
- Add touch protection CSS to prevent text selection
- Clean up mobile-specific variables no longer needed

frontend/src/components/FloatingResponse.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onBeforeUnmount } from 'vue'
+import { ref, computed } from 'vue'
 
 export interface ResponseMessage {
   id: string
@@ -9,29 +9,12 @@ export interface ResponseMessage {
 }
 
 const messages = ref<ResponseMessage[]>([])
-const isDragging = ref(false)
-const position = ref({ x: 0, y: 0 })
-const hasCustomPosition = ref(false)
-const dragOffset = ref({ x: 0, y: 0 })
 
 const isVisible = computed(() => messages.value.length > 0)
 
-// Default position: bottom-left, above the terminal FAB
-function getDefaultPosition() {
-  return {
-    x: 20,
-    y: window.innerHeight - 120
-  }
-}
-
 function addMessage(message: string, type: ResponseMessage['type'] = 'info') {
   const id = `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
 
-  // If no custom position, set default position
-  if (!hasCustomPosition.value) {
-    position.value = getDefaultPosition()
-  }
-
   messages.value.push({
     id,
     message,
@@ -39,12 +22,7 @@ function addMessage(message: string, type: ResponseMessage['type'] = 'info') {
     timestamp: Date.now()
   })
 
-  // Auto-dismiss after 10 seconds for non-error messages
-  if (type !== 'error') {
-    setTimeout(() => {
-      removeMessage(id)
-    }, 10000)
-  }
+  // No auto-dismiss - user must dismiss each message manually
 
   return id
 }
@@ -60,64 +38,6 @@ function clearAll() {
   messages.value = []
 }
 
-function startDrag(e: MouseEvent) {
-  if ((e.target as HTMLElement).closest('.close-btn')) return
-
-  isDragging.value = true
-  const container = document.querySelector('.floating-response') as HTMLElement
-  if (container) {
-    const rect = container.getBoundingClientRect()
-    if (!hasCustomPosition.value) {
-      position.value = { x: rect.left, y: rect.top }
-    }
-    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 newX = e.clientX - dragOffset.value.x
-  const newY = e.clientY - dragOffset.value.y
-
-  // Keep within viewport with some tolerance
-  const maxX = window.innerWidth - 100
-  const maxY = window.innerHeight - 50
-
-  position.value = {
-    x: Math.max(0, Math.min(newX, maxX)),
-    y: Math.max(0, Math.min(newY, maxY))
-  }
-}
-
-function stopDrag() {
-  isDragging.value = false
-  hasCustomPosition.value = true
-  document.removeEventListener('mousemove', onDrag)
-  document.removeEventListener('mouseup', stopDrag)
-}
-
-const containerStyle = computed(() => {
-  if (!hasCustomPosition.value) {
-    return {
-      bottom: '120px',
-      left: '20px'
-    }
-  }
-  return {
-    top: `${position.value.y}px`,
-    left: `${position.value.x}px`,
-    bottom: 'auto',
-    right: 'auto'
-  }
-})
-
 function getTypeIcon(type: ResponseMessage['type']) {
   switch (type) {
     case 'success': return '✓'
@@ -136,43 +56,38 @@ function getTypeColor(type: ResponseMessage['type']) {
   }
 }
 
-onBeforeUnmount(() => {
-  document.removeEventListener('mousemove', onDrag)
-  document.removeEventListener('mouseup', stopDrag)
-})
-
 // Expose controls for MCP tools
 defineExpose({
   addMessage,
   removeMessage,
   clearAll,
-  getMessages: () => messages.value,
-  move: (x: number, y: number) => {
-    position.value = { x, y }
-    hasCustomPosition.value = true
-  }
+  getMessages: () => messages.value
 })
 </script>
 
 <template>
   <Teleport to="body">
+    <!-- Backdrop -->
+    <Transition name="backdrop-fade">
+      <div v-if="isVisible" class="response-backdrop" @click="clearAll"></div>
+    </Transition>
+
     <Transition name="bubble-slide">
       <div
         v-if="isVisible"
         class="floating-response"
-        :class="{ dragging: isDragging }"
-        :style="containerStyle"
       >
         <div class="response-glass">
           <!-- Header -->
-          <div class="response-header" @mousedown="startDrag">
+          <div class="response-header">
             <div class="header-left">
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
               </svg>
               <span>Agent Response</span>
+              <span class="message-count">{{ messages.length }}</span>
             </div>
-            <button class="close-btn" @click="clearAll" title="Clear all">
+            <button class="close-btn" @click="clearAll" title="Dismiss all">
               <svg width="10" height="10" 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"/>
@@ -191,8 +106,8 @@ defineExpose({
               >
                 <span class="type-icon" :class="msg.type">{{ getTypeIcon(msg.type) }}</span>
                 <span class="message-text">{{ msg.message }}</span>
-                <button class="dismiss-btn" @click="removeMessage(msg.id)">
-                  <svg width="8" height="8" viewBox="0 0 10 10">
+                <button class="dismiss-btn" @click="removeMessage(msg.id)" title="Dismiss">
+                  <svg width="10" height="10" 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>
@@ -207,22 +122,49 @@ defineExpose({
 </template>
 
 <style scoped>
+/* Backdrop */
+.response-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 10009;
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+.backdrop-fade-enter-active,
+.backdrop-fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.backdrop-fade-enter-from,
+.backdrop-fade-leave-to {
+  opacity: 0;
+}
+
 .floating-response {
   position: fixed;
-  min-width: 280px;
-  max-width: 420px;
-  z-index: 9997;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 540px;
+  max-width: 92vw;
+  max-height: 80vh;
+  z-index: 10010;
 }
 
 .response-glass {
-  background: rgba(200, 215, 235, 0.45);
+  display: flex;
+  flex-direction: column;
+  max-height: 80vh;
+  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-radius: 12px;
   border: 1px solid rgba(255, 255, 255, 0.6);
   box-shadow:
     0 0 0 1px rgba(80, 120, 180, 0.25),
-    0 8px 32px rgba(0, 0, 0, 0.2),
+    0 12px 40px rgba(0, 0, 0, 0.3),
     inset 0 1px 0 rgba(255, 255, 255, 0.6);
   overflow: hidden;
 }
@@ -231,38 +173,45 @@ defineExpose({
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 6px 8px;
-  background: rgba(255, 255, 255, 0.3);
+  padding: 12px 16px;
+  background: rgba(255, 255, 255, 0.25);
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-  cursor: grab;
   user-select: none;
-}
-
-.floating-response.dragging .response-header {
-  cursor: grabbing;
+  flex-shrink: 0;
 }
 
 .header-left {
   display: flex;
   align-items: center;
-  gap: 6px;
-  color: #333;
-  font: 500 11px/1 system-ui, sans-serif;
+  gap: 8px;
+  color: #222;
+  font: 600 13px/1 system-ui, sans-serif;
 }
 
 .header-left svg {
-  opacity: 0.7;
+  opacity: 0.8;
+}
+
+.message-count {
+  background: rgba(99, 102, 241, 0.8);
+  color: white;
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 10px;
+  min-width: 20px;
+  text-align: center;
 }
 
 .close-btn {
-  width: 18px;
-  height: 16px;
+  width: 24px;
+  height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.4);
   border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 3px;
+  border-radius: 6px;
   color: #555;
   cursor: pointer;
   transition: all 0.15s ease;
@@ -275,128 +224,129 @@ defineExpose({
 }
 
 .messages-container {
-  padding: 8px;
-  max-height: 300px;
+  padding: 12px;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 10px;
+  flex: 1;
+  min-height: 100px;
 }
 
 .message-item {
   display: flex;
   align-items: flex-start;
-  gap: 8px;
-  padding: 10px 12px;
-  background: rgba(255, 255, 255, 0.5);
-  border-radius: 6px;
-  border-left: 3px solid var(--type-color);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  gap: 14px;
+  padding: 18px 20px;
+  background: rgba(255, 255, 255, 0.7);
+  border-radius: 12px;
+  border-left: 5px solid var(--type-color);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  transition: all 0.15s ease;
+}
+
+.message-item:hover {
+  background: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
 }
 
 .type-icon {
   flex-shrink: 0;
-  width: 18px;
-  height: 18px;
+  width: 32px;
+  height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  font-size: 10px;
-  font-weight: 600;
+  font-size: 16px;
+  font-weight: 700;
   color: white;
   background: var(--type-color);
+  margin-top: 2px;
 }
 
 .message-text {
   flex: 1;
-  font-size: 12px;
-  line-height: 1.4;
-  color: #333;
+  font-size: 18px;
+  line-height: 1.6;
+  color: #111;
   word-break: break-word;
+  font-weight: 500;
+  letter-spacing: -0.01em;
 }
 
 .dismiss-btn {
   flex-shrink: 0;
-  width: 16px;
-  height: 16px;
+  width: 28px;
+  height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: transparent;
-  border: none;
-  border-radius: 3px;
-  color: #999;
+  background: rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  color: #666;
   cursor: pointer;
-  opacity: 0;
   transition: all 0.15s ease;
-}
-
-.message-item:hover .dismiss-btn {
-  opacity: 1;
+  /* Prevent text selection */
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-touch-callout: none;
+  touch-action: manipulation;
 }
 
 .dismiss-btn:hover {
-  background: rgba(0, 0, 0, 0.1);
-  color: #666;
+  background: linear-gradient(180deg, #e66 0%, #c33 100%);
+  border-color: #a22;
+  color: #fff;
 }
 
 /* Scrollbar */
 .messages-container::-webkit-scrollbar {
-  width: 6px;
+  width: 8px;
 }
 
 .messages-container::-webkit-scrollbar-track {
   background: rgba(0, 0, 0, 0.05);
-  border-radius: 3px;
+  border-radius: 4px;
 }
 
 .messages-container::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.15);
-  border-radius: 3px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
 }
 
 .messages-container::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.25);
+  background: rgba(0, 0, 0, 0.3);
 }
 
 /* Animations */
 .bubble-slide-enter-active,
 .bubble-slide-leave-active {
-  transition: all 0.25s ease;
+  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 .bubble-slide-enter-from,
 .bubble-slide-leave-to {
   opacity: 0;
-  transform: translateY(20px) scale(0.95);
+  transform: translate(-50%, -50%) scale(0.9);
 }
 
 .message-enter-active {
-  transition: all 0.2s ease;
+  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 .message-leave-active {
-  transition: all 0.15s ease;
+  transition: all 0.2s ease;
 }
 
 .message-enter-from {
   opacity: 0;
-  transform: translateX(-10px);
+  transform: translateY(-10px) scale(0.95);
 }
 
 .message-leave-to {
   opacity: 0;
-  transform: translateX(10px);
-}
-
-@media (max-width: 480px) {
-  .floating-response {
-    left: 10px !important;
-    right: 10px !important;
-    bottom: 80px !important;
-    max-width: none;
-    min-width: auto;
-  }
+  transform: scale(0.9);
 }
 </style>