collet 0.1.0

Relentless agentic coding orchestrator with zero-drop agent loops
Documentation
<script lang="ts">
	import Markdown from '../shared/Markdown.svelte';

	let { role, content }: { role: 'user' | 'assistant' | 'system'; content: string } = $props();
</script>

<div class="message {role}">
	{#if role === 'assistant'}
		<div class="role-header assistant-header" aria-hidden="true">
			<span class="diamond">◆</span>
			<span class="role-name">assistant</span>
			<span class="role-line">────────────────────────────────</span>
		</div>
		<div class="content">
			<Markdown text={content} />
		</div>
	{:else if role === 'user'}
		<div class="user-row">
			<span class="prompt" aria-hidden="true">❯</span>
			<pre class="user-text">{content}</pre>
		</div>
	{:else}
		<!-- system message -->
		<div class="system-row" role="note">
			<span class="sys-bullet" aria-hidden="true">·</span>
			<span class="sys-text">{content}</span>
		</div>
	{/if}
</div>

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

	/* ── Assistant ── */
	.assistant-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 {
		font-size: 0.9375rem;
		line-height: 1.6;
		padding-left: 0.0625rem;
	}

	/* ── User ── */
	.user-row {
		display: flex;
		gap: 0.5rem;
		align-items: flex-start;
	}

	.prompt {
		color: var(--green);
		font-weight: 700;
		flex-shrink: 0;
		line-height: 1.6;
		font-size: 0.9375rem;
	}

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

	/* ── System ── */
	.system-row {
		display: flex;
		gap: 0.375rem;
		align-items: baseline;
		padding: 0.125rem 0;
	}

	.sys-bullet {
		color: var(--fg-dim);
		flex-shrink: 0;
		font-size: 1rem;
	}

	.sys-text {
		color: var(--fg-dim);
		font-size: 0.8125rem;
		white-space: pre-wrap;
		word-break: break-word;
	}
</style>