nucleo000/agent-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
josedario87
2026-02-20 19:57:56 -06:00
parent 88a857f645
commit da26bc7b9e
4 changed files with 386 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
frontend/src/components/FloatingTranscriptDebug.vue
View File

@@ -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>

124
frontend/src/components/transcript-debug/ChatContainer.vue
View File

@@ -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,17 +204,70 @@ const sectionMap = computed(() => {
return map
})
// Count of non-leader messages per section
const sectionCounts = computed(() => {
const counts = new Map<string, number>()
// Rich summary of non-leader messages per section
const sectionSummaries = computed(() => {
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="conversation.version" class="meta-badge version">v{{ conversation.version }}</span>
<span v-if="permissionMode" class="meta-badge mode">{{ permissionMode }}</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 {
background: rgba(99, 102, 241, 0.1);
color: var(--accent, #6366f1);
.meta-badge.mode {
background: rgba(34, 197, 94, 0.12);
color: #86efac;
text-transform: lowercase;
}
.meta-badge.version {
background: var(--bg-hover);
color: var(--text-muted);
.meta-badge.origin {
background: rgba(99, 102, 241, 0.1);
color: var(--accent, #6366f1);
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
}
.meta-duration {

84
frontend/src/components/transcript-debug/UserMessageBubble.vue
View File

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

12
frontend/src/types/transcript-debug.ts
View File

@@ -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 {