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.
37 lines
891 B
Vue
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>
|