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/AssistantMessageBubble.vue

@@ -19,6 +19,7 @@ const TASK_TOOLS = new Set(['Task', 'TaskCreate', 'TaskUpdate', 'TaskGet', 'Task
 
 const props = defineProps<{
   message: ParsedAssistantMessage
+  showHeader?: boolean
 }>()
 
 // Filter out empty text blocks (streaming placeholders)
@@ -47,8 +48,8 @@ function formatTokens(n?: number): string {
 </script>
 
 <template>
-  <div class="assistant-bubble">
+  <div :class="['assistant-bubble', { continuation: showHeader === false }]">
-    <div class="bubble-header">
+    <div v-if="showHeader !== false" class="bubble-header">
       <span class="role-badge">Assistant</span>
       <span class="model-badge">{{ message.model }}</span>
       <span v-if="message.usage" class="token-info">
@@ -101,15 +102,19 @@ function formatTokens(n?: number): string {
 
 <style scoped>
 .assistant-bubble {
-  background: rgba(34, 197, 94, 0.03);
+  background: transparent;
-  backdrop-filter: blur(6px);
+  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid rgba(34, 197, 94, 0.1);
+  border: none;
   border-radius: 12px;
   padding: 0.75rem 1rem;
   margin-right: 2rem;
 }
 
+.assistant-bubble.continuation {
+  padding-top: 0;
+}
+
 .bubble-header {
   display: flex;
   align-items: center;

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

@@ -208,11 +208,12 @@ function formatDuration(start: string, end: string): string {
     </div>
     <div ref="scrollContainer" class="messages-scroll">
       <div
-        v-for="msg in conversation.messages"
+        v-for="(msg, idx) in conversation.messages"
         :key="msg.uuid"
         :class="['message-wrapper', {
           resolved: resolvedUuids.has(msg.uuid),
-          selected: selectedUuids.has(msg.uuid)
+          selected: selectedUuids.has(msg.uuid),
+          'assistant-continuation': msg.kind === 'assistant' && idx > 0 && conversation.messages[idx - 1].kind === 'assistant'
         }]"
       >
         <!-- Select checkbox -->
@@ -227,7 +228,7 @@ function formatDuration(start: string, end: string): string {
           </svg>
         </button>
 
-        <div :class="['message-content', { selectable: selectMode && msg.kind !== 'progress' }]" @click="selectMode && msg.kind !== 'progress' ? toggleSelect(msg.uuid) : undefined">
+        <div :class="['message-content', { selectable: selectMode && msg.kind !== 'progress' }]" @click="selectMode && msg.kind !== 'progress' && toggleSelect(msg.uuid)">
           <UserMessageBubble
             v-if="msg.kind === 'user'"
             :message="msg"
@@ -235,6 +236,7 @@ function formatDuration(start: string, end: string): string {
           <AssistantMessageBubble
             v-else-if="msg.kind === 'assistant'"
             :message="msg"
+            :show-header="!(idx > 0 && conversation.messages[idx - 1].kind === 'assistant')"
           />
           <ProgressEvent
             v-else-if="msg.kind === 'progress'"
@@ -448,6 +450,11 @@ function formatDuration(start: string, end: string): string {
   padding: 0.25rem 0.4rem;
 }
 
+/* Consecutive assistant messages: tighter spacing */
+.message-wrapper.assistant-continuation {
+  margin-top: -0.5rem;
+}
+
 /* Messages that replaced an optimistic one: smooth settle instead of bounce */
 .message-wrapper.resolved {
   animation: resolveIn 0.3s ease-out;

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 }]">
+  <pre class="result-content" v-html="highlightedContent"></pre>
-    <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>
 </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;
+  line-height: 1.45;
-  color: var(--text-primary);
+  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>

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

@@ -33,10 +33,10 @@ function formatTime(ts: string): string {
 
 <style scoped>
 .user-bubble {
-  background: rgba(99, 102, 241, 0.04);
+  background: transparent;
-  backdrop-filter: blur(6px);
+  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid rgba(99, 102, 241, 0.12);
+  border: none;
   border-radius: 12px;
   padding: 0.75rem 1rem;
   margin-left: 2rem;
@@ -51,9 +51,9 @@ function formatTime(ts: string): string {
 /* Optimistic / sending state */
 .user-bubble.optimistic {
   opacity: 0.7;
-  border-color: rgba(99, 102, 241, 0.12);
+  border-color: rgba(99, 102, 241, 0.08);
   border-style: dashed;
-  background: rgba(99, 102, 241, 0.04);
+  background: transparent;
 }
 
 .sending-badge {

frontend/src/components/transcript-debug/toolCards/BashCard.vue

@@ -17,144 +17,171 @@ const isError = computed(() => props.call.result?.isError ?? false)
 
 const highlightedCommand = computed(() => highlightCode(command.value, 'bash'))
 
-const outputExpanded = ref(false)
+const cmdExpanded = ref(false)
+const resultExpanded = ref(false)
+
+const cmdPreview = computed(() => {
+  const c = command.value.replace(/\n/g, ' ').trim()
+  return c.length > 60 ? c.slice(0, 60) + '...' : c
+})
 </script>
 
 <template>
   <div :class="['bash-card', { error: isError }]">
     <div class="card-header">
       <span class="card-icon">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <polyline points="4 17 10 11 4 5"/>
           <line x1="12" y1="19" x2="20" y2="19"/>
         </svg>
       </span>
       <span class="card-label">Bash</span>
-      <span v-if="runInBackground" class="bg-badge">background</span>
+      <code class="cmd-preview" :title="command">$ {{ cmdPreview }}</code>
-      <span v-if="timeout" class="timeout-badge">{{ timeout }}ms</span>
+      <span v-if="runInBackground" class="info-badge">bg</span>
-      <span v-if="isError" class="error-badge">error</span>
+      <span v-if="timeout" class="info-badge">{{ timeout }}ms</span>
+      <span v-if="isError" class="error-badge">err</span>
+
+      <span class="header-spacer"></span>
+
+      <button class="toggle-btn" :class="{ active: cmdExpanded }" @click.stop="cmdExpanded = !cmdExpanded" title="Toggle command">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M12 3v18M3 12h18"/>
+        </svg>
+      </button>
+      <button v-if="call.result" class="toggle-btn" :class="{ active: resultExpanded }" @click.stop="resultExpanded = !resultExpanded" title="Toggle result">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="4 17 10 11 4 5"/>
+          <line x1="12" y1="19" x2="20" y2="19"/>
+        </svg>
+      </button>
     </div>
 
-    <!-- Description -->
+    <!-- Full command -->
-    <div v-if="description" class="description">{{ description }}</div>
+    <div v-if="cmdExpanded" class="command-section">
-
+      <div v-if="description" class="description">{{ description }}</div>
-    <!-- Command -->
+      <div class="command-row">
-    <div class="command-section">
+        <span class="prompt">$</span>
-      <div class="command-prompt">$</div>
+        <pre class="command-text" v-html="highlightedCommand"></pre>
-      <pre class="command-text" v-html="highlightedCommand"></pre>
+      </div>
     </div>
 
-    <!-- Result -->
+    <ToolResultBlock v-if="resultExpanded && call.result" :result="call.result" />
-    <ToolResultBlock v-if="call.result" :result="call.result" />
   </div>
 </template>
 
 <style scoped>
 .bash-card {
-  border: 1px solid rgba(245, 158, 11, 0.25);
+  border: none;
-  border-left: 3px solid #f59e0b;
+  border-left: 2px solid rgba(245, 158, 11, 0.25);
-  border-radius: 8px;
+  border-radius: 6px;
   overflow: hidden;
-  margin: 0.5rem 0;
+  margin: 0.35rem 0;
-  background: var(--bg-primary);
+  background: rgba(245, 158, 11, 0.02);
 }
 
-.bash-card.error {
+.bash-card.error { border-left-color: rgba(239, 68, 68, 0.4); }
-  border-color: rgba(239, 68, 68, 0.25);
-  border-left-color: #ef4444;
-}
 
 .card-header {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.35rem;
-  padding: 0.45rem 0.75rem;
+  padding: 0.3rem 0.6rem;
-  background: rgba(245, 158, 11, 0.06);
+  background: transparent;
-  border-bottom: 1px solid rgba(245, 158, 11, 0.12);
+  min-height: 28px;
 }
 
-.bash-card.error .card-header {
+.card-icon { display: flex; align-items: center; color: rgba(245, 158, 11, 0.6); flex-shrink: 0; }
-  background: rgba(239, 68, 68, 0.06);
+.bash-card.error .card-icon { color: rgba(239, 68, 68, 0.6); }
-  border-bottom-color: rgba(239, 68, 68, 0.12);
-}
-
-.card-icon {
-  display: flex;
-  align-items: center;
-  color: #f59e0b;
-}
-
-.bash-card.error .card-icon { color: #ef4444; }
 
 .card-label {
-  font-size: 11px;
+  font-size: 10px;
-  font-weight: 600;
+  font-weight: 700;
-  color: #f59e0b;
+  color: rgba(245, 158, 11, 0.7);
   text-transform: uppercase;
   letter-spacing: 0.5px;
+  flex-shrink: 0;
 }
+.bash-card.error .card-label { color: rgba(239, 68, 68, 0.7); }
 
-.bash-card.error .card-label { color: #ef4444; }
+.cmd-preview {
-
+  font-size: 11px;
-.bg-badge {
-  font-size: 10px;
-  padding: 0.1rem 0.35rem;
-  border-radius: 4px;
-  background: rgba(99, 102, 241, 0.12);
-  color: #818cf8;
-  font-weight: 500;
-}
-
-.timeout-badge {
-  font-size: 10px;
-  padding: 0.1rem 0.35rem;
-  border-radius: 4px;
-  background: var(--bg-secondary);
-  color: var(--text-muted);
   font-family: 'SF Mono', 'Fira Code', monospace;
-  margin-left: auto;
+  color: var(--text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  opacity: 0.7;
 }
 
-.error-badge {
+.info-badge, .error-badge {
-  font-size: 10px;
+  font-size: 9px;
-  padding: 0.1rem 0.4rem;
+  padding: 0.05rem 0.3rem;
+  border-radius: 3px;
+  font-weight: 600;
+  flex-shrink: 0;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  background: transparent;
+}
+
+.info-badge { color: rgba(245, 158, 11, 0.6); }
+.error-badge { color: rgba(239, 68, 68, 0.7); }
+
+.header-spacer { flex: 1; }
+
+.toggle-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
   border-radius: 4px;
-  background: rgba(239, 68, 68, 0.15);
+  background: transparent;
-  color: #ef4444;
+  color: var(--text-muted);
-  font-weight: 500;
+  cursor: pointer;
+  flex-shrink: 0;
+  opacity: 0.5;
+  transition: all 0.15s;
+}
+.toggle-btn:hover { opacity: 0.8; }
+.toggle-btn.active { opacity: 1; color: rgba(245, 158, 11, 0.8); }
+
+/* Command expanded */
+.command-section {
+  border-top: 1px solid rgba(255, 255, 255, 0.04);
 }
 
 .description {
-  padding: 0.4rem 0.75rem;
+  padding: 0.25rem 0.6rem;
-  font-size: 12px;
+  font-size: 11px;
-  color: var(--text-secondary);
+  color: var(--text-muted);
-  border-bottom: 1px solid var(--border-color);
   font-style: italic;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
 }
 
-.command-section {
+.command-row {
   display: flex;
   align-items: flex-start;
-  gap: 0.5rem;
+  gap: 0.4rem;
-  padding: 0.5rem 0.75rem;
+  padding: 0.35rem 0.6rem;
-  background: rgba(0, 0, 0, 0.15);
+  background: rgba(0, 0, 0, 0.08);
-  border-bottom: 1px solid var(--border-color);
 }
 
-.command-prompt {
+.prompt {
-  color: #f59e0b;
+  color: rgba(245, 158, 11, 0.7);
   font-family: 'SF Mono', 'Fira Code', monospace;
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 700;
-  line-height: 1.5;
+  line-height: 1.45;
   flex-shrink: 0;
   user-select: none;
 }
 
 .command-text {
   margin: 0;
-  font-size: 12px;
+  font-size: 11px;
-  line-height: 1.5;
+  line-height: 1.45;
   color: var(--text-primary);
   white-space: pre-wrap;
   word-break: break-all;

frontend/src/components/transcript-debug/toolCards/EditCard.vue

@@ -27,7 +27,8 @@ const ext = computed(() => {
 
 const isError = computed(() => props.call.result?.isError ?? false)
 
-const diffExpanded = ref(true)
+const diffExpanded = ref(false)
+const resultExpanded = ref(false)
 
 const highlightedOld = computed(() => highlightCode(oldString.value, ext.value || undefined))
 const highlightedNew = computed(() => highlightCode(newString.value, ext.value || undefined))
@@ -40,247 +41,165 @@ const newLineCount = computed(() => newString.value.split('\n').length)
   <div :class="['edit-card', { error: isError }]">
     <div class="card-header">
       <span class="card-icon">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <svg width="12" height="12" 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>
       </span>
       <span class="card-label">Edit</span>
+      <span class="file-name" :title="filePath">{{ fileName }}</span>
       <span v-if="ext" class="ext-badge">.{{ ext }}</span>
-      <span v-if="replaceAll" class="replace-all-badge">replace all</span>
+      <span v-if="replaceAll" class="replace-all-badge">all</span>
-      <span v-if="isError" class="error-badge">error</span>
+      <span class="diff-removed">-{{ oldLineCount }}</span>
-    </div>
+      <span class="diff-added">+{{ newLineCount }}</span>
+      <span v-if="isError" class="error-badge">err</span>
 
-    <div class="card-body">
+      <span class="header-spacer"></span>
-      <div class="file-path" :title="filePath">
+
-        <span class="path-dir">{{ filePath.replace(/\\/g, '/').split('/').slice(0, -1).join('/') }}/</span>
+      <button class="toggle-btn" :class="{ active: diffExpanded }" @click.stop="diffExpanded = !diffExpanded" title="Toggle diff">
-        <span class="path-file">{{ fileName }}</span>
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-      </div>
+          <path d="M12 3v18M3 12h18"/>
+        </svg>
+      </button>
+      <button v-if="call.result" class="toggle-btn" :class="{ active: resultExpanded }" @click.stop="resultExpanded = !resultExpanded" title="Toggle result">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="4 17 10 11 4 5"/>
+          <line x1="12" y1="19" x2="20" y2="19"/>
+        </svg>
+      </button>
     </div>
 
     <!-- Diff view -->
-    <div class="diff-section">
+    <div v-if="diffExpanded" class="diff-content">
-      <button class="diff-toggle" @click="diffExpanded = !diffExpanded">
+      <div class="diff-block removed">
-        <svg
+        <div class="diff-label"><span class="diff-sign">-</span> old</div>
-          :class="['chevron', { rotated: diffExpanded }]"
+        <pre class="diff-code" v-html="highlightedOld"></pre>
-          width="10" height="10" viewBox="0 0 24 24"
+      </div>
-          fill="none" stroke="currentColor" stroke-width="2"
+      <div class="diff-block added">
-        >
+        <div class="diff-label"><span class="diff-sign">+</span> new</div>
-          <polyline points="9 18 15 12 9 6" />
+        <pre class="diff-code" v-html="highlightedNew"></pre>
-        </svg>
-        <span>Changes</span>
-        <span class="diff-meta">-{{ oldLineCount }} +{{ newLineCount }} lines</span>
-      </button>
-
-      <div v-if="diffExpanded" class="diff-content">
-        <!-- Old string (removed) -->
-        <div class="diff-block removed">
-          <div class="diff-label">
-            <span class="diff-sign">-</span>
-            <span>old</span>
-          </div>
-          <pre class="diff-code" v-html="highlightedOld"></pre>
-        </div>
-
-        <!-- New string (added) -->
-        <div class="diff-block added">
-          <div class="diff-label">
-            <span class="diff-sign">+</span>
-            <span>new</span>
-          </div>
-          <pre class="diff-code" v-html="highlightedNew"></pre>
-        </div>
       </div>
     </div>
 
     <!-- Result -->
-    <ToolResultBlock v-if="call.result" :result="call.result" />
+    <ToolResultBlock v-if="resultExpanded && call.result" :result="call.result" />
   </div>
 </template>
 
 <style scoped>
 .edit-card {
-  border: 1px solid rgba(99, 102, 241, 0.25);
+  border: none;
-  border-left: 3px solid #6366f1;
+  border-left: 2px solid rgba(99, 102, 241, 0.25);
-  border-radius: 8px;
+  border-radius: 6px;
   overflow: hidden;
-  margin: 0.5rem 0;
+  margin: 0.35rem 0;
-  background: var(--bg-primary);
+  background: rgba(99, 102, 241, 0.02);
 }
 
-.edit-card.error {
+.edit-card.error { border-left-color: rgba(239, 68, 68, 0.4); }
-  border-color: rgba(239, 68, 68, 0.25);
-  border-left-color: #ef4444;
-}
 
 .card-header {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.35rem;
-  padding: 0.45rem 0.75rem;
+  padding: 0.3rem 0.6rem;
-  background: rgba(99, 102, 241, 0.06);
+  background: transparent;
-  border-bottom: 1px solid rgba(99, 102, 241, 0.12);
+  min-height: 28px;
 }
 
-.edit-card.error .card-header {
+.card-icon { display: flex; align-items: center; color: rgba(99, 102, 241, 0.6); flex-shrink: 0; }
-  background: rgba(239, 68, 68, 0.06);
+.edit-card.error .card-icon { color: rgba(239, 68, 68, 0.6); }
-  border-bottom-color: rgba(239, 68, 68, 0.12);
-}
-
-.card-icon {
-  display: flex;
-  align-items: center;
-  color: #6366f1;
-}
-
-.edit-card.error .card-icon { color: #ef4444; }
 
 .card-label {
-  font-size: 11px;
+  font-size: 10px;
-  font-weight: 600;
+  font-weight: 700;
-  color: #6366f1;
+  color: rgba(99, 102, 241, 0.7);
   text-transform: uppercase;
   letter-spacing: 0.5px;
+  flex-shrink: 0;
 }
+.edit-card.error .card-label { color: rgba(239, 68, 68, 0.7); }
 
-.edit-card.error .card-label { color: #ef4444; }
+.file-name {
-
+  font-size: 11px;
-.ext-badge {
-  font-size: 10px;
-  padding: 0.1rem 0.35rem;
-  border-radius: 4px;
-  background: rgba(99, 102, 241, 0.12);
-  color: #818cf8;
   font-family: 'SF Mono', 'Fira Code', monospace;
-  font-weight: 500;
+  color: var(--text-primary);
-}
+  font-weight: 600;
-
-.replace-all-badge {
-  font-size: 10px;
-  padding: 0.1rem 0.35rem;
-  border-radius: 4px;
-  background: rgba(251, 191, 36, 0.12);
-  color: #fbbf24;
-  font-weight: 500;
-}
-
-.error-badge {
-  font-size: 10px;
-  padding: 0.1rem 0.4rem;
-  border-radius: 4px;
-  background: rgba(239, 68, 68, 0.15);
-  color: #ef4444;
-  font-weight: 500;
-}
-
-.card-body {
-  padding: 0.5rem 0.75rem;
-}
-
-.file-path {
-  font-size: 12px;
-  font-family: 'SF Mono', 'Fira Code', monospace;
-  line-height: 1.4;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  min-width: 0;
 }
 
-.path-dir { color: var(--text-muted); }
+.ext-badge, .replace-all-badge, .diff-removed, .diff-added, .error-badge {
-.path-file { color: var(--text-primary); font-weight: 600; }
+  font-size: 9px;
-
+  padding: 0.05rem 0.3rem;
-/* Diff section */
+  border-radius: 3px;
-.diff-section {
+  font-weight: 600;
-  border-top: 1px solid var(--border-color);
+  flex-shrink: 0;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  background: transparent;
 }
 
-.diff-toggle {
+.ext-badge { color: rgba(99, 102, 241, 0.5); }
+.replace-all-badge { color: rgba(251, 191, 36, 0.7); }
+.diff-removed { color: rgba(239, 68, 68, 0.7); }
+.diff-added { color: rgba(34, 197, 94, 0.7); }
+.error-badge { color: rgba(239, 68, 68, 0.7); }
+
+.header-spacer { flex: 1; }
+
+.toggle-btn {
   display: flex;
   align-items: center;
-  gap: 0.4rem;
+  justify-content: center;
-  width: 100%;
+  width: 20px;
-  padding: 0.35rem 0.75rem;
+  height: 20px;
-  background: transparent;
   border: none;
-  cursor: pointer;
+  border-radius: 4px;
-  color: var(--text-secondary);
+  background: transparent;
-  font-size: 11px;
-  text-align: left;
-}
-
-.diff-toggle:hover { background: var(--bg-hover); }
-
-.diff-meta {
-  margin-left: auto;
   color: var(--text-muted);
-  font-family: 'SF Mono', 'Fira Code', monospace;
+  cursor: pointer;
-  font-size: 10px;
-}
-
-.chevron {
-  transition: transform 0.2s;
   flex-shrink: 0;
+  opacity: 0.5;
+  transition: all 0.15s;
 }
+.toggle-btn:hover { opacity: 0.8; }
+.toggle-btn.active { opacity: 1; color: rgba(99, 102, 241, 0.8); }
 
-.chevron.rotated { transform: rotate(90deg); }
+/* Diff */
+.diff-content { border-top: 1px solid rgba(255, 255, 255, 0.04); }
 
-.diff-content {
+.diff-block { border-bottom: 1px solid rgba(255, 255, 255, 0.03); }
-  border-top: 1px solid var(--border-color);
+.diff-block:last-child { border-bottom: none; }
-}
-
-.diff-block {
-  border-bottom: 1px solid var(--border-color);
-}
-
-.diff-block:last-child {
-  border-bottom: none;
-}
 
 .diff-label {
   display: flex;
   align-items: center;
-  gap: 0.3rem;
+  gap: 0.25rem;
-  padding: 0.2rem 0.75rem;
+  padding: 0.15rem 0.6rem;
-  font-size: 10px;
+  font-size: 9px;
-  font-weight: 600;
+  font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.3px;
 }
 
-.diff-block.removed .diff-label {
+.diff-block.removed .diff-label { background: transparent; color: rgba(239, 68, 68, 0.6); }
-  background: rgba(239, 68, 68, 0.06);
+.diff-block.added .diff-label { background: transparent; color: rgba(34, 197, 94, 0.6); }
-  color: #ef4444;
-}
 
-.diff-block.added .diff-label {
+.diff-sign { font-size: 12px; font-weight: 700; font-family: 'SF Mono', 'Fira Code', monospace; }
-  background: rgba(34, 197, 94, 0.06);
-  color: #22c55e;
-}
-
-.diff-sign {
-  font-size: 14px;
-  font-weight: 700;
-  font-family: 'SF Mono', 'Fira Code', monospace;
-}
 
 .diff-code {
   margin: 0;
-  padding: 0.5rem 0.75rem;
+  padding: 0.35rem 0.6rem;
   font-size: 11px;
-  line-height: 1.5;
+  line-height: 1.45;
   color: var(--text-secondary);
   white-space: pre-wrap;
   word-break: break-all;
-  max-height: 200px;
+  max-height: 180px;
   overflow-y: auto;
   font-family: 'SF Mono', 'Fira Code', monospace;
-}
+  background: transparent;
-
-.diff-block.removed .diff-code {
-  background: rgba(239, 68, 68, 0.03);
-}
-
-.diff-block.added .diff-code {
-  background: rgba(34, 197, 94, 0.03);
 }
 </style>

frontend/src/components/transcript-debug/toolCards/ExitPlanModeCard.vue

@@ -47,7 +47,7 @@ const isError = computed(() => props.call.result?.isError ?? false)
     </div>
 
     <div v-if="planText" class="card-body">
-      <button class="plan-toggle" @click="expanded = !expanded">
+      <button class="plan-toggle" @click.stop="expanded = !expanded">
         <svg
           :class="['chevron', { rotated: expanded }]"
           width="10" height="10" viewBox="0 0 24 24"

frontend/src/components/transcript-debug/toolCards/GlobCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { ref, computed } from 'vue'
 import type { ParsedToolCall } from '@/types/transcript-debug'
 import ToolResultBlock from '../ToolResultBlock.vue'
 
@@ -12,159 +12,146 @@ const path = computed(() => (props.call.input?.path as string) || '')
 
 const isError = computed(() => props.call.result?.isError ?? false)
 
-// Count files from result
 const fileCount = computed(() => {
   if (!props.call.result?.content) return null
   const content = props.call.result.content.trim()
   if (!content) return 0
   return content.split('\n').filter(l => l.trim()).length
 })
+
+const resultExpanded = ref(false)
+
+const shortPath = computed(() => {
+  if (!path.value) return ''
+  return path.value.replace(/\\/g, '/').split('/').slice(-3).join('/')
+})
 </script>
 
 <template>
   <div :class="['glob-card', { error: isError }]">
     <div class="card-header">
       <span class="card-icon">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
         </svg>
       </span>
       <span class="card-label">Glob</span>
-      <span v-if="fileCount != null && !isError" class="match-count">{{ fileCount }} files</span>
+      <code class="pattern-inline">{{ pattern }}</code>
-      <span v-if="isError" class="error-badge">error</span>
+      <span v-if="path" class="scope-badge" :title="path">{{ shortPath }}</span>
+      <span v-if="fileCount != null && !isError" class="match-count">{{ fileCount }}</span>
+      <span v-if="isError" class="error-badge">err</span>
+
+      <span class="header-spacer"></span>
+
+      <button v-if="call.result" class="toggle-btn" :class="{ active: resultExpanded }" @click.stop="resultExpanded = !resultExpanded" title="Toggle result">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="4 17 10 11 4 5"/>
+          <line x1="12" y1="19" x2="20" y2="19"/>
+        </svg>
+      </button>
     </div>
 
-    <div class="card-body">
+    <ToolResultBlock v-if="resultExpanded && call.result" :result="call.result" />
-      <!-- Pattern -->
-      <div class="pattern-row">
-        <code class="pattern-text">{{ pattern }}</code>
-      </div>
-
-      <!-- Path scope -->
-      <div v-if="path" class="scope-row">
-        <span class="scope-badge">
-          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
-          </svg>
-          {{ path.replace(/\\/g, '/').split('/').slice(-3).join('/') }}
-        </span>
-      </div>
-    </div>
-
-    <!-- Result -->
-    <ToolResultBlock v-if="call.result" :result="call.result" />
   </div>
 </template>
 
 <style scoped>
 .glob-card {
-  border: 1px solid rgba(251, 191, 36, 0.25);
+  border: none;
-  border-left: 3px solid #fbbf24;
+  border-left: 2px solid rgba(251, 191, 36, 0.25);
-  border-radius: 8px;
+  border-radius: 6px;
   overflow: hidden;
-  margin: 0.5rem 0;
+  margin: 0.35rem 0;
-  background: var(--bg-primary);
+  background: rgba(251, 191, 36, 0.02);
 }
 
-.glob-card.error {
+.glob-card.error { border-left-color: rgba(239, 68, 68, 0.4); }
-  border-color: rgba(239, 68, 68, 0.25);
-  border-left-color: #ef4444;
-}
 
 .card-header {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.35rem;
-  padding: 0.45rem 0.75rem;
+  padding: 0.3rem 0.6rem;
-  background: rgba(251, 191, 36, 0.06);
+  background: transparent;
-  border-bottom: 1px solid rgba(251, 191, 36, 0.12);
+  min-height: 28px;
 }
 
-.glob-card.error .card-header {
+.card-icon { display: flex; align-items: center; color: rgba(251, 191, 36, 0.6); flex-shrink: 0; }
-  background: rgba(239, 68, 68, 0.06);
+.glob-card.error .card-icon { color: rgba(239, 68, 68, 0.6); }
-  border-bottom-color: rgba(239, 68, 68, 0.12);
-}
-
-.card-icon {
-  display: flex;
-  align-items: center;
-  color: #fbbf24;
-}
-
-.glob-card.error .card-icon { color: #ef4444; }
 
 .card-label {
-  font-size: 11px;
+  font-size: 10px;
-  font-weight: 600;
+  font-weight: 700;
-  color: #fbbf24;
+  color: rgba(251, 191, 36, 0.7);
   text-transform: uppercase;
   letter-spacing: 0.5px;
+  flex-shrink: 0;
 }
+.glob-card.error .card-label { color: rgba(239, 68, 68, 0.7); }
 
-.glob-card.error .card-label { color: #ef4444; }
+.pattern-inline {
-
+  font-size: 11px;
-.match-count {
-  margin-left: auto;
-  font-size: 10px;
-  padding: 0.1rem 0.35rem;
-  border-radius: 4px;
-  background: rgba(34, 197, 94, 0.1);
-  color: #22c55e;
   font-family: 'SF Mono', 'Fira Code', monospace;
-  font-weight: 500;
+  color: rgba(251, 191, 36, 0.7);
-}
-
-.error-badge {
-  font-size: 10px;
-  padding: 0.1rem 0.4rem;
-  border-radius: 4px;
-  background: rgba(239, 68, 68, 0.15);
-  color: #ef4444;
-  font-weight: 500;
-}
-
-.card-body {
-  padding: 0.5rem 0.75rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-}
-
-.pattern-row {
-  display: flex;
-  align-items: center;
-}
-
-.pattern-text {
-  font-size: 12px;
-  font-family: 'SF Mono', 'Fira Code', monospace;
-  color: #fbbf24;
-  background: rgba(251, 191, 36, 0.06);
-  padding: 0.2rem 0.5rem;
-  border-radius: 4px;
-  border: 1px solid rgba(251, 191, 36, 0.12);
-  word-break: break-all;
-}
-
-.scope-row {
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-}
-
-.scope-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.2rem;
-  font-size: 10px;
-  padding: 0.1rem 0.35rem;
-  border-radius: 4px;
-  font-family: 'SF Mono', 'Fira Code', monospace;
-  background: rgba(6, 182, 212, 0.08);
-  color: #06b6d4;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 280px;
+  min-width: 0;
 }
+
+.scope-badge {
+  font-size: 9px;
+  padding: 0.05rem 0.3rem;
+  border-radius: 3px;
+  font-weight: 600;
+  flex-shrink: 0;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  background: transparent;
+  color: rgba(6, 182, 212, 0.6);
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.match-count {
+  font-size: 9px;
+  padding: 0.05rem 0.3rem;
+  border-radius: 3px;
+  font-weight: 700;
+  flex-shrink: 0;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  background: transparent;
+  color: rgba(34, 197, 94, 0.7);
+}
+
+.error-badge {
+  font-size: 9px;
+  padding: 0.05rem 0.3rem;
+  border-radius: 3px;
+  font-weight: 600;
+  flex-shrink: 0;
+  background: transparent;
+  color: rgba(239, 68, 68, 0.7);
+}
+
+.header-spacer { flex: 1; }
+
+.toggle-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  flex-shrink: 0;
+  opacity: 0.5;
+  transition: all 0.15s;
+}
+.toggle-btn:hover { opacity: 0.8; }
+.toggle-btn.active { opacity: 1; color: rgba(251, 191, 36, 0.8); }
 </style>

frontend/src/components/transcript-debug/toolCards/GrepCard.vue

@@ -28,7 +28,6 @@ const context = computed(() => {
 
 const isError = computed(() => props.call.result?.isError ?? false)
 
-// Count matches from result
 const matchCount = computed(() => {
   if (!props.call.result?.content) return null
   const content = props.call.result.content.trim()
@@ -36,193 +35,185 @@ const matchCount = computed(() => {
   return content.split('\n').filter(l => l.trim()).length
 })
 
+const flags = computed(() => {
+  let f = ''
+  if (caseInsensitive.value) f += 'i'
+  if (multiline.value) f += 'm'
+  return f
+})
+
 const detailsExpanded = ref(false)
+const resultExpanded = ref(false)
+
+const shortPath = computed(() => {
+  if (!path.value) return ''
+  return path.value.replace(/\\/g, '/').split('/').slice(-2).join('/')
+})
 </script>
 
 <template>
   <div :class="['grep-card', { error: isError }]">
     <div class="card-header">
       <span class="card-icon">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <circle cx="11" cy="11" r="8"/>
           <line x1="21" y1="21" x2="16.65" y2="16.65"/>
         </svg>
       </span>
       <span class="card-label">Grep</span>
-      <span class="mode-badge">{{ outputMode }}</span>
+      <code class="pattern-inline">/{{ pattern }}/{{ flags }}</code>
-      <span v-if="matchCount != null && !isError" class="match-count">{{ matchCount }} matches</span>
+      <span v-if="glob" class="scope-badge">{{ glob }}</span>
-      <span v-if="isError" class="error-badge">error</span>
+      <span v-if="type" class="scope-badge type">{{ type }}</span>
+      <span v-if="matchCount != null && !isError" class="match-count">{{ matchCount }}</span>
+      <span v-if="isError" class="error-badge">err</span>
+
+      <span class="header-spacer"></span>
+
+      <button v-if="path || context || headLimit || outputMode !== 'files_with_matches'" class="toggle-btn" :class="{ active: detailsExpanded }" @click.stop="detailsExpanded = !detailsExpanded" title="Toggle details">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>
+        </svg>
+      </button>
+      <button v-if="call.result" class="toggle-btn" :class="{ active: resultExpanded }" @click.stop="resultExpanded = !resultExpanded" title="Toggle result">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="4 17 10 11 4 5"/>
+          <line x1="12" y1="19" x2="20" y2="19"/>
+        </svg>
+      </button>
     </div>
 
-    <div class="card-body">
+    <!-- Details row -->
-      <!-- Pattern -->
+    <div v-if="detailsExpanded" class="details-row">
-      <div class="pattern-row">
+      <span v-if="path" class="detail-badge path" :title="path">{{ shortPath }}</span>
-        <code class="pattern-text">/{{ pattern }}/{{ caseInsensitive ? 'i' : '' }}{{ multiline ? 'm' : '' }}</code>
+      <span v-if="outputMode !== 'files_with_matches'" class="detail-badge">{{ outputMode }}</span>
-      </div>
+      <span v-if="context" class="detail-badge">{{ context }}</span>
-
+      <span v-if="headLimit" class="detail-badge">head {{ headLimit }}</span>
-      <!-- Search scope -->
-      <div class="scope-row">
-        <span v-if="path" class="scope-badge path" :title="path">
-          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
-          </svg>
-          {{ path.replace(/\\/g, '/').split('/').slice(-2).join('/') }}
-        </span>
-        <span v-if="glob" class="scope-badge glob">{{ glob }}</span>
-        <span v-if="type" class="scope-badge type">{{ type }}</span>
-        <span v-if="context" class="scope-badge ctx">{{ context }}</span>
-        <span v-if="headLimit" class="scope-badge limit">head {{ headLimit }}</span>
-      </div>
     </div>
 
-    <!-- Result -->
+    <ToolResultBlock v-if="resultExpanded && call.result" :result="call.result" />
-    <ToolResultBlock v-if="call.result" :result="call.result" />
   </div>
 </template>
 
 <style scoped>
 .grep-card {
-  border: 1px solid rgba(236, 72, 153, 0.25);
+  border: none;
-  border-left: 3px solid #ec4899;
+  border-left: 2px solid rgba(236, 72, 153, 0.25);
-  border-radius: 8px;
+  border-radius: 6px;
   overflow: hidden;
-  margin: 0.5rem 0;
+  margin: 0.35rem 0;
-  background: var(--bg-primary);
+  background: rgba(236, 72, 153, 0.02);
 }
 
-.grep-card.error {
+.grep-card.error { border-left-color: rgba(239, 68, 68, 0.4); }
-  border-color: rgba(239, 68, 68, 0.25);
-  border-left-color: #ef4444;
-}
 
 .card-header {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.35rem;
-  padding: 0.45rem 0.75rem;
+  padding: 0.3rem 0.6rem;
-  background: rgba(236, 72, 153, 0.06);
+  background: transparent;
-  border-bottom: 1px solid rgba(236, 72, 153, 0.12);
+  min-height: 28px;
 }
 
-.grep-card.error .card-header {
+.card-icon { display: flex; align-items: center; color: rgba(236, 72, 153, 0.6); flex-shrink: 0; }
-  background: rgba(239, 68, 68, 0.06);
+.grep-card.error .card-icon { color: rgba(239, 68, 68, 0.6); }
-  border-bottom-color: rgba(239, 68, 68, 0.12);
-}
-
-.card-icon {
-  display: flex;
-  align-items: center;
-  color: #ec4899;
-}
-
-.grep-card.error .card-icon { color: #ef4444; }
 
 .card-label {
-  font-size: 11px;
+  font-size: 10px;
-  font-weight: 600;
+  font-weight: 700;
-  color: #ec4899;
+  color: rgba(236, 72, 153, 0.7);
   text-transform: uppercase;
   letter-spacing: 0.5px;
+  flex-shrink: 0;
 }
+.grep-card.error .card-label { color: rgba(239, 68, 68, 0.7); }
 
-.grep-card.error .card-label { color: #ef4444; }
+.pattern-inline {
-
+  font-size: 11px;
-.mode-badge {
-  font-size: 10px;
-  padding: 0.1rem 0.35rem;
-  border-radius: 4px;
-  background: rgba(236, 72, 153, 0.1);
-  color: #ec4899;
   font-family: 'SF Mono', 'Fira Code', monospace;
-  font-weight: 500;
+  color: rgba(244, 114, 182, 0.7);
-}
+  overflow: hidden;
-
+  text-overflow: ellipsis;
-.match-count {
+  white-space: nowrap;
-  margin-left: auto;
+  min-width: 0;
-  font-size: 10px;
-  padding: 0.1rem 0.35rem;
-  border-radius: 4px;
-  background: rgba(34, 197, 94, 0.1);
-  color: #22c55e;
-  font-family: 'SF Mono', 'Fira Code', monospace;
-  font-weight: 500;
-}
-
-.error-badge {
-  font-size: 10px;
-  padding: 0.1rem 0.4rem;
-  border-radius: 4px;
-  background: rgba(239, 68, 68, 0.15);
-  color: #ef4444;
-  font-weight: 500;
-}
-
-.card-body {
-  padding: 0.5rem 0.75rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-}
-
-.pattern-row {
-  display: flex;
-  align-items: center;
-}
-
-.pattern-text {
-  font-size: 12px;
-  font-family: 'SF Mono', 'Fira Code', monospace;
-  color: #f472b6;
-  background: rgba(236, 72, 153, 0.06);
-  padding: 0.2rem 0.5rem;
-  border-radius: 4px;
-  border: 1px solid rgba(236, 72, 153, 0.12);
-  word-break: break-all;
-}
-
-.scope-row {
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  flex-wrap: wrap;
 }
 
 .scope-badge {
-  display: inline-flex;
+  font-size: 9px;
-  align-items: center;
+  padding: 0.05rem 0.3rem;
-  gap: 0.2rem;
+  border-radius: 3px;
-  font-size: 10px;
+  font-weight: 600;
-  padding: 0.1rem 0.35rem;
+  flex-shrink: 0;
-  border-radius: 4px;
   font-family: 'SF Mono', 'Fira Code', monospace;
-  white-space: nowrap;
+  background: transparent;
+  color: rgba(251, 191, 36, 0.6);
+  max-width: 120px;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 220px;
+  white-space: nowrap;
 }
 
-.scope-badge.path {
+.scope-badge.type { color: rgba(129, 140, 248, 0.7); }
-  background: rgba(6, 182, 212, 0.08);
+
-  color: #06b6d4;
+.match-count {
+  font-size: 9px;
+  padding: 0.05rem 0.3rem;
+  border-radius: 3px;
+  font-weight: 700;
+  flex-shrink: 0;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  background: transparent;
+  color: rgba(34, 197, 94, 0.7);
 }
 
-.scope-badge.glob {
+.error-badge {
-  background: rgba(251, 191, 36, 0.08);
+  font-size: 9px;
-  color: #fbbf24;
+  padding: 0.05rem 0.3rem;
+  border-radius: 3px;
+  font-weight: 600;
+  flex-shrink: 0;
+  background: transparent;
+  color: rgba(239, 68, 68, 0.7);
 }
 
-.scope-badge.type {
+.header-spacer { flex: 1; }
-  background: rgba(99, 102, 241, 0.08);
+
-  color: #818cf8;
+.toggle-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  flex-shrink: 0;
+  opacity: 0.5;
+  transition: all 0.15s;
+}
+.toggle-btn:hover { opacity: 0.8; }
+.toggle-btn.active { opacity: 1; color: rgba(236, 72, 153, 0.8); }
+
+/* Details */
+.details-row {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.2rem 0.6rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.04);
+  flex-wrap: wrap;
 }
 
-.scope-badge.ctx {
+.detail-badge {
-  background: var(--bg-secondary);
+  font-size: 9px;
+  padding: 0.05rem 0.3rem;
+  border-radius: 3px;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  background: transparent;
   color: var(--text-muted);
 }
 
-.scope-badge.limit {
+.detail-badge.path { color: rgba(6, 182, 212, 0.6); }
-  background: var(--bg-secondary);
-  color: var(--text-muted);
-}
 </style>

frontend/src/components/transcript-debug/toolCards/ReadCard.vue

@@ -20,7 +20,6 @@ const pages = computed(() => props.call.input?.pages as string | undefined)
 
 const isError = computed(() => props.call.result?.isError ?? false)
 
-// Detect file extension for icon hint
 const ext = computed(() => {
   const name = fileName.value
   const dot = name.lastIndexOf('.')
@@ -34,136 +33,109 @@ const resultExpanded = ref(false)
   <div :class="['read-card', { error: isError }]">
     <div class="card-header">
       <span class="card-icon">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <svg width="12" height="12" 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"/>
         </svg>
       </span>
       <span class="card-label">Read</span>
+      <span class="file-name" :title="filePath">{{ fileName }}</span>
       <span v-if="ext" class="ext-badge">.{{ ext }}</span>
-      <span v-if="isError" class="error-badge">error</span>
+      <span v-if="offset != null" class="info-badge">@{{ offset }}</span>
+      <span v-if="limit != null" class="info-badge">{{ limit }}L</span>
+      <span v-if="pages" class="info-badge">p{{ pages }}</span>
+      <span v-if="isError" class="error-badge">err</span>
+
+      <span class="header-spacer"></span>
+
+      <button v-if="call.result" class="toggle-btn" :class="{ active: resultExpanded }" @click.stop="resultExpanded = !resultExpanded" title="Toggle result">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="4 17 10 11 4 5"/>
+          <line x1="12" y1="19" x2="20" y2="19"/>
+        </svg>
+      </button>
     </div>
 
-    <div class="card-body">
+    <ToolResultBlock v-if="resultExpanded && call.result" :result="call.result" />
-      <div class="file-path" :title="filePath">
-        <span class="path-dir">{{ filePath.replace(/\\/g, '/').split('/').slice(0, -1).join('/') }}/</span>
-        <span class="path-file">{{ fileName }}</span>
-      </div>
-      <div v-if="offset != null || limit != null || pages" class="range-info">
-        <span v-if="offset != null" class="range-badge">offset: {{ offset }}</span>
-        <span v-if="limit != null" class="range-badge">limit: {{ limit }}</span>
-        <span v-if="pages" class="range-badge">pages: {{ pages }}</span>
-      </div>
-    </div>
-
-    <!-- Result -->
-    <ToolResultBlock v-if="call.result" :result="call.result" />
   </div>
 </template>
 
 <style scoped>
 .read-card {
-  border: 1px solid rgba(6, 182, 212, 0.25);
+  border: none;
-  border-left: 3px solid #06b6d4;
+  border-left: 2px solid rgba(6, 182, 212, 0.25);
-  border-radius: 8px;
+  border-radius: 6px;
   overflow: hidden;
-  margin: 0.5rem 0;
+  margin: 0.35rem 0;
-  background: var(--bg-primary);
+  background: rgba(6, 182, 212, 0.02);
 }
 
-.read-card.error {
+.read-card.error { border-left-color: rgba(239, 68, 68, 0.4); }
-  border-color: rgba(239, 68, 68, 0.25);
-  border-left-color: #ef4444;
-}
 
 .card-header {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.35rem;
-  padding: 0.45rem 0.75rem;
+  padding: 0.3rem 0.6rem;
-  background: rgba(6, 182, 212, 0.06);
+  background: transparent;
-  border-bottom: 1px solid rgba(6, 182, 212, 0.12);
+  min-height: 28px;
 }
 
-.read-card.error .card-header {
+.card-icon { display: flex; align-items: center; color: rgba(6, 182, 212, 0.6); flex-shrink: 0; }
-  background: rgba(239, 68, 68, 0.06);
+.read-card.error .card-icon { color: rgba(239, 68, 68, 0.6); }
-  border-bottom-color: rgba(239, 68, 68, 0.12);
-}
-
-.card-icon {
-  display: flex;
-  align-items: center;
-  color: #06b6d4;
-}
-
-.read-card.error .card-icon { color: #ef4444; }
 
 .card-label {
-  font-size: 11px;
+  font-size: 10px;
-  font-weight: 600;
+  font-weight: 700;
-  color: #06b6d4;
+  color: rgba(6, 182, 212, 0.7);
   text-transform: uppercase;
   letter-spacing: 0.5px;
+  flex-shrink: 0;
 }
+.read-card.error .card-label { color: rgba(239, 68, 68, 0.7); }
 
-.read-card.error .card-label { color: #ef4444; }
+.file-name {
-
+  font-size: 11px;
-.ext-badge {
-  font-size: 10px;
-  padding: 0.1rem 0.35rem;
-  border-radius: 4px;
-  background: rgba(6, 182, 212, 0.12);
-  color: #06b6d4;
   font-family: 'SF Mono', 'Fira Code', monospace;
-  font-weight: 500;
+  color: var(--text-primary);
-}
+  font-weight: 600;
-
-.error-badge {
-  font-size: 10px;
-  padding: 0.1rem 0.4rem;
-  border-radius: 4px;
-  background: rgba(239, 68, 68, 0.15);
-  color: #ef4444;
-  font-weight: 500;
-}
-
-.card-body {
-  padding: 0.5rem 0.75rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.3rem;
-}
-
-.file-path {
-  font-size: 12px;
-  font-family: 'SF Mono', 'Fira Code', monospace;
-  line-height: 1.4;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  min-width: 0;
 }
 
-.path-dir {
+.ext-badge, .info-badge, .error-badge {
-  color: var(--text-muted);
+  font-size: 9px;
-}
+  padding: 0.05rem 0.3rem;
-
+  border-radius: 3px;
-.path-file {
-  color: var(--text-primary);
   font-weight: 600;
-}
+  flex-shrink: 0;
-
-.range-info {
-  display: flex;
-  gap: 0.4rem;
-  flex-wrap: wrap;
-}
-
-.range-badge {
-  font-size: 10px;
-  padding: 0.1rem 0.35rem;
-  border-radius: 4px;
-  background: var(--bg-secondary);
-  color: var(--text-muted);
   font-family: 'SF Mono', 'Fira Code', monospace;
+  background: transparent;
 }
+
+.ext-badge { color: rgba(6, 182, 212, 0.5); }
+.info-badge { color: rgba(6, 182, 212, 0.6); }
+.error-badge { color: rgba(239, 68, 68, 0.7); }
+
+.header-spacer { flex: 1; }
+
+.toggle-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  flex-shrink: 0;
+  opacity: 0.5;
+  transition: all 0.15s;
+}
+.toggle-btn:hover { opacity: 0.8; }
+.toggle-btn.active { opacity: 1; color: rgba(6, 182, 212, 0.8); }
 </style>

frontend/src/components/transcript-debug/toolCards/TaskCard.vue

@@ -8,11 +8,9 @@ const props = defineProps<{
 }>()
 
 const isError = computed(() => props.call.result?.isError ?? false)
-
-// Detect which Task-family tool this is
 const toolName = computed(() => props.call.name)
 
-// Common fields across Task tools
+// Common fields
 const taskId = computed(() => (props.call.input?.taskId as string) || '')
 const subject = computed(() => (props.call.input?.subject as string) || '')
 const description = computed(() => (props.call.input?.description as string) || '')
@@ -20,338 +18,341 @@ const activeForm = computed(() => (props.call.input?.activeForm as string) || ''
 const status = computed(() => (props.call.input?.status as string) || '')
 const prompt = computed(() => (props.call.input?.prompt as string) || '')
 const subagentType = computed(() => (props.call.input?.subagent_type as string) || '')
-
-// For Task (subagent launcher)
-const taskDescription = computed(() => (props.call.input?.description as string) || '')
 const model = computed(() => (props.call.input?.model as string) || '')
 const runInBackground = computed(() => props.call.input?.run_in_background as boolean | undefined)
 
-// Status styling
+// Toggles
-const statusColor = computed(() => {
+const showPrompt = ref(false)
-  switch (status.value) {
+const showResult = ref(false)
+const showDesc = ref(false)
+
+// ---- Extract main topics from result ----
+interface TopicItem {
+  label: string
+  status?: string // for TaskList JSON items
+  id?: string
+}
+
+const mainTopics = computed<TopicItem[]>(() => {
+  if (!props.call.result?.content) return []
+  const content = props.call.result.content.trim()
+
+  // 1) Try JSON (TaskList array / TaskGet single object)
+  try {
+    const data = JSON.parse(content)
+    if (Array.isArray(data)) {
+      return data.map((t: any) => ({
+        label: t.subject || t.description || JSON.stringify(t).slice(0, 60),
+        status: t.status,
+        id: t.id,
+      }))
+    }
+    if (data && typeof data === 'object' && (data.subject || data.id)) {
+      return [{
+        label: data.subject || data.description || '',
+        status: data.status,
+        id: data.id,
+      }]
+    }
+  } catch { /* not JSON, parse as text */ }
+
+  // 2) Text result: extract headings, numbered/bullet lists, bold items
+  const lines = content.split('\n')
+  const topics: TopicItem[] = []
+  const seen = new Set<string>()
+
+  for (const raw of lines) {
+    const line = raw.trim()
+    if (!line) continue
+
+    let label = ''
+    // Markdown headings: ## Foo or ### Foo
+    if (/^#{1,4}\s+/.test(line)) {
+      label = line.replace(/^#+\s+/, '').replace(/\*\*/g, '').trim()
+    }
+    // Numbered list: 1. Foo, 2. Foo
+    else if (/^\d+[\.\)]\s+/.test(line)) {
+      label = line.replace(/^\d+[\.\)]\s+/, '').replace(/\*\*/g, '').trim()
+    }
+    // Bullet list: - Foo, * Foo
+    else if (/^[-*]\s+/.test(line)) {
+      label = line.replace(/^[-*]\s+/, '').replace(/\*\*/g, '').trim()
+    }
+
+    if (label && label.length > 2 && !seen.has(label)) {
+      seen.add(label)
+      topics.push({ label: label.length > 90 ? label.slice(0, 90) + '...' : label })
+    }
+    if (topics.length >= 12) break
+  }
+  return topics
+})
+
+const hasTopics = computed(() => mainTopics.value.length > 0)
+
+// Status helpers
+const statusColorFor = (s: string) => {
+  switch (s) {
     case 'completed': return '#22c55e'
     case 'in_progress': return '#f59e0b'
     case 'pending': return '#64748b'
     case 'deleted': return '#ef4444'
-    default: return '#64748b'
+    default: return 'var(--card-color)'
   }
-})
+}
 
+const statusColor = computed(() => statusColorFor(status.value))
 const statusIcon = computed(() => {
   switch (status.value) {
-    case 'completed': return '✓'
+    case 'completed': return '\u2713'
-    case 'in_progress': return '→'
+    case 'in_progress': return '\u25CF'
-    case 'pending': return '○'
+    case 'pending': return '\u25CB'
-    case 'deleted': return '✗'
+    case 'deleted': return '\u2717'
-    default: return '•'
+    default: return '\u2022'
   }
 })
 
-// Card color based on tool
+// Card color
 const cardColor = computed(() => {
   switch (toolName.value) {
-    case 'Task': return '#0ea5e9'        // blue - agent launch
+    case 'Task': return '#0ea5e9'
-    case 'TaskCreate': return '#22c55e'   // green - create
+    case 'TaskCreate': return '#22c55e'
-    case 'TaskUpdate': return '#a855f7'   // purple - update
+    case 'TaskUpdate': return '#a855f7'
-    case 'TaskGet': return '#06b6d4'      // cyan - read
+    case 'TaskGet': return '#06b6d4'
-    case 'TaskList': return '#64748b'     // gray - list
+    case 'TaskList': return '#64748b'
     default: return '#64748b'
   }
 })
 
-const cardIcon = computed(() => toolName.value)
+const hasDesc = computed(() => description.value.length > 0)
+const hasPrompt = computed(() => prompt.value.length > 0)
+const hasResult = computed(() => !!props.call.result)
 
-const descExpanded = ref(false)
+// Brief for body (only when no topics to show)
-const promptExpanded = ref(false)
+const descBrief = computed(() => {
+  if (!description.value) return ''
+  const first = description.value.split('\n')[0]
+  return first.length > 80 ? first.slice(0, 80) + '...' : first
+})
+
+const hasBody = computed(() =>
+  subject.value || activeForm.value || (!hasTopics.value && descBrief.value)
+)
 </script>
 
 <template>
   <div :class="['task-card', { error: isError }]" :style="{ '--card-color': cardColor }">
+    <!-- HEADER -->
     <div class="card-header">
       <span class="card-icon">
-        <!-- Task (subagent) -->
+        <svg v-if="toolName === 'Task'" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <svg v-if="toolName === 'Task'" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
-          <circle cx="12" cy="12" r="3"/>
-          <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
         </svg>
-        <!-- TaskCreate -->
+        <svg v-else-if="toolName === 'TaskCreate'" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <svg v-else-if="toolName === 'TaskCreate'" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/>
-          <circle cx="12" cy="12" r="10"/>
-          <line x1="12" y1="8" x2="12" y2="16"/>
-          <line x1="8" y1="12" x2="16" y2="12"/>
         </svg>
-        <!-- TaskUpdate -->
+        <svg v-else-if="toolName === 'TaskUpdate'" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <svg v-else-if="toolName === 'TaskUpdate'" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
-          <path d="M9 11l3 3L22 4"/>
-          <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
         </svg>
-        <!-- TaskGet -->
+        <svg v-else-if="toolName === 'TaskGet'" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <svg v-else-if="toolName === 'TaskGet'" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
-          <circle cx="11" cy="11" r="8"/>
-          <line x1="21" y1="21" x2="16.65" y2="16.65"/>
         </svg>
-        <!-- TaskList -->
+        <svg v-else width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <svg v-else width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/>
-          <line x1="8" y1="6" x2="21" y2="6"/>
+          <line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>
-          <line x1="8" y1="12" x2="21" y2="12"/>
-          <line x1="8" y1="18" x2="21" y2="18"/>
-          <line x1="3" y1="6" x2="3.01" y2="6"/>
-          <line x1="3" y1="12" x2="3.01" y2="12"/>
-          <line x1="3" y1="18" x2="3.01" y2="18"/>
         </svg>
       </span>
       <span class="card-label">{{ toolName }}</span>
       <span v-if="taskId" class="id-badge">#{{ taskId }}</span>
+      <span v-if="status" class="status-badge" :style="{ color: statusColor, borderColor: statusColor, background: statusColor + '15' }">
+        <span class="status-icon">{{ statusIcon }}</span>{{ status }}
+      </span>
       <span v-if="subagentType" class="agent-badge">{{ subagentType }}</span>
       <span v-if="model" class="model-badge">{{ model }}</span>
-      <span v-if="runInBackground" class="bg-badge">background</span>
+      <span v-if="runInBackground" class="bg-badge">bg</span>
-      <span v-if="isError" class="error-badge">error</span>
+      <span v-if="isError" class="error-badge">err</span>
+
+      <span class="header-spacer" />
+
+      <!-- Toggle buttons -->
+      <button v-if="hasDesc" class="toggle-btn" :class="{ active: showDesc }" @click.stop="showDesc = !showDesc" title="Description">
+        <svg width="11" height="11" 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"/>
+        </svg>
+      </button>
+      <button v-if="hasPrompt" class="toggle-btn" :class="{ active: showPrompt }" @click.stop="showPrompt = !showPrompt" title="Prompt">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/>
+        </svg>
+      </button>
+      <button v-if="hasResult" class="toggle-btn" :class="{ active: showResult }" @click.stop="showResult = !showResult" title="Result">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/>
+        </svg>
+      </button>
     </div>
 
-    <div class="card-body">
+    <!-- BODY: subject / brief -->
-      <!-- Status (TaskUpdate) -->
+    <div v-if="hasBody" class="card-body">
-      <div v-if="status" class="field-row">
+      <span v-if="subject" class="topic subject-topic">{{ subject }}</span>
-        <span class="field-label">Status</span>
+      <span v-if="activeForm" class="topic active-topic">{{ activeForm }}</span>
-        <span class="status-badge" :style="{ color: statusColor, borderColor: statusColor, background: statusColor + '15' }">
+      <span v-if="!subject && !hasTopics && descBrief" class="topic desc-topic">{{ descBrief }}</span>
-          <span class="status-icon">{{ statusIcon }}</span>
+    </div>
-          {{ status }}
-        </span>
-      </div>
 
-      <!-- Subject (TaskCreate/TaskUpdate) -->
+    <!-- MAIN TOPICS: always visible bullets -->
-      <div v-if="subject" class="field-row">
+    <div v-if="hasTopics" class="topic-list">
-        <span class="field-label">Subject</span>
+      <div v-for="(t, i) in mainTopics" :key="i" class="topic-item">
-        <span class="field-value subject">{{ subject }}</span>
+        <span class="topic-dot" :style="t.status ? { color: statusColorFor(t.status) } : {}">&#9679;</span>
-      </div>
+        <span v-if="t.id" class="topic-id">#{{ t.id }}</span>
-
+        <span class="topic-label">{{ t.label }}</span>
-      <!-- Active form -->
-      <div v-if="activeForm" class="field-row">
-        <span class="field-label">Active</span>
-        <span class="field-value active-form">{{ activeForm }}</span>
-      </div>
-
-      <!-- Description (collapsible for long text) -->
-      <div v-if="description && description.length <= 120" class="field-row">
-        <span class="field-label">Desc</span>
-        <span class="field-value desc-text">{{ description }}</span>
-      </div>
-      <div v-else-if="description" class="collapsible-section">
-        <button class="section-toggle" @click="descExpanded = !descExpanded">
-          <svg :class="['chevron', { rotated: descExpanded }]" 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>Description</span>
-          <span class="section-meta">{{ description.length }} chars</span>
-        </button>
-        <pre v-if="descExpanded" class="section-content">{{ description }}</pre>
-      </div>
-
-      <!-- Prompt (Task subagent) -->
-      <div v-if="prompt && prompt.length <= 120" class="field-row">
-        <span class="field-label">Prompt</span>
-        <span class="field-value desc-text">{{ prompt }}</span>
-      </div>
-      <div v-else-if="prompt" class="collapsible-section">
-        <button class="section-toggle" @click="promptExpanded = !promptExpanded">
-          <svg :class="['chevron', { rotated: promptExpanded }]" 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>Prompt</span>
-          <span class="section-meta">{{ prompt.length }} chars</span>
-        </button>
-        <pre v-if="promptExpanded" class="section-content">{{ prompt }}</pre>
       </div>
     </div>
 
-    <!-- Result -->
+    <!-- EXPANDED: Description -->
-    <ToolResultBlock v-if="call.result" :result="call.result" />
+    <div v-if="showDesc && description" class="expand-section">
+      <pre class="expand-content">{{ description }}</pre>
+    </div>
+
+    <!-- EXPANDED: Prompt -->
+    <div v-if="showPrompt && prompt" class="expand-section">
+      <pre class="expand-content">{{ prompt }}</pre>
+    </div>
+
+    <!-- EXPANDED: Raw result -->
+    <div v-if="showResult && call.result" class="expand-section result-section">
+      <ToolResultBlock :result="call.result" />
+    </div>
   </div>
 </template>
 
 <style scoped>
 .task-card {
-  border: 1px solid color-mix(in srgb, var(--card-color) 25%, transparent);
+  border: none;
-  border-left: 3px solid var(--card-color);
+  border-left: 2px solid color-mix(in srgb, var(--card-color) 25%, transparent);
-  border-radius: 8px;
+  border-radius: 6px;
   overflow: hidden;
-  margin: 0.5rem 0;
+  margin: 0.35rem 0;
-  background: var(--bg-primary);
+  background: color-mix(in srgb, var(--card-color) 2%, transparent);
 }
 
-.task-card.error {
+.task-card.error { border-left-color: rgba(239, 68, 68, 0.4); }
-  border-color: rgba(239, 68, 68, 0.25);
-  border-left-color: #ef4444;
-}
 
+/* Header */
 .card-header {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.35rem;
-  padding: 0.45rem 0.75rem;
+  padding: 0.3rem 0.6rem;
-  background: color-mix(in srgb, var(--card-color) 6%, transparent);
+  background: transparent;
-  border-bottom: 1px solid color-mix(in srgb, var(--card-color) 12%, transparent);
+  min-height: 28px;
 }
 
-.task-card.error .card-header {
+.card-icon { display: flex; align-items: center; color: color-mix(in srgb, var(--card-color) 60%, transparent); flex-shrink: 0; }
-  background: rgba(239, 68, 68, 0.06);
+.task-card.error .card-icon { color: rgba(239, 68, 68, 0.6); }
-  border-bottom-color: rgba(239, 68, 68, 0.12);
-}
-
-.card-icon {
-  display: flex;
-  align-items: center;
-  color: var(--card-color);
-}
-
-.task-card.error .card-icon { color: #ef4444; }
 
 .card-label {
-  font-size: 11px;
+  font-size: 10px; font-weight: 700; color: color-mix(in srgb, var(--card-color) 70%, transparent);
-  font-weight: 600;
+  text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0;
-  color: var(--card-color);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
 }
+.task-card.error .card-label { color: rgba(239, 68, 68, 0.7); }
 
-.task-card.error .card-label { color: #ef4444; }
+.header-spacer { flex: 1; }
 
-.id-badge {
+/* Badges */
-  font-size: 11px;
+.id-badge, .agent-badge, .model-badge, .bg-badge, .error-badge, .status-badge {
-  padding: 0.1rem 0.4rem;
+  font-size: 9px; padding: 0.05rem 0.3rem; border-radius: 3px;
-  border-radius: 4px;
+  font-weight: 600; flex-shrink: 0; background: transparent;
-  background: color-mix(in srgb, var(--card-color) 12%, transparent);
-  color: var(--card-color);
-  font-family: 'SF Mono', 'Fira Code', monospace;
-  font-weight: 600;
-}
-
-.agent-badge {
-  font-size: 10px;
-  padding: 0.1rem 0.35rem;
-  border-radius: 4px;
-  background: rgba(99, 102, 241, 0.1);
-  color: #818cf8;
-  font-weight: 500;
-}
-
-.model-badge {
-  font-size: 10px;
-  padding: 0.1rem 0.35rem;
-  border-radius: 4px;
-  background: rgba(99, 102, 241, 0.1);
-  color: var(--accent, #6366f1);
   font-family: 'SF Mono', 'Fira Code', monospace;
 }
 
-.bg-badge {
+.id-badge { color: color-mix(in srgb, var(--card-color) 60%, transparent); }
-  font-size: 10px;
+.agent-badge { color: rgba(129, 140, 248, 0.7); font-family: inherit; }
-  padding: 0.1rem 0.35rem;
+.model-badge { color: color-mix(in srgb, var(--card-color) 50%, transparent); }
-  border-radius: 4px;
+.bg-badge { color: rgba(129, 140, 248, 0.6); font-family: inherit; }
-  background: rgba(99, 102, 241, 0.12);
+.error-badge { color: rgba(239, 68, 68, 0.7); }
-  color: #818cf8;
-  font-weight: 500;
-}
-
-.error-badge {
-  font-size: 10px;
-  padding: 0.1rem 0.4rem;
-  border-radius: 4px;
-  background: rgba(239, 68, 68, 0.15);
-  color: #ef4444;
-  font-weight: 500;
-}
-
-.card-body {
-  padding: 0.5rem 0.75rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-}
-
-.field-row {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.field-label {
-  font-size: 11px;
-  color: var(--text-muted);
-  font-weight: 500;
-  min-width: 45px;
-  flex-shrink: 0;
-}
 
 .status-badge {
-  display: inline-flex;
+  display: inline-flex; align-items: center; gap: 0.15rem;
-  align-items: center;
-  gap: 0.25rem;
-  font-size: 11px;
-  font-weight: 600;
-  padding: 0.15rem 0.45rem;
-  border: 1px solid;
-  border-radius: 5px;
-}
-
-.status-icon { font-size: 12px; }
-
-.field-value {
-  font-size: 12px;
-  color: var(--text-primary);
-}
-
-.field-value.subject { font-weight: 500; }
-.field-value.active-form { font-style: italic; color: var(--text-secondary); }
-.field-value.desc-text { font-size: 11px; color: var(--text-muted); line-height: 1.3; }
-
-/* Collapsible sections */
-.collapsible-section {
-  border-top: 1px solid var(--border-color);
-  margin: 0 -0.75rem;
-}
-
-.section-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);
+.status-icon { font-size: 9px; }
-  font-size: 11px;
+
-  text-align: left;
+/* Toggle buttons */
+.toggle-btn {
+  display: flex; align-items: center; justify-content: center;
+  width: 20px; height: 20px; border: none; border-radius: 4px;
+  background: transparent; color: var(--text-muted); cursor: pointer;
+  flex-shrink: 0; opacity: 0.5; transition: all 0.15s;
+}
+.toggle-btn:hover { opacity: 0.8; }
+.toggle-btn.active { opacity: 1; color: color-mix(in srgb, var(--card-color) 80%, transparent); }
+
+/* Body */
+.card-body {
+  display: flex; flex-wrap: wrap; align-items: center;
+  gap: 0.3rem; padding: 0.15rem 0.6rem 0.25rem;
 }
 
-.section-toggle:hover { background: var(--bg-hover); }
+.topic {
+  font-size: 11px; line-height: 1.3; max-width: 100%;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.subject-topic { font-weight: 600; color: var(--text-primary); }
+.active-topic { font-style: italic; color: var(--text-secondary); font-size: 10px; }
+.active-topic::before { content: '\2014 '; color: var(--text-muted); }
+.desc-topic { color: var(--text-muted); }
 
-.section-meta {
+/* Topic list (always visible bullets) */
-  margin-left: auto;
+.topic-list {
+  padding: 0.15rem 0.6rem 0.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.05rem;
+}
+
+.topic-item {
+  display: flex;
+  align-items: baseline;
+  gap: 0.35rem;
+  font-size: 11px;
+  line-height: 1.35;
+  min-height: 16px;
+}
+
+.topic-dot {
+  font-size: 6px;
+  color: color-mix(in srgb, var(--card-color) 50%, transparent);
+  flex-shrink: 0;
+  width: 10px;
+  text-align: center;
+  position: relative;
+  top: -1px;
+}
+
+.topic-id {
+  font-size: 10px;
   color: var(--text-muted);
   font-family: 'SF Mono', 'Fira Code', monospace;
-  font-size: 10px;
-}
-
-.chevron {
-  transition: transform 0.2s;
   flex-shrink: 0;
 }
 
-.chevron.rotated { transform: rotate(90deg); }
+.topic-label {
-
-.section-content {
-  margin: 0;
-  padding: 0.5rem 0.75rem;
-  font-size: 11px;
-  line-height: 1.5;
   color: var(--text-secondary);
-  white-space: pre-wrap;
+  overflow: hidden;
-  word-break: break-word;
+  text-overflow: ellipsis;
-  max-height: 200px;
+  white-space: nowrap;
-  overflow-y: auto;
-  border-top: 1px solid var(--border-color);
-  background: var(--bg-primary);
-  font-family: 'SF Mono', 'Fira Code', monospace;
 }
+
+/* Expandable sections */
+.expand-section { border-top: 1px solid rgba(255, 255, 255, 0.04); }
+
+.expand-content {
+  margin: 0; padding: 0.35rem 0.6rem;
+  font-size: 11px; line-height: 1.45; color: var(--text-secondary);
+  white-space: pre-wrap; word-break: break-word;
+  max-height: 200px; overflow-y: auto;
+  background: transparent; font-family: 'SF Mono', 'Fira Code', monospace;
+}
+
+.result-section :deep(.tool-result) { border: none; border-radius: 0; margin-top: 0; }
 </style>

frontend/src/components/transcript-debug/toolCards/WriteCard.vue

@@ -26,6 +26,7 @@ const ext = computed(() => {
 const isError = computed(() => props.call.result?.isError ?? false)
 
 const contentExpanded = ref(false)
+const resultExpanded = ref(false)
 
 const highlightedContent = computed(() => highlightCode(content.value, ext.value || undefined))
 
@@ -36,7 +37,7 @@ const lineCount = computed(() => content.value.split('\n').length)
   <div :class="['write-card', { error: isError }]">
     <div class="card-header">
       <span class="card-icon">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <svg width="12" height="12" 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="12" y1="18" x2="12" y2="12"/>
@@ -44,167 +45,129 @@ const lineCount = computed(() => content.value.split('\n').length)
         </svg>
       </span>
       <span class="card-label">Write</span>
+      <span class="file-name" :title="filePath">{{ fileName }}</span>
       <span v-if="ext" class="ext-badge">.{{ ext }}</span>
-      <span v-if="isError" class="error-badge">error</span>
+      <span class="line-meta">{{ lineCount }}L</span>
-    </div>
+      <span v-if="isError" class="error-badge">err</span>
 
-    <div class="card-body">
+      <span class="header-spacer"></span>
-      <div class="file-path" :title="filePath">
+
-        <span class="path-dir">{{ filePath.replace(/\\/g, '/').split('/').slice(0, -1).join('/') }}/</span>
+      <button class="toggle-btn" :class="{ active: contentExpanded }" @click.stop="contentExpanded = !contentExpanded" title="Toggle content">
-        <span class="path-file">{{ fileName }}</span>
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-      </div>
+          <path d="M12 3v18M3 12h18"/>
+        </svg>
+      </button>
+      <button v-if="call.result" class="toggle-btn" :class="{ active: resultExpanded }" @click.stop="resultExpanded = !resultExpanded" title="Toggle result">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="4 17 10 11 4 5"/>
+          <line x1="12" y1="19" x2="20" y2="19"/>
+        </svg>
+      </button>
     </div>
 
     <!-- Content preview -->
-    <div class="content-section">
+    <div v-if="contentExpanded" class="content-section">
-      <button class="content-toggle" @click="contentExpanded = !contentExpanded">
+      <pre class="content-pre" v-html="highlightedContent"></pre>
-        <svg
-          :class="['chevron', { rotated: contentExpanded }]"
-          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>Content</span>
-        <span class="content-meta">{{ lineCount }} lines &middot; {{ content.length }} chars</span>
-      </button>
-      <pre v-if="contentExpanded" class="content-pre" v-html="highlightedContent"></pre>
     </div>
 
-    <!-- Result -->
+    <ToolResultBlock v-if="resultExpanded && call.result" :result="call.result" />
-    <ToolResultBlock v-if="call.result" :result="call.result" />
   </div>
 </template>
 
 <style scoped>
 .write-card {
-  border: 1px solid rgba(34, 197, 94, 0.25);
+  border: none;
-  border-left: 3px solid #22c55e;
+  border-left: 2px solid rgba(34, 197, 94, 0.25);
-  border-radius: 8px;
+  border-radius: 6px;
   overflow: hidden;
-  margin: 0.5rem 0;
+  margin: 0.35rem 0;
-  background: var(--bg-primary);
+  background: rgba(34, 197, 94, 0.02);
 }
 
-.write-card.error {
+.write-card.error { border-left-color: rgba(239, 68, 68, 0.4); }
-  border-color: rgba(239, 68, 68, 0.25);
-  border-left-color: #ef4444;
-}
 
 .card-header {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.35rem;
-  padding: 0.45rem 0.75rem;
+  padding: 0.3rem 0.6rem;
-  background: rgba(34, 197, 94, 0.06);
+  background: transparent;
-  border-bottom: 1px solid rgba(34, 197, 94, 0.12);
+  min-height: 28px;
 }
 
-.write-card.error .card-header {
+.card-icon { display: flex; align-items: center; color: rgba(34, 197, 94, 0.6); flex-shrink: 0; }
-  background: rgba(239, 68, 68, 0.06);
+.write-card.error .card-icon { color: rgba(239, 68, 68, 0.6); }
-  border-bottom-color: rgba(239, 68, 68, 0.12);
-}
-
-.card-icon {
-  display: flex;
-  align-items: center;
-  color: #22c55e;
-}
-
-.write-card.error .card-icon { color: #ef4444; }
 
 .card-label {
-  font-size: 11px;
+  font-size: 10px;
-  font-weight: 600;
+  font-weight: 700;
-  color: #22c55e;
+  color: rgba(34, 197, 94, 0.7);
   text-transform: uppercase;
   letter-spacing: 0.5px;
+  flex-shrink: 0;
 }
+.write-card.error .card-label { color: rgba(239, 68, 68, 0.7); }
 
-.write-card.error .card-label { color: #ef4444; }
+.file-name {
-
+  font-size: 11px;
-.ext-badge {
-  font-size: 10px;
-  padding: 0.1rem 0.35rem;
-  border-radius: 4px;
-  background: rgba(34, 197, 94, 0.12);
-  color: #22c55e;
   font-family: 'SF Mono', 'Fira Code', monospace;
-  font-weight: 500;
+  color: var(--text-primary);
-}
+  font-weight: 600;
-
-.error-badge {
-  font-size: 10px;
-  padding: 0.1rem 0.4rem;
-  border-radius: 4px;
-  background: rgba(239, 68, 68, 0.15);
-  color: #ef4444;
-  font-weight: 500;
-}
-
-.card-body {
-  padding: 0.5rem 0.75rem;
-}
-
-.file-path {
-  font-size: 12px;
-  font-family: 'SF Mono', 'Fira Code', monospace;
-  line-height: 1.4;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  min-width: 0;
 }
 
-.path-dir { color: var(--text-muted); }
+.ext-badge, .line-meta, .error-badge {
-.path-file { color: var(--text-primary); font-weight: 600; }
+  font-size: 9px;
-
+  padding: 0.05rem 0.3rem;
-/* Content preview */
+  border-radius: 3px;
-.content-section {
+  font-weight: 600;
-  border-top: 1px solid var(--border-color);
+  flex-shrink: 0;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  background: transparent;
 }
 
-.content-toggle {
+.ext-badge { color: rgba(34, 197, 94, 0.5); }
+.line-meta { color: rgba(34, 197, 94, 0.6); }
+.error-badge { color: rgba(239, 68, 68, 0.7); }
+
+.header-spacer { flex: 1; }
+
+.toggle-btn {
   display: flex;
   align-items: center;
-  gap: 0.4rem;
+  justify-content: center;
-  width: 100%;
+  width: 20px;
-  padding: 0.35rem 0.75rem;
+  height: 20px;
-  background: transparent;
   border: none;
-  cursor: pointer;
+  border-radius: 4px;
-  color: var(--text-secondary);
+  background: transparent;
-  font-size: 11px;
-  text-align: left;
-}
-
-.content-toggle:hover { background: var(--bg-hover); }
-
-.content-meta {
-  margin-left: auto;
   color: var(--text-muted);
-  font-family: 'SF Mono', 'Fira Code', monospace;
+  cursor: pointer;
-  font-size: 10px;
-}
-
-.chevron {
-  transition: transform 0.2s;
   flex-shrink: 0;
+  opacity: 0.5;
+  transition: all 0.15s;
 }
+.toggle-btn:hover { opacity: 0.8; }
+.toggle-btn.active { opacity: 1; color: rgba(34, 197, 94, 0.8); }
 
-.chevron.rotated { transform: rotate(90deg); }
+/* Content */
+.content-section {
+  border-top: 1px solid rgba(255, 255, 255, 0.04);
+}
 
 .content-pre {
   margin: 0;
-  padding: 0.6rem 0.75rem;
+  padding: 0.35rem 0.6rem;
   font-size: 11px;
-  line-height: 1.5;
+  line-height: 1.45;
   color: var(--text-secondary);
   white-space: pre-wrap;
   word-break: break-all;
-  max-height: 300px;
+  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>