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:
@@ -19,6 +19,7 @@ const TASK_TOOLS = new Set(['Task', 'TaskCreate', 'TaskUpdate', 'TaskGet', 'Task
|
||||
|
||||
const props = defineProps<{
|
||||
message: ParsedAssistantMessage
|
||||
showHeader?: boolean
|
||||
}>()
|
||||
|
||||
// Filter out empty text blocks (streaming placeholders)
|
||||
@@ -47,8 +48,8 @@ function formatTokens(n?: number): string {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="assistant-bubble">
|
||||
<div class="bubble-header">
|
||||
<div :class="['assistant-bubble', { continuation: showHeader === false }]">
|
||||
<div v-if="showHeader !== false" class="bubble-header">
|
||||
<span class="role-badge">Assistant</span>
|
||||
<span class="model-badge">{{ message.model }}</span>
|
||||
<span v-if="message.usage" class="token-info">
|
||||
@@ -101,15 +102,19 @@ function formatTokens(n?: number): string {
|
||||
|
||||
<style scoped>
|
||||
.assistant-bubble {
|
||||
background: rgba(34, 197, 94, 0.03);
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
border: 1px solid rgba(34, 197, 94, 0.1);
|
||||
background: transparent;
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 0.75rem 1rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
.assistant-bubble.continuation {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.bubble-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -208,11 +208,12 @@ function formatDuration(start: string, end: string): string {
|
||||
</div>
|
||||
<div ref="scrollContainer" class="messages-scroll">
|
||||
<div
|
||||
v-for="msg in conversation.messages"
|
||||
v-for="(msg, idx) in conversation.messages"
|
||||
:key="msg.uuid"
|
||||
:class="['message-wrapper', {
|
||||
resolved: resolvedUuids.has(msg.uuid),
|
||||
selected: selectedUuids.has(msg.uuid)
|
||||
selected: selectedUuids.has(msg.uuid),
|
||||
'assistant-continuation': msg.kind === 'assistant' && idx > 0 && conversation.messages[idx - 1].kind === 'assistant'
|
||||
}]"
|
||||
>
|
||||
<!-- Select checkbox -->
|
||||
@@ -227,7 +228,7 @@ function formatDuration(start: string, end: string): string {
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div :class="['message-content', { selectable: selectMode && msg.kind !== 'progress' }]" @click="selectMode && msg.kind !== 'progress' ? toggleSelect(msg.uuid) : undefined">
|
||||
<div :class="['message-content', { selectable: selectMode && msg.kind !== 'progress' }]" @click="selectMode && msg.kind !== 'progress' && toggleSelect(msg.uuid)">
|
||||
<UserMessageBubble
|
||||
v-if="msg.kind === 'user'"
|
||||
:message="msg"
|
||||
@@ -235,6 +236,7 @@ function formatDuration(start: string, end: string): string {
|
||||
<AssistantMessageBubble
|
||||
v-else-if="msg.kind === 'assistant'"
|
||||
:message="msg"
|
||||
:show-header="!(idx > 0 && conversation.messages[idx - 1].kind === 'assistant')"
|
||||
/>
|
||||
<ProgressEvent
|
||||
v-else-if="msg.kind === 'progress'"
|
||||
@@ -448,6 +450,11 @@ function formatDuration(start: string, end: string): string {
|
||||
padding: 0.25rem 0.4rem;
|
||||
}
|
||||
|
||||
/* Consecutive assistant messages: tighter spacing */
|
||||
.message-wrapper.assistant-continuation {
|
||||
margin-top: -0.5rem;
|
||||
}
|
||||
|
||||
/* Messages that replaced an optimistic one: smooth settle instead of bounce */
|
||||
.message-wrapper.resolved {
|
||||
animation: resolveIn 0.3s ease-out;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
import type { ParsedToolResult } from '@/types/transcript-debug'
|
||||
import { highlightCode } from '@/utils/markdown'
|
||||
|
||||
@@ -7,113 +7,37 @@ const props = defineProps<{
|
||||
result: ParsedToolResult
|
||||
}>()
|
||||
|
||||
const expanded = ref(false)
|
||||
|
||||
const highlightedContent = computed(() => {
|
||||
const content = props.result.content
|
||||
// Detect JSON
|
||||
const trimmed = content.trim()
|
||||
if ((trimmed.startsWith('{') && trimmed.endsWith('}')) ||
|
||||
(trimmed.startsWith('[') && trimmed.endsWith(']'))) {
|
||||
try {
|
||||
// Re-format + highlight
|
||||
const parsed = JSON.parse(trimmed)
|
||||
return highlightCode(JSON.stringify(parsed, null, 2), 'json')
|
||||
} catch { /* not valid JSON */ }
|
||||
}
|
||||
// Otherwise highlight as generic text
|
||||
return highlightCode(content)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="['tool-result', { error: result.isError }]">
|
||||
<button class="result-toggle" @click="expanded = !expanded">
|
||||
<svg
|
||||
:class="['chevron', { rotated: expanded }]"
|
||||
width="10" height="10" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="2"
|
||||
>
|
||||
<polyline points="9 18 15 12 9 6" />
|
||||
</svg>
|
||||
<span :class="['result-icon', { error: result.isError }]">
|
||||
{{ result.isError ? '✗' : '✓' }}
|
||||
</span>
|
||||
<span class="result-label">Result</span>
|
||||
<span class="result-size">{{ result.content.length }} chars</span>
|
||||
</button>
|
||||
<pre v-if="expanded" class="result-content" v-html="highlightedContent"></pre>
|
||||
</div>
|
||||
<pre class="result-content" v-html="highlightedContent"></pre>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tool-result {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-color);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.tool-result.error {
|
||||
border-color: rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
.result-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
width: 100%;
|
||||
padding: 0.3rem 0.6rem;
|
||||
background: var(--bg-secondary);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--text-secondary);
|
||||
font-size: 11px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.result-toggle:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.chevron {
|
||||
transition: transform 0.2s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chevron.rotated {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.result-icon {
|
||||
font-weight: 600;
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.result-icon.error {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.result-label {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.result-size {
|
||||
margin-left: auto;
|
||||
color: var(--text-muted);
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
}
|
||||
|
||||
.result-content {
|
||||
margin: 0;
|
||||
padding: 0.5rem 0.75rem;
|
||||
padding: 0.35rem 0.6rem;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.45;
|
||||
color: var(--text-secondary);
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
background: var(--bg-primary);
|
||||
background: transparent;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.04);
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -33,10 +33,10 @@ function formatTime(ts: string): string {
|
||||
|
||||
<style scoped>
|
||||
.user-bubble {
|
||||
background: rgba(99, 102, 241, 0.04);
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
border: 1px solid rgba(99, 102, 241, 0.12);
|
||||
background: transparent;
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 0.75rem 1rem;
|
||||
margin-left: 2rem;
|
||||
@@ -51,9 +51,9 @@ function formatTime(ts: string): string {
|
||||
/* Optimistic / sending state */
|
||||
.user-bubble.optimistic {
|
||||
opacity: 0.7;
|
||||
border-color: rgba(99, 102, 241, 0.12);
|
||||
border-color: rgba(99, 102, 241, 0.08);
|
||||
border-style: dashed;
|
||||
background: rgba(99, 102, 241, 0.04);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sending-badge {
|
||||
|
||||
@@ -17,144 +17,171 @@ const isError = computed(() => props.call.result?.isError ?? false)
|
||||
|
||||
const highlightedCommand = computed(() => highlightCode(command.value, 'bash'))
|
||||
|
||||
const outputExpanded = ref(false)
|
||||
const cmdExpanded = ref(false)
|
||||
const resultExpanded = ref(false)
|
||||
|
||||
const cmdPreview = computed(() => {
|
||||
const c = command.value.replace(/\n/g, ' ').trim()
|
||||
return c.length > 60 ? c.slice(0, 60) + '...' : c
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="['bash-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">
|
||||
<polyline points="4 17 10 11 4 5"/>
|
||||
<line x1="12" y1="19" x2="20" y2="19"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="card-label">Bash</span>
|
||||
<span v-if="runInBackground" class="bg-badge">background</span>
|
||||
<span v-if="timeout" class="timeout-badge">{{ timeout }}ms</span>
|
||||
<span v-if="isError" class="error-badge">error</span>
|
||||
<code class="cmd-preview" :title="command">$ {{ cmdPreview }}</code>
|
||||
<span v-if="runInBackground" class="info-badge">bg</span>
|
||||
<span v-if="timeout" class="info-badge">{{ timeout }}ms</span>
|
||||
<span v-if="isError" class="error-badge">err</span>
|
||||
|
||||
<span class="header-spacer"></span>
|
||||
|
||||
<button class="toggle-btn" :class="{ active: cmdExpanded }" @click.stop="cmdExpanded = !cmdExpanded" title="Toggle command">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 3v18M3 12h18"/>
|
||||
</svg>
|
||||
</button>
|
||||
<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>
|
||||
|
||||
<!-- Description -->
|
||||
<div v-if="description" class="description">{{ description }}</div>
|
||||
|
||||
<!-- Command -->
|
||||
<div class="command-section">
|
||||
<div class="command-prompt">$</div>
|
||||
<pre class="command-text" v-html="highlightedCommand"></pre>
|
||||
<!-- Full command -->
|
||||
<div v-if="cmdExpanded" class="command-section">
|
||||
<div v-if="description" class="description">{{ description }}</div>
|
||||
<div class="command-row">
|
||||
<span class="prompt">$</span>
|
||||
<pre class="command-text" v-html="highlightedCommand"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Result -->
|
||||
<ToolResultBlock v-if="call.result" :result="call.result" />
|
||||
<ToolResultBlock v-if="resultExpanded && call.result" :result="call.result" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.bash-card {
|
||||
border: 1px solid rgba(245, 158, 11, 0.25);
|
||||
border-left: 3px solid #f59e0b;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
border-left: 2px solid rgba(245, 158, 11, 0.25);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
margin: 0.5rem 0;
|
||||
background: var(--bg-primary);
|
||||
margin: 0.35rem 0;
|
||||
background: rgba(245, 158, 11, 0.02);
|
||||
}
|
||||
|
||||
.bash-card.error {
|
||||
border-color: rgba(239, 68, 68, 0.25);
|
||||
border-left-color: #ef4444;
|
||||
}
|
||||
.bash-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(245, 158, 11, 0.06);
|
||||
border-bottom: 1px solid rgba(245, 158, 11, 0.12);
|
||||
gap: 0.35rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
background: transparent;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.bash-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: #f59e0b;
|
||||
}
|
||||
|
||||
.bash-card.error .card-icon { color: #ef4444; }
|
||||
.card-icon { display: flex; align-items: center; color: rgba(245, 158, 11, 0.6); flex-shrink: 0; }
|
||||
.bash-card.error .card-icon { color: rgba(239, 68, 68, 0.6); }
|
||||
|
||||
.card-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #f59e0b;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: rgba(245, 158, 11, 0.7);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.bash-card.error .card-label { color: rgba(239, 68, 68, 0.7); }
|
||||
|
||||
.bash-card.error .card-label { color: #ef4444; }
|
||||
|
||||
.bg-badge {
|
||||
font-size: 10px;
|
||||
padding: 0.1rem 0.35rem;
|
||||
border-radius: 4px;
|
||||
background: rgba(99, 102, 241, 0.12);
|
||||
color: #818cf8;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.timeout-badge {
|
||||
font-size: 10px;
|
||||
padding: 0.1rem 0.35rem;
|
||||
border-radius: 4px;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-muted);
|
||||
.cmd-preview {
|
||||
font-size: 11px;
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
margin-left: auto;
|
||||
color: var(--text-secondary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.error-badge {
|
||||
font-size: 10px;
|
||||
padding: 0.1rem 0.4rem;
|
||||
.info-badge, .error-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;
|
||||
}
|
||||
|
||||
.info-badge { color: rgba(245, 158, 11, 0.6); }
|
||||
.error-badge { 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: rgba(239, 68, 68, 0.15);
|
||||
color: #ef4444;
|
||||
font-weight: 500;
|
||||
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(245, 158, 11, 0.8); }
|
||||
|
||||
/* Command expanded */
|
||||
.command-section {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.description {
|
||||
padding: 0.4rem 0.75rem;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 0.25rem 0.6rem;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.command-section {
|
||||
.command-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
gap: 0.4rem;
|
||||
padding: 0.35rem 0.6rem;
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.command-prompt {
|
||||
color: #f59e0b;
|
||||
.prompt {
|
||||
color: rgba(245, 158, 11, 0.7);
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
line-height: 1.5;
|
||||
line-height: 1.45;
|
||||
flex-shrink: 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.command-text {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
font-size: 11px;
|
||||
line-height: 1.45;
|
||||
color: var(--text-primary);
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
|
||||
@@ -27,7 +27,8 @@ const ext = computed(() => {
|
||||
|
||||
const isError = computed(() => props.call.result?.isError ?? false)
|
||||
|
||||
const diffExpanded = ref(true)
|
||||
const diffExpanded = ref(false)
|
||||
const resultExpanded = ref(false)
|
||||
|
||||
const highlightedOld = computed(() => highlightCode(oldString.value, ext.value || undefined))
|
||||
const highlightedNew = computed(() => highlightCode(newString.value, ext.value || undefined))
|
||||
@@ -40,247 +41,165 @@ const newLineCount = computed(() => newString.value.split('\n').length)
|
||||
<div :class="['edit-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="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="card-label">Edit</span>
|
||||
<span class="file-name" :title="filePath">{{ fileName }}</span>
|
||||
<span v-if="ext" class="ext-badge">.{{ ext }}</span>
|
||||
<span v-if="replaceAll" class="replace-all-badge">replace all</span>
|
||||
<span v-if="isError" class="error-badge">error</span>
|
||||
</div>
|
||||
<span v-if="replaceAll" class="replace-all-badge">all</span>
|
||||
<span class="diff-removed">-{{ oldLineCount }}</span>
|
||||
<span class="diff-added">+{{ newLineCount }}</span>
|
||||
<span v-if="isError" class="error-badge">err</span>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="file-path" :title="filePath">
|
||||
<span class="path-dir">{{ filePath.replace(/\\/g, '/').split('/').slice(0, -1).join('/') }}/</span>
|
||||
<span class="path-file">{{ fileName }}</span>
|
||||
</div>
|
||||
<span class="header-spacer"></span>
|
||||
|
||||
<button class="toggle-btn" :class="{ active: diffExpanded }" @click.stop="diffExpanded = !diffExpanded" title="Toggle diff">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 3v18M3 12h18"/>
|
||||
</svg>
|
||||
</button>
|
||||
<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>
|
||||
|
||||
<!-- Diff view -->
|
||||
<div class="diff-section">
|
||||
<button class="diff-toggle" @click="diffExpanded = !diffExpanded">
|
||||
<svg
|
||||
:class="['chevron', { rotated: diffExpanded }]"
|
||||
width="10" height="10" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="2"
|
||||
>
|
||||
<polyline points="9 18 15 12 9 6" />
|
||||
</svg>
|
||||
<span>Changes</span>
|
||||
<span class="diff-meta">-{{ oldLineCount }} +{{ newLineCount }} lines</span>
|
||||
</button>
|
||||
|
||||
<div v-if="diffExpanded" class="diff-content">
|
||||
<!-- Old string (removed) -->
|
||||
<div class="diff-block removed">
|
||||
<div class="diff-label">
|
||||
<span class="diff-sign">-</span>
|
||||
<span>old</span>
|
||||
</div>
|
||||
<pre class="diff-code" v-html="highlightedOld"></pre>
|
||||
</div>
|
||||
|
||||
<!-- New string (added) -->
|
||||
<div class="diff-block added">
|
||||
<div class="diff-label">
|
||||
<span class="diff-sign">+</span>
|
||||
<span>new</span>
|
||||
</div>
|
||||
<pre class="diff-code" v-html="highlightedNew"></pre>
|
||||
</div>
|
||||
<div v-if="diffExpanded" class="diff-content">
|
||||
<div class="diff-block removed">
|
||||
<div class="diff-label"><span class="diff-sign">-</span> old</div>
|
||||
<pre class="diff-code" v-html="highlightedOld"></pre>
|
||||
</div>
|
||||
<div class="diff-block added">
|
||||
<div class="diff-label"><span class="diff-sign">+</span> new</div>
|
||||
<pre class="diff-code" v-html="highlightedNew"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Result -->
|
||||
<ToolResultBlock v-if="call.result" :result="call.result" />
|
||||
<ToolResultBlock v-if="resultExpanded && call.result" :result="call.result" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.edit-card {
|
||||
border: 1px solid rgba(99, 102, 241, 0.25);
|
||||
border-left: 3px solid #6366f1;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
border-left: 2px solid rgba(99, 102, 241, 0.25);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
margin: 0.5rem 0;
|
||||
background: var(--bg-primary);
|
||||
margin: 0.35rem 0;
|
||||
background: rgba(99, 102, 241, 0.02);
|
||||
}
|
||||
|
||||
.edit-card.error {
|
||||
border-color: rgba(239, 68, 68, 0.25);
|
||||
border-left-color: #ef4444;
|
||||
}
|
||||
.edit-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(99, 102, 241, 0.06);
|
||||
border-bottom: 1px solid rgba(99, 102, 241, 0.12);
|
||||
gap: 0.35rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
background: transparent;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.edit-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: #6366f1;
|
||||
}
|
||||
|
||||
.edit-card.error .card-icon { color: #ef4444; }
|
||||
.card-icon { display: flex; align-items: center; color: rgba(99, 102, 241, 0.6); flex-shrink: 0; }
|
||||
.edit-card.error .card-icon { color: rgba(239, 68, 68, 0.6); }
|
||||
|
||||
.card-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #6366f1;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: rgba(99, 102, 241, 0.7);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.edit-card.error .card-label { color: rgba(239, 68, 68, 0.7); }
|
||||
|
||||
.edit-card.error .card-label { color: #ef4444; }
|
||||
|
||||
.ext-badge {
|
||||
font-size: 10px;
|
||||
padding: 0.1rem 0.35rem;
|
||||
border-radius: 4px;
|
||||
background: rgba(99, 102, 241, 0.12);
|
||||
color: #818cf8;
|
||||
.file-name {
|
||||
font-size: 11px;
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.replace-all-badge {
|
||||
font-size: 10px;
|
||||
padding: 0.1rem 0.35rem;
|
||||
border-radius: 4px;
|
||||
background: rgba(251, 191, 36, 0.12);
|
||||
color: #fbbf24;
|
||||
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;
|
||||
}
|
||||
|
||||
.file-path {
|
||||
font-size: 12px;
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
line-height: 1.4;
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.path-dir { color: var(--text-muted); }
|
||||
.path-file { color: var(--text-primary); font-weight: 600; }
|
||||
|
||||
/* Diff section */
|
||||
.diff-section {
|
||||
border-top: 1px solid var(--border-color);
|
||||
.ext-badge, .replace-all-badge, .diff-removed, .diff-added, .error-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;
|
||||
}
|
||||
|
||||
.diff-toggle {
|
||||
.ext-badge { color: rgba(99, 102, 241, 0.5); }
|
||||
.replace-all-badge { color: rgba(251, 191, 36, 0.7); }
|
||||
.diff-removed { color: rgba(239, 68, 68, 0.7); }
|
||||
.diff-added { color: rgba(34, 197, 94, 0.7); }
|
||||
.error-badge { color: rgba(239, 68, 68, 0.7); }
|
||||
|
||||
.header-spacer { flex: 1; }
|
||||
|
||||
.toggle-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
width: 100%;
|
||||
padding: 0.35rem 0.75rem;
|
||||
background: transparent;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--text-secondary);
|
||||
font-size: 11px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.diff-toggle:hover { background: var(--bg-hover); }
|
||||
|
||||
.diff-meta {
|
||||
margin-left: auto;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.chevron {
|
||||
transition: transform 0.2s;
|
||||
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(99, 102, 241, 0.8); }
|
||||
|
||||
.chevron.rotated { transform: rotate(90deg); }
|
||||
/* Diff */
|
||||
.diff-content { border-top: 1px solid rgba(255, 255, 255, 0.04); }
|
||||
|
||||
.diff-content {
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.diff-block {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.diff-block:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.diff-block { border-bottom: 1px solid rgba(255, 255, 255, 0.03); }
|
||||
.diff-block:last-child { border-bottom: none; }
|
||||
|
||||
.diff-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
padding: 0.2rem 0.75rem;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
gap: 0.25rem;
|
||||
padding: 0.15rem 0.6rem;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.diff-block.removed .diff-label {
|
||||
background: rgba(239, 68, 68, 0.06);
|
||||
color: #ef4444;
|
||||
}
|
||||
.diff-block.removed .diff-label { background: transparent; color: rgba(239, 68, 68, 0.6); }
|
||||
.diff-block.added .diff-label { background: transparent; color: rgba(34, 197, 94, 0.6); }
|
||||
|
||||
.diff-block.added .diff-label {
|
||||
background: rgba(34, 197, 94, 0.06);
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.diff-sign {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
}
|
||||
.diff-sign { font-size: 12px; font-weight: 700; font-family: 'SF Mono', 'Fira Code', monospace; }
|
||||
|
||||
.diff-code {
|
||||
margin: 0;
|
||||
padding: 0.5rem 0.75rem;
|
||||
padding: 0.35rem 0.6rem;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
line-height: 1.45;
|
||||
color: var(--text-secondary);
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
max-height: 200px;
|
||||
max-height: 180px;
|
||||
overflow-y: auto;
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
}
|
||||
|
||||
.diff-block.removed .diff-code {
|
||||
background: rgba(239, 68, 68, 0.03);
|
||||
}
|
||||
|
||||
.diff-block.added .diff-code {
|
||||
background: rgba(34, 197, 94, 0.03);
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -47,7 +47,7 @@ const isError = computed(() => props.call.result?.isError ?? false)
|
||||
</div>
|
||||
|
||||
<div v-if="planText" class="card-body">
|
||||
<button class="plan-toggle" @click="expanded = !expanded">
|
||||
<button class="plan-toggle" @click.stop="expanded = !expanded">
|
||||
<svg
|
||||
:class="['chevron', { rotated: expanded }]"
|
||||
width="10" height="10" viewBox="0 0 24 24"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -28,7 +28,6 @@ const context = computed(() => {
|
||||
|
||||
const isError = computed(() => props.call.result?.isError ?? false)
|
||||
|
||||
// Count matches from result
|
||||
const matchCount = computed(() => {
|
||||
if (!props.call.result?.content) return null
|
||||
const content = props.call.result.content.trim()
|
||||
@@ -36,193 +35,185 @@ const matchCount = computed(() => {
|
||||
return content.split('\n').filter(l => l.trim()).length
|
||||
})
|
||||
|
||||
const flags = computed(() => {
|
||||
let f = ''
|
||||
if (caseInsensitive.value) f += 'i'
|
||||
if (multiline.value) f += 'm'
|
||||
return f
|
||||
})
|
||||
|
||||
const detailsExpanded = ref(false)
|
||||
const resultExpanded = ref(false)
|
||||
|
||||
const shortPath = computed(() => {
|
||||
if (!path.value) return ''
|
||||
return path.value.replace(/\\/g, '/').split('/').slice(-2).join('/')
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="['grep-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">
|
||||
<circle cx="11" cy="11" r="8"/>
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="card-label">Grep</span>
|
||||
<span class="mode-badge">{{ outputMode }}</span>
|
||||
<span v-if="matchCount != null && !isError" class="match-count">{{ matchCount }} matches</span>
|
||||
<span v-if="isError" class="error-badge">error</span>
|
||||
<code class="pattern-inline">/{{ pattern }}/{{ flags }}</code>
|
||||
<span v-if="glob" class="scope-badge">{{ glob }}</span>
|
||||
<span v-if="type" class="scope-badge type">{{ type }}</span>
|
||||
<span v-if="matchCount != null && !isError" class="match-count">{{ matchCount }}</span>
|
||||
<span v-if="isError" class="error-badge">err</span>
|
||||
|
||||
<span class="header-spacer"></span>
|
||||
|
||||
<button v-if="path || context || headLimit || outputMode !== 'files_with_matches'" class="toggle-btn" :class="{ active: detailsExpanded }" @click.stop="detailsExpanded = !detailsExpanded" title="Toggle details">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>
|
||||
</svg>
|
||||
</button>
|
||||
<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 }}/{{ caseInsensitive ? 'i' : '' }}{{ multiline ? 'm' : '' }}</code>
|
||||
</div>
|
||||
|
||||
<!-- Search scope -->
|
||||
<div class="scope-row">
|
||||
<span v-if="path" class="scope-badge path" :title="path">
|
||||
<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(-2).join('/') }}
|
||||
</span>
|
||||
<span v-if="glob" class="scope-badge glob">{{ glob }}</span>
|
||||
<span v-if="type" class="scope-badge type">{{ type }}</span>
|
||||
<span v-if="context" class="scope-badge ctx">{{ context }}</span>
|
||||
<span v-if="headLimit" class="scope-badge limit">head {{ headLimit }}</span>
|
||||
</div>
|
||||
<!-- Details row -->
|
||||
<div v-if="detailsExpanded" class="details-row">
|
||||
<span v-if="path" class="detail-badge path" :title="path">{{ shortPath }}</span>
|
||||
<span v-if="outputMode !== 'files_with_matches'" class="detail-badge">{{ outputMode }}</span>
|
||||
<span v-if="context" class="detail-badge">{{ context }}</span>
|
||||
<span v-if="headLimit" class="detail-badge">head {{ headLimit }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Result -->
|
||||
<ToolResultBlock v-if="call.result" :result="call.result" />
|
||||
<ToolResultBlock v-if="resultExpanded && call.result" :result="call.result" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.grep-card {
|
||||
border: 1px solid rgba(236, 72, 153, 0.25);
|
||||
border-left: 3px solid #ec4899;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
border-left: 2px solid rgba(236, 72, 153, 0.25);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
margin: 0.5rem 0;
|
||||
background: var(--bg-primary);
|
||||
margin: 0.35rem 0;
|
||||
background: rgba(236, 72, 153, 0.02);
|
||||
}
|
||||
|
||||
.grep-card.error {
|
||||
border-color: rgba(239, 68, 68, 0.25);
|
||||
border-left-color: #ef4444;
|
||||
}
|
||||
.grep-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(236, 72, 153, 0.06);
|
||||
border-bottom: 1px solid rgba(236, 72, 153, 0.12);
|
||||
gap: 0.35rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
background: transparent;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.grep-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: #ec4899;
|
||||
}
|
||||
|
||||
.grep-card.error .card-icon { color: #ef4444; }
|
||||
.card-icon { display: flex; align-items: center; color: rgba(236, 72, 153, 0.6); flex-shrink: 0; }
|
||||
.grep-card.error .card-icon { color: rgba(239, 68, 68, 0.6); }
|
||||
|
||||
.card-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #ec4899;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: rgba(236, 72, 153, 0.7);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.grep-card.error .card-label { color: rgba(239, 68, 68, 0.7); }
|
||||
|
||||
.grep-card.error .card-label { color: #ef4444; }
|
||||
|
||||
.mode-badge {
|
||||
font-size: 10px;
|
||||
padding: 0.1rem 0.35rem;
|
||||
border-radius: 4px;
|
||||
background: rgba(236, 72, 153, 0.1);
|
||||
color: #ec4899;
|
||||
.pattern-inline {
|
||||
font-size: 11px;
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.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;
|
||||
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: #f472b6;
|
||||
background: rgba(236, 72, 153, 0.06);
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(236, 72, 153, 0.12);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.scope-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
flex-wrap: wrap;
|
||||
color: rgba(244, 114, 182, 0.7);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.scope-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
font-size: 10px;
|
||||
padding: 0.1rem 0.35rem;
|
||||
border-radius: 4px;
|
||||
font-size: 9px;
|
||||
padding: 0.05rem 0.3rem;
|
||||
border-radius: 3px;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
white-space: nowrap;
|
||||
background: transparent;
|
||||
color: rgba(251, 191, 36, 0.6);
|
||||
max-width: 120px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 220px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.scope-badge.path {
|
||||
background: rgba(6, 182, 212, 0.08);
|
||||
color: #06b6d4;
|
||||
.scope-badge.type { color: rgba(129, 140, 248, 0.7); }
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.scope-badge.glob {
|
||||
background: rgba(251, 191, 36, 0.08);
|
||||
color: #fbbf24;
|
||||
.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);
|
||||
}
|
||||
|
||||
.scope-badge.type {
|
||||
background: rgba(99, 102, 241, 0.08);
|
||||
color: #818cf8;
|
||||
.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(236, 72, 153, 0.8); }
|
||||
|
||||
/* Details */
|
||||
.details-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
padding: 0.2rem 0.6rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.04);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.scope-badge.ctx {
|
||||
background: var(--bg-secondary);
|
||||
.detail-badge {
|
||||
font-size: 9px;
|
||||
padding: 0.05rem 0.3rem;
|
||||
border-radius: 3px;
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.scope-badge.limit {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.detail-badge.path { color: rgba(6, 182, 212, 0.6); }
|
||||
</style>
|
||||
|
||||
@@ -20,7 +20,6 @@ const pages = computed(() => props.call.input?.pages as string | undefined)
|
||||
|
||||
const isError = computed(() => props.call.result?.isError ?? false)
|
||||
|
||||
// Detect file extension for icon hint
|
||||
const ext = computed(() => {
|
||||
const name = fileName.value
|
||||
const dot = name.lastIndexOf('.')
|
||||
@@ -34,136 +33,109 @@ const resultExpanded = ref(false)
|
||||
<div :class="['read-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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14 2 14 8 20 8"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="card-label">Read</span>
|
||||
<span class="file-name" :title="filePath">{{ fileName }}</span>
|
||||
<span v-if="ext" class="ext-badge">.{{ ext }}</span>
|
||||
<span v-if="isError" class="error-badge">error</span>
|
||||
<span v-if="offset != null" class="info-badge">@{{ offset }}</span>
|
||||
<span v-if="limit != null" class="info-badge">{{ limit }}L</span>
|
||||
<span v-if="pages" class="info-badge">p{{ pages }}</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">
|
||||
<div class="file-path" :title="filePath">
|
||||
<span class="path-dir">{{ filePath.replace(/\\/g, '/').split('/').slice(0, -1).join('/') }}/</span>
|
||||
<span class="path-file">{{ fileName }}</span>
|
||||
</div>
|
||||
<div v-if="offset != null || limit != null || pages" class="range-info">
|
||||
<span v-if="offset != null" class="range-badge">offset: {{ offset }}</span>
|
||||
<span v-if="limit != null" class="range-badge">limit: {{ limit }}</span>
|
||||
<span v-if="pages" class="range-badge">pages: {{ pages }}</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>
|
||||
.read-card {
|
||||
border: 1px solid rgba(6, 182, 212, 0.25);
|
||||
border-left: 3px solid #06b6d4;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
border-left: 2px solid rgba(6, 182, 212, 0.25);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
margin: 0.5rem 0;
|
||||
background: var(--bg-primary);
|
||||
margin: 0.35rem 0;
|
||||
background: rgba(6, 182, 212, 0.02);
|
||||
}
|
||||
|
||||
.read-card.error {
|
||||
border-color: rgba(239, 68, 68, 0.25);
|
||||
border-left-color: #ef4444;
|
||||
}
|
||||
.read-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(6, 182, 212, 0.06);
|
||||
border-bottom: 1px solid rgba(6, 182, 212, 0.12);
|
||||
gap: 0.35rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
background: transparent;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.read-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: #06b6d4;
|
||||
}
|
||||
|
||||
.read-card.error .card-icon { color: #ef4444; }
|
||||
.card-icon { display: flex; align-items: center; color: rgba(6, 182, 212, 0.6); flex-shrink: 0; }
|
||||
.read-card.error .card-icon { color: rgba(239, 68, 68, 0.6); }
|
||||
|
||||
.card-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #06b6d4;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: rgba(6, 182, 212, 0.7);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.read-card.error .card-label { color: rgba(239, 68, 68, 0.7); }
|
||||
|
||||
.read-card.error .card-label { color: #ef4444; }
|
||||
|
||||
.ext-badge {
|
||||
font-size: 10px;
|
||||
padding: 0.1rem 0.35rem;
|
||||
border-radius: 4px;
|
||||
background: rgba(6, 182, 212, 0.12);
|
||||
color: #06b6d4;
|
||||
.file-name {
|
||||
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.3rem;
|
||||
}
|
||||
|
||||
.file-path {
|
||||
font-size: 12px;
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
line-height: 1.4;
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.path-dir {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.path-file {
|
||||
color: var(--text-primary);
|
||||
.ext-badge, .info-badge, .error-badge {
|
||||
font-size: 9px;
|
||||
padding: 0.05rem 0.3rem;
|
||||
border-radius: 3px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.range-info {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.range-badge {
|
||||
font-size: 10px;
|
||||
padding: 0.1rem 0.35rem;
|
||||
border-radius: 4px;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-muted);
|
||||
flex-shrink: 0;
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.ext-badge { color: rgba(6, 182, 212, 0.5); }
|
||||
.info-badge { color: rgba(6, 182, 212, 0.6); }
|
||||
.error-badge { 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(6, 182, 212, 0.8); }
|
||||
</style>
|
||||
|
||||
@@ -8,11 +8,9 @@ const props = defineProps<{
|
||||
}>()
|
||||
|
||||
const isError = computed(() => props.call.result?.isError ?? false)
|
||||
|
||||
// Detect which Task-family tool this is
|
||||
const toolName = computed(() => props.call.name)
|
||||
|
||||
// Common fields across Task tools
|
||||
// Common fields
|
||||
const taskId = computed(() => (props.call.input?.taskId as string) || '')
|
||||
const subject = computed(() => (props.call.input?.subject as string) || '')
|
||||
const description = computed(() => (props.call.input?.description as string) || '')
|
||||
@@ -20,338 +18,341 @@ const activeForm = computed(() => (props.call.input?.activeForm as string) || ''
|
||||
const status = computed(() => (props.call.input?.status as string) || '')
|
||||
const prompt = computed(() => (props.call.input?.prompt as string) || '')
|
||||
const subagentType = computed(() => (props.call.input?.subagent_type as string) || '')
|
||||
|
||||
// For Task (subagent launcher)
|
||||
const taskDescription = computed(() => (props.call.input?.description as string) || '')
|
||||
const model = computed(() => (props.call.input?.model as string) || '')
|
||||
const runInBackground = computed(() => props.call.input?.run_in_background as boolean | undefined)
|
||||
|
||||
// Status styling
|
||||
const statusColor = computed(() => {
|
||||
switch (status.value) {
|
||||
// Toggles
|
||||
const showPrompt = ref(false)
|
||||
const showResult = ref(false)
|
||||
const showDesc = ref(false)
|
||||
|
||||
// ---- Extract main topics from result ----
|
||||
interface TopicItem {
|
||||
label: string
|
||||
status?: string // for TaskList JSON items
|
||||
id?: string
|
||||
}
|
||||
|
||||
const mainTopics = computed<TopicItem[]>(() => {
|
||||
if (!props.call.result?.content) return []
|
||||
const content = props.call.result.content.trim()
|
||||
|
||||
// 1) Try JSON (TaskList array / TaskGet single object)
|
||||
try {
|
||||
const data = JSON.parse(content)
|
||||
if (Array.isArray(data)) {
|
||||
return data.map((t: any) => ({
|
||||
label: t.subject || t.description || JSON.stringify(t).slice(0, 60),
|
||||
status: t.status,
|
||||
id: t.id,
|
||||
}))
|
||||
}
|
||||
if (data && typeof data === 'object' && (data.subject || data.id)) {
|
||||
return [{
|
||||
label: data.subject || data.description || '',
|
||||
status: data.status,
|
||||
id: data.id,
|
||||
}]
|
||||
}
|
||||
} catch { /* not JSON, parse as text */ }
|
||||
|
||||
// 2) Text result: extract headings, numbered/bullet lists, bold items
|
||||
const lines = content.split('\n')
|
||||
const topics: TopicItem[] = []
|
||||
const seen = new Set<string>()
|
||||
|
||||
for (const raw of lines) {
|
||||
const line = raw.trim()
|
||||
if (!line) continue
|
||||
|
||||
let label = ''
|
||||
// Markdown headings: ## Foo or ### Foo
|
||||
if (/^#{1,4}\s+/.test(line)) {
|
||||
label = line.replace(/^#+\s+/, '').replace(/\*\*/g, '').trim()
|
||||
}
|
||||
// Numbered list: 1. Foo, 2. Foo
|
||||
else if (/^\d+[\.\)]\s+/.test(line)) {
|
||||
label = line.replace(/^\d+[\.\)]\s+/, '').replace(/\*\*/g, '').trim()
|
||||
}
|
||||
// Bullet list: - Foo, * Foo
|
||||
else if (/^[-*]\s+/.test(line)) {
|
||||
label = line.replace(/^[-*]\s+/, '').replace(/\*\*/g, '').trim()
|
||||
}
|
||||
|
||||
if (label && label.length > 2 && !seen.has(label)) {
|
||||
seen.add(label)
|
||||
topics.push({ label: label.length > 90 ? label.slice(0, 90) + '...' : label })
|
||||
}
|
||||
if (topics.length >= 12) break
|
||||
}
|
||||
return topics
|
||||
})
|
||||
|
||||
const hasTopics = computed(() => mainTopics.value.length > 0)
|
||||
|
||||
// Status helpers
|
||||
const statusColorFor = (s: string) => {
|
||||
switch (s) {
|
||||
case 'completed': return '#22c55e'
|
||||
case 'in_progress': return '#f59e0b'
|
||||
case 'pending': return '#64748b'
|
||||
case 'deleted': return '#ef4444'
|
||||
default: return '#64748b'
|
||||
default: return 'var(--card-color)'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const statusColor = computed(() => statusColorFor(status.value))
|
||||
const statusIcon = computed(() => {
|
||||
switch (status.value) {
|
||||
case 'completed': return '✓'
|
||||
case 'in_progress': return '→'
|
||||
case 'pending': return '○'
|
||||
case 'deleted': return '✗'
|
||||
default: return '•'
|
||||
case 'completed': return '\u2713'
|
||||
case 'in_progress': return '\u25CF'
|
||||
case 'pending': return '\u25CB'
|
||||
case 'deleted': return '\u2717'
|
||||
default: return '\u2022'
|
||||
}
|
||||
})
|
||||
|
||||
// Card color based on tool
|
||||
// Card color
|
||||
const cardColor = computed(() => {
|
||||
switch (toolName.value) {
|
||||
case 'Task': return '#0ea5e9' // blue - agent launch
|
||||
case 'TaskCreate': return '#22c55e' // green - create
|
||||
case 'TaskUpdate': return '#a855f7' // purple - update
|
||||
case 'TaskGet': return '#06b6d4' // cyan - read
|
||||
case 'TaskList': return '#64748b' // gray - list
|
||||
case 'Task': return '#0ea5e9'
|
||||
case 'TaskCreate': return '#22c55e'
|
||||
case 'TaskUpdate': return '#a855f7'
|
||||
case 'TaskGet': return '#06b6d4'
|
||||
case 'TaskList': return '#64748b'
|
||||
default: return '#64748b'
|
||||
}
|
||||
})
|
||||
|
||||
const cardIcon = computed(() => toolName.value)
|
||||
const hasDesc = computed(() => description.value.length > 0)
|
||||
const hasPrompt = computed(() => prompt.value.length > 0)
|
||||
const hasResult = computed(() => !!props.call.result)
|
||||
|
||||
const descExpanded = ref(false)
|
||||
const promptExpanded = ref(false)
|
||||
// Brief for body (only when no topics to show)
|
||||
const descBrief = computed(() => {
|
||||
if (!description.value) return ''
|
||||
const first = description.value.split('\n')[0]
|
||||
return first.length > 80 ? first.slice(0, 80) + '...' : first
|
||||
})
|
||||
|
||||
const hasBody = computed(() =>
|
||||
subject.value || activeForm.value || (!hasTopics.value && descBrief.value)
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="['task-card', { error: isError }]" :style="{ '--card-color': cardColor }">
|
||||
<!-- HEADER -->
|
||||
<div class="card-header">
|
||||
<span class="card-icon">
|
||||
<!-- Task (subagent) -->
|
||||
<svg v-if="toolName === 'Task'" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
|
||||
<svg v-if="toolName === 'Task'" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
|
||||
</svg>
|
||||
<!-- TaskCreate -->
|
||||
<svg v-else-if="toolName === 'TaskCreate'" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<line x1="12" y1="8" x2="12" y2="16"/>
|
||||
<line x1="8" y1="12" x2="16" y2="12"/>
|
||||
<svg v-else-if="toolName === 'TaskCreate'" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/>
|
||||
</svg>
|
||||
<!-- TaskUpdate -->
|
||||
<svg v-else-if="toolName === 'TaskUpdate'" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M9 11l3 3L22 4"/>
|
||||
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
|
||||
<svg v-else-if="toolName === 'TaskUpdate'" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
|
||||
</svg>
|
||||
<!-- TaskGet -->
|
||||
<svg v-else-if="toolName === 'TaskGet'" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="11" cy="11" r="8"/>
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||
<svg v-else-if="toolName === 'TaskGet'" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||
</svg>
|
||||
<!-- TaskList -->
|
||||
<svg v-else width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="8" y1="6" x2="21" y2="6"/>
|
||||
<line x1="8" y1="12" x2="21" y2="12"/>
|
||||
<line x1="8" y1="18" x2="21" y2="18"/>
|
||||
<line x1="3" y1="6" x2="3.01" y2="6"/>
|
||||
<line x1="3" y1="12" x2="3.01" y2="12"/>
|
||||
<line x1="3" y1="18" x2="3.01" y2="18"/>
|
||||
<svg v-else width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/>
|
||||
<line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="card-label">{{ toolName }}</span>
|
||||
<span v-if="taskId" class="id-badge">#{{ taskId }}</span>
|
||||
<span v-if="status" class="status-badge" :style="{ color: statusColor, borderColor: statusColor, background: statusColor + '15' }">
|
||||
<span class="status-icon">{{ statusIcon }}</span>{{ status }}
|
||||
</span>
|
||||
<span v-if="subagentType" class="agent-badge">{{ subagentType }}</span>
|
||||
<span v-if="model" class="model-badge">{{ model }}</span>
|
||||
<span v-if="runInBackground" class="bg-badge">background</span>
|
||||
<span v-if="isError" class="error-badge">error</span>
|
||||
<span v-if="runInBackground" class="bg-badge">bg</span>
|
||||
<span v-if="isError" class="error-badge">err</span>
|
||||
|
||||
<span class="header-spacer" />
|
||||
|
||||
<!-- Toggle buttons -->
|
||||
<button v-if="hasDesc" class="toggle-btn" :class="{ active: showDesc }" @click.stop="showDesc = !showDesc" title="Description">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button v-if="hasPrompt" class="toggle-btn" :class="{ active: showPrompt }" @click.stop="showPrompt = !showPrompt" title="Prompt">
|
||||
<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>
|
||||
<button v-if="hasResult" class="toggle-btn" :class="{ active: showResult }" @click.stop="showResult = !showResult" title="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">
|
||||
<!-- Status (TaskUpdate) -->
|
||||
<div v-if="status" class="field-row">
|
||||
<span class="field-label">Status</span>
|
||||
<span class="status-badge" :style="{ color: statusColor, borderColor: statusColor, background: statusColor + '15' }">
|
||||
<span class="status-icon">{{ statusIcon }}</span>
|
||||
{{ status }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- BODY: subject / brief -->
|
||||
<div v-if="hasBody" class="card-body">
|
||||
<span v-if="subject" class="topic subject-topic">{{ subject }}</span>
|
||||
<span v-if="activeForm" class="topic active-topic">{{ activeForm }}</span>
|
||||
<span v-if="!subject && !hasTopics && descBrief" class="topic desc-topic">{{ descBrief }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Subject (TaskCreate/TaskUpdate) -->
|
||||
<div v-if="subject" class="field-row">
|
||||
<span class="field-label">Subject</span>
|
||||
<span class="field-value subject">{{ subject }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Active form -->
|
||||
<div v-if="activeForm" class="field-row">
|
||||
<span class="field-label">Active</span>
|
||||
<span class="field-value active-form">{{ activeForm }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Description (collapsible for long text) -->
|
||||
<div v-if="description && description.length <= 120" class="field-row">
|
||||
<span class="field-label">Desc</span>
|
||||
<span class="field-value desc-text">{{ description }}</span>
|
||||
</div>
|
||||
<div v-else-if="description" class="collapsible-section">
|
||||
<button class="section-toggle" @click="descExpanded = !descExpanded">
|
||||
<svg :class="['chevron', { rotated: descExpanded }]" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6" />
|
||||
</svg>
|
||||
<span>Description</span>
|
||||
<span class="section-meta">{{ description.length }} chars</span>
|
||||
</button>
|
||||
<pre v-if="descExpanded" class="section-content">{{ description }}</pre>
|
||||
</div>
|
||||
|
||||
<!-- Prompt (Task subagent) -->
|
||||
<div v-if="prompt && prompt.length <= 120" class="field-row">
|
||||
<span class="field-label">Prompt</span>
|
||||
<span class="field-value desc-text">{{ prompt }}</span>
|
||||
</div>
|
||||
<div v-else-if="prompt" class="collapsible-section">
|
||||
<button class="section-toggle" @click="promptExpanded = !promptExpanded">
|
||||
<svg :class="['chevron', { rotated: promptExpanded }]" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6" />
|
||||
</svg>
|
||||
<span>Prompt</span>
|
||||
<span class="section-meta">{{ prompt.length }} chars</span>
|
||||
</button>
|
||||
<pre v-if="promptExpanded" class="section-content">{{ prompt }}</pre>
|
||||
<!-- MAIN TOPICS: always visible bullets -->
|
||||
<div v-if="hasTopics" class="topic-list">
|
||||
<div v-for="(t, i) in mainTopics" :key="i" class="topic-item">
|
||||
<span class="topic-dot" :style="t.status ? { color: statusColorFor(t.status) } : {}">●</span>
|
||||
<span v-if="t.id" class="topic-id">#{{ t.id }}</span>
|
||||
<span class="topic-label">{{ t.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Result -->
|
||||
<ToolResultBlock v-if="call.result" :result="call.result" />
|
||||
<!-- EXPANDED: Description -->
|
||||
<div v-if="showDesc && description" class="expand-section">
|
||||
<pre class="expand-content">{{ description }}</pre>
|
||||
</div>
|
||||
|
||||
<!-- EXPANDED: Prompt -->
|
||||
<div v-if="showPrompt && prompt" class="expand-section">
|
||||
<pre class="expand-content">{{ prompt }}</pre>
|
||||
</div>
|
||||
|
||||
<!-- EXPANDED: Raw result -->
|
||||
<div v-if="showResult && call.result" class="expand-section result-section">
|
||||
<ToolResultBlock :result="call.result" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.task-card {
|
||||
border: 1px solid color-mix(in srgb, var(--card-color) 25%, transparent);
|
||||
border-left: 3px solid var(--card-color);
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
border-left: 2px solid color-mix(in srgb, var(--card-color) 25%, transparent);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
margin: 0.5rem 0;
|
||||
background: var(--bg-primary);
|
||||
margin: 0.35rem 0;
|
||||
background: color-mix(in srgb, var(--card-color) 2%, transparent);
|
||||
}
|
||||
|
||||
.task-card.error {
|
||||
border-color: rgba(239, 68, 68, 0.25);
|
||||
border-left-color: #ef4444;
|
||||
}
|
||||
.task-card.error { border-left-color: rgba(239, 68, 68, 0.4); }
|
||||
|
||||
/* Header */
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.45rem 0.75rem;
|
||||
background: color-mix(in srgb, var(--card-color) 6%, transparent);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--card-color) 12%, transparent);
|
||||
gap: 0.35rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
background: transparent;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.task-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: var(--card-color);
|
||||
}
|
||||
|
||||
.task-card.error .card-icon { color: #ef4444; }
|
||||
.card-icon { display: flex; align-items: center; color: color-mix(in srgb, var(--card-color) 60%, transparent); flex-shrink: 0; }
|
||||
.task-card.error .card-icon { color: rgba(239, 68, 68, 0.6); }
|
||||
|
||||
.card-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--card-color);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-size: 10px; font-weight: 700; color: color-mix(in srgb, var(--card-color) 70%, transparent);
|
||||
text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0;
|
||||
}
|
||||
.task-card.error .card-label { color: rgba(239, 68, 68, 0.7); }
|
||||
|
||||
.task-card.error .card-label { color: #ef4444; }
|
||||
.header-spacer { flex: 1; }
|
||||
|
||||
.id-badge {
|
||||
font-size: 11px;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
background: color-mix(in srgb, var(--card-color) 12%, transparent);
|
||||
color: var(--card-color);
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.agent-badge {
|
||||
font-size: 10px;
|
||||
padding: 0.1rem 0.35rem;
|
||||
border-radius: 4px;
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
color: #818cf8;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.model-badge {
|
||||
font-size: 10px;
|
||||
padding: 0.1rem 0.35rem;
|
||||
border-radius: 4px;
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
color: var(--accent, #6366f1);
|
||||
/* Badges */
|
||||
.id-badge, .agent-badge, .model-badge, .bg-badge, .error-badge, .status-badge {
|
||||
font-size: 9px; padding: 0.05rem 0.3rem; border-radius: 3px;
|
||||
font-weight: 600; flex-shrink: 0; background: transparent;
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
}
|
||||
|
||||
.bg-badge {
|
||||
font-size: 10px;
|
||||
padding: 0.1rem 0.35rem;
|
||||
border-radius: 4px;
|
||||
background: rgba(99, 102, 241, 0.12);
|
||||
color: #818cf8;
|
||||
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;
|
||||
}
|
||||
|
||||
.field-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
min-width: 45px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.id-badge { color: color-mix(in srgb, var(--card-color) 60%, transparent); }
|
||||
.agent-badge { color: rgba(129, 140, 248, 0.7); font-family: inherit; }
|
||||
.model-badge { color: color-mix(in srgb, var(--card-color) 50%, transparent); }
|
||||
.bg-badge { color: rgba(129, 140, 248, 0.6); font-family: inherit; }
|
||||
.error-badge { color: rgba(239, 68, 68, 0.7); }
|
||||
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 0.15rem 0.45rem;
|
||||
border: 1px solid;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.status-icon { font-size: 12px; }
|
||||
|
||||
.field-value {
|
||||
font-size: 12px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.field-value.subject { font-weight: 500; }
|
||||
.field-value.active-form { font-style: italic; color: var(--text-secondary); }
|
||||
.field-value.desc-text { font-size: 11px; color: var(--text-muted); line-height: 1.3; }
|
||||
|
||||
/* Collapsible sections */
|
||||
.collapsible-section {
|
||||
border-top: 1px solid var(--border-color);
|
||||
margin: 0 -0.75rem;
|
||||
}
|
||||
|
||||
.section-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
width: 100%;
|
||||
padding: 0.3rem 0.75rem;
|
||||
background: transparent;
|
||||
display: inline-flex; align-items: center; gap: 0.15rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--text-secondary);
|
||||
font-size: 11px;
|
||||
text-align: left;
|
||||
}
|
||||
.status-icon { font-size: 9px; }
|
||||
|
||||
/* Toggle buttons */
|
||||
.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: color-mix(in srgb, var(--card-color) 80%, transparent); }
|
||||
|
||||
/* Body */
|
||||
.card-body {
|
||||
display: flex; flex-wrap: wrap; align-items: center;
|
||||
gap: 0.3rem; padding: 0.15rem 0.6rem 0.25rem;
|
||||
}
|
||||
|
||||
.section-toggle:hover { background: var(--bg-hover); }
|
||||
.topic {
|
||||
font-size: 11px; line-height: 1.3; max-width: 100%;
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
.subject-topic { font-weight: 600; color: var(--text-primary); }
|
||||
.active-topic { font-style: italic; color: var(--text-secondary); font-size: 10px; }
|
||||
.active-topic::before { content: '\2014 '; color: var(--text-muted); }
|
||||
.desc-topic { color: var(--text-muted); }
|
||||
|
||||
.section-meta {
|
||||
margin-left: auto;
|
||||
/* Topic list (always visible bullets) */
|
||||
.topic-list {
|
||||
padding: 0.15rem 0.6rem 0.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.05rem;
|
||||
}
|
||||
|
||||
.topic-item {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.35rem;
|
||||
font-size: 11px;
|
||||
line-height: 1.35;
|
||||
min-height: 16px;
|
||||
}
|
||||
|
||||
.topic-dot {
|
||||
font-size: 6px;
|
||||
color: color-mix(in srgb, var(--card-color) 50%, transparent);
|
||||
flex-shrink: 0;
|
||||
width: 10px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.topic-id {
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.chevron {
|
||||
transition: transform 0.2s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chevron.rotated { transform: rotate(90deg); }
|
||||
|
||||
.section-content {
|
||||
margin: 0;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
.topic-label {
|
||||
color: var(--text-secondary);
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
border-top: 1px solid var(--border-color);
|
||||
background: var(--bg-primary);
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Expandable sections */
|
||||
.expand-section { border-top: 1px solid rgba(255, 255, 255, 0.04); }
|
||||
|
||||
.expand-content {
|
||||
margin: 0; padding: 0.35rem 0.6rem;
|
||||
font-size: 11px; line-height: 1.45; color: var(--text-secondary);
|
||||
white-space: pre-wrap; word-break: break-word;
|
||||
max-height: 200px; overflow-y: auto;
|
||||
background: transparent; font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
}
|
||||
|
||||
.result-section :deep(.tool-result) { border: none; border-radius: 0; margin-top: 0; }
|
||||
</style>
|
||||
|
||||
@@ -26,6 +26,7 @@ const ext = computed(() => {
|
||||
const isError = computed(() => props.call.result?.isError ?? false)
|
||||
|
||||
const contentExpanded = ref(false)
|
||||
const resultExpanded = ref(false)
|
||||
|
||||
const highlightedContent = computed(() => highlightCode(content.value, ext.value || undefined))
|
||||
|
||||
@@ -36,7 +37,7 @@ const lineCount = computed(() => content.value.split('\n').length)
|
||||
<div :class="['write-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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14 2 14 8 20 8"/>
|
||||
<line x1="12" y1="18" x2="12" y2="12"/>
|
||||
@@ -44,167 +45,129 @@ const lineCount = computed(() => content.value.split('\n').length)
|
||||
</svg>
|
||||
</span>
|
||||
<span class="card-label">Write</span>
|
||||
<span class="file-name" :title="filePath">{{ fileName }}</span>
|
||||
<span v-if="ext" class="ext-badge">.{{ ext }}</span>
|
||||
<span v-if="isError" class="error-badge">error</span>
|
||||
</div>
|
||||
<span class="line-meta">{{ lineCount }}L</span>
|
||||
<span v-if="isError" class="error-badge">err</span>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="file-path" :title="filePath">
|
||||
<span class="path-dir">{{ filePath.replace(/\\/g, '/').split('/').slice(0, -1).join('/') }}/</span>
|
||||
<span class="path-file">{{ fileName }}</span>
|
||||
</div>
|
||||
<span class="header-spacer"></span>
|
||||
|
||||
<button class="toggle-btn" :class="{ active: contentExpanded }" @click.stop="contentExpanded = !contentExpanded" title="Toggle content">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 3v18M3 12h18"/>
|
||||
</svg>
|
||||
</button>
|
||||
<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>
|
||||
|
||||
<!-- Content preview -->
|
||||
<div class="content-section">
|
||||
<button class="content-toggle" @click="contentExpanded = !contentExpanded">
|
||||
<svg
|
||||
:class="['chevron', { rotated: contentExpanded }]"
|
||||
width="10" height="10" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="2"
|
||||
>
|
||||
<polyline points="9 18 15 12 9 6" />
|
||||
</svg>
|
||||
<span>Content</span>
|
||||
<span class="content-meta">{{ lineCount }} lines · {{ content.length }} chars</span>
|
||||
</button>
|
||||
<pre v-if="contentExpanded" class="content-pre" v-html="highlightedContent"></pre>
|
||||
<div v-if="contentExpanded" class="content-section">
|
||||
<pre class="content-pre" v-html="highlightedContent"></pre>
|
||||
</div>
|
||||
|
||||
<!-- Result -->
|
||||
<ToolResultBlock v-if="call.result" :result="call.result" />
|
||||
<ToolResultBlock v-if="resultExpanded && call.result" :result="call.result" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.write-card {
|
||||
border: 1px solid rgba(34, 197, 94, 0.25);
|
||||
border-left: 3px solid #22c55e;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
border-left: 2px solid rgba(34, 197, 94, 0.25);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
margin: 0.5rem 0;
|
||||
background: var(--bg-primary);
|
||||
margin: 0.35rem 0;
|
||||
background: rgba(34, 197, 94, 0.02);
|
||||
}
|
||||
|
||||
.write-card.error {
|
||||
border-color: rgba(239, 68, 68, 0.25);
|
||||
border-left-color: #ef4444;
|
||||
}
|
||||
.write-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(34, 197, 94, 0.06);
|
||||
border-bottom: 1px solid rgba(34, 197, 94, 0.12);
|
||||
gap: 0.35rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
background: transparent;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.write-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: #22c55e;
|
||||
}
|
||||
|
||||
.write-card.error .card-icon { color: #ef4444; }
|
||||
.card-icon { display: flex; align-items: center; color: rgba(34, 197, 94, 0.6); flex-shrink: 0; }
|
||||
.write-card.error .card-icon { color: rgba(239, 68, 68, 0.6); }
|
||||
|
||||
.card-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #22c55e;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: rgba(34, 197, 94, 0.7);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.write-card.error .card-label { color: rgba(239, 68, 68, 0.7); }
|
||||
|
||||
.write-card.error .card-label { color: #ef4444; }
|
||||
|
||||
.ext-badge {
|
||||
font-size: 10px;
|
||||
padding: 0.1rem 0.35rem;
|
||||
border-radius: 4px;
|
||||
background: rgba(34, 197, 94, 0.12);
|
||||
color: #22c55e;
|
||||
.file-name {
|
||||
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;
|
||||
}
|
||||
|
||||
.file-path {
|
||||
font-size: 12px;
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
line-height: 1.4;
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.path-dir { color: var(--text-muted); }
|
||||
.path-file { color: var(--text-primary); font-weight: 600; }
|
||||
|
||||
/* Content preview */
|
||||
.content-section {
|
||||
border-top: 1px solid var(--border-color);
|
||||
.ext-badge, .line-meta, .error-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;
|
||||
}
|
||||
|
||||
.content-toggle {
|
||||
.ext-badge { color: rgba(34, 197, 94, 0.5); }
|
||||
.line-meta { color: rgba(34, 197, 94, 0.6); }
|
||||
.error-badge { color: rgba(239, 68, 68, 0.7); }
|
||||
|
||||
.header-spacer { flex: 1; }
|
||||
|
||||
.toggle-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
width: 100%;
|
||||
padding: 0.35rem 0.75rem;
|
||||
background: transparent;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--text-secondary);
|
||||
font-size: 11px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.content-toggle:hover { background: var(--bg-hover); }
|
||||
|
||||
.content-meta {
|
||||
margin-left: auto;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.chevron {
|
||||
transition: transform 0.2s;
|
||||
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(34, 197, 94, 0.8); }
|
||||
|
||||
.chevron.rotated { transform: rotate(90deg); }
|
||||
/* Content */
|
||||
.content-section {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.content-pre {
|
||||
margin: 0;
|
||||
padding: 0.6rem 0.75rem;
|
||||
padding: 0.35rem 0.6rem;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
line-height: 1.45;
|
||||
color: var(--text-secondary);
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
max-height: 300px;
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
border-top: 1px solid var(--border-color);
|
||||
background: var(--bg-primary);
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user