feat: rich collapse badge, auto-collapse, aquatic scroll nav arrows

- SectionSummary type with tool names, error count, token usage
- Informative inline badge on collapsed sections (tools, errors, tokens)
- Auto-collapse keeps older sections collapsed as new messages arrive
- Replace scrollbar with pixel art aquatic scroll navigation arrows
- Configurable scroll jump percentage in settings
- Double chevrons for top/bottom, single for page jump

frontend/src/components/FloatingTranscriptDebug.vue

@@ -33,6 +33,7 @@ const {
   processing,
   ephemeral,
   terminalReady,
+  hookMeta,
   openTerminals,
   activeTerminalSessionId,
   init,
@@ -161,6 +162,28 @@ function setInputMaxLines(val: number) {
   localStorage.setItem('transcript-input-max-lines', String(val))
 }
 
+// Scroll jump percent
+const savedScrollJump = localStorage.getItem('transcript-scroll-jump')
+const scrollJumpPercent = ref(savedScrollJump !== null ? parseInt(savedScrollJump) : 50)
+
+function setScrollJumpPercent(val: number) {
+  scrollJumpPercent.value = val
+  localStorage.setItem('transcript-scroll-jump', String(val))
+}
+
+function scrollJump(direction: 'up' | 'down') {
+  const el = (chatRef.value as any)?.$el?.querySelector('.messages-scroll') as HTMLElement | null
+  if (!el) return
+  const amount = el.clientHeight * (scrollJumpPercent.value / 100)
+  el.scrollBy({ top: direction === 'up' ? -amount : amount, behavior: 'smooth' })
+}
+
+function scrollToEdge(edge: 'top' | 'bottom') {
+  const el = (chatRef.value as any)?.$el?.querySelector('.messages-scroll') as HTMLElement | null
+  if (!el) return
+  el.scrollTo({ top: edge === 'top' ? 0 : el.scrollHeight, behavior: 'smooth' })
+}
+
 // Force mobile (bottom sheet) mode on desktop
 const forceMobile = ref(false)
 const effectiveMobile = computed(() => isMobile.value || forceMobile.value)
@@ -573,6 +596,8 @@ onBeforeUnmount(() => {
                 :connected="isRealtime"
                 :terminals="openTerminals"
                 :active-session-id="activeTerminalSessionId"
+                :model="conversation?.model"
+                :version="conversation?.version"
                 @switch-terminal="switchToTerminal"
                 @close-terminal="closeTerminal"
               />
@@ -677,6 +702,8 @@ onBeforeUnmount(() => {
               :is-playing-audio="isPlayingAudio"
               :overlay-opacity="overlayOpacity"
               :input-max-lines="inputMaxLines"
+              :scroll-jump-percent="scrollJumpPercent"
+              :hook-permission-mode="hookMeta.permissionMode"
               @send="handleSend"
               @switch-agent="handleAgentSwitch"
               @select-session="handleSessionSelect"
@@ -689,6 +716,7 @@ onBeforeUnmount(() => {
               @play-last-audio="voice.playLastAudio()"
               @update:overlay-opacity="setOverlayOpacity"
               @update:input-max-lines="setInputMaxLines"
+              @update:scroll-jump-percent="setScrollJumpPercent"
             />
             <div v-else class="empty-state">
               <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
@@ -699,6 +727,96 @@ onBeforeUnmount(() => {
             </div>
           </div>
 
+          <!-- Scroll arrows (visible only in idle mode) -->
+          <Transition name="scroll-arrows">
+            <div v-if="showChrome && conversation" class="scroll-arrows">
+              <!-- Top: double chevron up + wave accent -->
+              <button class="scroll-arrow sa-surface" @click="scrollToEdge('top')" title="Scroll to top">
+                <svg width="20" height="22" viewBox="0 0 20 22" shape-rendering="crispEdges">
+                  <!-- Wave line -->
+                  <rect x="0" y="0" width="4" height="2" fill="#0ea5e9" opacity="0.5"/>
+                  <rect x="4" y="1" width="3" height="2" fill="#22d3ee" opacity="0.4"/>
+                  <rect x="7" y="0" width="6" height="2" fill="#0ea5e9" opacity="0.5"/>
+                  <rect x="13" y="1" width="3" height="2" fill="#22d3ee" opacity="0.4"/>
+                  <rect x="16" y="0" width="4" height="2" fill="#0ea5e9" opacity="0.5"/>
+                  <rect x="1" y="2" width="2" height="1" fill="white" opacity="0.15"/>
+                  <rect x="9" y="2" width="2" height="1" fill="white" opacity="0.12"/>
+                  <!-- Chevron 1 -->
+                  <rect x="9" y="6" width="2" height="2" fill="#67e8f9" opacity="0.75"/>
+                  <rect x="7" y="8" width="2" height="2" fill="#67e8f9" opacity="0.6"/>
+                  <rect x="11" y="8" width="2" height="2" fill="#67e8f9" opacity="0.6"/>
+                  <rect x="5" y="10" width="2" height="2" fill="#67e8f9" opacity="0.45"/>
+                  <rect x="13" y="10" width="2" height="2" fill="#67e8f9" opacity="0.45"/>
+                  <!-- Chevron 2 -->
+                  <rect x="9" y="13" width="2" height="2" fill="#67e8f9" opacity="0.55"/>
+                  <rect x="7" y="15" width="2" height="2" fill="#67e8f9" opacity="0.4"/>
+                  <rect x="11" y="15" width="2" height="2" fill="#67e8f9" opacity="0.4"/>
+                  <rect x="5" y="17" width="2" height="2" fill="#67e8f9" opacity="0.3"/>
+                  <rect x="13" y="17" width="2" height="2" fill="#67e8f9" opacity="0.3"/>
+                </svg>
+              </button>
+              <!-- Up: single chevron + bubbles -->
+              <button class="scroll-arrow sa-up" @click="scrollJump('up')" title="Scroll up">
+                <svg width="20" height="16" viewBox="0 0 20 16" shape-rendering="crispEdges">
+                  <!-- Chevron -->
+                  <rect x="9" y="2" width="2" height="2" fill="#67e8f9" opacity="0.75"/>
+                  <rect x="7" y="4" width="2" height="2" fill="#67e8f9" opacity="0.6"/>
+                  <rect x="11" y="4" width="2" height="2" fill="#67e8f9" opacity="0.6"/>
+                  <rect x="5" y="6" width="2" height="2" fill="#67e8f9" opacity="0.45"/>
+                  <rect x="13" y="6" width="2" height="2" fill="#67e8f9" opacity="0.45"/>
+                  <!-- Bubble accents -->
+                  <rect x="15" y="1" width="2" height="2" fill="#67e8f9" opacity="0.25"/>
+                  <rect x="16" y="1" width="1" height="1" fill="white" opacity="0.2"/>
+                  <rect x="3" y="3" width="1" height="1" fill="#67e8f9" opacity="0.18"/>
+                  <!-- Trail -->
+                  <rect x="9" y="11" width="2" height="1" fill="#67e8f9" opacity="0.18"/>
+                  <rect x="11" y="13" width="1" height="1" fill="#67e8f9" opacity="0.12"/>
+                </svg>
+              </button>
+              <!-- Down: single chevron + bubbles -->
+              <button class="scroll-arrow sa-down" @click="scrollJump('down')" title="Scroll down">
+                <svg width="20" height="16" viewBox="0 0 20 16" shape-rendering="crispEdges">
+                  <!-- Trail -->
+                  <rect x="8" y="2" width="1" height="1" fill="#67e8f9" opacity="0.12"/>
+                  <rect x="9" y="4" width="2" height="1" fill="#67e8f9" opacity="0.18"/>
+                  <!-- Chevron -->
+                  <rect x="5" y="7" width="2" height="2" fill="#67e8f9" opacity="0.45"/>
+                  <rect x="13" y="7" width="2" height="2" fill="#67e8f9" opacity="0.45"/>
+                  <rect x="7" y="9" width="2" height="2" fill="#67e8f9" opacity="0.6"/>
+                  <rect x="11" y="9" width="2" height="2" fill="#67e8f9" opacity="0.6"/>
+                  <rect x="9" y="11" width="2" height="2" fill="#67e8f9" opacity="0.75"/>
+                  <!-- Bubble accents -->
+                  <rect x="3" y="12" width="2" height="2" fill="#67e8f9" opacity="0.25"/>
+                  <rect x="4" y="12" width="1" height="1" fill="white" opacity="0.2"/>
+                  <rect x="16" y="10" width="1" height="1" fill="#67e8f9" opacity="0.18"/>
+                </svg>
+              </button>
+              <!-- Bottom: double chevron down + sand -->
+              <button class="scroll-arrow sa-seabed" @click="scrollToEdge('bottom')" title="Scroll to bottom">
+                <svg width="20" height="22" viewBox="0 0 20 22" shape-rendering="crispEdges">
+                  <!-- Chevron 1 (pointing down) -->
+                  <rect x="5" y="1" width="2" height="2" fill="#67e8f9" opacity="0.3"/>
+                  <rect x="13" y="1" width="2" height="2" fill="#67e8f9" opacity="0.3"/>
+                  <rect x="7" y="3" width="2" height="2" fill="#67e8f9" opacity="0.35"/>
+                  <rect x="11" y="3" width="2" height="2" fill="#67e8f9" opacity="0.35"/>
+                  <rect x="9" y="5" width="2" height="2" fill="#67e8f9" opacity="0.45"/>
+                  <!-- Chevron 2 (pointing down) -->
+                  <rect x="5" y="8" width="2" height="2" fill="#67e8f9" opacity="0.5"/>
+                  <rect x="13" y="8" width="2" height="2" fill="#67e8f9" opacity="0.5"/>
+                  <rect x="7" y="10" width="2" height="2" fill="#67e8f9" opacity="0.65"/>
+                  <rect x="11" y="10" width="2" height="2" fill="#67e8f9" opacity="0.65"/>
+                  <rect x="9" y="12" width="2" height="2" fill="#67e8f9" opacity="0.75"/>
+                  <!-- Sand floor -->
+                  <rect x="0" y="17" width="20" height="2" fill="#d4a06a" opacity="0.3"/>
+                  <rect x="0" y="19" width="20" height="3" fill="#c4956a" opacity="0.35"/>
+                  <rect x="4" y="17" width="1" height="1" fill="#e8c088" opacity="0.25"/>
+                  <rect x="12" y="18" width="1" height="1" fill="#e8c088" opacity="0.2"/>
+                  <rect x="17" y="17" width="1" height="1" fill="#e8c088" opacity="0.22"/>
+                </svg>
+              </button>
+            </div>
+          </Transition>
+
           <!-- Resize handle -->
           <div v-if="!effectiveMobile" class="resize-handle" @mousedown="startResize"></div>
         </div>
@@ -1086,7 +1204,11 @@ onBeforeUnmount(() => {
   padding-top: 5rem !important;
   padding-bottom: 5rem !important;
   flex: 1 !important;
-  scrollbar-gutter: stable !important;
+  scrollbar-width: none !important;
+}
+
+.content :deep(.messages-scroll)::-webkit-scrollbar {
+  display: none !important;
 }
 
 .content :deep(.meta-badge) {
@@ -1133,38 +1255,6 @@ onBeforeUnmount(() => {
   color: #c7d2fe;
 }
 
-/* Pixel art scrollbar */
-.content :deep(.messages-scroll)::-webkit-scrollbar {
-  width: 8px;
-  transition: opacity 0.35s ease;
-}
-
-/* Idle: hide scrollbar visuals (gutter stays via scrollbar-gutter: stable) */
-.aero-win:not(.chrome-visible) .content :deep(.messages-scroll)::-webkit-scrollbar-track {
-  background: transparent !important;
-}
-
-.aero-win:not(.chrome-visible) .content :deep(.messages-scroll)::-webkit-scrollbar-thumb {
-  background: transparent !important;
-  border-color: transparent !important;
-}
-
-.content :deep(.messages-scroll)::-webkit-scrollbar-track {
-  background:
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='8' height='8' fill='%230c2d4a' opacity='0.4'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23075985' opacity='0.15'/%3E%3Crect x='6' y='6' width='2' height='2' fill='%23075985' opacity='0.1'/%3E%3C/svg%3E") repeat;
-}
-
-.content :deep(.messages-scroll)::-webkit-scrollbar-thumb {
-  background:
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='16' viewBox='0 0 8 16' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='8' height='16' fill='%230ea5e9' opacity='0.3'/%3E%3Crect x='2' y='2' width='4' height='2' fill='%2322d3ee' opacity='0.25'/%3E%3Crect x='2' y='6' width='4' height='2' fill='%2367e8f9' opacity='0.2'/%3E%3Crect x='2' y='10' width='4' height='2' fill='%2322d3ee' opacity='0.25'/%3E%3Crect x='2' y='14' width='4' height='2' fill='%2367e8f9' opacity='0.15'/%3E%3C/svg%3E") repeat;
-  border: 1px solid rgba(14, 165, 233, 0.15);
-}
-
-.content :deep(.messages-scroll)::-webkit-scrollbar-thumb:hover {
-  background:
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='16' viewBox='0 0 8 16' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='8' height='16' fill='%230ea5e9' opacity='0.45'/%3E%3Crect x='2' y='2' width='4' height='2' fill='%2322d3ee' opacity='0.35'/%3E%3Crect x='2' y='6' width='4' height='2' fill='%2367e8f9' opacity='0.3'/%3E%3Crect x='2' y='10' width='4' height='2' fill='%2322d3ee' opacity='0.35'/%3E%3Crect x='2' y='14' width='4' height='2' fill='%2367e8f9' opacity='0.25'/%3E%3C/svg%3E") repeat;
-  border-color: rgba(14, 165, 233, 0.3);
-}
 
 /* Status bar: absolute overlay at very bottom */
 .content :deep(.status-bar) {
@@ -1674,4 +1764,64 @@ onBeforeUnmount(() => {
   transform: translateY(100%) !important;
   opacity: 1 !important;
 }
+
+/* ── Scroll arrows (aquatic pixel art) ── */
+.scroll-arrows {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  z-index: 5;
+  pointer-events: auto;
+}
+
+.scroll-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 30px;
+  min-height: 24px;
+  border: 1px solid rgba(14, 165, 233, 0.12);
+  background: rgba(0, 10, 30, 0.45);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  cursor: pointer;
+  padding: 0;
+  transition: all 0.2s ease;
+}
+
+.scroll-arrow:hover {
+  background: rgba(14, 165, 233, 0.08);
+  border-color: rgba(14, 165, 233, 0.3);
+  transform: scale(1.1);
+}
+
+.scroll-arrow:active {
+  transform: scale(0.92);
+}
+
+.scroll-arrow.sa-surface svg { animation: sa-float 3s ease-in-out infinite; }
+.scroll-arrow.sa-up svg      { animation: sa-bob-up 2.5s ease-in-out infinite; }
+.scroll-arrow.sa-down svg    { animation: sa-bob-down 2.5s ease-in-out infinite; }
+.scroll-arrow.sa-seabed svg  { animation: sa-sway 4s ease-in-out infinite; }
+
+@keyframes sa-float    { 0%,100% { transform: translateY(0); }  50% { transform: translateY(-1px); } }
+@keyframes sa-bob-up   { 0%,100% { transform: translateY(0); }  50% { transform: translateY(-1.5px); } }
+@keyframes sa-bob-down { 0%,100% { transform: translateY(0); }  50% { transform: translateY(1.5px); } }
+@keyframes sa-sway     { 0%,100% { transform: translateX(0); }  50% { transform: translateX(0.5px); } }
+
+/* Transition for scroll arrows appear/disappear */
+.scroll-arrows-enter-active,
+.scroll-arrows-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.scroll-arrows-enter-from,
+.scroll-arrows-leave-to {
+  opacity: 0;
+  transform: translateY(-50%) translateX(8px);
+}
 </style>

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

@@ -6,7 +6,8 @@ import type {
   ParsedAssistantMessage,
   ParsedSystemMessage,
   ConversationMessage,
-  AgentName
+  AgentName,
+  SectionSummary
 } from '@/types/transcript-debug'
 import type { EphemeralTerminal } from '@/composables/useEphemeralTerminal'
 import UserMessageBubble from './UserMessageBubble.vue'
@@ -38,8 +39,20 @@ const props = defineProps<{
   isPlayingAudio?: boolean
   overlayOpacity?: number
   inputMaxLines?: number
+  scrollJumpPercent?: number
+  hookPermissionMode?: string
 }>()
 
+// ── Derived display values ──
+const permissionMode = computed(() => props.hookPermissionMode || '')
+const fullCwd = computed(() => props.conversation.metadata.cwd || '')
+const displayCwd = computed(() => {
+  const cwd = fullCwd.value
+  if (!cwd) return ''
+  const parts = cwd.replace(/\\/g, '/').split('/').filter(Boolean)
+  return parts.length > 0 ? parts[parts.length - 1] : cwd
+})
+
 const emit = defineEmits<{
   send: [message: string]
   switchAgent: [agent: AgentName]
@@ -53,6 +66,7 @@ const emit = defineEmits<{
   playLastAudio: []
   'update:overlayOpacity': [value: number]
   'update:inputMaxLines': [value: number]
+  'update:scrollJumpPercent': [value: number]
 }>()
 
 const scrollContainer = ref<HTMLElement | null>(null)
@@ -190,18 +204,71 @@ const sectionMap = computed(() => {
   return map
 })
 
-// Count of non-leader messages per section
+// Rich summary of non-leader messages per section
-const sectionCounts = computed(() => {
+const sectionSummaries = computed(() => {
-  const counts = new Map<string, number>()
+  const summaries = new Map<string, SectionSummary>()
   let currentUserUuid: string | null = null
+
+  function getOrCreate(uuid: string): SectionSummary {
+    if (!summaries.has(uuid)) {
+      summaries.set(uuid, {
+        total: 0, assistantCount: 0, systemCount: 0, progressCount: 0,
+        toolNames: [], hasErrors: false, errorCount: 0,
+        inputTokens: 0, outputTokens: 0
+      })
+    }
+    return summaries.get(uuid)!
+  }
+
+  const toolSets = new Map<string, Set<string>>()
+
   for (const msg of props.conversation.messages) {
     if (msg.kind === 'user' && !isSpecialUserMessage(msg)) {
       currentUserUuid = msg.uuid
-      if (!counts.has(currentUserUuid)) counts.set(currentUserUuid, 0)
+      getOrCreate(currentUserUuid)
+      if (!toolSets.has(currentUserUuid)) toolSets.set(currentUserUuid, new Set())
     } else if (currentUserUuid) {
-      counts.set(currentUserUuid, (counts.get(currentUserUuid) || 0) + 1)
+      const s = getOrCreate(currentUserUuid)
+      const ts = toolSets.get(currentUserUuid)!
+      s.total++
+
+      if (msg.kind === 'assistant') {
+        const a = msg as ParsedAssistantMessage
+        s.assistantCount++
+        if (a.usage) {
+          s.inputTokens += a.usage.input_tokens || 0
+          s.outputTokens += a.usage.output_tokens || 0
+        }
+        for (const tc of a.toolCalls) {
+          ts.add(tc.name)
+          if (tc.result?.isError) {
+            s.hasErrors = true
+            s.errorCount++
+          }
+        }
+      } else if (msg.kind === 'system') {
+        s.systemCount++
+      } else if (msg.kind === 'progress') {
+        s.progressCount++
+      }
     }
   }
+
+  // Flatten tool sets into sorted arrays
+  for (const [uuid, ts] of toolSets) {
+    const s = summaries.get(uuid)
+    if (s) s.toolNames = [...ts].sort()
+  }
+
+  return summaries
+})
+
+// Keep simple counts for v-if checks
+const sectionCounts = computed(() => {
+  const counts = new Map<string, number>()
+  for (const [uuid, s] of sectionSummaries.value) {
+    counts.set(uuid, s.total)
+  }
   return counts
 })
 
@@ -226,6 +293,8 @@ const userUuids = computed(() =>
     .map(m => m.uuid)
 )
 
+const autoCollapseEnabled = ref(false)
+
 const allCollapsed = computed(() => {
   const uuids = userUuids.value
   if (uuids.length <= 1) return false
@@ -238,11 +307,20 @@ function collapseAllExceptLast() {
   if (uuids.length <= 1) return
   if (allCollapsed.value) {
     collapsedSections.value = new Set()
+    autoCollapseEnabled.value = false
   } else {
     collapsedSections.value = new Set(uuids.slice(0, -1))
+    autoCollapseEnabled.value = true
   }
 }
 
+// Auto-collapse: when enabled, collapse new sections as they appear
+watch(userUuids, (newUuids) => {
+  if (!autoCollapseEnabled.value) return
+  if (newUuids.length <= 1) return
+  collapsedSections.value = new Set(newUuids.slice(0, -1))
+})
+
 defineExpose({ selectMode, toggleSelectMode, allCollapsed, collapseAllExceptLast })
 
 // Track messages that just resolved from optimistic → real
@@ -428,6 +506,19 @@ function formatDuration(start: string, end: string): string {
         />
         <span class="overlay-value">{{ inputMaxLines ?? 6 }}</span>
       </div>
+      <div class="selector-row">
+        <label class="selector-label">Scroll</label>
+        <input
+          type="range"
+          class="overlay-slider"
+          min="10"
+          max="100"
+          step="5"
+          :value="scrollJumpPercent ?? 50"
+          @input="emit('update:scrollJumpPercent', +($event.target as HTMLInputElement).value)"
+        />
+        <span class="overlay-value">{{ scrollJumpPercent ?? 50 }}%</span>
+      </div>
     </div>
     <div ref="scrollContainer" class="messages-scroll">
       <template
@@ -460,6 +551,7 @@ function formatDuration(start: string, end: string): string {
               :message="msg"
               :collapsed="collapsedSections.has(msg.uuid)"
               :section-count="sectionCounts.get(msg.uuid) || 0"
+              :section-summary="sectionSummaries.get(msg.uuid)"
               @toggle-collapse="toggleCollapse(msg.uuid)"
             />
             <AssistantMessageBubble
@@ -524,8 +616,8 @@ function formatDuration(start: string, end: string): string {
     />
 
     <div class="status-bar">
-      <span v-if="conversation.model" class="meta-badge model">{{ conversation.model }}</span>
+      <span v-if="permissionMode" class="meta-badge mode">{{ permissionMode }}</span>
-      <span v-if="conversation.version" class="meta-badge version">v{{ conversation.version }}</span>
+      <span v-if="displayCwd" class="meta-badge origin" :title="fullCwd">{{ displayCwd }}</span>
       <span class="meta-count">{{ conversation.messages.length }} msgs</span>
       <button class="new-session-status-btn" @click="emit('createSession')" title="New session">
         <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
@@ -774,14 +866,18 @@ function formatDuration(start: string, end: string): string {
   white-space: nowrap;
 }
 
-.meta-badge.model {
+.meta-badge.mode {
-  background: rgba(99, 102, 241, 0.1);
+  background: rgba(34, 197, 94, 0.12);
-  color: var(--accent, #6366f1);
+  color: #86efac;
+  text-transform: lowercase;
 }
 
-.meta-badge.version {
+.meta-badge.origin {
-  background: var(--bg-hover);
+  background: rgba(99, 102, 241, 0.1);
-  color: var(--text-muted);
+  color: var(--accent, #6366f1);
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .meta-duration {

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

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { ParsedUserMessage } from '@/types/transcript-debug'
+import type { ParsedUserMessage, SectionSummary } from '@/types/transcript-debug'
 import MarkdownContent from './MarkdownContent.vue'
 
 const props = defineProps<{
   message: ParsedUserMessage
   collapsed?: boolean
   sectionCount?: number
+  sectionSummary?: SectionSummary
 }>()
 
 const emit = defineEmits<{
@@ -70,6 +71,17 @@ function formatTime(ts: string): string {
   if (!ts) return ''
   return new Date(ts).toLocaleTimeString()
 }
+
+function formatTokens(n: number): string {
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M'
+  if (n >= 1_000) return (n / 1_000).toFixed(1).replace(/\.0$/, '') + 'k'
+  return String(n)
+}
+
+const totalTokens = computed(() => {
+  if (!props.sectionSummary) return 0
+  return props.sectionSummary.inputTokens + props.sectionSummary.outputTokens
+})
 </script>
 
 <template>
@@ -152,7 +164,21 @@ function formatTime(ts: string): string {
           <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
             <polyline :points="collapsed ? '9 18 15 12 9 6' : '6 9 12 15 18 9'" />
           </svg>
-          <span v-if="collapsed" class="collapse-count">{{ sectionCount }}</span>
+          <template v-if="collapsed && sectionSummary">
+            <span class="collapse-count">{{ sectionSummary.total }}</span>
+            <template v-if="sectionSummary.toolNames.length">
+              <span class="badge-sep">|</span>
+              <span v-for="t in sectionSummary.toolNames" :key="t" class="tool-chip">{{ t }}</span>
+            </template>
+            <template v-if="sectionSummary.hasErrors">
+              <span class="badge-sep">|</span>
+              <span class="error-chip">{{ sectionSummary.errorCount }} err</span>
+            </template>
+            <template v-if="totalTokens > 0">
+              <span class="badge-sep">|</span>
+              <span class="token-chip">{{ formatTokens(totalTokens) }} tok</span>
+            </template>
+          </template>
         </button>
         <span class="timestamp">{{ formatTime(message.timestamp) }}</span>
       </div>
@@ -362,7 +388,7 @@ function formatTime(ts: string): string {
 .collapse-btn {
   display: inline-flex;
   align-items: center;
-  gap: 2px;
+  gap: 3px;
   padding: 1px 4px;
   border: none;
   border-radius: 3px;
@@ -370,6 +396,7 @@ function formatTime(ts: string): string {
   cursor: pointer;
   color: var(--text-muted);
   transition: all 0.15s;
+  flex-wrap: wrap;
 }
 
 .collapse-btn:hover {
@@ -392,6 +419,57 @@ function formatTime(ts: string): string {
   color: #818cf8;
 }
 
+.badge-sep {
+  font-size: 9px;
+  color: var(--text-muted);
+  opacity: 0.35;
+  user-select: none;
+}
+
+.tool-chip {
+  font-size: 8px;
+  font-weight: 600;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  color: #818cf8;
+  background: rgba(129, 140, 248, 0.1);
+  padding: 0 3px;
+  border-radius: 3px;
+  line-height: 1.4;
+}
+
+.collapse-btn:hover .tool-chip {
+  color: #a5b4fc;
+  background: rgba(129, 140, 248, 0.18);
+}
+
+.error-chip {
+  font-size: 8px;
+  font-weight: 600;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  color: #f87171;
+  background: rgba(239, 68, 68, 0.12);
+  padding: 0 3px;
+  border-radius: 3px;
+  line-height: 1.4;
+}
+
+.collapse-btn:hover .error-chip {
+  color: #fca5a5;
+  background: rgba(239, 68, 68, 0.2);
+}
+
+.token-chip {
+  font-size: 8px;
+  font-weight: 600;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  color: var(--text-muted);
+  line-height: 1.4;
+}
+
+.collapse-btn:hover .token-chip {
+  color: #818cf8;
+}
+
 /* Optimistic / sending */
 .user-divider.optimistic {
   opacity: 0.6;

frontend/src/types/transcript-debug.ts

@@ -217,6 +217,18 @@ export interface ParsedSystemMessage {
   durationMs?: number
 }
 
+export interface SectionSummary {
+  total: number
+  assistantCount: number
+  systemCount: number
+  progressCount: number
+  toolNames: string[]
+  hasErrors: boolean
+  errorCount: number
+  inputTokens: number
+  outputTokens: number
+}
+
 // ── Terminal slot (persistent terminal registry) ──
 
 export interface TerminalSlot {