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 agents = $derived([...appStore.hiveAgents.values()]);
</script>

<div class="panel">
	<div class="header">Hive Agents</div>
	{#if agents.length === 0}
		<div class="dim">no agents</div>
	{:else}
		{#each agents as agent (agent.id)}
			<div class="agent">
				<span class="icon">
					{#if agent.done && agent.success}
						<span class="ok">✓</span>
					{:else if agent.done}
						<span class="fail">✗</span>
					{:else}
						<span class="spin">⟳</span>
					{/if}
				</span>
				<span class="name">{agent.name}</span>
				<span class="iter">#{agent.iteration}</span>
				<div class="task">{agent.task}</div>
			</div>
		{/each}
	{/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;
	}
	.agent {
		display: grid;
		grid-template-columns: 0.8rem 1fr auto;
		gap: 0.3rem;
		padding: 0.25rem 0.5rem;
		align-items: center;
		border-bottom: 1px solid var(--border);
	}
	.icon {
		text-align: center;
	}
	.ok {
		color: var(--green);
	}
	.fail {
		color: var(--red);
	}
	.spin {
		color: var(--yellow);
	}
	.name {
		color: var(--cyan);
		font-size: 0.75rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.iter {
		color: var(--fg-dim);
		font-size: 0.65rem;
	}
	.task {
		grid-column: 2 / -1;
		color: var(--fg-dim);
		font-size: 0.65rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.dim {
		color: var(--fg-dim);
		padding: 0.5rem;
		font-style: italic;
		font-size: 0.7rem;
	}
</style>