feat: Add transcript-debug page with multi-agent support, hooks approval, and message selection

- Transcript debug: JSONL viewer, parsed chat view, realtime WebSocket updates, session selector
- Multi-agent: ejecutor, nucleo000, and claude (global ~/.claude/projects/) with agent switcher
- Hooks approval: permission/plan request forwarding via PowerShell hooks, long-poll API, UI modals
- Chat features: session ID copy, select mode with checkboxes, multi-select copy, select all/deselect all
- File watchers for all agent transcript directories with polling fallback on Windows

frontend/src/components/transcript-debug/UserMessageBubble.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ParsedUserMessage } from '@/types/transcript-debug'
+
+const props = defineProps<{
+  message: ParsedUserMessage
+}>()
+
+const isOptimistic = computed(() => props.message.uuid.startsWith('optimistic-'))
+
+function formatTime(ts: string): string {
+  if (!ts) return ''
+  return new Date(ts).toLocaleTimeString()
+}
+</script>
+
+<template>
+  <div :class="['user-bubble', { meta: message.isMeta, optimistic: isOptimistic }]">
+    <div class="bubble-header">
+      <span class="role-badge">User</span>
+      <span v-if="message.isMeta" class="meta-badge">meta</span>
+      <span v-if="isOptimistic" class="sending-badge">
+        <span class="sending-dot"></span>
+        <span class="sending-dot"></span>
+        <span class="sending-dot"></span>
+        Sending
+      </span>
+      <span class="timestamp">{{ formatTime(message.timestamp) }}</span>
+    </div>
+    <div class="bubble-content">{{ message.content }}</div>
+  </div>
+</template>
+
+<style scoped>
+.user-bubble {
+  background: rgba(99, 102, 241, 0.08);
+  border: 1px solid rgba(99, 102, 241, 0.2);
+  border-radius: 12px;
+  padding: 0.75rem 1rem;
+  margin-left: 2rem;
+  transition: opacity 0.3s, border-color 0.3s, background 0.3s;
+}
+
+.user-bubble.meta {
+  opacity: 0.5;
+  border-style: dashed;
+}
+
+/* Optimistic / sending state */
+.user-bubble.optimistic {
+  opacity: 0.7;
+  border-color: rgba(99, 102, 241, 0.12);
+  border-style: dashed;
+  background: rgba(99, 102, 241, 0.04);
+}
+
+.sending-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 10px;
+  color: var(--accent, #6366f1);
+  font-weight: 500;
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+  background: rgba(99, 102, 241, 0.08);
+}
+
+.sending-dot {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: var(--accent, #6366f1);
+  animation: sending-pulse 1.2s ease-in-out infinite;
+}
+
+.sending-dot:nth-child(2) { animation-delay: 0.15s; }
+.sending-dot:nth-child(3) { animation-delay: 0.3s; }
+
+@keyframes sending-pulse {
+  0%, 80%, 100% { opacity: 0.2; }
+  40% { opacity: 1; }
+}
+
+.bubble-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.role-badge {
+  font-size: 11px;
+  font-weight: 600;
+  color: #818cf8;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.meta-badge {
+  font-size: 10px;
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+  background: rgba(251, 191, 36, 0.15);
+  color: #fbbf24;
+}
+
+.timestamp {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-left: auto;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
+
+.bubble-content {
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text-primary);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+</style>