trueref/docs/features/TRUEREF-0015.md

# TRUEREF-0015 — Web UI: Repository Dashboard

**Priority:** P1
**Status:** Pending
**Depends On:** TRUEREF-0002, TRUEREF-0009
**Blocks:** TRUEREF-0016

---

## Overview

Implement the main web interface for managing repositories. Built with SvelteKit and TailwindCSS v4. The dashboard lets users add repositories, view indexing status with live progress, trigger re-indexing, remove repositories, and view basic statistics.

---

## Acceptance Criteria

- [ ] Repository list page at `/` showing all repositories with status, snippet count, last indexed date
- [ ] Add repository modal/form (GitHub URL or local path input)
- [ ] Per-repository card with: title, description, state badge, stats, action buttons
- [ ] Live indexing progress bar (polls `GET /api/v1/jobs/:id` every 2s while running)
- [ ] Trigger re-index button
- [ ] Delete repository (with confirmation dialog)
- [ ] View indexed versions per repository
- [ ] Error state display (show error message when state = `error`)
- [ ] Empty state (no repositories yet) with clear call-to-action
- [ ] Responsive layout (mobile + desktop)
- [ ] No page reloads — all interactions via `fetch` with SvelteKit load functions

---

## Page Structure

```
/ (root)
├── Layout: navbar with TrueRef logo + nav links
├── /
│   └── Repository list + add button
├── /repos/[id]
│   └── Repository detail: versions, recent jobs, config
└── /settings
    └── Embedding provider configuration
```

---

## Repository Card Component

```svelte
<!-- src/lib/components/RepositoryCard.svelte -->
<script lang="ts">
  import type { Repository } from '$lib/types';

  let { repo, onReindex, onDelete } = $props<{
    repo: Repository;
    onReindex: (id: string) => void;
    onDelete: (id: string) => void;
  }>();

  const stateColors = {
    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 = {
    pending: 'Pending',
    indexing: 'Indexing...',
    indexed: 'Indexed',
    error: 'Error',
  };
</script>

<div class="rounded-xl border border-gray-200 bg-white p-5 shadow-sm">
  <div class="flex items-start justify-between">
    <div>
      <h3 class="font-semibold text-gray-900">{repo.title}</h3>
      <p class="mt-0.5 font-mono text-sm text-gray-500">{repo.id}</p>
    </div>
    <span class="rounded-full px-2.5 py-0.5 text-xs font-medium {stateColors[repo.state]}">
      {stateLabels[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 gap-4 text-sm text-gray-500">
    <span>{repo.totalSnippets.toLocaleString()} snippets</span>
    <span>·</span>
    <span>Trust: {repo.trustScore.toFixed(1)}/10</span>
    {#if repo.stars}
      <span>·</span>
      <span>★ {repo.stars.toLocaleString()}</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 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={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>
```

---

## Add Repository Modal

```svelte
<!-- src/lib/components/AddRepositoryModal.svelte -->
<script lang="ts">
  let { onClose, onAdded } = $props<{
    onClose: () => void;
    onAdded: () => void;
  }>();

  let source = $state<'github' | 'local'>('github');
  let sourceUrl = $state('');
  let githubToken = $state('');
  let loading = $state(false);
  let error = $state<string | null>(null);

  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, 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>

<dialog class="modal" open>
  <div class="modal-box max-w-md">
    <h2 class="mb-4 text-lg font-semibold">Add Repository</h2>

    <div class="mb-4 flex gap-2">
      <button
        class="flex-1 rounded-lg py-2 text-sm {source === 'github' ? 'bg-blue-600 text-white' : 'border border-gray-200 text-gray-700'}"
        onclick={() => source = 'github'}
      >GitHub</button>
      <button
        class="flex-1 rounded-lg py-2 text-sm {source === 'local' ? 'bg-blue-600 text-white' : 'border border-gray-200 text-gray-700'}"
        onclick={() => source = 'local'}
      >Local Path</button>
    </div>

    <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"
      />
    </label>

    {#if source === 'github'}
      <label class="mt-3 block">
        <span class="text-sm font-medium text-gray-700">GitHub Token (optional, for private repos)</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"
        />
      </label>
    {/if}

    {#if error}
      <p class="mt-3 text-sm text-red-600">{error}</p>
    {/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">
        Cancel
      </button>
      <button
        onclick={handleSubmit}
        disabled={loading || !sourceUrl}
        class="rounded-lg bg-blue-600 px-4 py-2 text-sm text-white disabled:opacity-50"
      >
        {loading ? 'Adding...' : 'Add & Index'}
      </button>
    </div>
  </div>
</dialog>
```

---

## Live Progress Component

```svelte
<!-- src/lib/components/IndexingProgress.svelte -->
<script lang="ts">
  import { onMount, onDestroy } from 'svelte';
  import type { IndexingJob } from '$lib/types';

  let { jobId } = $props<{ jobId: string }>();
  let job = $state<IndexingJob | null>(null);
  let interval: ReturnType<typeof setInterval>;

  async function pollJob() {
    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') {
        clearInterval(interval);
      }
    }
  }

  onMount(() => {
    pollJob();
    interval = setInterval(pollJob, 2000);
  });

  onDestroy(() => clearInterval(interval));
</script>

{#if job}
  <div class="mt-2">
    <div class="flex justify-between text-xs text-gray-500">
      <span>{job.processedFiles} / {job.totalFiles} files</span>
      <span>{job.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"
        style="width: {job.progress}%"
      ></div>
    </div>
    {#if job.status === 'failed'}
      <p class="mt-1 text-xs text-red-600">{job.error}</p>
    {/if}
  </div>
{/if}
```

---

## Main Page Data Loading

```typescript
// src/routes/+page.server.ts
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 };
};
```

---

## Files to Create

- `src/routes/+page.svelte` — repository list
- `src/routes/+page.server.ts` — load function
- `src/routes/repos/[id]/+page.svelte` — repository detail
- `src/routes/repos/[id]/+page.server.ts` — load function
- `src/routes/settings/+page.svelte` — settings page
- `src/lib/components/RepositoryCard.svelte`
- `src/lib/components/AddRepositoryModal.svelte`
- `src/lib/components/IndexingProgress.svelte`
- `src/lib/components/ConfirmDialog.svelte`
- `src/lib/components/StatBadge.svelte`
- `src/routes/+layout.svelte` — nav + global layout