feat(TRUEREF-0015): implement web UI repository dashboard

- Repository list with state badges, stats, and action buttons
- Add repository modal for GitHub URLs and local paths
- Live indexing progress bar polling every 2s
- Confirm dialog for destructive actions
- Repository detail page with versions and recent jobs
- Settings page placeholder

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/lib/components/AddRepositoryModal.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+	let {
+		onClose,
+		onAdded
+	}: {
+		onClose: () => void;
+		onAdded: () => void;
+	} = $props();
+
+	let source = $state<'github' | 'local'>('github');
+	let sourceUrl = $state('');
+	let title = $state('');
+	let githubToken = $state('');
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	function handleBackdropClick(e: MouseEvent) {
+		if (e.target === e.currentTarget) {
+			onClose();
+		}
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			onClose();
+		}
+	}
+
+	async function handleSubmit() {
+		loading = true;
+		error = null;
+		try {
+			const res = await fetch('/api/v1/libs', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({
+					source,
+					sourceUrl,
+					title: title || sourceUrl,
+					githubToken: githubToken || undefined
+				})
+			});
+			if (!res.ok) {
+				const data = await res.json();
+				throw new Error(data.error ?? 'Failed to add repository');
+			}
+			onAdded();
+			onClose();
+		} catch (e) {
+			error = (e as Error).message;
+		} finally {
+			loading = false;
+		}
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<div
+	role="presentation"
+	class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+	onclick={handleBackdropClick}
+>
+	<div class="w-full max-w-md rounded-xl bg-white p-6 shadow-xl">
+		<div class="mb-5 flex items-center justify-between">
+			<h2 class="text-lg font-semibold text-gray-900">Add Repository</h2>
+			<button
+				onclick={onClose}
+				class="rounded-lg p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
+				aria-label="Close"
+			>
+				<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+					<path
+						d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+					/>
+				</svg>
+			</button>
+		</div>
+
+		<div class="mb-5 flex gap-2">
+			<button
+				class="flex-1 rounded-lg py-2 text-sm transition-colors {source === 'github'
+					? 'bg-blue-600 text-white'
+					: 'border border-gray-200 text-gray-700 hover:bg-gray-50'}"
+				onclick={() => (source = 'github')}
+			>
+				GitHub
+			</button>
+			<button
+				class="flex-1 rounded-lg py-2 text-sm transition-colors {source === 'local'
+					? 'bg-blue-600 text-white'
+					: 'border border-gray-200 text-gray-700 hover:bg-gray-50'}"
+				onclick={() => (source = 'local')}
+			>
+				Local Path
+			</button>
+		</div>
+
+		<div class="space-y-4">
+			<label class="block">
+				<span class="text-sm font-medium text-gray-700">
+					{source === 'github' ? 'GitHub URL' : 'Absolute Path'}
+				</span>
+				<input
+					type="text"
+					bind:value={sourceUrl}
+					placeholder={source === 'github'
+						? 'https://github.com/facebook/react'
+						: '/home/user/projects/my-sdk'}
+					class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+				/>
+			</label>
+
+			<label class="block">
+				<span class="text-sm font-medium text-gray-700">Display Title (optional)</span>
+				<input
+					type="text"
+					bind:value={title}
+					placeholder="My Library"
+					class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+				/>
+			</label>
+
+			{#if source === 'github'}
+				<label class="block">
+					<span class="text-sm font-medium text-gray-700"
+						>GitHub Token <span class="font-normal text-gray-500">(optional, for private repos)</span
+						></span
+					>
+					<input
+						type="password"
+						bind:value={githubToken}
+						placeholder="ghp_..."
+						class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+					/>
+				</label>
+			{/if}
+		</div>
+
+		{#if error}
+			<div class="mt-4 rounded-lg bg-red-50 px-3 py-2">
+				<p class="text-sm text-red-700">{error}</p>
+			</div>
+		{/if}
+
+		<div class="mt-6 flex justify-end gap-3">
+			<button
+				onclick={onClose}
+				class="rounded-lg border border-gray-200 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
+			>
+				Cancel
+			</button>
+			<button
+				onclick={handleSubmit}
+				disabled={loading || !sourceUrl.trim()}
+				class="rounded-lg bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				{loading ? 'Adding...' : 'Add & Index'}
+			</button>
+		</div>
+	</div>
+</div>

src/lib/components/ConfirmDialog.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	let {
+		title,
+		message,
+		confirmLabel = 'Confirm',
+		cancelLabel = 'Cancel',
+		danger = false,
+		onConfirm,
+		onCancel
+	}: {
+		title: string;
+		message: string;
+		confirmLabel?: string;
+		cancelLabel?: string;
+		danger?: boolean;
+		onConfirm: () => void;
+		onCancel: () => void;
+	} = $props();
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			onCancel();
+		}
+	}
+
+	function handleBackdropClick(e: MouseEvent) {
+		if (e.target === e.currentTarget) {
+			onCancel();
+		}
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<div
+	role="presentation"
+	class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+	onclick={handleBackdropClick}
+>
+	<div class="w-full max-w-sm rounded-xl bg-white p-6 shadow-xl">
+		<h2 class="text-base font-semibold text-gray-900">{title}</h2>
+		<p class="mt-2 text-sm text-gray-600">{message}</p>
+
+		<div class="mt-5 flex justify-end gap-3">
+			<button
+				onclick={onCancel}
+				class="rounded-lg border border-gray-200 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
+			>
+				{cancelLabel}
+			</button>
+			<button
+				onclick={onConfirm}
+				class="rounded-lg px-4 py-2 text-sm text-white {danger
+					? 'bg-red-600 hover:bg-red-700'
+					: 'bg-blue-600 hover:bg-blue-700'}"
+			>
+				{confirmLabel}
+			</button>
+		</div>
+	</div>
+</div>

