Added basic frontend (#1)

Reviewed-on: wrenn/sandbox#1 Co-authored-by: pptx704 <rafeed@omukk.dev> Co-committed-by: pptx704 <rafeed@omukk.dev>
2026-03-22 19:01:38 +00:00
parent 866f3ac012
commit 97292ba0bf
76 changed files with 5770 additions and 683 deletions
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@ -0,0 +1,121 @@
+@import 'tailwindcss';
+
+@import '@fontsource-variable/manrope';
+@import '@fontsource/instrument-serif/400.css';
+@import '@fontsource-variable/jetbrains-mono';
+@import '@fontsource/alice/400.css';
+
+/*
+ * Wrenn Design Tokens
+ * Sharp, warm, industrial-confident. Dark-first.
+ */
+
+@theme {
+	/* Background scale (6 steps, near-black-green) */
+	--color-bg-0: #0a0c0b;
+	--color-bg-1: #0f1211;
+	--color-bg-2: #141817;
+	--color-bg-3: #1a1e1c;
+	--color-bg-4: #212624;
+	--color-bg-5: #2a302d;
+
+	/* Text hierarchy (5 levels) */
+	--color-text-bright: #eae7e2;
+	--color-text-primary: #d0cdc6;
+	--color-text-secondary: #9b9790;
+	--color-text-tertiary: #6b6862;
+	--color-text-muted: #454340;
+
+	/* Sage green brand accent (3 tiers + 2 glows) */
+	--color-accent: #5e8c58;
+	--color-accent-mid: #89a785;
+	--color-accent-bright: #a4c89f;
+	--color-accent-glow: rgba(94, 140, 88, 0.07);
+	--color-accent-glow-mid: rgba(94, 140, 88, 0.14);
+
+	/* Borders (2 levels) */
+	--color-border: #1f2321;
+	--color-border-mid: #2a2f2c;
+
+	/* Semantic status */
+	--color-amber: #d4a73c;
+	--color-red: #cf8172;
+	--color-blue: #5a9fd4;
+
+	/* Fonts */
+	--font-sans: 'Manrope Variable', system-ui, sans-serif;
+	--font-serif: 'Instrument Serif', serif;
+	--font-mono: 'JetBrains Mono Variable', monospace;
+	--font-brand: 'Alice', serif;
+
+	/* Radii */
+	--radius-card: 8px;
+	--radius-input: 5px;
+	--radius-button: 5px;
+	--radius-avatar: 5px;
+	--radius-logo: 6px;
+
+	/* Shadows — flat aesthetic */
+	--shadow-sm: 0 0 #0000;
+}
+
+/* Base styles */
+html {
+	font-family: var(--font-sans);
+	font-size: 14px;
+	color: var(--color-text-primary);
+	background-color: var(--color-bg-0);
+}
+
+body {
+	margin: 0;
+	min-height: 100vh;
+}
+
+/* Selection */
+::selection {
+	background: rgba(94, 140, 88, 0.25);
+	color: var(--color-text-bright);
+}
+
+/* Scrollbar — thin, matches dark theme */
+::-webkit-scrollbar {
+	width: 6px;
+	height: 6px;
+}
+
+::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+	background: var(--color-bg-4);
+	border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background: var(--color-bg-5);
+}
+
+/* Live status dot glow animation */
+@keyframes wrenn-glow {
+	0%,
+	100% {
+		box-shadow: 0 0 6px rgba(94, 140, 88, 0.5);
+	}
+	50% {
+		box-shadow: 0 0 14px rgba(94, 140, 88, 0.2);
+	}
+}
+
+/* Fade-up entrance animation */
+@keyframes fadeUp {
+	from {
+		opacity: 0;
+		transform: translateY(6px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
--- a/frontend/src/app.d.ts
+++ b/frontend/src/app.d.ts
@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="theme-color" content="#0a0c0b" />
+		<link rel="icon" href="/logo.svg" type="image/svg+xml" />
+		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+		<title>Wrenn</title>
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
--- a/frontend/src/lib/api/auth.ts
+++ b/frontend/src/lib/api/auth.ts
@ -0,0 +1,37 @@
+export type AuthResponse = {
+	token: string;
+	user_id: string;
+	team_id: string;
+	email: string;
+};
+
+export type AuthResult = { ok: true; data: AuthResponse } | { ok: false; error: string };
+
+export async function apiLogin(email: string, password: string): Promise<AuthResult> {
+	return authFetch('/api/v1/auth/login', { email, password });
+}
+
+export async function apiSignup(email: string, password: string): Promise<AuthResult> {
+	return authFetch('/api/v1/auth/signup', { email, password });
+}
+
+async function authFetch(url: string, body: Record<string, string>): Promise<AuthResult> {
+	try {
+		const res = await fetch(url, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify(body)
+		});
+
+		const data = await res.json();
+
+		if (!res.ok) {
+			const message = data?.error?.message ?? 'Something went wrong';
+			return { ok: false, error: message };
+		}
+
+		return { ok: true, data: data as AuthResponse };
+	} catch {
+		return { ok: false, error: 'Unable to connect to the server' };
+	}
+}
--- a/frontend/src/lib/api/capsules.ts
+++ b/frontend/src/lib/api/capsules.ts
@ -0,0 +1,66 @@
+import { apiFetch, type ApiResult } from '$lib/api/client';
+
+export type Capsule = {
+	id: string;
+	status: string;
+	template: string;
+	vcpus: number;
+	memory_mb: number;
+	timeout_sec: number;
+	guest_ip?: string;
+	host_ip?: string;
+	created_at: string;
+	started_at?: string;
+	last_active_at?: string;
+	last_updated: string;
+};
+
+
+export async function listCapsules(): Promise<ApiResult<Capsule[]>> {
+	return apiFetch('GET', '/api/v1/sandboxes');
+}
+
+export type CreateCapsuleParams = {
+	template?: string;
+	vcpus?: number;
+	memory_mb?: number;
+	timeout_sec?: number;
+};
+
+export async function createCapsule(params: CreateCapsuleParams): Promise<ApiResult<Capsule>> {
+	return apiFetch('POST', '/api/v1/sandboxes', params);
+}
+
+export async function pauseCapsule(id: string): Promise<ApiResult<Capsule>> {
+	return apiFetch('POST', `/api/v1/sandboxes/${id}/pause`);
+}
+
+export async function resumeCapsule(id: string): Promise<ApiResult<Capsule>> {
+	return apiFetch('POST', `/api/v1/sandboxes/${id}/resume`);
+}
+
+export async function destroyCapsule(id: string): Promise<ApiResult<void>> {
+	return apiFetch('DELETE', `/api/v1/sandboxes/${id}`);
+}
+
+export type Snapshot = {
+	name: string;
+	type: string;
+	vcpus?: number;
+	memory_mb?: number;
+	size_bytes: number;
+	created_at: string;
+};
+
+export async function createSnapshot(sandboxId: string, name?: string): Promise<ApiResult<Snapshot>> {
+	return apiFetch('POST', '/api/v1/snapshots', { sandbox_id: sandboxId, name });
+}
+
+export async function listSnapshots(typeFilter?: string): Promise<ApiResult<Snapshot[]>> {
+	const url = typeFilter ? `/api/v1/snapshots?type=${typeFilter}` : '/api/v1/snapshots';
+	return apiFetch('GET', url);
+}
+
+export async function deleteSnapshot(name: string): Promise<ApiResult<void>> {
+	return apiFetch('DELETE', `/api/v1/snapshots/${name}`);
+}
--- a/frontend/src/lib/api/client.ts
+++ b/frontend/src/lib/api/client.ts
@ -0,0 +1,24 @@
+import { auth } from '$lib/auth.svelte';
+
+export type ApiResult<T> = { ok: true; data: T } | { ok: false; error: string };
+
+export async function apiFetch<T>(method: string, path: string, body?: unknown): Promise<ApiResult<T>> {
+	try {
+		const headers: Record<string, string> = { 'Content-Type': 'application/json' };
+		if (auth.token) headers['Authorization'] = `Bearer ${auth.token}`;
+
+		const res = await fetch(path, {
+			method,
+			headers,
+			body: body ? JSON.stringify(body) : undefined
+		});
+
+		if (res.status === 204) return { ok: true, data: undefined as T };
+
+		const data = await res.json();
+		if (!res.ok) return { ok: false, error: data?.error?.message ?? 'Something went wrong' };
+		return { ok: true, data: data as T };
+	} catch {
+		return { ok: false, error: 'Unable to connect to the server' };
+	}
+}
--- a/frontend/src/lib/api/keys.ts
+++ b/frontend/src/lib/api/keys.ts
@ -0,0 +1,26 @@
+import { apiFetch, type ApiResult } from '$lib/api/client';
+
+export type APIKey = {
+	id: string;
+	team_id: string;
+	name: string;
+	key_prefix: string;
+	created_by: string;
+	creator_email?: string;
+	created_at: string;
+	last_used?: string;
+	key?: string; // only present immediately after creation
+};
+
+
+export async function listKeys(): Promise<ApiResult<APIKey[]>> {
+	return apiFetch('GET', '/api/v1/api-keys');
+}
+
+export async function createKey(name: string): Promise<ApiResult<APIKey>> {
+	return apiFetch('POST', '/api/v1/api-keys', { name });
+}
+
+export async function revokeKey(id: string): Promise<ApiResult<void>> {
+	return apiFetch('DELETE', `/api/v1/api-keys/${id}`);
+}
--- a/frontend/src/lib/auth.svelte.ts
+++ b/frontend/src/lib/auth.svelte.ts
@ -0,0 +1,94 @@
+import { goto } from '$app/navigation';
+
+const STORAGE_KEYS = {
+	token: 'wrenn_token',
+	userId: 'wrenn_user_id',
+	teamId: 'wrenn_team_id',
+	email: 'wrenn_email'
+} as const;
+
+function isTokenExpired(token: string): boolean {
+	try {
+		const payload = token.split('.')[1];
+		const decoded = atob(payload.replace(/-/g, '+').replace(/_/g, '/'));
+		const { exp } = JSON.parse(decoded);
+		return Date.now() / 1000 >= exp;
+	} catch {
+		return true;
+	}
+}
+
+function createAuth() {
+	let token = $state<string | null>(null);
+	let userId = $state<string | null>(null);
+	let teamId = $state<string | null>(null);
+	let email = $state<string | null>(null);
+	let initialized = $state(false);
+
+	// Initialize from localStorage synchronously at module load.
+	if (typeof window !== 'undefined') {
+		const stored = localStorage.getItem(STORAGE_KEYS.token);
+		if (stored && !isTokenExpired(stored)) {
+			token = stored;
+			userId = localStorage.getItem(STORAGE_KEYS.userId);
+			teamId = localStorage.getItem(STORAGE_KEYS.teamId);
+			email = localStorage.getItem(STORAGE_KEYS.email);
+		} else if (stored) {
+			// Expired — clean up.
+			for (const key of Object.values(STORAGE_KEYS)) {
+				localStorage.removeItem(key);
+			}
+		}
+		initialized = true;
+	}
+
+	const isAuthenticated = $derived(token !== null && !isTokenExpired(token));
+
+	return {
+		get token() {
+			return token;
+		},
+		get userId() {
+			return userId;
+		},
+		get teamId() {
+			return teamId;
+		},
+		get email() {
+			return email;
+		},
+		get isAuthenticated() {
+			return isAuthenticated;
+		},
+		get initialized() {
+			return initialized;
+		},
+
+		login(data: { token: string; user_id: string; team_id: string; email: string }) {
+			token = data.token;
+			userId = data.user_id;
+			teamId = data.team_id;
+			email = data.email;
+
+			localStorage.setItem(STORAGE_KEYS.token, data.token);
+			localStorage.setItem(STORAGE_KEYS.userId, data.user_id);
+			localStorage.setItem(STORAGE_KEYS.teamId, data.team_id);
+			localStorage.setItem(STORAGE_KEYS.email, data.email);
+		},
+
+		logout() {
+			token = null;
+			userId = null;
+			teamId = null;
+			email = null;
+
+			for (const key of Object.values(STORAGE_KEYS)) {
+				localStorage.removeItem(key);
+			}
+
+			goto('/login');
+		}
+	};
+}
+
+export const auth = createAuth();
--- a/frontend/src/lib/components/AuthModal.svelte
+++ b/frontend/src/lib/components/AuthModal.svelte
@ -0,0 +1,210 @@
+<script lang="ts">
+	import { Dialog } from 'bits-ui';
+	import {
+		IconGithub,
+		IconMail,
+		IconLock,
+		IconUser,
+		IconX,
+		IconEye,
+		IconEyeOff
+	} from './icons';
+
+	let {
+		mode = $bindable('signin'),
+		open = $bindable(false),
+		onSwitchMode
+	}: {
+		mode: 'signin' | 'signup';
+		open: boolean;
+		onSwitchMode: () => void;
+	} = $props();
+
+	let email = $state('');
+	let password = $state('');
+	let name = $state('');
+	let showPassword = $state(false);
+
+	const title = $derived(mode === 'signin' ? 'Welcome back' : 'Create account');
+	const subtitle = $derived(
+		mode === 'signin' ? 'Sign in to your Wrenn account' : 'Get started with Wrenn'
+	);
+	const submitLabel = $derived(mode === 'signin' ? 'Sign in' : 'Create account');
+	const switchText = $derived(
+		mode === 'signin' ? "Don't have an account?" : 'Already have an account?'
+	);
+	const switchAction = $derived(mode === 'signin' ? 'Sign up' : 'Sign in');
+
+	function handleSubmit(e: Event) {
+		e.preventDefault();
+	}
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Portal>
+		<Dialog.Overlay
+			class="fixed inset-0 z-50 bg-black/70 backdrop-blur-[3px]"
+			style="animation: overlayFadeIn 200ms ease"
+		/>
+		<Dialog.Content
+			class="fixed left-1/2 top-1/2 z-50 w-[calc(100%-2rem)] max-w-[400px] -translate-x-1/2 -translate-y-1/2 rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)] p-0"
+			style="animation: contentSlideIn 250ms cubic-bezier(0.16, 1, 0.3, 1)"
+		>
+			<!-- Close button -->
+			<Dialog.Close
+				class="absolute right-3 top-3 flex h-7 w-7 items-center justify-center rounded-[var(--radius-button)] border border-transparent text-[var(--color-text-tertiary)] transition-colors duration-150 hover:border-[var(--color-border-mid)] hover:bg-[var(--color-bg-4)] hover:text-[var(--color-text-secondary)]"
+			>
+				<IconX size={14} />
+			</Dialog.Close>
+
+			<div class="px-7 pb-7 pt-8">
+				<!-- Header -->
+				<div class="mb-7">
+					<Dialog.Title
+						class="font-serif text-[24px] tracking-[-0.02em] text-[var(--color-text-bright)]"
+					>
+						{title}
+					</Dialog.Title>
+					<Dialog.Description
+						class="mt-1 text-[13px] text-[var(--color-text-secondary)]"
+					>
+						{subtitle}
+					</Dialog.Description>
+				</div>
+
+				<!-- GitHub OAuth -->
+				<button
+					type="button"
+					class="flex w-full items-center justify-center gap-2.5 rounded-[var(--radius-button)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)] px-4 py-2.5 text-[13px] font-medium text-[var(--color-text-bright)] transition-all duration-150 hover:border-[var(--color-accent)] hover:text-[var(--color-text-bright)]"
+				>
+					<IconGithub size={16} />
+					Continue with GitHub
+				</button>
+
+				<!-- Divider -->
+				<div class="my-5 flex items-center gap-3">
+					<div class="h-px flex-1 bg-[var(--color-border)]"></div>
+					<span
+						class="font-mono text-[10px] uppercase tracking-[0.1em] text-[var(--color-text-muted)]"
+						>or</span
+					>
+					<div class="h-px flex-1 bg-[var(--color-border)]"></div>
+				</div>
+
+				<!-- Form -->
+				<form onsubmit={handleSubmit} class="space-y-3">
+					{#if mode === 'signup'}
+						<div class="group relative">
+							<div
+								class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)] transition-colors duration-150 group-focus-within:text-[var(--color-accent)]"
+							>
+								<IconUser size={14} />
+							</div>
+							<input
+								type="text"
+								bind:value={name}
+								placeholder="Full name"
+								autocomplete="name"
+								class="w-full rounded-[var(--radius-input)] border border-[var(--color-border)] bg-[var(--color-bg-2)] py-2.5 pl-9 pr-3 text-[13px] text-[var(--color-text-bright)] outline-none transition-all duration-150 placeholder:text-[var(--color-text-muted)] focus:border-[var(--color-accent)]"
+							/>
+						</div>
+					{/if}
+
+					<div class="group relative">
+						<div
+							class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)] transition-colors duration-150 group-focus-within:text-[var(--color-accent)]"
+						>
+							<IconMail size={14} />
+						</div>
+						<input
+							type="email"
+							bind:value={email}
+							placeholder="Email address"
+							autocomplete="email"
+							class="w-full rounded-[var(--radius-input)] border border-[var(--color-border)] bg-[var(--color-bg-2)] py-2.5 pl-9 pr-3 text-[13px] text-[var(--color-text-bright)] outline-none transition-all duration-150 placeholder:text-[var(--color-text-muted)] focus:border-[var(--color-accent)]"
+						/>
+					</div>
+
+					<div class="group relative">
+						<div
+							class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)] transition-colors duration-150 group-focus-within:text-[var(--color-accent)]"
+						>
+							<IconLock size={14} />
+						</div>
+						<input
+							type={showPassword ? 'text' : 'password'}
+							bind:value={password}
+							placeholder="Password"
+							autocomplete={mode === 'signin' ? 'current-password' : 'new-password'}
+							class="w-full rounded-[var(--radius-input)] border border-[var(--color-border)] bg-[var(--color-bg-2)] py-2.5 pl-9 pr-10 text-[13px] text-[var(--color-text-bright)] outline-none transition-all duration-150 placeholder:text-[var(--color-text-muted)] focus:border-[var(--color-accent)]"
+						/>
+						<button
+							type="button"
+							onclick={() => (showPassword = !showPassword)}
+							class="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)] transition-colors duration-150 hover:text-[var(--color-text-secondary)]"
+							tabindex={-1}
+						>
+							{#if showPassword}
+								<IconEyeOff size={14} />
+							{:else}
+								<IconEye size={14} />
+							{/if}
+						</button>
+					</div>
+
+					{#if mode === 'signin'}
+						<div class="flex justify-end">
+							<button
+								type="button"
+								class="text-[12px] text-[var(--color-text-secondary)] transition-colors duration-150 hover:text-[var(--color-accent-mid)]"
+							>
+								Forgot password?
+							</button>
+						</div>
+					{/if}
+
+					<button
+						type="submit"
+						class="!mt-5 w-full rounded-[var(--radius-button)] bg-[var(--color-accent)] px-4 py-2.5 text-[13px] font-semibold text-white transition-all duration-150 hover:brightness-115 hover:-translate-y-px active:translate-y-0"
+					>
+						{submitLabel}
+					</button>
+				</form>
+
+				<!-- Switch mode -->
+				<p class="mt-5 text-center text-[12px] text-[var(--color-text-secondary)]">
+					{switchText}
+					<button
+						type="button"
+						onclick={onSwitchMode}
+						class="font-medium text-[var(--color-text-primary)] transition-colors duration-150 hover:text-[var(--color-text-bright)]"
+					>
+						{switchAction}
+					</button>
+				</p>
+			</div>
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>
+
+<style>
+	@keyframes overlayFadeIn {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes contentSlideIn {
+		from {
+			opacity: 0;
+			transform: translate(-50%, -48%) scale(0.96);
+		}
+		to {
+			opacity: 1;
+			transform: translate(-50%, -50%) scale(1);
+		}
+	}
+</style>
--- a/frontend/src/lib/components/Sidebar.svelte
+++ b/frontend/src/lib/components/Sidebar.svelte
@ -0,0 +1,308 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { Popover } from 'bits-ui';
+	import { auth } from '$lib/auth.svelte';
+	import {
+		IconMonitor,
+		IconBox,
+		IconKey,
+		IconMembers,
+		IconUsage,
+		IconBilling,
+		IconSettings,
+		IconLogout,
+		IconChevron,
+		IconPlus,
+		IconSidebar,
+		IconBell,
+		IconDocs,
+		IconAudit
+	} from './icons';
+
+	let { collapsed = $bindable(false) }: { collapsed: boolean } = $props();
+
+	let teamPopoverOpen = $state(false);
+
+	const currentTeam = 'default';
+	const userName = $derived(auth.email ?? '');
+
+	type NavItem = {
+		label: string;
+		icon: typeof IconMonitor;
+		href: string;
+	};
+
+	const platformItems: NavItem[] = [
+		{ label: 'Capsules', icon: IconMonitor, href: '/dashboard/capsules' },
+		{ label: 'Templates', icon: IconBox, href: '/dashboard/snapshots' }
+	];
+
+	const managementItems: NavItem[] = [
+		{ label: 'Keys', icon: IconKey, href: '/dashboard/keys' },
+		{ label: 'Members', icon: IconMembers, href: '/dashboard/members' },
+		{ label: 'Audit Logs', icon: IconAudit, href: '/dashboard/audit' }
+	];
+
+	const billingItems: NavItem[] = [
+		{ label: 'Usage', icon: IconUsage, href: '/dashboard/usage' },
+		{ label: 'Billing', icon: IconBilling, href: '/dashboard/billing' }
+	];
+
+	const teams = ['default', 'Wrenn Labs', 'Acme Corp'];
+
+	function isActive(href: string): boolean {
+		const p = $page.url.pathname;
+		return p === href || p.startsWith(href + '/');
+	}
+
+	function toggleCollapsed() {
+		collapsed = !collapsed;
+		localStorage.setItem('wrenn_sidebar_collapsed', String(collapsed));
+	}
+</script>
+
+<aside
+	class="flex h-screen shrink-0 flex-col overflow-hidden border-r border-[var(--color-border)] bg-[var(--color-bg-1)] transition-[width] duration-250 ease-in-out"
+	style="width: {collapsed ? '56px' : '230px'}"
+>
+	<!-- Brand + collapse toggle -->
+	<div class="flex shrink-0 items-center px-4 pt-5 pb-4 {collapsed ? 'justify-center' : 'justify-between'}">
+		{#if !collapsed}
+			<div class="flex items-center gap-2.5">
+				<img
+					src="/logo.svg"
+					alt="Wrenn"
+					class="h-7 w-7 shrink-0 rounded-[var(--radius-logo)]"
+				/>
+				<span class="font-brand text-[15px] text-[var(--color-text-bright)]">Wrenn</span>
+			</div>
+		{/if}
+		<button
+			onclick={toggleCollapsed}
+			class="flex h-7 w-7 shrink-0 items-center justify-center rounded-[var(--radius-button)] text-[var(--color-text-tertiary)] transition-colors duration-150 hover:bg-[var(--color-bg-3)] hover:text-[var(--color-text-secondary)]"
+			title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+		>
+			<IconSidebar size={16} />
+		</button>
+	</div>
+
+	<!-- Team switcher -->
+	<div class="px-3 pb-0 {collapsed ? 'px-1.5' : ''}">
+		<Popover.Root bind:open={teamPopoverOpen}>
+			<Popover.Trigger
+				class="flex w-full items-center rounded-[var(--radius-input)] py-2 text-left transition-colors duration-150 hover:bg-[var(--color-bg-3)] {collapsed
+					? 'justify-center px-0'
+					: 'gap-2 px-2.5'}"
+			>
+				<div
+					class="flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--radius-avatar)] bg-[var(--color-bg-4)] text-[10px] font-bold uppercase text-[var(--color-text-secondary)]"
+				>
+					{currentTeam[0]}
+				</div>
+				{#if !collapsed}
+					<div class="min-w-0 flex-1 overflow-hidden whitespace-nowrap">
+						<div
+							class="text-[11px] font-semibold uppercase tracking-[0.06em] text-[var(--color-text-tertiary)]"
+						>
+							Team
+						</div>
+						<div class="truncate text-[13px] text-[var(--color-text-primary)]">
+							{currentTeam}
+						</div>
+					</div>
+					<IconChevron
+						size={12}
+						direction="down"
+						class="shrink-0 text-[var(--color-text-tertiary)]"
+					/>
+				{/if}
+			</Popover.Trigger>
+			<Popover.Portal>
+				<Popover.Content
+					side="bottom"
+					align="start"
+					sideOffset={4}
+					class="z-50 w-[210px] rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)] p-1.5"
+					style="animation: popoverSlideIn 150ms ease"
+				>
+					<div
+						class="mb-1 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.06em] text-[var(--color-text-tertiary)]"
+					>
+						Teams
+					</div>
+					{#each teams as team}
+						<button
+							class="flex w-full items-center gap-2.5 rounded-[var(--radius-input)] px-2.5 py-2 text-[13px] transition-colors duration-150 hover:bg-[var(--color-bg-3)] {team ===
+							currentTeam
+								? 'bg-[var(--color-accent-glow)]'
+								: ''}"
+							onclick={() => (teamPopoverOpen = false)}
+						>
+							<div
+								class="flex h-5 w-5 items-center justify-center rounded-[var(--radius-avatar)] text-[9px] font-bold uppercase text-white {team ===
+								currentTeam
+									? 'bg-[var(--color-accent)]'
+									: 'bg-[var(--color-bg-5)]'}"
+							>
+								{team[0]}
+							</div>
+							<span
+								class={team === currentTeam
+									? 'font-medium text-[var(--color-text-bright)]'
+									: 'text-[var(--color-text-primary)]'}
+							>
+								{team}
+							</span>
+						</button>
+					{/each}
+					<div class="mt-0.5 border-t border-[var(--color-border)] pt-0.5">
+						<button
+							class="flex w-full items-center gap-2.5 rounded-[var(--radius-input)] px-2.5 py-2 text-[13px] text-[var(--color-text-secondary)] transition-colors duration-150 hover:bg-[var(--color-bg-3)] hover:text-[var(--color-text-primary)]"
+						>
+							<IconPlus size={14} />
+							Create team
+						</button>
+					</div>
+				</Popover.Content>
+			</Popover.Portal>
+		</Popover.Root>
+	</div>
+
+	<!-- Divider after team switcher -->
+	<div class="mx-4 mb-3 h-px bg-[var(--color-border)] {collapsed ? 'mx-3' : ''}"></div>
+
+	<!-- Navigation -->
+	<nav class="flex-1 overflow-y-auto px-3 {collapsed ? 'px-1.5' : ''}">
+		{@render navSection('Platform', platformItems)}
+		{@render navSection('Management', managementItems)}
+		{@render navSection('Billing', billingItems)}
+	</nav>
+
+	<!-- Bottom links -->
+	<div class="shrink-0 px-3 pb-1 {collapsed ? 'px-1.5' : ''}">
+		<a
+			href="/docs"
+			class="group flex items-center rounded-[var(--radius-input)] px-2.5 py-2.5 text-[var(--color-text-secondary)] transition-colors duration-150 hover:bg-[var(--color-bg-3)] hover:text-[var(--color-text-primary)] {collapsed ? 'justify-center px-2' : 'gap-3'}"
+			title={collapsed ? 'Docs' : undefined}
+		>
+			<IconDocs size={16} class="shrink-0 opacity-50 transition-opacity duration-150 group-hover:opacity-100" />
+			{#if !collapsed}<span class="text-[13px]">Docs</span>{/if}
+		</a>
+		<a
+			href="/dashboard/notifications"
+			class="group flex items-center rounded-[var(--radius-input)] px-2.5 py-2.5 text-[var(--color-text-secondary)] transition-colors duration-150 hover:bg-[var(--color-bg-3)] hover:text-[var(--color-text-primary)] {collapsed ? 'justify-center px-2' : 'gap-3'}"
+			title={collapsed ? 'Notifications' : undefined}
+		>
+			<IconBell size={16} class="shrink-0 opacity-50 transition-opacity duration-150 group-hover:opacity-100" />
+			{#if !collapsed}<span class="text-[13px]">Notifications</span>{/if}
+		</a>
+		<a
+			href="/dashboard/settings"
+			class="group flex items-center rounded-[var(--radius-input)] px-2.5 py-2.5 text-[var(--color-text-secondary)] transition-colors duration-150 hover:bg-[var(--color-bg-3)] hover:text-[var(--color-text-primary)] {collapsed ? 'justify-center px-2' : 'gap-3'}"
+			title={collapsed ? 'Settings' : undefined}
+		>
+			<IconSettings size={16} class="shrink-0 opacity-50 transition-opacity duration-150 group-hover:opacity-100" />
+			{#if !collapsed}<span class="text-[13px]">Settings</span>{/if}
+		</a>
+	</div>
+
+	<!-- User footer -->
+	<div
+		class="flex shrink-0 items-center border-t border-[var(--color-border)] px-3 py-2.5 {collapsed
+			? 'justify-center px-1.5'
+			: 'gap-2.5'}"
+	>
+		{#if !collapsed}
+			<div
+				class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[var(--color-bg-4)] text-[10px] font-bold uppercase text-[var(--color-text-secondary)]"
+			>
+				{userName[0] ?? ''}
+			</div>
+			<span class="flex-1 truncate text-[13px] text-[var(--color-text-secondary)]">
+				{userName}
+			</span>
+		{/if}
+		<button
+			onclick={() => auth.logout()}
+			class="flex shrink-0 items-center justify-center rounded-[var(--radius-button)] transition-colors duration-150 hover:text-[var(--color-red)] {collapsed
+				? 'h-7 w-7 text-[var(--color-text-muted)] hover:bg-[var(--color-bg-3)]'
+				: 'h-6 w-6 text-[var(--color-text-tertiary)]'}"
+			title="Sign out"
+		>
+			<IconLogout size={collapsed ? 15 : 14} />
+		</button>
+	</div>
+</aside>
+
+{#snippet navSection(label: string, items: NavItem[])}
+	<div class="mb-3">
+		{#if collapsed}
+			{#if label !== 'Platform'}
+				<div class="mx-1 my-2 h-px bg-[var(--color-border)]"></div>
+			{/if}
+		{:else}
+			<div
+				class="mb-1 px-2.5 py-1.5 text-[11px] font-semibold uppercase tracking-[0.06em] text-[var(--color-text-tertiary)]"
+			>
+				{label}
+			</div>
+		{/if}
+		{#each items as item}
+			{#if isActive(item.href)}
+				<a
+					href={item.href}
+					class="group relative flex items-center rounded-[var(--radius-input)] bg-[var(--color-accent-glow-mid)] px-2.5 py-2.5 transition-colors duration-150 {collapsed
+						? 'justify-center px-2'
+						: 'gap-3'}"
+					title={collapsed ? item.label : undefined}
+				>
+					{#if !collapsed}
+						<div
+							class="absolute left-0 top-1/2 h-5 w-[3px] -translate-y-1/2 rounded-r-full bg-[var(--color-accent)]"
+						></div>
+					{/if}
+					<item.icon size={16} class="shrink-0 text-[var(--color-accent-bright)]" />
+					{#if !collapsed}
+						<span class="text-[13px] font-medium text-[var(--color-accent-bright)]">
+							{item.label}
+						</span>
+					{/if}
+				</a>
+			{:else}
+				<a
+					href={item.href}
+					class="group flex items-center rounded-[var(--radius-input)] px-2.5 py-2.5 transition-colors duration-150 hover:bg-[var(--color-bg-3)] {collapsed
+						? 'justify-center px-2'
+						: 'gap-3'}"
+					title={collapsed ? item.label : undefined}
+				>
+					<item.icon
+						size={16}
+						class="shrink-0 opacity-50 transition-opacity duration-150 group-hover:opacity-100"
+					/>
+					{#if !collapsed}
+						<span
+							class="text-[13px] text-[var(--color-text-primary)] transition-colors duration-150 group-hover:text-[var(--color-text-bright)]"
+						>
+							{item.label}
+						</span>
+					{/if}
+				</a>
+			{/if}
+		{/each}
+	</div>
+{/snippet}
+
+
+<style>
+	@keyframes popoverSlideIn {
+		from {
+			opacity: 0;
+			transform: translateY(-4px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+</style>
--- a/frontend/src/lib/components/Toaster.svelte
+++ b/frontend/src/lib/components/Toaster.svelte
@ -0,0 +1,24 @@
+<script lang="ts">
+	import { toast } from '$lib/toast.svelte';
+</script>
+
+<div class="pointer-events-none fixed bottom-6 right-6 z-[100] flex flex-col-reverse gap-2">
+	{#each toast.list as t (t.id)}
+		<div
+			class="pointer-events-auto flex min-w-[280px] max-w-[400px] items-start gap-3 rounded-[var(--radius-card)] border bg-[var(--color-bg-2)] px-4 py-3 text-[13px] {t.type === 'error'
+				? 'border-[var(--color-red)]/30 text-[var(--color-red)]'
+				: 'border-[var(--color-accent)]/30 text-[var(--color-accent-bright)]'}"
+			style="animation: fadeUp 0.2s ease both"
+		>
+			<span class="flex-1 leading-relaxed">{t.message}</span>
+			<button
+				onclick={() => toast.dismiss(t.id)}
+				class="mt-0.5 shrink-0 opacity-50 transition-opacity hover:opacity-100"
+			>
+				<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+					<line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+				</svg>
+			</button>
+		</div>
+	{/each}
+</div>
--- a/frontend/src/lib/components/icons/IconAudit.svelte
+++ b/frontend/src/lib/components/icons/IconAudit.svelte
@ -0,0 +1,22 @@
+<script lang="ts">
+	let { size = 18, class: className = '' }: { size?: number; class?: string } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.75"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={className}
+	aria-hidden="true"
+>
+	<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+	<polyline points="14 2 14 8 20 8" />
+	<line x1="16" y1="13" x2="8" y2="13" />
+	<line x1="16" y1="17" x2="8" y2="17" />
+	<polyline points="10 9 9 9 8 9" />
+</svg>
--- a/frontend/src/lib/components/icons/IconBell.svelte
+++ b/frontend/src/lib/components/icons/IconBell.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	let { size = 18, class: className = '' }: { size?: number; class?: string } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.75"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={className}
+	aria-hidden="true"
+>
+	<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
+	<path d="M13.73 21a2 2 0 0 1-3.46 0" />
+</svg>
--- a/frontend/src/lib/components/icons/IconBilling.svelte
+++ b/frontend/src/lib/components/icons/IconBilling.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	let { size = 18, class: className = '' }: { size?: number; class?: string } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.75"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={className}
+	aria-hidden="true"
+>
+	<rect x="1" y="4" width="22" height="16" rx="3" />
+	<path d="M1 10h22" />
+</svg>
--- a/frontend/src/lib/components/icons/IconBox.svelte
+++ b/frontend/src/lib/components/icons/IconBox.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+	let { size = 18, class: className = '' }: { size?: number; class?: string } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.75"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={className}
+	aria-hidden="true"
+>
+	<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
+	<polyline points="3.27 6.96 12 12.01 20.73 6.96" />
+	<line x1="12" y1="22.08" x2="12" y2="12" />
+</svg>
--- a/frontend/src/lib/components/icons/IconCapsule.svelte
+++ b/frontend/src/lib/components/icons/IconCapsule.svelte
@ -0,0 +1,21 @@
+<script lang="ts">
+	let { size = 18, class: className = '' }: { size?: number; class?: string } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.75"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={className}
+	aria-hidden="true"
+>
+	<rect x="4" y="2" width="16" height="20" rx="4" />
+	<path d="M4 12h16" />
+	<circle cx="8" cy="7" r="1" fill="currentColor" stroke="none" />
+	<circle cx="12" cy="7" r="1" fill="currentColor" stroke="none" />
+</svg>
--- a/frontend/src/lib/components/icons/IconChevron.svelte
+++ b/frontend/src/lib/components/icons/IconChevron.svelte
@ -0,0 +1,30 @@
+<script lang="ts">
+	let {
+		size = 18,
+		direction = 'down',
+		class: className = ''
+	}: { size?: number; direction?: 'up' | 'down' | 'left' | 'right'; class?: string } = $props();
+
+	const rotation = {
+		up: '180',
+		down: '0',
+		left: '90',
+		right: '-90'
+	};
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.75"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={className}
+	style="transform: rotate({rotation[direction]}deg)"
+	aria-hidden="true"
+>
+	<polyline points="6 9 12 15 18 9" />
+</svg>
--- a/frontend/src/lib/components/icons/IconDocs.svelte
+++ b/frontend/src/lib/components/icons/IconDocs.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	let { size = 18, class: className = '' }: { size?: number; class?: string } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.75"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={className}
+	aria-hidden="true"
+>
+	<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
+	<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
+</svg>
--- a/frontend/src/lib/components/icons/IconEye.svelte
+++ b/frontend/src/lib/components/icons/IconEye.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	let { size = 18, class: className = '' }: { size?: number; class?: string } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.75"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={className}
+	aria-hidden="true"
+>
+	<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+	<circle cx="12" cy="12" r="3" />
+</svg>
--- a/frontend/src/lib/components/icons/IconEyeOff.svelte
+++ b/frontend/src/lib/components/icons/IconEyeOff.svelte
@ -0,0 +1,21 @@
+<script lang="ts">
+	let { size = 18, class: className = '' }: { size?: number; class?: string } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.75"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={className}
+	aria-hidden="true"
+>
+	<path
+		d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
+	/>
+	<line x1="1" y1="1" x2="23" y2="23" />
+</svg>
--- a/frontend/src/lib/components/icons/IconGithub.svelte
+++ b/frontend/src/lib/components/icons/IconGithub.svelte
@ -0,0 +1,16 @@
+<script lang="ts">
+	let { size = 18, class: className = '' }: { size?: number; class?: string } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="currentColor"
+	class={className}
+	aria-hidden="true"
+>
+	<path
+		d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
+	/>
+</svg>
--- a/frontend/src/lib/components/icons/IconKey.svelte
+++ b/frontend/src/lib/components/icons/IconKey.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+	let { size = 18, class: className = '' }: { size?: number; class?: string } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.75"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={className}
+	aria-hidden="true"
+>
+	<path
+		d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"
+	/>
+</svg>
--- a/frontend/src/lib/components/icons/IconLock.svelte
+++ b/frontend/src/lib/components/icons/IconLock.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	let { size = 18, class: className = '' }: { size?: number; class?: string } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.75"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={className}
+	aria-hidden="true"
+>
+	<rect x="3" y="11" width="18" height="11" rx="3" />
+	<path d="M7 11V7a5 5 0 0 1 10 0v4" />
+</svg>
--- a/frontend/src/lib/components/icons/IconLogout.svelte
+++ b/frontend/src/lib/components/icons/IconLogout.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+	let { size = 18, class: className = '' }: { size?: number; class?: string } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.75"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={className}
+	aria-hidden="true"
+>
+	<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+	<polyline points="16 17 21 12 16 7" />
+	<line x1="21" y1="12" x2="9" y2="12" />
+</svg>
--- a/frontend/src/lib/components/icons/IconMail.svelte
+++ b/frontend/src/lib/components/icons/IconMail.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	let { size = 18, class: className = '' }: { size?: number; class?: string } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.75"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={className}
+	aria-hidden="true"
+>
+	<rect x="2" y="4" width="20" height="16" rx="3" />
+	<polyline points="22,4 12,13 2,4" />
+</svg>
--- a/frontend/src/lib/components/icons/IconMembers.svelte
+++ b/frontend/src/lib/components/icons/IconMembers.svelte
@ -0,0 +1,21 @@
+<script lang="ts">
+	let { size = 18, class: className = '' }: { size?: number; class?: string } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.75"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={className}
+	aria-hidden="true"
+>
+	<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+	<circle cx="9" cy="7" r="4" />
+	<path d="M22 21v-2a4 4 0 0 0-3-3.87" />
+	<path d="M16 3.13a4 4 0 0 1 0 7.75" />
+</svg>
--- a/frontend/src/lib/components/icons/IconMonitor.svelte
+++ b/frontend/src/lib/components/icons/IconMonitor.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+	let { size = 18, class: className = '' }: { size?: number; class?: string } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.75"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={className}
+	aria-hidden="true"
+>
+	<rect x="2" y="3" width="20" height="14" rx="2" />
+	<line x1="8" y1="21" x2="16" y2="21" />
+	<line x1="12" y1="17" x2="12" y2="21" />
+</svg>
--- a/frontend/src/lib/components/icons/IconPlus.svelte
+++ b/frontend/src/lib/components/icons/IconPlus.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	let { size = 18, class: className = '' }: { size?: number; class?: string } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.75"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={className}
+	aria-hidden="true"
+>
+	<line x1="12" y1="5" x2="12" y2="19" />
+	<line x1="5" y1="12" x2="19" y2="12" />
+</svg>
--- a/frontend/src/lib/components/icons/IconSettings.svelte
+++ b/frontend/src/lib/components/icons/IconSettings.svelte
@ -0,0 +1,21 @@
+<script lang="ts">
+	let { size = 18, class: className = '' }: { size?: number; class?: string } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.75"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={className}
+	aria-hidden="true"
+>
+	<path
+		d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
+	/>
+	<circle cx="12" cy="12" r="3" />
+</svg>
--- a/frontend/src/lib/components/icons/IconSidebar.svelte
+++ b/frontend/src/lib/components/icons/IconSidebar.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	let { size = 18, class: className = '' }: { size?: number; class?: string } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.75"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={className}
+	aria-hidden="true"
+>
+	<rect x="3" y="3" width="18" height="18" rx="3" />
+	<path d="M9 3v18" />
+</svg>
--- a/frontend/src/lib/components/icons/IconTemplate.svelte
+++ b/frontend/src/lib/components/icons/IconTemplate.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+	let { size = 18, class: className = '' }: { size?: number; class?: string } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.75"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={className}
+	aria-hidden="true"
+>
+	<rect x="3" y="3" width="18" height="18" rx="3" />
+	<path d="M3 9h18" />
+	<path d="M9 9v12" />
+</svg>
--- a/frontend/src/lib/components/icons/IconTool.svelte
+++ b/frontend/src/lib/components/icons/IconTool.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+	let { size = 18, class: className = '' }: { size?: number; class?: string } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.75"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={className}
+	aria-hidden="true"
+>
+	<path
+		d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
+	/>
+</svg>
--- a/frontend/src/lib/components/icons/IconUsage.svelte
+++ b/frontend/src/lib/components/icons/IconUsage.svelte
@ -0,0 +1,18 @@
+<script lang="ts">
+	let { size = 18, class: className = '' }: { size?: number; class?: string } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.75"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={className}
+	aria-hidden="true"
+>
+	<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+</svg>
--- a/frontend/src/lib/components/icons/IconUser.svelte
+++ b/frontend/src/lib/components/icons/IconUser.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	let { size = 18, class: className = '' }: { size?: number; class?: string } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.75"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={className}
+	aria-hidden="true"
+>
+	<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+	<circle cx="12" cy="7" r="4" />
+</svg>
--- a/frontend/src/lib/components/icons/IconX.svelte
+++ b/frontend/src/lib/components/icons/IconX.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	let { size = 18, class: className = '' }: { size?: number; class?: string } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.75"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={className}
+	aria-hidden="true"
+>
+	<line x1="18" y1="6" x2="6" y2="18" />
+	<line x1="6" y1="6" x2="18" y2="18" />
+</svg>
--- a/frontend/src/lib/components/icons/index.ts
+++ b/frontend/src/lib/components/icons/index.ts
@ -0,0 +1,25 @@
+// Re-export all icon components
+export { default as IconGithub } from './IconGithub.svelte';
+export { default as IconCapsule } from './IconCapsule.svelte';
+export { default as IconMonitor } from './IconMonitor.svelte';
+export { default as IconTemplate } from './IconTemplate.svelte';
+export { default as IconTool } from './IconTool.svelte';
+export { default as IconKey } from './IconKey.svelte';
+export { default as IconMembers } from './IconMembers.svelte';
+export { default as IconUsage } from './IconUsage.svelte';
+export { default as IconBilling } from './IconBilling.svelte';
+export { default as IconSettings } from './IconSettings.svelte';
+export { default as IconLogout } from './IconLogout.svelte';
+export { default as IconChevron } from './IconChevron.svelte';
+export { default as IconPlus } from './IconPlus.svelte';
+export { default as IconSidebar } from './IconSidebar.svelte';
+export { default as IconMail } from './IconMail.svelte';
+export { default as IconLock } from './IconLock.svelte';
+export { default as IconUser } from './IconUser.svelte';
+export { default as IconX } from './IconX.svelte';
+export { default as IconEye } from './IconEye.svelte';
+export { default as IconEyeOff } from './IconEyeOff.svelte';
+export { default as IconBell } from './IconBell.svelte';
+export { default as IconDocs } from './IconDocs.svelte';
+export { default as IconAudit } from './IconAudit.svelte';
+export { default as IconBox } from './IconBox.svelte';
--- a/frontend/src/lib/index.ts
+++ b/frontend/src/lib/index.ts
@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.
--- a/frontend/src/lib/sidebar.ts
+++ b/frontend/src/lib/sidebar.ts
@ -0,0 +1,5 @@
+export function getInitialCollapsed(): boolean {
+	return typeof window !== 'undefined'
+		? localStorage.getItem('wrenn_sidebar_collapsed') === 'true'
+		: false;
+}
--- a/frontend/src/lib/toast.svelte.ts
+++ b/frontend/src/lib/toast.svelte.ts
@ -0,0 +1,22 @@
+type Toast = { id: string; message: string; type: 'error' | 'success' };
+
+let toasts = $state<Toast[]>([]);
+
+export const toast = {
+	get list() {
+		return toasts;
+	},
+	error(message: string, duration = 4000) {
+		const id = Math.random().toString(36).slice(2);
+		toasts = [...toasts, { id, message, type: 'error' }];
+		setTimeout(() => this.dismiss(id), duration);
+	},
+	success(message: string, duration = 3000) {
+		const id = Math.random().toString(36).slice(2);
+		toasts = [...toasts, { id, message, type: 'success' }];
+		setTimeout(() => this.dismiss(id), duration);
+	},
+	dismiss(id: string) {
+		toasts = toasts.filter((t) => t.id !== id);
+	}
+};
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@ -0,0 +1,8 @@
+<script lang="ts">
+	import '../app.css';
+	import '$lib/auth.svelte';
+
+	let { children } = $props();
+</script>
+
+{@render children()}
--- a/frontend/src/routes/+layout.ts
+++ b/frontend/src/routes/+layout.ts
@ -0,0 +1,3 @@
+// Static site generation — all pages prerendered
+export const prerender = true;
+export const ssr = false;
--- a/frontend/src/routes/+page.ts
+++ b/frontend/src/routes/+page.ts
@ -0,0 +1,11 @@
+import { redirect } from '@sveltejs/kit';
+import { browser } from '$app/environment';
+import { auth } from '$lib/auth.svelte';
+
+export function load() {
+	if (!browser) return;
+	if (auth.isAuthenticated) {
+		redirect(302, '/dashboard');
+	}
+	redirect(302, '/login');
+}
--- a/frontend/src/routes/auth/github/callback/+page.svelte
+++ b/frontend/src/routes/auth/github/callback/+page.svelte
@ -0,0 +1,28 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+	import { auth } from '$lib/auth.svelte';
+
+	const params = $page.url.searchParams;
+	const error = params.get('error');
+
+	if (error) {
+		goto(`/login?error=${encodeURIComponent(error)}`);
+	} else {
+		const token = params.get('token');
+		const userId = params.get('user_id');
+		const teamId = params.get('team_id');
+		const email = params.get('email');
+
+		if (token && userId && teamId && email) {
+			auth.login({ token, user_id: userId, team_id: teamId, email });
+			goto('/dashboard');
+		} else {
+			goto('/login?error=missing_token');
+		}
+	}
+</script>
+
+<div class="flex min-h-screen items-center justify-center">
+	<p class="text-[13px] text-[var(--color-text-secondary)]">Signing you in...</p>
+</div>
--- a/frontend/src/routes/dashboard/+layout.svelte
+++ b/frontend/src/routes/dashboard/+layout.svelte
@ -0,0 +1,7 @@
+<script lang="ts">
+	import Toaster from '$lib/components/Toaster.svelte';
+	let { children } = $props();
+</script>
+
+{@render children()}
+<Toaster />
--- a/frontend/src/routes/dashboard/+layout.ts
+++ b/frontend/src/routes/dashboard/+layout.ts
@ -0,0 +1,10 @@
+import { redirect } from '@sveltejs/kit';
+import { browser } from '$app/environment';
+import { auth } from '$lib/auth.svelte';
+
+export function load() {
+	if (!browser) return;
+	if (!auth.isAuthenticated) {
+		redirect(302, '/login');
+	}
+}
--- a/frontend/src/routes/dashboard/+page.svelte
+++ b/frontend/src/routes/dashboard/+page.svelte
@ -0,0 +1,5 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { onMount } from 'svelte';
+	onMount(() => goto('/dashboard/capsules', { replaceState: true }));
+</script>
--- a/frontend/src/routes/dashboard/capsules/+page.svelte
+++ b/frontend/src/routes/dashboard/capsules/+page.svelte
@ -0,0 +1,874 @@
+<script lang="ts">
+	import Sidebar from '$lib/components/Sidebar.svelte';
+	import { onMount } from 'svelte';
+	import { toast } from '$lib/toast.svelte';
+	import {
+		listCapsules,
+		createCapsule,
+		pauseCapsule,
+		resumeCapsule,
+		destroyCapsule,
+		createSnapshot,
+		type Capsule,
+		type CreateCapsuleParams
+	} from '$lib/api/capsules';
+
+	const REFRESH_INTERVAL = 30;
+	const SPIN_DURATION = 600; // ms — minimum full rotation time
+
+	let collapsed = $state(
+		typeof window !== 'undefined'
+			? localStorage.getItem('wrenn_sidebar_collapsed') === 'true'
+			: false
+	);
+	let activeTab: 'list' | 'stats' = $state('list');
+
+	// Capsule list state
+	let capsules = $state<Capsule[]>([]);
+	let loading = $state(true);
+	let error = $state<string | null>(null);
+	let searchQuery = $state('');
+	let actionLoading = $state<string | null>(null);
+	let spinning = $state(false);
+
+	// Auto-refresh countdown state
+	let autoRefresh = $state(true);
+	let countdown = $state(REFRESH_INTERVAL);
+	let countdownInterval: ReturnType<typeof setInterval> | null = null;
+	let refreshInterval: ReturnType<typeof setInterval> | null = null;
+
+	// Sorting state
+	type SortKey = 'status' | 'vcpus' | 'memory_mb' | 'started_at' | 'timeout_sec';
+	let sortKey = $state<SortKey | null>(null);
+	let sortDir = $state<'asc' | 'desc'>('asc');
+
+	// Status menu state
+	let openMenuId = $state<string | null>(null);
+	let menuPos = $state<{ top: number; left: number }>({ top: 0, left: 0 });
+
+	// Create dialog state
+	let showCreateDialog = $state(false);
+	let createForm = $state<CreateCapsuleParams>({ template: 'minimal', vcpus: 1, memory_mb: 512, timeout_sec: 0 });
+	let creating = $state(false);
+	let createError = $state<string | null>(null);
+
+	// Destroy confirmation state
+	let destroyTarget = $state<Capsule | null>(null);
+	let destroying = $state(false);
+	let destroyError = $state<string | null>(null);
+
+	let filteredCapsules = $derived.by(() => {
+		let list = searchQuery
+			? capsules.filter((c) => c.id.toLowerCase().includes(searchQuery.toLowerCase()))
+			: [...capsules];
+
+		if (sortKey) {
+			const key = sortKey;
+			const dir = sortDir === 'asc' ? 1 : -1;
+			list.sort((a, b) => {
+				if (key === 'status') {
+					return a.status.localeCompare(b.status) * dir;
+				}
+				if (key === 'started_at') {
+					const ta = a.started_at ? new Date(a.started_at).getTime() : 0;
+					const tb = b.started_at ? new Date(b.started_at).getTime() : 0;
+					return (ta - tb) * dir;
+				}
+				const va = a[key] as number;
+				const vb = b[key] as number;
+				return (va - vb) * dir;
+			});
+		}
+
+		return list;
+	});
+
+	let runningCount = $derived(capsules.filter((c) => c.status === 'running').length);
+
+	function toggleSort(key: SortKey) {
+		if (sortKey === key) {
+			sortDir = sortDir === 'asc' ? 'desc' : 'asc';
+		} else {
+			sortKey = key;
+			sortDir = 'asc';
+		}
+	}
+
+	function startAutoRefresh() {
+		stopAutoRefresh();
+		countdown = REFRESH_INTERVAL;
+		countdownInterval = setInterval(() => {
+			countdown--;
+			if (countdown <= 0) {
+				countdown = REFRESH_INTERVAL;
+			}
+		}, 1000);
+		refreshInterval = setInterval(fetchCapsules, REFRESH_INTERVAL * 1000);
+	}
+
+	function stopAutoRefresh() {
+		if (countdownInterval) { clearInterval(countdownInterval); countdownInterval = null; }
+		if (refreshInterval) { clearInterval(refreshInterval); refreshInterval = null; }
+	}
+
+	function toggleAutoRefresh() {
+		autoRefresh = !autoRefresh;
+		if (autoRefresh) {
+			startAutoRefresh();
+		} else {
+			stopAutoRefresh();
+		}
+	}
+
+	async function fetchCapsules() {
+		const wasEmpty = capsules.length === 0;
+		if (wasEmpty) loading = true;
+
+		// Spin for at least SPIN_DURATION ms
+		spinning = true;
+		const spinTimer = new Promise<void>((resolve) => setTimeout(resolve, SPIN_DURATION));
+
+		error = null;
+		const result = await listCapsules();
+		if (result.ok) {
+			capsules = result.data;
+		} else {
+			error = result.error;
+		}
+		loading = false;
+
+		// Reset countdown on manual or auto refresh
+		if (autoRefresh) countdown = REFRESH_INTERVAL;
+
+		await spinTimer;
+		spinning = false;
+	}
+
+	async function handlePause(id: string) {
+		openMenuId = null;
+		actionLoading = id;
+		const result = await pauseCapsule(id);
+		if (result.ok) {
+			capsules = capsules.map((c) => (c.id === id ? result.data : c));
+		} else {
+			toast.error(result.error);
+		}
+		actionLoading = null;
+	}
+
+	async function handleResume(id: string) {
+		openMenuId = null;
+		actionLoading = id;
+		const result = await resumeCapsule(id);
+		if (result.ok) {
+			capsules = capsules.map((c) => (c.id === id ? result.data : c));
+		} else {
+			toast.error(result.error);
+		}
+		actionLoading = null;
+	}
+
+	async function handleSnapshot(id: string) {
+		openMenuId = null;
+		actionLoading = id;
+		const result = await createSnapshot(id);
+		if (result.ok) {
+			// Snapshot may have paused the capsule — refresh to get updated status
+			await fetchCapsules();
+		} else {
+			toast.error(result.error);
+		}
+		actionLoading = null;
+	}
+
+	async function handlePauseAndSnapshot(id: string) {
+		openMenuId = null;
+		actionLoading = id;
+		// Snapshot endpoint pauses automatically if running
+		const result = await createSnapshot(id);
+		if (result.ok) {
+			await fetchCapsules();
+		} else {
+			toast.error(result.error);
+		}
+		actionLoading = null;
+	}
+
+	async function handleDestroy() {
+		if (!destroyTarget) return;
+		destroying = true;
+		destroyError = null;
+		const id = destroyTarget.id;
+		const result = await destroyCapsule(id);
+		if (result.ok) {
+			capsules = capsules.filter((c) => c.id !== id);
+			destroyTarget = null;
+		} else {
+			destroyError = result.error;
+		}
+		destroying = false;
+	}
+
+	async function handleCreate() {
+		creating = true;
+		createError = null;
+		const result = await createCapsule(createForm);
+		if (result.ok) {
+			capsules = [result.data, ...capsules];
+			showCreateDialog = false;
+			createForm = { template: 'minimal', vcpus: 1, memory_mb: 512, timeout_sec: 0 };
+		} else {
+			createError = result.error;
+		}
+		creating = false;
+	}
+
+	function formatTime(iso: string | undefined): string {
+		if (!iso) return '—';
+		const d = new Date(iso);
+		return d.toLocaleString('en-US', {
+			month: 'short',
+			day: 'numeric',
+			hour: '2-digit',
+			minute: '2-digit',
+			second: '2-digit',
+			hour12: false
+		});
+	}
+
+	function timeAgo(iso: string | undefined): string {
+		if (!iso) return '';
+		const seconds = Math.floor((Date.now() - new Date(iso).getTime()) / 1000);
+		if (seconds < 60) return `${seconds}s ago`;
+		if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
+		if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
+		return `${Math.floor(seconds / 86400)}d ago`;
+	}
+
+	function handleClickOutside(event: MouseEvent) {
+		if (openMenuId && !(event.target as Element)?.closest('.status-menu-container')) {
+			openMenuId = null;
+		}
+	}
+
+	// Initial fetch + auto-refresh setup
+	onMount(() => {
+		fetchCapsules();
+		startAutoRefresh();
+		return () => stopAutoRefresh();
+	});
+</script>
+
+<style>
+	@keyframes spin-once {
+		from { transform: rotate(0deg); }
+		to { transform: rotate(360deg); }
+	}
+	.refresh-spin {
+		animation: spin-once 0.6s ease-in-out;
+	}
+</style>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<svelte:window onclick={handleClickOutside} onkeydown={(e) => { if (e.key === 'Escape') openMenuId = null; }} />
+
+<svelte:head>
+	<title>Wrenn - Capsules</title>
+</svelte:head>
+
+<div class="flex h-screen overflow-hidden">
+	<Sidebar bind:collapsed />
+
+	<div class="flex flex-1 flex-col overflow-hidden">
+		<main class="flex-1 overflow-y-auto bg-[var(--color-bg-0)]">
+			<!-- Header area -->
+			<div class="px-7 pt-6">
+				<!-- Top row: title + status chip -->
+				<div class="flex items-center justify-between">
+					<div>
+						<h1 class="font-serif text-[24px] tracking-[-0.02em] text-[var(--color-text-bright)]">
+							Capsules
+						</h1>
+						<p class="mt-1 text-[13px] text-[var(--color-text-tertiary)]">
+							Isolated VMs you can start, pause, and snapshot on demand.
+						</p>
+					</div>
+
+					<div class="flex items-center gap-3">
+						<!-- Status chip -->
+						<div
+							class="flex items-center gap-2.5 rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)] px-3.5 py-2"
+						>
+							<span class="relative flex h-[7px] w-[7px]">
+								<span
+									class="absolute inline-flex h-full w-full rounded-full bg-[var(--color-accent)]"
+									style="animation: wrenn-glow 2.5s ease-in-out infinite"
+								></span>
+								<span class="relative inline-flex h-[7px] w-[7px] rounded-full bg-[var(--color-accent)]"></span>
+							</span>
+							<span class="font-mono text-[14px] font-semibold text-[var(--color-accent-bright)]">{runningCount}</span>
+							<span class="text-[13px] text-[var(--color-text-secondary)]">concurrent capsules</span>
+						</div>
+					</div>
+				</div>
+
+				<!-- Tab bar -->
+				<div class="mt-4 flex gap-1 border-b border-[var(--color-border)]">
+					<button
+						onclick={() => (activeTab = 'list')}
+						class="flex items-center gap-2 border-b-2 px-4 py-2.5 text-[13px] font-medium transition-colors duration-150 {activeTab === 'list'
+							? 'border-[var(--color-accent)] text-[var(--color-accent-bright)]'
+							: 'border-transparent text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]'}"
+					>
+						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<line x1="8" y1="6" x2="21" y2="6" /><line x1="8" y1="12" x2="21" y2="12" /><line x1="8" y1="18" x2="21" y2="18" />
+							<line x1="3" y1="6" x2="3.01" y2="6" /><line x1="3" y1="12" x2="3.01" y2="12" /><line x1="3" y1="18" x2="3.01" y2="18" />
+						</svg>
+						List
+					</button>
+					<button
+						onclick={() => (activeTab = 'stats')}
+						class="flex items-center gap-2 border-b-2 px-4 py-2.5 text-[13px] font-medium transition-colors duration-150 {activeTab === 'stats'
+							? 'border-[var(--color-accent)] text-[var(--color-accent-bright)]'
+							: 'border-transparent text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]'}"
+					>
+						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
+						</svg>
+						Stats
+					</button>
+				</div>
+			</div>
+
+			<!-- Tab content -->
+			{#if activeTab === 'stats'}
+				<div class="p-7 space-y-5" style="animation: fadeUp 0.35s ease both">
+					<div class="flex overflow-hidden rounded-[var(--radius-card)] border border-[var(--color-border)]">
+						{@render metricCell('Concurrent Capsules', String(runningCount), '5-sec avg', 'limit: 20', true)}
+						{@render metricCell('Start Rate / Second', '0.000', '5-sec avg', null, true)}
+						{@render metricCell('Peak Concurrent', String(runningCount), '30-day max', 'limit: 20', false)}
+					</div>
+
+					{@render chartCard('Concurrent Capsules', String(runningCount), 'average')}
+					{@render chartCard('Start Rate Per Second', '0.000', 'average')}
+				</div>
+			{:else}
+				<div class="p-7" style="animation: fadeUp 0.35s ease both">
+					<!-- Search bar + controls -->
+					<div class="mb-4 flex items-center gap-3">
+						<div class="relative flex-1 max-w-[300px]">
+							<svg class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)]" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+								<circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+							</svg>
+							<input
+								type="text"
+								placeholder="Search by ID..."
+								bind:value={searchQuery}
+								class="w-full rounded-[var(--radius-input)] border border-[var(--color-border)] bg-[var(--color-bg-2)] py-2 pl-9 pr-3 font-mono text-[13px] text-[var(--color-text-bright)] outline-none placeholder:text-[var(--color-text-muted)] transition-colors duration-150 focus:border-[var(--color-accent)]"
+							/>
+						</div>
+						<span class="text-[13px] text-[var(--color-text-secondary)]">{filteredCapsules.length} total</span>
+
+						<div class="flex-1"></div>
+
+						<!-- Refresh button -->
+						<button
+							onclick={fetchCapsules}
+							disabled={spinning}
+							class="flex h-8 w-8 items-center justify-center rounded-[var(--radius-button)] border border-[var(--color-border)] text-[var(--color-text-tertiary)] transition-colors duration-150 hover:border-[var(--color-border-mid)] hover:text-[var(--color-text-secondary)] disabled:opacity-50"
+							title="Refresh"
+						>
+							<svg
+								class={spinning ? 'refresh-spin' : ''}
+								width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+							>
+								<polyline points="23 4 23 10 17 10" />
+								<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
+							</svg>
+						</button>
+
+						<!-- Auto-refresh countdown toggle -->
+						<button
+							onclick={toggleAutoRefresh}
+							class="flex items-center gap-1.5 rounded-[var(--radius-button)] border px-2.5 py-1.5 font-mono text-[11px] transition-colors duration-150
+								{autoRefresh
+									? 'border-[var(--color-accent)]/30 text-[var(--color-accent-mid)] hover:border-[var(--color-accent)]/50'
+									: 'border-[var(--color-border)] text-[var(--color-text-muted)] hover:border-[var(--color-border-mid)] hover:text-[var(--color-text-secondary)]'}"
+							title={autoRefresh ? 'Click to disable auto-refresh' : 'Click to enable auto-refresh (30s)'}
+						>
+							{#if autoRefresh}
+								{countdown}s
+							{:else}
+								Off
+							{/if}
+						</button>
+
+						<button
+							onclick={() => { showCreateDialog = true; createError = null; }}
+							class="flex items-center gap-2 rounded-[var(--radius-button)] bg-[var(--color-accent)] px-4 py-2 text-[13px] font-semibold text-white transition-all duration-150 hover:brightness-115 hover:-translate-y-px active:translate-y-0"
+						>
+							<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+								<line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
+							</svg>
+							Launch Capsule
+						</button>
+					</div>
+
+					{#if error}
+						<div class="mb-4 rounded-[var(--radius-card)] border border-[var(--color-red)]/30 bg-[var(--color-red)]/5 px-4 py-3 text-[13px] text-[var(--color-red)]">
+							{error}
+						</div>
+					{/if}
+
+					<!-- Table -->
+					<div class="rounded-[var(--radius-card)] border border-[var(--color-border)] overflow-hidden">
+						<!-- Table header -->
+						<div class="grid grid-cols-[1.6fr_0.8fr_0.5fr_0.5fr_0.6fr_1fr_0.9fr] rounded-t-[var(--radius-card)] border-b border-[var(--color-border)] bg-[var(--color-bg-3)]">
+							<div class="px-4 py-[11px] text-[11px] font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">ID</div>
+							<div class="px-4 py-[11px] text-[11px] font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">Template</div>
+							{@render sortableHeader('CPU', 'vcpus')}
+							{@render sortableHeader('Memory', 'memory_mb')}
+							{@render sortableHeader('Idle Timeout', 'timeout_sec')}
+							{@render sortableHeader('Started', 'started_at')}
+							{@render sortableHeader('Status', 'status')}
+						</div>
+
+						{#if loading && capsules.length === 0}
+							<div class="flex items-center justify-center py-16">
+								<div class="flex items-center gap-3 text-[13px] text-[var(--color-text-secondary)]">
+									<svg class="animate-spin" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+										<path d="M21 12a9 9 0 1 1-6.219-8.56" />
+									</svg>
+									Loading capsules...
+								</div>
+							</div>
+						{:else if filteredCapsules.length === 0}
+							<div class="flex flex-col items-center justify-center py-[72px]">
+								<div class="mb-5 flex h-14 w-14 items-center justify-center rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-3)]">
+									<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--color-text-secondary)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+										<rect x="2" y="3" width="20" height="14" rx="2" />
+										<line x1="8" y1="21" x2="16" y2="21" />
+										<line x1="12" y1="17" x2="12" y2="21" />
+									</svg>
+								</div>
+								<p class="font-serif text-[20px] tracking-[-0.02em] text-[var(--color-text-bright)]">
+									No capsules yet
+								</p>
+								<p class="mt-1.5 text-[13px] text-[var(--color-text-tertiary)]">
+									Active capsules will appear here.
+								</p>
+								<button
+									onclick={() => { showCreateDialog = true; createError = null; }}
+									class="mt-6 flex items-center gap-2 rounded-[var(--radius-button)] bg-[var(--color-accent)] px-5 py-2.5 text-[13px] font-semibold text-white transition-all duration-150 hover:brightness-115 hover:-translate-y-px active:translate-y-0"
+								>
+									Create a Capsule
+									<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+										<line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
+									</svg>
+								</button>
+							</div>
+						{:else}
+							{#each filteredCapsules as capsule, i (capsule.id)}
+								<div
+									class="grid grid-cols-[1.6fr_0.8fr_0.5fr_0.5fr_0.6fr_1fr_0.9fr] items-center border-b border-[var(--color-border)] transition-colors duration-150 hover:bg-[var(--color-bg-3)] last:border-b-0"
+									style="animation: fadeUp 0.35s ease both; animation-delay: {i * 40}ms"
+								>
+									<!-- ID with status dot -->
+									<div class="flex items-center gap-2.5 px-4 py-3">
+										{#if capsule.status === 'running'}
+											<span class="relative flex h-[6px] w-[6px] shrink-0">
+												<span class="absolute inline-flex h-full w-full rounded-full bg-[var(--color-accent)]" style="animation: wrenn-glow 2.5s ease-in-out infinite"></span>
+												<span class="relative inline-flex h-[6px] w-[6px] rounded-full bg-[var(--color-accent)]"></span>
+											</span>
+										{:else if capsule.status === 'paused'}
+											<span class="inline-flex h-[6px] w-[6px] shrink-0 rounded-full bg-[var(--color-amber)]"></span>
+										{:else}
+											<span class="inline-flex h-[6px] w-[6px] shrink-0 rounded-full bg-[var(--color-text-muted)]"></span>
+										{/if}
+										<span class="font-mono text-[13px] text-[var(--color-text-bright)]">{capsule.id}</span>
+									</div>
+
+									<!-- Template -->
+									<div class="px-4 py-3">
+										<span class="text-[13px] text-[var(--color-text-secondary)]">{capsule.template}</span>
+									</div>
+
+									<!-- CPU -->
+									<div class="px-4 py-3">
+										<span class="font-mono text-[13px] text-[var(--color-text-secondary)]">{capsule.vcpus}</span>
+									</div>
+
+									<!-- Memory -->
+									<div class="px-4 py-3">
+										<span class="font-mono text-[13px] text-[var(--color-text-secondary)]">{capsule.memory_mb}MB</span>
+									</div>
+
+									<!-- Idle Timeout -->
+									<div class="px-4 py-3">
+										<span class="font-mono text-[13px] text-[var(--color-text-secondary)]">{capsule.timeout_sec ? `${capsule.timeout_sec}s` : '—'}</span>
+									</div>
+
+									<!-- Started -->
+									<div class="px-4 py-3">
+										<span class="text-[13px] text-[var(--color-text-secondary)]" title={capsule.started_at ?? ''}>{formatTime(capsule.started_at)}</span>
+										{#if capsule.last_active_at}
+											<span class="ml-1.5 text-[11px] text-[var(--color-text-muted)]">{timeAgo(capsule.last_active_at)}</span>
+										{/if}
+									</div>
+
+									<!-- Status button with popover -->
+									<div class="relative px-4 py-3 status-menu-container">
+										{#if actionLoading === capsule.id}
+											<span class="inline-flex items-center gap-1.5 text-[13px] text-[var(--color-text-secondary)]">
+												<svg class="animate-spin" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+													<path d="M21 12a9 9 0 1 1-6.219-8.56" />
+												</svg>
+											</span>
+										{:else}
+											<button
+												onclick={(e) => {
+													e.stopPropagation();
+													if (openMenuId === capsule.id) {
+														openMenuId = null;
+													} else {
+														const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+														menuPos = { top: rect.bottom + 4, left: rect.right - 180 };
+														openMenuId = capsule.id;
+													}
+												}}
+												class="inline-flex items-center gap-1.5 rounded-[var(--radius-button)] border border-[var(--color-border)] bg-[var(--color-bg-2)] px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.04em] text-[var(--color-text-secondary)] transition-colors duration-150 hover:border-[var(--color-border-mid)] hover:text-[var(--color-text-primary)]"
+											>
+												{capsule.status}
+												<svg
+													class="transition-transform duration-150 {openMenuId === capsule.id ? 'rotate-180' : ''}"
+													width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
+												>
+													<polyline points="6 9 12 15 18 9" />
+												</svg>
+											</button>
+
+										{/if}
+									</div>
+								</div>
+							{/each}
+						{/if}
+					</div>
+				</div>
+			{/if}
+		</main>
+
+		<!-- Status bar -->
+		<footer
+			class="flex h-7 shrink-0 items-center justify-end border-t border-[var(--color-border)] bg-[var(--color-bg-1)] px-7"
+		>
+			<div class="flex items-center gap-1.5">
+				<span class="inline-flex h-[5px] w-[5px] rounded-full bg-[var(--color-accent)]"></span>
+				<span class="font-mono text-[11px] uppercase tracking-[0.04em] text-[var(--color-text-secondary)]">All systems operational</span>
+			</div>
+		</footer>
+	</div>
+</div>
+
+<!-- Fixed-position status popover menu -->
+{#if openMenuId}
+	{@const openCapsule = capsules.find((c) => c.id === openMenuId)}
+	{#if openCapsule}
+		<div
+			class="fixed z-50 w-[180px] overflow-hidden rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)] py-1"
+			style="top: {menuPos.top}px; left: {menuPos.left}px; animation: fadeUp 0.15s ease both"
+		>
+			{#if openCapsule.status === 'running'}
+				<button
+					onclick={() => handlePause(openCapsule.id)}
+					class="flex w-full items-center gap-2.5 px-3 py-2 text-[12px] text-[var(--color-text-secondary)] transition-colors duration-150 hover:bg-[var(--color-bg-3)] hover:text-[var(--color-text-primary)]"
+				>
+					<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" class="shrink-0">
+						<rect x="6" y="4" width="4" height="16" rx="1" />
+						<rect x="14" y="4" width="4" height="16" rx="1" />
+					</svg>
+					Pause
+				</button>
+				<button
+					onclick={() => handlePauseAndSnapshot(openCapsule.id)}
+					class="flex w-full items-center gap-2.5 px-3 py-2 text-[12px] text-[var(--color-text-secondary)] transition-colors duration-150 hover:bg-[var(--color-bg-3)] hover:text-[var(--color-text-primary)]"
+				>
+					<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0">
+						<path d="M14.5 4h-5L7 7H2v13a2 2 0 002 2h16a2 2 0 002-2V7h-5l-2.5-3z" />
+						<circle cx="12" cy="15" r="3" />
+					</svg>
+					Pause & Snapshot
+				</button>
+			{:else if openCapsule.status === 'paused'}
+				<button
+					onclick={() => handleResume(openCapsule.id)}
+					class="flex w-full items-center gap-2.5 px-3 py-2 text-[12px] text-[var(--color-text-secondary)] transition-colors duration-150 hover:bg-[var(--color-bg-3)] hover:text-[var(--color-text-primary)]"
+				>
+					<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" class="shrink-0">
+						<polygon points="5 3 19 12 5 21 5 3" />
+					</svg>
+					Resume
+				</button>
+				<button
+					onclick={() => handleSnapshot(openCapsule.id)}
+					class="flex w-full items-center gap-2.5 px-3 py-2 text-[12px] text-[var(--color-text-secondary)] transition-colors duration-150 hover:bg-[var(--color-bg-3)] hover:text-[var(--color-text-primary)]"
+				>
+					<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0">
+						<path d="M14.5 4h-5L7 7H2v13a2 2 0 002 2h16a2 2 0 002-2V7h-5l-2.5-3z" />
+						<circle cx="12" cy="15" r="3" />
+					</svg>
+					Snapshot
+				</button>
+			{/if}
+			<div class="my-1 border-t border-[var(--color-border)]"></div>
+			<button
+				onclick={() => { const target = openCapsule; openMenuId = null; destroyError = null; destroyTarget = target; }}
+				class="flex w-full items-center gap-2.5 px-3 py-2 text-[12px] text-[var(--color-red)] transition-colors duration-150 hover:bg-[var(--color-red)]/5"
+			>
+				<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0">
+					<polyline points="3 6 5 6 21 6" />
+					<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+				</svg>
+				Destroy
+			</button>
+		</div>
+	{/if}
+{/if}
+
+<!-- Create Capsule Dialog -->
+{#if showCreateDialog}
+	<div class="fixed inset-0 z-50 flex items-center justify-center">
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="absolute inset-0 bg-black/60"
+			onclick={() => { if (!creating) showCreateDialog = false; }}
+			onkeydown={(e) => { if (e.key === 'Escape' && !creating) showCreateDialog = false; }}
+		></div>
+
+		<div class="relative w-full max-w-[420px] rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)] p-6" style="animation: fadeUp 0.2s ease both">
+			<h2 class="font-serif text-[20px] tracking-[-0.02em] text-[var(--color-text-bright)]">Launch Capsule</h2>
+			<p class="mt-1 text-[13px] text-[var(--color-text-tertiary)]">Launch a new isolated VM.</p>
+
+			{#if createError}
+				<div class="mt-4 rounded-[var(--radius-input)] border border-[var(--color-red)]/30 bg-[var(--color-red)]/5 px-3 py-2 text-[12px] text-[var(--color-red)]">
+					{createError}
+				</div>
+			{/if}
+
+			<div class="mt-5 space-y-4">
+				<div>
+					<label class="mb-1.5 block text-[11px] font-semibold uppercase tracking-[0.05em] text-[var(--color-text-tertiary)]" for="create-template">Template</label>
+					<input
+						id="create-template"
+						type="text"
+						bind:value={createForm.template}
+						class="w-full rounded-[var(--radius-input)] border border-[var(--color-border)] bg-[var(--color-bg-4)] px-3 py-2 font-mono text-[13px] text-[var(--color-text-bright)] outline-none placeholder:text-[var(--color-text-muted)] transition-colors duration-150 focus:border-[var(--color-accent)]"
+						placeholder="minimal"
+					/>
+				</div>
+
+				<div class="grid grid-cols-2 gap-3">
+					<div>
+						<label class="mb-1.5 block text-[11px] font-semibold uppercase tracking-[0.05em] text-[var(--color-text-tertiary)]" for="create-vcpus">vCPUs</label>
+						<input
+							id="create-vcpus"
+							type="number"
+							min="1"
+							max="8"
+							bind:value={createForm.vcpus}
+							class="w-full rounded-[var(--radius-input)] border border-[var(--color-border)] bg-[var(--color-bg-4)] px-3 py-2 font-mono text-[13px] text-[var(--color-text-bright)] outline-none transition-colors duration-150 focus:border-[var(--color-accent)]"
+						/>
+					</div>
+					<div>
+						<label class="mb-1.5 block text-[11px] font-semibold uppercase tracking-[0.05em] text-[var(--color-text-tertiary)]" for="create-memory">Memory (MB)</label>
+						<input
+							id="create-memory"
+							type="number"
+							min="128"
+							max="8192"
+							step="128"
+							bind:value={createForm.memory_mb}
+							class="w-full rounded-[var(--radius-input)] border border-[var(--color-border)] bg-[var(--color-bg-4)] px-3 py-2 font-mono text-[13px] text-[var(--color-text-bright)] outline-none transition-colors duration-150 focus:border-[var(--color-accent)]"
+						/>
+					</div>
+				</div>
+
+				<div>
+					<label class="mb-1.5 block text-[11px] font-semibold uppercase tracking-[0.05em] text-[var(--color-text-tertiary)]" for="create-timeout">Auto-pause timeout (seconds, 0 = never)</label>
+					<input
+						id="create-timeout"
+						type="number"
+						min="0"
+						bind:value={createForm.timeout_sec}
+						class="w-full rounded-[var(--radius-input)] border border-[var(--color-border)] bg-[var(--color-bg-4)] px-3 py-2 font-mono text-[13px] text-[var(--color-text-bright)] outline-none transition-colors duration-150 focus:border-[var(--color-accent)]"
+					/>
+				</div>
+			</div>
+
+			<div class="mt-6 flex justify-end gap-3">
+				<button
+					onclick={() => { showCreateDialog = false; }}
+					disabled={creating}
+					class="rounded-[var(--radius-button)] border border-[var(--color-border)] px-4 py-2 text-[13px] text-[var(--color-text-secondary)] transition-colors duration-150 hover:border-[var(--color-border-mid)] hover:text-[var(--color-text-primary)] disabled:opacity-50"
+				>
+					Cancel
+				</button>
+				<button
+					onclick={handleCreate}
+					disabled={creating}
+					class="flex items-center gap-2 rounded-[var(--radius-button)] bg-[var(--color-accent)] px-5 py-2 text-[13px] font-semibold text-white transition-all duration-150 hover:brightness-115 hover:-translate-y-px active:translate-y-0 disabled:opacity-50 disabled:hover:translate-y-0"
+				>
+					{#if creating}
+						<svg class="animate-spin" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							<path d="M21 12a9 9 0 1 1-6.219-8.56" />
+						</svg>
+						Launching...
+					{:else}
+						Launch
+					{/if}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<!-- Destroy Confirmation Dialog -->
+{#if destroyTarget}
+	<div class="fixed inset-0 z-50 flex items-center justify-center">
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="absolute inset-0 bg-black/60"
+			onclick={() => { if (!destroying) destroyTarget = null; }}
+			onkeydown={(e) => { if (e.key === 'Escape' && !destroying) destroyTarget = null; }}
+		></div>
+
+		<div class="relative w-full max-w-[380px] rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)] p-6" style="animation: fadeUp 0.2s ease both">
+			<h2 class="font-serif text-[20px] tracking-[-0.02em] text-[var(--color-text-bright)]">Destroy Capsule</h2>
+			<p class="mt-2 text-[13px] text-[var(--color-text-tertiary)]">
+				This will permanently destroy <span class="font-mono text-[var(--color-text-secondary)]">{destroyTarget.id}</span>. This action cannot be undone.
+			</p>
+
+			{#if destroyError}
+				<div class="mt-4 rounded-[var(--radius-input)] border border-[var(--color-red)]/30 bg-[var(--color-red)]/5 px-3 py-2 text-[12px] text-[var(--color-red)]">
+					{destroyError}
+				</div>
+			{/if}
+
+			<div class="mt-6 flex justify-end gap-3">
+				<button
+					onclick={() => { destroyTarget = null; }}
+					disabled={destroying}
+					class="rounded-[var(--radius-button)] border border-[var(--color-border)] px-4 py-2 text-[13px] text-[var(--color-text-secondary)] transition-colors duration-150 hover:border-[var(--color-border-mid)] hover:text-[var(--color-text-primary)] disabled:opacity-50"
+				>
+					Cancel
+				</button>
+				<button
+					onclick={handleDestroy}
+					disabled={destroying}
+					class="flex items-center gap-2 rounded-[var(--radius-button)] bg-[var(--color-red)] px-5 py-2 text-[13px] font-semibold text-white transition-all duration-150 hover:brightness-115 hover:-translate-y-px active:translate-y-0 disabled:opacity-50 disabled:hover:translate-y-0"
+				>
+					{#if destroying}
+						<svg class="animate-spin" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							<path d="M21 12a9 9 0 1 1-6.219-8.56" />
+						</svg>
+						Destroying...
+					{:else}
+						Destroy
+					{/if}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<!-- Sortable header snippet -->
+{#snippet sortableHeader(label: string, key: SortKey)}
+	<button
+		onclick={() => toggleSort(key)}
+		class="flex items-center gap-1 px-4 py-[11px] text-[11px] font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)] transition-colors duration-150 hover:text-[var(--color-text-secondary)]"
+	>
+		{label}
+		{#if sortKey === key}
+			<svg
+				class="transition-transform duration-150 {sortDir === 'desc' ? 'rotate-180' : ''}"
+				width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
+			>
+				<polyline points="18 15 12 9 6 15" />
+			</svg>
+		{/if}
+	</button>
+{/snippet}
+
+{#snippet metricCell(label: string, value: string, sublabel: string, extra: string | null, hasBorderRight: boolean)}
+	<div class="flex-1 bg-[var(--color-bg-2)] px-5 py-[18px] transition-colors duration-150 hover:bg-[var(--color-bg-3)] {hasBorderRight ? 'border-r border-[var(--color-border)]' : ''}">
+		<div class="flex items-center gap-2">
+			<span class="text-[12px] font-semibold uppercase tracking-[0.05em] text-[var(--color-text-tertiary)]">{label}</span>
+			<span class="rounded-[3px] bg-[var(--color-accent-glow-mid)] px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.04em] text-[var(--color-accent-mid)]">
+				<span class="mr-0.5 inline-block h-[5px] w-[5px] rounded-full bg-[var(--color-accent)]" style="animation: wrenn-glow 2.5s ease-in-out infinite"></span>
+				Live
+			</span>
+		</div>
+		<div class="mt-1 font-serif text-[36px] tracking-[-0.04em] text-[var(--color-text-bright)]">{value}</div>
+		<div class="mt-1 flex items-center gap-1.5 text-[11px] text-[var(--color-text-tertiary)]">
+			<span>{sublabel}</span>
+			{#if extra}
+				<span class="text-[var(--color-text-muted)]">|</span>
+				<span class="font-mono text-[var(--color-text-muted)]">{extra}</span>
+			{/if}
+		</div>
+	</div>
+{/snippet}
+
+{#snippet chartCard(label: string, value: string, sublabel: string)}
+	<div class="rounded-[var(--radius-card)] border border-[var(--color-border)] bg-[var(--color-bg-2)]">
+		<div class="flex items-center justify-between px-5 pt-[18px] pb-3">
+			<div>
+				<div class="text-[12px] font-semibold uppercase tracking-[0.05em] text-[var(--color-text-tertiary)]">{label}</div>
+				<div class="mt-0.5 flex items-baseline gap-2">
+					<span class="font-serif text-[30px] tracking-[-0.04em] text-[var(--color-text-bright)]">{value}</span>
+					<span class="text-[13px] text-[var(--color-text-secondary)]">{sublabel}</span>
+					<span class="rounded-[3px] bg-[var(--color-accent-glow-mid)] px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.04em] text-[var(--color-accent-mid)]">
+						<span class="mr-0.5 inline-block h-[5px] w-[5px] rounded-full bg-[var(--color-accent)]" style="animation: wrenn-glow 2.5s ease-in-out infinite"></span>
+						Live
+					</span>
+				</div>
+			</div>
+
+			<div class="flex overflow-hidden rounded-[var(--radius-button)] border border-[var(--color-border)]">
+				{#each ['5m', '1H', '6H', '24H', '30D'] as range, i}
+					<button
+						class="px-2.5 py-1 font-mono text-[11px] transition-colors duration-150 {range === '1H'
+							? 'bg-[var(--color-bg-5)] text-[var(--color-text-bright)]'
+							: 'text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)]'} {i > 0
+							? 'border-l border-[var(--color-border)]'
+							: ''}"
+					>
+						{range}
+					</button>
+				{/each}
+			</div>
+		</div>
+
+		<div class="relative h-[200px] px-5 pb-3">
+			<div class="absolute left-0 top-0 flex h-full w-12 flex-col justify-between py-1 text-right">
+				<span class="font-mono text-[10px] text-[var(--color-text-muted)]">4</span>
+				<span class="font-mono text-[10px] text-[var(--color-text-muted)]">3</span>
+				<span class="font-mono text-[10px] text-[var(--color-text-muted)]">2</span>
+				<span class="font-mono text-[10px] text-[var(--color-text-muted)]">1</span>
+				<span class="font-mono text-[10px] text-[var(--color-text-muted)]">0</span>
+			</div>
+
+			<svg class="ml-8 h-full w-[calc(100%-2rem)]" viewBox="0 0 400 180" preserveAspectRatio="none">
+				{#each [0, 45, 90, 135, 180] as y}
+					<line x1="0" y1={y} x2="400" y2={y} stroke="var(--color-border)" stroke-width="0.5" stroke-dasharray="4 4" />
+				{/each}
+				<line x1="0" y1="180" x2="400" y2="180" stroke="var(--color-accent)" stroke-width="1.5" />
+			</svg>
+
+			<div class="ml-8 flex justify-between pt-2">
+				{#each ['03:01', '03:02', '03:03', '03:04', '03:05'] as t}
+					<span class="font-mono text-[10px] text-[var(--color-text-muted)]">{t}</span>
+				{/each}
+			</div>
+		</div>
+	</div>
+{/snippet}
--- a/frontend/src/routes/dashboard/keys/+page.svelte
+++ b/frontend/src/routes/dashboard/keys/+page.svelte
@ -0,0 +1,440 @@
+<script lang="ts">
+	import Sidebar from '$lib/components/Sidebar.svelte';
+	import { onMount } from 'svelte';
+	import { listKeys, createKey, revokeKey, type APIKey } from '$lib/api/keys';
+
+	let collapsed = $state(
+		typeof window !== 'undefined'
+			? localStorage.getItem('wrenn_sidebar_collapsed') === 'true'
+			: false
+	);
+
+	// List state
+	let keys = $state<APIKey[]>([]);
+	let loading = $state(true);
+	let error = $state<string | null>(null);
+
+	// Create dialog state
+	let showCreate = $state(false);
+	let createName = $state('');
+	let creating = $state(false);
+	let createError = $state<string | null>(null);
+
+	// Reveal state — shown immediately after creation
+	let newKey = $state<APIKey | null>(null);
+	let copied = $state(false);
+
+	// Revoke state
+	let revokeTarget = $state<APIKey | null>(null);
+	let revoking = $state(false);
+	let revokeError = $state<string | null>(null);
+
+	async function fetchKeys() {
+		loading = true;
+		error = null;
+		const result = await listKeys();
+		if (result.ok) {
+			keys = result.data;
+		} else {
+			error = result.error;
+		}
+		loading = false;
+	}
+
+	async function handleCreate() {
+		if (!createName.trim()) return;
+		creating = true;
+		createError = null;
+		const result = await createKey(createName.trim());
+		if (result.ok) {
+			keys = [result.data, ...keys];
+			newKey = result.data;
+			showCreate = false;
+			createName = '';
+			copied = false;
+		} else {
+			createError = result.error;
+		}
+		creating = false;
+	}
+
+	async function handleRevoke() {
+		if (!revokeTarget) return;
+		revoking = true;
+		revokeError = null;
+		const id = revokeTarget.id;
+		const result = await revokeKey(id);
+		if (result.ok) {
+			keys = keys.filter((k) => k.id !== id);
+			revokeTarget = null;
+		} else {
+			revokeError = result.error;
+		}
+		revoking = false;
+	}
+
+	async function copyKey() {
+		if (!newKey?.key) return;
+		await navigator.clipboard.writeText(newKey.key);
+		copied = true;
+		setTimeout(() => (copied = false), 2000);
+	}
+
+	function formatDate(iso: string | undefined): string {
+		if (!iso) return '—';
+		return new Date(iso).toLocaleString('en-US', {
+			month: 'short',
+			day: 'numeric',
+			year: 'numeric',
+			hour: '2-digit',
+			minute: '2-digit',
+			hour12: false
+		});
+	}
+
+	function timeAgo(iso: string | undefined): string {
+		if (!iso) return '';
+		const seconds = Math.floor((Date.now() - new Date(iso).getTime()) / 1000);
+		if (seconds < 60) return `${seconds}s ago`;
+		if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
+		if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
+		return `${Math.floor(seconds / 86400)}d ago`;
+	}
+
+
+	onMount(fetchKeys);
+</script>
+
+<svelte:head>
+	<title>Wrenn - API Keys</title>
+</svelte:head>
+
+<div class="flex h-screen overflow-hidden">
+	<Sidebar bind:collapsed />
+
+	<div class="flex flex-1 flex-col overflow-hidden">
+		<main class="flex-1 overflow-y-auto bg-[var(--color-bg-0)]">
+			<!-- Header -->
+			<div class="px-7 pt-6">
+				<div class="flex items-center justify-between">
+					<div>
+						<h1 class="font-serif text-[24px] tracking-[-0.02em] text-[var(--color-text-bright)]">
+							API Keys
+						</h1>
+						<p class="mt-1 text-[13px] text-[var(--color-text-tertiary)]">
+							Keys authenticate SDK and direct API requests. Treat them like passwords.
+						</p>
+					</div>
+
+					<button
+						onclick={() => { showCreate = true; createError = null; createName = ''; }}
+						class="flex items-center gap-2 rounded-[var(--radius-button)] bg-[var(--color-accent)] px-4 py-2 text-[13px] font-semibold text-white transition-all duration-150 hover:brightness-115 hover:-translate-y-px active:translate-y-0"
+					>
+						<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+							<line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
+						</svg>
+						New Key
+					</button>
+				</div>
+
+				<div class="mt-5 border-b border-[var(--color-border)]"></div>
+			</div>
+
+			<!-- Content -->
+			<div class="p-7" style="animation: fadeUp 0.35s ease both">
+				{#if error}
+					<div class="mb-4 rounded-[var(--radius-card)] border border-[var(--color-red)]/30 bg-[var(--color-red)]/5 px-4 py-3 text-[13px] text-[var(--color-red)]">
+						{error}
+					</div>
+				{/if}
+
+				{#if loading}
+					<div class="flex items-center justify-center py-24">
+						<div class="flex items-center gap-3 text-[13px] text-[var(--color-text-secondary)]">
+							<svg class="animate-spin" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+								<path d="M21 12a9 9 0 1 1-6.219-8.56" />
+							</svg>
+							Loading keys...
+						</div>
+					</div>
+				{:else if keys.length === 0}
+					<div class="flex flex-col items-center justify-center py-[72px]">
+						<div class="mb-5 flex h-14 w-14 items-center justify-center rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-3)]">
+							<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--color-text-secondary)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+								<path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" />
+							</svg>
+						</div>
+						<p class="font-serif text-[20px] tracking-[-0.02em] text-[var(--color-text-bright)]">No API keys yet</p>
+						<p class="mt-1.5 text-[13px] text-[var(--color-text-tertiary)]">Create a key to authenticate SDK and API requests.</p>
+						<button
+							onclick={() => { showCreate = true; createError = null; createName = ''; }}
+							class="mt-6 flex items-center gap-2 rounded-[var(--radius-button)] bg-[var(--color-accent)] px-5 py-2.5 text-[13px] font-semibold text-white transition-all duration-150 hover:brightness-115 hover:-translate-y-px active:translate-y-0"
+						>
+							Create a Key
+							<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+								<line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
+							</svg>
+						</button>
+					</div>
+				{:else}
+					<div class="rounded-[var(--radius-card)] border border-[var(--color-border)] overflow-hidden">
+						<!-- Table header -->
+						<div class="grid grid-cols-[2fr_1.2fr_1.4fr_1.4fr_80px] border-b border-[var(--color-border)] bg-[var(--color-bg-3)]">
+							<div class="px-4 py-[11px] text-[11px] font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">Name / Key</div>
+							<div class="px-4 py-[11px] text-[11px] font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">Created By</div>
+							<div class="px-4 py-[11px] text-[11px] font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">Created</div>
+							<div class="px-4 py-[11px] text-[11px] font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">Last Used</div>
+							<div class="px-4 py-[11px] text-[11px] font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]"></div>
+						</div>
+
+						{#each keys as key, i (key.id)}
+							<div
+								class="grid grid-cols-[2fr_1.2fr_1.4fr_1.4fr_80px] items-center border-b border-[var(--color-border)] transition-colors duration-150 hover:bg-[var(--color-bg-3)] last:border-b-0"
+								style="animation: fadeUp 0.35s ease both; animation-delay: {i * 40}ms"
+							>
+								<!-- Name + prefix -->
+								<div class="flex flex-col gap-0.5 px-4 py-3">
+									<span class="text-[13px] font-medium text-[var(--color-text-bright)]">{key.name || '—'}</span>
+									<span class="font-mono text-[12px] text-[var(--color-text-muted)]">{key.key_prefix}...</span>
+								</div>
+
+								<!-- Created by -->
+								<div class="px-4 py-3">
+									<span class="text-[13px] text-[var(--color-text-secondary)]">{key.creator_email ?? key.created_by}</span>
+								</div>
+
+								<!-- Created at -->
+								<div class="px-4 py-3">
+									<span class="text-[13px] text-[var(--color-text-secondary)]">{formatDate(key.created_at)}</span>
+								</div>
+
+								<!-- Last used -->
+								<div class="px-4 py-3">
+									{#if key.last_used}
+										<span class="text-[13px] text-[var(--color-text-secondary)]" title={formatDate(key.last_used)}>
+											{timeAgo(key.last_used)}
+										</span>
+									{:else}
+										<span class="text-[13px] text-[var(--color-text-muted)]">Never</span>
+									{/if}
+								</div>
+
+								<!-- Revoke -->
+								<div class="flex justify-end px-4 py-3">
+									<button
+										onclick={() => { revokeTarget = key; revokeError = null; }}
+										class="rounded-[var(--radius-button)] border border-[var(--color-border)] px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.04em] text-[var(--color-text-tertiary)] transition-colors duration-150 hover:border-[var(--color-red)]/40 hover:text-[var(--color-red)]"
+									>
+										Revoke
+									</button>
+								</div>
+							</div>
+						{/each}
+					</div>
+
+					<p class="mt-3 text-[12px] text-[var(--color-text-muted)]">
+						{keys.length} {keys.length === 1 ? 'key' : 'keys'} total
+					</p>
+				{/if}
+			</div>
+		</main>
+
+		<!-- Status bar -->
+		<footer class="flex h-7 shrink-0 items-center justify-end border-t border-[var(--color-border)] bg-[var(--color-bg-1)] px-7">
+			<div class="flex items-center gap-1.5">
+				<span class="inline-flex h-[5px] w-[5px] rounded-full bg-[var(--color-accent)]"></span>
+				<span class="font-mono text-[11px] uppercase tracking-[0.04em] text-[var(--color-text-secondary)]">All systems operational</span>
+			</div>
+		</footer>
+	</div>
+</div>
+
+<!-- Create Key Dialog -->
+{#if showCreate}
+	<div class="fixed inset-0 z-50 flex items-center justify-center">
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="absolute inset-0 bg-black/60"
+			onclick={() => { if (!creating) showCreate = false; }}
+			onkeydown={(e) => { if (e.key === 'Escape' && !creating) showCreate = false; }}
+		></div>
+
+		<div class="relative w-full max-w-[400px] rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)] p-6" style="animation: fadeUp 0.2s ease both">
+			<h2 class="font-serif text-[20px] tracking-[-0.02em] text-[var(--color-text-bright)]">New API Key</h2>
+			<p class="mt-1 text-[13px] text-[var(--color-text-tertiary)]">Give your key a name to identify it later.</p>
+
+			{#if createError}
+				<div class="mt-4 rounded-[var(--radius-input)] border border-[var(--color-red)]/30 bg-[var(--color-red)]/5 px-3 py-2 text-[12px] text-[var(--color-red)]">
+					{createError}
+				</div>
+			{/if}
+
+			<div class="mt-5">
+				<label class="mb-1.5 block text-[11px] font-semibold uppercase tracking-[0.05em] text-[var(--color-text-tertiary)]" for="key-name">
+					Key name
+				</label>
+				<input
+					id="key-name"
+					type="text"
+					placeholder="e.g. Production SDK"
+					bind:value={createName}
+					onkeydown={(e) => { if (e.key === 'Enter' && !creating) handleCreate(); }}
+					class="w-full rounded-[var(--radius-input)] border border-[var(--color-border)] bg-[var(--color-bg-4)] px-3 py-2 text-[13px] text-[var(--color-text-bright)] outline-none placeholder:text-[var(--color-text-muted)] transition-colors duration-150 focus:border-[var(--color-accent)]"
+				/>
+			</div>
+
+			<div class="mt-6 flex justify-end gap-3">
+				<button
+					onclick={() => { showCreate = false; }}
+					disabled={creating}
+					class="rounded-[var(--radius-button)] border border-[var(--color-border)] px-4 py-2 text-[13px] text-[var(--color-text-secondary)] transition-colors duration-150 hover:border-[var(--color-border-mid)] hover:text-[var(--color-text-primary)] disabled:opacity-50"
+				>
+					Cancel
+				</button>
+				<button
+					onclick={handleCreate}
+					disabled={creating || !createName.trim()}
+					class="flex items-center gap-2 rounded-[var(--radius-button)] bg-[var(--color-accent)] px-5 py-2 text-[13px] font-semibold text-white transition-all duration-150 hover:brightness-115 hover:-translate-y-px active:translate-y-0 disabled:opacity-50 disabled:hover:translate-y-0"
+				>
+					{#if creating}
+						<svg class="animate-spin" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							<path d="M21 12a9 9 0 1 1-6.219-8.56" />
+						</svg>
+						Creating...
+					{:else}
+						Create Key
+					{/if}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<!-- Key Reveal Dialog — shown once after creation -->
+{#if newKey}
+	<div class="fixed inset-0 z-50 flex items-center justify-center">
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="absolute inset-0 bg-black/60"
+			onclick={() => { newKey = null; }}
+			onkeydown={(e) => { if (e.key === 'Escape') newKey = null; }}
+		></div>
+
+		<div class="relative w-full max-w-[480px] rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)] p-6" style="animation: fadeUp 0.2s ease both">
+			<!-- Success indicator -->
+			<div class="mb-4 flex items-center gap-2.5">
+				<span class="flex h-5 w-5 items-center justify-center rounded-full bg-[var(--color-accent-glow-mid)]">
+					<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent-bright)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+						<polyline points="20 6 9 17 4 12" />
+					</svg>
+				</span>
+				<span class="text-[12px] font-semibold text-[var(--color-accent-mid)]">Key created successfully</span>
+			</div>
+
+			<h2 class="font-serif text-[20px] tracking-[-0.02em] text-[var(--color-text-bright)]">{newKey.name || 'API Key'}</h2>
+			<p class="mt-1 text-[13px] text-[var(--color-text-tertiary)]">
+				Copy this key now — it won't be shown again.
+			</p>
+
+			<!-- Key display -->
+			<div class="mt-5 rounded-[var(--radius-input)] border border-[var(--color-border-mid)] bg-[var(--color-bg-0)] p-4">
+				<div class="flex items-center gap-3">
+					<span class="min-w-0 flex-1 break-all font-mono text-[13px] leading-relaxed text-[var(--color-text-bright)]">
+						{newKey.key ?? ''}
+					</span>
+					<button
+						onclick={copyKey}
+						class="shrink-0 flex items-center gap-1.5 rounded-[var(--radius-button)] border px-3 py-1.5 text-[12px] font-semibold transition-all duration-150
+							{copied
+								? 'border-[var(--color-accent)]/40 bg-[var(--color-accent-glow-mid)] text-[var(--color-accent-mid)]'
+								: 'border-[var(--color-border-mid)] text-[var(--color-text-secondary)] hover:border-[var(--color-border-mid)] hover:text-[var(--color-text-primary)]'}"
+					>
+						{#if copied}
+							<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+								<polyline points="20 6 9 17 4 12" />
+							</svg>
+							Copied
+						{:else}
+							<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+								<rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+								<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+							</svg>
+							Copy
+						{/if}
+					</button>
+				</div>
+			</div>
+
+			<!-- Warning -->
+			<div class="mt-3 flex items-start gap-2 rounded-[var(--radius-input)] border border-[var(--color-amber)]/20 bg-[var(--color-amber)]/5 px-3 py-2.5">
+				<svg class="mt-0.5 shrink-0" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--color-amber)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+					<line x1="12" y1="9" x2="12" y2="13" /><line x1="12" y1="17" x2="12.01" y2="17" />
+				</svg>
+				<p class="text-[12px] leading-relaxed text-[var(--color-amber)]">
+					Store this key securely. For security reasons, we only show it once and cannot retrieve it later.
+				</p>
+			</div>
+
+			<div class="mt-6 flex justify-end">
+				<button
+					onclick={() => { newKey = null; }}
+					class="rounded-[var(--radius-button)] bg-[var(--color-bg-4)] border border-[var(--color-border-mid)] px-5 py-2 text-[13px] font-semibold text-[var(--color-text-primary)] transition-colors duration-150 hover:border-[var(--color-border-mid)] hover:bg-[var(--color-bg-5)]"
+				>
+					Done
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<!-- Revoke Confirmation Dialog -->
+{#if revokeTarget}
+	<div class="fixed inset-0 z-50 flex items-center justify-center">
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="absolute inset-0 bg-black/60"
+			onclick={() => { if (!revoking) revokeTarget = null; }}
+			onkeydown={(e) => { if (e.key === 'Escape' && !revoking) revokeTarget = null; }}
+		></div>
+
+		<div class="relative w-full max-w-[380px] rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)] p-6" style="animation: fadeUp 0.2s ease both">
+			<h2 class="font-serif text-[20px] tracking-[-0.02em] text-[var(--color-text-bright)]">Revoke Key</h2>
+			<p class="mt-2 text-[13px] text-[var(--color-text-tertiary)]">
+				Revoke <span class="font-medium text-[var(--color-text-secondary)]">{revokeTarget.name || revokeTarget.id}</span>?
+				Any request using it will stop working immediately.
+			</p>
+			<p class="mt-1.5 font-mono text-[12px] text-[var(--color-text-muted)]">{revokeTarget.key_prefix}...</p>
+
+			{#if revokeError}
+				<div class="mt-4 rounded-[var(--radius-input)] border border-[var(--color-red)]/30 bg-[var(--color-red)]/5 px-3 py-2 text-[12px] text-[var(--color-red)]">
+					{revokeError}
+				</div>
+			{/if}
+
+			<div class="mt-6 flex justify-end gap-3">
+				<button
+					onclick={() => { revokeTarget = null; }}
+					disabled={revoking}
+					class="rounded-[var(--radius-button)] border border-[var(--color-border)] px-4 py-2 text-[13px] text-[var(--color-text-secondary)] transition-colors duration-150 hover:border-[var(--color-border-mid)] hover:text-[var(--color-text-primary)] disabled:opacity-50"
+				>
+					Cancel
+				</button>
+				<button
+					onclick={handleRevoke}
+					disabled={revoking}
+					class="flex items-center gap-2 rounded-[var(--radius-button)] bg-[var(--color-red)] px-5 py-2 text-[13px] font-semibold text-white transition-all duration-150 hover:brightness-115 hover:-translate-y-px active:translate-y-0 disabled:opacity-50 disabled:hover:translate-y-0"
+				>
+					{#if revoking}
+						<svg class="animate-spin" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							<path d="M21 12a9 9 0 1 1-6.219-8.56" />
+						</svg>
+						Revoking...
+					{:else}
+						Revoke Key
+					{/if}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
--- a/frontend/src/routes/dashboard/snapshots/+page.svelte
+++ b/frontend/src/routes/dashboard/snapshots/+page.svelte
@ -0,0 +1,629 @@
+<script lang="ts">
+	import Sidebar from '$lib/components/Sidebar.svelte';
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+	import {
+		listSnapshots,
+		deleteSnapshot,
+		createCapsule,
+		type Snapshot
+	} from '$lib/api/capsules';
+
+	let collapsed = $state(
+		typeof window !== 'undefined'
+			? localStorage.getItem('wrenn_sidebar_collapsed') === 'true'
+			: false
+	);
+
+	// Page tab — Images is disabled/future
+	let pageTab = $state<'snapshots' | 'images'>('snapshots');
+
+	// Type filter within snapshots tab
+	type TypeFilter = 'all' | 'snapshot' | 'base';
+	let typeFilter = $state<TypeFilter>('all');
+
+	// List state
+	let snapshots = $state<Snapshot[]>([]);
+	let loading = $state(true);
+	let error = $state<string | null>(null);
+
+	// Delete state
+	let deleteTarget = $state<Snapshot | null>(null);
+	let deleting = $state(false);
+	let deleteError = $state<string | null>(null);
+
+	// Row dropdown (split button chevron)
+	let openDropdownName = $state<string | null>(null);
+	let dropdownPos = $state<{ top: number; left: number }>({ top: 0, left: 0 });
+
+	// Launch state
+	let launchTarget = $state<Snapshot | null>(null);
+	let launchVcpus = $state(1);
+	let launchMemoryMb = $state(512);
+	let launchTimeoutSec = $state(0);
+	let launching = $state(false);
+	let launchError = $state<string | null>(null);
+
+	let filteredSnapshots = $derived.by(() => {
+		if (typeFilter === 'all') return snapshots;
+		return snapshots.filter((s) => s.type === typeFilter);
+	});
+
+	async function fetchSnapshots() {
+		loading = true;
+		error = null;
+		const result = await listSnapshots();
+		if (result.ok) {
+			snapshots = result.data;
+		} else {
+			error = result.error;
+		}
+		loading = false;
+	}
+
+	async function handleDelete() {
+		if (!deleteTarget) return;
+		deleting = true;
+		deleteError = null;
+		const name = deleteTarget.name;
+		const result = await deleteSnapshot(name);
+		if (result.ok) {
+			snapshots = snapshots.filter((s) => s.name !== name);
+			deleteTarget = null;
+		} else {
+			deleteError = result.error;
+		}
+		deleting = false;
+	}
+
+	function openLaunch(snapshot: Snapshot) {
+		launchTarget = snapshot;
+		launchVcpus = snapshot.vcpus ?? 1;
+		launchMemoryMb = snapshot.memory_mb ?? 512;
+		launchTimeoutSec = 0;
+		launchError = null;
+	}
+
+	async function handleLaunch() {
+		if (!launchTarget) return;
+		launching = true;
+		launchError = null;
+		const result = await createCapsule({
+			template: launchTarget.name,
+			vcpus: launchVcpus,
+			memory_mb: launchMemoryMb,
+			timeout_sec: launchTimeoutSec
+		});
+		if (result.ok) {
+			launchTarget = null;
+			goto('/dashboard/capsules');
+		} else {
+			launchError = result.error;
+		}
+		launching = false;
+	}
+
+	function formatBytes(bytes: number): string {
+		if (bytes < 1024) return `${bytes} B`;
+		if (bytes < 1024 ** 2) return `${(bytes / 1024).toFixed(1)} KB`;
+		if (bytes < 1024 ** 3) return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
+		return `${(bytes / 1024 ** 3).toFixed(2)} GB`;
+	}
+
+	function formatDate(iso: string): string {
+		return new Date(iso).toLocaleString('en-US', {
+			month: 'short',
+			day: 'numeric',
+			year: 'numeric',
+			hour: '2-digit',
+			minute: '2-digit',
+			hour12: false
+		});
+	}
+
+	function timeAgo(iso: string): string {
+		const seconds = Math.floor((Date.now() - new Date(iso).getTime()) / 1000);
+		if (seconds < 60) return `${seconds}s ago`;
+		if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
+		if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
+		return `${Math.floor(seconds / 86400)}d ago`;
+	}
+
+	function emptyHeading(f: TypeFilter): string {
+		if (f === 'snapshot') return 'No snapshots';
+		if (f === 'base') return 'No images';
+		return 'No snapshots yet';
+	}
+
+	function emptyDescription(f: TypeFilter): string {
+		if (f === 'snapshot') return 'Capture a running capsule to create a snapshot.';
+		if (f === 'base') return 'Images appear here once added to your account.';
+		return 'Snapshots are created from the Capsules page. Pause or snapshot a running capsule to get started.';
+	}
+
+	onMount(fetchSnapshots);
+</script>
+
+<svelte:head>
+	<title>Wrenn - Templates</title>
+</svelte:head>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<svelte:window
+	onkeydown={(e) => {
+		if (e.key === 'Escape') {
+			if (openDropdownName) { openDropdownName = null; return; }
+			if (deleting || launching) return;
+			deleteTarget = null;
+			launchTarget = null;
+		}
+	}}
+	onclick={(e) => {
+		if (openDropdownName && !(e.target as Element)?.closest('.split-btn-container')) {
+			openDropdownName = null;
+		}
+	}}
+/>
+
+<div class="flex h-screen overflow-hidden">
+	<Sidebar bind:collapsed />
+
+	<div class="flex flex-1 flex-col overflow-hidden">
+		<main class="flex-1 overflow-y-auto bg-[var(--color-bg-0)]">
+			<!-- Header -->
+			<div class="px-7 pt-6">
+				<div class="flex items-start justify-between">
+					<div>
+						<h1 class="font-serif text-[24px] tracking-[-0.02em] text-[var(--color-text-bright)]">
+							Templates
+						</h1>
+						<p class="mt-1 text-[13px] text-[var(--color-text-tertiary)]">
+							Point-in-time captures and base environments for launching capsules.
+						</p>
+					</div>
+				</div>
+
+				<!-- Page-level tabs -->
+				<div class="mt-5 flex gap-0 border-b border-[var(--color-border)]">
+					<!-- Snapshots tab (active) -->
+					<button
+						onclick={() => (pageTab = 'snapshots')}
+						class="flex items-center gap-2 border-b-2 px-4 py-2.5 text-[13px] font-medium transition-colors duration-150 {pageTab === 'snapshots'
+							? 'border-[var(--color-accent)] text-[var(--color-accent-bright)]'
+							: 'border-transparent text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]'}"
+					>
+						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<line x1="8" y1="6" x2="21" y2="6" /><line x1="8" y1="12" x2="21" y2="12" /><line x1="8" y1="18" x2="21" y2="18" />
+							<line x1="3" y1="6" x2="3.01" y2="6" /><line x1="3" y1="12" x2="3.01" y2="12" /><line x1="3" y1="18" x2="3.01" y2="18" />
+						</svg>
+						List
+					</button>
+
+					<!-- Images tab (disabled, coming soon) -->
+					<button
+						disabled
+						title="Coming soon"
+						class="flex cursor-not-allowed items-center gap-2 border-b-2 border-transparent px-4 py-2.5 text-[13px] font-medium opacity-40"
+					>
+						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+							<circle cx="8.5" cy="8.5" r="1.5" />
+							<polyline points="21 15 16 10 5 21" />
+						</svg>
+						Images
+						<span class="rounded-[3px] bg-[var(--color-bg-4)] px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-[0.06em] text-[var(--color-text-muted)]">
+							Soon
+						</span>
+					</button>
+				</div>
+			</div>
+
+			<!-- Snapshots tab content -->
+			{#if pageTab === 'snapshots'}
+				<div class="p-7" style="animation: fadeUp 0.35s ease both">
+					{#if error}
+						<div class="mb-4 rounded-[var(--radius-card)] border border-[var(--color-red)]/30 bg-[var(--color-red)]/5 px-4 py-3 text-[13px] text-[var(--color-red)]">
+							{error}
+						</div>
+					{/if}
+
+					{#if loading}
+						<div class="flex items-center justify-center py-24">
+							<div class="flex items-center gap-3 text-[13px] text-[var(--color-text-secondary)]">
+								<svg class="animate-spin" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+									<path d="M21 12a9 9 0 1 1-6.219-8.56" />
+								</svg>
+								Loading snapshots...
+							</div>
+						</div>
+					{:else}
+						<!-- Filter row -->
+						<div class="mb-4 flex items-center justify-between">
+							<div class="flex gap-1.5">
+								{#each ([['all', 'All'], ['snapshot', 'Snapshots'], ['base', 'Images']] as const) as [val, label]}
+									<button
+										onclick={() => (typeFilter = val)}
+										class="rounded-full border px-3 py-1 text-[12px] font-medium transition-colors duration-150 {typeFilter === val
+											? 'border-[var(--color-border-mid)] bg-[var(--color-bg-5)] text-[var(--color-text-bright)]'
+											: 'border-[var(--color-border)] bg-[var(--color-bg-3)] text-[var(--color-text-secondary)] hover:border-[var(--color-border-mid)] hover:text-[var(--color-text-primary)]'}"
+									>
+										{label}
+									</button>
+								{/each}
+							</div>
+							<span class="text-[12px] text-[var(--color-text-muted)]">
+								{filteredSnapshots.length}
+								{filteredSnapshots.length === 1 ? 'snapshot' : 'snapshots'}
+							</span>
+						</div>
+
+						{#if filteredSnapshots.length === 0}
+							<!-- Empty state -->
+							<div class="flex flex-col items-center justify-center py-[72px]">
+								<div class="mb-5 flex h-14 w-14 items-center justify-center rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-3)]">
+									<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--color-text-secondary)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+										<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
+										<polyline points="3.27 6.96 12 12.01 20.73 6.96" /><line x1="12" y1="22.08" x2="12" y2="12" />
+									</svg>
+								</div>
+								<p class="font-serif text-[20px] tracking-[-0.02em] text-[var(--color-text-bright)]">
+									{emptyHeading(typeFilter)}
+								</p>
+								<p class="mt-1.5 max-w-[340px] text-center text-[13px] text-[var(--color-text-tertiary)]">
+									{emptyDescription(typeFilter)}
+								</p>
+								{#if typeFilter === 'all' || typeFilter === 'snapshot'}
+									<a
+										href="/dashboard/capsules"
+										class="mt-6 flex items-center gap-2 rounded-[var(--radius-button)] border border-[var(--color-border-mid)] bg-[var(--color-bg-3)] px-4 py-2 text-[13px] font-medium text-[var(--color-text-secondary)] transition-colors duration-150 hover:border-[var(--color-border-mid)] hover:bg-[var(--color-bg-4)] hover:text-[var(--color-text-primary)]"
+									>
+										Go to Capsules
+										<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+											<line x1="5" y1="12" x2="19" y2="12" />
+											<polyline points="12 5 19 12 12 19" />
+										</svg>
+									</a>
+								{/if}
+							</div>
+						{:else}
+							<!-- Table -->
+							<div class="overflow-hidden rounded-[var(--radius-card)] border border-[var(--color-border)]">
+								<!-- Header -->
+								<div class="grid border-b border-[var(--color-border)] bg-[var(--color-bg-3)]" style="grid-template-columns: 2fr 1fr 0.7fr 0.9fr 0.8fr 1.3fr 140px">
+									<div class="px-4 py-[11px] text-[11px] font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">Name</div>
+									<div class="px-4 py-[11px] text-[11px] font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">Type</div>
+									<div class="px-4 py-[11px] text-[11px] font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">vCPUs</div>
+									<div class="px-4 py-[11px] text-[11px] font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">Memory</div>
+									<div class="px-4 py-[11px] text-[11px] font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">Size</div>
+									<div class="px-4 py-[11px] text-[11px] font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">Created</div>
+									<div class="px-4 py-[11px] text-right text-[11px] font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">Actions</div>
+								</div>
+
+								<!-- Rows -->
+								{#each filteredSnapshots as snapshot, i (snapshot.name)}
+									<div
+										class="grid items-center border-b border-[var(--color-border)] transition-colors duration-150 hover:bg-[var(--color-bg-3)] last:border-b-0"
+										style="grid-template-columns: 2fr 1fr 0.7fr 0.9fr 0.8fr 1.3fr 140px; animation: fadeUp 0.35s ease both; animation-delay: {i * 40}ms"
+									>
+										<!-- Name -->
+										<div class="px-4 py-3">
+											<span class="font-mono text-[13px] text-[var(--color-text-bright)]">{snapshot.name}</span>
+										</div>
+
+										<!-- Type badge -->
+										<div class="px-4 py-3">
+											{#if snapshot.type === 'snapshot'}
+												<span class="inline-flex items-center gap-1.5 rounded-[3px] border border-[var(--color-accent)]/20 bg-[var(--color-accent-glow-mid)] px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.04em] text-[var(--color-accent-mid)]">
+													<span class="inline-block h-[5px] w-[5px] rounded-full bg-[var(--color-accent)]" style="box-shadow: 0 0 6px rgba(94,140,88,0.5)"></span>
+													Snapshot
+												</span>
+											{:else}
+												<span class="inline-flex items-center gap-1.5 rounded-[3px] border border-[var(--color-blue)]/20 bg-[var(--color-blue)]/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.04em] text-[var(--color-blue)]">
+													<span class="inline-block h-[5px] w-[5px] rounded-full bg-[var(--color-blue)]"></span>
+													Image
+												</span>
+											{/if}
+										</div>
+
+										<!-- vCPUs -->
+										<div class="px-4 py-3">
+											{#if snapshot.type === 'snapshot' && snapshot.vcpus != null}
+												<span class="font-mono text-[13px] text-[var(--color-text-secondary)]">{snapshot.vcpus}</span>
+											{:else}
+												<span class="text-[13px] text-[var(--color-text-muted)]">—</span>
+											{/if}
+										</div>
+
+										<!-- Memory -->
+										<div class="px-4 py-3">
+											{#if snapshot.type === 'snapshot' && snapshot.memory_mb != null}
+												<span class="font-mono text-[13px] text-[var(--color-text-secondary)]">{snapshot.memory_mb} MB</span>
+											{:else}
+												<span class="text-[13px] text-[var(--color-text-muted)]">—</span>
+											{/if}
+										</div>
+
+										<!-- Size -->
+										<div class="px-4 py-3">
+											<span class="font-mono text-[13px] text-[var(--color-text-muted)]">{formatBytes(snapshot.size_bytes)}</span>
+										</div>
+
+										<!-- Created -->
+										<div class="px-4 py-3" title={formatDate(snapshot.created_at)}>
+											<span class="text-[13px] text-[var(--color-text-secondary)]">{timeAgo(snapshot.created_at)}</span>
+										</div>
+
+										<!-- Actions: split button -->
+										<div class="flex items-center justify-end px-3 py-3">
+											<div class="split-btn-container relative flex items-stretch overflow-hidden rounded-[var(--radius-button)] border border-[var(--color-border-mid)] bg-[var(--color-bg-3)]">
+												<!-- Launch part -->
+												<button
+													onclick={() => openLaunch(snapshot)}
+													class="flex items-center px-3 py-1.5 text-[12px] font-medium text-[var(--color-text-primary)] transition-colors duration-150 hover:bg-[var(--color-bg-4)] hover:text-[var(--color-text-bright)]"
+												>
+													Launch
+												</button>
+												<!-- Divider -->
+												<div class="w-px shrink-0 bg-[var(--color-border-mid)]"></div>
+												<!-- Chevron / dropdown trigger -->
+												<button
+													onclick={(e) => {
+														e.stopPropagation();
+														if (openDropdownName === snapshot.name) {
+															openDropdownName = null;
+														} else {
+															const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+															dropdownPos = { top: rect.bottom + 4, left: rect.right - 128 };
+															openDropdownName = snapshot.name;
+														}
+													}}
+													class="flex items-center px-2 py-1.5 text-[var(--color-text-secondary)] transition-colors duration-150 hover:bg-[var(--color-bg-4)] hover:text-[var(--color-text-bright)]"
+												>
+													<svg
+														class="transition-transform duration-150 {openDropdownName === snapshot.name ? 'rotate-180' : ''}"
+														width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
+													>
+														<polyline points="6 9 12 15 18 9" />
+													</svg>
+												</button>
+											</div>
+										</div>
+									</div>
+								{/each}
+							</div>
+
+							<p class="mt-3 text-[12px] text-[var(--color-text-muted)]">
+								{filteredSnapshots.length} {filteredSnapshots.length === 1 ? 'snapshot' : 'snapshots'}
+								{typeFilter !== 'all' ? `· filtered` : '· total'}
+							</p>
+						{/if}
+					{/if}
+				</div>
+			{/if}
+		</main>
+
+		<!-- Status bar -->
+		<footer class="flex h-7 shrink-0 items-center justify-end border-t border-[var(--color-border)] bg-[var(--color-bg-1)] px-7">
+			<div class="flex items-center gap-1.5">
+				<span class="inline-flex h-[5px] w-[5px] rounded-full bg-[var(--color-accent)]"></span>
+				<span class="font-mono text-[11px] uppercase tracking-[0.04em] text-[var(--color-text-secondary)]">All systems operational</span>
+			</div>
+		</footer>
+	</div>
+</div>
+
+<!-- Split button dropdown -->
+{#if openDropdownName}
+	{@const dropdownSnapshot = snapshots.find((s) => s.name === openDropdownName)}
+	{#if dropdownSnapshot}
+		<div
+			class="fixed z-50 w-32 overflow-hidden rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)] py-1"
+			style="top: {dropdownPos.top}px; left: {dropdownPos.left}px; animation: fadeUp 0.15s ease both"
+		>
+			<button
+				onclick={(e) => {
+					e.stopPropagation();
+					const target = snapshots.find((s) => s.name === openDropdownName);
+					openDropdownName = null;
+					if (target) { deleteTarget = target; deleteError = null; }
+				}}
+				class="flex w-full items-center gap-2 px-3 py-2 text-[12px] text-[var(--color-red)] transition-colors duration-150 hover:bg-[var(--color-red)]/5"
+			>
+				<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0">
+					<polyline points="3 6 5 6 21 6" />
+					<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+				</svg>
+				Delete
+			</button>
+		</div>
+	{/if}
+{/if}
+
+<!-- Delete Confirmation Dialog -->
+{#if deleteTarget}
+	<div class="fixed inset-0 z-50 flex items-center justify-center">
+		<div
+			class="absolute inset-0 bg-black/60"
+			onclick={() => { if (!deleting) deleteTarget = null; }}
+			onkeydown={(e) => { if (e.key === 'Escape' && !deleting) deleteTarget = null; }}
+		></div>
+
+		<div
+			class="relative w-full max-w-[380px] rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)] p-6"
+			style="animation: fadeUp 0.2s ease both"
+		>
+			<h2 class="font-serif text-[20px] tracking-[-0.02em] text-[var(--color-text-bright)]">Delete Snapshot</h2>
+			<p class="mt-2 text-[13px] text-[var(--color-text-tertiary)]">
+				Delete <span class="font-mono font-medium text-[var(--color-text-secondary)]">{deleteTarget.name}</span>?
+				This action cannot be undone.
+			</p>
+
+			{#if deleteTarget.type === 'snapshot'}
+				<div class="mt-3 flex items-start gap-2 rounded-[var(--radius-input)] border border-[var(--color-amber)]/20 bg-[var(--color-amber)]/5 px-3 py-2.5">
+					<svg class="mt-0.5 shrink-0" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--color-amber)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+						<line x1="12" y1="9" x2="12" y2="13" /><line x1="12" y1="17" x2="12.01" y2="17" />
+					</svg>
+					<p class="text-[12px] leading-relaxed text-[var(--color-amber)]">
+						This live capture includes saved memory state. Any capsule relying on it will be unable to resume.
+					</p>
+				</div>
+			{/if}
+
+			{#if deleteError}
+				<div class="mt-4 rounded-[var(--radius-input)] border border-[var(--color-red)]/30 bg-[var(--color-red)]/5 px-3 py-2 text-[12px] text-[var(--color-red)]">
+					{deleteError}
+				</div>
+			{/if}
+
+			<div class="mt-6 flex justify-end gap-3">
+				<button
+					onclick={() => (deleteTarget = null)}
+					disabled={deleting}
+					class="rounded-[var(--radius-button)] border border-[var(--color-border)] px-4 py-2 text-[13px] text-[var(--color-text-secondary)] transition-colors duration-150 hover:border-[var(--color-border-mid)] hover:text-[var(--color-text-primary)] disabled:opacity-50"
+				>
+					Cancel
+				</button>
+				<button
+					onclick={handleDelete}
+					disabled={deleting}
+					class="flex items-center gap-2 rounded-[var(--radius-button)] bg-[var(--color-red)] px-5 py-2 text-[13px] font-semibold text-white transition-all duration-150 hover:brightness-115 hover:-translate-y-px active:translate-y-0 disabled:opacity-50 disabled:hover:translate-y-0"
+				>
+					{#if deleting}
+						<svg class="animate-spin" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							<path d="M21 12a9 9 0 1 1-6.219-8.56" />
+						</svg>
+						Deleting...
+					{:else}
+						Delete Snapshot
+					{/if}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<!-- Launch Dialog -->
+{#if launchTarget}
+	<div class="fixed inset-0 z-50 flex items-center justify-center">
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="absolute inset-0 bg-black/60"
+			onclick={() => { if (!launching) launchTarget = null; }}
+			onkeydown={(e) => { if (e.key === 'Escape' && !launching) launchTarget = null; }}
+		></div>
+
+		<div
+			class="relative w-full max-w-[420px] rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)] p-6"
+			style="animation: fadeUp 0.2s ease both"
+		>
+			<h2 class="font-serif text-[20px] tracking-[-0.02em] text-[var(--color-text-bright)]">Launch Capsule</h2>
+			<p class="mt-1 text-[13px] text-[var(--color-text-tertiary)]">
+				Start a new capsule from this template.
+			</p>
+
+			{#if launchError}
+				<div class="mt-4 rounded-[var(--radius-input)] border border-[var(--color-red)]/30 bg-[var(--color-red)]/5 px-3 py-2 text-[12px] text-[var(--color-red)]">
+					{launchError}
+				</div>
+			{/if}
+
+			<!-- Template name (readonly) -->
+			<div class="mt-5">
+				<label class="mb-1.5 block text-[11px] font-semibold uppercase tracking-[0.05em] text-[var(--color-text-tertiary)]">
+					Template
+				</label>
+				<div class="flex items-center gap-2 rounded-[var(--radius-input)] border border-[var(--color-border)] bg-[var(--color-bg-0)] px-3 py-2">
+					{#if launchTarget.type === 'snapshot'}
+						<span class="inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[var(--color-accent)]" style="box-shadow: 0 0 6px rgba(94,140,88,0.5)"></span>
+					{:else}
+						<span class="inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[var(--color-blue)]"></span>
+					{/if}
+					<span class="flex-1 font-mono text-[13px] text-[var(--color-text-bright)]">{launchTarget.name}</span>
+					<span class="text-[11px] text-[var(--color-text-muted)]">
+						{launchTarget.type === 'snapshot' ? 'Snapshot' : 'Image'}
+					</span>
+				</div>
+			</div>
+
+			<!-- vCPUs + Memory -->
+			<div class="mt-4 grid grid-cols-2 gap-3">
+				<div>
+					<label class="mb-1.5 block text-[11px] font-semibold uppercase tracking-[0.05em] text-[var(--color-text-tertiary)]" for="launch-vcpus">
+						vCPUs
+					</label>
+					{#if launchTarget.type === 'snapshot'}
+						<div class="rounded-[var(--radius-input)] border border-[var(--color-border)] bg-[var(--color-bg-0)] px-3 py-2 font-mono text-[13px] text-[var(--color-text-muted)]">
+							{launchTarget.vcpus ?? 1}
+						</div>
+					{:else}
+						<input
+							id="launch-vcpus"
+							type="number"
+							min="1"
+							max="32"
+							bind:value={launchVcpus}
+							class="w-full rounded-[var(--radius-input)] border border-[var(--color-border)] bg-[var(--color-bg-4)] px-3 py-2 font-mono text-[13px] text-[var(--color-text-bright)] outline-none transition-colors duration-150 focus:border-[var(--color-accent)]"
+						/>
+					{/if}
+				</div>
+
+				<div>
+					<label class="mb-1.5 block text-[11px] font-semibold uppercase tracking-[0.05em] text-[var(--color-text-tertiary)]" for="launch-memory">
+						Memory (MB)
+					</label>
+					{#if launchTarget.type === 'snapshot'}
+						<div class="rounded-[var(--radius-input)] border border-[var(--color-border)] bg-[var(--color-bg-0)] px-3 py-2 font-mono text-[13px] text-[var(--color-text-muted)]">
+							{launchTarget.memory_mb ?? 512}
+						</div>
+					{:else}
+						<input
+							id="launch-memory"
+							type="number"
+							min="128"
+							step="128"
+							bind:value={launchMemoryMb}
+							class="w-full rounded-[var(--radius-input)] border border-[var(--color-border)] bg-[var(--color-bg-4)] px-3 py-2 font-mono text-[13px] text-[var(--color-text-bright)] outline-none transition-colors duration-150 focus:border-[var(--color-accent)]"
+						/>
+					{/if}
+				</div>
+			</div>
+
+			<!-- Timeout -->
+			<div class="mt-4">
+				<label class="mb-1.5 block text-[11px] font-semibold uppercase tracking-[0.05em] text-[var(--color-text-tertiary)]" for="launch-timeout">Auto-pause timeout (seconds, 0 = never)</label>
+				<input
+					id="launch-timeout"
+					type="number"
+					min="0"
+					bind:value={launchTimeoutSec}
+					class="w-full rounded-[var(--radius-input)] border border-[var(--color-border)] bg-[var(--color-bg-4)] px-3 py-2 font-mono text-[13px] text-[var(--color-text-bright)] outline-none transition-colors duration-150 focus:border-[var(--color-accent)]"
+				/>
+			</div>
+
+			<div class="mt-6 flex justify-end gap-3">
+				<button
+					onclick={() => (launchTarget = null)}
+					disabled={launching}
+					class="rounded-[var(--radius-button)] border border-[var(--color-border)] px-4 py-2 text-[13px] text-[var(--color-text-secondary)] transition-colors duration-150 hover:border-[var(--color-border-mid)] hover:text-[var(--color-text-primary)] disabled:opacity-50"
+				>
+					Cancel
+				</button>
+				<button
+					onclick={handleLaunch}
+					disabled={launching}
+					class="flex items-center gap-2 rounded-[var(--radius-button)] bg-[var(--color-accent)] px-5 py-2 text-[13px] font-semibold text-white transition-all duration-150 hover:brightness-115 hover:-translate-y-px active:translate-y-0 disabled:opacity-50 disabled:hover:translate-y-0"
+				>
+					{#if launching}
+						<svg class="animate-spin" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							<path d="M21 12a9 9 0 1 1-6.219-8.56" />
+						</svg>
+						Launching...
+					{:else}
+						Launch
+					{/if}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@ -0,0 +1,287 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { auth } from '$lib/auth.svelte';
+	import { apiLogin, apiSignup } from '$lib/api/auth';
+	import {
+		IconGithub,
+		IconMail,
+		IconLock,
+		IconEye,
+		IconEyeOff
+	} from '$lib/components/icons';
+
+	let mode: 'signin' | 'signup' = $state('signin');
+	let email = $state('');
+	let password = $state('');
+	let showPassword = $state(false);
+	let error = $state('');
+	let loading = $state(false);
+
+	// Mouse-reactive glow — moves opposite to cursor with viscous drag
+	let glowX = $state(50);
+	let glowY = $state(50);
+	let targetX = 50;
+	let targetY = 50;
+	let rafId: number | null = null;
+
+	const LERP_FACTOR = 0.04; // lower = more drag
+
+	function lerpLoop() {
+		const dx = targetX - glowX;
+		const dy = targetY - glowY;
+
+		if (Math.abs(dx) > 0.01 || Math.abs(dy) > 0.01) {
+			glowX += dx * LERP_FACTOR;
+			glowY += dy * LERP_FACTOR;
+			rafId = requestAnimationFrame(lerpLoop);
+		} else {
+			glowX = targetX;
+			glowY = targetY;
+			rafId = null;
+		}
+	}
+
+	function handleMouseMove(e: MouseEvent) {
+		const target = e.currentTarget as HTMLElement;
+		const rect = target.getBoundingClientRect();
+		const normX = (e.clientX - rect.left) / rect.width;
+		const normY = (e.clientY - rect.top) / rect.height;
+
+		// Invert: mouse goes right → glow goes left
+		targetX = 55 - normX * 10;
+		targetY = 55 - normY * 10;
+
+		if (rafId === null) {
+			rafId = requestAnimationFrame(lerpLoop);
+		}
+	}
+
+	const title = $derived(mode === 'signin' ? 'Welcome back' : 'Create account');
+	const subtitle = $derived(
+		mode === 'signin' ? 'Sign in to your Wrenn account' : 'Get started with Wrenn'
+	);
+	const submitLabel = $derived(mode === 'signin' ? 'Sign in' : 'Create account');
+	const switchText = $derived(
+		mode === 'signin' ? "Don't have an account?" : 'Already have an account?'
+	);
+	const switchAction = $derived(mode === 'signin' ? 'Sign up' : 'Sign in');
+
+	function switchMode() {
+		mode = mode === 'signin' ? 'signup' : 'signin';
+		error = '';
+	}
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		error = '';
+		loading = true;
+
+		const result =
+			mode === 'signin'
+				? await apiLogin(email, password)
+				: await apiSignup(email, password);
+
+		loading = false;
+
+		if (!result.ok) {
+			error = result.error;
+			return;
+		}
+
+		auth.login(result.data);
+		goto('/dashboard');
+	}
+</script>
+
+<svelte:head>
+	<title>Wrenn — {mode === 'signin' ? 'Sign in' : 'Sign up'}</title>
+</svelte:head>
+
+<div class="flex min-h-screen">
+	<!-- Left panel — branding -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="relative hidden w-1/2 flex-col items-center justify-center overflow-hidden bg-[var(--color-bg-1)] lg:flex"
+		onmousemove={handleMouseMove}
+	>
+		<!-- Mouse-reactive radial glow -->
+		<div
+			class="pointer-events-none absolute inset-0"
+			style="background: radial-gradient(ellipse 55% 45% at {glowX}% {glowY}%, rgba(94, 140, 88, 0.09) 0%, transparent 70%)"
+			aria-hidden="true"
+		></div>
+
+		<!-- Centered logo + wordmark -->
+		<div
+			class="relative z-10 flex flex-col items-center"
+			style="animation: fadeUp 0.35s ease both"
+		>
+			<img src="/logo.svg" alt="Wrenn" class="h-20 w-20 rounded-[var(--radius-card)]" />
+			<span
+				class="mt-5 font-brand text-[44px] tracking-[-0.01em] text-[var(--color-text-bright)]"
+			>
+				Wrenn
+			</span>
+		</div>
+
+		<!-- Tagline below logo -->
+		<div
+			class="relative z-10 mt-10 text-center"
+			style="animation: fadeUp 0.35s ease 0.1s both"
+		>
+			<h1
+				class="font-serif text-[42px] leading-[1.15] tracking-[-0.03em] text-[var(--color-text-bright)]"
+			>
+				Scale Up. Spin Out.
+			</h1>
+		</div>
+
+		<!-- Sub-tagline -->
+		<p
+			class="relative z-10 mt-6 font-mono text-[13px] uppercase tracking-[0.06em] text-[var(--color-text-tertiary)]"
+			style="animation: fadeUp 0.35s ease 0.2s both"
+		>
+			Run Anything. Worry about Nothing.
+		</p>
+	</div>
+
+	<!-- Right panel — auth form -->
+	<div
+		class="flex w-full flex-col items-center justify-center bg-[var(--color-bg-0)] px-6 lg:w-1/2"
+	>
+		<!-- Mobile logo (shown only on small screens) -->
+		<div
+			class="mb-10 flex flex-col items-center lg:hidden"
+			style="animation: fadeUp 0.35s ease both"
+		>
+			<img src="/logo.svg" alt="Wrenn" class="h-12 w-12 rounded-[var(--radius-card)]" />
+			<span
+				class="mt-2 font-brand text-[24px] tracking-[-0.01em] text-[var(--color-text-bright)]"
+			>
+				Wrenn
+			</span>
+		</div>
+
+		<div class="w-full max-w-[400px]" style="animation: fadeUp 0.35s ease 0.1s both">
+			<!-- Header -->
+			<div class="mb-8">
+				<h2
+					class="font-serif text-[34px] tracking-[-0.02em] text-[var(--color-text-bright)]"
+				>
+					{title}
+				</h2>
+				<p class="mt-2 text-[14px] text-[var(--color-text-secondary)]">
+					{subtitle}
+				</p>
+			</div>
+
+			<!-- GitHub OAuth -->
+			<a
+				href="/api/auth/oauth/github"
+				class="flex w-full items-center justify-center gap-2.5 rounded-[var(--radius-button)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)] px-4 py-3 text-[14px] font-medium text-[var(--color-text-bright)] no-underline transition-all duration-150 hover:border-[var(--color-accent)] hover:text-[var(--color-text-bright)]"
+			>
+				<IconGithub size={16} />
+				Continue with GitHub
+			</a>
+
+			<!-- Divider -->
+			<div class="my-6 flex items-center gap-3">
+				<div class="h-px flex-1 bg-[var(--color-border)]"></div>
+				<span
+					class="font-mono text-[10px] uppercase tracking-[0.1em] text-[var(--color-text-muted)]"
+					>or</span
+				>
+				<div class="h-px flex-1 bg-[var(--color-border)]"></div>
+			</div>
+
+			<!-- Form -->
+			<form onsubmit={handleSubmit} class="space-y-3">
+				<div class="group relative">
+					<div
+						class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)] transition-colors duration-150 group-focus-within:text-[var(--color-accent)]"
+					>
+						<IconMail size={14} />
+					</div>
+					<input
+						type="email"
+						bind:value={email}
+						placeholder="Email address"
+						autocomplete="email"
+						class="w-full rounded-[var(--radius-input)] border border-[var(--color-border)] bg-[var(--color-bg-2)] py-3 pl-9 pr-3 text-[14px] text-[var(--color-text-bright)] outline-none transition-all duration-150 placeholder:text-[var(--color-text-muted)] focus:border-[var(--color-accent)]"
+					/>
+				</div>
+
+				<div class="group relative">
+					<div
+						class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)] transition-colors duration-150 group-focus-within:text-[var(--color-accent)]"
+					>
+						<IconLock size={14} />
+					</div>
+					<input
+						type={showPassword ? 'text' : 'password'}
+						bind:value={password}
+						placeholder="Password"
+						autocomplete={mode === 'signin' ? 'current-password' : 'new-password'}
+						class="w-full rounded-[var(--radius-input)] border border-[var(--color-border)] bg-[var(--color-bg-2)] py-3 pl-9 pr-10 text-[14px] text-[var(--color-text-bright)] outline-none transition-all duration-150 placeholder:text-[var(--color-text-muted)] focus:border-[var(--color-accent)]"
+					/>
+					<button
+						type="button"
+						onclick={() => (showPassword = !showPassword)}
+						class="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)] transition-colors duration-150 hover:text-[var(--color-text-secondary)]"
+						tabindex={-1}
+					>
+						{#if showPassword}
+							<IconEyeOff size={14} />
+						{:else}
+							<IconEye size={14} />
+						{/if}
+					</button>
+				</div>
+
+				{#if mode === 'signin'}
+					<div class="flex justify-end">
+						<button
+							type="button"
+							class="text-[13px] text-[var(--color-text-secondary)] transition-colors duration-150 hover:text-[var(--color-accent-mid)]"
+						>
+							Forgot password?
+						</button>
+					</div>
+				{/if}
+
+				{#if error}
+					<p class="text-[13px] text-[var(--color-red)]">{error}</p>
+				{/if}
+
+				<button
+					type="submit"
+					disabled={loading}
+					class="!mt-5 w-full rounded-[var(--radius-button)] bg-[var(--color-accent)] px-4 py-3 text-[14px] font-semibold text-white transition-all duration-150 hover:brightness-115 hover:-translate-y-px active:translate-y-0 disabled:pointer-events-none disabled:opacity-50"
+				>
+					{#if loading}
+						<span class="inline-flex items-center gap-2">
+							<span
+								class="inline-block h-3.5 w-3.5 animate-spin rounded-full border-2 border-white/30 border-t-white"
+							></span>
+							{submitLabel}
+						</span>
+					{:else}
+						{submitLabel}
+					{/if}
+				</button>
+			</form>
+
+			<!-- Switch mode -->
+			<p class="mt-6 text-center text-[13px] text-[var(--color-text-secondary)]">
+				{switchText}
+				<button
+					type="button"
+					onclick={switchMode}
+					class="font-medium text-[var(--color-text-primary)] transition-colors duration-150 hover:text-[var(--color-text-bright)]"
+				>
+					{switchAction}
+				</button>
+			</p>
+		</div>
+	</div>
+</div>
				`@ -0,0 +1 @@`
				// place files you want to import through the `$lib` alias in this folder.