mozempk/trueref
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
2026-03-23 09:07:06 +01:00
parent 542f4ce66c
commit 90d93786a8
11 changed files with 1254 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

325
src/routes/settings/+page.svelte Normal file
View 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>