feed-the-machine 1.6.1 → 1.7.0

package/ftm-inbox/src/lib/components/ui/PillButton.svelte

@@ -1,106 +1,106 @@
-<script lang="ts">
-	export let variant: 'primary' | 'ghost' | 'danger' = 'primary';
-	export let size: 'sm' | 'md' | 'lg' = 'md';
-	export let disabled = false;
-	export let type: 'button' | 'submit' | 'reset' = 'button';
-
-	const sizeClasses = {
-		sm: 'btn-sm',
-		md: 'btn-md',
-		lg: 'btn-lg'
-	};
-</script>
-
-<button
-	{type}
-	{disabled}
-	class="pill-btn pill-btn-{variant} {sizeClasses[size]}"
-	on:click
-	on:mouseenter
-	on:mouseleave
->
-	{#if $$slots.icon}
-		<span class="btn-icon" aria-hidden="true">
-			<slot name="icon" />
-		</span>
-	{/if}
-	<slot />
-</button>
-
-<style>
-	.pill-btn {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.4rem;
-		border-radius: 9999px;
-		font-family: 'Nunito', sans-serif;
-		font-weight: 700;
-		cursor: pointer;
-		border: none;
-		transition:
-			transform 0.18s cubic-bezier(0.68, -0.55, 0.265, 1.55),
-			box-shadow 0.18s ease,
-			background-color 0.18s ease,
-			color 0.18s ease,
-			border-color 0.18s ease;
-		user-select: none;
-		white-space: nowrap;
-		line-height: 1;
-	}
-
-	.pill-btn:disabled {
-		opacity: 0.45;
-		cursor: not-allowed;
-		transform: none !important;
-	}
-
-	.pill-btn:not(:disabled):hover {
-		transform: scale(1.06) translateY(-1px);
-	}
-
-	.pill-btn:not(:disabled):active {
-		transform: scale(0.96) translateY(0);
-	}
-
-	/* Sizes */
-	.btn-sm { padding: 0.35rem 0.9rem; font-size: 0.75rem; }
-	.btn-md { padding: 0.5rem 1.25rem; font-size: 0.875rem; }
-	.btn-lg { padding: 0.65rem 1.6rem; font-size: 1rem; }
-
-	/* Variants */
-	.pill-btn-primary {
-		background-color: var(--accent-primary);
-		color: #fff;
-		box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
-	}
-	.pill-btn-primary:not(:disabled):hover {
-		background-color: var(--accent-hover);
-		box-shadow: 0 4px 16px rgba(76, 175, 80, 0.4);
-	}
-
-	.pill-btn-ghost {
-		background-color: transparent;
-		color: var(--text-secondary);
-		border: 2px solid var(--border-card);
-	}
-	.pill-btn-ghost:not(:disabled):hover {
-		border-color: var(--accent-primary);
-		color: var(--accent-primary);
-		background-color: rgba(76, 175, 80, 0.06);
-	}
-
-	.pill-btn-danger {
-		background-color: #ef5350;
-		color: #fff;
-		box-shadow: 0 2px 8px rgba(239, 83, 80, 0.25);
-	}
-	.pill-btn-danger:not(:disabled):hover {
-		background-color: #c62828;
-		box-shadow: 0 4px 16px rgba(239, 83, 80, 0.35);
-	}
-
-	.btn-icon {
-		display: flex;
-		align-items: center;
-	}
-</style>
+<script lang="ts">
+	export let variant: 'primary' | 'ghost' | 'danger' = 'primary';
+	export let size: 'sm' | 'md' | 'lg' = 'md';
+	export let disabled = false;
+	export let type: 'button' | 'submit' | 'reset' = 'button';
+
+	const sizeClasses = {
+		sm: 'btn-sm',
+		md: 'btn-md',
+		lg: 'btn-lg'
+	};
+</script>
+
+<button
+	{type}
+	{disabled}
+	class="pill-btn pill-btn-{variant} {sizeClasses[size]}"
+	on:click
+	on:mouseenter
+	on:mouseleave
+>
+	{#if $$slots.icon}
+		<span class="btn-icon" aria-hidden="true">
+			<slot name="icon" />
+		</span>
+	{/if}
+	<slot />
+</button>
+
+<style>
+	.pill-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+		border-radius: 9999px;
+		font-family: 'Nunito', sans-serif;
+		font-weight: 700;
+		cursor: pointer;
+		border: none;
+		transition:
+			transform 0.18s cubic-bezier(0.68, -0.55, 0.265, 1.55),
+			box-shadow 0.18s ease,
+			background-color 0.18s ease,
+			color 0.18s ease,
+			border-color 0.18s ease;
+		user-select: none;
+		white-space: nowrap;
+		line-height: 1;
+	}
+
+	.pill-btn:disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+		transform: none !important;
+	}
+
+	.pill-btn:not(:disabled):hover {
+		transform: scale(1.06) translateY(-1px);
+	}
+
+	.pill-btn:not(:disabled):active {
+		transform: scale(0.96) translateY(0);
+	}
+
+	/* Sizes */
+	.btn-sm { padding: 0.35rem 0.9rem; font-size: 0.75rem; }
+	.btn-md { padding: 0.5rem 1.25rem; font-size: 0.875rem; }
+	.btn-lg { padding: 0.65rem 1.6rem; font-size: 1rem; }
+
+	/* Variants */
+	.pill-btn-primary {
+		background-color: var(--accent-primary);
+		color: #fff;
+		box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
+	}
+	.pill-btn-primary:not(:disabled):hover {
+		background-color: var(--accent-hover);
+		box-shadow: 0 4px 16px rgba(76, 175, 80, 0.4);
+	}
+
+	.pill-btn-ghost {
+		background-color: transparent;
+		color: var(--text-secondary);
+		border: 2px solid var(--border-card);
+	}
+	.pill-btn-ghost:not(:disabled):hover {
+		border-color: var(--accent-primary);
+		color: var(--accent-primary);
+		background-color: rgba(76, 175, 80, 0.06);
+	}
+
+	.pill-btn-danger {
+		background-color: #ef5350;
+		color: #fff;
+		box-shadow: 0 2px 8px rgba(239, 83, 80, 0.25);
+	}
+	.pill-btn-danger:not(:disabled):hover {
+		background-color: #c62828;
+		box-shadow: 0 4px 16px rgba(239, 83, 80, 0.35);
+	}
+
+	.btn-icon {
+		display: flex;
+		align-items: center;
+	}
+</style>

