feat: Compact transparent tool cards with grouped assistant messages
- Redesign all tool cards (Edit, Read, Bash, Grep, Glob, Write) to be compact single-line headers with inline key info and toggle buttons - Make cards and bubbles fully transparent with subtle color tints - Remove borders, use only left accent bar per card type - Color-code numbers: red for removals, green for additions/counts - Simplify ToolResultBlock to render content directly without toggle - Group consecutive assistant messages, showing header only on first - Remove borders from assistant and user message bubbles
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
import type { ParsedToolCall } from '@/types/transcript-debug'
|
||||
import ToolResultBlock from '../ToolResultBlock.vue'
|
||||
|
||||
@@ -12,159 +12,146 @@ const path = computed(() => (props.call.input?.path as string) || '')
|
||||
|
||||
const isError = computed(() => props.call.result?.isError ?? false)
|
||||
|
||||
// Count files from result
|
||||
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 resultExpanded = 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">
|
||||
<span class="card-icon">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<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>
|
||||
<span v-if="fileCount != null && !isError" class="match-count">{{ fileCount }} files</span>
|
||||
<span v-if="isError" class="error-badge">error</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>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="card-body">
|
||||
<!-- Pattern -->
|
||||
<div class="pattern-row">
|
||||
<code class="pattern-text">{{ pattern }}</code>
|
||||
</div>
|
||||
|
||||
<!-- Path scope -->
|
||||
<div v-if="path" class="scope-row">
|
||||
<span class="scope-badge">
|
||||
<svg width="10" height="10" 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>
|
||||
{{ path.replace(/\\/g, '/').split('/').slice(-3).join('/') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Result -->
|
||||
<ToolResultBlock v-if="call.result" :result="call.result" />
|
||||
<ToolResultBlock v-if="resultExpanded && call.result" :result="call.result" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.glob-card {
|
||||
border: 1px solid rgba(251, 191, 36, 0.25);
|
||||
border-left: 3px solid #fbbf24;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
border-left: 2px solid rgba(251, 191, 36, 0.25);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
margin: 0.5rem 0;
|
||||
background: var(--bg-primary);
|
||||
margin: 0.35rem 0;
|
||||
background: rgba(251, 191, 36, 0.02);
|
||||
}
|
||||
|
||||
.glob-card.error {
|
||||
border-color: rgba(239, 68, 68, 0.25);
|
||||
border-left-color: #ef4444;
|
||||
}
|
||||
.glob-card.error { border-left-color: rgba(239, 68, 68, 0.4); }
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.45rem 0.75rem;
|
||||
background: rgba(251, 191, 36, 0.06);
|
||||
border-bottom: 1px solid rgba(251, 191, 36, 0.12);
|
||||
gap: 0.35rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
background: transparent;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.glob-card.error .card-header {
|
||||
background: rgba(239, 68, 68, 0.06);
|
||||
border-bottom-color: rgba(239, 68, 68, 0.12);
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.glob-card.error .card-icon { color: #ef4444; }
|
||||
.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: 11px;
|
||||
font-weight: 600;
|
||||
color: #fbbf24;
|
||||
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); }
|
||||
|
||||
.glob-card.error .card-label { color: #ef4444; }
|
||||
|
||||
.match-count {
|
||||
margin-left: auto;
|
||||
font-size: 10px;
|
||||
padding: 0.1rem 0.35rem;
|
||||
border-radius: 4px;
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
color: #22c55e;
|
||||
.pattern-inline {
|
||||
font-size: 11px;
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.error-badge {
|
||||
font-size: 10px;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
color: #ef4444;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 0.5rem 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.pattern-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pattern-text {
|
||||
font-size: 12px;
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
color: #fbbf24;
|
||||
background: rgba(251, 191, 36, 0.06);
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(251, 191, 36, 0.12);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.scope-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.scope-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
font-size: 10px;
|
||||
padding: 0.1rem 0.35rem;
|
||||
border-radius: 4px;
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
background: rgba(6, 182, 212, 0.08);
|
||||
color: #06b6d4;
|
||||
color: rgba(251, 191, 36, 0.7);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 280px;
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user