Added basic frontend (#1)

Reviewed-on: wrenn/sandbox#1
Co-authored-by: pptx704 <rafeed@omukk.dev>
Co-committed-by: pptx704 <rafeed@omukk.dev>

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' };
+	}
+}

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}`);
+}

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' };
+	}
+}

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}`);
+}

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();

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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';

frontend/src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

frontend/src/lib/sidebar.ts

@@ -0,0 +1,5 @@
+export function getInitialCollapsed(): boolean {
+	return typeof window !== 'undefined'
+		? localStorage.getItem('wrenn_sidebar_collapsed') === 'true'
+		: false;
+}

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);
+	}
+};