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>