collet 0.1.0

Relentless agentic coding orchestrator with zero-drop agent loops
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

<script lang="ts">
	import { appStore } from '$lib/store.svelte.js';

	function toolShortName(name: string): string {
		if (name.startsWith('mcp__')) {
			const parts = name.slice(5).split('__');
			return parts.length >= 2 ? `${parts[0]}:${parts.slice(1).join('_')}` : name;
		}
		return name;
	}
</script>

{#if appStore.activeToolName}
	<div
		class="tool-block"
		class:mcp={!!appStore.activeMcpServer}
		role="status"
		aria-label="Tool executing: {appStore.activeToolName}"
	>
		<span class="spinner" aria-hidden="true"></span>
		<span class="tool-icon" aria-hidden="true">{appStore.activeMcpServer ? '⊕' : '⚙'}</span>
		<span class="tool-name">{toolShortName(appStore.activeToolName)}</span>
		{#if appStore.activeMcpServer}
			<span class="mcp-badge">MCP</span>
		{/if}
	</div>
{/if}

<style>
	.tool-block {
		display: flex;
		align-items: center;
		gap: 0.4rem;
		padding: 0.3rem 0.625rem;
		background: color-mix(in srgb, var(--yellow) 8%, var(--bg-surface));
		border: 1px solid color-mix(in srgb, var(--yellow) 25%, var(--border));
		border-radius: 4px;
		font-size: 0.8125rem;
		color: var(--yellow);
		font-family: var(--font-mono);
	}

	.tool-block.mcp {
		background: color-mix(in srgb, var(--magenta) 8%, var(--bg-surface));
		border-color: color-mix(in srgb, var(--magenta) 25%, var(--border));
		color: var(--magenta);
	}

	.spinner {
		width: 0.5rem;
		height: 0.5rem;
		border: 1.5px solid currentColor;
		border-top-color: transparent;
		border-radius: 50%;
		animation: spin 0.7s linear infinite;
		flex-shrink: 0;
	}

	.tool-icon {
		flex-shrink: 0;
		font-size: 0.75rem;
	}

	.tool-name {
		font-family: inherit;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.mcp-badge {
		font-size: 0.625rem;
		padding: 0.0625rem 0.3rem;
		border-radius: 3px;
		background: color-mix(in srgb, var(--magenta) 20%, transparent);
		color: var(--magenta);
		text-transform: uppercase;
		letter-spacing: 0.06em;
		font-weight: 700;
		flex-shrink: 0;
	}

	@keyframes spin {
		to { transform: rotate(360deg); }
	}
</style>