feat: Vue 3 frontend and FastAPI REST layer

- app/rest.py: FastAPI app wrapping search/diagnose/sources with CORS - web/: Vue 3 + Vite + UnoCSS + Pinia frontend at port 8535 - LogSearchView: sidebar filters (source, severity, limit) + FTS search - DiagnoseView: layered symptom investigation matching MCP diagnose tool - SourcesView: corpus table with entry count, error count, time range - LogEntryRow: severity badge, pattern chips, repeat count, timestamp - StatusDot: live API health indicator in nav - scripts/start_dev.sh: launch FastAPI (:8534) + Vite dev server (:8535) - .gitignore: add web/node_modules/ and web/dist/ - Caddy: /turnstone* route added to menagerie.circuitforge.tech block (API → :8534 with /turnstone strip, SPA fallback → :8535)
2026-05-08 16:27:59 -07:00 · 2026-05-08 16:27:59 -07:00 · a45fa901dd
commit a45fa901dd
parent 8db8810667
20 changed files with 4091 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -8,3 +8,5 @@ __pycache__/
 *.db
 *.db-wal
 *.db-shm
+web/node_modules/
+web/dist/
--- a/app/rest.py
+++ b/app/rest.py
@ -0,0 +1,90 @@
+"""Turnstone REST API — thin HTTP wrapper around the search and ingest services."""
+from __future__ import annotations
+
+import dataclasses
+import os
+from pathlib import Path
+from typing import Annotated
+
+from fastapi import FastAPI, Query
+from fastapi.middleware.cors import CORSMiddleware
+
+from app.services.search import search as _search, list_sources as _list_sources, format_results
+
+DB_PATH = Path(os.environ.get("TURNSTONE_DB", Path(__file__).parent.parent / "data" / "turnstone.db"))
+
+app = FastAPI(title="Turnstone API", version="0.1.0")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["GET", "POST"],
+    allow_headers=["*"],
+)
+
+
+@app.get("/health")
+def health() -> dict:
+    return {"status": "ok", "db": str(DB_PATH)}
+
+
+@app.get("/api/search")
+def search_logs(
+    q: Annotated[str, Query(description="Search query")] = "",
+    source: Annotated[str | None, Query(description="Filter by log source ID (partial match)")] = None,
+    severity: Annotated[str | None, Query(description="Filter by severity (DEBUG/INFO/WARN/ERROR/CRITICAL)")] = None,
+    since: Annotated[str | None, Query(description="ISO timestamp lower bound")] = None,
+    until: Annotated[str | None, Query(description="ISO timestamp upper bound")] = None,
+    limit: Annotated[int, Query(ge=1, le=500)] = 50,
+) -> dict:
+    if not q:
+        return {"count": 0, "results": []}
+    results = _search(
+        DB_PATH,
+        query=q,
+        source_filter=source,
+        severity=severity,
+        since=since,
+        until=until,
+        limit=limit,
+    )
+    return {
+        "count": len(results),
+        "results": [dataclasses.asdict(r) for r in results],
+    }
+
+
+@app.get("/api/diagnose")
+def diagnose(
+    q: Annotated[str, Query(description="Service name or problem description")] = "",
+    source: Annotated[str | None, Query(description="Limit to a specific source ID (partial match)")] = None,
+    since: Annotated[str | None, Query(description="ISO timestamp lower bound")] = None,
+    until: Annotated[str | None, Query(description="ISO timestamp upper bound")] = None,
+) -> dict:
+    if not q:
+        return {"count": 0, "results": [], "formatted": ""}
+    common: dict = dict(source_filter=source, since=since, until=until, include_repeats=False)
+    broad = _search(DB_PATH, query=q, limit=15, **common)
+    critical = _search(DB_PATH, query=q, severity="CRITICAL", limit=5, **common)
+    errors = _search(DB_PATH, query=q, severity="ERROR", limit=10, **common)
+
+    seen: set[str] = set()
+    combined = []
+    for r in broad + critical + errors:
+        if r.entry_id not in seen:
+            seen.add(r.entry_id)
+            combined.append(r)
+
+    combined.sort(key=lambda r: (r.timestamp_iso or "\xff", r.sequence))
+    combined = combined[:20]
+    return {
+        "count": len(combined),
+        "results": [dataclasses.asdict(r) for r in combined],
+        "formatted": format_results(combined),
+    }
+
+
+@app.get("/api/sources")
+def list_sources() -> dict:
+    sources = _list_sources(DB_PATH)
+    return {"sources": sources}
--- a/scripts/start_dev.sh
+++ b/scripts/start_dev.sh
@ -0,0 +1,26 @@
+#!/usr/bin/env bash
+# Start Turnstone dev instance: FastAPI on :8534, Vite on :8535
+set -euo pipefail
+
+REPO="$(cd "$(dirname "$0")/.." && pwd)"
+DB="${TURNSTONE_DB:-$REPO/data/turnstone.db}"
+
+echo "==> Turnstone dev instance"
+echo "    DB:  $DB"
+echo "    API: http://localhost:8534"
+echo "    UI:  http://localhost:8535"
+echo ""
+
+# FastAPI in background
+TURNSTONE_DB="$DB" conda run --no-capture-output -n cf \
+  uvicorn app.rest:app --host 0.0.0.0 --port 8534 --reload \
+  --log-level info &
+API_PID=$!
+echo "==> FastAPI PID $API_PID"
+
+# Vite dev server in foreground (Ctrl-C stops both)
+cleanup() { kill "$API_PID" 2>/dev/null || true; }
+trap cleanup EXIT INT TERM
+
+cd "$REPO/web"
+npm run dev
--- a/web/index.html
+++ b/web/index.html
@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Turnstone — Diagnostic Log Intelligence</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/web/package-lock.json
+++ b/web/package-lock.json
--- a/web/package.json
+++ b/web/package.json
@ -0,0 +1,30 @@
+{
+  "name": "turnstone-web",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fontsource/jetbrains-mono": "^5.2.8",
+    "@heroicons/vue": "^2.2.0",
+    "@vueuse/core": "^14.2.1",
+    "pinia": "^3.0.4",
+    "vue": "^3.5.25",
+    "vue-router": "^5.0.3"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@unocss/preset-attributify": "^66.6.4",
+    "@unocss/preset-wind": "^66.6.4",
+    "@vitejs/plugin-vue": "^6.0.2",
+    "@vue/tsconfig": "^0.8.1",
+    "typescript": "~5.9.3",
+    "unocss": "^66.6.4",
+    "vite": "^7.3.1",
+    "vue-tsc": "^3.1.5"
+  }
+}
--- a/web/src/App.vue
+++ b/web/src/App.vue
@ -0,0 +1,36 @@
+<template>
+  <div class="min-h-screen bg-surface font-mono text-text-primary">
+    <nav class="border-b border-surface-border px-6 py-3 flex items-center gap-6">
+      <div class="flex items-center gap-2">
+        <span class="text-accent font-semibold tracking-wide">TURNSTONE</span>
+        <span class="text-text-dim text-xs">diagnostic intelligence</span>
+      </div>
+      <div class="flex gap-1 ml-4">
+        <RouterLink
+          v-for="link in navLinks"
+          :key="link.to"
+          :to="link.to"
+          class="px-3 py-1 rounded text-sm text-text-muted hover:text-text-primary hover:bg-surface-raised transition-colors"
+          active-class="text-accent bg-accent-muted"
+        >
+          {{ link.label }}
+        </RouterLink>
+      </div>
+      <div class="ml-auto">
+        <StatusDot />
+      </div>
+    </nav>
+    <RouterView />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RouterLink, RouterView } from 'vue-router'
+import StatusDot from '@/components/StatusDot.vue'
+
+const navLinks = [
+  { to: '/search', label: 'Search' },
+  { to: '/diagnose', label: 'Diagnose' },
+  { to: '/sources', label: 'Sources' },
+]
+</script>
--- a/web/src/components/LogEntryRow.vue
+++ b/web/src/components/LogEntryRow.vue
@ -0,0 +1,49 @@
+<template>
+  <div
+    class="border-b border-surface-border px-4 py-3 hover:bg-surface-raised transition-colors cursor-default"
+    :class="{ 'border-l-2 border-l-sev-error': isHighSeverity }"
+  >
+    <div class="flex items-start gap-3">
+      <SeverityBadge :severity="entry.severity" class="mt-0.5 shrink-0 w-16 text-center" />
+      <div class="min-w-0 flex-1">
+        <div class="flex items-center gap-2 mb-1 flex-wrap">
+          <span class="text-accent text-xs">{{ entry.source_id }}</span>
+          <span v-if="entry.timestamp_iso" class="text-text-dim text-xs">{{ formatTs(entry.timestamp_iso) }}</span>
+          <span
+            v-for="p in entry.matched_patterns"
+            :key="p"
+            class="px-1.5 py-0.5 rounded bg-accent-muted text-accent text-xs"
+          >{{ p }}</span>
+          <span
+            v-if="entry.repeat_count > 1"
+            class="text-text-dim text-xs"
+          >×{{ entry.repeat_count }}</span>
+        </div>
+        <p class="text-text-primary text-sm whitespace-pre-wrap break-all leading-relaxed">{{ entry.text }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { LogEntry } from '@/stores/search'
+import SeverityBadge from './SeverityBadge.vue'
+
+const props = defineProps<{ entry: LogEntry }>()
+
+const isHighSeverity = computed(() =>
+  ['ERROR', 'CRITICAL'].includes((props.entry.severity ?? '').toUpperCase())
+)
+
+function formatTs(iso: string): string {
+  try {
+    return new Date(iso).toLocaleString(undefined, {
+      month: 'short', day: 'numeric',
+      hour: '2-digit', minute: '2-digit', second: '2-digit',
+    })
+  } catch {
+    return iso
+  }
+}
+</script>
--- a/web/src/components/SeverityBadge.vue
+++ b/web/src/components/SeverityBadge.vue
@ -0,0 +1,24 @@
+<template>
+  <span
+    class="px-1.5 py-0.5 rounded text-xs font-semibold uppercase tracking-wider"
+    :class="colorClass"
+  >{{ severity }}</span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{ severity: string | null }>()
+
+const colorClass = computed(() => {
+  switch ((props.severity ?? '').toUpperCase()) {
+    case 'DEBUG':    return 'bg-gray-800 text-sev-debug'
+    case 'INFO':     return 'bg-blue-900/40 text-sev-info'
+    case 'WARN':     return 'bg-yellow-900/40 text-sev-warn'
+    case 'WARNING':  return 'bg-yellow-900/40 text-sev-warn'
+    case 'ERROR':    return 'bg-red-900/40 text-sev-error'
+    case 'CRITICAL': return 'bg-red-900/60 text-sev-critical font-bold'
+    default:         return 'bg-surface-raised text-text-dim'
+  }
+})
+</script>
--- a/web/src/components/StatusDot.vue
+++ b/web/src/components/StatusDot.vue
@ -0,0 +1,25 @@
+<template>
+  <div class="flex items-center gap-2 text-xs text-text-dim">
+    <span
+      class="w-2 h-2 rounded-full"
+      :class="online ? 'bg-green-500' : 'bg-red-500 animate-pulse'"
+    />
+    <span>{{ online ? 'API online' : 'API offline' }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+const online = ref(false)
+const BASE = import.meta.env.BASE_URL.replace(/\/$/, '')
+
+onMounted(async () => {
+  try {
+    const res = await fetch(`${BASE}/health`)
+    online.value = res.ok
+  } catch {
+    online.value = false
+  }
+})
+</script>
--- a/web/src/main.ts
+++ b/web/src/main.ts
@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import 'virtual:uno.css'
+import '@fontsource/jetbrains-mono/400.css'
+import '@fontsource/jetbrains-mono/600.css'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+app.use(createPinia())
+app.use(router)
+app.mount('#app')
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@ -0,0 +1,14 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import LogSearchView from '@/views/LogSearchView.vue'
+import DiagnoseView from '@/views/DiagnoseView.vue'
+import SourcesView from '@/views/SourcesView.vue'
+
+export default createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    { path: '/', redirect: '/search' },
+    { path: '/search', component: LogSearchView },
+    { path: '/diagnose', component: DiagnoseView },
+    { path: '/sources', component: SourcesView },
+  ],
+})
--- a/web/src/stores/search.ts
+++ b/web/src/stores/search.ts
@ -0,0 +1,103 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+
+export interface LogEntry {
+  entry_id: string
+  source_id: string
+  sequence: number
+  timestamp_iso: string | null
+  severity: string | null
+  repeat_count: number
+  out_of_order: boolean
+  matched_patterns: string[]
+  text: string
+  rank: number
+}
+
+export interface LogSource {
+  source_id: string
+  entry_count: number
+  earliest: string | null
+  latest: string | null
+  error_count: number
+}
+
+const BASE = import.meta.env.BASE_URL.replace(/\/$/, '')
+
+async function apiFetch<T>(path: string, params?: Record<string, string | undefined>): Promise<T> {
+  const url = new URL(`${BASE}${path}`, window.location.origin)
+  if (params) {
+    for (const [k, v] of Object.entries(params)) {
+      if (v !== undefined && v !== '') url.searchParams.set(k, v)
+    }
+  }
+  const res = await fetch(url.toString())
+  if (!res.ok) throw new Error(`API ${path} returned ${res.status}`)
+  return res.json()
+}
+
+export const useSearchStore = defineStore('search', () => {
+  const query = ref('')
+  const sourceFilter = ref<string | undefined>()
+  const severityFilter = ref<string | undefined>()
+  const sinceFilter = ref<string | undefined>()
+  const limit = ref(50)
+
+  const results = ref<LogEntry[]>([])
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+  const total = ref(0)
+
+  const sources = ref<LogSource[]>([])
+  const sourcesLoaded = ref(false)
+
+  const severityOptions = ['DEBUG', 'INFO', 'WARN', 'ERROR', 'CRITICAL']
+
+  const hasResults = computed(() => results.value.length > 0)
+
+  async function runSearch() {
+    if (!query.value.trim()) return
+    loading.value = true
+    error.value = null
+    try {
+      const data = await apiFetch<{ count: number; results: LogEntry[] }>('/api/search', {
+        q: query.value,
+        source: sourceFilter.value,
+        severity: severityFilter.value,
+        since: sinceFilter.value,
+        limit: String(limit.value),
+      })
+      results.value = data.results
+      total.value = data.count
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : String(e)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function loadSources() {
+    if (sourcesLoaded.value) return
+    try {
+      const data = await apiFetch<{ sources: LogSource[] }>('/api/sources')
+      sources.value = data.sources
+      sourcesLoaded.value = true
+    } catch {
+      // non-fatal
+    }
+  }
+
+  function clearFilters() {
+    sourceFilter.value = undefined
+    severityFilter.value = undefined
+    sinceFilter.value = undefined
+    limit.value = 50
+  }
+
+  return {
+    query, sourceFilter, severityFilter, sinceFilter, limit,
+    results, loading, error, total, sources, sourcesLoaded,
+    severityOptions, hasResults,
+    runSearch, loadSources, clearFilters,
+  }
+})
--- a/web/src/views/DiagnoseView.vue
+++ b/web/src/views/DiagnoseView.vue
@ -0,0 +1,89 @@
+<template>
+  <div class="p-6 max-w-4xl mx-auto">
+    <div class="mb-6">
+      <h1 class="text-text-primary text-xl font-semibold mb-1">Diagnose</h1>
+      <p class="text-text-dim text-sm">
+        Describe a symptom or service name. Turnstone runs layered searches — broad relevance,
+        then CRITICAL/ERROR — and returns deduplicated evidence sorted by time.
+      </p>
+    </div>
+
+    <div class="flex gap-3 mb-6">
+      <input
+        v-model="symptom"
+        type="text"
+        placeholder="e.g. 'plex EAE audio' or 'ssh authentication failed'"
+        class="flex-1 bg-surface-raised border border-surface-border rounded px-4 py-2.5 text-sm text-text-primary placeholder-text-dim focus:outline-none focus:border-accent transition-colors"
+        @keydown.enter="run()"
+      />
+      <button
+        class="px-6 py-2.5 rounded bg-accent text-white text-sm font-semibold hover:bg-blue-400 transition-colors disabled:opacity-50"
+        :disabled="loading || !symptom.trim()"
+        @click="run()"
+      >
+        <span v-if="loading">Diagnosing…</span>
+        <span v-else>Diagnose</span>
+      </button>
+    </div>
+
+    <!-- Error -->
+    <div v-if="error" class="mb-4 p-3 rounded bg-red-900/30 border border-red-700/40 text-sev-error text-sm">
+      {{ error }}
+    </div>
+
+    <!-- Results -->
+    <template v-if="entries.length">
+      <div class="mb-3 text-text-dim text-xs">
+        {{ entries.length }} relevant log{{ entries.length !== 1 ? 's' : '' }} — sorted chronologically
+      </div>
+      <div class="rounded border border-surface-border overflow-hidden">
+        <LogEntryRow
+          v-for="entry in entries"
+          :key="entry.entry_id"
+          :entry="entry"
+        />
+      </div>
+    </template>
+
+    <!-- Zero state after run -->
+    <div v-else-if="ranOnce && !loading" class="text-center text-text-dim py-12">
+      <p class="mb-1">No log evidence found for "{{ lastQuery }}"</p>
+      <p class="text-sm">Check the Sources tab to confirm data is ingested, or try a broader description.</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { LogEntry } from '@/stores/search'
+import LogEntryRow from '@/components/LogEntryRow.vue'
+
+const symptom = ref('')
+const entries = ref<LogEntry[]>([])
+const loading = ref(false)
+const error = ref<string | null>(null)
+const ranOnce = ref(false)
+const lastQuery = ref('')
+
+const BASE = import.meta.env.BASE_URL.replace(/\/$/, '')
+
+async function run() {
+  if (!symptom.value.trim()) return
+  loading.value = true
+  error.value = null
+  lastQuery.value = symptom.value
+  try {
+    const url = new URL(`${BASE}/api/diagnose`, window.location.origin)
+    url.searchParams.set('q', symptom.value)
+    const res = await fetch(url.toString())
+    if (!res.ok) throw new Error(`API returned ${res.status}`)
+    const data = await res.json()
+    entries.value = data.results
+    ranOnce.value = true
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : String(e)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
--- a/web/src/views/LogSearchView.vue
+++ b/web/src/views/LogSearchView.vue
@ -0,0 +1,119 @@
+<template>
+  <div class="flex h-[calc(100vh-49px)]">
+    <!-- Sidebar: filters -->
+    <aside class="w-56 shrink-0 border-r border-surface-border bg-surface-raised p-4 flex flex-col gap-5 overflow-y-auto">
+      <div>
+        <h3 class="text-text-dim text-xs uppercase tracking-widest mb-2">Source</h3>
+        <div class="flex flex-col gap-1">
+          <button
+            class="text-left px-2 py-1 rounded text-sm transition-colors"
+            :class="!store.sourceFilter ? 'text-accent bg-accent-muted' : 'text-text-muted hover:text-text-primary hover:bg-surface-border'"
+            @click="store.sourceFilter = undefined"
+          >All sources</button>
+          <button
+            v-for="src in store.sources"
+            :key="src.source_id"
+            class="text-left px-2 py-1 rounded text-xs transition-colors truncate"
+            :class="store.sourceFilter === src.source_id ? 'text-accent bg-accent-muted' : 'text-text-muted hover:text-text-primary hover:bg-surface-border'"
+            :title="src.source_id"
+            @click="store.sourceFilter = src.source_id"
+          >
+            {{ src.source_id }}
+            <span v-if="src.error_count" class="text-sev-error ml-1">{{ src.error_count }}e</span>
+          </button>
+        </div>
+      </div>
+
+      <div>
+        <h3 class="text-text-dim text-xs uppercase tracking-widest mb-2">Severity</h3>
+        <div class="flex flex-col gap-1">
+          <button
+            class="text-left px-2 py-1 rounded text-sm transition-colors"
+            :class="!store.severityFilter ? 'text-accent bg-accent-muted' : 'text-text-muted hover:text-text-primary hover:bg-surface-border'"
+            @click="store.severityFilter = undefined"
+          >All</button>
+          <button
+            v-for="sev in store.severityOptions"
+            :key="sev"
+            class="text-left px-2 py-1 rounded text-xs transition-colors"
+            :class="store.severityFilter === sev ? 'text-accent bg-accent-muted' : 'text-text-muted hover:text-text-primary hover:bg-surface-border'"
+            @click="store.severityFilter = sev"
+          >{{ sev }}</button>
+        </div>
+      </div>
+
+      <div>
+        <h3 class="text-text-dim text-xs uppercase tracking-widest mb-2">Limit</h3>
+        <select
+          v-model.number="store.limit"
+          class="w-full bg-surface border border-surface-border rounded px-2 py-1 text-sm text-text-primary"
+        >
+          <option v-for="n in [20, 50, 100, 200]" :key="n" :value="n">{{ n }}</option>
+        </select>
+      </div>
+
+      <button
+        class="mt-auto text-text-dim text-xs hover:text-text-muted transition-colors"
+        @click="store.clearFilters()"
+      >Clear filters</button>
+    </aside>
+
+    <!-- Main: search + results -->
+    <main class="flex-1 flex flex-col min-w-0">
+      <!-- Search bar -->
+      <div class="border-b border-surface-border p-4 flex gap-3">
+        <input
+          v-model="store.query"
+          type="text"
+          placeholder="Search logs… (e.g. 'EAE timeout' or 'auth failed')"
+          class="flex-1 bg-surface-raised border border-surface-border rounded px-4 py-2 text-sm text-text-primary placeholder-text-dim focus:outline-none focus:border-accent transition-colors"
+          @keydown.enter="store.runSearch()"
+        />
+        <button
+          class="px-5 py-2 rounded bg-accent text-white text-sm font-semibold hover:bg-blue-400 transition-colors disabled:opacity-50"
+          :disabled="store.loading || !store.query.trim()"
+          @click="store.runSearch()"
+        >
+          <span v-if="store.loading">…</span>
+          <span v-else>Search</span>
+        </button>
+      </div>
+
+      <!-- Results header -->
+      <div v-if="store.hasResults || store.error" class="border-b border-surface-border px-4 py-2 flex items-center gap-3 text-xs text-text-dim">
+        <span v-if="store.error" class="text-sev-error">{{ store.error }}</span>
+        <span v-else>{{ store.total }} result{{ store.total !== 1 ? 's' : '' }}</span>
+      </div>
+
+      <!-- Empty / zero states -->
+      <div v-if="!store.loading && !store.hasResults && !store.error" class="flex-1 flex flex-col items-center justify-center text-text-dim gap-3">
+        <div v-if="!store.query" class="text-center">
+          <p class="text-lg mb-1">Search your log corpus</p>
+          <p class="text-sm">Type a query and press Enter or click Search.</p>
+        </div>
+        <div v-else class="text-center">
+          <p class="text-base mb-1">No results for "{{ store.query }}"</p>
+          <p class="text-sm">Try broader terms or check the Sources tab to confirm data is ingested.</p>
+        </div>
+      </div>
+
+      <!-- Results list -->
+      <div v-else class="flex-1 overflow-y-auto">
+        <LogEntryRow
+          v-for="entry in store.results"
+          :key="entry.entry_id"
+          :entry="entry"
+        />
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useSearchStore } from '@/stores/search'
+import LogEntryRow from '@/components/LogEntryRow.vue'
+
+const store = useSearchStore()
+onMounted(() => store.loadSources())
+</script>
--- a/web/src/views/SourcesView.vue
+++ b/web/src/views/SourcesView.vue
@ -0,0 +1,80 @@
+<template>
+  <div class="p-6 max-w-5xl mx-auto">
+    <div class="mb-6">
+      <h1 class="text-text-primary text-xl font-semibold mb-1">Log Sources</h1>
+      <p class="text-text-dim text-sm">All hosts and services in the ingested corpus.</p>
+    </div>
+
+    <div v-if="loading" class="text-text-dim py-8 text-center text-sm">Loading…</div>
+
+    <div v-else-if="sources.length === 0" class="text-text-dim py-12 text-center">
+      <p class="mb-1">No log sources found.</p>
+      <p class="text-sm">Run the ingest pipeline: <code class="bg-surface-raised px-1 rounded">python scripts/ingest_corpus.py</code></p>
+    </div>
+
+    <div v-else class="rounded border border-surface-border overflow-hidden">
+      <table class="w-full text-sm">
+        <thead class="bg-surface-raised border-b border-surface-border">
+          <tr>
+            <th class="text-left px-4 py-2.5 text-text-dim font-medium text-xs uppercase tracking-wider">Source</th>
+            <th class="text-right px-4 py-2.5 text-text-dim font-medium text-xs uppercase tracking-wider">Entries</th>
+            <th class="text-right px-4 py-2.5 text-text-dim font-medium text-xs uppercase tracking-wider">Errors</th>
+            <th class="text-left px-4 py-2.5 text-text-dim font-medium text-xs uppercase tracking-wider">Earliest</th>
+            <th class="text-left px-4 py-2.5 text-text-dim font-medium text-xs uppercase tracking-wider">Latest</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="src in sources"
+            :key="src.source_id"
+            class="border-b border-surface-border hover:bg-surface-raised transition-colors"
+          >
+            <td class="px-4 py-2.5 text-accent">{{ src.source_id }}</td>
+            <td class="px-4 py-2.5 text-text-muted text-right tabular-nums">{{ src.entry_count.toLocaleString() }}</td>
+            <td class="px-4 py-2.5 text-right tabular-nums">
+              <span :class="src.error_count > 0 ? 'text-sev-error' : 'text-text-dim'">
+                {{ src.error_count.toLocaleString() }}
+              </span>
+            </td>
+            <td class="px-4 py-2.5 text-text-dim text-xs">{{ formatTs(src.earliest) }}</td>
+            <td class="px-4 py-2.5 text-text-dim text-xs">{{ formatTs(src.latest) }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import type { LogSource } from '@/stores/search'
+
+const sources = ref<LogSource[]>([])
+const loading = ref(true)
+
+const BASE = import.meta.env.BASE_URL.replace(/\/$/, '')
+
+onMounted(async () => {
+  try {
+    const res = await fetch(`${BASE}/api/sources`)
+    if (res.ok) {
+      const data = await res.json()
+      sources.value = data.sources
+    }
+  } finally {
+    loading.value = false
+  }
+})
+
+function formatTs(iso: string | null): string {
+  if (!iso) return '—'
+  try {
+    return new Date(iso).toLocaleString(undefined, {
+      year: 'numeric', month: 'short', day: 'numeric',
+      hour: '2-digit', minute: '2-digit',
+    })
+  } catch {
+    return iso
+  }
+}
+</script>
--- a/web/src/vite-env.d.ts
+++ b/web/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@ -0,0 +1,10 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": { "@/*": ["./src/*"] },
+    "strict": true,
+    "noUnusedLocals": false
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue"]
+}
--- a/web/uno.config.ts
+++ b/web/uno.config.ts
@ -0,0 +1,33 @@
+import { defineConfig, presetAttributify, presetWind } from 'unocss'
+
+export default defineConfig({
+  presets: [presetWind(), presetAttributify()],
+  theme: {
+    colors: {
+      surface: {
+        DEFAULT: '#0f1117',
+        raised: '#161b25',
+        border: '#1e2636',
+      },
+      accent: {
+        DEFAULT: '#4e9af1',
+        muted: '#2a4a72',
+      },
+      sev: {
+        debug: '#6b7280',
+        info: '#60a5fa',
+        warn: '#fbbf24',
+        error: '#f87171',
+        critical: '#ef4444',
+      },
+      text: {
+        primary: '#e2e8f0',
+        muted: '#94a3b8',
+        dim: '#475569',
+      },
+    },
+    fontFamily: {
+      mono: ['JetBrains Mono', 'monospace'],
+    },
+  },
+})
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@ -0,0 +1,26 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import UnoCSS from 'unocss/vite'
+import { fileURLToPath } from 'url'
+
+export default defineConfig({
+  plugins: [vue(), UnoCSS()],
+  base: process.env.VITE_BASE_URL ?? '/turnstone/',
+  resolve: {
+    alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) },
+  },
+  server: {
+    host: '0.0.0.0',
+    port: 8535,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8534',
+        changeOrigin: true,
+      },
+      '/health': {
+        target: 'http://localhost:8534',
+        changeOrigin: true,
+      },
+    },
+  },
+})