From 9bd6123f97b4058d77aed1296688e2b6fb3266cc Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Wed, 18 Feb 2026 23:55:09 -0600
Subject: [PATCH] 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
---
 .claude-ejecutor/settings.json                |  33 +-
 .claude-isolated/.gitignore                   |  10 -
 .claude-isolated/settings.json                |   9 -
 .claude-nucleo000/settings.json               | 106 ++-
 frontend/src/App.vue                          |  73 +++
 .../src/components/HooksApprovalModal.vue     | 260 ++++++++
 frontend/src/components/Toolbar.vue           |   9 +
 .../AssistantMessageBubble.vue                | 189 ++++++
 .../transcript-debug/ChatContainer.vue        | 583 ++++++++++++++++
 .../transcript-debug/PermissionApproval.vue   | 213 ++++++
 .../transcript-debug/PlanApproval.vue         | 253 +++++++
 .../transcript-debug/ProgressEvent.vue        | 279 ++++++++
 .../transcript-debug/RawJsonViewer.vue        | 216 ++++++
 .../transcript-debug/SessionSelector.vue      | 110 ++++
 .../transcript-debug/SystemMessage.vue        |  90 +++
 .../transcript-debug/ThinkingBlock.vue        |  87 +++
 .../transcript-debug/ToolCallBlock.vue        | 390 +++++++++++
 .../transcript-debug/ToolResultBlock.vue      | 102 +++
 .../components/transcript-debug/UserInput.vue | 166 +++++
 .../transcript-debug/UserMessageBubble.vue    | 122 ++++
 .../src/components/transcript-debug/index.ts  |  13 +
 .../src/composables/transcript-debug/index.ts |   2 +
 .../transcript-debug/useHooksApproval.ts      | 111 ++++
 .../transcript-debug/useTranscriptDebug.ts    | 620 ++++++++++++++++++
 frontend/src/composables/useGlobalApproval.ts | 199 ++++++
 frontend/src/pages/TranscriptDebugPage.vue    | 344 ++++++++++
 frontend/src/router/index.ts                  |   5 +
 frontend/src/types/hooks-approval.ts          |  17 +
 frontend/src/types/transcript-debug.ts        | 227 +++++++
 hooks/approval-permission.ps1                 |  29 +
 hooks/approval-plan.ps1                       |  31 +
 hooks/forward-hook.ps1                        |   7 +
 server/routes/hooks-approval.ts               | 330 ++++++++++
 server/routes/index.ts                        |  52 ++
 server/routes/transcript-debug.ts             | 221 +++++++
 .../handlers/transcript-debug-handler.ts      | 160 +++++
 server/services/sync-server.ts                |  25 +-
 37 files changed, 5663 insertions(+), 30 deletions(-)
 delete mode 100644 .claude-isolated/.gitignore
 delete mode 100644 .claude-isolated/settings.json
 create mode 100644 frontend/src/components/HooksApprovalModal.vue
 create mode 100644 frontend/src/components/transcript-debug/AssistantMessageBubble.vue
 create mode 100644 frontend/src/components/transcript-debug/ChatContainer.vue
 create mode 100644 frontend/src/components/transcript-debug/PermissionApproval.vue
 create mode 100644 frontend/src/components/transcript-debug/PlanApproval.vue
 create mode 100644 frontend/src/components/transcript-debug/ProgressEvent.vue
 create mode 100644 frontend/src/components/transcript-debug/RawJsonViewer.vue
 create mode 100644 frontend/src/components/transcript-debug/SessionSelector.vue
 create mode 100644 frontend/src/components/transcript-debug/SystemMessage.vue
 create mode 100644 frontend/src/components/transcript-debug/ThinkingBlock.vue
 create mode 100644 frontend/src/components/transcript-debug/ToolCallBlock.vue
 create mode 100644 frontend/src/components/transcript-debug/ToolResultBlock.vue
 create mode 100644 frontend/src/components/transcript-debug/UserInput.vue
 create mode 100644 frontend/src/components/transcript-debug/UserMessageBubble.vue
 create mode 100644 frontend/src/components/transcript-debug/index.ts
 create mode 100644 frontend/src/composables/transcript-debug/index.ts
 create mode 100644 frontend/src/composables/transcript-debug/useHooksApproval.ts
 create mode 100644 frontend/src/composables/transcript-debug/useTranscriptDebug.ts
 create mode 100644 frontend/src/composables/useGlobalApproval.ts
 create mode 100644 frontend/src/pages/TranscriptDebugPage.vue
 create mode 100644 frontend/src/types/hooks-approval.ts
 create mode 100644 frontend/src/types/transcript-debug.ts
 create mode 100644 hooks/approval-permission.ps1
 create mode 100644 hooks/approval-plan.ps1
 create mode 100644 hooks/forward-hook.ps1
 create mode 100644 server/routes/hooks-approval.ts
 create mode 100644 server/routes/transcript-debug.ts
 create mode 100644 server/services/handlers/transcript-debug-handler.ts

diff --git a/.claude-ejecutor/settings.json b/.claude-ejecutor/settings.json
index cb7be00..744506d 100644
--- a/.claude-ejecutor/settings.json
+++ b/.claude-ejecutor/settings.json
@@ -26,7 +26,7 @@
         "hooks": [
           {
             "type": "command",
-            "command": "powershell -NoProfile -Command \"try{$b=[Console]::In.ReadToEnd();Invoke-RestMethod -Uri 'http://localhost:4101/api/claude-hook?agent=ejecutor' -Method POST -Body $b -ContentType 'application/json' -TimeoutSec 3|Out-Null}catch{}\"",
+            "command": "powershell -NoProfile -File hooks/forward-hook.ps1 ejecutor",
             "timeout": 5000
           }
         ]
@@ -38,7 +38,7 @@
         "hooks": [
           {
             "type": "command",
-            "command": "powershell -NoProfile -Command \"try{$b=[Console]::In.ReadToEnd();Invoke-RestMethod -Uri 'http://localhost:4101/api/claude-hook?agent=ejecutor' -Method POST -Body $b -ContentType 'application/json' -TimeoutSec 3|Out-Null}catch{}\"",
+            "command": "powershell -NoProfile -File hooks/forward-hook.ps1 ejecutor",
             "timeout": 5000
           }
         ]
@@ -50,7 +50,7 @@
         "hooks": [
           {
             "type": "command",
-            "command": "powershell -NoProfile -Command \"try{$b=[Console]::In.ReadToEnd();Invoke-RestMethod -Uri 'http://localhost:4101/api/claude-hook?agent=ejecutor' -Method POST -Body $b -ContentType 'application/json' -TimeoutSec 3|Out-Null}catch{}\"",
+            "command": "powershell -NoProfile -File hooks/forward-hook.ps1 ejecutor",
             "timeout": 5000
           }
         ]
@@ -61,7 +61,7 @@
         "hooks": [
           {
             "type": "command",
-            "command": "powershell -NoProfile -Command \"try{$b=[Console]::In.ReadToEnd();Invoke-RestMethod -Uri 'http://localhost:4101/api/claude-hook?agent=ejecutor' -Method POST -Body $b -ContentType 'application/json' -TimeoutSec 3|Out-Null}catch{}\"",
+            "command": "powershell -NoProfile -File hooks/forward-hook.ps1 ejecutor",
             "timeout": 5000
           }
         ]
@@ -73,7 +73,7 @@
         "hooks": [
           {
             "type": "command",
-            "command": "powershell -NoProfile -Command \"try{$b=[Console]::In.ReadToEnd();Invoke-RestMethod -Uri 'http://localhost:4101/api/claude-hook?agent=ejecutor' -Method POST -Body $b -ContentType 'application/json' -TimeoutSec 3|Out-Null}catch{}\"",
+            "command": "powershell -NoProfile -File hooks/forward-hook.ps1 ejecutor",
             "timeout": 5000
           }
         ]
@@ -85,10 +85,20 @@
         "hooks": [
           {
             "type": "command",
-            "command": "powershell -NoProfile -Command \"try{$b=[Console]::In.ReadToEnd();Invoke-RestMethod -Uri 'http://localhost:4101/api/claude-hook?agent=ejecutor' -Method POST -Body $b -ContentType 'application/json' -TimeoutSec 3|Out-Null}catch{}\"",
+            "command": "powershell -NoProfile -File hooks/forward-hook.ps1 ejecutor",
             "timeout": 5000
           }
         ]
+      },
+      {
+        "matcher": ".*",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "powershell -NoProfile -File hooks/approval-permission.ps1 ejecutor",
+            "timeout": 130000
+          }
+        ]
       }
     ],
     "Stop": [
@@ -96,10 +106,19 @@
         "hooks": [
           {
             "type": "command",
-            "command": "powershell -NoProfile -Command \"try{$b=[Console]::In.ReadToEnd();Invoke-RestMethod -Uri 'http://localhost:4101/api/claude-hook?agent=ejecutor' -Method POST -Body $b -ContentType 'application/json' -TimeoutSec 3|Out-Null}catch{}\"",
+            "command": "powershell -NoProfile -File hooks/forward-hook.ps1 ejecutor",
             "timeout": 10000
           }
         ]
+      },
+      {
+        "hooks": [
+          {
+            "type": "command",
+            "command": "powershell -NoProfile -File hooks/approval-plan.ps1 ejecutor",
+            "timeout": 130000
+          }
+        ]
       }
     ]
   }
diff --git a/.claude-isolated/.gitignore b/.claude-isolated/.gitignore
deleted file mode 100644
index ca50cc4..0000000
--- a/.claude-isolated/.gitignore
+++ /dev/null
@@ -1,10 +0,0 @@
-# No versionar credenciales
-.credentials.json
-*.backup
-
-# Estado de sesión (regenerable)
-.claude.json
-.claude.json.backup
-
-# Archivos temporales
-tmp/
diff --git a/.claude-isolated/settings.json b/.claude-isolated/settings.json
deleted file mode 100644
index c9c0a74..0000000
--- a/.claude-isolated/settings.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "permissions": {
-    "allow": [],
-    "deny": []
-  },
-  "env": {
-    "DISABLE_TELEMETRY": "1"
-  }
-}
diff --git a/.claude-nucleo000/settings.json b/.claude-nucleo000/settings.json
index c9c0a74..07e342b 100644
--- a/.claude-nucleo000/settings.json
+++ b/.claude-nucleo000/settings.json
@@ -1,9 +1,111 @@
 {
+  "env": {
+    "DISABLE_TELEMETRY": "1"
+  },
   "permissions": {
     "allow": [],
     "deny": []
   },
-  "env": {
-    "DISABLE_TELEMETRY": "1"
+  "hooks": {
+    "UserPromptSubmit": [
+      {
+        "hooks": [
+          {
+            "type": "command",
+            "command": "powershell -NoProfile -File hooks/forward-hook.ps1 nucleo000",
+            "timeout": 5000
+          }
+        ]
+      }
+    ],
+    "PreToolUse": [
+      {
+        "matcher": ".*",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "powershell -NoProfile -File hooks/forward-hook.ps1 nucleo000",
+            "timeout": 5000
+          }
+        ]
+      }
+    ],
+    "PostToolUse": [
+      {
+        "matcher": ".*",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "powershell -NoProfile -File hooks/forward-hook.ps1 nucleo000",
+            "timeout": 5000
+          }
+        ]
+      }
+    ],
+    "SessionStart": [
+      {
+        "hooks": [
+          {
+            "type": "command",
+            "command": "powershell -NoProfile -File hooks/forward-hook.ps1 nucleo000",
+            "timeout": 5000
+          }
+        ]
+      }
+    ],
+    "Notification": [
+      {
+        "matcher": ".*",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "powershell -NoProfile -File hooks/forward-hook.ps1 nucleo000",
+            "timeout": 5000
+          }
+        ]
+      }
+    ],
+    "PermissionRequest": [
+      {
+        "matcher": ".*",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "powershell -NoProfile -File hooks/forward-hook.ps1 nucleo000",
+            "timeout": 5000
+          }
+        ]
+      },
+      {
+        "matcher": ".*",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "powershell -NoProfile -File hooks/approval-permission.ps1 nucleo000",
+            "timeout": 130000
+          }
+        ]
+      }
+    ],
+    "Stop": [
+      {
+        "hooks": [
+          {
+            "type": "command",
+            "command": "powershell -NoProfile -File hooks/forward-hook.ps1 nucleo000",
+            "timeout": 10000
+          }
+        ]
+      },
+      {
+        "hooks": [
+          {
+            "type": "command",
+            "command": "powershell -NoProfile -File hooks/approval-plan.ps1 nucleo000",
+            "timeout": 130000
+          }
+        ]
+      }
+    ]
   }
 }
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 332295e..e8d1bb7 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -8,6 +8,8 @@ import FloatingResponse from './components/FloatingResponse.vue'
 import FloatingVoice from './components/FloatingVoice.vue'
 import AgentBar from './components/AgentBar.vue'
 import PwaInstallBanner from './components/PwaInstallBanner.vue'
+import HooksApprovalModal from './components/HooksApprovalModal.vue'
+import { useGlobalApproval } from './composables/useGlobalApproval'
 import { initWebMCP, getWebMCP } from './services/webmcp'
 import { initTorch, destroyTorch } from './services/torch'
 import { endpoints } from './config/endpoints'
@@ -68,6 +70,7 @@ const responseRef = ref<InstanceType<typeof FloatingResponse> | null>(null)
 const voiceRef = ref<InstanceType<typeof FloatingVoice> | null>(null)
 const canvasStore = useCanvasStore()
 const projectCanvasStore = useProjectCanvasStore()
+const { totalPending, modalVisible, connect: connectApproval, disconnect: disconnectApproval, fetchPending: fetchApprovalPending } = useGlobalApproval()
 // Voice FAB push-to-talk state
 const voicePTTActive = ref(false)
 let voiceTouchStarted = false
