collet 0.1.1

Relentless agentic coding orchestrator with zero-drop agent loops
Documentation
<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>