feat: Add specialized tool cards for transcript-debug and glassmorphism bubbles

Add toolCards/ with rich visual cards for 10 tool types:
- AskUserQuestion, ExitPlanMode, EnterPlanMode
- Read, Write, Bash, Edit
- Grep, Glob
- Task/TaskCreate/TaskUpdate/TaskGet/TaskList (unified TaskCard)

Add MarkdownContent component and markdown/syntax highlight utils.
Make user/assistant bubbles transparent with backdrop blur.

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

@@ -1,12 +1,29 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import type { ParsedToolResult } from '@/types/transcript-debug'
+import { highlightCode } from '@/utils/markdown'
 
-defineProps<{
+const props = defineProps<{
   result: ParsedToolResult
 }>()
 
 const expanded = ref(false)
+
+const highlightedContent = computed(() => {
+  const content = props.result.content
+  // Detect JSON
+  const trimmed = content.trim()
+  if ((trimmed.startsWith('{') && trimmed.endsWith('}')) ||
+      (trimmed.startsWith('[') && trimmed.endsWith(']'))) {
+    try {
+      // Re-format + highlight
+      const parsed = JSON.parse(trimmed)
+      return highlightCode(JSON.stringify(parsed, null, 2), 'json')
+    } catch { /* not valid JSON */ }
+  }
+  // Otherwise highlight as generic text
+  return highlightCode(content)
+})
 </script>
 
 <template>
@@ -25,7 +42,7 @@ const expanded = ref(false)
       <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>
+    <pre v-if="expanded" class="result-content" v-html="highlightedContent"></pre>
   </div>
 </template>