feed-the-machine 1.1.0 → 1.3.0

package/ftm-inbox/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "ftm-inbox",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "svelte": "^4.2.7",
+    "svelte-check": "^3.6.0",
+    "tailwindcss": "^3.4.0",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.3"
+  }
+}

package/ftm-inbox/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {}
+	}
+};

package/ftm-inbox/src/app.css

@@ -0,0 +1,199 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ─── Kawaii CSS Custom Properties ─── */
+
+.theme-light {
+	--bg-primary: #e8f5e9;
+	--bg-secondary: #f1f8f1;
+	--bg-card: #fefefe;
+	--bg-sidebar: #f5fbf5;
+	--bg-drawer: #fafafa;
+	--border-accent: #a5d6a7;
+	--border-card: #c8e6c9;
+	--text-primary: #1b3a1b;
+	--text-secondary: #4a7a4a;
+	--text-muted: #7aaa7a;
+	--accent-primary: #4caf50;
+	--accent-hover: #388e3c;
+	--shadow-card: 0 4px 24px 0 rgba(76, 175, 80, 0.10);
+	--shadow-card-hover: 0 6px 32px 0 rgba(76, 175, 80, 0.18);
+	--grid-color: rgba(76, 175, 80, 0.07);
+	--scrollbar-thumb: #c8e6c9;
+	--scrollbar-track: #f1f8f1;
+}
+
+.theme-dark {
+	--bg-primary: #1b2e1b;
+	--bg-secondary: #1e331e;
+	--bg-card: #243824;
+	--bg-sidebar: #1e331e;
+	--bg-drawer: #1a2a1a;
+	--border-accent: #69f0ae;
+	--border-card: #2e7d32;
+	--text-primary: #e8f5e9;
+	--text-secondary: #a5d6a7;
+	--text-muted: #66bb6a;
+	--accent-primary: #69f0ae;
+	--accent-hover: #b2ffdb;
+	--shadow-card: 0 0 0 1px #69f0ae33, 0 4px 24px 0 rgba(105, 240, 174, 0.12);
+	--shadow-card-hover: 0 0 0 2px #69f0ae55, 0 6px 32px 0 rgba(105, 240, 174, 0.22);
+	--grid-color: rgba(105, 240, 174, 0.05);
+	--scrollbar-thumb: #2e7d32;
+	--scrollbar-track: #1b2e1b;
+}
+
+/* ─── Base Styles ─── */
+
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+html {
+	height: 100%;
+	font-size: 16px;
+}
+
+body {
+	margin: 0;
+	padding: 0;
+	min-height: 100vh;
+	background-color: var(--bg-primary);
+	color: var(--text-primary);
+	font-family: 'Nunito', 'Quicksand', sans-serif;
+	transition: background-color 0.3s ease, color 0.3s ease;
+	/* Graph-paper grid background */
+	background-image:
+		linear-gradient(var(--grid-color) 1px, transparent 1px),
+		linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
+	background-size: 30px 30px;
+}
+
+/* ─── Scrollbar ─── */
+
+::-webkit-scrollbar {
+	width: 6px;
+	height: 6px;
+}
+::-webkit-scrollbar-track {
+	background: var(--scrollbar-track);
+}
+::-webkit-scrollbar-thumb {
+	background: var(--scrollbar-thumb);
+	border-radius: 9999px;
+}
+
+/* ─── Typography ─── */
+
+h1, h2, h3, h4, h5, h6 {
+	font-family: 'Nunito', sans-serif;
+	font-weight: 800;
+	color: var(--text-primary);
+	margin: 0;
+}
+
+p {
+	margin: 0;
+	line-height: 1.6;
+}
+
+/* ─── Kawaii Card ─── */
+
+.card-kawaii {
+	background: var(--bg-card);
+	border: 2px solid var(--border-card);
+	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);
+}
+
+.card-kawaii:hover {
+	box-shadow: var(--shadow-card-hover);
+}
+
+/* ─── Pill Button ─── */
+
+.btn-pill {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding: 0.5rem 1.25rem;
+	border-radius: 9999px;
+	font-family: 'Nunito', sans-serif;
+	font-weight: 700;
+	font-size: 0.875rem;
+	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;
+	user-select: none;
+}
+
+.btn-pill:hover {
+	transform: scale(1.06) translateY(-1px);
+}
+
+.btn-pill:active {
+	transform: scale(0.96);
+}
+
+.btn-pill-primary {
+	background-color: var(--accent-primary);
+	color: #fff;
+	box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
+}
+
+.btn-pill-primary:hover {
+	background-color: var(--accent-hover);
+	box-shadow: 0 4px 16px rgba(76, 175, 80, 0.4);
+}
+
+.btn-pill-ghost {
+	background-color: transparent;
+	color: var(--text-secondary);
+	border: 2px solid var(--border-card);
+}
+
+.btn-pill-ghost:hover {
+	border-color: var(--accent-primary);
+	color: var(--accent-primary);
+}
+
+/* ─── Status Badge Colors ─── */
+
+.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; }
+
+/* ─── Animations ─── */
+
+@keyframes bounceIn {
+	0%   { opacity: 0; transform: scale(0.8); }
+	100% { opacity: 1; transform: scale(1); }
+}
+
+@keyframes fadeUp {
+	0%   { opacity: 0; transform: translateY(8px); }
+	100% { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slideDown {
+	0%   { opacity: 0; transform: translateY(-8px); }
+	100% { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes drawerOpen {
+	0%   { transform: translateY(100%); }
+	100% { transform: translateY(0); }
+}
+
+.animate-bounce-in  { animation: bounceIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) both; }
+.animate-fade-up    { animation: fadeUp 0.3s ease-out both; }
+.animate-slide-down { animation: slideDown 0.3s ease-out both; }

package/ftm-inbox/src/app.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap"
+			rel="stylesheet"
+		/>
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover" class="theme-light">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

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

@@ -0,0 +1,166 @@
+/**
+ * API client for the FTM Inbox backend.
+ */
+
+const API_BASE = 'http://localhost:8042';
+
+export interface UnifiedTask {
+	id: number;
+	source: string;
+	source_id: string;
+	title: string;
+	body: string;
+	status: string;
+	priority: string;
+	assignee: string | null;
+	requester: string | null;
+	created_at: string | null;
+	updated_at: string | null;
+	tags: string[];
+	custom_fields: Record<string, unknown>;
+	source_url: string | null;
+	content_hash: string | null;
+	ingested_at: string | null;
+}
+
+export interface InboxResponse {
+	tasks: UnifiedTask[];
+	total: number;
+	page: number;
+	per_page: number;
+}
+
+export async function fetchInbox(source?: string, page = 1): Promise<InboxResponse> {
+	const params = new URLSearchParams({ page: String(page) });
+	if (source && source !== 'all') params.set('source', source);
+	const res = await fetch(`${API_BASE}/api/inbox?${params}`);
+	if (!res.ok) throw new Error(`API error: ${res.status}`);
+	return res.json();
+}
+
+export async function fetchSources(): Promise<{ name: string; count: number }[]> {
+	const res = await fetch(`${API_BASE}/api/inbox/sources`);
+	if (!res.ok) return [];
+	const data = await res.json();
+	return data.sources ?? [];
+}
+
+// ---------------------------------------------------------------------------
+// Plan types
+// ---------------------------------------------------------------------------
+
+export interface PlanStep {
+	id: number;
+	title: string;
+	target_system: string;
+	method_primary: string;
+	method_fallback: string;
+	risk_level: string;
+	approval_required: boolean;
+	rollback: string;
+	status: string;
+}
+
+export interface Plan {
+	id: number;
+	task_id: number;
+	steps: PlanStep[];
+	status: string;
+	yaml_content: string;
+	created_at: string | null;
+	updated_at: string | null;
+}
+
+// ---------------------------------------------------------------------------
+// Plan API functions
+// ---------------------------------------------------------------------------
+
+export async function generatePlan(taskId: number): Promise<Plan> {
+	const res = await fetch(`${API_BASE}/api/tasks/${taskId}/generate-plan`, {
+		method: 'POST'
+	});
+	if (!res.ok) {
+		const err = await res.json().catch(() => ({ detail: res.statusText }));
+		throw new Error(err.detail ?? `API error: ${res.status}`);
+	}
+	return res.json();
+}
+
+export async function getPlan(taskId: number): Promise<Plan | null> {
+	const res = await fetch(`${API_BASE}/api/tasks/${taskId}/plan`);
+	if (!res.ok) return null;
+	const data = await res.json();
+	// Backend returns { plan: null } when no plan exists
+	if ('plan' in data && data.plan === null) return null;
+	return data as Plan;
+}
+
+export async function approveStep(taskId: number, stepId: number): Promise<Plan> {
+	const res = await fetch(`${API_BASE}/api/tasks/${taskId}/plan/steps/${stepId}/approve`, {
+		method: 'POST'
+	});
+	if (!res.ok) {
+		const err = await res.json().catch(() => ({ detail: res.statusText }));
+		throw new Error(err.detail ?? `API error: ${res.status}`);
+	}
+	return res.json();
+}
+
+export async function approveAllSteps(taskId: number): Promise<Plan> {
+	const res = await fetch(`${API_BASE}/api/tasks/${taskId}/plan/approve-all`, {
+		method: 'POST'
+	});
+	if (!res.ok) {
+		const err = await res.json().catch(() => ({ detail: res.statusText }));
+		throw new Error(err.detail ?? `API error: ${res.status}`);
+	}
+	return res.json();
+}
+
+// ---------------------------------------------------------------------------
+// Execution types
+// ---------------------------------------------------------------------------
+
+export interface AuditEntry {
+	id: number;
+	step_id: string;
+	action_type: string;
+	target_system: string;
+	target_object: string;
+	mutation_performed: string;
+	result: Record<string, unknown>;
+	rollback_available: boolean;
+	created_at: string;
+}
+
+// ---------------------------------------------------------------------------
+// Execution API functions
+// ---------------------------------------------------------------------------
+
+export async function startExecution(taskId: number): Promise<Record<string, unknown>> {
+	const res = await fetch(`${API_BASE}/api/tasks/${taskId}/execute`, { method: 'POST' });
+	if (!res.ok) {
+		const err = await res.json().catch(() => ({ detail: res.statusText }));
+		throw new Error(err.detail ?? `API error: ${res.status}`);
+	}
+	return res.json();
+}
+
+export async function pauseExecution(taskId: number): Promise<void> {
+	await fetch(`${API_BASE}/api/tasks/${taskId}/pause`, { method: 'POST' });
+}
+
+export async function resumeExecution(taskId: number): Promise<void> {
+	await fetch(`${API_BASE}/api/tasks/${taskId}/resume`, { method: 'POST' });
+}
+
+export async function retryStep(taskId: number, stepId: number): Promise<void> {
+	await fetch(`${API_BASE}/api/tasks/${taskId}/steps/${stepId}/retry`, { method: 'POST' });
+}
+
+export async function getAuditLog(taskId: number): Promise<AuditEntry[]> {
+	const res = await fetch(`${API_BASE}/api/tasks/${taskId}/audit-log`);
+	if (!res.ok) return [];
+	const data = await res.json();
+	return data.entries ?? [];
+}

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

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import type { AuditEntry } from '$lib/api';
+
+	export let entries: AuditEntry[] = [];
+
+	const levelColors: Record<string, string> = {
+		info: '#66bb6a',
+		warn: '#ffd54f',
+		success: '#4caf50',
+		error: '#ef5350'
+	};
+
+	function levelFromAction(entry: AuditEntry): string {
+		const result = entry.result as Record<string, unknown>;
+		if (result?.status === 'failed') return 'error';
+		if (result?.status === 'completed') return 'success';
+		return 'info';
+	}
+
+	function formatTime(dateStr: string): string {
+		try {
+			return new Date(dateStr).toLocaleTimeString('en-GB', { hour12: false });
+		} catch {
+			return dateStr;
+		}
+	}
+</script>
+
+<div class="exec-log">
+	{#each entries as entry (entry.id)}
+		{@const level = levelFromAction(entry)}
+		<div class="log-entry" style="border-left-color: {levelColors[level] ?? '#66bb6a'}">
+			<span class="log-time">{formatTime(entry.created_at)}</span>
+			<span class="log-action">{entry.action_type}</span>
+			<span class="log-target">{entry.target_object}</span>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.exec-log {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+
+	.log-entry {
+		display: flex;
+		flex-direction: column;
+		gap: 0.1rem;
+		padding: 0.35rem 0.5rem;
+		border-radius: 8px;
+		font-size: 0.72rem;
+		border-left: 3px solid #66bb6a;
+		transition: background 0.1s;
+	}
+
+	.log-entry:hover {
+		background: rgba(76, 175, 80, 0.04);
+	}
+
+	.log-time {
+		font-family: 'Menlo', monospace;
+		font-size: 0.65rem;
+		color: var(--text-muted);
+	}
+
+	.log-action {
+		font-weight: 700;
+		color: var(--text-secondary);
+		text-transform: uppercase;
+		font-size: 0.6rem;
+		letter-spacing: 0.05em;
+	}
+
+	.log-target {
+		color: var(--text-primary);
+		font-weight: 600;
+		line-height: 1.4;
+	}
+</style>

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

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+	import TaskCard from './TaskCard.svelte';
+	import PillButton from './ui/PillButton.svelte';
+	import EmptyState from './ui/EmptyState.svelte';
+	import { fetchInbox, type UnifiedTask } from '$lib/api';
+
+	export let selectedTaskId: number | null = null;
+
+	const dispatch = createEventDispatcher<{
+		selectTask: UnifiedTask;
+		generatePlan: UnifiedTask;
+	}>();
+
+	const sources = ['all', 'jira', 'freshservice', 'slack', 'gmail'] as const;
+	let activeSource: string = 'all';
+	let tasks: UnifiedTask[] = [];
+	let total = 0;
+	let loading = true;
+	let error = '';
+	let interval: ReturnType<typeof setInterval>;
+
+	async function loadTasks() {
+		try {
+			const res = await fetchInbox(activeSource === 'all' ? undefined : activeSource);
+			tasks = res.tasks;
+			total = res.total;
+			error = '';
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to load';
+		} finally {
+			loading = false;
+		}
+	}
+
+	function switchSource(source: string) {
+		activeSource = source;
+		loading = true;
+		loadTasks();
+	}
+
+	onMount(() => {
+		loadTasks();
+		interval = setInterval(loadTasks, 15000);
+	});
+
+	onDestroy(() => {
+		if (interval) clearInterval(interval);
+	});
+</script>
+
+<div class="inbox-feed">
+	<!-- Source tabs -->
+	<div class="source-tabs">
+		{#each sources as source}
+			<PillButton
+				variant={activeSource === source ? 'primary' : 'ghost'}
+				size="sm"
+				on:click={() => switchSource(source)}
+			>
+				{source === 'all' ? 'All' : source.charAt(0).toUpperCase() + source.slice(1)}
+			</PillButton>
+		{/each}
+	</div>
+
+	<!-- Task count -->
+	{#if !loading && tasks.length > 0}
+		<div class="task-count">{total} task{total !== 1 ? 's' : ''}</div>
+	{/if}
+
+	<!-- Task list -->
+	<div class="task-list">
+		{#if loading}
+			<div class="loading-placeholder">
+				{#each Array(3) as _}
+					<div class="skeleton-card"></div>
+				{/each}
+			</div>
+		{:else if error}
+			<EmptyState emoji="⚠️" title="Connection error" message={error} />
+		{:else if tasks.length === 0}
+			<EmptyState emoji="📭" title="No tasks yet" message="Enjoy the quiet! Tasks will appear when pollers find them." />
+		{:else}
+			{#each tasks as task (task.id)}
+				<TaskCard
+					{task}
+					selected={selectedTaskId === task.id}
+					on:select={(e) => dispatch('selectTask', e.detail)}
+					on:generatePlan={(e) => dispatch('generatePlan', e.detail)}
+				/>
+			{/each}
+		{/if}
+	</div>
+</div>
+
+<style>
+	.inbox-feed {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		height: 100%;
+	}
+
+	.source-tabs {
+		display: flex;
+		gap: 0.35rem;
+		flex-wrap: wrap;
+		padding-bottom: 0.25rem;
+	}
+
+	.task-count {
+		font-size: 0.68rem;
+		font-weight: 700;
+		color: var(--text-muted);
+		letter-spacing: 0.04em;
+	}
+
+	.task-list {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		flex: 1;
+		overflow-y: auto;
+	}
+
+	.loading-placeholder {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.skeleton-card {
+		height: 80px;
+		background: var(--bg-secondary);
+		border-radius: 12px;
+		animation: pulse 1.5s ease-in-out infinite;
+	}
+
+	@keyframes pulse {
+		0%, 100% { opacity: 0.4; }
+		50% { opacity: 0.7; }
+	}
+</style>