Files
agent-ui/frontend/src/components/transcript-debug/ToolResultBlock.vue
josedario87 eb69c0b2cf feat: Modular aquatic background system and shared CodeBlock component
Add aquaticBackground/ module with OceanScene (unified gradient, light rays,
sea floor, corals, seaweed, decorations), plus independent overlay layers
(BubbleStream, FishSchool, JellyfishDrift, EventOverlay, EdgeFade). Includes
event scheduling engine with 4 frequency tiers (minutes/hours/days/months)
and 20 random events with localStorage persistence.

Add shared CodeBlock component with copy-to-clipboard button, terminal-matched
monospace font (Consolas), and proper line-height/letter-spacing. Refactor
EditCard, WriteCard, TaskCard, and ToolResultBlock to use CodeBlock. Fix
markdown code block alignment to match terminal rendering.
2026-02-19 17:15:36 -06:00

37 lines
891 B
Vue

<script setup lang="ts">
import { computed } from 'vue'
import type { ParsedToolResult } from '@/types/transcript-debug'
import CodeBlock from './CodeBlock.vue'
const props = defineProps<{
result: ParsedToolResult
}>()
const content = computed(() => props.result.content)
const lang = computed(() => {
const trimmed = content.value.trim()
if ((trimmed.startsWith('{') && trimmed.endsWith('}')) ||
(trimmed.startsWith('[') && trimmed.endsWith(']'))) {
try {
JSON.parse(trimmed)
return 'json'
} catch { /* not valid JSON */ }
}
return ''
})
const displayCode = computed(() => {
if (lang.value === 'json') {
try {
return JSON.stringify(JSON.parse(content.value.trim()), null, 2)
} catch { /* fallback */ }
}
return content.value
})
</script>
<template>
<CodeBlock :code="displayCode" :lang="lang" max-height="300px" />
</template>