feed-the-machine 1.0.0 → 1.2.0

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

@@ -0,0 +1,190 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import { fly } from 'svelte/transition';
+	import StatusBadge from './ui/StatusBadge.svelte';
+	import PillButton from './ui/PillButton.svelte';
+	import type { UnifiedTask } from '$lib/api';
+
+	export let task: UnifiedTask;
+	export let selected = false;
+
+	const dispatch = createEventDispatcher<{
+		select: UnifiedTask;
+		generatePlan: UnifiedTask;
+	}>();
+
+	const sourceColors: Record<string, string> = {
+		jira: '#bbdefb',
+		freshservice: '#c8e6c9',
+		slack: '#e1bee7',
+		gmail: '#ffcdd2'
+	};
+
+	const sourceTextColors: Record<string, string> = {
+		jira: '#0d47a1',
+		freshservice: '#1b5e20',
+		slack: '#4a148c',
+		gmail: '#b71c1c'
+	};
+
+	function relativeTime(dateStr: string | null): string {
+		if (!dateStr) return '';
+		const now = Date.now();
+		const then = new Date(dateStr).getTime();
+		if (isNaN(then)) return '';
+		const diff = Math.floor((now - then) / 1000);
+		if (diff < 60) return 'just now';
+		if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+		if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+		return `${Math.floor(diff / 86400)}d ago`;
+	}
+
+	function mapStatus(s: string): 'pending' | 'planning' | 'approved' | 'executing' | 'complete' | 'failed' {
+		const map: Record<string, 'pending' | 'planning' | 'approved' | 'executing' | 'complete' | 'failed'> = {
+			open: 'pending',
+			pending: 'planning',
+			resolved: 'complete',
+			closed: 'complete',
+		};
+		return map[s] ?? 'pending';
+	}
+
+	const priorityIndicator: Record<string, string> = {
+		low: '○',
+		medium: '◑',
+		high: '●',
+		urgent: '◉'
+	};
+</script>
+
+<button
+	class="task-card"
+	class:selected
+	on:click={() => dispatch('select', task)}
+	transition:fly={{ x: -20, duration: 200 }}
+>
+	<div class="card-top">
+		<span
+			class="source-badge"
+			style="background: {sourceColors[task.source] ?? '#e0e0e0'}; color: {sourceTextColors[task.source] ?? '#333'}"
+		>
+			{task.source}
+		</span>
+		<span class="card-time">{relativeTime(task.ingested_at ?? task.created_at)}</span>
+	</div>
+
+	<p class="card-title">{task.title}</p>
+
+	<div class="card-meta">
+		{#if task.priority}
+			<span class="priority" title={task.priority}>
+				{priorityIndicator[task.priority] ?? '○'} {task.priority}
+			</span>
+		{/if}
+		{#if task.assignee}
+			<span class="assignee" title="Assignee: {task.assignee}">
+				{task.assignee}
+			</span>
+		{/if}
+	</div>
+
+	<div class="card-bottom">
+		<StatusBadge status={mapStatus(task.status)} />
+		<PillButton
+			variant="primary"
+			size="sm"
+			on:click={(e) => { e.stopPropagation(); dispatch('generatePlan', task); }}
+		>
+
+			Generate Plan
+		</PillButton>
+	</div>
+</button>
+
+<style>
+	.task-card {
+		display: block;
+		width: 100%;
+		text-align: left;
+		background: var(--bg-card);
+		border: 2px solid var(--border-card);
+		border-radius: 12px;
+		padding: 0.65rem 0.75rem;
+		cursor: pointer;
+		transition:
+			border-color 0.15s ease,
+			box-shadow 0.15s ease,
+			transform 0.15s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+		font-family: 'Nunito', sans-serif;
+	}
+
+	.task-card:hover {
+		border-color: var(--accent-primary);
+		transform: translateX(2px);
+	}
+
+	.task-card.selected {
+		border-color: var(--accent-primary);
+		box-shadow: var(--shadow-card-hover);
+		background: var(--bg-secondary);
+	}
+
+	.card-top {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 0.3rem;
+	}
+
+	.source-badge {
+		font-size: 0.65rem;
+		font-weight: 800;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		padding: 2px 8px;
+		border-radius: 9999px;
+	}
+
+	.card-time {
+		font-size: 0.68rem;
+		color: var(--text-muted);
+	}
+
+	.card-title {
+		font-size: 0.8rem;
+		font-weight: 700;
+		color: var(--text-primary);
+		margin: 0 0 0.3rem;
+		line-height: 1.35;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+
+	.card-meta {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		margin-bottom: 0.4rem;
+		font-size: 0.68rem;
+		color: var(--text-muted);
+	}
+
+	.priority {
+		font-weight: 700;
+	}
+
+	.assignee {
+		max-width: 120px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.card-bottom {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+</style>

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

@@ -0,0 +1,63 @@
+<script lang="ts">
+	export let emoji = '🌱';
+	export let title = 'Nothing here yet';
+	export let message = 'Items will appear here when they arrive.';
+</script>
+
+<div class="empty-state">
+	<div class="empty-emoji" aria-hidden="true">{emoji}</div>
+	<p class="empty-title">{title}</p>
+	<p class="empty-message">{message}</p>
+	{#if $$slots.action}
+		<div class="empty-action">
+			<slot name="action" />
+		</div>
+	{/if}
+</div>
+
+<style>
+	.empty-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		padding: 2.5rem 1rem;
+		text-align: center;
+		color: var(--text-muted);
+		min-height: 120px;
+	}
+
+	.empty-emoji {
+		font-size: 2.5rem;
+		line-height: 1;
+		margin-bottom: 0.25rem;
+		filter: saturate(0.7) opacity(0.8);
+		animation: gentle-float 3s ease-in-out infinite;
+	}
+
+	.empty-title {
+		font-family: 'Nunito', sans-serif;
+		font-weight: 700;
+		font-size: 0.95rem;
+		color: var(--text-secondary);
+		margin: 0;
+	}
+
+	.empty-message {
+		font-size: 0.8rem;
+		color: var(--text-muted);
+		margin: 0;
+		max-width: 200px;
+		line-height: 1.5;
+	}
+
+	.empty-action {
+		margin-top: 0.75rem;
+	}
+
+	@keyframes gentle-float {
+		0%, 100% { transform: translateY(0px); }
+		50%       { transform: translateY(-5px); }
+	}
+</style>

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

@@ -0,0 +1,86 @@
+<script lang="ts">
+	export let accent: 'green' | 'yellow' | 'blue' | 'coral' | 'teal' | 'orange' = 'green';
+	export let hoverable = false;
+	export let compact = false;
+
+	const accentColors: Record<typeof accent, string> = {
+		green:  '#4caf50',
+		yellow: '#ffd54f',
+		blue:   '#42a5f5',
+		coral:  '#ff7043',
+		teal:   '#26a69a',
+		orange: '#ff9800'
+	};
+
+	$: borderColor = accentColors[accent];
+</script>
+
+<div
+	class="kawaii-card"
+	class:hoverable
+	class:compact
+	style="--card-accent: {borderColor}"
+>
+	{#if $$slots.header}
+		<div class="card-header">
+			<slot name="header" />
+		</div>
+	{/if}
+
+	<div class="card-body">
+		<slot />
+	</div>
+
+	{#if $$slots.footer}
+		<div class="card-footer">
+			<slot name="footer" />
+		</div>
+	{/if}
+</div>
+
+<style>
+	.kawaii-card {
+		background: var(--bg-card);
+		border: 2px solid var(--border-card);
+		border-left: 4px solid var(--card-accent);
+		border-radius: 16px;
+		box-shadow: var(--shadow-card);
+		transition:
+			box-shadow 0.2s ease,
+			transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55),
+			border-color 0.2s ease;
+		overflow: hidden;
+	}
+
+	.kawaii-card.hoverable:hover {
+		box-shadow: var(--shadow-card-hover);
+		transform: translateY(-2px);
+		border-color: var(--card-accent);
+	}
+
+	.kawaii-card.hoverable:active {
+		transform: translateY(0);
+	}
+
+	.card-header {
+		padding: 12px 16px 8px;
+		border-bottom: 1px solid var(--border-card);
+	}
+
+	.card-body {
+		padding: 16px;
+	}
+
+	.compact .card-body {
+		padding: 10px 14px;
+	}
+
+	.compact .card-header {
+		padding: 8px 14px 6px;
+	}
+
+	.card-footer {
+		padding: 8px 16px 12px;
+		border-top: 1px solid var(--border-card);
+	}
+</style>

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

@@ -0,0 +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>

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

@@ -0,0 +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>

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

@@ -0,0 +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>