collet 0.1.1

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

{#if appStore.streamingTokens}
	<div class="message" role="status" aria-label="Assistant is typing">
		<div class="role-header" aria-hidden="true">
			<span class="diamond">◆</span>
			<span class="role-name">assistant</span>
			<span class="role-line">────────────────────────────────</span>
		</div>
		<pre class="content">{appStore.streamingTokens}<span class="cursor" aria-hidden="true">▋</span></pre>
	</div>
{/if}

<style>
	.message {
		padding: 0.125rem 0;
	}

	.role-header {
		display: flex;
		align-items: center;
		gap: 0.375rem;
		margin-bottom: 0.375rem;
		font-size: 0.8125rem;
		line-height: 1;
	}

	.diamond {
		color: var(--accent);
		flex-shrink: 0;
	}

	.role-name {
		color: var(--accent);
		font-weight: 600;
		flex-shrink: 0;
	}

	.role-line {
		color: var(--border);
		overflow: hidden;
		white-space: nowrap;
		flex: 1;
		min-width: 0;
		letter-spacing: -0.05em;
	}

	.content {
		margin: 0;
		white-space: pre-wrap;
		word-break: break-word;
		color: var(--fg);
		font-family: inherit;
		font-size: 0.9375rem;
		line-height: 1.6;
	}

	.cursor {
		color: var(--accent);
		animation: blink 1s step-end infinite;
	}

	@keyframes blink {
		50% { opacity: 0; }
	}
</style>