feed-the-machine 1.1.0 → 1.3.0

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

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { theme } from '$lib/theme';
+
+	let rotating = false;
+
+	function handleToggle() {
+		rotating = true;
+		theme.toggle();
+		setTimeout(() => (rotating = false), 400);
+	}
+</script>
+
+<button
+	class="theme-toggle"
+	class:rotating
+	on:click={handleToggle}
+	aria-label={$theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'}
+	title={$theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'}
+>
+	{#if $theme === 'light'}
+		<!-- Moon icon -->
+		<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+			<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+		</svg>
+	{:else}
+		<!-- Sun icon -->
+		<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+			<circle cx="12" cy="12" r="5" />
+			<line x1="12" y1="1" x2="12" y2="3" />
+			<line x1="12" y1="21" x2="12" y2="23" />
+			<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+			<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+			<line x1="1" y1="12" x2="3" y2="12" />
+			<line x1="21" y1="12" x2="23" y2="12" />
+			<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+			<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+		</svg>
+	{/if}
+</button>
+
+<style>
+	.theme-toggle {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 40px;
+		height: 40px;
+		border-radius: 9999px;
+		border: 2px solid var(--border-card);
+		background: var(--bg-card);
+		color: var(--text-secondary);
+		cursor: pointer;
+		transition:
+			background 0.2s ease,
+			border-color 0.2s ease,
+			color 0.2s ease,
+			transform 0.18s cubic-bezier(0.68, -0.55, 0.265, 1.55),
+			box-shadow 0.18s ease;
+	}
+
+	.theme-toggle:hover {
+		border-color: var(--accent-primary);
+		color: var(--accent-primary);
+		transform: scale(1.08);
+		box-shadow: 0 2px 12px rgba(76, 175, 80, 0.2);
+	}
+
+	.theme-toggle:active {
+		transform: scale(0.95);
+	}
+
+	.theme-toggle.rotating svg {
+		animation: spin-once 0.4s ease-in-out;
+	}
+
+	@keyframes spin-once {
+		from { transform: rotate(0deg); }
+		to   { transform: rotate(360deg); }
+	}
+</style>

package/ftm-inbox/src/lib/theme.ts

@@ -0,0 +1,47 @@
+import { writable } from 'svelte/store';
+import { browser } from '$app/environment';
+
+export type Theme = 'light' | 'dark';
+
+const STORAGE_KEY = 'ftm-inbox-theme';
+
+function getInitialTheme(): Theme {
+	if (!browser) return 'light';
+	const stored = localStorage.getItem(STORAGE_KEY) as Theme | null;
+	if (stored === 'light' || stored === 'dark') return stored;
+	// Respect system preference on first visit
+	return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+function createThemeStore() {
+	const { subscribe, set, update } = writable<Theme>(getInitialTheme());
+
+	function applyTheme(theme: Theme) {
+		if (!browser) return;
+		document.body.classList.remove('theme-light', 'theme-dark');
+		document.body.classList.add(`theme-${theme}`);
+		localStorage.setItem(STORAGE_KEY, theme);
+	}
+
+	return {
+		subscribe,
+		set(theme: Theme) {
+			applyTheme(theme);
+			set(theme);
+		},
+		toggle() {
+			update((current) => {
+				const next: Theme = current === 'light' ? 'dark' : 'light';
+				applyTheme(next);
+				return next;
+			});
+		},
+		init() {
+			const theme = getInitialTheme();
+			applyTheme(theme);
+			set(theme);
+		}
+	};
+}
+
+export const theme = createThemeStore();

package/ftm-inbox/src/routes/+layout.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import '../app.css';
+	import { onMount } from 'svelte';
+	import { theme } from '$lib/theme';
+	import ThemeToggle from '$lib/components/ui/ThemeToggle.svelte';
+
+	onMount(() => {
+		theme.init();
+	});
+</script>
+
+<div class="app-shell">
+	<!-- Top nav bar -->
+	<header class="topnav">
+		<div class="topnav-brand">
+			<span class="brand-dot" aria-hidden="true">◉</span>
+			<span class="brand-name">ftm inbox</span>
+		</div>
+		<div class="topnav-actions">
+			<ThemeToggle />
+		</div>
+	</header>
+
+	<!-- Page content (three-column layout lives in +page.svelte) -->
+	<slot />
+</div>
+
+<style>
+	.app-shell {
+		display: flex;
+		flex-direction: column;
+		min-height: 100vh;
+	}
+
+	/* ─── Top nav ─── */
+	.topnav {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.6rem 1.25rem;
+		background: var(--bg-card);
+		border-bottom: 2px solid var(--border-card);
+		position: sticky;
+		top: 0;
+		z-index: 50;
+		box-shadow: 0 2px 8px rgba(76, 175, 80, 0.07);
+	}
+
+	.topnav-brand {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		font-family: 'Nunito', sans-serif;
+		font-weight: 800;
+		font-size: 1.1rem;
+		color: var(--text-primary);
+		user-select: none;
+	}
+
+	.brand-dot {
+		color: var(--accent-primary);
+		font-size: 1rem;
+		animation: pulse-dot 2.5s ease-in-out infinite;
+	}
+
+	@keyframes pulse-dot {
+		0%, 100% { opacity: 1; }
+		50%       { opacity: 0.5; }
+	}
+
+	.topnav-actions {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+</style>

package/ftm-inbox/src/routes/+page.svelte

@@ -0,0 +1,401 @@
+<script lang="ts">
+	import KawaiiCard from '$lib/components/ui/KawaiiCard.svelte';
+	import StatusBadge from '$lib/components/ui/StatusBadge.svelte';
+	import PillButton from '$lib/components/ui/PillButton.svelte';
+	import EmptyState from '$lib/components/ui/EmptyState.svelte';
+	import StreamDrawer from '$lib/components/ui/StreamDrawer.svelte';
+	import InboxFeed from '$lib/components/InboxFeed.svelte';
+	import PlanView from '$lib/components/PlanView.svelte';
+	import type { UnifiedTask, Plan } from '$lib/api';
+	import { generatePlan, getPlan } from '$lib/api';
+	type StatusBadgeStatus = 'pending' | 'planning' | 'approved' | 'executing' | 'complete' | 'failed';
+
+	// Map arbitrary task status string to a valid StatusBadge value
+	function taskStatusBadge(s: string): StatusBadgeStatus {
+		const valid: StatusBadgeStatus[] = ['pending', 'planning', 'approved', 'executing', 'complete', 'failed'];
+		return (valid.includes(s as StatusBadgeStatus) ? s : 'pending') as StatusBadgeStatus;
+	}
+
+	const API_BASE = 'http://localhost:8042';
+
+	const sourceAccent: Record<string, 'blue' | 'green' | 'yellow' | 'coral'> = {
+		jira:          'blue',
+		freshservice:  'green',
+		slack:         'yellow',
+		gmail:         'coral'
+	};
+
+	let selectedTask: UnifiedTask | null = null;
+	let currentPlan: Plan | null = null;
+	let planLoading = false;
+	let drawerOpen = false;
+	let drawerLines: string[] = [];
+	let auditEntries: { time: string; level: string; msg: string }[] = [];
+
+	function addAudit(level: 'info' | 'warn' | 'success' | 'error', msg: string) {
+		auditEntries = [
+			...auditEntries,
+			{ time: new Date().toLocaleTimeString('en-GB', { hour12: false }), level, msg }
+		];
+	}
+
+	async function handleSelectTask(e: CustomEvent<UnifiedTask>) {
+		selectedTask = e.detail;
+		currentPlan = null;
+		// Load existing plan for this task if one exists
+		try {
+			currentPlan = await getPlan(e.detail.id);
+		} catch {
+			// No plan yet — that's fine
+		}
+	}
+
+	async function handleGeneratePlan(e: CustomEvent<UnifiedTask>) {
+		selectedTask = e.detail;
+		currentPlan = null;
+		planLoading = true;
+		drawerLines = [];
+		drawerOpen = true;
+
+		const task = e.detail;
+		addAudit('info', `Plan generation started for: ${task.title}`);
+		drawerLines = [...drawerLines, `[${new Date().toLocaleTimeString()}] Generate plan: ${task.title}`];
+
+		// Use SSE stream for live output in the drawer
+		try {
+			const evtSource = new EventSource(`${API_BASE}/api/tasks/${task.id}/plan-stream`);
+
+			evtSource.onmessage = (event) => {
+				try {
+					const msg = JSON.parse(event.data);
+					if (msg.type === 'chunk') {
+						drawerLines = [...drawerLines, msg.text.trimEnd()];
+					} else if (msg.type === 'done') {
+						currentPlan = msg.plan as Plan;
+						planLoading = false;
+						addAudit('success', `Plan ready: ${currentPlan.steps.length} steps`);
+						drawerLines = [...drawerLines, `Plan ready — ${currentPlan.steps.length} steps generated.`];
+						evtSource.close();
+					} else if (msg.type === 'error') {
+						addAudit('error', `Plan failed: ${msg.message}`);
+						drawerLines = [...drawerLines, `Error: ${msg.message}`];
+						planLoading = false;
+						evtSource.close();
+					}
+				} catch {
+					// Ignore malformed SSE frames
+				}
+			};
+
+			evtSource.onerror = () => {
+				planLoading = false;
+				addAudit('warn', 'SSE stream closed unexpectedly');
+				evtSource.close();
+			};
+		} catch (err) {
+			// Fallback: direct POST without streaming
+			try {
+				const plan = await generatePlan(task.id);
+				currentPlan = plan;
+				addAudit('success', `Plan ready: ${plan.steps.length} steps`);
+			} catch (genErr) {
+				addAudit('error', `Plan generation failed: ${genErr}`);
+			} finally {
+				planLoading = false;
+			}
+		}
+	}
+
+	function handlePlanUpdated(e: CustomEvent<Plan>) {
+		currentPlan = e.detail;
+		addAudit('info', `Plan updated — status: ${e.detail.status}`);
+	}
+</script>
+
+<!-- Three-column layout + bottom drawer -->
+<div class="layout-grid">
+	<!-- Left: Task Inbox -->
+	<aside class="sidebar sidebar-left" aria-label="Task inbox">
+		<div class="sidebar-header">
+			<h2 class="sidebar-title">Inbox</h2>
+		</div>
+		<div class="sidebar-body">
+			<InboxFeed
+				selectedTaskId={selectedTask?.id ?? null}
+				on:selectTask={handleSelectTask}
+				on:generatePlan={handleGeneratePlan}
+			/>
+		</div>
+	</aside>
+
+	<!-- Center: Plan Viewer -->
+	<section class="center-panel" aria-label="Plan viewer">
+		{#if selectedTask}
+			<div class="plan-viewer">
+				<div class="plan-header">
+					<div class="plan-header-top">
+						<span class="plan-id">{selectedTask.source}:{selectedTask.source_id}</span>
+						<StatusBadge status={taskStatusBadge(selectedTask.status)} />
+					</div>
+					<h1 class="plan-title">{selectedTask.title}</h1>
+					{#if selectedTask.body}
+						<p class="plan-body">{selectedTask.body}</p>
+					{/if}
+				</div>
+
+				<KawaiiCard accent={sourceAccent[selectedTask.source] ?? 'green'}>
+					<span slot="header" class="card-label">Execution Plan</span>
+
+					<PlanView
+						plan={currentPlan}
+						loading={planLoading}
+						on:planUpdated={handlePlanUpdated}
+					/>
+
+					<div slot="footer" class="plan-actions">
+						<PillButton
+							variant="primary"
+							size="sm"
+							disabled={planLoading}
+							on:click={() => { if (selectedTask) handleGeneratePlan(new CustomEvent('generatePlan', { detail: selectedTask })); }}
+						>
+							{planLoading ? 'Generating…' : currentPlan ? 'Regenerate Plan' : 'Generate Plan'}
+						</PillButton>
+						{#if selectedTask.source_url}
+							<PillButton variant="ghost" size="sm" on:click={() => window.open(selectedTask?.source_url ?? '', '_blank')}>
+								Open Source
+							</PillButton>
+						{/if}
+					</div>
+				</KawaiiCard>
+			</div>
+		{:else}
+			<EmptyState
+				emoji="🗂️"
+				title="Select a task"
+				message="Choose a task from the inbox to view its plan."
+			/>
+		{/if}
+	</section>
+
+	<!-- Right: Audit Log -->
+	<aside class="sidebar sidebar-right" aria-label="Audit log">
+		<div class="sidebar-header">
+			<h2 class="sidebar-title">Audit Log</h2>
+			{#if auditEntries.length > 0}
+				<span class="sidebar-count">{auditEntries.length}</span>
+			{/if}
+		</div>
+		<div class="sidebar-body">
+			{#if auditEntries.length === 0}
+				<EmptyState
+					emoji="📋"
+					title="No events yet"
+					message="Audit events will appear here."
+				/>
+			{:else}
+				<div class="audit-list">
+					{#each auditEntries as entry, i (i)}
+						<div class="audit-entry audit-{entry.level}">
+							<span class="audit-time">{entry.time}</span>
+							<span class="audit-msg">{entry.msg}</span>
+						</div>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	</aside>
+</div>
+
+<!-- Bottom drawer for streaming agent output -->
+<StreamDrawer bind:open={drawerOpen} lines={drawerLines} />
+
+<style>
+	/* ─── Three-column layout ─── */
+	.layout-grid {
+		display: flex;
+		flex: 1;
+		height: calc(100vh - 57px - 36px); /* minus nav height minus drawer handle */
+		overflow: hidden;
+	}
+
+	.sidebar {
+		display: flex;
+		flex-direction: column;
+		background: var(--bg-sidebar);
+		overflow: hidden;
+		flex-shrink: 0;
+	}
+
+	.sidebar-left {
+		width: 280px;
+		border-right: 1px solid var(--border-card);
+	}
+
+	.sidebar-right {
+		width: 320px;
+		border-left: 1px solid var(--border-card);
+	}
+
+	.sidebar-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.75rem 1rem 0.5rem;
+		border-bottom: 1px solid var(--border-card);
+		background: var(--bg-card);
+		flex-shrink: 0;
+	}
+
+	.sidebar-title {
+		font-size: 0.72rem;
+		font-weight: 800;
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
+		color: var(--text-muted);
+		margin: 0;
+	}
+
+	.sidebar-count {
+		font-size: 0.68rem;
+		font-weight: 800;
+		background: var(--border-card);
+		color: var(--text-muted);
+		padding: 2px 7px;
+		border-radius: 9999px;
+	}
+
+	.sidebar-body {
+		flex: 1;
+		overflow-y: auto;
+		padding: 0.75rem;
+	}
+
+	.center-panel {
+		flex: 1;
+		overflow-y: auto;
+		padding: 1.25rem;
+		min-width: 0;
+	}
+
+	/* ─── Plan viewer ─── */
+	.plan-viewer {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		max-width: 680px;
+		margin: 0 auto;
+		animation: fadeUp 0.3s ease-out both;
+	}
+
+	@keyframes fadeUp {
+		from { opacity: 0; transform: translateY(8px); }
+		to   { opacity: 1; transform: translateY(0); }
+	}
+
+	.plan-header {
+		display: flex;
+		flex-direction: column;
+		gap: 0.4rem;
+	}
+
+	.plan-header-top {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+	}
+
+	.plan-id {
+		font-size: 0.75rem;
+		font-weight: 800;
+		letter-spacing: 0.06em;
+		color: var(--text-muted);
+		font-family: 'Menlo', monospace;
+	}
+
+	.plan-title {
+		font-size: 1.25rem;
+		font-weight: 800;
+		color: var(--text-primary);
+		line-height: 1.3;
+	}
+
+	.plan-body {
+		font-size: 0.85rem;
+		color: var(--text-secondary);
+		line-height: 1.5;
+		margin: 0;
+		max-height: 100px;
+		overflow-y: auto;
+	}
+
+	.card-label {
+		font-size: 0.72rem;
+		font-weight: 800;
+		text-transform: uppercase;
+		letter-spacing: 0.08em;
+		color: var(--text-muted);
+	}
+
+
+	.plan-actions {
+		display: flex;
+		gap: 0.5rem;
+		flex-wrap: wrap;
+	}
+
+	/* ─── Audit log ─── */
+	.audit-list {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+
+	.audit-entry {
+		display: flex;
+		flex-direction: column;
+		gap: 0.15rem;
+		padding: 0.4rem 0.5rem;
+		border-radius: 8px;
+		font-size: 0.72rem;
+		border-left: 3px solid transparent;
+		transition: background 0.1s;
+	}
+
+	.audit-entry:hover { background: rgba(76, 175, 80, 0.04); }
+
+	.audit-info    { border-left-color: #66bb6a; }
+	.audit-warn    { border-left-color: #ffd54f; background: rgba(255, 213, 79, 0.06); }
+	.audit-success { border-left-color: #4caf50; background: rgba(76, 175, 80, 0.06); }
+	.audit-error   { border-left-color: #ef5350; background: rgba(239, 83, 80, 0.06); }
+
+	.audit-time {
+		font-family: 'Menlo', monospace;
+		font-size: 0.65rem;
+		color: var(--text-muted);
+	}
+
+	.audit-msg {
+		color: var(--text-secondary);
+		font-weight: 600;
+		line-height: 1.4;
+	}
+
+	/* ─── Mobile responsive ─── */
+	@media (max-width: 768px) {
+		.layout-grid {
+			flex-direction: column;
+			height: auto;
+			overflow: visible;
+		}
+
+		.sidebar-left,
+		.sidebar-right {
+			width: 100%;
+			border-right: none;
+			border-left: none;
+			border-bottom: 1px solid var(--border-card);
+			max-height: 40vh;
+		}
+	}
+</style>

package/ftm-inbox/svelte.config.js

@@ -0,0 +1,12 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	preprocess: vitePreprocess(),
+	kit: {
+		adapter: adapter()
+	}
+};
+
+export default config;

package/ftm-inbox/tailwind.config.ts

@@ -0,0 +1,63 @@
+import type { Config } from 'tailwindcss';
+
+export default {
+	content: ['./src/**/*.{html,js,svelte,ts}'],
+	darkMode: 'class',
+	theme: {
+		extend: {
+			colors: {
+				kawaii: {
+					mint: {
+						50: '#e8f5e9',
+						100: '#c8e6c9',
+						200: '#a5d6a7',
+						300: '#81c784',
+						400: '#66bb6a',
+						500: '#4caf50',
+						600: '#43a047',
+						700: '#388e3c',
+						800: '#2e7d32',
+						900: '#1b5e20',
+						950: '#1b2e1b'
+					},
+					cream: '#fefefe',
+					coral: '#ffccbc',
+					yellow: '#fff9c4',
+					blue: '#bbdefb',
+					orange: '#ffe0b2',
+					teal: '#b2dfdb',
+					red: '#ffcdd2',
+					neon: '#69f0ae'
+				}
+			},
+			borderRadius: {
+				kawaii: '16px',
+				pill: '9999px'
+			},
+			fontFamily: {
+				kawaii: ['Nunito', 'Quicksand', 'sans-serif']
+			},
+			boxShadow: {
+				kawaii: '0 4px 24px 0 rgba(76, 175, 80, 0.10)',
+				'kawaii-md': '0 6px 32px 0 rgba(76, 175, 80, 0.15)',
+				'kawaii-glow': '0 0 0 2px #69f0ae, 0 4px 24px 0 rgba(105, 240, 174, 0.25)'
+			},
+			animation: {
+				'bounce-in': 'bounceIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) both',
+				'fade-up': 'fadeUp 0.3s ease-out both',
+				'spin-once': 'spin 0.4s ease-in-out'
+			},
+			keyframes: {
+				bounceIn: {
+					'0%': { opacity: '0', transform: 'scale(0.8)' },
+					'100%': { opacity: '1', transform: 'scale(1)' }
+				},
+				fadeUp: {
+					'0%': { opacity: '0', transform: 'translateY(8px)' },
+					'100%': { opacity: '1', transform: 'translateY(0)' }
+				}
+			}
+		}
+	},
+	plugins: []
+} satisfies Config;

package/ftm-inbox/tsconfig.json

@@ -0,0 +1,13 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true
+	}
+}

package/ftm-inbox/vite.config.ts

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});