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/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;