package/ftm-inbox/src/lib/components/ui/StatusBadge.svelte

@@ -1,67 +1,67 @@
-<script context="module" lang="ts">
-	export type Status =
-		| 'pending'
-		| 'planning'
-		| 'approved'
-		| 'executing'
-		| 'complete'
-		| 'failed';
-</script>
-
-<script lang="ts">
-	export let status: Status = 'pending';
-	export let label: string | undefined = undefined;
-
-	const labels: Record<Status, string> = {
-		pending:   'Pending',
-		planning:  'Planning',
-		approved:  'Approved',
-		executing: 'Executing',
-		complete:  'Complete',
-		failed:    'Failed'
-	};
-
-	const dots: Record<Status, string> = {
-		pending:   '○',
-		planning:  '◑',
-		approved:  '●',
-		executing: '◉',
-		complete:  '✓',
-		failed:    '✕'
-	};
-
-	$: displayLabel = label ?? labels[status];
-</script>
-
-<span class="badge badge-{status}" role="status">
-	<span class="dot" aria-hidden="true">{dots[status]}</span>
-	{displayLabel}
-</span>
-
-<style>
-	.badge {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.3rem;
-		padding: 4px 12px;
-		border-radius: 12px;
-		font-family: 'Nunito', sans-serif;
-		font-weight: 700;
-		font-size: 0.75rem;
-		letter-spacing: 0.02em;
-		white-space: nowrap;
-		user-select: none;
-	}
-
-	.dot {
-		font-size: 0.7rem;
-		line-height: 1;
-	}
-
-	.badge-pending   { background: #fff9c4; color: #5d4037; }
-	.badge-planning  { background: #bbdefb; color: #0d47a1; }
-	.badge-approved  { background: #c8e6c9; color: #1b5e20; }
-	.badge-executing { background: #ffe0b2; color: #bf360c; }
-	.badge-complete  { background: #b2dfdb; color: #004d40; }
-	.badge-failed    { background: #ffcdd2; color: #b71c1c; }
-</style>
+<script context="module" lang="ts">
+	export type Status =
+		| 'pending'
+		| 'planning'
+		| 'approved'
+		| 'executing'
+		| 'complete'
+		| 'failed';
+</script>
+
+<script lang="ts">
+	export let status: Status = 'pending';
+	export let label: string | undefined = undefined;
+
+	const labels: Record<Status, string> = {
+		pending:   'Pending',
+		planning:  'Planning',
+		approved:  'Approved',
+		executing: 'Executing',
+		complete:  'Complete',
+		failed:    'Failed'
+	};
+
+	const dots: Record<Status, string> = {
+		pending:   '○',
+		planning:  '◑',
+		approved:  '●',
+		executing: '◉',
+		complete:  '✓',
+		failed:    '✕'
+	};
+
+	$: displayLabel = label ?? labels[status];
+</script>
+
+<span class="badge badge-{status}" role="status">
+	<span class="dot" aria-hidden="true">{dots[status]}</span>
+	{displayLabel}
+</span>
+
+<style>
+	.badge {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.3rem;
+		padding: 4px 12px;
+		border-radius: 12px;
+		font-family: 'Nunito', sans-serif;
+		font-weight: 700;
+		font-size: 0.75rem;
+		letter-spacing: 0.02em;
+		white-space: nowrap;
+		user-select: none;
+	}
+
+	.dot {
+		font-size: 0.7rem;
+		line-height: 1;
+	}
+
+	.badge-pending   { background: #fff9c4; color: #5d4037; }
+	.badge-planning  { background: #bbdefb; color: #0d47a1; }
+	.badge-approved  { background: #c8e6c9; color: #1b5e20; }
+	.badge-executing { background: #ffe0b2; color: #bf360c; }
+	.badge-complete  { background: #b2dfdb; color: #004d40; }
+	.badge-failed    { background: #ffcdd2; color: #b71c1c; }
+</style>

package/ftm-inbox/src/lib/components/ui/StreamDrawer.svelte

@@ -1,149 +1,149 @@
-<script lang="ts">
-	export let open = false;
-	export let height = 200;
-	export let title = 'Agent Output';
-
-	export let lines: string[] = [];
-
-	function toggle() {
-		open = !open;
-	}
-
-	let logEl: HTMLDivElement;
-
-	$: if (logEl && lines) {
-		// Auto-scroll to bottom when new lines arrive
-		setTimeout(() => {
-			if (logEl) logEl.scrollTop = logEl.scrollHeight;
-		}, 0);
-	}
-</script>
-
-<div class="stream-drawer" class:open>
-	<button class="drawer-toggle" on:click={toggle} aria-expanded={open}>
-		<span class="toggle-icon" aria-hidden="true">{open ? '▼' : '▲'}</span>
-		<span class="toggle-title">{title}</span>
-		{#if lines.length > 0}
-			<span class="line-count">{lines.length} lines</span>
-		{/if}
-	</button>
-
-	{#if open}
-		<div class="drawer-body" style="height: {height}px" bind:this={logEl}>
-			{#if lines.length === 0}
-				<p class="drawer-empty">Waiting for agent output...</p>
-			{:else}
-				{#each lines as line, i (i)}
-					<div class="log-line" class:log-error={line.startsWith('ERROR')} class:log-success={line.startsWith('OK') || line.startsWith('✓')}>
-						<span class="log-index">{String(i + 1).padStart(3, '0')}</span>
-						<span class="log-text">{line}</span>
-					</div>
-				{/each}
-			{/if}
-		</div>
-	{/if}
-</div>
-
-<style>
-	.stream-drawer {
-		position: fixed;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		background: var(--bg-drawer);
-		border-top: 2px solid var(--border-accent);
-		z-index: 100;
-		transition: box-shadow 0.2s ease;
-	}
-
-	.stream-drawer.open {
-		box-shadow: 0 -4px 24px rgba(76, 175, 80, 0.15);
-	}
-
-	.drawer-toggle {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		width: 100%;
-		padding: 0.5rem 1rem;
-		background: none;
-		border: none;
-		cursor: pointer;
-		font-family: 'Nunito', sans-serif;
-		font-weight: 700;
-		font-size: 0.8rem;
-		color: var(--text-secondary);
-		transition: color 0.15s ease, background 0.15s ease;
-	}
-
-	.drawer-toggle:hover {
-		color: var(--accent-primary);
-		background: rgba(76, 175, 80, 0.04);
-	}
-
-	.toggle-icon {
-		font-size: 0.65rem;
-	}
-
-	.toggle-title {
-		flex: 1;
-		text-align: left;
-		letter-spacing: 0.05em;
-		text-transform: uppercase;
-		font-size: 0.7rem;
-	}
-
-	.line-count {
-		font-size: 0.7rem;
-		color: var(--text-muted);
-		background: var(--border-card);
-		padding: 2px 8px;
-		border-radius: 9999px;
-	}
-
-	.drawer-body {
-		overflow-y: auto;
-		font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
-		font-size: 0.75rem;
-		line-height: 1.6;
-		padding: 0.5rem 0;
-		scrollbar-width: thin;
-	}
-
-	.drawer-empty {
-		padding: 0.75rem 1rem;
-		color: var(--text-muted);
-		font-family: 'Nunito', sans-serif;
-		font-style: italic;
-		font-size: 0.8rem;
-		margin: 0;
-	}
-
-	.log-line {
-		display: flex;
-		gap: 0.75rem;
-		padding: 0.1rem 1rem;
-		color: var(--text-secondary);
-		transition: background 0.1s;
-	}
-
-	.log-line:hover {
-		background: rgba(76, 175, 80, 0.04);
-	}
-
-	.log-index {
-		color: var(--text-muted);
-		user-select: none;
-		min-width: 2rem;
-		text-align: right;
-	}
-
-	.log-text {
-		white-space: pre-wrap;
-		word-break: break-word;
-		flex: 1;
-	}
-
-	.log-error .log-text { color: #ef5350; }
-	.log-success .log-text { color: var(--accent-primary); }
-</style>
+<script lang="ts">
+	export let open = false;
+	export let height = 200;
+	export let title = 'Agent Output';
+
+	export let lines: string[] = [];
+
+	function toggle() {
+		open = !open;
+	}
+
+	let logEl: HTMLDivElement;
+
+	$: if (logEl && lines) {
+		// Auto-scroll to bottom when new lines arrive
+		setTimeout(() => {
+			if (logEl) logEl.scrollTop = logEl.scrollHeight;
+		}, 0);
+	}
+</script>
+
+<div class="stream-drawer" class:open>
+	<button class="drawer-toggle" on:click={toggle} aria-expanded={open}>
+		<span class="toggle-icon" aria-hidden="true">{open ? '▼' : '▲'}</span>
+		<span class="toggle-title">{title}</span>
+		{#if lines.length > 0}
+			<span class="line-count">{lines.length} lines</span>
+		{/if}
+	</button>
+
+	{#if open}
+		<div class="drawer-body" style="height: {height}px" bind:this={logEl}>
+			{#if lines.length === 0}
+				<p class="drawer-empty">Waiting for agent output...</p>
+			{:else}
+				{#each lines as line, i (i)}
+					<div class="log-line" class:log-error={line.startsWith('ERROR')} class:log-success={line.startsWith('OK') || line.startsWith('✓')}>
+						<span class="log-index">{String(i + 1).padStart(3, '0')}</span>
+						<span class="log-text">{line}</span>
+					</div>
+				{/each}
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.stream-drawer {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background: var(--bg-drawer);
+		border-top: 2px solid var(--border-accent);
+		z-index: 100;
+		transition: box-shadow 0.2s ease;
+	}
+
+	.stream-drawer.open {
+		box-shadow: 0 -4px 24px rgba(76, 175, 80, 0.15);
+	}
+
+	.drawer-toggle {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		width: 100%;
+		padding: 0.5rem 1rem;
+		background: none;
+		border: none;
+		cursor: pointer;
+		font-family: 'Nunito', sans-serif;
+		font-weight: 700;
+		font-size: 0.8rem;
+		color: var(--text-secondary);
+		transition: color 0.15s ease, background 0.15s ease;
+	}
+
+	.drawer-toggle:hover {
+		color: var(--accent-primary);
+		background: rgba(76, 175, 80, 0.04);
+	}
+
+	.toggle-icon {
+		font-size: 0.65rem;
+	}
+
+	.toggle-title {
+		flex: 1;
+		text-align: left;
+		letter-spacing: 0.05em;
+		text-transform: uppercase;
+		font-size: 0.7rem;
+	}
+
+	.line-count {
+		font-size: 0.7rem;
+		color: var(--text-muted);
+		background: var(--border-card);
+		padding: 2px 8px;
+		border-radius: 9999px;
+	}
+
+	.drawer-body {
+		overflow-y: auto;
+		font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
+		font-size: 0.75rem;
+		line-height: 1.6;
+		padding: 0.5rem 0;
+		scrollbar-width: thin;
+	}
+
+	.drawer-empty {
+		padding: 0.75rem 1rem;
+		color: var(--text-muted);
+		font-family: 'Nunito', sans-serif;
+		font-style: italic;
+		font-size: 0.8rem;
+		margin: 0;
+	}
+
+	.log-line {
+		display: flex;
+		gap: 0.75rem;
+		padding: 0.1rem 1rem;
+		color: var(--text-secondary);
+		transition: background 0.1s;
+	}
+
+	.log-line:hover {
+		background: rgba(76, 175, 80, 0.04);
+	}
+
+	.log-index {
+		color: var(--text-muted);
+		user-select: none;
+		min-width: 2rem;
+		text-align: right;
+	}
+
+	.log-text {
+		white-space: pre-wrap;
+		word-break: break-word;
+		flex: 1;
+	}
+
+	.log-error .log-text { color: #ef5350; }
+	.log-success .log-text { color: var(--accent-primary); }
+</style>