feed-the-machine 1.0.0 → 1.2.0

package/ftm-inbox/src/lib/components/PlanStep.svelte

@@ -0,0 +1,271 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import PillButton from '$lib/components/ui/PillButton.svelte';
+	import type { PlanStep as PlanStepType } from '$lib/api';
+
+	export let step: PlanStepType;
+	export let index: number;
+
+	const dispatch = createEventDispatcher<{
+		approve: { stepId: number };
+		reject:  { stepId: number };
+	}>();
+
+	const riskColor: Record<string, string> = {
+		low:    'risk-low',
+		medium: 'risk-medium',
+		high:   'risk-high'
+	};
+
+	const riskEmoji: Record<string, string> = {
+		low:    '🟢',
+		medium: '🟡',
+		high:   '🔴'
+	};
+
+	const statusEmoji: Record<string, string> = {
+		pending:   '⏳',
+		approved:  '✅',
+		rejected:  '❌',
+		running:   '⚡',
+		completed: '🎉',
+		failed:    '💥'
+	};
+
+	$: isPending   = step.status === 'pending';
+	$: isApproved  = step.status === 'approved';
+	$: isCompleted = step.status === 'completed';
+	$: isFailed    = step.status === 'failed';
+</script>
+
+<div
+	class="plan-step"
+	class:step-approved={isApproved}
+	class:step-completed={isCompleted}
+	class:step-failed={isFailed}
+	role="listitem"
+>
+	<!-- Step number bubble -->
+	<div class="step-num" aria-hidden="true">{index}</div>
+
+	<!-- Main content -->
+	<div class="step-content">
+		<div class="step-top">
+			<span class="step-title">{step.title}</span>
+			<span class="step-status" title="Status: {step.status}">
+				{statusEmoji[step.status] ?? '⏳'}
+			</span>
+		</div>
+
+		<div class="step-meta">
+			{#if step.target_system}
+				<span class="meta-badge badge-system">{step.target_system}</span>
+			{/if}
+			<span class="meta-badge {riskColor[step.risk_level] ?? 'risk-low'}">
+				{riskEmoji[step.risk_level] ?? '🟢'} {step.risk_level}
+			</span>
+			{#if step.approval_required}
+				<span class="meta-badge badge-approval">approval required</span>
+			{/if}
+		</div>
+
+		{#if step.method_primary}
+			<div class="step-method">
+				<span class="method-label">primary:</span>
+				<code class="method-value">{step.method_primary}</code>
+				{#if step.method_fallback}
+					<span class="method-label">fallback:</span>
+					<code class="method-value">{step.method_fallback}</code>
+				{/if}
+			</div>
+		{/if}
+
+		{#if step.rollback}
+			<div class="step-rollback">
+				<span class="rollback-label">↩</span>
+				<span class="rollback-text">{step.rollback}</span>
+			</div>
+		{/if}
+
+		{#if isPending}
+			<div class="step-actions">
+				<PillButton
+					variant="primary"
+					size="sm"
+					on:click={() => dispatch('approve', { stepId: step.id })}
+				>
+					Approve
+				</PillButton>
+				<PillButton
+					variant="danger"
+					size="sm"
+					on:click={() => dispatch('reject', { stepId: step.id })}
+				>
+					Reject
+				</PillButton>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.plan-step {
+		display: flex;
+		gap: 0.75rem;
+		padding: 0.75rem;
+		border-radius: 12px;
+		background: var(--bg-secondary, #f8f9fa);
+		border: 1.5px solid var(--border-card, #e0e0e0);
+		transition:
+			border-color 0.2s ease,
+			background 0.2s ease,
+			transform 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+	}
+
+	.plan-step:hover {
+		transform: translateY(-1px);
+	}
+
+	.step-approved {
+		border-color: #a5d6a7;
+		background: rgba(165, 214, 167, 0.10);
+	}
+
+	.step-completed {
+		border-color: #81c784;
+		background: rgba(129, 199, 132, 0.12);
+		opacity: 0.85;
+	}
+
+	.step-failed {
+		border-color: #ef9a9a;
+		background: rgba(239, 154, 154, 0.10);
+	}
+
+	/* Step number bubble */
+	.step-num {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 26px;
+		height: 26px;
+		border-radius: 9999px;
+		background: var(--border-card, #e0e0e0);
+		font-size: 0.7rem;
+		font-weight: 800;
+		color: var(--text-secondary, #555);
+		flex-shrink: 0;
+		margin-top: 2px;
+	}
+
+	.step-approved .step-num  { background: #c8e6c9; color: #1b5e20; }
+	.step-completed .step-num { background: #a5d6a7; color: #1b5e20; }
+	.step-failed .step-num    { background: #ffcdd2; color: #b71c1c; }
+
+	/* Content */
+	.step-content {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.35rem;
+	}
+
+	.step-top {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 0.5rem;
+	}
+
+	.step-title {
+		font-size: 0.875rem;
+		font-weight: 700;
+		color: var(--text-primary, #222);
+		line-height: 1.35;
+		flex: 1;
+	}
+
+	.step-status {
+		font-size: 0.9rem;
+		flex-shrink: 0;
+	}
+
+	/* Meta badges */
+	.step-meta {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.3rem;
+	}
+
+	.meta-badge {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.2rem;
+		padding: 2px 8px;
+		border-radius: 9999px;
+		font-size: 0.65rem;
+		font-weight: 700;
+		letter-spacing: 0.04em;
+		text-transform: uppercase;
+	}
+
+	.badge-system {
+		background: rgba(66, 165, 245, 0.15);
+		color: #1565c0;
+		border: 1px solid rgba(66, 165, 245, 0.3);
+	}
+
+	.risk-low    { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
+	.risk-medium { background: #fffde7; color: #f57f17; border: 1px solid #ffe082; }
+	.risk-high   { background: #fce4ec; color: #c62828; border: 1px solid #ef9a9a; }
+
+	.badge-approval {
+		background: rgba(255, 152, 0, 0.12);
+		color: #e65100;
+		border: 1px solid rgba(255, 152, 0, 0.3);
+	}
+
+	/* Method row */
+	.step-method {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.3rem;
+		font-size: 0.72rem;
+	}
+
+	.method-label {
+		color: var(--text-muted, #888);
+		font-weight: 600;
+	}
+
+	.method-value {
+		background: var(--bg-card, #fff);
+		border: 1px solid var(--border-card, #e0e0e0);
+		border-radius: 4px;
+		padding: 1px 5px;
+		font-family: 'Menlo', monospace;
+		font-size: 0.68rem;
+		color: var(--text-secondary, #555);
+	}
+
+	/* Rollback */
+	.step-rollback {
+		display: flex;
+		align-items: center;
+		gap: 0.3rem;
+		font-size: 0.7rem;
+		color: var(--text-muted, #888);
+	}
+
+	.rollback-label { font-size: 0.8rem; }
+	.rollback-text  { font-style: italic; }
+
+	/* Actions */
+	.step-actions {
+		display: flex;
+		gap: 0.4rem;
+		margin-top: 0.25rem;
+	}
+</style>

package/ftm-inbox/src/lib/components/PlanView.svelte

@@ -0,0 +1,206 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import PlanStep from '$lib/components/PlanStep.svelte';
+	import PillButton from '$lib/components/ui/PillButton.svelte';
+	import EmptyState from '$lib/components/ui/EmptyState.svelte';
+	import type { Plan } from '$lib/api';
+	import { approveStep, approveAllSteps } from '$lib/api';
+
+	export let plan: Plan | null = null;
+	export let loading = false;
+
+	const dispatch = createEventDispatcher<{
+		planUpdated: Plan;
+	}>();
+
+	const statusLabel: Record<string, string> = {
+		draft:     'Draft',
+		approved:  'Approved',
+		executing: 'Executing',
+		completed: 'Completed',
+		failed:    'Failed'
+	};
+
+	const statusColor: Record<string, string> = {
+		draft:     'status-draft',
+		approved:  'status-approved',
+		executing: 'status-executing',
+		completed: 'status-completed',
+		failed:    'status-failed'
+	};
+
+	$: allLowRisk = plan?.steps.every(s => s.risk_level === 'low') ?? false;
+	$: hasPendingSteps = plan?.steps.some(s => s.status === 'pending') ?? false;
+	$: approveAllEnabled = hasPendingSteps && allLowRisk && plan?.status === 'draft';
+
+	async function handleApproveStep(e: CustomEvent<{ stepId: number }>) {
+		if (!plan) return;
+		try {
+			const updated = await approveStep(plan.task_id, e.detail.stepId);
+			dispatch('planUpdated', updated);
+		} catch (err) {
+			console.error('Failed to approve step:', err);
+		}
+	}
+
+	async function handleApproveAll() {
+		if (!plan) return;
+		try {
+			const updated = await approveAllSteps(plan.task_id);
+			dispatch('planUpdated', updated);
+		} catch (err) {
+			console.error('Failed to approve all steps:', err);
+		}
+	}
+</script>
+
+<div class="plan-view" aria-label="Execution plan">
+	{#if loading}
+		<div class="plan-loading">
+			<span class="loading-spinner" aria-hidden="true">✨</span>
+			<span>Generating plan…</span>
+		</div>
+
+	{:else if !plan || plan.steps.length === 0}
+		<EmptyState
+			emoji="📋"
+			title="No plan generated yet"
+			message="Click 'Generate Plan' on a task card to create an execution plan."
+		/>
+
+	{:else}
+		<!-- Plan header -->
+		<div class="plan-header">
+			<div class="plan-header-row">
+				<span class="steps-count">{plan.steps.length} step{plan.steps.length === 1 ? '' : 's'}</span>
+				<span class="plan-status {statusColor[plan.status] ?? 'status-draft'}">
+					{statusLabel[plan.status] ?? plan.status}
+				</span>
+			</div>
+
+			{#if approveAllEnabled}
+				<div class="plan-global-actions">
+					<PillButton variant="primary" size="sm" on:click={handleApproveAll}>
+						Approve All Low-Risk
+					</PillButton>
+				</div>
+			{/if}
+		</div>
+
+		<!-- Step list -->
+		<ol class="steps-list" role="list">
+			{#each plan.steps as step, i (step.id)}
+				<li class="steps-list-item">
+					<PlanStep
+						{step}
+						index={i + 1}
+						on:approve={handleApproveStep}
+						on:reject
+					/>
+				</li>
+			{/each}
+		</ol>
+	{/if}
+</div>
+
+<style>
+	.plan-view {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+
+	/* Loading state */
+	.plan-loading {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.6rem;
+		padding: 2rem;
+		font-size: 0.875rem;
+		color: var(--text-muted, #888);
+		font-weight: 600;
+	}
+
+	.loading-spinner {
+		font-size: 1.2rem;
+		animation: spin 1.4s linear infinite;
+	}
+
+	@keyframes spin {
+		from { transform: rotate(0deg); }
+		to   { transform: rotate(360deg); }
+	}
+
+	/* Plan header */
+	.plan-header {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.plan-header-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+	}
+
+	.steps-count {
+		font-size: 0.72rem;
+		font-weight: 800;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		color: var(--text-muted, #888);
+	}
+
+	.plan-status {
+		display: inline-flex;
+		align-items: center;
+		padding: 2px 10px;
+		border-radius: 9999px;
+		font-size: 0.65rem;
+		font-weight: 800;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+	}
+
+	.status-draft     { background: #f5f5f5;  color: #616161; border: 1px solid #e0e0e0; }
+	.status-approved  { background: #e8f5e9;  color: #2e7d32; border: 1px solid #a5d6a7; }
+	.status-executing { background: #e3f2fd;  color: #1565c0; border: 1px solid #90caf9; }
+	.status-completed { background: #f1f8e9;  color: #33691e; border: 1px solid #aed581; }
+	.status-failed    { background: #fce4ec;  color: #c62828; border: 1px solid #ef9a9a; }
+
+	.plan-global-actions {
+		display: flex;
+		gap: 0.4rem;
+	}
+
+	/* Steps list */
+	.steps-list {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.steps-list-item {
+		animation: bounceIn 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
+	}
+
+	.steps-list-item:nth-child(1)  { animation-delay: 0.04s; }
+	.steps-list-item:nth-child(2)  { animation-delay: 0.08s; }
+	.steps-list-item:nth-child(3)  { animation-delay: 0.12s; }
+	.steps-list-item:nth-child(4)  { animation-delay: 0.16s; }
+	.steps-list-item:nth-child(5)  { animation-delay: 0.20s; }
+	.steps-list-item:nth-child(6)  { animation-delay: 0.24s; }
+	.steps-list-item:nth-child(7)  { animation-delay: 0.28s; }
+	.steps-list-item:nth-child(8)  { animation-delay: 0.32s; }
+
+	@keyframes bounceIn {
+		from { opacity: 0; transform: translateY(10px) scale(0.97); }
+		to   { opacity: 1; transform: translateY(0) scale(1); }
+	}
+</style>

package/ftm-inbox/src/lib/components/StreamPanel.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { afterUpdate } from 'svelte';
+
+	export let lines: string[] = [];
+	export let progress: string = '';
+	export let autoScroll = true;
+
+	let container: HTMLDivElement;
+
+	afterUpdate(() => {
+		if (autoScroll && container) {
+			container.scrollTop = container.scrollHeight;
+		}
+	});
+</script>
+
+<div class="stream-panel">
+	{#if progress}
+		<div class="progress-bar">{progress}</div>
+	{/if}
+	<div class="stream-output" bind:this={container}>
+		{#each lines as line, i (i)}
+			<div class="stream-line">{line}</div>
+		{/each}
+		{#if lines.length === 0}
+			<div class="stream-empty">Waiting for output...</div>
+		{/if}
+	</div>
+	<div class="stream-controls">
+		<label class="scroll-toggle">
+			<input type="checkbox" bind:checked={autoScroll} />
+			<span>Auto-scroll</span>
+		</label>
+		<span class="line-count">{lines.length} lines</span>
+	</div>
+</div>
+
+<style>
+	.stream-panel {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		font-family: 'Menlo', 'Courier New', monospace;
+		font-size: 0.75rem;
+	}
+
+	.progress-bar {
+		padding: 0.4rem 0.75rem;
+		background: rgba(76, 175, 80, 0.1);
+		border-bottom: 1px solid var(--border-card);
+		font-weight: 700;
+		color: var(--accent-primary);
+		font-size: 0.7rem;
+	}
+
+	.stream-output {
+		flex: 1;
+		overflow-y: auto;
+		padding: 0.5rem 0.75rem;
+	}
+
+	.stream-line {
+		padding: 1px 0;
+		color: var(--text-secondary);
+		white-space: pre-wrap;
+		word-break: break-all;
+		line-height: 1.5;
+	}
+
+	.stream-empty {
+		color: var(--text-muted);
+		font-style: italic;
+	}
+
+	.stream-controls {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.3rem 0.75rem;
+		border-top: 1px solid var(--border-card);
+		font-size: 0.65rem;
+		color: var(--text-muted);
+	}
+
+	.scroll-toggle {
+		display: flex;
+		align-items: center;
+		gap: 0.3rem;
+		cursor: pointer;
+	}
+
+	.scroll-toggle input {
+		margin: 0;
+	}
+
+	.line-count {
+		font-variant-numeric: tabular-nums;
+	}
+</style>