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

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

frontend/src/components/transcript-debug/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>