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

feat: Animated pixel art ocean floor background for FloatingTranscriptDebug

Browse Source 
Replace galaxy background with animated underwater scene featuring water
depth gradient, pixel art sea floor (sand, seaweed, coral, starfish),
rising bubbles with water sway, and swimming pixel art fish. Also update
transcript-debug tool cards styling and add .claude-*/tasks/ to gitignore.
This commit is contained in:
josedario87
2026-02-19 14:44:25 -06:00
parent 04f3fe053d
commit c8e8e50fd6
12 changed files with 379 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/components/transcript-debug/toolCards/GlobCard.vue
View File

@@ -19,7 +19,7 @@ const fileCount = computed(() => {
return content.split('\n').filter(l => l.trim()).length
})
const resultExpanded = ref(false)
const expanded = ref(false)
const shortPath = computed(() => {
if (!path.value) return ''
@@ -29,7 +29,7 @@ const shortPath = computed(() => {
<template>
<div :class="['glob-card', { error: isError }]">
<div class="card-header">
<div class="card-header" @click.stop="expanded = !expanded">
<span class="card-icon">
<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"/>
@@ -40,18 +40,9 @@ const shortPath = computed(() => {
<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>
<ToolResultBlock v-if="resultExpanded && call.result" :result="call.result" />
<ToolResultBlock v-if="expanded && call.result" :result="call.result" />
</div>
</template>
@@ -74,7 +65,9 @@ const shortPath = computed(() => {
padding: 0.3rem 0.6rem;
background: transparent;
min-height: 28px;
cursor: pointer;
}
.card-header:hover { background: rgba(251, 191, 36, 0.04); }
.card-icon { display: flex; align-items: center; color: rgba(251, 191, 36, 0.6); flex-shrink: 0; }
.glob-card.error .card-icon { color: rgba(239, 68, 68, 0.6); }