collet 0.1.0

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