<script lang="ts">
import { appStore } from '$lib/store.svelte.js';
let status = $derived(appStore.status);
let toolCount = $derived(appStore.tools.length);
function fmt(n: number): string {
if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
return String(n);
}
function fmtTime(secs: number): string {
if (secs < 60) return `${Math.round(secs)}s`;
const m = Math.floor(secs / 60);
const s = Math.round(secs % 60);
return `${m}m${s}s`;
}
</script>
<div class="panel">
<div class="header">Debug</div>
<div class="grid">
<span class="label">tools:</span>
<span class="value">{toolCount}</span>
{#if status}
<span class="label">iteration:</span>
<span class="value">{status.iteration}</span>
<span class="label">elapsed:</span>
<span class="value">{fmtTime(status.elapsed_secs)}</span>
<span class="label">tokens:</span>
<span class="value">{fmt(status.prompt_tokens + status.completion_tokens)}</span>
<span class="label">cached:</span>
<span class="value">{fmt(status.cached_tokens)}</span>
{/if}
<span class="label">phase:</span>
<span class="value">{appStore.phase || '-'}</span>
</div>
{#if appStore.error}
<div class="error">{appStore.error}</div>
{/if}
</div>
<style>
.panel {
font-family: monospace;
font-size: 0.8rem;
}
.header {
color: var(--accent);
padding: 0.25rem 0.5rem;
font-weight: bold;
text-transform: uppercase;
font-size: 0.7rem;
letter-spacing: 0.08em;
}
.grid {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.1rem 0.5rem;
padding: 0.25rem 0.5rem;
font-size: 0.7rem;
}
.label {
color: var(--fg-dim);
}
.value {
color: var(--fg);
}
.error {
color: var(--red);
padding: 0.25rem 0.5rem;
font-size: 0.7rem;
border-top: 1px solid var(--border);
margin-top: 0.25rem;
}
</style>