collet 0.1.1

Relentless agentic coding orchestrator with zero-drop agent loops
Documentation
<script lang="ts">
	import { searchStore } from '$lib/stores/search.svelte.js';
	import { appStore } from '$lib/store.svelte.js';

	function handleInput() {
		searchStore.search(appStore.authToken ?? undefined);
	}

	function basename(filepath: string): string {
		return filepath.split('/').pop() ?? filepath;
	}
</script>

<div class="panel">
	<div class="header">Search</div>
	<div class="inputs">
		<input
			class="input"
			type="text"
			placeholder="search..."
			bind:value={searchStore.query}
			oninput={handleInput}
			aria-label="Search query"
		/>
		<input
			class="input glob"
			type="text"
			placeholder="glob filter"
			bind:value={searchStore.glob}
			oninput={handleInput}
			aria-label="Glob filter"
		/>
	</div>
	{#if searchStore.loading}
		<div class="dim">searching...</div>
	{:else if searchStore.results.length > 0}
		<div class="results">
			{#each searchStore.results as match}
				<div class="match">
					<span class="file">{basename(match.file)}:{match.line}</span>
					<span class="content">{match.content}</span>
				</div>
			{/each}
			{#if searchStore.total > searchStore.results.length}
				<div class="dim">+{searchStore.total - searchStore.results.length} more</div>
			{/if}
		</div>
	{:else if searchStore.query.trim()}
		<div class="dim">no results</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;
	}
	.inputs {
		padding: 0.25rem 0.5rem;
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}
	.input {
		all: unset;
		background: var(--bg);
		border: 1px solid var(--border);
		color: var(--fg);
		padding: 0.2rem 0.4rem;
		font-family: monospace;
		font-size: 0.75rem;
		border-radius: 2px;
	}
	.input:focus {
		border-color: var(--accent);
	}
	.input::placeholder {
		color: var(--fg-dim);
	}
	.glob {
		font-size: 0.7rem;
	}
	.results {
		overflow-y: auto;
		max-height: 250px;
	}
	.match {
		padding: 0.2rem 0.5rem;
		display: flex;
		flex-direction: column;
		gap: 0.1rem;
		border-bottom: 1px solid var(--border);
	}
	.match:hover {
		background: var(--bg-surface);
	}
	.file {
		color: var(--cyan);
		font-size: 0.7rem;
	}
	.content {
		color: var(--fg-dim);
		font-size: 0.7rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.dim {
		color: var(--fg-dim);
		padding: 0.5rem;
		font-style: italic;
		font-size: 0.7rem;
	}
</style>