feat: Compact transparent tool cards with grouped assistant messages

- Redesign all tool cards (Edit, Read, Bash, Grep, Glob, Write) to be
  compact single-line headers with inline key info and toggle buttons
- Make cards and bubbles fully transparent with subtle color tints
- Remove borders, use only left accent bar per card type
- Color-code numbers: red for removals, green for additions/counts
- Simplify ToolResultBlock to render content directly without toggle
- Group consecutive assistant messages, showing header only on first
- Remove borders from assistant and user message bubbles

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { computed } from 'vue'
 import type { ParsedToolResult } from '@/types/transcript-debug'
 import { highlightCode } from '@/utils/markdown'
 
@@ -7,113 +7,37 @@ 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>
-  <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" v-html="highlightedContent"></pre>
-  </div>
+  <pre class="result-content" v-html="highlightedContent"></pre>
 </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;
+  padding: 0.35rem 0.6rem;
   font-size: 11px;
-  line-height: 1.5;
-  color: var(--text-primary);
+  line-height: 1.45;
+  color: var(--text-secondary);
   white-space: pre-wrap;
   word-break: break-all;
   max-height: 300px;
   overflow-y: auto;
-  background: var(--bg-primary);
+  background: transparent;
+  border-top: 1px solid rgba(255, 255, 255, 0.04);
+  font-family: 'SF Mono', 'Fira Code', monospace;
 }
 </style>