src/lib/components/IndexingProgress.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import type { IndexingJob } from '$lib/types';
+
+	let { jobId }: { jobId: string } = $props();
+
+	let job = $state<IndexingJob | null>(null);
+	let interval: ReturnType<typeof setInterval> | undefined;
+
+	async function pollJob() {
+		try {
+			const res = await fetch(`/api/v1/jobs/${jobId}`);
+			if (res.ok) {
+				const data = await res.json();
+				job = data.job;
+				if (job?.status === 'done' || job?.status === 'failed') {
+					if (interval !== undefined) {
+						clearInterval(interval);
+						interval = undefined;
+					}
+				}
+			}
+		} catch {
+			// ignore polling errors
+		}
+	}
+
+	onMount(() => {
+		pollJob();
+		interval = setInterval(pollJob, 2000);
+	});
+
+	onDestroy(() => {
+		if (interval !== undefined) {
+			clearInterval(interval);
+		}
+	});
+
+	const progress = $derived(job?.progress ?? 0);
+	const processedFiles = $derived(job?.processedFiles ?? 0);
+	const totalFiles = $derived(job?.totalFiles ?? 0);
+</script>
+
+{#if job}
+	<div class="mt-2">
+		<div class="flex justify-between text-xs text-gray-500">
+			<span>{processedFiles} / {totalFiles} files</span>
+			<span>{progress}%</span>
+		</div>
+		<div class="mt-1 h-1.5 w-full rounded-full bg-gray-200">
+			<div
+				class="h-1.5 rounded-full bg-blue-600 transition-all duration-300"
+				style="width: {progress}%"
+			></div>
+		</div>
+		{#if job.status === 'done'}
+			<p class="mt-1 text-xs text-green-600">Indexing complete.</p>
+		{:else if job.status === 'failed'}
+			<p class="mt-1 text-xs text-red-600">{job.error ?? 'Indexing failed.'}</p>
+		{/if}
+	</div>
+{/if}

src/lib/components/RepositoryCard.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import type { Repository } from '$lib/types';
+
+	let {
+		repo,
+		onReindex,
+		onDelete
+	}: {
+		repo: Repository;
+		onReindex: (id: string) => void;
+		onDelete: (id: string) => void;
+	} = $props();
+
+	const stateColors: Record<string, string> = {
+		pending: 'bg-gray-100 text-gray-600',
+		indexing: 'bg-blue-100 text-blue-700',
+		indexed: 'bg-green-100 text-green-700',
+		error: 'bg-red-100 text-red-700'
+	};
+
+	const stateLabels: Record<string, string> = {
+		pending: 'Pending',
+		indexing: 'Indexing...',
+		indexed: 'Indexed',
+		error: 'Error'
+	};
+
+	const totalSnippets = $derived(repo.totalSnippets ?? 0);
+	const trustScore = $derived(repo.trustScore ?? 0);
+</script>
+
+<div class="rounded-xl border border-gray-200 bg-white p-5 shadow-sm">
+	<div class="flex items-start justify-between">
+		<div class="min-w-0 flex-1">
+			<h3 class="truncate font-semibold text-gray-900">{repo.title}</h3>
+			<p class="mt-0.5 truncate font-mono text-sm text-gray-500">{repo.id}</p>
+		</div>
+		<span
+			class="ml-3 shrink-0 rounded-full px-2.5 py-0.5 text-xs font-medium {stateColors[repo.state] ??
+				'bg-gray-100 text-gray-600'}"
+		>
+			{stateLabels[repo.state] ?? repo.state}
+		</span>
+	</div>
+
+	{#if repo.description}
+		<p class="mt-2 line-clamp-2 text-sm text-gray-600">{repo.description}</p>
+	{/if}
+
+	<div class="mt-4 flex flex-wrap gap-x-4 gap-y-1 text-sm text-gray-500">
+		<span>{totalSnippets.toLocaleString()} snippets</span>
+		<span>·</span>
+		<span>Trust: {trustScore.toFixed(1)}/10</span>
+		{#if repo.stars}
+			<span>·</span>
+			<span>★ {repo.stars.toLocaleString()}</span>
+		{/if}
+		{#if repo.lastIndexedAt}
+			<span>·</span>
+			<span>Last indexed {new Date(repo.lastIndexedAt).toLocaleDateString()}</span>
+		{/if}
+	</div>
+
+	{#if repo.state === 'error'}
+		<p class="mt-2 text-xs text-red-600">Indexing failed. Check jobs for details.</p>
+	{/if}
+
+	<div class="mt-4 flex flex-wrap gap-2">
+		<button
+			onclick={() => onReindex(repo.id)}
+			class="rounded-lg bg-blue-600 px-3 py-1.5 text-sm text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
+			disabled={repo.state === 'indexing'}
+		>
+			{repo.state === 'indexing' ? 'Indexing...' : 'Re-index'}
+		</button>
+		<a
+			href="/repos/{encodeURIComponent(repo.id)}"
+			class="rounded-lg border border-gray-200 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50"
+		>
+			Details
+		</a>
+		<button
+			onclick={() => onDelete(repo.id)}
+			class="ml-auto rounded-lg px-3 py-1.5 text-sm text-red-600 hover:bg-red-50"
+		>
+			Delete
+		</button>
+	</div>
+</div>

src/lib/components/StatBadge.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	let {
+		label,
+		value,
+		variant = 'default'
+	}: {
+		label: string;
+		value: string | number;
+		variant?: 'default' | 'success' | 'warning' | 'danger';
+	} = $props();
+
+	const variantClasses: Record<string, string> = {
+		default: 'bg-gray-100 text-gray-700',
+		success: 'bg-green-100 text-green-700',
+		warning: 'bg-yellow-100 text-yellow-700',
+		danger: 'bg-red-100 text-red-700'
+	};
+</script>
+
+<div class="flex flex-col items-center rounded-lg p-3 {variantClasses[variant] ?? variantClasses.default}">
+	<span class="text-lg font-bold">{value}</span>
+	<span class="mt-0.5 text-xs">{label}</span>
+</div>

src/routes/+layout.svelte

@@ -5,5 +5,42 @@
 	let { children } = $props();
 </script>
 
-<svelte:head><link rel="icon" href={favicon} /></svelte:head>
+<svelte:head>
-{@render children()}
+	<link rel="icon" href={favicon} />
+	<title>TrueRef</title>
+</svelte:head>
+
+<div class="min-h-screen bg-gray-50">
+	<nav class="border-b border-gray-200 bg-white">
+		<div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
+			<div class="flex h-14 items-center justify-between">
+				<div class="flex items-center gap-6">
+					<a href="/" class="flex items-center gap-2 font-semibold text-gray-900">
+						<svg
+							class="h-6 w-6 text-blue-600"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
+							/>
+						</svg>
+						<span>TrueRef</span>
+					</a>
+					<a href="/" class="text-sm text-gray-600 hover:text-gray-900"> Repositories </a>
+					<a href="/search" class="text-sm text-gray-600 hover:text-gray-900"> Search </a>
+					<a href="/settings" class="text-sm text-gray-600 hover:text-gray-900"> Settings </a>
+				</div>
+				<span class="text-xs text-gray-400">Self-hosted documentation intelligence</span>
+			</div>
+		</div>
+	</nav>
+
+	<main class="mx-auto max-w-6xl px-4 py-8 sm:px-6 lg:px-8">
+		{@render children()}
+	</main>
+</div>

src/routes/+page.server.ts

@@ -0,0 +1,7 @@
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ fetch }) => {
+	const res = await fetch('/api/v1/libs');
+	const data = await res.json();
+	return { repositories: data.libraries ?? [] };
+};

src/routes/+page.svelte

@@ -1,2 +1,179 @@
-<h1>Welcome to SvelteKit</h1>
+<script lang="ts">
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+	import type { PageData } from './$types';
+	import type { Repository } from '$lib/types';
+	import RepositoryCard from '$lib/components/RepositoryCard.svelte';
+	import AddRepositoryModal from '$lib/components/AddRepositoryModal.svelte';
+	import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
+	import IndexingProgress from '$lib/components/IndexingProgress.svelte';
+
+	let { data }: { data: PageData } = $props();
+
+	// Local mutable copy; refreshRepositories() keeps it up to date after mutations.
+	// Intentionally captures initial value from server load — mutations happen via fetch.
+	let repositories = $state<Repository[]>(data.repositories ?? []); // svelte-disable state_referenced_locally
+	let showAddModal = $state(false);
+	let confirmDeleteId = $state<string | null>(null);
+	let activeJobIds = $state<Record<string, string>>({});
+	let errorMessage = $state<string | null>(null);
+
+	const confirmDeleteRepo = $derived(
+		confirmDeleteId ? repositories.find((r) => r.id === confirmDeleteId) : null
+	);
+
+	async function refreshRepositories() {
+		try {
+			const res = await fetch('/api/v1/libs');
+			const fetched = await res.json();
+			repositories = fetched.libraries ?? [];
+		} catch {
+			// keep existing list on network error
+		}
+	}
+
+	async function handleReindex(id: string) {
+		errorMessage = null;
+		try {
+			const res = await fetch(`/api/v1/libs/${encodeURIComponent(id)}/index`, {
+				method: 'POST'
+			});
+			if (!res.ok) {
+				const fetched = await res.json();
+				throw new Error(fetched.error ?? 'Failed to trigger re-indexing');
+			}
+			const fetched = await res.json();
+			if (fetched.job?.id) {
+				activeJobIds = { ...activeJobIds, [id]: fetched.job.id };
+			}
+			await refreshRepositories();
+		} catch (e) {
+			errorMessage = (e as Error).message;
+		}
+	}
+
+	function handleDeleteRequest(id: string) {
+		confirmDeleteId = id;
+	}
+
+	async function handleDeleteConfirm() {
+		if (!confirmDeleteId) return;
+		const id = confirmDeleteId;
+		confirmDeleteId = null;
+		errorMessage = null;
+		try {
+			const res = await fetch(`/api/v1/libs/${encodeURIComponent(id)}`, {
+				method: 'DELETE'
+			});
+			if (!res.ok && res.status !== 204) {
+				const fetched = await res.json();
+				throw new Error(fetched.error ?? 'Failed to delete repository');
+			}
+			repositories = repositories.filter((r) => r.id !== id);
+			const updated = { ...activeJobIds };
+			delete updated[id];
+			activeJobIds = updated;
+		} catch (e) {
+			errorMessage = (e as Error).message;
+		}
+	}
+
+	function handleDeleteCancel() {
+		confirmDeleteId = null;
+	}
+
+	async function handleRepoAdded() {
+		await refreshRepositories();
+	}
+</script>
+
+<svelte:head>
+	<title>Repositories — TrueRef</title>
+</svelte:head>
+
+<div class="flex items-center justify-between">
+	<div>
+		<h1 class="text-xl font-semibold text-gray-900">Repositories</h1>
+		<p class="mt-0.5 text-sm text-gray-500">
+			{repositories.length}
+			{repositories.length === 1 ? 'repository' : 'repositories'} indexed
+		</p>
+	</div>
+	<button
+		onclick={() => (showAddModal = true)}
+		class="flex items-center gap-1.5 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+	>
+		<svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+			<path
+				d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
+			/>
+		</svg>
+		Add Repository
+	</button>
+</div>
+
+{#if errorMessage}
+	<div class="mt-4 rounded-lg bg-red-50 px-4 py-3">
+		<p class="text-sm text-red-700">{errorMessage}</p>
+	</div>
+{/if}
+
+{#if repositories.length === 0}
+	<div class="mt-16 flex flex-col items-center text-center">
+		<svg
+			class="h-16 w-16 text-gray-300"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="1.5"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
+			/>
+		</svg>
+		<h2 class="mt-4 text-lg font-medium text-gray-700">No repositories yet</h2>
+		<p class="mt-2 max-w-sm text-sm text-gray-500">
+			Add your first GitHub or local repository to start indexing documentation for AI-powered
+			retrieval.
+		</p>
+		<button
+			onclick={() => (showAddModal = true)}
+			class="mt-6 flex items-center gap-1.5 rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-blue-700"
+		>
+			<svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+				<path
+					d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
+				/>
+			</svg>
+			Add Repository
+		</button>
+	</div>
+{:else}
+	<div class="mt-6 grid gap-4 sm:grid-cols-1 lg:grid-cols-2">
+		{#each repositories as repo (repo.id)}
+			<div>
+				<RepositoryCard {repo} onReindex={handleReindex} onDelete={handleDeleteRequest} />
+				{#if activeJobIds[repo.id]}
+					<div class="px-5">
+						<IndexingProgress jobId={activeJobIds[repo.id]} />
+					</div>
+				{/if}
+			</div>
+		{/each}
+	</div>
+{/if}
+
+{#if showAddModal}
+	<AddRepositoryModal onClose={() => (showAddModal = false)} onAdded={handleRepoAdded} />
+{/if}
+
+{#if confirmDeleteId && confirmDeleteRepo}
+	<ConfirmDialog
+		title="Delete Repository"
+		message="Are you sure you want to delete {confirmDeleteRepo.title}? This will remove all indexed data and cannot be undone."
+		confirmLabel="Delete"
+		danger={true}
+		onConfirm={handleDeleteConfirm}
+		onCancel={handleDeleteCancel}
+	/>
+{/if}

src/routes/repos/[id]/+page.server.ts

@@ -0,0 +1,26 @@
+import type { PageServerLoad } from './$types';
+import { error } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async ({ fetch, params }) => {
+	const id = params.id;
+	const res = await fetch(`/api/v1/libs/${encodeURIComponent(id)}`);
+
+	if (res.status === 404) {
+		error(404, 'Repository not found');
+	}
+
+	if (!res.ok) {
+		error(res.status, 'Failed to load repository');
+	}
+
+	const repo = await res.json();
+
+	// Fetch recent jobs
+	const jobsRes = await fetch(`/api/v1/jobs?repositoryId=${encodeURIComponent(id)}&limit=5`);
+	const jobsData = jobsRes.ok ? await jobsRes.json() : { jobs: [] };
+
+	return {
+		repo,
+		recentJobs: jobsData.jobs ?? []
+	};
+};

src/routes/repos/[id]/+page.svelte

@@ -0,0 +1,281 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import type { Repository, RepositoryVersion, IndexingJob } from '$lib/types';
+	import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
+	import IndexingProgress from '$lib/components/IndexingProgress.svelte';
+	import StatBadge from '$lib/components/StatBadge.svelte';
+
+	let { data }: { data: PageData } = $props();
+
+	// Local mutable copies updated via fetch — intentionally capturing initial server values.
+	let repo = $state<Repository & { versions?: RepositoryVersion[] }>(data.repo); // svelte-disable state_referenced_locally
+	let recentJobs = $state<IndexingJob[]>(data.recentJobs ?? []); // svelte-disable state_referenced_locally
+	let showDeleteConfirm = $state(false);
+	let activeJobId = $state<string | null>(null);
+	let errorMessage = $state<string | null>(null);
+	let successMessage = $state<string | null>(null);
+
+	const stateColors: Record<string, string> = {
+		pending: 'bg-gray-100 text-gray-600',
+		indexing: 'bg-blue-100 text-blue-700',
+		indexed: 'bg-green-100 text-green-700',
+		error: 'bg-red-100 text-red-700'
+	};
+
+	const stateLabels: Record<string, string> = {
+		pending: 'Pending',
+		indexing: 'Indexing...',
+		indexed: 'Indexed',
+		error: 'Error'
+	};
+
+	async function refreshRepo() {
+		try {
+			const res = await fetch(`/api/v1/libs/${encodeURIComponent(repo.id)}`);
+			if (res.ok) {
+				repo = await res.json();
+			}
+		} catch {
+			// ignore
+		}
+	}
+
+	async function handleReindex() {
+		errorMessage = null;
+		successMessage = null;
+		try {
+			const res = await fetch(`/api/v1/libs/${encodeURIComponent(repo.id)}/index`, {
+				method: 'POST'
+			});
+			if (!res.ok) {
+				const d = await res.json();
+				throw new Error(d.error ?? 'Failed to trigger re-indexing');
+			}
+			const d = await res.json();
+			if (d.job?.id) {
+				activeJobId = d.job.id;
+			}
+			successMessage = 'Re-indexing started.';
+			await refreshRepo();
+		} catch (e) {
+			errorMessage = (e as Error).message;
+		}
+	}
+
+	async function handleDelete() {
+		showDeleteConfirm = false;
+		errorMessage = null;
+		try {
+			const res = await fetch(`/api/v1/libs/${encodeURIComponent(repo.id)}`, {
+				method: 'DELETE'
+			});
+			if (!res.ok && res.status !== 204) {
+				const d = await res.json();
+				throw new Error(d.error ?? 'Failed to delete repository');
+			}
+			window.location.href = '/';
+		} catch (e) {
+			errorMessage = (e as Error).message;
+		}
+	}
+
+	function formatDate(ts: Date | number | string | null | undefined): string {
+		if (!ts) return 'Never';
+		return new Date(ts as string).toLocaleString();
+	}
+
+	const versions = $derived(repo.versions ?? []);
+	const totalSnippets = $derived(repo.totalSnippets ?? 0);
+	const totalTokens = $derived(repo.totalTokens ?? 0);
+	const trustScore = $derived(repo.trustScore ?? 0);
+</script>
+
+<svelte:head>
+	<title>{repo.title} — TrueRef</title>
+</svelte:head>
+
+<div class="mb-6">
+	<a href="/" class="text-sm text-blue-600 hover:underline">← Repositories</a>
+</div>
+
+<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+	<div class="min-w-0 flex-1">
+		<div class="flex flex-wrap items-center gap-3">
+			<h1 class="text-xl font-semibold text-gray-900">{repo.title}</h1>
+			<span
+				class="rounded-full px-2.5 py-0.5 text-xs font-medium {stateColors[repo.state] ??
+					'bg-gray-100 text-gray-600'}"
+			>
+				{stateLabels[repo.state] ?? repo.state}
+			</span>
+		</div>
+		<p class="mt-1 font-mono text-sm text-gray-500">{repo.id}</p>
+		{#if repo.description}
+			<p class="mt-2 text-sm text-gray-600">{repo.description}</p>
+		{/if}
+		{#if repo.sourceUrl}
+			{#if repo.source === 'github'}
+				<a
+					href={repo.sourceUrl}
+					target="_blank"
+					rel="noopener noreferrer"
+					class="mt-1 block text-sm text-blue-600 hover:underline"
+				>
+					{repo.sourceUrl}
+				</a>
+			{:else}
+				<p class="mt-1 font-mono text-sm text-gray-500">{repo.sourceUrl}</p>
+			{/if}
+		{/if}
+	</div>
+
+	<div class="flex shrink-0 gap-2">
+		<button
+			onclick={handleReindex}
+			disabled={repo.state === 'indexing'}
+			class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
+		>
+			{repo.state === 'indexing' ? 'Indexing...' : 'Re-index'}
+		</button>
+		<button
+			onclick={() => (showDeleteConfirm = true)}
+			class="rounded-lg border border-red-200 px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50"
+		>
+			Delete
+		</button>
+	</div>
+</div>
+
+{#if errorMessage}
+	<div class="mt-4 rounded-lg bg-red-50 px-4 py-3">
+		<p class="text-sm text-red-700">{errorMessage}</p>
+	</div>
+{/if}
+
+{#if successMessage}
+	<div class="mt-4 rounded-lg bg-green-50 px-4 py-3">
+		<p class="text-sm text-green-700">{successMessage}</p>
+	</div>
+{/if}
+
+{#if activeJobId}
+	<div class="mt-4 rounded-xl border border-blue-100 bg-blue-50 p-4">
+		<p class="mb-2 text-sm font-medium text-blue-700">Indexing in progress</p>
+		<IndexingProgress jobId={activeJobId} />
+	</div>
+{:else if repo.state === 'error'}
+	<div class="mt-4 rounded-xl border border-red-100 bg-red-50 p-4">
+		<p class="text-sm text-red-700">Last indexing run failed. Trigger re-index to retry.</p>
+	</div>
+{/if}
+
+<!-- Stats -->
+<div class="mt-6 grid grid-cols-2 gap-3 sm:grid-cols-4">
+	<StatBadge label="Snippets" value={totalSnippets.toLocaleString()} />
+	<StatBadge label="Tokens" value={totalTokens.toLocaleString()} />
+	<StatBadge label="Trust Score" value="{trustScore.toFixed(1)}/10" />
+	{#if repo.stars != null}
+		<StatBadge label="Stars" value={repo.stars.toLocaleString()} />
+	{/if}
+</div>
+
+<!-- Metadata -->
+<div class="mt-6 rounded-xl border border-gray-200 bg-white p-5">
+	<h2 class="mb-3 text-sm font-semibold text-gray-700">Repository Info</h2>
+	<dl class="grid grid-cols-1 gap-y-2 text-sm sm:grid-cols-2">
+		<div class="flex gap-2">
+			<dt class="text-gray-500">Source</dt>
+			<dd class="font-medium capitalize text-gray-900">{repo.source}</dd>
+		</div>
+		<div class="flex gap-2">
+			<dt class="text-gray-500">Branch</dt>
+			<dd class="font-medium text-gray-900">{repo.branch ?? 'main'}</dd>
+		</div>
+		<div class="flex gap-2">
+			<dt class="text-gray-500">Last Indexed</dt>
+			<dd class="font-medium text-gray-900">{formatDate(repo.lastIndexedAt)}</dd>
+		</div>
+		<div class="flex gap-2">
+			<dt class="text-gray-500">Created</dt>
+			<dd class="font-medium text-gray-900">{formatDate(repo.createdAt)}</dd>
+		</div>
+	</dl>
+</div>
+
+<!-- Versions -->
+{#if versions.length > 0}
+	<div class="mt-6 rounded-xl border border-gray-200 bg-white p-5">
+		<h2 class="mb-3 text-sm font-semibold text-gray-700">Indexed Versions</h2>
+		<div class="divide-y divide-gray-100">
+			{#each versions as version (version.id)}
+				<div class="flex items-center justify-between py-2.5">
+					<div>
+						<span class="font-mono text-sm font-medium text-gray-900">{version.tag}</span>
+						{#if version.title}
+							<span class="ml-2 text-sm text-gray-500">{version.title}</span>
+						{/if}
+					</div>
+					<div class="flex items-center gap-3">
+						<span
+							class="rounded-full px-2 py-0.5 text-xs {stateColors[version.state] ??
+								'bg-gray-100 text-gray-600'}"
+						>
+							{stateLabels[version.state] ?? version.state}
+						</span>
+						{#if version.indexedAt}
+							<span class="text-xs text-gray-400">{formatDate(version.indexedAt)}</span>
+						{/if}
+					</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+{/if}
+
+<!-- Recent Jobs -->
+{#if recentJobs.length > 0}
+	<div class="mt-6 rounded-xl border border-gray-200 bg-white p-5">
+		<h2 class="mb-3 text-sm font-semibold text-gray-700">Recent Jobs</h2>
+		<div class="divide-y divide-gray-100">
+			{#each recentJobs as job (job.id)}
+				<div class="flex items-center justify-between py-2.5">
+					<div>
+						<span class="font-mono text-xs text-gray-500">{job.id.slice(0, 8)}...</span>
+						{#if job.error}
+							<p class="mt-0.5 text-xs text-red-600">{job.error}</p>
+						{/if}
+					</div>
+					<div class="flex items-center gap-3">
+						<span
+							class="rounded-full px-2 py-0.5 text-xs {job.status === 'done'
+								? 'bg-green-100 text-green-700'
+								: job.status === 'failed'
+									? 'bg-red-100 text-red-700'
+									: job.status === 'running'
+										? 'bg-blue-100 text-blue-700'
+										: 'bg-gray-100 text-gray-600'}"
+						>
+							{job.status}
+						</span>
+						{#if job.completedAt}
+							<span class="text-xs text-gray-400">{formatDate(job.completedAt)}</span>
+						{:else if job.startedAt}
+							<span class="text-xs text-gray-400">{formatDate(job.startedAt)}</span>
+						{/if}
+					</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+{/if}
+
+{#if showDeleteConfirm}
+	<ConfirmDialog
+		title="Delete Repository"
+		message="Are you sure you want to delete {repo.title}? This will permanently remove all indexed snippets and job history."
+		confirmLabel="Delete"
+		danger={true}
+		onConfirm={handleDelete}
+		onCancel={() => (showDeleteConfirm = false)}
+	/>
+{/if}

src/routes/settings/+page.svelte

@@ -0,0 +1,325 @@
+<script lang="ts">
+	import StatBadge from '$lib/components/StatBadge.svelte';
+	import { onMount } from 'svelte';
+
+	// ---------------------------------------------------------------------------
+	// Provider presets
+	// ---------------------------------------------------------------------------
+
+	const PROVIDER_PRESETS = [
+		{
+			name: 'OpenAI',
+			baseUrl: 'https://api.openai.com/v1',
+			model: 'text-embedding-3-small',
+			dimensions: 1536
+		},
+		{
+			name: 'Ollama (local)',
+			baseUrl: 'http://localhost:11434/v1',
+			model: 'nomic-embed-text',
+			dimensions: 768
+		},
+		{
+			name: 'Azure OpenAI',
+			baseUrl: 'https://{resource}.openai.azure.com/openai/deployments/{deployment}/v1',
+			model: 'text-embedding-3-small',
+			dimensions: 1536
+		}
+	];
+
+	// ---------------------------------------------------------------------------
+	// State
+	// ---------------------------------------------------------------------------
+
+	let provider = $state<'none' | 'openai' | 'local'>('none');
+	let baseUrl = $state('https://api.openai.com/v1');
+	let apiKey = $state('');
+	let model = $state('text-embedding-3-small');
+	let dimensions = $state<number | undefined>(1536);
+
+	let testStatus = $state<'idle' | 'testing' | 'ok' | 'error'>('idle');
+	let testError = $state<string | null>(null);
+	let testDimensions = $state<number | null>(null);
+
+	let saving = $state(false);
+	let saveStatus = $state<'idle' | 'ok' | 'error'>('idle');
+	let saveError = $state<string | null>(null);
+
+	let localAvailable = $state<boolean | null>(null);
+	let loading = $state(true);
+
+	// ---------------------------------------------------------------------------
+	// Load current config on mount
+	// ---------------------------------------------------------------------------
+
+	onMount(async () => {
+		try {
+			const res = await fetch('/api/v1/settings/embedding');
+			if (res.ok) {
+				const data = await res.json();
+				provider = data.provider ?? 'none';
+				if (data.openai) {
+					baseUrl = data.openai.baseUrl ?? baseUrl;
+					model = data.openai.model ?? model;
+					dimensions = data.openai.dimensions ?? dimensions;
+					// apiKey is intentionally not returned by the server; leave blank
+				}
+			}
+		} catch {
+			// Non-fatal — fall back to defaults
+		} finally {
+			loading = false;
+		}
+
+		// Probe whether the local provider is available
+		try {
+			const res = await fetch('/api/v1/settings/embedding/test', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ provider: 'local' })
+			});
+			localAvailable = res.ok;
+		} catch {
+			localAvailable = false;
+		}
+	});
+
+	// ---------------------------------------------------------------------------
+	// Actions
+	// ---------------------------------------------------------------------------
+
+	function applyPreset(preset: (typeof PROVIDER_PRESETS)[number]) {
+		baseUrl = preset.baseUrl;
+		model = preset.model;
+		dimensions = preset.dimensions;
+		testStatus = 'idle';
+		testError = null;
+		testDimensions = null;
+	}
+
+	async function testConnection() {
+		testStatus = 'testing';
+		testError = null;
+		testDimensions = null;
+		try {
+			const res = await fetch('/api/v1/settings/embedding/test', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ provider, openai: { baseUrl, apiKey, model, dimensions } })
+			});
+			if (res.ok) {
+				const data = await res.json();
+				testStatus = 'ok';
+				testDimensions = data.dimensions ?? null;
+			} else {
+				const data = await res.json();
+				testStatus = 'error';
+				testError = data.error ?? 'Unknown error';
+			}
+		} catch (e) {
+			testStatus = 'error';
+			testError = (e as Error).message;
+		}
+	}
+
+	async function save() {
+		saving = true;
+		saveStatus = 'idle';
+		saveError = null;
+		try {
+			const res = await fetch('/api/v1/settings/embedding', {
+				method: 'PUT',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ provider, openai: { baseUrl, apiKey, model, dimensions } })
+			});
+			if (res.ok) {
+				saveStatus = 'ok';
+			} else {
+				const data = await res.json();
+				saveStatus = 'error';
+				saveError = data.error ?? 'Save failed';
+			}
+		} catch (e) {
+			saveStatus = 'error';
+			saveError = (e as Error).message;
+		} finally {
+			saving = false;
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>Settings — TrueRef</title>
+</svelte:head>
+
+<div class="mb-6">
+	<h1 class="text-xl font-semibold text-gray-900">Settings</h1>
+	<p class="mt-0.5 text-sm text-gray-500">Configure TrueRef embedding and indexing options</p>
+</div>
+
+<!-- Embedding Provider Card -->
+<div class="rounded-xl border border-gray-200 bg-white p-6">
+	<h2 class="mb-1 text-base font-semibold text-gray-900">Embedding Provider</h2>
+	<p class="mb-4 text-sm text-gray-500">
+		Embeddings enable semantic search. Without them, only keyword search (FTS5) is used.
+	</p>
+
+	{#if loading}
+		<p class="text-sm text-gray-400">Loading current configuration…</p>
+	{:else}
+		<!-- Provider selector -->
+		<div class="mb-4 flex gap-2">
+			{#each ['none', 'openai', 'local'] as p}
+				<button
+					onclick={() => {
+						provider = p as 'none' | 'openai' | 'local';
+						testStatus = 'idle';
+						testError = null;
+					}}
+					class={[
+						'rounded-lg px-4 py-2 text-sm',
+						provider === p
+							? 'bg-blue-600 text-white'
+							: 'border border-gray-200 text-gray-700 hover:bg-gray-50'
+					].join(' ')}
+				>
+					{p === 'none' ? 'None (FTS5 only)' : p === 'openai' ? 'OpenAI-compatible' : 'Local Model'}
+				</button>
+			{/each}
+		</div>
+
+		<!-- None warning -->
+		{#if provider === 'none'}
+			<div class="rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-700">
+				Search will use keyword matching only. Results may be less relevant for complex questions.
+			</div>
+		{/if}
+
+		<!-- OpenAI-compatible form -->
+		{#if provider === 'openai'}
+			<div class="space-y-3">
+				<!-- Preset buttons -->
+				<div class="flex flex-wrap gap-2">
+					{#each PROVIDER_PRESETS as preset}
+						<button
+							onclick={() => applyPreset(preset)}
+							class="rounded border border-gray-200 px-2.5 py-1 text-xs text-gray-600 hover:bg-gray-50"
+						>
+							{preset.name}
+						</button>
+					{/each}
+				</div>
+
+				<label class="block">
+					<span class="text-sm font-medium text-gray-700">Base URL</span>
+					<input
+						type="text"
+						bind:value={baseUrl}
+						class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none"
+					/>
+				</label>
+
+				<label class="block">
+					<span class="text-sm font-medium text-gray-700">API Key</span>
+					<input
+						type="password"
+						bind:value={apiKey}
+						placeholder="sk-…"
+						class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none"
+					/>
+				</label>
+
+				<label class="block">
+					<span class="text-sm font-medium text-gray-700">Model</span>
+					<input
+						type="text"
+						bind:value={model}
+						class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none"
+					/>
+				</label>
+
+				<label class="block">
+					<span class="text-sm font-medium text-gray-700">Dimensions (optional override)</span>
+					<input
+						type="number"
+						bind:value={dimensions}
+						class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none"
+					/>
+				</label>
+
+				<!-- Test connection row -->
+				<div class="flex items-center gap-3">
+					<button
+						onclick={testConnection}
+						disabled={testStatus === 'testing'}
+						class="rounded-lg border border-gray-300 px-3 py-1.5 text-sm hover:bg-gray-50 disabled:opacity-50"
+					>
+						{testStatus === 'testing' ? 'Testing…' : 'Test Connection'}
+					</button>
+
+					{#if testStatus === 'ok'}
+						<span class="text-sm text-green-600">
+							Connection successful
+							{#if testDimensions}— {testDimensions} dimensions{/if}
+						</span>
+					{:else if testStatus === 'error'}
+						<span class="text-sm text-red-600">
+							{testError}
+						</span>
+					{/if}
+				</div>
+			</div>
+		{/if}
+
+		<!-- Local model section -->
+		{#if provider === 'local'}
+			<div class="rounded-lg border border-gray-200 bg-gray-50 p-4 text-sm">
+				<p class="font-medium text-gray-800">Local ONNX model via @xenova/transformers</p>
+				<p class="mt-1 text-gray-500">Model: Xenova/all-MiniLM-L6-v2 · 384 dimensions</p>
+				{#if localAvailable === null}
+					<p class="mt-2 text-gray-400">Checking availability…</p>
+				{:else if localAvailable}
+					<p class="mt-2 text-green-600">@xenova/transformers is installed and ready.</p>
+				{:else}
+					<p class="mt-2 text-amber-700">
+						@xenova/transformers is not installed. Run
+						<code class="rounded bg-amber-100 px-1 py-0.5 font-mono text-xs"
+							>npm install @xenova/transformers</code
+						>
+						to enable local embeddings.
+					</p>
+				{/if}
+			</div>
+		{/if}
+
+		<!-- Save row -->
+		<div class="mt-6 flex items-center justify-end gap-3">
+			{#if saveStatus === 'ok'}
+				<span class="text-sm text-green-600">Settings saved.</span>
+			{:else if saveStatus === 'error'}
+				<span class="text-sm text-red-600">{saveError}</span>
+			{/if}
+
+			<button
+				onclick={save}
+				disabled={saving}
+				class="rounded-lg bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700 disabled:opacity-50"
+			>
+				{saving ? 'Saving…' : 'Save Settings'}
+			</button>
+		</div>
+	{/if}
+</div>
+
+<!-- About card -->
+<div class="mt-4 rounded-xl border border-gray-200 bg-white p-6">
+	<h2 class="mb-1 text-base font-semibold text-gray-900">About TrueRef</h2>
+	<p class="mb-4 text-sm text-gray-500">
+		Self-hosted documentation intelligence platform — a full-stack clone of context7.
+	</p>
+	<div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
+		<StatBadge label="API Version" value="v1" />
+		<StatBadge label="DB" value="SQLite" />
+		<StatBadge label="Search" value="FTS5 + Vec" />
+	</div>
+</div>