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>
This commit is contained in:
Giancarmine Salucci
@@ -5,5 +5,42 @@
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
<svelte:head><link rel="icon" href={favicon} /></svelte:head>
|
||||
{@render children()}
|
||||
<svelte:head>
|
||||
<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>
|
||||
|
||||
7
src/routes/+page.server.ts
Normal file
7
src/routes/+page.server.ts
Normal file
@@ -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 ?? [] };
|
||||
};
|
||||
@@ -1,2 +1,179 @@
|
||||
<h1>Welcome to SvelteKit</h1>
|
||||
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
|
||||
<script lang="ts">
|
||||
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}
|
||||
|
||||
26
src/routes/repos/[id]/+page.server.ts
Normal file
26
src/routes/repos/[id]/+page.server.ts
Normal file
@@ -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 ?? []
|
||||
};
|
||||
};
|
||||
281
src/routes/repos/[id]/+page.svelte
Normal file
281
src/routes/repos/[id]/+page.svelte
Normal file
@@ -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}
|
||||
325
src/routes/settings/+page.svelte
Normal file
325
src/routes/settings/+page.svelte
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user