@@ -264,6 +267,10 @@ onMounted(async () => {
   // Connect to WebSocket for Claude status updates
   connectStatusWs()
 
+  // Connect global hooks approval WS
+  connectApproval()
+  fetchApprovalPending()
+
   // Fire torch connection early (don't await yet)
   const torchReady = initTorch()
 
@@ -349,6 +356,7 @@ onMounted(async () => {
 
 onUnmounted(() => {
   destroyTorch()
+  disconnectApproval()
   if (statusReconnectTimeout) clearTimeout(statusReconnectTimeout)
   if (processingTimeout) clearTimeout(processingTimeout)
   if (sessionStartTimeout) clearTimeout(sessionStartTimeout)
@@ -398,6 +406,18 @@ watch(() => route.name, (newPage) => {
         <PwaInstallBanner />
       </div>
       <div class="header-right">
+        <button
+          v-if="totalPending > 0 || modalVisible"
+          class="approval-badge-btn"
+          :class="{ active: modalVisible, pulse: totalPending > 0 }"
+          @click="modalVisible = !modalVisible"
+          title="Hooks Approval"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+          </svg>
+          <span v-if="totalPending > 0" class="approval-count">{{ totalPending }}</span>
+        </button>
         <button class="refresh-btn" @click="hardRefresh" title="Hard refresh (Ctrl+F5)">
           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/>
@@ -532,6 +552,9 @@ watch(() => route.name, (newPage) => {
     <!-- Floating Voice Input -->
     <FloatingVoice ref="voiceRef" v-model="showVoice" />
 
+    <!-- Global Hooks Approval Modal -->
+    <HooksApprovalModal />
+
     <!-- Debug Console Panel -->
     <Teleport to="body">
       <Transition name="debug-slide">
@@ -800,6 +823,56 @@ watch(() => route.name, (newPage) => {
   transform: rotate(180deg);
 }
 
+/* Approval badge button */
+.approval-badge-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  width: auto;
+  min-width: 28px;
+  height: 28px;
+  padding: 0 6px;
+  background: transparent;
+  border: 1px solid var(--border-color);
+  border-radius: 5px;
+  color: #f59e0b;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  position: relative;
+}
+
+.approval-badge-btn:hover {
+  background: var(--bg-hover);
+  border-color: #f59e0b;
+}
+
+.approval-badge-btn.active {
+  background: rgba(245, 158, 11, 0.15);
+  border-color: #f59e0b;
+}
+
+.approval-badge-btn.pulse {
+  animation: approval-badge-pulse 2s ease-in-out infinite;
+}
+
+.approval-count {
+  background: #ef4444;
+  color: white;
+  font-size: 9px;
+  font-weight: 700;
+  padding: 0 4px;
+  border-radius: 8px;
+  min-width: 14px;
+  text-align: center;
+  line-height: 1.4;
+}
+
+@keyframes approval-badge-pulse {
+  0%, 100% { box-shadow: none; }
+  50% { box-shadow: 0 0 8px rgba(245, 158, 11, 0.4); }
+}
+
 .app-main {
   display: flex;
   flex: 1;
diff --git a/frontend/src/components/HooksApprovalModal.vue b/frontend/src/components/HooksApprovalModal.vue
new file mode 100644
index 0000000..26d24d7
--- /dev/null
+++ b/frontend/src/components/HooksApprovalModal.vue
@@ -0,0 +1,260 @@
+<script setup lang="ts">
+import { watch } from 'vue'
+import { useGlobalApproval } from '@/composables/useGlobalApproval'
+import PermissionApproval from './transcript-debug/PermissionApproval.vue'
+import PlanApproval from './transcript-debug/PlanApproval.vue'
+
+const {
+  totalPending,
+  groupedBySession,
+  modalVisible,
+  respondPermission,
+  respondPlan
+} = useGlobalApproval()
+
+function truncateId(id: string): string {
+  if (id.length <= 12) return id
+  return id.slice(0, 6) + '...' + id.slice(-4)
+}
+
+// Auto-hide after 1s when empty
+let autoHideTimer: ReturnType<typeof setTimeout> | null = null
+
+watch(totalPending, (val) => {
+  if (autoHideTimer) {
+    clearTimeout(autoHideTimer)
+    autoHideTimer = null
+  }
+  if (val === 0 && modalVisible.value) {
+    autoHideTimer = setTimeout(() => {
+      modalVisible.value = false
+    }, 1000)
+  }
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="approval-modal">
+      <div v-if="modalVisible" class="approval-backdrop" @click.self="modalVisible = false">
+        <div class="approval-panel">
+          <div class="panel-header">
+            <span class="panel-title">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+              </svg>
+              Hooks Approval
+            </span>
+            <span v-if="totalPending > 0" class="panel-count">{{ totalPending }}</span>
+            <button class="panel-close" @click="modalVisible = false" title="Minimize">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <line x1="5" y1="12" x2="19" y2="12"/>
+              </svg>
+            </button>
+          </div>
+
+          <div class="panel-body">
+            <template v-if="groupedBySession.length > 0">
+              <div v-for="group in groupedBySession" :key="group.sessionId" class="session-group">
+                <div class="session-header">
+                  <span class="session-agent">{{ group.agent }}</span>
+                  <span class="session-sep">/</span>
+                  <span class="session-id" :title="group.sessionId">{{ truncateId(group.sessionId) }}</span>
+                  <span class="session-count">{{ group.permissions.length + group.plans.length }}</span>
+                </div>
+
+                <PermissionApproval
+                  v-for="perm in group.permissions"
+                  :key="perm.requestId"
+                  :request="perm"
+                  @respond="respondPermission"
+                />
+                <PlanApproval
+                  v-for="plan in group.plans"
+                  :key="plan.requestId"
+                  :request="plan"
+                  @respond="(id, decision, reason) => respondPlan(id, decision, reason)"
+                />
+              </div>
+            </template>
+
+            <div v-else class="empty-state">
+              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.4">
+                <polyline points="20 6 9 17 4 12"/>
+              </svg>
+              <span>No pending approvals</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.approval-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+  z-index: 10012;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.approval-panel {
+  width: 90%;
+  max-width: 600px;
+  max-height: 80vh;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+  flex-shrink: 0;
+}
+
+.panel-title {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.panel-title svg {
+  color: #f59e0b;
+}
+
+.panel-count {
+  background: #ef4444;
+  color: white;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 0.1rem 0.45rem;
+  border-radius: 10px;
+  min-width: 18px;
+  text-align: center;
+  line-height: 1.3;
+}
+
+.panel-close {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.panel-close:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.panel-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.session-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.session-header {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.25rem 0;
+}
+
+.session-agent {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--accent, #6366f1);
+}
+
+.session-sep {
+  font-size: 11px;
+  color: var(--text-muted);
+  opacity: 0.4;
+}
+
+.session-id {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
+
+.session-count {
+  margin-left: auto;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-muted);
+  background: var(--bg-hover);
+  padding: 0.1rem 0.4rem;
+  border-radius: 8px;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 2rem;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+/* Modal transition */
+.approval-modal-enter-active,
+.approval-modal-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.approval-modal-enter-active .approval-panel,
+.approval-modal-leave-active .approval-panel {
+  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
+}
+
+.approval-modal-enter-from,
+.approval-modal-leave-to {
+  opacity: 0;
+}
+
+.approval-modal-enter-from .approval-panel {
+  transform: scale(0.95);
+  opacity: 0;
+}
+
+.approval-modal-leave-to .approval-panel {
+  transform: scale(0.95);
+  opacity: 0;
+}
+</style>
diff --git a/frontend/src/components/Toolbar.vue b/frontend/src/components/Toolbar.vue
index 0fff2ea..b46ee8f 100644
--- a/frontend/src/components/Toolbar.vue
+++ b/frontend/src/components/Toolbar.vue
@@ -131,6 +131,15 @@ onMounted(() => {
           <path d="M12 2L9.5 7.5 4 8.5l4 4-1 5.5L12 15l5 3-1-5.5 4-4-5.5-1z"/>
         </svg>
       </RouterLink>
+
+      <RouterLink to="/transcript-debug" class="toolbar-btn" :class="{ active: route.path === '/transcript-debug' }" title="Transcript Debug">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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>
+      </RouterLink>
     </div>
 
     <div class="toolbar-divider"></div>
diff --git a/frontend/src/components/transcript-debug/AssistantMessageBubble.vue b/frontend/src/components/transcript-debug/AssistantMessageBubble.vue
new file mode 100644
index 0000000..c71d2d3
--- /dev/null
+++ b/frontend/src/components/transcript-debug/AssistantMessageBubble.vue
@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ParsedAssistantMessage } from '@/types/transcript-debug'
+import ThinkingBlock from './ThinkingBlock.vue'
+import ToolCallBlock from './ToolCallBlock.vue'
+
+const props = defineProps<{
+  message: ParsedAssistantMessage
+}>()
+
+// Filter out empty text blocks (streaming placeholders)
+const visibleTextBlocks = computed(() =>
+  props.message.textBlocks.filter(t => t.trim().length > 0)
+)
+
+// Show thinking animation when assistant has no real content yet
+const isStreaming = computed(() =>
+  visibleTextBlocks.value.length === 0 &&
+  props.message.thinkingBlocks.length === 0 &&
+  props.message.toolCalls.length === 0 &&
+  !props.message.stopReason
+)
+
+function formatTime(ts: string): string {
+  if (!ts) return ''
+  return new Date(ts).toLocaleTimeString()
+}
+
+function formatTokens(n?: number): string {
+  if (!n) return '0'
+  if (n >= 1000) return `${(n / 1000).toFixed(1)}k`
+  return String(n)
+}
+</script>
+
+<template>
+  <div class="assistant-bubble">
+    <div class="bubble-header">
+      <span class="role-badge">Assistant</span>
+      <span class="model-badge">{{ message.model }}</span>
+      <span v-if="message.usage" class="token-info">
+        {{ formatTokens(message.usage.input_tokens) }}in / {{ formatTokens(message.usage.output_tokens) }}out
+      </span>
+      <span v-if="message.stopReason" class="stop-reason">{{ message.stopReason }}</span>
+      <span class="timestamp">{{ formatTime(message.timestamp) }}</span>
+    </div>
+
+    <!-- Streaming/thinking animation -->
+    <div v-if="isStreaming" class="thinking-animation">
+      <div class="thinking-dots">
+        <span class="dot"></span>
+        <span class="dot"></span>
+        <span class="dot"></span>
+      </div>
+      <span class="thinking-label">Thinking...</span>
+    </div>
+
+    <!-- Thinking blocks -->
+    <ThinkingBlock
+      v-for="(t, i) in message.thinkingBlocks"
+      :key="'think-' + i"
+      :content="t"
+    />
+
+    <!-- Text content (filtered) -->
+    <div v-for="(text, i) in visibleTextBlocks" :key="'text-' + i" class="text-content">
+      {{ text }}
+    </div>
+
+    <!-- Tool calls -->
+    <ToolCallBlock
+      v-for="tc in message.toolCalls"
+      :key="tc.id"
+      :call="tc"
+    />
+  </div>
+</template>
+
+<style scoped>
+.assistant-bubble {
+  background: rgba(34, 197, 94, 0.05);
+  border: 1px solid rgba(34, 197, 94, 0.15);
+  border-radius: 12px;
+  padding: 0.75rem 1rem;
+  margin-right: 2rem;
+}
+
+.bubble-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.role-badge {
+  font-size: 11px;
+  font-weight: 600;
+  color: #22c55e;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.model-badge {
+  font-size: 10px;
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+  background: rgba(99, 102, 241, 0.1);
+  color: var(--accent, #6366f1);
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
+
+.token-info {
+  font-size: 10px;
+  color: var(--text-muted);
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
+
+.stop-reason {
+  font-size: 10px;
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+  background: var(--bg-hover);
+  color: var(--text-muted);
+}
+
+.timestamp {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-left: auto;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
+
+/* Thinking animation */
+.thinking-animation {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0;
+}
+
+.thinking-dots {
+  display: flex;
+  gap: 4px;
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #22c55e;
+  opacity: 0.4;
+  animation: pulse-dot 1.4s ease-in-out infinite;
+}
+
+.dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes pulse-dot {
+  0%, 80%, 100% {
+    opacity: 0.2;
+    transform: scale(0.8);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+}
+
+.thinking-label {
+  font-size: 12px;
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+.text-content {
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text-primary);
+  white-space: pre-wrap;
+  word-break: break-word;
+  margin: 0.25rem 0;
+}
+</style>
diff --git a/frontend/src/components/transcript-debug/ChatContainer.vue b/frontend/src/components/transcript-debug/ChatContainer.vue
new file mode 100644
index 0000000..d65c9db
--- /dev/null
+++ b/frontend/src/components/transcript-debug/ChatContainer.vue
@@ -0,0 +1,583 @@
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from 'vue'
+import type {
+  ParsedConversation,
+  ParsedUserMessage,
+  ParsedAssistantMessage,
+  ParsedSystemMessage,
+  ConversationMessage
+} from '@/types/transcript-debug'
+import UserMessageBubble from './UserMessageBubble.vue'
+import AssistantMessageBubble from './AssistantMessageBubble.vue'
+import ProgressEvent from './ProgressEvent.vue'
+import SystemMessage from './SystemMessage.vue'
+import UserInput from './UserInput.vue'
+
+const props = defineProps<{
+  conversation: ParsedConversation
+  processing?: boolean
+}>()
+
+const emit = defineEmits<{
+  send: [message: string]
+}>()
+
+const scrollContainer = ref<HTMLElement | null>(null)
+
+// ── Clipboard for session ID ──
+const idCopied = ref(false)
+async function copySessionId() {
+  await navigator.clipboard.writeText(props.conversation.sessionId)
+  idCopied.value = true
+  setTimeout(() => (idCopied.value = false), 1500)
+}
+
+// ── Multi-select ──
+const selectMode = ref(false)
+const selectedUuids = ref(new Set<string>())
+const hasSelection = computed(() => selectedUuids.value.size > 0)
+
+function toggleSelectMode() {
+  selectMode.value = !selectMode.value
+  if (!selectMode.value) selectedUuids.value = new Set()
+}
+
+function toggleSelect(uuid: string) {
+  if (!selectMode.value) return
+  const s = new Set(selectedUuids.value)
+  if (s.has(uuid)) s.delete(uuid)
+  else s.add(uuid)
+  selectedUuids.value = s
+}
+
+const selectableUuids = computed(() =>
+  props.conversation.messages.filter(m => m.kind !== 'progress').map(m => m.uuid)
+)
+const allSelected = computed(() =>
+  selectableUuids.value.length > 0 && selectableUuids.value.every(u => selectedUuids.value.has(u))
+)
+
+function toggleSelectAll() {
+  if (allSelected.value) {
+    selectedUuids.value = new Set()
+  } else {
+    selectedUuids.value = new Set(selectableUuids.value)
+  }
+}
+
+function clearSelection() {
+  selectedUuids.value = new Set()
+}
+
+function messageToText(msg: ConversationMessage): string {
+  switch (msg.kind) {
+    case 'user': {
+      const u = msg as ParsedUserMessage
+      return `[User] ${u.content}`
+    }
+    case 'assistant': {
+      const a = msg as ParsedAssistantMessage
+      const parts: string[] = []
+      for (const t of a.textBlocks) {
+        if (t.trim()) parts.push(t)
+      }
+      for (const tc of a.toolCalls) {
+        parts.push(`[Tool: ${tc.name}] ${JSON.stringify(tc.input)}`)
+        if (tc.result) {
+          parts.push(`[Result${tc.result.isError ? ' ERROR' : ''}] ${tc.result.content}`)
+        }
+      }
+      return `[Assistant] ${parts.join('\n')}`
+    }
+    case 'system': {
+      const s = msg as ParsedSystemMessage
+      return `[System] ${s.content}`
+    }
+    default:
+      return ''
+  }
+}
+
+const selectedCopied = ref(false)
+async function copySelected() {
+  const ordered = props.conversation.messages.filter(m => selectedUuids.value.has(m.uuid))
+  const text = ordered.map(messageToText).filter(Boolean).join('\n\n')
+  await navigator.clipboard.writeText(text)
+  selectedCopied.value = true
+  setTimeout(() => (selectedCopied.value = false), 1500)
+}
+
+// Track messages that just resolved from optimistic → real
+// These skip the bounce animation and get a smooth transition instead
+const resolvedUuids = ref(new Set<string>())
+
+// Scroll to bottom when a new transcript is loaded
+watch(
+  () => props.conversation.sessionId,
+  async () => {
+    await nextTick()
+    if (scrollContainer.value) {
+      scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight
+    }
+  },
+  { immediate: true }
+)
+
+// Auto-scroll to bottom when messages change
+watch(
+  () => props.conversation.messages.length,
+  async () => {
+    await nextTick()
+    if (scrollContainer.value) {
+      scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight
+    }
+  }
+)
+
+// Watch for optimistic messages disappearing
+watch(
+  () => props.conversation.messages.map(m => m.uuid).join(','),
+  (newKeys, oldKeys) => {
+    if (!oldKeys) return
+    const oldHadOptimistic = oldKeys.includes('optimistic-')
+    const newHasOptimistic = newKeys.includes('optimistic-')
+
+    if (oldHadOptimistic && !newHasOptimistic) {
+      // Optimistic just got replaced — mark new user messages as resolved
+      const oldSet = new Set(oldKeys.split(','))
+      const newUuids = newKeys.split(',').filter(k => !oldSet.has(k))
+      for (const uuid of newUuids) {
+        resolvedUuids.value.add(uuid)
+      }
+      // Clear after animation
+      setTimeout(() => resolvedUuids.value.clear(), 400)
+    }
+  }
+)
+
+function formatDuration(start: string, end: string): string {
+  if (!start || !end) return ''
+  const ms = new Date(end).getTime() - new Date(start).getTime()
+  const s = Math.floor(ms / 1000)
+  if (s < 60) return `${s}s`
+  const m = Math.floor(s / 60)
+  const rs = s % 60
+  return `${m}m ${rs}s`
+}
+</script>
+
+<template>
+  <div class="chat-container">
+    <div class="chat-header">
+      <div class="chat-title-row">
+        <span class="session-id" :title="conversation.sessionId">{{ conversation.sessionId }}</span>
+        <button class="copy-id-btn" :class="{ copied: idCopied }" @click="copySessionId" title="Copy session ID">
+          <svg v-if="!idCopied" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+          </svg>
+          <svg v-else width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="20 6 9 17 4 12"/>
+          </svg>
+        </button>
+        <div class="header-spacer"></div>
+        <button :class="['select-mode-btn', { active: selectMode }]" @click="toggleSelectMode" title="Toggle select mode">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline v-if="selectMode" points="20 6 9 17 4 12"/>
+            <template v-else>
+              <rect x="3" y="3" width="7" height="7" rx="1"/>
+              <rect x="14" y="3" width="7" height="7" rx="1"/>
+              <rect x="3" y="14" width="7" height="7" rx="1"/>
+              <rect x="14" y="14" width="7" height="7" rx="1"/>
+            </template>
+          </svg>
+          <span class="select-mode-label">{{ selectMode ? 'Done' : 'Select' }}</span>
+        </button>
+      </div>
+      <div class="chat-meta">
+        <span v-if="conversation.model" class="meta-badge model">{{ conversation.model }}</span>
+        <span v-if="conversation.version" class="meta-badge version">v{{ conversation.version }}</span>
+        <span v-if="conversation.metadata.cwd" class="meta-cwd" :title="conversation.metadata.cwd">
+          {{ conversation.metadata.cwd }}
+        </span>
+        <span class="meta-duration">
+          {{ formatDuration(conversation.metadata.startTime, conversation.metadata.endTime) }}
+        </span>
+        <span class="meta-count">{{ conversation.messages.length }} messages</span>
+      </div>
+    </div>
+    <div ref="scrollContainer" class="messages-scroll">
+      <div
+        v-for="msg in conversation.messages"
+        :key="msg.uuid"
+        :class="['message-wrapper', {
+          resolved: resolvedUuids.has(msg.uuid),
+          selected: selectedUuids.has(msg.uuid)
+        }]"
+      >
+        <!-- Select checkbox -->
+        <button
+          v-if="selectMode && msg.kind !== 'progress'"
+          :class="['select-checkbox', { checked: selectedUuids.has(msg.uuid) }]"
+          @click.stop="toggleSelect(msg.uuid)"
+          :title="selectedUuids.has(msg.uuid) ? 'Deselect' : 'Select'"
+        >
+          <svg v-if="selectedUuids.has(msg.uuid)" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <polyline points="20 6 9 17 4 12"/>
+          </svg>
+        </button>
+
+        <div :class="['message-content', { selectable: selectMode && msg.kind !== 'progress' }]" @click="selectMode && msg.kind !== 'progress' ? toggleSelect(msg.uuid) : undefined">
+          <UserMessageBubble
+            v-if="msg.kind === 'user'"
+            :message="msg"
+          />
+          <AssistantMessageBubble
+            v-else-if="msg.kind === 'assistant'"
+            :message="msg"
+          />
+          <ProgressEvent
+            v-else-if="msg.kind === 'progress'"
+            :group="msg"
+          />
+          <SystemMessage
+            v-else-if="msg.kind === 'system'"
+            :message="msg"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Selection floating bar -->
+    <Transition name="slide-up">
+      <div v-if="selectMode" class="selection-bar">
+        <button class="selection-btn toggle-all" @click="toggleSelectAll">
+          {{ allSelected ? 'Deselect all' : 'Select all' }}
+        </button>
+        <span class="selection-count">{{ selectedUuids.size }} selected</span>
+        <button v-if="hasSelection" class="selection-btn copy" @click="copySelected">
+          <svg v-if="!selectedCopied" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+          </svg>
+          <svg v-else width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="20 6 9 17 4 12"/>
+          </svg>
+          {{ selectedCopied ? 'Copied!' : 'Copy' }}
+        </button>
+        <button v-if="hasSelection" class="selection-btn cancel" @click="clearSelection" title="Clear selection">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="18" y1="6" x2="6" y2="18"/>
+            <line x1="6" y1="6" x2="18" y2="18"/>
+          </svg>
+        </button>
+      </div>
+    </Transition>
+
+    <UserInput
+      :processing="props.processing"
+      @send="emit('send', $event)"
+    />
+  </div>
+</template>
+
+<style scoped>
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  overflow: hidden;
+  position: relative;
+}
+
+.chat-header {
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+  flex-shrink: 0;
+}
+
+.chat-title-row {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.header-spacer {
+  flex: 1;
+}
+
+.select-mode-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--border-color);
+  border-radius: 5px;
+  background: transparent;
+  cursor: pointer;
+  color: var(--text-muted);
+  font-size: 11px;
+  font-weight: 500;
+  transition: all 0.15s;
+  flex-shrink: 0;
+}
+
+.select-mode-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.select-mode-btn.active {
+  background: var(--accent, #6366f1);
+  border-color: var(--accent, #6366f1);
+  color: white;
+}
+
+.select-mode-label {
+  white-space: nowrap;
+}
+
+.session-id {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 320px;
+  letter-spacing: 0.3px;
+}
+
+.copy-id-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--text-muted);
+  flex-shrink: 0;
+  transition: all 0.15s;
+}
+
+.copy-id-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.copy-id-btn.copied {
+  color: #22c55e;
+}
+
+.chat-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+  flex-wrap: wrap;
+}
+
+.meta-badge {
+  font-size: 10px;
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
+
+.meta-badge.model {
+  background: rgba(99, 102, 241, 0.1);
+  color: var(--accent, #6366f1);
+}
+
+.meta-badge.version {
+  background: var(--bg-hover);
+  color: var(--text-muted);
+}
+
+.meta-cwd {
+  font-size: 10px;
+  color: var(--text-muted);
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 250px;
+}
+
+.meta-duration {
+  font-size: 10px;
+  color: var(--text-muted);
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
+
+.meta-count {
+  font-size: 10px;
+  color: var(--text-muted);
+  margin-left: auto;
+}
+
+.messages-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.message-wrapper {
+  animation: fadeIn 0.15s ease-out;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.4rem;
+  position: relative;
+}
+
+.message-wrapper.selected {
+  background: rgba(99, 102, 241, 0.06);
+  border-radius: 8px;
+  margin: -0.25rem -0.4rem;
+  padding: 0.25rem 0.4rem;
+}
+
+/* Messages that replaced an optimistic one: smooth settle instead of bounce */
+.message-wrapper.resolved {
+  animation: resolveIn 0.3s ease-out;
+}
+
+.message-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.message-content.selectable {
+  cursor: pointer;
+}
+
+/* ── Select checkbox ── */
+.select-checkbox {
+  width: 20px;
+  height: 20px;
+  min-width: 20px;
+  border: 1.5px solid var(--border-color);
+  border-radius: 4px;
+  background: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 0.6rem;
+  transition: all 0.15s;
+  color: transparent;
+  flex-shrink: 0;
+}
+
+.select-checkbox:hover {
+  border-color: var(--accent, #6366f1);
+  background: rgba(99, 102, 241, 0.06);
+}
+
+.select-checkbox.checked {
+  background: var(--accent, #6366f1);
+  border-color: var(--accent, #6366f1);
+  color: white;
+}
+
+/* ── Selection floating bar ── */
+.selection-bar {
+  position: absolute;
+  bottom: 4.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.4rem 0.6rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+  z-index: 10;
+}
+
+.selection-count {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  padding: 0 0.25rem;
+}
+
+.selection-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.3rem 0.6rem;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 500;
+  transition: all 0.15s;
+}
+
+.selection-btn.toggle-all {
+  background: var(--bg-hover);
+  color: var(--text-secondary);
+}
+
+.selection-btn.toggle-all:hover {
+  color: var(--text-primary);
+  filter: brightness(1.1);
+}
+
+.selection-btn.copy {
+  background: var(--accent, #6366f1);
+  color: white;
+}
+
+.selection-btn.copy:hover {
+  filter: brightness(1.1);
+}
+
+.selection-btn.cancel {
+  background: transparent;
+  color: var(--text-muted);
+  padding: 0.3rem;
+}
+
+.selection-btn.cancel:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+/* ── Slide-up transition ── */
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: all 0.2s ease;
+}
+
+.slide-up-enter-from,
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translateX(-50%) translateY(8px);
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes resolveIn {
+  from { opacity: 0.7; }
+  to { opacity: 1; }
+}
+</style>
diff --git a/frontend/src/components/transcript-debug/PermissionApproval.vue b/frontend/src/components/transcript-debug/PermissionApproval.vue
new file mode 100644
index 0000000..dbf9dca
--- /dev/null
+++ b/frontend/src/components/transcript-debug/PermissionApproval.vue
@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import type { HooksApprovalPermissionRequest } from '@/types/hooks-approval'
+
+const props = defineProps<{
+  request: HooksApprovalPermissionRequest
+}>()
+
+const emit = defineEmits<{
+  respond: [requestId: string, decision: 'allow' | 'deny']
+}>()
+
+function formatInput(input: unknown): string {
+  if (!input) return ''
+  if (typeof input === 'string') return input
+  try {
+    return JSON.stringify(input, null, 2)
+  } catch {
+    return String(input)
+  }
+}
+
+function elapsed(): string {
+  const ms = Date.now() - props.request.timestamp
+  const s = Math.floor(ms / 1000)
+  if (s < 60) return `${s}s ago`
+  return `${Math.floor(s / 60)}m ${s % 60}s ago`
+}
+</script>
+
+<template>
+  <div class="permission-card">
+    <div class="card-header">
+      <span class="card-icon">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+        </svg>
+      </span>
+      <span class="card-label">Permission Request</span>
+      <span class="card-elapsed">{{ elapsed() }}</span>
+    </div>
+
+    <div class="card-body">
+      <div class="info-row" v-if="request.tool_name">
+        <span class="info-label">Tool</span>
+        <code class="info-value tool-name">{{ request.tool_name }}</code>
+      </div>
+      <div class="info-row" v-if="request.agent_name">
+        <span class="info-label">Agent</span>
+        <span class="info-value">{{ request.agent_name }}</span>
+      </div>
+      <div v-if="request.tool_input" class="input-block">
+        <span class="info-label">Input</span>
+        <pre class="input-pre">{{ formatInput(request.tool_input) }}</pre>
+      </div>
+    </div>
+
+    <div class="card-actions">
+      <button class="btn btn-allow" @click="emit('respond', request.requestId, 'allow')">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+          <polyline points="20 6 9 17 4 12"/>
+        </svg>
+        Allow
+      </button>
+      <button class="btn btn-deny" @click="emit('respond', request.requestId, 'deny')">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+          <line x1="18" y1="6" x2="6" y2="18"/>
+          <line x1="6" y1="6" x2="18" y2="18"/>
+        </svg>
+        Deny
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.permission-card {
+  border: 1px solid var(--border-color);
+  border-left: 3px solid #f59e0b;
+  border-radius: 8px;
+  background: var(--bg-secondary);
+  overflow: hidden;
+  animation: slideIn 0.2s ease-out;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: rgba(245, 158, 11, 0.06);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.card-icon {
+  color: #f59e0b;
+  display: flex;
+  align-items: center;
+}
+
+.card-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #f59e0b;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.card-elapsed {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--text-muted);
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
+
+.card-body {
+  padding: 0.6rem 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.info-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.info-label {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-weight: 500;
+  min-width: 40px;
+  flex-shrink: 0;
+}
+
+.info-value {
+  font-size: 13px;
+  color: var(--text-primary);
+}
+
+.tool-name {
+  background: rgba(99, 102, 241, 0.1);
+  color: var(--accent, #6366f1);
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+  font-size: 12px;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
+
+.input-block {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.input-pre {
+  margin: 0;
+  padding: 0.5rem;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  font-size: 11px;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  color: var(--text-secondary);
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 150px;
+  overflow-y: auto;
+}
+
+.card-actions {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-top: 1px solid var(--border-color);
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.4rem 0.75rem;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 600;
+  transition: all 0.15s;
+}
+
+.btn-allow {
+  background: #22c55e;
+  color: white;
+}
+
+.btn-allow:hover {
+  background: #16a34a;
+}
+
+.btn-deny {
+  background: #ef4444;
+  color: white;
+}
+
+.btn-deny:hover {
+  background: #dc2626;
+}
+
+@keyframes slideIn {
+  from { opacity: 0; transform: translateY(-8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+</style>
diff --git a/frontend/src/components/transcript-debug/PlanApproval.vue b/frontend/src/components/transcript-debug/PlanApproval.vue
new file mode 100644
index 0000000..b699397
--- /dev/null
+++ b/frontend/src/components/transcript-debug/PlanApproval.vue
@@ -0,0 +1,253 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { HooksApprovalPlanRequest } from '@/types/hooks-approval'
+
+const props = defineProps<{
+  request: HooksApprovalPlanRequest
+}>()
+
+const emit = defineEmits<{
+  respond: [requestId: string, decision: 'approve' | 'reject' | 'edit', reason?: string]
+}>()
+
+const showEditor = ref(false)
+const editReason = ref('')
+
+function elapsed(): string {
+  const ms = Date.now() - props.request.timestamp
+  const s = Math.floor(ms / 1000)
+  if (s < 60) return `${s}s ago`
+  return `${Math.floor(s / 60)}m ${s % 60}s ago`
+}
+
+function handleEdit() {
+  if (!showEditor.value) {
+    showEditor.value = true
+    return
+  }
+  emit('respond', props.request.requestId, 'edit', editReason.value)
+}
+</script>
+
+<template>
+  <div class="plan-card">
+    <div class="card-header">
+      <span class="card-icon">
+        <svg width="16" height="16" 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>
+      <span class="card-label">Plan Approval</span>
+      <span class="card-elapsed">{{ elapsed() }}</span>
+    </div>
+
+    <div class="card-body">
+      <div v-if="request.lastAssistantText" class="plan-text">
+        <pre class="plan-pre">{{ request.lastAssistantText }}</pre>
+      </div>
+      <div v-else class="plan-empty">
+        Claude is waiting for plan approval
+      </div>
+
+      <Transition name="expand">
+        <div v-if="showEditor" class="edit-section">
+          <textarea
+            v-model="editReason"
+            class="edit-textarea"
+            placeholder="Add instructions or feedback..."
+            rows="3"
+          ></textarea>
+        </div>
+      </Transition>
+    </div>
+
+    <div class="card-actions">
+      <button class="btn btn-approve" @click="emit('respond', request.requestId, 'approve')">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+          <polyline points="20 6 9 17 4 12"/>
+        </svg>
+        Approve
+      </button>
+      <button class="btn btn-edit" @click="handleEdit">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
+          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+        </svg>
+        {{ showEditor ? 'Send' : 'Edit & Continue' }}
+      </button>
+      <button class="btn btn-reject" @click="emit('respond', request.requestId, 'reject')">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+          <line x1="18" y1="6" x2="6" y2="18"/>
+          <line x1="6" y1="6" x2="18" y2="18"/>
+        </svg>
+        Reject
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.plan-card {
+  border: 1px solid var(--border-color);
+  border-left: 3px solid #8b5cf6;
+  border-radius: 8px;
+  background: var(--bg-secondary);
+  overflow: hidden;
+  animation: slideIn 0.2s ease-out;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: rgba(139, 92, 246, 0.06);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.card-icon {
+  color: #8b5cf6;
+  display: flex;
+  align-items: center;
+}
+
+.card-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #8b5cf6;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.card-elapsed {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--text-muted);
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
+
+.card-body {
+  padding: 0.6rem 0.75rem;
+}
+
+.plan-text {
+  max-height: 250px;
+  overflow-y: auto;
+}
+
+.plan-pre {
+  margin: 0;
+  padding: 0.5rem;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  font-size: 12px;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  color: var(--text-secondary);
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.5;
+}
+
+.plan-empty {
+  font-size: 13px;
+  color: var(--text-muted);
+  font-style: italic;
+  padding: 0.5rem 0;
+}
+
+.edit-section {
+  margin-top: 0.5rem;
+}
+
+.edit-textarea {
+  width: 100%;
+  padding: 0.5rem;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  color: var(--text-primary);
+  font-size: 12px;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  resize: vertical;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.edit-textarea:focus {
+  border-color: #8b5cf6;
+}
+
+.card-actions {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-top: 1px solid var(--border-color);
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.4rem 0.75rem;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 600;
+  transition: all 0.15s;
+}
+
+.btn-approve {
+  background: #22c55e;
+  color: white;
+}
+
+.btn-approve:hover {
+  background: #16a34a;
+}
+
+.btn-edit {
+  background: #8b5cf6;
+  color: white;
+}
+
+.btn-edit:hover {
+  background: #7c3aed;
+}
+
+.btn-reject {
+  background: #ef4444;
+  color: white;
+}
+
+.btn-reject:hover {
+  background: #dc2626;
+}
+
+/* ── Expand transition ── */
+.expand-enter-active,
+.expand-leave-active {
+  transition: all 0.2s ease;
+  overflow: hidden;
+}
+
+.expand-enter-from,
+.expand-leave-to {
+  opacity: 0;
+  max-height: 0;
+}
+
+.expand-enter-to,
+.expand-leave-from {
+  max-height: 200px;
+}
+
+@keyframes slideIn {
+  from { opacity: 0; transform: translateY(-8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+</style>
diff --git a/frontend/src/components/transcript-debug/ProgressEvent.vue b/frontend/src/components/transcript-debug/ProgressEvent.vue
new file mode 100644
index 0000000..99aa971
--- /dev/null
+++ b/frontend/src/components/transcript-debug/ProgressEvent.vue
@@ -0,0 +1,279 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import type { ParsedProgressGroup, ParsedProgressEvent } from '@/types/transcript-debug'
+
+const props = defineProps<{
+  group: ParsedProgressGroup
+}>()
+
+const expanded = ref(false)
+
+const hookEvents = computed(() =>
+  props.group.events.filter(e => e.dataType === 'hook_progress')
+)
+
+const mcpEvents = computed(() =>
+  props.group.events.filter(e => e.dataType === 'mcp_progress')
+)
+
+function hookLabel(e: ParsedProgressEvent): string {
+  return e.hookEvent || e.hookName?.split(':')[0] || 'hook'
+}
+</script>
+
+<template>
+  <div class="progress-group">
+    <button class="progress-toggle" @click="expanded = !expanded">
+      <svg
+        :class="['chevron', { rotated: expanded }]"
+        width="10" height="10" viewBox="0 0 24 24"
+        fill="none" stroke="currentColor" stroke-width="2"
+      >
+        <polyline points="9 18 15 12 9 6" />
+      </svg>
+      <span class="toggle-pills">
+        <span v-for="he in hookEvents" :key="he.uuid" :class="['hook-pill', he.hookEvent?.toLowerCase()]">
+          {{ hookLabel(he) }}
+        </span>
+        <span v-for="me in mcpEvents" :key="me.uuid" :class="['mcp-pill', me.mcpStatus]">
+          MCP {{ me.mcpStatus }}
+          <span v-if="me.mcpElapsedMs != null" class="mcp-ms">{{ me.mcpElapsedMs }}ms</span>
+        </span>
+        <span v-if="!hookEvents.length && !mcpEvents.length" class="generic-pill">
+          {{ group.events.length }} progress events
+        </span>
+      </span>
+    </button>
+
+    <div v-if="expanded" class="progress-details">
+      <div v-for="e in group.events" :key="e.uuid" class="detail-row">
+        <!-- Hook progress -->
+        <template v-if="e.dataType === 'hook_progress'">
+          <span class="row-icon hook-color">&#9881;</span>
+          <span :class="['row-event', e.hookEvent?.toLowerCase()]">{{ e.hookEvent }}</span>
+          <span class="row-name">{{ e.hookName }}</span>
+          <span v-if="e.command" class="row-command" :title="e.command">
+            {{ e.command.length > 80 ? e.command.slice(0, 80) + '...' : e.command }}
+          </span>
+        </template>
+
+        <!-- MCP progress -->
+        <template v-else-if="e.dataType === 'mcp_progress'">
+          <span class="row-icon mcp-color">&#9889;</span>
+          <span :class="['row-status', e.mcpStatus]">{{ e.mcpStatus }}</span>
+          <span class="row-server">{{ e.mcpServerName }}</span>
+          <span class="row-tool">{{ e.mcpToolName }}</span>
+          <span v-if="e.mcpElapsedMs != null" class="row-elapsed">{{ e.mcpElapsedMs }}ms</span>
+        </template>
+
+        <!-- Generic -->
+        <template v-else>
+          <span class="row-icon">&#8226;</span>
+          <span class="row-generic">{{ e.dataType }}</span>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.progress-group {
+  border-radius: 6px;
+  overflow: hidden;
+  opacity: 0.7;
+  transition: opacity 0.15s;
+}
+
+.progress-group:hover {
+  opacity: 0.9;
+}
+
+.progress-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  width: 100%;
+  padding: 0.3rem 0.75rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--text-muted);
+  font-size: 11px;
+  text-align: left;
+}
+
+.progress-toggle:hover {
+  background: var(--bg-hover);
+}
+
+.chevron {
+  transition: transform 0.2s;
+  flex-shrink: 0;
+}
+
+.chevron.rotated {
+  transform: rotate(90deg);
+}
+
+.toggle-pills {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  flex-wrap: wrap;
+}
+
+/* Hook pills */
+.hook-pill {
+  font-size: 9px;
+  padding: 0.1rem 0.35rem;
+  border-radius: 3px;
+  font-weight: 500;
+}
+
+.hook-pill.pretooluse {
+  background: rgba(251, 191, 36, 0.12);
+  color: #fbbf24;
+}
+
+.hook-pill.posttooluse {
+  background: rgba(168, 85, 247, 0.12);
+  color: #a855f7;
+}
+
+.hook-pill.sessionstart {
+  background: rgba(34, 197, 94, 0.12);
+  color: #22c55e;
+}
+
+/* MCP pills */
+.mcp-pill {
+  font-size: 9px;
+  padding: 0.1rem 0.35rem;
+  border-radius: 3px;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.mcp-pill.started {
+  background: rgba(56, 189, 248, 0.12);
+  color: #38bdf8;
+}
+
+.mcp-pill.completed {
+  background: rgba(34, 197, 94, 0.12);
+  color: #22c55e;
+}
+
+.mcp-ms {
+  opacity: 0.8;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
+
+.generic-pill {
+  font-size: 10px;
+  color: var(--text-muted);
+}
+
+/* Expanded details */
+.progress-details {
+  padding: 0.25rem 0.5rem 0.4rem 1.5rem;
+  border: 1px solid var(--border-color);
+  border-top: none;
+  border-radius: 0 0 6px 6px;
+  background: var(--bg-primary);
+}
+
+.detail-row {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.2rem 0;
+  font-size: 10px;
+  color: var(--text-muted);
+  border-left: 2px solid var(--border-color);
+  padding-left: 0.5rem;
+  margin-left: 0.25rem;
+}
+
+.row-icon {
+  font-size: 10px;
+  flex-shrink: 0;
+}
+
+.hook-color { color: #fbbf24; }
+.mcp-color { color: #38bdf8; }
+
+.row-event {
+  font-weight: 600;
+  font-size: 10px;
+  white-space: nowrap;
+}
+
+.row-event.pretooluse { color: #fbbf24; }
+.row-event.posttooluse { color: #a855f7; }
+.row-event.sessionstart { color: #22c55e; }
+
+.row-name {
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 9px;
+  color: var(--text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 250px;
+}
+
+.row-command {
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 9px;
+  opacity: 0.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.row-status {
+  font-weight: 600;
+  font-size: 10px;
+  white-space: nowrap;
+}
+
+.row-status.started { color: #38bdf8; }
+.row-status.completed { color: #22c55e; }
+
+.row-server {
+  font-size: 9px;
+  padding: 0.05rem 0.3rem;
+  border-radius: 3px;
+  background: rgba(56, 189, 248, 0.08);
+  color: #38bdf8;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  white-space: nowrap;
+}
+
+.row-tool {
+  font-size: 9px;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  color: var(--text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.row-elapsed {
+  font-size: 9px;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  color: #22c55e;
+  white-space: nowrap;
+  margin-left: auto;
+}
+
+.row-generic {
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 9px;
+}
+</style>
diff --git a/frontend/src/components/transcript-debug/RawJsonViewer.vue b/frontend/src/components/transcript-debug/RawJsonViewer.vue
new file mode 100644
index 0000000..44972d2
--- /dev/null
+++ b/frontend/src/components/transcript-debug/RawJsonViewer.vue
@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+const props = defineProps<{
+  content: string
+}>()
+
+const selectedLine = ref<number | null>(null)
+
+const lines = computed(() => {
+  if (!props.content) return []
+  return props.content.split('\n').filter(l => l.trim())
+})
+
+function selectLine(idx: number) {
+  selectedLine.value = selectedLine.value === idx ? null : idx
+}
+
+function formatJson(line: string): string {
+  try {
+    const obj = JSON.parse(line)
+    return JSON.stringify(obj, null, 2)
+  } catch {
+    return line
+  }
+}
+
+function getLinePreview(line: string): string {
+  try {
+    const obj = JSON.parse(line)
+    const type = obj.type || 'unknown'
+    if (type === 'assistant' && obj.message?.content) {
+      const first = obj.message.content[0]
+      const hint = first?.type || ''
+      return `assistant [${hint}]`
+    }
+    if (type === 'user') {
+      const c = obj.message?.content
+      const preview = typeof c === 'string' ? c.slice(0, 40) : '[blocks]'
+      return `user: ${preview}`
+    }
+    if (type === 'progress') {
+      return `progress: ${obj.data?.type || '?'}`
+    }
+    return type
+  } catch {
+    return line.slice(0, 40)
+  }
+}
+
+function typeClass(line: string): string {
+  try {
+    const obj = JSON.parse(line)
+    return `type-${obj.type || 'unknown'}`
+  } catch {
+    return 'type-unknown'
+  }
+}
+</script>
+
+<template>
+  <div class="raw-viewer">
+    <div class="viewer-header">
+      <span class="viewer-title">Raw JSONL</span>
+      <span class="line-count">{{ lines.length }} lines</span>
+    </div>
+    <div class="lines-container">
+      <div
+        v-for="(line, idx) in lines"
+        :key="idx"
+        :class="['line-row', typeClass(line), { selected: selectedLine === idx }]"
+        @click="selectLine(idx)"
+      >
+        <span class="line-num">{{ idx + 1 }}</span>
+        <span class="line-preview">{{ getLinePreview(line) }}</span>
+      </div>
+    </div>
+    <!-- Expanded view for selected line -->
+    <div v-if="selectedLine !== null && lines[selectedLine]" class="expanded-view">
+      <div class="expanded-header">
+        <span>Line {{ selectedLine + 1 }}</span>
+        <button class="close-btn" @click="selectedLine = null">&times;</button>
+      </div>
+      <pre class="expanded-json">{{ formatJson(lines[selectedLine]) }}</pre>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.raw-viewer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.viewer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+  flex-shrink: 0;
+}
+
+.viewer-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.line-count {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
+
+.lines-container {
+  flex: 1;
+  overflow-y: auto;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 11px;
+}
+
+.line-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.2rem 0.5rem;
+  cursor: pointer;
+  border-left: 3px solid transparent;
+  transition: background 0.1s;
+}
+
+.line-row:hover {
+  background: var(--bg-hover);
+}
+
+.line-row.selected {
+  background: rgba(99, 102, 241, 0.1);
+  border-left-color: var(--accent);
+}
+
+.line-num {
+  color: var(--text-muted);
+  min-width: 36px;
+  text-align: right;
+  user-select: none;
+  opacity: 0.6;
+}
+
+.line-preview {
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Type-based colors */
+.type-user .line-preview { color: #60a5fa; }
+.type-assistant .line-preview { color: #34d399; }
+.type-progress .line-preview { color: var(--text-muted); opacity: 0.7; }
+.type-system .line-preview { color: #fbbf24; }
+.type-file-history-snapshot .line-preview { color: var(--text-muted); opacity: 0.5; }
+
+.expanded-view {
+  border-top: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+  max-height: 40%;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+.expanded-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.4rem 0.75rem;
+  font-size: 11px;
+  color: var(--text-secondary);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  padding: 0 0.25rem;
+}
+
+.close-btn:hover {
+  color: var(--text-primary);
+}
+
+.expanded-json {
+  flex: 1;
+  overflow: auto;
+  margin: 0;
+  padding: 0.75rem;
+  font-size: 11px;
+  line-height: 1.5;
+  color: var(--text-primary);
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>
diff --git a/frontend/src/components/transcript-debug/SessionSelector.vue b/frontend/src/components/transcript-debug/SessionSelector.vue
new file mode 100644
index 0000000..461e28f
--- /dev/null
+++ b/frontend/src/components/transcript-debug/SessionSelector.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import type { SessionInfo } from '@/types/transcript-debug'
+
+defineProps<{
+  sessions: SessionInfo[]
+  selectedId: string | null
+  loading: boolean
+}>()
+
+const emit = defineEmits<{
+  select: [sessionId: string]
+}>()
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+function formatDate(iso: string): string {
+  const d = new Date(iso)
+  const now = new Date()
+  const diff = now.getTime() - d.getTime()
+  if (diff < 60000) return 'just now'
+  if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`
+  if (diff < 86400000) return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+  return d.toLocaleDateString([], { month: 'short', day: 'numeric' }) + ' ' + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+}
+
+function truncate(text: string, max: number): string {
+  if (text.length <= max) return text
+  return text.slice(0, max) + '...'
+}
+</script>
+
+<template>
+  <div class="session-selector">
+    <label class="selector-label">Session</label>
+    <select
+      class="session-select"
+      :value="selectedId || ''"
+      @change="emit('select', ($event.target as HTMLSelectElement).value)"
+      :disabled="loading"
+    >
+      <option value="" disabled>Select a transcript session...</option>
+      <option
+        v-for="s in sessions"
+        :key="s.id"
+        :value="s.id"
+      >
+        {{ s.firstUserMessage ? truncate(s.firstUserMessage, 60) : s.id.slice(0, 8) + '...' }} &mdash; {{ formatDate(s.mtimeISO) }} ({{ formatSize(s.size) }})
+      </option>
+    </select>
+    <span v-if="loading" class="loading-indicator">
+      <span class="spinner-sm"></span>
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.session-selector {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.selector-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+.session-select {
+  flex: 1;
+  min-width: 0;
+  padding: 0.4rem 0.75rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  color: var(--text-primary);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.session-select:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.loading-indicator {
+  display: flex;
+  align-items: center;
+}
+
+.spinner-sm {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--border-color);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+</style>
diff --git a/frontend/src/components/transcript-debug/SystemMessage.vue b/frontend/src/components/transcript-debug/SystemMessage.vue
new file mode 100644
index 0000000..f781a92
--- /dev/null
+++ b/frontend/src/components/transcript-debug/SystemMessage.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { ParsedSystemMessage } from '@/types/transcript-debug'
+
+defineProps<{
+  message: ParsedSystemMessage
+}>()
+
+const expanded = ref(false)
+</script>
+
+<template>
+  <div class="system-message">
+    <button class="system-toggle" @click="expanded = !expanded">
+      <span class="system-icon">&#9432;</span>
+      <span class="system-label">System</span>
+      <span v-if="message.subtype" class="subtype-badge">{{ message.subtype }}</span>
+      <span class="content-preview">{{ message.content.slice(0, 80) }}{{ message.content.length > 80 ? '...' : '' }}</span>
+    </button>
+    <pre v-if="expanded" class="system-content">{{ message.content }}</pre>
+  </div>
+</template>
+
+<style scoped>
+.system-message {
+  border-radius: 6px;
+  overflow: hidden;
+  border: 1px dashed rgba(251, 191, 36, 0.3);
+}
+
+.system-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.4rem 0.75rem;
+  background: rgba(251, 191, 36, 0.04);
+  border: none;
+  cursor: pointer;
+  color: var(--text-muted);
+  font-size: 11px;
+  text-align: left;
+}
+
+.system-toggle:hover {
+  background: rgba(251, 191, 36, 0.08);
+}
+
+.system-icon {
+  color: #fbbf24;
+  font-size: 13px;
+}
+
+.system-label {
+  font-weight: 500;
+  color: #fbbf24;
+  font-size: 11px;
+}
+
+.subtype-badge {
+  font-size: 10px;
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px;
+  background: rgba(251, 191, 36, 0.1);
+  color: #fbbf24;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
+
+.content-preview {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  opacity: 0.7;
+}
+
+.system-content {
+  margin: 0;
+  padding: 0.75rem;
+  font-size: 11px;
+  line-height: 1.5;
+  color: var(--text-secondary);
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 300px;
+  overflow-y: auto;
+  border-top: 1px dashed rgba(251, 191, 36, 0.2);
+  background: rgba(251, 191, 36, 0.02);
+}
+</style>
diff --git a/frontend/src/components/transcript-debug/ThinkingBlock.vue b/frontend/src/components/transcript-debug/ThinkingBlock.vue
new file mode 100644
index 0000000..289ccce
--- /dev/null
+++ b/frontend/src/components/transcript-debug/ThinkingBlock.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{
+  content: string
+}>()
+
+const expanded = ref(false)
+</script>
+
+<template>
+  <div class="thinking-block">
+    <button class="thinking-toggle" @click="expanded = !expanded">
+      <svg
+        :class="['chevron', { rotated: expanded }]"
+        width="12" height="12" viewBox="0 0 24 24"
+        fill="none" stroke="currentColor" stroke-width="2"
+      >
+        <polyline points="9 18 15 12 9 6" />
+      </svg>
+      <span class="thinking-label">Thinking</span>
+      <span class="thinking-length">{{ content.length }} chars</span>
+    </button>
+    <div v-if="expanded" class="thinking-content">{{ content }}</div>
+  </div>
+</template>
+
+<style scoped>
+.thinking-block {
+  border: 1px solid rgba(168, 85, 247, 0.2);
+  border-radius: 8px;
+  overflow: hidden;
+  margin: 0.5rem 0;
+}
+
+.thinking-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.4rem 0.75rem;
+  background: rgba(168, 85, 247, 0.06);
+  border: none;
+  cursor: pointer;
+  color: var(--text-secondary);
+  font-size: 12px;
+  text-align: left;
+}
+
+.thinking-toggle:hover {
+  background: rgba(168, 85, 247, 0.1);
+}
+
+.chevron {
+  transition: transform 0.2s;
+  flex-shrink: 0;
+}
+
+.chevron.rotated {
+  transform: rotate(90deg);
+}
+
+.thinking-label {
+  font-weight: 500;
+  color: #a855f7;
+}
+
+.thinking-length {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--text-muted);
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
+
+.thinking-content {
+  padding: 0.75rem;
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--text-secondary);
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 400px;
+  overflow-y: auto;
+  border-top: 1px solid rgba(168, 85, 247, 0.15);
+  background: rgba(168, 85, 247, 0.03);
+}
+</style>
diff --git a/frontend/src/components/transcript-debug/ToolCallBlock.vue b/frontend/src/components/transcript-debug/ToolCallBlock.vue
new file mode 100644
index 0000000..d123cef
--- /dev/null
+++ b/frontend/src/components/transcript-debug/ToolCallBlock.vue
@@ -0,0 +1,390 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import type { ParsedToolCall, ParsedProgressEvent } from '@/types/transcript-debug'
+import ToolResultBlock from './ToolResultBlock.vue'
+
+const props = defineProps<{
+  call: ParsedToolCall
+}>()
+
+const inputExpanded = ref(false)
+const progressExpanded = ref(false)
+
+const hookEvents = computed(() =>
+  props.call.progressEvents.filter(e => e.dataType === 'hook_progress')
+)
+
+const mcpEvents = computed(() =>
+  props.call.progressEvents.filter(e => e.dataType === 'mcp_progress')
+)
+
+const mcpCompleted = computed(() =>
+  mcpEvents.value.find(e => e.mcpStatus === 'completed')
+)
+
+function hookLabel(e: ParsedProgressEvent): string {
+  if (!e.hookName) return e.hookEvent || 'hook'
+  // "PreToolUse:mcp__agent-ui__navigate_to" → "PreToolUse"
+  const event = e.hookEvent || e.hookName.split(':')[0]
+  return event
+}
+</script>
+
+<template>
+  <div class="tool-call">
+    <div class="tool-header">
+      <span class="tool-icon">&#9881;</span>
+      <span class="tool-name">{{ call.name }}</span>
+      <span v-if="call.result?.isError" class="error-indicator">error</span>
+      <span v-if="mcpCompleted?.mcpElapsedMs != null" class="timing-badge">
+        {{ mcpCompleted.mcpElapsedMs }}ms
+      </span>
+      <span v-if="mcpCompleted?.mcpServerName" class="server-badge">
+        {{ mcpCompleted.mcpServerName }}
+      </span>
+    </div>
+
+    <!-- Hook + MCP progress timeline -->
+    <div v-if="call.progressEvents.length" class="progress-timeline">
+      <button class="timeline-toggle" @click="progressExpanded = !progressExpanded">
+        <svg
+          :class="['chevron', { rotated: progressExpanded }]"
+          width="10" height="10" viewBox="0 0 24 24"
+          fill="none" stroke="currentColor" stroke-width="2"
+        >
+          <polyline points="9 18 15 12 9 6" />
+        </svg>
+        <span class="timeline-summary">
+          <span v-for="he in hookEvents" :key="he.uuid" :class="['hook-pill', he.hookEvent?.toLowerCase()]">
+            {{ hookLabel(he) }}
+          </span>
+          <span v-for="me in mcpEvents" :key="me.uuid" :class="['mcp-pill', me.mcpStatus]">
+            MCP {{ me.mcpStatus }}
+            <span v-if="me.mcpElapsedMs != null" class="mcp-ms">{{ me.mcpElapsedMs }}ms</span>
+          </span>
+        </span>
+      </button>
+
+      <div v-if="progressExpanded" class="timeline-details">
+        <div v-for="e in call.progressEvents" :key="e.uuid" class="timeline-row">
+          <!-- Hook progress -->
+          <template v-if="e.dataType === 'hook_progress'">
+            <span class="tl-icon hook-icon">&#9881;</span>
+            <span :class="['tl-event', e.hookEvent?.toLowerCase()]">{{ e.hookEvent }}</span>
+            <span class="tl-name">{{ e.hookName }}</span>
+            <span v-if="e.command" class="tl-command" :title="e.command">
+              {{ e.command.length > 80 ? e.command.slice(0, 80) + '...' : e.command }}
+            </span>
+          </template>
+
+          <!-- MCP progress -->
+          <template v-else-if="e.dataType === 'mcp_progress'">
+            <span class="tl-icon mcp-icon">&#9889;</span>
+            <span :class="['tl-status', e.mcpStatus]">{{ e.mcpStatus }}</span>
+            <span class="tl-server">{{ e.mcpServerName }}</span>
+            <span class="tl-tool">{{ e.mcpToolName }}</span>
+            <span v-if="e.mcpElapsedMs != null" class="tl-elapsed">{{ e.mcpElapsedMs }}ms</span>
+          </template>
+        </div>
+      </div>
+    </div>
+
+    <!-- Tool input -->
+    <div class="tool-input-section">
+      <button class="input-toggle" @click="inputExpanded = !inputExpanded">
+        <svg
+          :class="['chevron', { rotated: inputExpanded }]"
+          width="10" height="10" viewBox="0 0 24 24"
+          fill="none" stroke="currentColor" stroke-width="2"
+        >
+          <polyline points="9 18 15 12 9 6" />
+        </svg>
+        <span>Input</span>
+      </button>
+      <pre v-if="inputExpanded" class="input-json">{{ JSON.stringify(call.input, null, 2) }}</pre>
+    </div>
+
+    <!-- Tool result -->
+    <ToolResultBlock v-if="call.result" :result="call.result" />
+  </div>
+</template>
+
+<style scoped>
+.tool-call {
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  overflow: hidden;
+  margin: 0.5rem 0;
+  background: var(--bg-primary);
+}
+
+.tool-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.tool-icon {
+  font-size: 12px;
+  opacity: 0.6;
+}
+
+.tool-name {
+  font-size: 12px;
+  font-weight: 600;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  color: #f59e0b;
+}
+
+.error-indicator {
+  font-size: 10px;
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+  background: rgba(239, 68, 68, 0.15);
+  color: #ef4444;
+  font-weight: 500;
+}
+
+.timing-badge {
+  margin-left: auto;
+  font-size: 10px;
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+  background: rgba(34, 197, 94, 0.1);
+  color: #22c55e;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
+
+.server-badge {
+  font-size: 10px;
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+  background: rgba(56, 189, 248, 0.1);
+  color: #38bdf8;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
+
+/* Progress timeline */
+.progress-timeline {
+  border-bottom: 1px solid var(--border-color);
+}
+
+.timeline-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  width: 100%;
+  padding: 0.35rem 0.75rem;
+  background: rgba(99, 102, 241, 0.03);
+  border: none;
+  cursor: pointer;
+  color: var(--text-secondary);
+  font-size: 11px;
+  text-align: left;
+}
+
+.timeline-toggle:hover {
+  background: rgba(99, 102, 241, 0.06);
+}
+
+.timeline-summary {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  flex-wrap: wrap;
+}
+
+/* Hook pills */
+.hook-pill {
+  font-size: 9px;
+  padding: 0.1rem 0.35rem;
+  border-radius: 3px;
+  font-weight: 500;
+  letter-spacing: 0.3px;
+}
+
+.hook-pill.pretooluse {
+  background: rgba(251, 191, 36, 0.12);
+  color: #fbbf24;
+}
+
+.hook-pill.posttooluse {
+  background: rgba(168, 85, 247, 0.12);
+  color: #a855f7;
+}
+
+.hook-pill.sessionstart {
+  background: rgba(34, 197, 94, 0.12);
+  color: #22c55e;
+}
+
+/* MCP pills */
+.mcp-pill {
+  font-size: 9px;
+  padding: 0.1rem 0.35rem;
+  border-radius: 3px;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.mcp-pill.started {
+  background: rgba(56, 189, 248, 0.12);
+  color: #38bdf8;
+}
+
+.mcp-pill.completed {
+  background: rgba(34, 197, 94, 0.12);
+  color: #22c55e;
+}
+
+.mcp-ms {
+  opacity: 0.8;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
+
+/* Expanded timeline rows */
+.timeline-details {
+  padding: 0.25rem 0.5rem 0.4rem 1.5rem;
+  border-top: 1px solid var(--border-color);
+  background: var(--bg-primary);
+}
+
+.timeline-row {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.2rem 0;
+  font-size: 10px;
+  color: var(--text-muted);
+  border-left: 2px solid var(--border-color);
+  padding-left: 0.5rem;
+  margin-left: 0.25rem;
+}
+
+.tl-icon {
+  font-size: 10px;
+  flex-shrink: 0;
+}
+
+.hook-icon { color: #fbbf24; }
+.mcp-icon { color: #38bdf8; }
+
+.tl-event {
+  font-weight: 600;
+  font-size: 10px;
+  white-space: nowrap;
+}
+
+.tl-event.pretooluse { color: #fbbf24; }
+.tl-event.posttooluse { color: #a855f7; }
+.tl-event.sessionstart { color: #22c55e; }
+
+.tl-name {
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 9px;
+  color: var(--text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 250px;
+}
+
+.tl-command {
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 9px;
+  opacity: 0.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.tl-status {
+  font-weight: 600;
+  font-size: 10px;
+  white-space: nowrap;
+}
+
+.tl-status.started { color: #38bdf8; }
+.tl-status.completed { color: #22c55e; }
+
+.tl-server {
+  font-size: 9px;
+  padding: 0.05rem 0.3rem;
+  border-radius: 3px;
+  background: rgba(56, 189, 248, 0.08);
+  color: #38bdf8;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  white-space: nowrap;
+}
+
+.tl-tool {
+  font-size: 9px;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  color: var(--text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tl-elapsed {
+  font-size: 9px;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  color: #22c55e;
+  white-space: nowrap;
+  margin-left: auto;
+}
+
+/* Chevron */
+.chevron {
+  transition: transform 0.2s;
+  flex-shrink: 0;
+}
+
+.chevron.rotated {
+  transform: rotate(90deg);
+}
+
+/* Tool input section */
+.tool-input-section {
+  border-bottom: 1px solid var(--border-color);
+}
+
+.input-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  width: 100%;
+  padding: 0.3rem 0.75rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--text-secondary);
+  font-size: 11px;
+  text-align: left;
+}
+
+.input-toggle:hover {
+  background: var(--bg-hover);
+}
+
+.input-json {
+  margin: 0;
+  padding: 0.5rem 0.75rem;
+  font-size: 11px;
+  line-height: 1.5;
+  color: var(--text-primary);
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 250px;
+  overflow-y: auto;
+  border-top: 1px solid var(--border-color);
+  background: var(--bg-primary);
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
+</style>
diff --git a/frontend/src/components/transcript-debug/ToolResultBlock.vue b/frontend/src/components/transcript-debug/ToolResultBlock.vue
new file mode 100644
index 0000000..f1b3ffa
--- /dev/null
+++ b/frontend/src/components/transcript-debug/ToolResultBlock.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { ParsedToolResult } from '@/types/transcript-debug'
+
+defineProps<{
+  result: ParsedToolResult
+}>()
+
+const expanded = ref(false)
+</script>
+
+<template>
+  <div :class="['tool-result', { error: result.isError }]">
+    <button class="result-toggle" @click="expanded = !expanded">
+      <svg
+        :class="['chevron', { rotated: expanded }]"
+        width="10" height="10" viewBox="0 0 24 24"
+        fill="none" stroke="currentColor" stroke-width="2"
+      >
+        <polyline points="9 18 15 12 9 6" />
+      </svg>
+      <span :class="['result-icon', { error: result.isError }]">
+        {{ result.isError ? '✗' : '✓' }}
+      </span>
+      <span class="result-label">Result</span>
+      <span class="result-size">{{ result.content.length }} chars</span>
+    </button>
+    <pre v-if="expanded" class="result-content">{{ result.content }}</pre>
+  </div>
+</template>
+
+<style scoped>
+.tool-result {
+  border-radius: 6px;
+  overflow: hidden;
+  border: 1px solid var(--border-color);
+  margin-top: 0.25rem;
+}
+
+.tool-result.error {
+  border-color: rgba(239, 68, 68, 0.3);
+}
+
+.result-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  width: 100%;
+  padding: 0.3rem 0.6rem;
+  background: var(--bg-secondary);
+  border: none;
+  cursor: pointer;
+  color: var(--text-secondary);
+  font-size: 11px;
+  text-align: left;
+}
+
+.result-toggle:hover {
+  background: var(--bg-hover);
+}
+
+.chevron {
+  transition: transform 0.2s;
+  flex-shrink: 0;
+}
+
+.chevron.rotated {
+  transform: rotate(90deg);
+}
+
+.result-icon {
+  font-weight: 600;
+  color: #22c55e;
+}
+
+.result-icon.error {
+  color: #ef4444;
+}
+
+.result-label {
+  font-weight: 500;
+}
+
+.result-size {
+  margin-left: auto;
+  color: var(--text-muted);
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
+
+.result-content {
+  margin: 0;
+  padding: 0.5rem 0.75rem;
+  font-size: 11px;
+  line-height: 1.5;
+  color: var(--text-primary);
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 300px;
+  overflow-y: auto;
+  background: var(--bg-primary);
+}
+</style>
diff --git a/frontend/src/components/transcript-debug/UserInput.vue b/frontend/src/components/transcript-debug/UserInput.vue
new file mode 100644
index 0000000..6d7cf31
--- /dev/null
+++ b/frontend/src/components/transcript-debug/UserInput.vue
@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+const props = defineProps<{
+  processing?: boolean
+}>()
+
+const emit = defineEmits<{
+  send: [message: string]
+}>()
+
+const input = ref('')
+
+const isDisabled = computed(() => !input.value.trim() || props.processing)
+
+function handleSend() {
+  const msg = input.value.trim()
+  if (!msg || props.processing) return
+  emit('send', msg)
+  input.value = ''
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault()
+    handleSend()
+  }
+}
+</script>
+
+<template>
+  <div class="user-input">
+    <div v-if="processing" class="processing-bar">
+      <span class="processing-dots">
+        <span class="dot"></span><span class="dot"></span><span class="dot"></span>
+      </span>
+      <span>Agent is processing...</span>
+    </div>
+    <div class="input-container" :class="{ disabled: processing }">
+      <textarea
+        v-model="input"
+        class="input-field"
+        :placeholder="processing ? 'Wait for agent to finish...' : 'Continue this conversation...'"
+        rows="1"
+        :disabled="processing"
+        @keydown="handleKeydown"
+      />
+      <button
+        class="send-btn"
+        :disabled="isDisabled"
+        @click="handleSend"
+        title="Send prompt (resumes this session)"
+      >
+        <svg width="16" height="16" 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>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.user-input {
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-secondary);
+  border-top: 1px solid var(--border-color);
+  flex-shrink: 0;
+}
+
+.processing-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0 0.25rem 0.35rem;
+  font-size: 10px;
+  color: var(--accent);
+}
+
+.processing-dots {
+  display: flex;
+  gap: 3px;
+}
+
+.processing-dots .dot {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--accent);
+  animation: pulse-dot 1.2s ease-in-out infinite;
+}
+
+.processing-dots .dot:nth-child(2) { animation-delay: 0.15s; }
+.processing-dots .dot:nth-child(3) { animation-delay: 0.3s; }
+
+@keyframes pulse-dot {
+  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
+  40% { opacity: 1; transform: scale(1); }
+}
+
+.input-container {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.5rem;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 0.4rem 0.5rem;
+  transition: border-color 0.15s, opacity 0.15s;
+}
+
+.input-container:focus-within {
+  border-color: var(--accent);
+}
+
+.input-container.disabled {
+  opacity: 0.5;
+}
+
+.input-field {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--text-primary);
+  font-size: 13px;
+  line-height: 1.5;
+  resize: none;
+  min-height: 20px;
+  max-height: 120px;
+  padding: 0.15rem 0.25rem;
+  font-family: inherit;
+}
+
+.input-field::placeholder {
+  color: var(--text-muted);
+}
+
+.input-field:disabled {
+  cursor: not-allowed;
+}
+
+.send-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  background: var(--accent);
+  border: none;
+  border-radius: 6px;
+  color: white;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: all 0.15s;
+}
+
+.send-btn:hover:not(:disabled) {
+  filter: brightness(1.15);
+}
+
+.send-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+</style>
diff --git a/frontend/src/components/transcript-debug/UserMessageBubble.vue b/frontend/src/components/transcript-debug/UserMessageBubble.vue
new file mode 100644
index 0000000..96d2d7d
--- /dev/null
+++ b/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>
diff --git a/frontend/src/components/transcript-debug/index.ts b/frontend/src/components/transcript-debug/index.ts
new file mode 100644
index 0000000..5878fbb
--- /dev/null
+++ b/frontend/src/components/transcript-debug/index.ts
@@ -0,0 +1,13 @@
+export { default as SessionSelector } from './SessionSelector.vue'
+export { default as RawJsonViewer } from './RawJsonViewer.vue'
+export { default as ChatContainer } from './ChatContainer.vue'
+export { default as UserMessageBubble } from './UserMessageBubble.vue'
+export { default as AssistantMessageBubble } from './AssistantMessageBubble.vue'
+export { default as ThinkingBlock } from './ThinkingBlock.vue'
+export { default as ToolCallBlock } from './ToolCallBlock.vue'
+export { default as ToolResultBlock } from './ToolResultBlock.vue'
+export { default as ProgressEvent } from './ProgressEvent.vue'
+export { default as SystemMessage } from './SystemMessage.vue'
+export { default as UserInput } from './UserInput.vue'
+export { default as PermissionApproval } from './PermissionApproval.vue'
+export { default as PlanApproval } from './PlanApproval.vue'
diff --git a/frontend/src/composables/transcript-debug/index.ts b/frontend/src/composables/transcript-debug/index.ts
new file mode 100644
index 0000000..82fc9ce
--- /dev/null
+++ b/frontend/src/composables/transcript-debug/index.ts
@@ -0,0 +1,2 @@
+export { useTranscriptDebug } from './useTranscriptDebug'
+export { useHooksApproval } from './useHooksApproval'
diff --git a/frontend/src/composables/transcript-debug/useHooksApproval.ts b/frontend/src/composables/transcript-debug/useHooksApproval.ts
new file mode 100644
index 0000000..0efaf2e
--- /dev/null
+++ b/frontend/src/composables/transcript-debug/useHooksApproval.ts
@@ -0,0 +1,111 @@
+import { ref } from 'vue'
+import type { HooksApprovalPermissionRequest, HooksApprovalPlanRequest } from '@/types/hooks-approval'
+
+export function useHooksApproval() {
+  const pendingPermissions = ref<HooksApprovalPermissionRequest[]>([])
+  const pendingPlans = ref<HooksApprovalPlanRequest[]>([])
+
+  // ── WS message handler (called from useTranscriptDebug) ──
+
+  function handleApprovalMessage(msg: { type: string; [key: string]: unknown }) {
+    if (msg.type === 'hooks-approval-permission') {
+      pendingPermissions.value.push({
+        requestId: msg.requestId as string,
+        tool_name: msg.tool_name as string | undefined,
+        tool_input: msg.tool_input,
+        agent_name: msg.agent_name as string | undefined,
+        session_id: msg.session_id as string | undefined,
+        cwd: msg.cwd as string | undefined,
+        timestamp: msg.timestamp as number
+      })
+    } else if (msg.type === 'hooks-approval-plan') {
+      pendingPlans.value.push({
+        requestId: msg.requestId as string,
+        session_id: msg.session_id as string | undefined,
+        permission_mode: msg.permission_mode as string | undefined,
+        lastAssistantText: (msg.lastAssistantText as string) || '',
+        timestamp: msg.timestamp as number
+      })
+    }
+  }
+
+  // ── Respond to permission ──
+
+  async function respondPermission(requestId: string, decision: 'allow' | 'deny') {
+    try {
+      await fetch('/api/hooks-approval/respond', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ requestId, decision })
+      })
+    } catch (e) {
+      console.error('[HooksApproval] Failed to respond permission:', e)
+    }
+    pendingPermissions.value = pendingPermissions.value.filter(p => p.requestId !== requestId)
+  }
+
+  // ── Respond to plan ──
+
+  async function respondPlan(requestId: string, decision: 'approve' | 'reject' | 'edit', reason?: string) {
+    try {
+      await fetch('/api/hooks-approval/respond-plan', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ requestId, decision, reason })
+      })
+    } catch (e) {
+      console.error('[HooksApproval] Failed to respond plan:', e)
+    }
+    pendingPlans.value = pendingPlans.value.filter(p => p.requestId !== requestId)
+  }
+
+  // ── Fetch pending on page load (state recovery) ──
+
+  async function fetchPending() {
+    try {
+      const res = await fetch('/api/hooks-approval')
+      if (!res.ok) return
+      const data = await res.json()
+
+      if (Array.isArray(data.permissions)) {
+        for (const p of data.permissions) {
+          if (!pendingPermissions.value.some(e => e.requestId === p.requestId)) {
+            pendingPermissions.value.push({
+              requestId: p.requestId,
+              tool_name: p.tool_name,
+              tool_input: p.tool_input,
+              agent_name: p.agent_name,
+              session_id: p.session_id,
+              timestamp: p.createdAt
+            })
+          }
+        }
+      }
+
+      if (Array.isArray(data.plans)) {
+        for (const p of data.plans) {
+          if (!pendingPlans.value.some(e => e.requestId === p.requestId)) {
+            pendingPlans.value.push({
+              requestId: p.requestId,
+              session_id: p.session_id,
+              permission_mode: p.permission_mode,
+              lastAssistantText: p.lastAssistantText || '',
+              timestamp: p.createdAt
+            })
+          }
+        }
+      }
+    } catch (e) {
+      console.error('[HooksApproval] Failed to fetch pending:', e)
+    }
+  }
+
+  return {
+    pendingPermissions,
+    pendingPlans,
+    handleApprovalMessage,
+    respondPermission,
+    respondPlan,
+    fetchPending
+  }
+}
diff --git a/frontend/src/composables/transcript-debug/useTranscriptDebug.ts b/frontend/src/composables/transcript-debug/useTranscriptDebug.ts
new file mode 100644
index 0000000..99113d1
--- /dev/null
+++ b/frontend/src/composables/transcript-debug/useTranscriptDebug.ts
@@ -0,0 +1,620 @@
+import { ref, computed, onUnmounted } from 'vue'
+import { endpoints } from '@/config/endpoints'
+import type {
+  AgentName,
+  SessionInfo,
+  ParsedConversation,
+  ConversationMessage,
+  ParsedUserMessage,
+  ParsedAssistantMessage,
+  ParsedProgressGroup,
+  ParsedSystemMessage,
+  ParsedToolCall,
+  ParsedToolResult,
+  ParsedProgressEvent,
+  TranscriptEntry,
+  UserEntry,
+  AssistantEntry,
+  ProgressEntry,
+  ContentBlock,
+  ToolUseBlock,
+  ToolResultBlock
+} from '@/types/transcript-debug'
+
+export function useTranscriptDebug() {
+  // ── Persistence ──
+  const STORAGE_KEY = 'transcript-debug-selection'
+
+  function restoreState(): { agent: AgentName; sessionId: string | null } | null {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY)
+      if (!raw) return null
+      const data = JSON.parse(raw)
+      if (data.agent === 'ejecutor' || data.agent === 'nucleo000' || data.agent === 'claude') {
+        return { agent: data.agent, sessionId: data.sessionId || null }
+      }
+    } catch {}
+    return null
+  }
+
+  function saveState() {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify({
+        agent: selectedAgent.value,
+        sessionId: selectedSessionId.value
+      }))
+    } catch {}
+  }
+
+  const saved = restoreState()
+
+  const selectedAgent = ref<AgentName>(saved?.agent || 'ejecutor')
+  const sessions = ref<SessionInfo[]>([])
+  const selectedSessionId = ref<string | null>(saved?.sessionId || null)
+  const rawContent = ref<string>('')
+  const conversation = ref<ParsedConversation | null>(null)
+  const loading = ref(false)
+  const transitioning = ref(!!saved?.sessionId)
+  const error = ref<string | null>(null)
+  const isRealtime = ref(false)
+
+  // ── WebSocket realtime ──
+
+  let socket: WebSocket | null = null
+  let reconnectTimer: ReturnType<typeof setTimeout> | null = null
+
+  function connectRealtime() {
+    if (socket?.readyState === WebSocket.OPEN) return
+
+    // Same sync server as git (port 4105)
+    socket = new WebSocket(endpoints.git)
+
+    socket.onopen = () => {
+      isRealtime.value = true
+      console.log('[TranscriptDebug] Realtime connected')
+    }
+
+    socket.onmessage = (event) => {
+      try {
+        const msg = JSON.parse(event.data)
+        if (msg.type === 'transcript-debug-change') {
+          handleRealtimeChange(msg.sessionId)
+        } else if (msg.type === 'transcript-debug-done') {
+          handleRealtimeDone(msg.sessionId)
+        }
+      } catch {
+        // Ignore non-JSON
+      }
+    }
+
+    socket.onclose = () => {
+      isRealtime.value = false
+      console.log('[TranscriptDebug] Realtime disconnected, reconnecting...')
+      reconnectTimer = setTimeout(connectRealtime, 2000)
+    }
+
+    socket.onerror = () => {
+      isRealtime.value = false
+    }
+  }
+
+  function disconnectRealtime() {
+    if (reconnectTimer) {
+      clearTimeout(reconnectTimer)
+      reconnectTimer = null
+    }
+    if (socket) {
+      socket.close()
+      socket = null
+    }
+    isRealtime.value = false
+  }
+
+  async function handleRealtimeChange(changedSessionId: string) {
+    // Refresh session list (new sessions or size changes)
+    await fetchSessions()
+
+    // If the changed session is the one we're viewing, re-fetch it
+    if (selectedSessionId.value && selectedSessionId.value === changedSessionId) {
+      await reloadCurrentSession()
+    } else if (!selectedSessionId.value && sessions.value.length > 0) {
+      // No session selected yet — auto-select the newest
+      await selectSession(sessions.value[0].id)
+    }
+  }
+
+  function handleRealtimeDone(changedSessionId: string) {
+    // Process exited — safe to send again (runningProcesses cleared on backend)
+    if (selectedSessionId.value === changedSessionId && processing.value) {
+      processing.value = false
+    }
+  }
+
+  async function reloadCurrentSession() {
+    if (!selectedSessionId.value) return
+
+    try {
+      const res = await fetch(`/api/transcript-debug/${selectedSessionId.value}/raw?agent=${selectedAgent.value}`)
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      rawContent.value = await res.text()
+      const parsed = parseJsonl(rawContent.value, selectedSessionId.value)
+
+      // Check if the optimistic user message now exists in the real JSONL
+      if (optimisticMessage.value) {
+        const optimisticText = optimisticMessage.value.content
+        const found = parsed.messages.some(
+          m => m.kind === 'user' && (m as ParsedUserMessage).content.includes(optimisticText)
+        )
+        if (found) {
+          // Real message arrived, drop the optimistic one
+          optimisticMessage.value = null
+        } else {
+          // Not yet in JSONL, keep showing it at the end
+          parsed.messages.push(optimisticMessage.value)
+        }
+      }
+
+      // Detect turn completion from JSONL content:
+      // If we're processing, the optimistic was replaced (real user entry exists),
+      // and the last substantive message is an assistant response → turn is done
+      if (processing.value && !optimisticMessage.value) {
+        const lastSubstantive = [...parsed.messages]
+          .reverse()
+          .find(m => m.kind === 'user' || m.kind === 'assistant')
+        if (lastSubstantive?.kind === 'assistant') {
+          processing.value = false
+        }
+      }
+
+      conversation.value = parsed
+    } catch (e: any) {
+      console.error('[TranscriptDebug] Reload failed:', e.message)
+    }
+  }
+
+  // Auto-cleanup on unmount
+  onUnmounted(() => {
+    disconnectRealtime()
+  })
+
+  // ── Send prompt (spawns independent claude process) ──
+
+  const sending = ref(false)
+  const processing = ref(false)
+  const optimisticMessage = ref<ParsedUserMessage | null>(null)
+
+  async function sendPrompt(text: string) {
+    if (!text.trim() || !selectedSessionId.value) return
+    sending.value = true
+    error.value = null
+
+    try {
+      const res = await fetch('/api/transcript-debug/send', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          agent: selectedAgent.value,
+          sessionId: selectedSessionId.value,
+          prompt: text
+        })
+      })
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        throw new Error(data.error || `HTTP ${res.status}`)
+      }
+      // POST returned — agent is spawned
+      processing.value = true
+
+      // Optimistic: show user message immediately in chat
+      // Stays until the real user entry appears in the JSONL
+      optimisticMessage.value = {
+        kind: 'user',
+        uuid: `optimistic-${Date.now()}`,
+        timestamp: new Date().toISOString(),
+        content: text,
+        isMeta: false,
+        isToolResult: false,
+        toolResults: []
+      } as ParsedUserMessage
+
+      if (conversation.value) {
+        conversation.value.messages.push(optimisticMessage.value)
+      }
+    } catch (e: any) {
+      error.value = `Failed to send: ${e.message}`
+    } finally {
+      sending.value = false
+    }
+  }
+
+  // ── API ──
+
+  async function fetchSessions() {
+    try {
+      const res = await fetch(`/api/transcript-debug/sessions?agent=${selectedAgent.value}`)
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      sessions.value = await res.json()
+    } catch (e: any) {
+      error.value = `Failed to load sessions: ${e.message}`
+    }
+  }
+
+  async function fetchSessionContent(sessionId: string): Promise<boolean> {
+    try {
+      const res = await fetch(`/api/transcript-debug/${sessionId}/raw?agent=${selectedAgent.value}`)
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      rawContent.value = await res.text()
+      conversation.value = parseJsonl(rawContent.value, sessionId)
+      return true
+    } catch (e: any) {
+      error.value = `Failed to load session: ${e.message}`
+      return false
+    }
+  }
+
+  async function init() {
+    await fetchSessions()
+
+    let targetSession = selectedSessionId.value
+
+    // Validate saved session still exists
+    if (targetSession && !sessions.value.some(s => s.id === targetSession)) {
+      targetSession = null
+    }
+
+    // Fall back to newest
+    if (!targetSession && sessions.value.length > 0) {
+      targetSession = sessions.value[0].id
+    }
+
+    if (targetSession) {
+      selectedSessionId.value = targetSession
+      saveState()
+      await fetchSessionContent(targetSession)
+    } else {
+      selectedSessionId.value = null
+      saveState()
+    }
+
+    transitioning.value = false
+    connectRealtime()
+  }
+
+  async function switchAgent(agent: AgentName) {
+    if (agent === selectedAgent.value) return
+
+    selectedAgent.value = agent
+    error.value = null
+    loading.value = true
+    transitioning.value = true
+
+    // Wait for fade-out
+    await new Promise(r => setTimeout(r, 150))
+
+    rawContent.value = ''
+    conversation.value = null
+
+    await fetchSessions()
+
+    if (sessions.value.length > 0) {
+      selectedSessionId.value = sessions.value[0].id
+      await fetchSessionContent(sessions.value[0].id)
+    } else {
+      selectedSessionId.value = null
+    }
+
+    saveState()
+    transitioning.value = false
+    loading.value = false
+  }
+
+  async function selectSession(sessionId: string) {
+    if (sessionId === selectedSessionId.value) return
+
+    error.value = null
+    loading.value = true
+    transitioning.value = true
+
+    // Wait for fade-out
+    await new Promise(r => setTimeout(r, 150))
+
+    selectedSessionId.value = sessionId
+    saveState()
+    await fetchSessionContent(sessionId)
+
+    transitioning.value = false
+    loading.value = false
+  }
+
+  // ── JSONL Parser ──
+
+  function parseJsonl(text: string, sessionId: string): ParsedConversation {
+    const lines = text.split('\n').filter(l => l.trim())
+    const entries: TranscriptEntry[] = []
+
+    for (const line of lines) {
+      try {
+        entries.push(JSON.parse(line))
+      } catch {
+        // Skip malformed lines
+      }
+    }
+
+    // Extract metadata from first meaningful entry
+    let model = ''
+    let version = ''
+    let cwd = ''
+    let gitBranch = ''
+    let startTime = ''
+    let endTime = ''
+
+    for (const e of entries) {
+      if ('sessionId' in e && e.sessionId) {
+        if (!version && 'version' in e && e.version) version = e.version
+        if (!cwd && 'cwd' in e && e.cwd) cwd = e.cwd
+        if (!gitBranch && 'gitBranch' in e && e.gitBranch) gitBranch = e.gitBranch
+      }
+      if (e.type === 'assistant') {
+        const ae = e as AssistantEntry
+        if (!model && ae.message?.model) model = ae.message.model
+      }
+      if ('timestamp' in e && e.timestamp) {
+        if (!startTime) startTime = e.timestamp
+        endTime = e.timestamp
+      }
+    }
+
+    // Build conversation messages
+    const messages: ConversationMessage[] = []
+
+    // Group assistant entries by message.id (streaming chunks)
+    const assistantGroups = new Map<string, AssistantEntry[]>()
+
+    // Collect tool results from user entries
+    const toolResultMap = new Map<string, ParsedToolResult>()
+
+    // Collect progress events by toolUseID
+    const progressByTool = new Map<string, ParsedProgressEvent[]>()
+
+    // Helper to build a ParsedProgressEvent from a raw ProgressEntry
+    function buildProgressEvent(pe: ProgressEntry): ParsedProgressEvent {
+      return {
+        uuid: pe.uuid,
+        timestamp: pe.timestamp,
+        dataType: pe.data?.type || 'unknown',
+        hookEvent: pe.data?.hookEvent as string | undefined,
+        hookName: pe.data?.hookName as string | undefined,
+        command: pe.data?.command as string | undefined,
+        mcpStatus: pe.data?.status as string | undefined,
+        mcpServerName: pe.data?.serverName as string | undefined,
+        mcpToolName: pe.data?.toolName as string | undefined,
+        mcpElapsedMs: pe.data?.elapsedTimeMs as number | undefined,
+        data: pe.data as Record<string, unknown>
+      }
+    }
+
+    // First pass: categorize all entries
+    for (const entry of entries) {
+      if (entry.type === 'file-history-snapshot') continue
+
+      if (entry.type === 'assistant') {
+        const ae = entry as AssistantEntry
+        const msgId = ae.message?.id
+        if (msgId) {
+          if (!assistantGroups.has(msgId)) assistantGroups.set(msgId, [])
+          assistantGroups.get(msgId)!.push(ae)
+        }
+        continue
+      }
+
+      if (entry.type === 'user') {
+        const ue = entry as UserEntry
+        const content = ue.message?.content
+        if (Array.isArray(content)) {
+          for (const block of content) {
+            if (typeof block === 'object' && block.type === 'tool_result') {
+              const tr = block as ToolResultBlock
+              const resultContent = typeof tr.content === 'string'
+                ? tr.content
+                : Array.isArray(tr.content)
+                  ? tr.content.map(b => 'text' in b ? b.text : JSON.stringify(b)).join('\n')
+                  : ''
+              toolResultMap.set(tr.tool_use_id, {
+                toolUseId: tr.tool_use_id,
+                content: resultContent,
+                isError: !!tr.is_error
+              })
+            }
+          }
+        }
+        continue
+      }
+
+      if (entry.type === 'progress') {
+        const pe = entry as ProgressEntry
+        if (pe.toolUseID) {
+          if (!progressByTool.has(pe.toolUseID)) progressByTool.set(pe.toolUseID, [])
+          progressByTool.get(pe.toolUseID)!.push(buildProgressEvent(pe))
+        }
+        continue
+      }
+    }
+
+    // Second pass: build linear conversation
+    let currentProgressBatch: ParsedProgressEvent[] = []
+
+    for (const entry of entries) {
+      if (entry.type === 'file-history-snapshot') continue
+
+      if (entry.type === 'progress') {
+        const pe = entry as ProgressEntry
+        if (!pe.toolUseID) {
+          currentProgressBatch.push(buildProgressEvent(pe))
+        }
+        continue
+      }
+
+      // Flush progress batch before next non-progress entry
+      if (currentProgressBatch.length > 0) {
+        messages.push({
+          kind: 'progress',
+          uuid: currentProgressBatch[0].uuid,
+          timestamp: currentProgressBatch[0].timestamp,
+          events: [...currentProgressBatch]
+        } as ParsedProgressGroup)
+        currentProgressBatch = []
+      }
+
+      if (entry.type === 'user') {
+        const ue = entry as UserEntry
+        const content = ue.message?.content
+
+        const hasToolResult = Array.isArray(content) &&
+          content.some(b => typeof b === 'object' && b.type === 'tool_result')
+        const hasText = Array.isArray(content)
+          ? content.some(b => typeof b === 'object' && b.type === 'text')
+          : typeof content === 'string' && content.length > 0
+
+        if (hasToolResult && !hasText) continue
+
+        const textContent = typeof content === 'string'
+          ? content
+          : Array.isArray(content)
+            ? content.filter(b => typeof b === 'object' && b.type === 'text').map(b => (b as any).text).join('\n')
+            : ''
+
+        messages.push({
+          kind: 'user',
+          uuid: ue.uuid,
+          timestamp: ue.timestamp || '',
+          content: textContent,
+          isMeta: !!ue.isMeta,
+          isToolResult: false,
+          toolResults: []
+        } as ParsedUserMessage)
+        continue
+      }
+
+      if (entry.type === 'assistant') {
+        const ae = entry as AssistantEntry
+        const msgId = ae.message?.id
+        if (!msgId) continue
+
+        const group = assistantGroups.get(msgId)
+        if (!group) continue
+
+        // Only process first entry in group (we merge all chunks)
+        if (group[0].uuid !== ae.uuid) continue
+
+        const textBlocks: string[] = []
+        const thinkingBlocks: string[] = []
+        const toolCalls: ParsedToolCall[] = []
+
+        for (const chunk of group) {
+          if (!chunk.message?.content) continue
+          for (const block of chunk.message.content) {
+            if (block.type === 'text') {
+              textBlocks.push(block.text)
+            } else if (block.type === 'thinking') {
+              thinkingBlocks.push(block.thinking)
+            } else if (block.type === 'tool_use') {
+              const tu = block as ToolUseBlock
+              toolCalls.push({
+                id: tu.id,
+                name: tu.name,
+                input: tu.input,
+                result: toolResultMap.get(tu.id),
+                progressEvents: progressByTool.get(tu.id) || []
+              })
+            }
+          }
+        }
+
+        const lastChunk = group[group.length - 1]
+
+        messages.push({
+          kind: 'assistant',
+          uuid: ae.uuid,
+          messageId: msgId,
+          timestamp: ae.timestamp || '',
+          model: ae.message?.model || model,
+          textBlocks,
+          thinkingBlocks,
+          toolCalls,
+          usage: lastChunk.message?.usage,
+          stopReason: lastChunk.message?.stop_reason
+        } as ParsedAssistantMessage)
+        continue
+      }
+
+      if (entry.type === 'system') {
+        const se = entry as any
+        const content = se.message?.content
+        const textContent = typeof content === 'string'
+          ? content
+          : Array.isArray(content)
+            ? content.filter((b: any) => b.type === 'text').map((b: any) => b.text).join('\n')
+            : JSON.stringify(se.data || se.message || '')
+
+        messages.push({
+          kind: 'system',
+          uuid: se.uuid || crypto.randomUUID(),
+          timestamp: se.timestamp || '',
+          content: textContent,
+          subtype: se.subtype
+        } as ParsedSystemMessage)
+      }
+    }
+
+    // Flush remaining progress
+    if (currentProgressBatch.length > 0) {
+      messages.push({
+        kind: 'progress',
+        uuid: currentProgressBatch[0].uuid,
+        timestamp: currentProgressBatch[0].timestamp,
+        events: [...currentProgressBatch]
+      } as ParsedProgressGroup)
+    }
+
+    return {
+      sessionId,
+      model,
+      version,
+      messages,
+      metadata: {
+        cwd,
+        gitBranch,
+        startTime,
+        endTime,
+        totalEntries: entries.length
+      }
+    }
+  }
+
+  const lineCount = computed(() => {
+    if (!rawContent.value) return 0
+    return rawContent.value.split('\n').filter(l => l.trim()).length
+  })
+
+  return {
+    selectedAgent,
+    sessions,
+    selectedSessionId,
+    rawContent,
+    conversation,
+    loading,
+    transitioning,
+    error,
+    lineCount,
+    isRealtime,
+    sending,
+    processing,
+    init,
+    fetchSessions,
+    switchAgent,
+    selectSession,
+    connectRealtime,
+    disconnectRealtime,
+    sendPrompt
+  }
+}
diff --git a/frontend/src/composables/useGlobalApproval.ts b/frontend/src/composables/useGlobalApproval.ts
new file mode 100644
index 0000000..c3341cf
--- /dev/null
+++ b/frontend/src/composables/useGlobalApproval.ts
@@ -0,0 +1,199 @@
+import { ref, computed } from 'vue'
+import { endpoints } from '@/config/endpoints'
+import type { HooksApprovalPermissionRequest, HooksApprovalPlanRequest } from '@/types/hooks-approval'
+
+export interface ApprovalSessionGroup {
+  sessionId: string
+  agent: string
+  permissions: HooksApprovalPermissionRequest[]
+  plans: HooksApprovalPlanRequest[]
+}
+
+// Singleton state (shared across all callers)
+const pendingPermissions = ref<HooksApprovalPermissionRequest[]>([])
+const pendingPlans = ref<HooksApprovalPlanRequest[]>([])
+const modalVisible = ref(false)
+
+let socket: WebSocket | null = null
+let reconnectTimer: ReturnType<typeof setTimeout> | null = null
+let connected = false
+
+const totalPending = computed(() => pendingPermissions.value.length + pendingPlans.value.length)
+
+const groupedBySession = computed<ApprovalSessionGroup[]>(() => {
+  const map = new Map<string, ApprovalSessionGroup>()
+
+  for (const p of pendingPermissions.value) {
+    const key = p.session_id || 'unknown'
+    if (!map.has(key)) {
+      map.set(key, { sessionId: key, agent: p.agent_name || 'unknown', permissions: [], plans: [] })
+    }
+    map.get(key)!.permissions.push(p)
+  }
+
+  for (const p of pendingPlans.value) {
+    const key = p.session_id || 'unknown'
+    if (!map.has(key)) {
+      map.set(key, { sessionId: key, agent: 'unknown', permissions: [], plans: [] })
+    }
+    map.get(key)!.plans.push(p)
+  }
+
+  return Array.from(map.values())
+})
+
+function connect() {
+  if (connected || socket?.readyState === WebSocket.OPEN) return
+
+  socket = new WebSocket(endpoints.git)
+
+  socket.onopen = () => {
+    connected = true
+    console.log('[GlobalApproval] WebSocket connected')
+  }
+
+  socket.onmessage = (event) => {
+    try {
+      const msg = JSON.parse(event.data)
+
+      if (msg.type === 'hooks-approval-permission') {
+        console.log(`[GlobalApproval] WS received permission: ${msg.requestId} tool=${msg.tool_name} agent=${msg.agent_name}`)
+        const newReq: HooksApprovalPermissionRequest = {
+          requestId: msg.requestId,
+          tool_name: msg.tool_name,
+          tool_input: msg.tool_input,
+          agent_name: msg.agent_name,
+          session_id: msg.session_id,
+          cwd: msg.cwd,
+          timestamp: msg.timestamp
+        }
+        pendingPermissions.value = [...pendingPermissions.value, newReq]
+        if (!modalVisible.value) modalVisible.value = true
+      } else if (msg.type === 'hooks-approval-plan') {
+        console.log(`[GlobalApproval] WS received plan: ${msg.requestId} session=${msg.session_id}`)
+        const newReq: HooksApprovalPlanRequest = {
+          requestId: msg.requestId,
+          session_id: msg.session_id,
+          permission_mode: msg.permission_mode,
+          lastAssistantText: msg.lastAssistantText || '',
+          timestamp: msg.timestamp
+        }
+        pendingPlans.value = [...pendingPlans.value, newReq]
+        if (!modalVisible.value) modalVisible.value = true
+      }
+    } catch {
+      // Ignore non-JSON or unrelated messages
+    }
+  }
+
+  socket.onclose = () => {
+    connected = false
+    console.log('[GlobalApproval] WebSocket disconnected, reconnecting...')
+    reconnectTimer = setTimeout(connect, 2000)
+  }
+
+  socket.onerror = () => {
+    connected = false
+  }
+}
+
+function disconnect() {
+  if (reconnectTimer) {
+    clearTimeout(reconnectTimer)
+    reconnectTimer = null
+  }
+  if (socket) {
+    socket.close()
+    socket = null
+  }
+  connected = false
+}
+
+async function fetchPending() {
+  try {
+    console.log('[GlobalApproval] Fetching pending approvals...')
+    const res = await fetch('/api/hooks-approval')
+    if (!res.ok) return
+    const data = await res.json()
+    console.log(`[GlobalApproval] Fetched: ${data.permissions?.length || 0} permissions, ${data.plans?.length || 0} plans`)
+
+    if (Array.isArray(data.permissions)) {
+      for (const p of data.permissions) {
+        if (!pendingPermissions.value.some(e => e.requestId === p.requestId)) {
+          pendingPermissions.value = [...pendingPermissions.value, {
+            requestId: p.requestId,
+            tool_name: p.tool_name,
+            tool_input: p.tool_input,
+            agent_name: p.agent_name,
+            session_id: p.session_id,
+            timestamp: p.createdAt
+          }]
+        }
+      }
+    }
+
+    if (Array.isArray(data.plans)) {
+      for (const p of data.plans) {
+        if (!pendingPlans.value.some(e => e.requestId === p.requestId)) {
+          pendingPlans.value = [...pendingPlans.value, {
+            requestId: p.requestId,
+            session_id: p.session_id,
+            permission_mode: p.permission_mode,
+            lastAssistantText: p.lastAssistantText || '',
+            timestamp: p.createdAt
+          }]
+        }
+      }
+    }
+
+    // Auto-show if there are pending requests
+    if (totalPending.value > 0 && !modalVisible.value) {
+      modalVisible.value = true
+    }
+  } catch (e) {
+    console.error('[GlobalApproval] Failed to fetch pending:', e)
+  }
+}
+
+async function respondPermission(requestId: string, decision: 'allow' | 'deny') {
+  console.log(`[GlobalApproval] Responding permission ${requestId}: ${decision}`)
+  try {
+    await fetch('/api/hooks-approval/respond', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ requestId, decision })
+    })
+  } catch (e) {
+    console.error('[GlobalApproval] Failed to respond permission:', e)
+  }
+  pendingPermissions.value = pendingPermissions.value.filter(p => p.requestId !== requestId)
+}
+
+async function respondPlan(requestId: string, decision: 'approve' | 'reject' | 'edit', reason?: string) {
+  console.log(`[GlobalApproval] Responding plan ${requestId}: ${decision}`)
+  try {
+    await fetch('/api/hooks-approval/respond-plan', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ requestId, decision, reason })
+    })
+  } catch (e) {
+    console.error('[GlobalApproval] Failed to respond plan:', e)
+  }
+  pendingPlans.value = pendingPlans.value.filter(p => p.requestId !== requestId)
+}
+
+export function useGlobalApproval() {
+  return {
+    pendingPermissions,
+    pendingPlans,
+    totalPending,
+    groupedBySession,
+    modalVisible,
+    connect,
+    disconnect,
+    fetchPending,
+    respondPermission,
+    respondPlan
+  }
+}
diff --git a/frontend/src/pages/TranscriptDebugPage.vue b/frontend/src/pages/TranscriptDebugPage.vue
new file mode 100644
index 0000000..f31518e
--- /dev/null
+++ b/frontend/src/pages/TranscriptDebugPage.vue
@@ -0,0 +1,344 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue'
+import { useTranscriptDebug } from '@/composables/transcript-debug'
+import { SessionSelector, RawJsonViewer, ChatContainer } from '@/components/transcript-debug'
+import type { AgentName } from '@/types/transcript-debug'
+
+const {
+  selectedAgent,
+  sessions,
+  selectedSessionId,
+  rawContent,
+  conversation,
+  loading,
+  transitioning,
+  error,
+  lineCount,
+  isRealtime,
+  sending,
+  processing,
+  init,
+  switchAgent,
+  selectSession,
+  disconnectRealtime,
+  sendPrompt
+} = useTranscriptDebug()
+
+const agents: { id: AgentName; label: string }[] = [
+  { id: 'ejecutor', label: 'Ejecutor' },
+  { id: 'nucleo000', label: 'nucleo000' },
+  { id: 'claude', label: 'Claude' }
+]
+
+function handleSend(message: string) {
+  sendPrompt(message)
+}
+
+onMounted(() => {
+  init()
+})
+
+onUnmounted(() => {
+  disconnectRealtime()
+})
+</script>
+
+<template>
+  <div class="transcript-debug-page">
+    <!-- Header -->
+    <header class="page-header">
+      <div class="header-left">
+        <h2>Transcript Debug</h2>
+        <span :class="['realtime-dot', { connected: isRealtime }]" :title="isRealtime ? 'Realtime: connected' : 'Realtime: disconnected'">
+          <svg width="8" height="8" viewBox="0 0 8 8"><circle cx="4" cy="4" r="4" fill="currentColor"/></svg>
+        </span>
+      </div>
+
+      <div class="header-selectors">
+        <!-- Agent selector -->
+        <div class="agent-selector">
+          <button
+            v-for="a in agents"
+            :key="a.id"
+            :class="['agent-btn', { active: selectedAgent === a.id }]"
+            @click="switchAgent(a.id)"
+          >
+            {{ a.label }}
+          </button>
+        </div>
+
+        <!-- Session selector -->
+        <SessionSelector
+          :sessions="sessions"
+          :selected-id="selectedSessionId"
+          :loading="loading"
+          @select="selectSession"
+        />
+      </div>
+    </header>
+
+    <!-- Error -->
+    <div v-if="error" class="error-bar">{{ error }}</div>
+
+    <!-- Content -->
+    <div class="content-area">
+      <div v-if="!selectedSessionId" :class="['empty-state', { fading: transitioning }]">
+        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+          <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" />
+          <polyline points="10 9 9 9 8 9" />
+        </svg>
+        <p>Select a transcript session to begin</p>
+        <span>{{ sessions.length }} sessions available</span>
+      </div>
+
+      <div v-else class="split-panels">
+        <!-- Left: Raw JSONL -->
+        <div :class="['panel-left', { fading: transitioning }]">
+          <RawJsonViewer :content="rawContent" />
+        </div>
+
+        <!-- Resize handle -->
+        <div class="resize-handle"></div>
+
+        <!-- Right: Chat -->
+        <div :class="['panel-right', { fading: transitioning }]">
+          <ChatContainer
+            v-if="conversation"
+            :conversation="conversation"
+            :processing="processing"
+            @send="handleSend"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.transcript-debug-page {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+  flex-shrink: 0;
+  gap: 1rem;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+.header-left h2 {
+  font-size: 15px;
+  font-weight: 600;
+  margin: 0;
+  white-space: nowrap;
+}
+
+.realtime-dot {
+  color: var(--text-muted);
+  opacity: 0.4;
+  transition: all 0.3s;
+}
+
+.realtime-dot.connected {
+  color: #22c55e;
+  opacity: 1;
+  animation: pulse-glow 2s infinite;
+}
+
+@keyframes pulse-glow {
+  0%, 100% { filter: drop-shadow(0 0 2px currentColor); }
+  50% { filter: drop-shadow(0 0 6px currentColor); }
+}
+
+.header-selectors {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex: 1;
+  min-width: 0;
+}
+
+/* Agent selector */
+.agent-selector {
+  display: flex;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.agent-btn {
+  padding: 0.35rem 0.75rem;
+  background: transparent;
+  border: none;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+
+.agent-btn:not(:last-child) {
+  border-right: 1px solid var(--border-color);
+}
+
+.agent-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.agent-btn.active {
+  background: var(--accent);
+  color: white;
+}
+
+.error-bar {
+  padding: 0.5rem 1rem;
+  background: rgba(239, 68, 68, 0.1);
+  border-bottom: 1px solid rgba(239, 68, 68, 0.3);
+  color: #ef4444;
+  font-size: 13px;
+  flex-shrink: 0;
+}
+
+.content-area {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.fading {
+  opacity: 0 !important;
+}
+
+.empty-state {
+  transition: opacity 0.15s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  gap: 0.75rem;
+  color: var(--text-muted);
+}
+
+.empty-state svg {
+  opacity: 0.4;
+}
+
+.empty-state p {
+  font-size: 15px;
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+.empty-state span {
+  font-size: 13px;
+}
+
+.split-panels {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.panel-left {
+  width: 35%;
+  min-width: 250px;
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem;
+  padding-right: 0;
+  transition: opacity 0.15s ease;
+}
+
+.resize-handle {
+  width: 4px;
+  cursor: col-resize;
+  background: transparent;
+  flex-shrink: 0;
+  margin: 0.5rem 2px;
+  border-radius: 2px;
+  transition: background 0.15s;
+}
+
+.resize-handle:hover {
+  background: var(--accent);
+}
+
+.panel-right {
+  flex: 1;
+  min-width: 300px;
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem;
+  padding-left: 0;
+  transition: opacity 0.15s ease;
+}
+
+@media (max-width: 768px) {
+  .page-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+  }
+
+  .header-left h2 {
+    font-size: 14px;
+  }
+
+  .header-selectors {
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+    gap: 0.5rem;
+  }
+
+  .split-panels {
+    flex-direction: column;
+  }
+
+  .panel-left {
+    width: 100%;
+    height: 40%;
+    min-width: 0;
+    padding: 0.5rem;
+  }
+
+  .resize-handle {
+    width: 100%;
+    height: 4px;
+    margin: 2px 0.5rem;
+    cursor: row-resize;
+  }
+
+  .panel-right {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    padding: 0.5rem;
+  }
+}
+</style>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 61df295..fa94a46 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -58,6 +58,11 @@ const router = createRouter({
       path: '/agents',
       name: 'agents',
       component: () => import('../pages/AgentsPage.vue')
+    },
+    {
+      path: '/transcript-debug',
+      name: 'transcript-debug',
+      component: () => import('../pages/TranscriptDebugPage.vue')
     }
   ]
 })
diff --git a/frontend/src/types/hooks-approval.ts b/frontend/src/types/hooks-approval.ts
new file mode 100644
index 0000000..4c42798
--- /dev/null
+++ b/frontend/src/types/hooks-approval.ts
@@ -0,0 +1,17 @@
+export interface HooksApprovalPermissionRequest {
+  requestId: string
+  tool_name?: string
+  tool_input?: unknown
+  agent_name?: string
+  session_id?: string
+  cwd?: string
+  timestamp: number
+}
+
+export interface HooksApprovalPlanRequest {
+  requestId: string
+  session_id?: string
+  permission_mode?: string
+  lastAssistantText: string
+  timestamp: number
+}
diff --git a/frontend/src/types/transcript-debug.ts b/frontend/src/types/transcript-debug.ts
new file mode 100644
index 0000000..16c815a
--- /dev/null
+++ b/frontend/src/types/transcript-debug.ts
@@ -0,0 +1,227 @@
+// ── Base entry (every JSONL line has these) ──
+
+export interface TranscriptEntryBase {
+  uuid: string
+  parentUuid: string | null
+  type: string
+  timestamp: string
+  sessionId?: string
+  isSidechain?: boolean
+  userType?: string
+  cwd?: string
+  version?: string
+  gitBranch?: string
+}
+
+// ── Specific entry types ──
+
+export interface UserEntry extends TranscriptEntryBase {
+  type: 'user'
+  message: {
+    role: 'user'
+    content: string | ContentBlock[]
+  }
+  isMeta?: boolean
+}
+
+export interface AssistantEntry extends TranscriptEntryBase {
+  type: 'assistant'
+  message: {
+    id: string
+    model: string
+    role: 'assistant'
+    type: 'message'
+    content: ContentBlock[]
+    usage?: {
+      input_tokens: number
+      output_tokens: number
+      cache_read_input_tokens?: number
+      cache_creation_input_tokens?: number
+    }
+    stop_reason?: string
+  }
+}
+
+export interface ProgressEntry extends TranscriptEntryBase {
+  type: 'progress'
+  data: {
+    type: string // 'hook_progress', 'tool_progress', 'mcp_progress'
+    hookEvent?: string
+    hookName?: string
+    command?: string
+    toolName?: string
+    [key: string]: unknown
+  }
+  toolUseID?: string
+  parentToolUseID?: string
+}
+
+export interface SystemEntry extends TranscriptEntryBase {
+  type: 'system'
+  message?: {
+    role: 'user'
+    content: string | ContentBlock[]
+  }
+  subtype?: string
+}
+
+export interface FileHistoryEntry {
+  type: 'file-history-snapshot'
+  messageId: string
+  snapshot: {
+    messageId: string
+    trackedFileBackups: Record<string, unknown>
+    timestamp: string
+  }
+  isSnapshotUpdate: boolean
+}
+
+// ── Content blocks (inside messages) ──
+
+export type ContentBlock =
+  | TextBlock
+  | ThinkingBlock
+  | ToolUseBlock
+  | ToolResultBlock
+
+export interface TextBlock {
+  type: 'text'
+  text: string
+}
+
+export interface ThinkingBlock {
+  type: 'thinking'
+  thinking: string
+}
+
+export interface ToolUseBlock {
+  type: 'tool_use'
+  id: string
+  name: string
+  input: Record<string, unknown>
+}
+
+export interface ToolResultBlock {
+  type: 'tool_result'
+  tool_use_id: string
+  content: string | ContentBlock[]
+  is_error?: boolean
+}
+
+// ── Parsed conversation (what the UI renders) ──
+
+export type AgentName = 'ejecutor' | 'nucleo000' | 'claude'
+
+export interface SessionInfo {
+  id: string
+  filename: string
+  size: number
+  mtime: number
+  mtimeISO: string
+  firstUserMessage: string
+}
+
+export interface ParsedConversation {
+  sessionId: string
+  model: string
+  version: string
+  messages: ConversationMessage[]
+  metadata: ConversationMetadata
+}
+
+export interface ConversationMetadata {
+  cwd: string
+  gitBranch: string
+  startTime: string
+  endTime: string
+  totalEntries: number
+}
+
+export type ConversationMessage =
+  | ParsedUserMessage
+  | ParsedAssistantMessage
+  | ParsedProgressGroup
+  | ParsedSystemMessage
+
+export interface ParsedUserMessage {
+  kind: 'user'
+  uuid: string
+  timestamp: string
+  content: string
+  isMeta: boolean
+  isToolResult: boolean
+  toolResults: ParsedToolResult[]
+}
+
+export interface ParsedToolResult {
+  toolUseId: string
+  content: string
+  isError: boolean
+}
+
+export interface ParsedAssistantMessage {
+  kind: 'assistant'
+  uuid: string
+  messageId: string
+  timestamp: string
+  model: string
+  textBlocks: string[]
+  thinkingBlocks: string[]
+  toolCalls: ParsedToolCall[]
+  usage?: {
+    input_tokens: number
+    output_tokens: number
+    cache_read_input_tokens?: number
+    cache_creation_input_tokens?: number
+  }
+  stopReason?: string
+}
+
+export interface ParsedToolCall {
+  id: string
+  name: string
+  input: Record<string, unknown>
+  result?: ParsedToolResult
+  progressEvents: ParsedProgressEvent[]
+}
+
+export interface ParsedProgressEvent {
+  uuid: string
+  timestamp: string
+  dataType: string // 'hook_progress' | 'mcp_progress'
+  // hook_progress fields
+  hookEvent?: string // 'SessionStart' | 'PreToolUse' | 'PostToolUse'
+  hookName?: string
+  command?: string
+  // mcp_progress fields
+  mcpStatus?: string // 'started' | 'completed'
+  mcpServerName?: string
+  mcpToolName?: string
+  mcpElapsedMs?: number
+  data: Record<string, unknown>
+}
+
+export interface ParsedProgressGroup {
+  kind: 'progress'
+  uuid: string
+  timestamp: string
+  events: ParsedProgressEvent[]
+}
+
+export interface ParsedSystemMessage {
+  kind: 'system'
+  uuid: string
+  timestamp: string
+  content: string
+  subtype?: string
+}
+
+// ── Raw entry union ──
+
+export type TranscriptEntry =
+  | UserEntry
+  | AssistantEntry
+  | ProgressEntry
+  | SystemEntry
+  | FileHistoryEntry
+  | (TranscriptEntryBase & { type: string })
diff --git a/hooks/approval-permission.ps1 b/hooks/approval-permission.ps1
new file mode 100644
index 0000000..c418bc3
--- /dev/null
+++ b/hooks/approval-permission.ps1
@@ -0,0 +1,29 @@
+# Long-poll hooks-approval for PermissionRequest decisions
+# Reads hook stdin, POSTs to backend, waits up to 125s for UI response
+# Returns hookSpecificOutput JSON per Claude Code PermissionRequest docs
+param([string]$agent = "ejecutor")
+$logFile = "$PSScriptRoot/../.claude-$agent/debug/hooks.log"
+$ts = Get-Date -Format "HH:mm:ss.fff"
+$b = [Console]::In.ReadToEnd()
+Add-Content $logFile "[$ts] [PERM] Hook fired for agent=$agent stdin_len=$($b.Length)"
+try {
+  $j = $b | ConvertFrom-Json
+  Add-Content $logFile "[$ts] [PERM] tool=$($j.tool_name) session=$($j.session_id)"
+} catch {
+  Add-Content $logFile "[$ts] [PERM] WARN: stdin not valid JSON"
+}
+try {
+  Add-Content $logFile "[$ts] [PERM] POSTing to backend..."
+  $r = Invoke-RestMethod -Uri 'http://localhost:4101/api/hooks-approval/permission' -Method POST -Body $b -ContentType 'application/json' -TimeoutSec 125
+  $ts2 = Get-Date -Format "HH:mm:ss.fff"
+  if ($r -and $r.hookSpecificOutput) {
+    $out = $r | ConvertTo-Json -Depth 10 -Compress
+    Add-Content $logFile "[$ts2] [PERM] Got response: $out"
+    $out
+  } else {
+    Add-Content $logFile "[$ts2] [PERM] Empty/timeout response (no hookSpecificOutput)"
+  }
+} catch {
+  $ts2 = Get-Date -Format "HH:mm:ss.fff"
+  Add-Content $logFile "[$ts2] [PERM] ERROR: $($_.Exception.Message)"
+}
diff --git a/hooks/approval-plan.ps1 b/hooks/approval-plan.ps1
new file mode 100644
index 0000000..d6fc24c
--- /dev/null
+++ b/hooks/approval-plan.ps1
@@ -0,0 +1,31 @@
+# Long-poll hooks-approval for Stop (plan mode) decisions
+# Only activates when permission_mode is 'plan' and stop_hook_active is false
+# Returns Stop decision JSON per Claude Code docs:
+#   { "decision": "block", "reason": "..." } to continue implementing
+#   {} or empty to let Claude stop
+param([string]$agent = "ejecutor")
+$logFile = "$PSScriptRoot/../.claude-$agent/debug/hooks.log"
+$ts = Get-Date -Format "HH:mm:ss.fff"
+$b = [Console]::In.ReadToEnd()
+Add-Content $logFile "[$ts] [PLAN] Hook fired for agent=$agent stdin_len=$($b.Length)"
+$j = $b | ConvertFrom-Json
+Add-Content $logFile "[$ts] [PLAN] permission_mode=$($j.permission_mode) stop_hook_active=$($j.stop_hook_active)"
+if ($j.permission_mode -ne 'plan' -or $j.stop_hook_active) {
+  Add-Content $logFile "[$ts] [PLAN] Skipping (not plan mode or stop_hook_active)"
+  exit 0
+}
+try {
+  Add-Content $logFile "[$ts] [PLAN] POSTing to backend..."
+  $r = Invoke-RestMethod -Uri 'http://localhost:4101/api/hooks-approval/plan' -Method POST -Body $b -ContentType 'application/json' -TimeoutSec 125
+  $ts2 = Get-Date -Format "HH:mm:ss.fff"
+  if ($r -and $r.decision) {
+    $out = $r | ConvertTo-Json -Depth 10 -Compress
+    Add-Content $logFile "[$ts2] [PLAN] Got response: $out"
+    $out
+  } else {
+    Add-Content $logFile "[$ts2] [PLAN] Empty/timeout response (no decision)"
+  }
+} catch {
+  $ts2 = Get-Date -Format "HH:mm:ss.fff"
+  Add-Content $logFile "[$ts2] [PLAN] ERROR: $($_.Exception.Message)"
+}
diff --git a/hooks/forward-hook.ps1 b/hooks/forward-hook.ps1
new file mode 100644
index 0000000..56a7a16
--- /dev/null
+++ b/hooks/forward-hook.ps1
@@ -0,0 +1,7 @@
+# Forward hook stdin to agent-ui backend (fire-and-forget)
+# Usage: powershell -NoProfile -File hooks/forward-hook.ps1 <agent>
+param([string]$agent = "ejecutor")
+$b = [Console]::In.ReadToEnd()
+try {
+  Invoke-RestMethod -Uri "http://localhost:4101/api/claude-hook?agent=$agent" -Method POST -Body $b -ContentType 'application/json' -TimeoutSec 3 | Out-Null
+} catch {}
diff --git a/server/routes/hooks-approval.ts b/server/routes/hooks-approval.ts
new file mode 100644
index 0000000..64d271a
--- /dev/null
+++ b/server/routes/hooks-approval.ts
@@ -0,0 +1,330 @@
+import { jsonResponse, errorResponse } from '../utils/cors'
+import { PORT_GIT } from '../config'
+
+// ── Types ──
+
+interface PermissionPayload {
+  hook_event_name?: string
+  session_id?: string
+  tool_name?: string
+  tool_input?: unknown
+  agent_name?: string
+  cwd?: string
+  [key: string]: unknown
+}
+
+interface StopPayload {
+  hook_event_name?: string
+  session_id?: string
+  permission_mode?: string
+  stop_hook_active?: boolean
+  transcript_messages?: unknown[]
+  [key: string]: unknown
+}
+
+interface PendingRequest<T = unknown> {
+  resolve: (result: T | null) => void
+  timer: ReturnType<typeof setTimeout>
+  payload: Record<string, unknown>
+  type: 'permission' | 'plan'
+  createdAt: number
+}
+
+// ── State ──
+
+const pendingRequests = new Map<string, PendingRequest>()
+const TIMEOUT_MS = 120_000
+
+// ── Broadcast ──
+// API server (4101) and sync server (4105) are separate Bun processes.
+// broadcastFn works when called from the sync server process (same module instance).
+// From the API server process, we fall back to HTTP POST → sync server /broadcast endpoint.
+
+let broadcastFn: ((message: string) => void) | null = null
+
+export function setHooksApprovalBroadcast(fn: (message: string) => void) {
+  broadcastFn = fn
+  console.log('[HooksApproval] broadcastFn SET (same process)')
+}
+
+function broadcastMessage(message: string) {
+  if (broadcastFn) {
+    console.log('[HooksApproval] Broadcasting via direct fn')
+    broadcastFn(message)
+    return
+  }
+  // Cross-process fallback: POST to sync server /broadcast endpoint
+  console.log('[HooksApproval] Broadcasting via HTTP to sync server')
+  fetch(`http://localhost:${PORT_GIT}/broadcast`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: message
+  }).then(() => {
+    console.log('[HooksApproval] Broadcast via /broadcast OK')
+  }).catch(e => {
+    console.error('[HooksApproval] Broadcast failed:', e.message)
+  })
+}
+
+function generateId(prefix: string): string {
+  return `${prefix}_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`
+}
+
+// ── Permission (PreToolUse hook) ──
+
+export async function handleHooksApprovalPermission(req: Request): Promise<Response | null> {
+  if (req.method !== 'POST') return null
+
+  try {
+    const body = await req.json() as PermissionPayload
+    const requestId = generateId('haperm')
+    console.log(`[HooksApproval] Permission request ${requestId}: tool=${body.tool_name} agent=${body.agent_name} session=${body.session_id}`)
+
+    // Broadcast to UI
+    broadcastMessage(JSON.stringify({
+      type: 'hooks-approval-permission',
+      requestId,
+      tool_name: body.tool_name,
+      tool_input: body.tool_input,
+      agent_name: body.agent_name,
+      session_id: body.session_id,
+      cwd: body.cwd,
+      timestamp: Date.now()
+    }))
+
+    // Long-poll: wait for UI decision or timeout
+    const result = await new Promise<unknown>((resolve) => {
+      const timer = setTimeout(() => {
+        pendingRequests.delete(requestId)
+        resolve(null)
+      }, TIMEOUT_MS)
+
+      pendingRequests.set(requestId, {
+        resolve,
+        timer,
+        payload: body as Record<string, unknown>,
+        type: 'permission',
+        createdAt: Date.now()
+      })
+    })
+
+    // null = timeout, let Claude Code handle normally
+    if (result === null) {
+      console.log(`[HooksApproval] Permission ${requestId} timed out`)
+      return jsonResponse({})
+    }
+
+    console.log(`[HooksApproval] Permission ${requestId} resolved:`, JSON.stringify(result))
+    return jsonResponse(result)
+  } catch (e) {
+    console.error(`[HooksApproval] Permission error:`, e)
+    return errorResponse('Invalid JSON body', 400)
+  }
+}
+
+// ── Plan (Stop hook) ──
+
+export async function handleHooksApprovalPlan(req: Request): Promise<Response | null> {
+  if (req.method !== 'POST') return null
+
+  try {
+    const body = await req.json() as StopPayload
+    const requestId = generateId('haplan')
+    console.log(`[HooksApproval] Plan request ${requestId}: session=${body.session_id} mode=${body.permission_mode}`)
+
+    // Extract last assistant message for display
+    let lastAssistantText = ''
+    if (Array.isArray(body.transcript_messages)) {
+      for (let i = body.transcript_messages.length - 1; i >= 0; i--) {
+        const msg = body.transcript_messages[i] as any
+        if (msg?.role === 'assistant') {
+          if (typeof msg.content === 'string') {
+            lastAssistantText = msg.content
+          } else if (Array.isArray(msg.content)) {
+            lastAssistantText = msg.content
+              .filter((b: any) => b.type === 'text')
+              .map((b: any) => b.text)
+              .join('\n')
+          }
+          break
+        }
+      }
+    }
+
+    // Broadcast to UI
+    broadcastMessage(JSON.stringify({
+      type: 'hooks-approval-plan',
+      requestId,
+      session_id: body.session_id,
+      permission_mode: body.permission_mode,
+      lastAssistantText,
+      timestamp: Date.now()
+    }))
+
+    // Long-poll
+    const result = await new Promise<unknown>((resolve) => {
+      const timer = setTimeout(() => {
+        pendingRequests.delete(requestId)
+        resolve(null)
+      }, TIMEOUT_MS)
+
+      pendingRequests.set(requestId, {
+        resolve,
+        timer,
+        payload: body as Record<string, unknown>,
+        type: 'plan',
+        createdAt: Date.now()
+      })
+    })
+
+    if (result === null) {
+      console.log(`[HooksApproval] Plan ${requestId} timed out`)
+      return jsonResponse({})
+    }
+
+    console.log(`[HooksApproval] Plan ${requestId} resolved:`, JSON.stringify(result))
+    return jsonResponse(result)
+  } catch (e) {
+    console.error(`[HooksApproval] Plan error:`, e)
+    return errorResponse('Invalid JSON body', 400)
+  }
+}
+
+// ── Respond to permission ──
+
+export async function handleHooksApprovalRespond(req: Request): Promise<Response | null> {
+  if (req.method !== 'POST') return null
+
+  try {
+    const body = await req.json() as { requestId: string; decision: 'allow' | 'deny' }
+
+    if (!body.requestId || !body.decision) {
+      return errorResponse('Missing requestId or decision', 400)
+    }
+
+    if (!['allow', 'deny'].includes(body.decision)) {
+      return errorResponse('Decision must be "allow" or "deny"', 400)
+    }
+
+    const pending = pendingRequests.get(body.requestId)
+    if (!pending || pending.type !== 'permission') {
+      console.warn(`[HooksApproval] Respond permission: ${body.requestId} not found (expired?)`)
+      return errorResponse('Permission request not found or expired', 404)
+    }
+
+    console.log(`[HooksApproval] Responding permission ${body.requestId}: ${body.decision}`)
+    clearTimeout(pending.timer)
+    pendingRequests.delete(body.requestId)
+
+    // Build hookSpecificOutput per PermissionRequest docs:
+    // hookSpecificOutput.decision.behavior = "allow" | "deny"
+    const hookOutput: Record<string, unknown> = body.decision === 'allow'
+      ? {
+          hookSpecificOutput: {
+            hookEventName: 'PermissionRequest',
+            decision: {
+              behavior: 'allow'
+            }
+          }
+        }
+      : {
+          hookSpecificOutput: {
+            hookEventName: 'PermissionRequest',
+            decision: {
+              behavior: 'deny',
+              message: 'Denied via UI'
+            }
+          }
+        }
+
+    pending.resolve(hookOutput)
+
+    return jsonResponse({ success: true, requestId: body.requestId, decision: body.decision })
+  } catch (e) {
+    return errorResponse('Invalid JSON body', 400)
+  }
+}
+
+// ── Respond to plan ──
+
+export async function handleHooksApprovalRespondPlan(req: Request): Promise<Response | null> {
+  if (req.method !== 'POST') return null
+
+  try {
+    const body = await req.json() as { requestId: string; decision: 'approve' | 'reject' | 'edit'; reason?: string }
+
+    if (!body.requestId || !body.decision) {
+      return errorResponse('Missing requestId or decision', 400)
+    }
+
+    if (!['approve', 'reject', 'edit'].includes(body.decision)) {
+      return errorResponse('Decision must be "approve", "reject", or "edit"', 400)
+    }
+
+    const pending = pendingRequests.get(body.requestId)
+    if (!pending || pending.type !== 'plan') {
+      console.warn(`[HooksApproval] Respond plan: ${body.requestId} not found (expired?)`)
+      return errorResponse('Plan request not found or expired', 404)
+    }
+
+    console.log(`[HooksApproval] Responding plan ${body.requestId}: ${body.decision}`)
+    clearTimeout(pending.timer)
+    pendingRequests.delete(body.requestId)
+
+    // Build Stop hook output per docs:
+    // "approve" plan = "block" stop (so Claude continues to implement)
+    // "reject" plan = let Claude stop (empty response)
+    // "edit" = "block" stop with user instructions as reason
+    let stopResult: Record<string, unknown>
+
+    if (body.decision === 'approve') {
+      stopResult = { decision: 'block', reason: 'Plan approved via UI. Proceed with implementation.' }
+    } else if (body.decision === 'reject') {
+      // Let Claude stop — empty response means no blocking
+      stopResult = {}
+    } else {
+      // edit = block stop + supply user instructions
+      stopResult = { decision: 'block', reason: body.reason || 'Continue with modifications.' }
+    }
+
+    pending.resolve(stopResult)
+
+    return jsonResponse({ success: true, requestId: body.requestId, decision: body.decision })
+  } catch (e) {
+    return errorResponse('Invalid JSON body', 400)
+  }
+}
+
+// ── List pending (for state recovery) ──
+
+export async function handleHooksApprovalList(req: Request): Promise<Response | null> {
+  if (req.method !== 'GET') return null
+
+  const permissions: unknown[] = []
+  const plans: unknown[] = []
+
+  for (const [id, p] of pendingRequests) {
+    const base = {
+      requestId: id,
+      session_id: p.payload.session_id,
+      createdAt: p.createdAt
+    }
+
+    if (p.type === 'permission') {
+      permissions.push({
+        ...base,
+        tool_name: p.payload.tool_name,
+        tool_input: p.payload.tool_input,
+        agent_name: p.payload.agent_name
+      })
+    } else {
+      plans.push({
+        ...base,
+        permission_mode: p.payload.permission_mode,
+        lastAssistantText: '' // Not stored, UI gets it from WS broadcast
+      })
+    }
+  }
+
+  return jsonResponse({ permissions, plans })
+}
diff --git a/server/routes/index.ts b/server/routes/index.ts
index bb4011d..27c6d90 100644
--- a/server/routes/index.ts
+++ b/server/routes/index.ts
@@ -22,6 +22,12 @@ import {
   handleAgentsConfigPermissions, handleAgentsConfigHooks, handleAgentsConfigMcp
 } from './agents'
 import { handleTranscript, handleTranscriptSessions, handleTranscriptActive, handleClaudeStats, handleClaudeUsage } from './transcript'
+import { handleTranscriptDebugSessions, handleTranscriptDebugRaw, handleTranscriptDebugSend, handleTranscriptDebugStatus } from './transcript-debug'
+import {
+  handleHooksApprovalPermission, handleHooksApprovalPlan,
+  handleHooksApprovalRespond, handleHooksApprovalRespondPlan,
+  handleHooksApprovalList
+} from './hooks-approval'
 
 export async function handleRequest(req: Request): Promise<Response> {
   const url = new URL(req.url)
@@ -319,6 +325,52 @@ export async function handleRequest(req: Request): Promise<Response> {
     return handleTranscript(req, url, transcriptMatch[1])
   }
 
+  // Transcript Debug
+  if (path === '/api/transcript-debug/sessions' && req.method === 'GET') {
+    return handleTranscriptDebugSessions(url)
+  }
+
+  if (path === '/api/transcript-debug/send' && req.method === 'POST') {
+    return handleTranscriptDebugSend(req)
+  }
+
+  if (path === '/api/transcript-debug/status' && req.method === 'GET') {
+    return handleTranscriptDebugStatus(url)
+  }
+
+  const transcriptDebugRawMatch = path.match(/^\/api\/transcript-debug\/([a-f0-9-]+)\/raw$/)
+  if (transcriptDebugRawMatch && req.method === 'GET') {
+    return handleTranscriptDebugRaw(transcriptDebugRawMatch[1], url)
+  }
+
+  // Hooks Approval (long-poll for permission/plan decisions)
+  if (path === '/api/hooks-approval') {
+    if (req.method === 'GET') {
+      const res = await handleHooksApprovalList(req)
+      if (res) return res
+    }
+  }
+
+  if (path === '/api/hooks-approval/permission' && req.method === 'POST') {
+    const res = await handleHooksApprovalPermission(req)
+    if (res) return res
+  }
+
+  if (path === '/api/hooks-approval/plan' && req.method === 'POST') {
+    const res = await handleHooksApprovalPlan(req)
+    if (res) return res
+  }
+
+  if (path === '/api/hooks-approval/respond' && req.method === 'POST') {
+    const res = await handleHooksApprovalRespond(req)
+    if (res) return res
+  }
+
+  if (path === '/api/hooks-approval/respond-plan' && req.method === 'POST') {
+    const res = await handleHooksApprovalRespondPlan(req)
+    if (res) return res
+  }
+
   // Agents
   if (path === '/api/agents' && req.method === 'GET') {
     return handleAgents(req)
diff --git a/server/routes/transcript-debug.ts b/server/routes/transcript-debug.ts
new file mode 100644
index 0000000..683c6a1
--- /dev/null
+++ b/server/routes/transcript-debug.ts
@@ -0,0 +1,221 @@
+import { jsonResponse, errorResponse, corsHeaders } from '../utils/cors'
+import { existsSync, readdirSync, readFileSync, statSync } from 'fs'
+import { join } from 'path'
+import { homedir } from 'os'
+import { spawn } from 'child_process'
+import { WORKING_DIR } from '../config'
+
+// Agent transcript directories
+const AGENT_DIRS: Record<string, string> = {
+  ejecutor: join(WORKING_DIR, '.claude-ejecutor', 'projects'),
+  nucleo000: join(WORKING_DIR, '.claude-nucleo000', 'projects'),
+  claude: join(homedir(), '.claude', 'projects')
+}
+
+// Agent CLI commands (these .cmd wrappers handle CLAUDE_CONFIG_DIR + cd)
+const AGENT_COMMANDS: Record<string, string> = {
+  ejecutor: 'ejecutor',
+  nucleo000: 'nucleo000',
+  claude: 'claude'
+}
+
+// Track running processes per session to prevent concurrent sends
+const runningProcesses = new Map<string, { pid: number; kill: () => void }>()
+
+// Broadcast callback — set by sync-server to push WebSocket messages
+let broadcastFn: ((msg: string) => void) | null = null
+
+export function setTranscriptDebugBroadcast(fn: (msg: string) => void) {
+  broadcastFn = fn
+}
+
+// Project hash for this project
+const PROJECT_HASH = 'C--Users-jodar-agent-ui'
+
+function getProjectDir(agent: string): string | null {
+  const baseDir = AGENT_DIRS[agent]
+  if (!baseDir || !existsSync(baseDir)) return null
+
+  // Try exact project hash first
+  const exact = join(baseDir, PROJECT_HASH)
+  if (existsSync(exact)) return exact
+
+  // Fallback: first directory
+  const dirs = readdirSync(baseDir)
+  return dirs.length > 0 ? join(baseDir, dirs[0]) : null
+}
+
+function extractFirstUserMessage(filePath: string): string {
+  try {
+    const content = readFileSync(filePath, 'utf-8')
+    const lines = content.split('\n')
+    for (const line of lines) {
+      if (!line.trim()) continue
+      try {
+        const obj = JSON.parse(line)
+        if (obj.type === 'user' && obj.message) {
+          const c = obj.message.content
+          if (typeof c === 'string') return c.slice(0, 120)
+          if (Array.isArray(c)) {
+            const textBlock = c.find((b: any) => b.type === 'text' && b.text?.trim())
+            if (textBlock) return textBlock.text.slice(0, 120)
+          }
+        }
+      } catch {}
+    }
+  } catch {}
+  return ''
+}
+
+export function handleTranscriptDebugSessions(url: URL): Response {
+  const agent = url.searchParams.get('agent') || 'ejecutor'
+  const projectDir = getProjectDir(agent)
+  if (!projectDir || !existsSync(projectDir)) {
+    return jsonResponse([])
+  }
+
+  const files = readdirSync(projectDir)
+    .filter(f => f.endsWith('.jsonl'))
+    .map(f => {
+      const fullPath = join(projectDir, f)
+      const stat = statSync(fullPath)
+      return {
+        id: f.replace('.jsonl', ''),
+        filename: f,
+        size: stat.size,
+        mtime: stat.mtimeMs,
+        mtimeISO: stat.mtime.toISOString(),
+        firstUserMessage: extractFirstUserMessage(fullPath)
+      }
+    })
+    .sort((a, b) => b.mtime - a.mtime)
+
+  return jsonResponse(files)
+}
+
+export function handleTranscriptDebugRaw(sessionId: string, url: URL): Response {
+  const agent = url.searchParams.get('agent') || 'ejecutor'
+  const projectDir = getProjectDir(agent)
+  if (!projectDir) {
+    return errorResponse(`No project directory found for agent: ${agent}`, 404)
+  }
+
+  const filePath = join(projectDir, `${sessionId}.jsonl`)
+  if (!existsSync(filePath)) {
+    return errorResponse(`Session ${sessionId} not found`, 404)
+  }
+
+  const content = readFileSync(filePath, 'utf-8')
+  return new Response(content, {
+    status: 200,
+    headers: {
+      'Content-Type': 'text/plain; charset=utf-8',
+      ...corsHeaders
+    }
+  })
+}
+
+export function handleTranscriptDebugStatus(url: URL): Response {
+  const sessionId = url.searchParams.get('sessionId')
+  if (!sessionId) return jsonResponse({ processing: false })
+  return jsonResponse({ processing: runningProcesses.has(sessionId) })
+}
+
+export async function handleTranscriptDebugSend(req: Request): Promise<Response> {
+  if (req.method !== 'POST') {
+    return errorResponse('Method not allowed', 405)
+  }
+
+  let body: { agent?: string; sessionId?: string; prompt?: string }
+  try {
+    body = await req.json()
+  } catch {
+    return errorResponse('Invalid JSON body')
+  }
+
+  const { agent = 'ejecutor', sessionId, prompt } = body
+
+  if (!sessionId) return errorResponse('sessionId is required')
+  if (!prompt?.trim()) return errorResponse('prompt is required')
+  if (!AGENT_COMMANDS[agent]) return errorResponse(`Unknown agent: ${agent}`)
+
+  // Verify session file exists
+  const projectDir = getProjectDir(agent)
+  if (!projectDir) return errorResponse(`No project directory for agent: ${agent}`, 404)
+
+  const sessionFile = join(projectDir, `${sessionId}.jsonl`)
+  if (!existsSync(sessionFile)) {
+    return errorResponse(`Session ${sessionId} not found`, 404)
+  }
+
+  // Prevent concurrent sends to the same session
+  if (runningProcesses.has(sessionId)) {
+    return errorResponse('A prompt is already being processed for this session', 409)
+  }
+
+  // Use the agent .cmd wrapper directly (handles CLAUDE_CONFIG_DIR + cd)
+  // Escape double quotes for cmd.exe and pass as single command string
+  const agentCmd = AGENT_COMMANDS[agent]
+  const escaped = prompt.replace(/"/g, '""')
+  const cmd = `${agentCmd} --resume "${sessionId}" --permission-mode default -p "${escaped}"`
+
+  const env = { ...process.env }
+  delete env.CLAUDECODE
+
+  console.log(`[TranscriptDebug] Spawning: ${agentCmd} --resume ${sessionId.slice(0, 8)}...`)
+
+  const child = spawn(cmd, {
+    cwd: WORKING_DIR,
+    env,
+    stdio: ['ignore', 'pipe', 'pipe'],
+    shell: true
+  } as any)
+
+  // Track the running process
+  runningProcesses.set(sessionId, {
+    pid: child.pid || 0,
+    kill: () => child.kill()
+  })
+
+  let stderr = ''
+  child.stdout?.on('data', (data: Buffer) => {
+    console.log(`[TranscriptDebug] stdout: ${data.toString().slice(0, 200)}`)
+  })
+  child.stderr?.on('data', (data: Buffer) => { stderr += data.toString() })
+
+  child.on('close', (code) => {
+    runningProcesses.delete(sessionId)
+    if (code !== 0) {
+      console.error(`[TranscriptDebug] claude exited with code ${code}`)
+      if (stderr) console.error(`[TranscriptDebug] stderr: ${stderr.slice(0, 500)}`)
+    } else {
+      console.log(`[TranscriptDebug] claude completed for session ${sessionId.slice(0, 8)}...`)
+    }
+    // Notify frontend via WebSocket
+    if (broadcastFn) {
+      broadcastFn(JSON.stringify({
+        type: 'transcript-debug-done',
+        sessionId,
+        exitCode: code
+      }))
+    }
+  })
+
+  child.on('error', (err) => {
+    runningProcesses.delete(sessionId)
+    console.error(`[TranscriptDebug] Failed to spawn claude:`, err.message)
+    if (broadcastFn) {
+      broadcastFn(JSON.stringify({
+        type: 'transcript-debug-done',
+        sessionId,
+        error: err.message
+      }))
+    }
+  })
+
+  return jsonResponse({
+    success: true,
+    pid: child.pid,
+    message: `Prompt sent to ${agent} session ${sessionId.slice(0, 8)}...`
+  })
+}
diff --git a/server/services/handlers/transcript-debug-handler.ts b/server/services/handlers/transcript-debug-handler.ts
new file mode 100644
index 0000000..36784eb
--- /dev/null
+++ b/server/services/handlers/transcript-debug-handler.ts
@@ -0,0 +1,160 @@
+/**
+ * Transcript Debug Handler
+ * Watches all agent project dirs (.claude-ejecutor/projects/, .claude-nucleo000/projects/)
+ * for JSONL file changes and broadcasts notifications via the sync server.
+ *
+ * Uses a polling approach on Windows (fs.watch is unreliable for appends)
+ * combined with fs.watch for immediate detection.
+ */
+
+import { watch, existsSync, readdirSync, statSync, type FSWatcher } from 'fs'
+import { join } from 'path'
+import { homedir } from 'os'
+
+const AGENT_NAMES = ['ejecutor', 'nucleo000', 'claude']
+const DEBOUNCE_MS = 25
+const POLL_INTERVAL_MS = 1500
+
+// Per-agent state
+interface AgentWatcherState {
+  projectDir: string
+  watcher: FSWatcher | null
+  fileSizeCache: Map<string, number>
+  debounceTimer: ReturnType<typeof setTimeout> | null
+}
+
+const agentStates = new Map<string, AgentWatcherState>()
+let pollTimer: ReturnType<typeof setInterval> | null = null
+
+// Project hash matching the working dir
+const PROJECT_HASH = 'C--Users-jodar-agent-ui'
+
+function findProjectDir(workingDir: string, agent: string): string | null {
+  const agentDir = agent === 'claude'
+    ? join(homedir(), '.claude', 'projects')
+    : join(workingDir, `.claude-${agent}`, 'projects')
+  if (!existsSync(agentDir)) return null
+
+  // For claude global dir, go straight to the project hash
+  if (agent === 'claude') {
+    const exact = join(agentDir, PROJECT_HASH)
+    return existsSync(exact) ? exact : null
+  }
+
+  const dirs = readdirSync(agentDir)
+  return dirs.length > 0 ? join(agentDir, dirs[0]) : null
+}
+
+function emitChange(agent: string, sessionId: string, filename: string, projectDir: string, broadcast: (message: string) => void) {
+  const state = agentStates.get(agent)
+  if (!state) return
+
+  if (state.debounceTimer) clearTimeout(state.debounceTimer)
+  state.debounceTimer = setTimeout(() => {
+    const filePath = join(projectDir, filename)
+    let size = 0
+    try {
+      size = statSync(filePath).size
+    } catch {}
+
+    console.log(`[TranscriptDebug:${agent}] Change: ${filename} (${size} bytes)`)
+    broadcast(JSON.stringify({
+      type: 'transcript-debug-change',
+      sessionId,
+      agent,
+      filename,
+      size,
+      timestamp: Date.now()
+    }))
+  }, DEBOUNCE_MS)
+}
+
+export function setupTranscriptDebugWatcher(workingDir: string, broadcast: (message: string) => void) {
+  let anyWatched = false
+
+  for (const agent of AGENT_NAMES) {
+    const projectDir = findProjectDir(workingDir, agent)
+    if (!projectDir) continue
+
+    const state: AgentWatcherState = {
+      projectDir,
+      watcher: null,
+      fileSizeCache: new Map(),
+      debounceTimer: null
+    }
+
+    // Initialize file size cache
+    try {
+      const files = readdirSync(projectDir).filter(f => f.endsWith('.jsonl'))
+      for (const f of files) {
+        try {
+          state.fileSizeCache.set(f, statSync(join(projectDir, f)).size)
+        } catch {}
+      }
+    } catch {}
+
+    // fs.watch for immediate detection
+    try {
+      state.watcher = watch(projectDir, { recursive: false }, (_, filename) => {
+        if (!filename) return
+        if (!filename.endsWith('.jsonl')) return
+        const sessionId = filename.replace('.jsonl', '')
+        emitChange(agent, sessionId, filename, projectDir, broadcast)
+      })
+      console.log(`[TranscriptDebug] Watching ${agent}: ${projectDir}`)
+    } catch (e: any) {
+      console.error(`[TranscriptDebug] Watch failed for ${agent}: ${e.message}`)
+    }
+
+    agentStates.set(agent, state)
+    anyWatched = true
+  }
+
+  if (!anyWatched) {
+    console.log('[TranscriptDebug] No agent project directories found, skipping watcher')
+    return
+  }
+
+  // Shared polling fallback for all agents
+  pollTimer = setInterval(() => {
+    for (const [agent, state] of agentStates) {
+      try {
+        const files = readdirSync(state.projectDir).filter(f => f.endsWith('.jsonl'))
+        for (const f of files) {
+          try {
+            const size = statSync(join(state.projectDir, f)).size
+            const prevSize = state.fileSizeCache.get(f) || 0
+            if (size !== prevSize) {
+              state.fileSizeCache.set(f, size)
+              const sessionId = f.replace('.jsonl', '')
+              emitChange(agent, sessionId, f, state.projectDir, broadcast)
+            }
+          } catch {}
+        }
+        // Detect new files
+        for (const f of files) {
+          if (!state.fileSizeCache.has(f)) {
+            state.fileSizeCache.set(f, 0)
+          }
+        }
+      } catch {}
+    }
+  }, POLL_INTERVAL_MS)
+}
+
+export function cleanupTranscriptDebugWatcher() {
+  for (const [, state] of agentStates) {
+    if (state.watcher) {
+      state.watcher.close()
+    }
+    if (state.debounceTimer) {
+      clearTimeout(state.debounceTimer)
+    }
+  }
+  agentStates.clear()
+
+  if (pollTimer) {
+    clearInterval(pollTimer)
+    pollTimer = null
+  }
+}
diff --git a/server/services/sync-server.ts b/server/services/sync-server.ts
index cea2b37..9b4fad5 100644
--- a/server/services/sync-server.ts
+++ b/server/services/sync-server.ts
@@ -8,6 +8,9 @@
 import { PORT_GIT, WORKING_DIR } from '../config'
 import { setupGitWatcher, handleGitClient, cleanupGitWatcher } from './handlers/git-handler'
 import { setupComponentsWatcher, cleanupComponentsWatcher } from './handlers/components-handler'
+import { setupTranscriptDebugWatcher, cleanupTranscriptDebugWatcher } from './handlers/transcript-debug-handler'
+import { setTranscriptDebugBroadcast } from '../routes/transcript-debug'
+import { setHooksApprovalBroadcast } from '../routes/hooks-approval'
 import { handleTorchMessage, handleTorchConnect, handleTorchDisconnect, getTorchStatus, cleanupTorchHandler } from './handlers/torch-handler'
 
 // Connected clients
@@ -31,13 +34,13 @@ export function getClients() {
 export function startSyncServer() {
   const server = Bun.serve({
     port: PORT_GIT,
-    fetch(req, server) {
+    async fetch(req, server) {
       const url = new URL(req.url)
 
       // CORS headers
       const corsHeaders = {
         'Access-Control-Allow-Origin': '*',
-        'Access-Control-Allow-Methods': 'GET, OPTIONS',
+        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
         'Access-Control-Allow-Headers': 'Content-Type'
       }
 
@@ -45,6 +48,18 @@ export function startSyncServer() {
         return new Response(null, { headers: corsHeaders })
       }
 
+      // Broadcast endpoint (used by API server cross-process)
+      if (url.pathname === '/broadcast' && req.method === 'POST') {
+        try {
+          const message = await req.text()
+          console.log(`[Sync] /broadcast received (${message.length} bytes) → ${clients.size} clients`)
+          broadcast(message)
+          return Response.json({ ok: true, clients: clients.size }, { headers: corsHeaders })
+        } catch (e: any) {
+          return Response.json({ error: e.message }, { status: 400, headers: corsHeaders })
+        }
+      }
+
       // Health check
       if (url.pathname === '/health') {
         const torchStatus = getTorchStatus()
@@ -100,6 +115,11 @@ export function startSyncServer() {
   // Start file watchers
   setupGitWatcher(WORKING_DIR, broadcast)
   setupComponentsWatcher(WORKING_DIR, broadcast)
+  setupTranscriptDebugWatcher(WORKING_DIR, broadcast)
+
+  // Give the route handler access to broadcast for process-complete notifications
+  setTranscriptDebugBroadcast(broadcast)
+  setHooksApprovalBroadcast(broadcast)
 
   return server
 }
@@ -107,6 +127,7 @@ export function startSyncServer() {
 export function stopSyncServer() {
   cleanupGitWatcher()
   cleanupComponentsWatcher()
+  cleanupTranscriptDebugWatcher()
   cleanupTorchHandler()
   clients.clear()
 }