@agentuity/cli 3.0.0-alpha.0 → 3.0.0-alpha.2

package/src/cmd/project/scaffold.ts

@@ -11,6 +11,7 @@ import { join } from 'node:path';
 import type { Logger } from '@agentuity/core';
 import * as tui from '../../tui';
 import type { FrameworkScaffold } from './frameworks';
+import { applyOverlay } from './frameworks';
 
 interface ScaffoldOptions {
 	/** Absolute path to the target directory */
@@ -73,7 +74,7 @@ export async function scaffoldFramework(options: ScaffoldOptions): Promise<void>
  *
  * - Adds @agentuity/cli as devDependency
  * - Merges deploy/build scripts into package.json
- * - Adds AI example files if requested
+ * - Applies template overlay (AI example files + landing page)
  * - Generates AGENTS.md documentation
  */
 async function augmentProject(
@@ -89,35 +90,22 @@ async function augmentProject(
 		callback: async (progress) => {
 			// Step 1: Merge package.json
 			await mergePackageJson(dest, framework);
-			progress(40);
-
-			// Step 2: Add AI example files
-			if (includeAiExample && framework.aiExample) {
-				const files = framework.aiExample();
-				for (const [relativePath, content] of Object.entries(files)) {
-					const filePath = join(dest, relativePath);
-					const dir = join(filePath, '..');
-					mkdirSync(dir, { recursive: true });
-					await Bun.write(filePath, content);
-					logger.debug('Created AI example: %s', relativePath);
-				}
-			}
-			progress(50);
-
-			// Step 3: Replace default landing page with Agentuity-branded page
-			if (framework.landingPage) {
-				const files = framework.landingPage();
-				for (const [relativePath, content] of Object.entries(files)) {
-					const filePath = join(dest, relativePath);
-					const dir = join(filePath, '..');
-					mkdirSync(dir, { recursive: true });
-					await Bun.write(filePath, content);
-					logger.debug('Created landing page: %s', relativePath);
+			progress(25);
+
+			// Step 2: Apply template overlay if configured
+			if (framework.overlayDir) {
+				if (includeAiExample) {
+					applyOverlay(dest, framework.overlayDir);
+					logger.debug('Applied template overlay: %s', framework.overlayDir);
+				} else {
+					// When AI example is not requested, we still want the landing page
+					// but without the API route. For now, skip the entire overlay.
+					logger.debug('Skipped template overlay (AI example not requested)');
 				}
 			}
 			progress(75);
 
-			// Step 4: Add .gitignore entries
+			// Step 3: Add .gitignore entries
 			await appendGitignore(dest);
 			progress(100);
 		},
@@ -137,13 +125,13 @@ async function mergePackageJson(dest: string, framework: FrameworkScaffold): Pro
 	pkg.scripts = pkg.scripts ?? {};
 
 	// Add @agentuity/cli as devDependency
-	pkg.devDependencies['@agentuity/cli'] = 'latest';
+	pkg.devDependencies['@agentuity/cli'] = '^3.0.0';
 
 	// Add framework-specific dependencies
 	if (framework.dependencies) {
 		for (const dep of framework.dependencies) {
 			if (!pkg.dependencies[dep]) {
-				pkg.dependencies[dep] = 'latest';
+				pkg.dependencies[dep] = dep.startsWith('@agentuity/') ? '^3.0.0' : 'latest';
 			}
 		}
 	}
@@ -152,7 +140,7 @@ async function mergePackageJson(dest: string, framework: FrameworkScaffold): Pro
 	if (framework.devDependencies) {
 		for (const dep of framework.devDependencies) {
 			if (!pkg.devDependencies[dep]) {
-				pkg.devDependencies[dep] = 'latest';
+				pkg.devDependencies[dep] = dep.startsWith('@agentuity/') ? '^3.0.0' : 'latest';
 			}
 		}
 	}

package/src/cmd/project/template-flow.ts

@@ -242,11 +242,13 @@ export async function runCreateFlow(options: CreateFlowOptions): Promise<CreateF
 
 	// Step 3: Ask about AI example
 	let includeAiExample = true;
-	if (isInteractive && selectedFramework.aiExample) {
+	if (isInteractive && selectedFramework.overlayDir) {
 		includeAiExample = await prompt.confirm({
 			message: 'Include an AI example? (OpenAI API route)',
 			initial: true,
 		});
+	} else if (!selectedFramework.overlayDir) {
+		includeAiExample = false;
 	}
 
 	// Step 4: Scaffold the framework

package/src/cmd/project/templates/astro/src/pages/api/translate.ts

@@ -0,0 +1,22 @@
+import type { APIRoute } from 'astro';
+import { generateText } from 'ai';
+import { openai } from '@ai-sdk/openai';
+
+export const POST: APIRoute = async ({ request }) => {
+	const { text, toLanguage, model = 'gpt-4o-mini' } = await request.json();
+
+	const { text: translation, usage } = await generateText({
+		model: openai(model),
+		prompt: `Translate the following text to ${toLanguage}. Return only the translation, nothing else.\n\n${text}`,
+	});
+
+	return new Response(
+		JSON.stringify({
+			translation,
+			tokens: usage?.totalTokens ?? 0,
+			model,
+			toLanguage,
+		}),
+		{ headers: { 'Content-Type': 'application/json' } },
+	);
+};

package/src/cmd/project/templates/astro/src/pages/index.astro

@@ -0,0 +1,160 @@
+---
+const LANGUAGES = ['Spanish', 'French', 'German', 'Chinese'] as const;
+const MODELS = ['gpt-4o-mini', 'gpt-4o', 'gpt-4.1-nano'] as const;
+const DEFAULT_TEXT =
+	'Welcome to Agentuity! This translation demo shows what you can build with the platform. It connects to AI models through our gateway — no separate API keys needed. Try translating this text into different languages to see it in action.';
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Agentuity + Astro</title>
+		<link
+			href="https://cdn.jsdelivr.net/npm/tailwindcss@4/@tailwindcss/postcss@4/index.min.css"
+			rel="stylesheet"
+		/>
+	</head>
+	<body style="background-color: oklch(0.141 0.005 285.823); margin: 0; font-family: system-ui, -apple-system, sans-serif;">
+		<div class="flex min-h-screen justify-center font-sans text-white">
+			<div class="flex w-full max-w-3xl flex-col gap-4 p-16">
+				<!-- Header -->
+				<div class="relative mb-8 flex flex-col items-center justify-center gap-2 text-center">
+					<svg
+						aria-hidden="true"
+						class="mb-4 h-auto w-12"
+						fill="none"
+						height="191"
+						viewBox="0 0 220 191"
+						width="220"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							clip-rule="evenodd"
+							d="M220 191H0L31.427 136.5H0L8 122.5H180.5L220 191ZM47.5879 136.5L24.2339 177H195.766L172.412 136.5H47.5879Z"
+							fill="var(--color-cyan-500)"
+							fill-rule="evenodd"
+						/>
+						<path
+							clip-rule="evenodd"
+							d="M110 0L157.448 82.5H189L197 96.5H54.5L110 0ZM78.7021 82.5L110 28.0811L141.298 82.5H78.7021Z"
+							fill="var(--color-cyan-500)"
+							fill-rule="evenodd"
+						/>
+					</svg>
+					<h1 class="text-5xl font-thin">Welcome to Agentuity</h1>
+					<p class="text-lg text-gray-400">
+						<span class="font-serif italic">Astro</span> + AI Gateway
+					</p>
+				</div>
+
+				<!-- Translate Form -->
+				<div class="flex flex-col gap-6 rounded-lg border border-gray-900 bg-black p-8 text-gray-400 shadow-2xl" id="form-container">
+					<div class="flex flex-wrap items-center gap-1.5">
+						Translate to
+						<select id="toLanguage" class="-mb-0.5 cursor-pointer appearance-none border-0 border-b border-dashed border-gray-700 bg-transparent font-normal text-white outline-none hover:border-b-cyan-400 focus:border-b-cyan-400">
+							{LANGUAGES.map((lang) => <option value={lang}>{lang}</option>)}
+						</select>
+						using
+						<select id="model" class="-mb-0.5 cursor-pointer appearance-none border-0 border-b border-dashed border-gray-700 bg-transparent font-normal text-white outline-none hover:border-b-cyan-400 focus:border-b-cyan-400">
+							{MODELS.map((m) => <option value={m}>{m}</option>)}
+						</select>
+						<div class="group relative z-0 ml-auto">
+							<div class="absolute inset-0 rounded-lg bg-linear-to-r from-cyan-700 via-blue-500 to-purple-600 opacity-75 blur-xl transition-all duration-700 group-hover:opacity-100 group-hover:blur-2xl" />
+							<div class="absolute inset-0 rounded-lg bg-cyan-500/50 opacity-50 blur-3xl" />
+							<button
+								id="translate-btn"
+								class="relative cursor-pointer rounded-lg bg-gray-950 px-4 py-2 font-semibold text-white shadow-2xl disabled:cursor-not-allowed disabled:opacity-50"
+								type="button"
+							>
+								Translate
+							</button>
+						</div>
+					</div>
+
+					<textarea
+						id="text-input"
+						class="z-10 min-h-28 resize-y rounded-md border border-gray-800 bg-gray-950 px-4 py-3 text-sm text-white focus:outline-2 focus:outline-offset-2 focus:outline-cyan-500"
+						placeholder="Enter text to translate..."
+						rows="4"
+					>{DEFAULT_TEXT}</textarea>
+
+					<div id="result" class="output rounded-md border border-gray-800 bg-gray-950 px-4 py-3 text-sm text-gray-600">
+						Translation will appear here
+					</div>
+				</div>
+
+				<!-- How it works -->
+				<div class="rounded-lg border border-gray-900 bg-black p-8">
+					<h3 class="m-0 mb-6 text-xl font-normal leading-none text-white">How it works</h3>
+					<div class="flex flex-col gap-6">
+						<div class="flex items-start gap-3">
+							<div class="flex size-4 shrink-0 items-center justify-center rounded border border-green-500 bg-green-950">
+								<svg aria-hidden="true" class="size-2.5" fill="none" height="24" stroke="var(--color-green-500)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M20 6 9 17l-5-5" /></svg>
+							</div>
+							<div>
+								<h4 class="-mt-0.5 mb-0.5 text-sm font-normal text-white">AI Gateway routing</h4>
+								<p class="text-xs text-gray-400"><code class="text-white">agentuity dev</code> automatically sets OPENAI_API_KEY and OPENAI_BASE_URL so the AI SDK routes through the Agentuity gateway.</p>
+							</div>
+						</div>
+						<div class="flex items-start gap-3">
+							<div class="flex size-4 shrink-0 items-center justify-center rounded border border-green-500 bg-green-950">
+								<svg aria-hidden="true" class="size-2.5" fill="none" height="24" stroke="var(--color-green-500)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M20 6 9 17l-5-5" /></svg>
+							</div>
+							<div>
+								<h4 class="-mt-0.5 mb-0.5 text-sm font-normal text-white">API endpoints</h4>
+								<p class="text-xs text-gray-400">Edit <code class="text-white">src/pages/api/translate.ts</code> to change the AI model, prompt, or add new endpoints.</p>
+							</div>
+						</div>
+						<div class="flex items-start gap-3">
+							<div class="flex size-4 shrink-0 items-center justify-center rounded border border-green-500 bg-green-950">
+								<svg aria-hidden="true" class="size-2.5" fill="none" height="24" stroke="var(--color-green-500)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M20 6 9 17l-5-5" /></svg>
+							</div>
+							<div>
+								<h4 class="-mt-0.5 mb-0.5 text-sm font-normal text-white">Astro</h4>
+								<p class="text-xs text-gray-400">Add pages in <code class="text-white">src/pages/</code> — content-focused framework with island architecture.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<script>
+			const btn = document.getElementById('translate-btn')!;
+			const textInput = document.getElementById('text-input')! as HTMLTextAreaElement;
+			const toLangSelect = document.getElementById('toLanguage')! as HTMLSelectElement;
+			const modelSelect = document.getElementById('model')! as HTMLSelectElement;
+			const resultDiv = document.getElementById('result')!;
+
+			btn.addEventListener('click', async () => {
+				const text = textInput.value;
+				const toLanguage = toLangSelect.value;
+				const model = modelSelect.value;
+
+				btn.textContent = 'Translating';
+				btn.setAttribute('disabled', '');
+				resultDiv.textContent = '';
+				resultDiv.className = 'rounded-md border border-gray-800 bg-gray-950 px-4 py-3 text-sm text-gray-600';
+
+				try {
+					const res = await fetch('/api/translate', {
+						method: 'POST',
+						headers: { 'Content-Type': 'application/json' },
+						body: JSON.stringify({ text, toLanguage, model }),
+					});
+					if (!res.ok) throw new Error(`API error ${res.status}`);
+					const data = await res.json();
+					resultDiv.className = 'output rounded-md border border-gray-800 bg-gray-950 px-4 py-3 text-sm text-cyan-500';
+					resultDiv.innerHTML = `${data.translation}<div class="flex gap-4 text-xs text-gray-500 mt-3">${data.tokens > 0 ? `<span>Tokens <strong class="text-gray-400">${data.tokens}</strong></span>` : ''}<span>Model <strong class="text-gray-400">${data.model}</strong></span><span>Language <strong class="text-gray-400">${data.toLanguage}</strong></span></div>`;
+				} catch (err) {
+					resultDiv.className = 'rounded-md border border-red-800 bg-red-950 px-4 py-3 text-sm text-red-400';
+					resultDiv.textContent = err instanceof Error ? err.message : 'Translation failed';
+				} finally {
+					btn.textContent = 'Translate';
+					btn.removeAttribute('disabled');
+				}
+			});
+		</script>
+	</body>
+</html>

package/src/cmd/project/templates/hono/src/index.ts

@@ -0,0 +1,103 @@
+import { Hono } from 'hono';
+import { generateText } from 'ai';
+import { openai } from '@ai-sdk/openai';
+
+const app = new Hono();
+
+// API route
+app.post('/api/translate', async (c) => {
+	const { text, toLanguage, model = 'gpt-4o-mini' } = await c.req.json();
+
+	const { text: translation, usage } = await generateText({
+		model: openai(model),
+		prompt: `Translate the following text to ${toLanguage}. Return only the translation, nothing else.\n\n${text}`,
+	});
+
+	return c.json({
+		translation,
+		tokens: usage?.totalTokens ?? 0,
+		model,
+		toLanguage,
+	});
+});
+
+// Landing page
+app.get('/', (c) => {
+	return c.html(`<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<title>Agentuity + Hono</title>
+	<link href="https://cdn.jsdelivr.net/npm/tailwindcss@4/@tailwindcss/postcss@4/index.min.css" rel="stylesheet" />
+	<style>
+		body { background-color: oklch(0.141 0.005 285.823); margin: 0; font-family: system-ui, -apple-system, sans-serif; }
+		[data-loading="true"]::after { content: '.'; display: inline-block; width: 1rem; animation: ellipsis 1.5s steps(4, end) infinite; text-align: left; }
+		@keyframes ellipsis { 0% { content: '.'; } 25% { content: '..'; } 50% { content: '...'; } 75% { content: ''; } }
+	</style>
+</head>
+<body>
+	<div class="flex min-h-screen justify-center font-sans text-white">
+		<div class="flex w-full max-w-3xl flex-col gap-4 p-16">
+			<div class="relative mb-8 flex flex-col items-center justify-center gap-2 text-center">
+				<svg aria-hidden="true" class="mb-4 h-auto w-12" fill="none" height="191" viewBox="0 0 220 191" width="220" xmlns="http://www.w3.org/2000/svg">
+					<path clip-rule="evenodd" d="M220 191H0L31.427 136.5H0L8 122.5H180.5L220 191ZM47.5879 136.5L24.2339 177H195.766L172.412 136.5H47.5879Z" fill="var(--color-cyan-500)" fill-rule="evenodd" />
+					<path clip-rule="evenodd" d="M110 0L157.448 82.5H189L197 96.5H54.5L110 0ZM78.7021 82.5L110 28.0811L141.298 82.5H78.7021Z" fill="var(--color-cyan-500)" fill-rule="evenodd" />
+				</svg>
+				<h1 class="text-5xl font-thin">Welcome to Agentuity</h1>
+				<p class="text-lg text-gray-400"><span class="font-serif italic">Hono</span> + AI Gateway</p>
+			</div>
+			<div class="flex flex-col gap-6 rounded-lg border border-gray-900 bg-black p-8 text-gray-400 shadow-2xl">
+				<div class="flex flex-wrap items-center gap-1.5">
+					Translate to
+					<select id="toLanguage" class="-mb-0.5 cursor-pointer appearance-none border-0 border-b border-dashed border-gray-700 bg-transparent font-normal text-white outline-none hover:border-b-cyan-400 focus:border-b-cyan-400">
+						<option value="Spanish">Spanish</option><option value="French">French</option><option value="German">German</option><option value="Chinese">Chinese</option>
+					</select>
+					using
+					<select id="model" class="-mb-0.5 cursor-pointer appearance-none border-0 border-b border-dashed border-gray-700 bg-transparent font-normal text-white outline-none hover:border-b-cyan-400 focus:border-b-cyan-400">
+						<option value="gpt-4o-mini">gpt-4o-mini</option><option value="gpt-4o">gpt-4o</option><option value="gpt-4.1-nano">gpt-4.1-nano</option>
+					</select>
+					<div class="group relative z-0 ml-auto">
+						<div class="absolute inset-0 rounded-lg bg-linear-to-r from-cyan-700 via-blue-500 to-purple-600 opacity-75 blur-xl transition-all duration-700 group-hover:opacity-100 group-hover:blur-2xl" />
+						<div class="absolute inset-0 rounded-lg bg-cyan-500/50 opacity-50 blur-3xl" />
+						<button id="translate-btn" class="relative cursor-pointer rounded-lg bg-gray-950 px-4 py-2 font-semibold text-white shadow-2xl disabled:cursor-not-allowed disabled:opacity-50" type="button">Translate</button>
+					</div>
+				</div>
+				<textarea id="text-input" class="z-10 min-h-28 resize-y rounded-md border border-gray-800 bg-gray-950 px-4 py-3 text-sm text-white focus:outline-2 focus:outline-offset-2 focus:outline-cyan-500" placeholder="Enter text to translate..." rows="4">Welcome to Agentuity! This translation demo shows what you can build with the platform. It connects to AI models through our gateway — no separate API keys needed. Try translating this text into different languages to see it in action.</textarea>
+				<div id="result" class="output rounded-md border border-gray-800 bg-gray-950 px-4 py-3 text-sm text-gray-600">Translation will appear here</div>
+			</div>
+			<div class="rounded-lg border border-gray-900 bg-black p-8">
+				<h3 class="m-0 mb-6 text-xl font-normal leading-none text-white">How it works</h3>
+				<div class="flex flex-col gap-6">
+					<div class="flex items-start gap-3"><div class="flex size-4 shrink-0 items-center justify-center rounded border border-green-500 bg-green-950"><svg aria-hidden="true" class="size-2.5" fill="none" height="24" stroke="var(--color-green-500)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M20 6 9 17l-5-5" /></svg></div><div><h4 class="-mt-0.5 mb-0.5 text-sm font-normal text-white">AI Gateway routing</h4><p class="text-xs text-gray-400"><code class="text-white">agentuity dev</code> automatically sets OPENAI_API_KEY and OPENAI_BASE_URL so the AI SDK routes through the Agentuity gateway.</p></div></div>
+					<div class="flex items-start gap-3"><div class="flex size-4 shrink-0 items-center justify-center rounded border border-green-500 bg-green-950"><svg aria-hidden="true" class="size-2.5" fill="none" height="24" stroke="var(--color-green-500)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M20 6 9 17l-5-5" /></svg></div><div><h4 class="-mt-0.5 mb-0.5 text-sm font-normal text-white">API routes</h4><p class="text-xs text-gray-400">Edit <code class="text-white">src/index.ts</code> to change the AI model, prompt, or add new routes.</p></div></div>
+					<div class="flex items-start gap-3"><div class="flex size-4 shrink-0 items-center justify-center rounded border border-green-500 bg-green-950"><svg aria-hidden="true" class="size-2.5" fill="none" height="24" stroke="var(--color-green-500)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M20 6 9 17l-5-5" /></svg></div><div><h4 class="-mt-0.5 mb-0.5 text-sm font-normal text-white">Hono</h4><p class="text-xs text-gray-400">Lightweight, fast web framework for the edge. Add routes in <code class="text-white">src/index.ts</code>.</p></div></div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<script>
+		const btn = document.getElementById('translate-btn');
+		const textInput = document.getElementById('text-input');
+		const toLangSelect = document.getElementById('toLanguage');
+		const modelSelect = document.getElementById('model');
+		const resultDiv = document.getElementById('result');
+		btn.addEventListener('click', async () => {
+			const text = textInput.value, toLanguage = toLangSelect.value, model = modelSelect.value;
+			btn.textContent = 'Translating'; btn.disabled = true;
+			resultDiv.textContent = ''; resultDiv.className = 'rounded-md border border-gray-800 bg-gray-950 px-4 py-3 text-sm text-gray-600';
+			try {
+				const res = await fetch('/api/translate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text, toLanguage, model }) });
+				if (!res.ok) throw new Error('API error ' + res.status);
+				const data = await res.json();
+				resultDiv.className = 'output rounded-md border border-gray-800 bg-gray-950 px-4 py-3 text-sm text-cyan-500';
+				resultDiv.innerHTML = data.translation + '<div class="flex gap-4 text-xs text-gray-500 mt-3">' + (data.tokens > 0 ? '<span>Tokens <strong class="text-gray-400">' + data.tokens + '</strong></span>' : '') + '<span>Model <strong class="text-gray-400">' + data.model + '</strong></span><span>Language <strong class="text-gray-400">' + data.toLanguage + '</strong></span></div>';
+			} catch (err) { resultDiv.className = 'rounded-md border border-red-800 bg-red-950 px-4 py-3 text-sm text-red-400'; resultDiv.textContent = err.message || 'Translation failed'; }
+			finally { btn.textContent = 'Translate'; btn.disabled = false; }
+		});
+	</script>
+</body>
+</html>`);
+});
+
+export default app;

package/src/cmd/project/templates/nextjs/src/app/api/translate/route.ts

@@ -0,0 +1,19 @@
+import { generateText } from 'ai';
+import { openai } from '@ai-sdk/openai';
+import { NextResponse } from 'next/server';
+
+export async function POST(request: Request) {
+	const { text, toLanguage, model = 'gpt-4o-mini' } = await request.json();
+
+	const { text: translation, usage } = await generateText({
+		model: openai(model),
+		prompt: `Translate the following text to ${toLanguage}. Return only the translation, nothing else.\n\n${text}`,
+	});
+
+	return NextResponse.json({
+		translation,
+		tokens: usage?.totalTokens ?? 0,
+		model,
+		toLanguage,
+	});
+}

package/src/cmd/project/templates/nextjs/src/app/globals.css

@@ -0,0 +1,74 @@
+@import 'tailwindcss';
+
+@theme {
+	/* Cyan (Agentuity Brand) */
+	--color-cyan-50: oklch(0.9812 0.027 196.72);
+	--color-cyan-100: oklch(0.965 0.0516 196.33);
+	--color-cyan-200: oklch(0.938 0.0956 195.64);
+	--color-cyan-300: oklch(0.9193 0.1285 195.15);
+	--color-cyan-400: oklch(0.9089 0.1478 194.87);
+	--color-cyan-500: oklch(0.9054 0.15455 194.769);
+	--color-cyan-600: oklch(0.7653 0.1306 194.77);
+	--color-cyan-700: oklch(0.6183 0.10555 194.769);
+	--color-cyan-800: oklch(0.462 0.078864 194.769);
+	--color-cyan-900: oklch(0.2907 0.0496 194.77);
+	--color-cyan-950: oklch(0.1932 0.033 194.77);
+
+	/* Gray (Zinc) */
+	--color-gray-50: oklch(0.985 0 0);
+	--color-gray-100: oklch(0.967 0.001 286.375);
+	--color-gray-200: oklch(0.92 0.004 286.32);
+	--color-gray-300: oklch(0.871 0.006 286.286);
+	--color-gray-400: oklch(0.705 0.015 286.067);
+	--color-gray-500: oklch(0.552 0.016 285.938);
+	--color-gray-600: oklch(0.442 0.017 285.786);
+	--color-gray-700: oklch(0.37 0.013 285.805);
+	--color-gray-800: oklch(0.274 0.006 286.033);
+	--color-gray-900: oklch(0.21 0.006 285.885);
+	--color-gray-950: oklch(0.141 0.005 285.823);
+
+	/* Green (for checkmarks) */
+	--color-green-500: oklch(0.723 0.219 149.579);
+	--color-green-950: oklch(0.171 0.052 150.3);
+
+	/* Red (for errors) */
+	--color-red-400: oklch(0.704 0.191 22.216);
+	--color-red-800: oklch(0.395 0.141 25.723);
+	--color-red-950: oklch(0.258 0.092 26.042);
+
+	/* Blue/Purple (for glow) */
+	--color-blue-500: oklch(0.623 0.214 259.815);
+	--color-purple-600: oklch(0.558 0.288 302.321);
+
+	/* Animations */
+	--animate-ellipsis: ellipsis 1.5s steps(4, end) infinite;
+
+	@keyframes ellipsis {
+		0% {
+			content: '.';
+		}
+		25% {
+			content: '..';
+		}
+		50% {
+			content: '...';
+		}
+		75% {
+			content: '';
+		}
+	}
+}
+
+[data-loading='true']::after {
+	content: '.';
+	@apply inline-block w-4 animate-ellipsis text-left;
+}
+
+body {
+	background-color: oklch(0.141 0.005 285.823);
+	font-family:
+		system-ui,
+		-apple-system,
+		sans-serif;
+	margin: 0;
+}