feat: bootstrap vela UI and gateway workspace

Establish the monorepo, tooling, and starter apps so UI and gateway development can begin from a documented, runnable baseline.
2026-04-08 17:49:46 +02:00
commit bba0095bc0
23 changed files with 2023 additions and 0 deletions
--- a/apps/vela-ui/src/app.html
+++ b/apps/vela-ui/src/app.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
--- a/apps/vela-ui/src/routes/+page.svelte
+++ b/apps/vela-ui/src/routes/+page.svelte
@@ -0,0 +1,101 @@
+<svelte:head>
+	<title>Vela UI</title>
+	<meta
+		name="description"
+		content="Minimal starter UI for the Vela voice assistant."
+	/>
+</svelte:head>
+
+<script>
+	const appStatus = 'Bootstrapped';
+	const nextFocus = 'Wire the voice session contract to the gateway.';
+</script>
+
+<div class="page">
+	<section class="card">
+		<p class="eyebrow">Vela UI</p>
+		<h1>Minimal SvelteKit starter</h1>
+		<p>
+			This workspace now runs as the browser shell for Vela. The voice controls, transcript, and
+			streaming session UI will be added in later increments.
+		</p>
+
+		<div class="meta">
+			<div>
+				<span>Status</span>
+				<strong>{appStatus}</strong>
+			</div>
+			<div>
+				<span>Next</span>
+				<strong>{nextFocus}</strong>
+			</div>
+		</div>
+	</section>
+</div>
+
+<style>
+	:global(body) {
+		margin: 0;
+		font-family: Inter, system-ui, sans-serif;
+		background: #08111f;
+		color: #e6eef8;
+	}
+
+	.page {
+		min-height: 100vh;
+		display: grid;
+		place-items: center;
+		padding: 2rem;
+	}
+
+	.card {
+		max-width: 42rem;
+		padding: 2rem;
+		border: 1px solid #1f3147;
+		border-radius: 1rem;
+		background: linear-gradient(180deg, #0d1728 0%, #0a1321 100%);
+		box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
+	}
+
+	.eyebrow {
+		margin: 0 0 0.5rem;
+		text-transform: uppercase;
+		letter-spacing: 0.12em;
+		font-size: 0.8rem;
+		color: #8bb9ff;
+	}
+
+	h1 {
+		margin: 0 0 1rem;
+		font-size: clamp(2rem, 5vw, 3rem);
+	}
+
+	p {
+		margin: 0;
+		line-height: 1.6;
+		color: #c7d6e8;
+	}
+
+	.meta {
+		margin-top: 1.5rem;
+		display: grid;
+		gap: 1rem;
+	}
+
+	.meta div {
+		padding: 1rem;
+		border-radius: 0.75rem;
+		background: rgba(139, 185, 255, 0.08);
+	}
+
+	span {
+		display: block;
+		font-size: 0.85rem;
+		color: #8da3bf;
+		margin-bottom: 0.35rem;
+	}
+
+	strong {
+		font-size: 1rem;
+	}
+</style>