<script lang="ts">
import { appStore } from '$lib/store.svelte.js';
let { maxTokens = 200_000 }: { maxTokens?: number } = $props();
let status = $derived(appStore.status);
let ratio = $derived(status ? status.context_tokens / maxTokens : 0);
let pct = $derived(Math.min(Math.round(ratio * 100), 100));
let barColor = $derived(pct > 80 ? 'var(--red)' : pct > 50 ? 'var(--yellow)' : 'var(--green)');
function fmt(n: number): string {
if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
return String(n);
}
</script>
<div class="panel">
<div class="header">Context</div>
{#if status}
<div class="bar-wrap">
<div class="bar" style:width="{pct}%" style:background={barColor}></div>
</div>
<div class="pct" style:color={barColor}>{pct}%</div>
<div class="stats">
<span>prompt: {fmt(status.prompt_tokens)}</span>
<span>compl: {fmt(status.completion_tokens)}</span>
<span>cached: {fmt(status.cached_tokens)}</span>
<span>ctx: {fmt(status.context_tokens)}</span>
</div>
{:else}
<div class="dim">no data</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;
}
.bar-wrap {
margin: 0.25rem 0.5rem;
height: 4px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 2px;
overflow: hidden;
}
.bar {
height: 100%;
transition: width 0.3s ease;
}
.pct {
text-align: right;
padding: 0 0.5rem;
font-size: 0.7rem;
font-weight: bold;
}
.stats {
display: flex;
flex-wrap: wrap;
gap: 0.3rem 0.6rem;
padding: 0.25rem 0.5rem;
font-size: 0.65rem;
color: var(--fg-dim);
}
.dim {
color: var(--fg-dim);
padding: 0.5rem;
font-style: italic;
font-size: 0.7rem;
}
</style>