josedario87
c8e8e50fd6
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.
151 lines
3.8 KiB
Vue
151 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed } from 'vue'
|
|
import type { ParsedToolCall } from '@/types/transcript-debug'
|
|
import ToolResultBlock from '../ToolResultBlock.vue'
|
|
|
|
const props = defineProps<{
|
|
call: ParsedToolCall
|
|
}>()
|
|
|
|
const pattern = computed(() => (props.call.input?.pattern as string) || '')
|
|
const path = computed(() => (props.call.input?.path as string) || '')
|
|
|
|
const isError = computed(() => props.call.result?.isError ?? false)
|
|
|
|
const fileCount = computed(() => {
|
|
if (!props.call.result?.content) return null
|
|
const content = props.call.result.content.trim()
|
|
if (!content) return 0
|
|
return content.split('\n').filter(l => l.trim()).length
|
|
})
|
|
|
|
const expanded = ref(false)
|
|
|
|
const shortPath = computed(() => {
|
|
if (!path.value) return ''
|
|
return path.value.replace(/\\/g, '/').split('/').slice(-3).join('/')
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="['glob-card', { error: isError }]">
|
|
<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"/>
|
|
</svg>
|
|
</span>
|
|
<span class="card-label">Glob</span>
|
|
<code class="pattern-inline">{{ pattern }}</code>
|
|
<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>
|
|
</div>
|
|
|
|
<ToolResultBlock v-if="expanded && call.result" :result="call.result" />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.glob-card {
|
|
border: none;
|
|
border-left: 2px solid rgba(251, 191, 36, 0.25);
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
margin: 0.35rem 0;
|
|
background: rgba(251, 191, 36, 0.02);
|
|
}
|
|
|
|
.glob-card.error { border-left-color: rgba(239, 68, 68, 0.4); }
|
|
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
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); }
|
|
|
|
.card-label {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
color: rgba(251, 191, 36, 0.7);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
flex-shrink: 0;
|
|
}
|
|
.glob-card.error .card-label { color: rgba(239, 68, 68, 0.7); }
|
|
|
|
.pattern-inline {
|
|
font-size: 11px;
|
|
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
color: rgba(251, 191, 36, 0.7);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
min-width: 0;
|
|
}
|
|
|
|
.scope-badge {
|
|
font-size: 9px;
|
|
padding: 0.05rem 0.3rem;
|
|
border-radius: 3px;
|
|
font-weight: 600;
|
|
flex-shrink: 0;
|
|
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
background: transparent;
|
|
color: rgba(6, 182, 212, 0.6);
|
|
max-width: 160px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.match-count {
|
|
font-size: 9px;
|
|
padding: 0.05rem 0.3rem;
|
|
border-radius: 3px;
|
|
font-weight: 700;
|
|
flex-shrink: 0;
|
|
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
background: transparent;
|
|
color: rgba(34, 197, 94, 0.7);
|
|
}
|
|
|
|
.error-badge {
|
|
font-size: 9px;
|
|
padding: 0.05rem 0.3rem;
|
|
border-radius: 3px;
|
|
font-weight: 600;
|
|
flex-shrink: 0;
|
|
background: transparent;
|
|
color: rgba(239, 68, 68, 0.7);
|
|
}
|
|
|
|
.header-spacer { flex: 1; }
|
|
|
|
.toggle-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
opacity: 0.5;
|
|
transition: all 0.15s;
|
|
}
|
|
.toggle-btn:hover { opacity: 0.8; }
|
|
.toggle-btn.active { opacity: 1; color: rgba(251, 191, 36, 0.8); }
|
|
</style>
|