diff --git a/internal/db/gorm/token_store.go b/internal/db/gorm/token_store.go
index 8f641c01..88938201 100644
--- a/internal/db/gorm/token_store.go
+++ b/internal/db/gorm/token_store.go
@@ -45,19 +45,19 @@ func (s *TokenStore) List(ctx context.Context) ([]APIToken, error) {
 	return tokens, err
 }
 
-// FindByPrefix looks up a non-revoked token by its prefix for auth middleware.
-func (s *TokenStore) FindByPrefix(ctx context.Context, prefix string) (*APIToken, error) {
-	var token APIToken
+// FindByPrefix looks up all non-revoked tokens matching the given prefix.
+// Multiple tokens may share a prefix in the non-unique index, so callers
+// must iterate over the returned slice and compare bcrypt hashes to find the
+// matching token.
+func (s *TokenStore) FindByPrefix(ctx context.Context, prefix string) ([]APIToken, error) {
+	var tokens []APIToken
 	err := s.db.WithContext(ctx).
 		Where("token_prefix = ? AND NOT revoked", prefix).
-		First(&token).Error
-	if err == gorm.ErrRecordNotFound {
-		return nil, nil
-	}
+		Find(&tokens).Error
 	if err != nil {
 		return nil, err
 	}
-	return &token, nil
+	return tokens, nil
 }
 
 // Revoke marks a token as revoked.
diff --git a/internal/worker/handlers_analytics.go b/internal/worker/handlers_analytics.go
index d71f11c8..ec45fa0a 100644
--- a/internal/worker/handlers_analytics.go
+++ b/internal/worker/handlers_analytics.go
@@ -4,6 +4,7 @@ package worker
 import (
 	"fmt"
 	"net/http"
+	"slices"
 	"strconv"
 	"time"
 
@@ -57,7 +58,11 @@ func (s *Service) handleGetTrends(w http.ResponseWriter, r *http.Request) {
 		}
 	}
 
-	// Get observations for analysis (rough estimate of limit)
+	// Get observations for analysis. The multiplier of 50 is a heuristic: we
+	// assume at most ~50 observations are created per day on average. For
+	// deployments with higher throughput the analytics may be slightly
+	// incomplete; a future improvement would be to filter by created_at >= cutoff
+	// at the DB level rather than applying a fetch limit here.
 	obs, err := s.observationStore.GetRecentObservations(r.Context(), project, days*50)
 	if err != nil {
 		log.Error().Err(err).Msg("get observations for trends failed")
@@ -119,17 +124,13 @@ func (s *Service) handleGetTrends(w http.ResponseWriter, r *http.Request) {
 		name  string
 		count int
 	}
-	var topConcepts []conceptEntry
+	topConcepts := make([]conceptEntry, 0, len(conceptCounts))
 	for name, count := range conceptCounts {
 		topConcepts = append(topConcepts, conceptEntry{name, count})
 	}
-	for i := 0; i < len(topConcepts) && i < 10; i++ {
-		for j := i + 1; j < len(topConcepts); j++ {
-			if topConcepts[j].count > topConcepts[i].count {
-				topConcepts[i], topConcepts[j] = topConcepts[j], topConcepts[i]
-			}
-		}
-	}
+	slices.SortFunc(topConcepts, func(a, b conceptEntry) int {
+		return b.count - a.count // descending by count
+	})
 	if len(topConcepts) > 10 {
 		topConcepts = topConcepts[:10]
 	}
diff --git a/internal/worker/handlers_auth.go b/internal/worker/handlers_auth.go
index 3fbaa6d8..f0ca38cb 100644
--- a/internal/worker/handlers_auth.go
+++ b/internal/worker/handlers_auth.go
@@ -9,11 +9,14 @@ import (
 	"encoding/base64"
 	"encoding/hex"
 	"encoding/json"
+	"errors"
 	"net/http"
+	"strings"
 	"time"
 
 	"github.com/go-chi/chi/v5"
 	"github.com/rs/zerolog/log"
+	"gorm.io/gorm"
 	"golang.org/x/crypto/bcrypt"
 )
 
@@ -98,6 +101,7 @@ func (s *Service) handleAuthLogin(w http.ResponseWriter, r *http.Request) {
 		Path:     "/",
 		MaxAge:   sessionMaxAge,
 		HttpOnly: true,
+		Secure:   r.TLS != nil,
 		SameSite: http.SameSiteStrictMode,
 	})
 
@@ -317,7 +321,11 @@ func (s *Service) handleRevokeToken(w http.ResponseWriter, r *http.Request) {
 
 	if err := tokenStore.Revoke(r.Context(), id); err != nil {
 		log.Error().Err(err).Str("token_id", id).Msg("auth: failed to revoke token")
-		http.Error(w, "not found", http.StatusNotFound)
+		if errors.Is(err, gorm.ErrRecordNotFound) {
+			http.Error(w, "not found", http.StatusNotFound)
+		} else {
+			http.Error(w, "internal error", http.StatusInternalServerError)
+		}
 		return
 	}
 
@@ -358,12 +366,8 @@ func isDuplicateKeyError(err error) bool {
 // containsDuplicateKey checks error message for duplicate key indicators.
 func containsDuplicateKey(msg string) bool {
 	for _, s := range []string{"duplicate key", "23505", "UNIQUE constraint"} {
-		if len(msg) >= len(s) {
-			for i := 0; i <= len(msg)-len(s); i++ {
-				if msg[i:i+len(s)] == s {
-					return true
-				}
-			}
+		if strings.Contains(msg, s) {
+			return true
 		}
 	}
 	return false
diff --git a/internal/worker/handlers_maintenance.go b/internal/worker/handlers_maintenance.go
index e3e0b84e..da28f7f3 100644
--- a/internal/worker/handlers_maintenance.go
+++ b/internal/worker/handlers_maintenance.go
@@ -2,6 +2,7 @@
 package worker
 
 import (
+	"context"
 	"encoding/json"
 	"net/http"
 
@@ -85,7 +86,9 @@ func (s *Service) handleRunMaintenance(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	s.maintenanceService.RunNow(r.Context())
+	// Use background context: the request context is cancelled after the
+	// response is sent, which would prematurely abort the background job.
+	s.maintenanceService.RunNow(context.Background())
 
 	writeJSON(w, map[string]any{
 		"status":  "triggered",
diff --git a/internal/worker/handlers_sessions_rest.go b/internal/worker/handlers_sessions_rest.go
index b8467381..2613a255 100644
--- a/internal/worker/handlers_sessions_rest.go
+++ b/internal/worker/handlers_sessions_rest.go
@@ -10,6 +10,10 @@ import (
 	"github.com/thebtf/engram/internal/sessions"
 )
 
+const (
+	maxSessionsLimit = 200 // Server-side cap to prevent huge response payloads.
+)
+
 // handleListIndexedSessions godoc
 // @Summary List indexed sessions
 // @Description Returns indexed Claude Code sessions with optional project and workstation filters.
@@ -18,7 +22,7 @@ import (
 // @Security ApiKeyAuth
 // @Param project query string false "Filter by project ID"
 // @Param workstation query string false "Filter by workstation ID"
-// @Param limit query int false "Number of results (default 20)"
+// @Param limit query int false "Number of results (default 20, max 200)"
 // @Param offset query int false "Pagination offset"
 // @Success 200 {array} object
 // @Failure 500 {string} string "internal error"
@@ -32,7 +36,7 @@ func (s *Service) handleListIndexedSessions(w http.ResponseWriter, r *http.Reque
 	limit := 20
 	if val := r.URL.Query().Get("limit"); val != "" {
 		if parsed, err := strconv.Atoi(val); err == nil && parsed > 0 {
-			limit = parsed
+			limit = min(parsed, maxSessionsLimit)
 		}
 	}
 	offset := 0
@@ -52,7 +56,7 @@ func (s *Service) handleListIndexedSessions(w http.ResponseWriter, r *http.Reque
 	list, err := s.sessionIdxStore.ListSessions(r.Context(), opts)
 	if err != nil {
 		log.Error().Err(err).Msg("list indexed sessions failed")
-		http.Error(w, "list sessions: "+err.Error(), http.StatusInternalServerError)
+		http.Error(w, "internal error", http.StatusInternalServerError)
 		return
 	}
 
@@ -117,14 +121,14 @@ func (s *Service) handleSearchIndexedSessions(w http.ResponseWriter, r *http.Req
 	limit := 10
 	if val := r.URL.Query().Get("limit"); val != "" {
 		if parsed, err := strconv.Atoi(val); err == nil && parsed > 0 {
-			limit = parsed
+			limit = min(parsed, maxSessionsLimit)
 		}
 	}
 
 	results, err := s.sessionIdxStore.SearchSessions(r.Context(), query, limit)
 	if err != nil {
 		log.Error().Err(err).Str("query", query).Msg("search indexed sessions failed")
-		http.Error(w, "search sessions: "+err.Error(), http.StatusInternalServerError)
+		http.Error(w, "internal error", http.StatusInternalServerError)
 		return
 	}
 
diff --git a/internal/worker/middleware.go b/internal/worker/middleware.go
index c330b937..ec321e89 100644
--- a/internal/worker/middleware.go
+++ b/internal/worker/middleware.go
@@ -276,19 +276,26 @@ func (ta *TokenAuth) authenticateClientToken(w http.ResponseWriter, r *http.Requ
 	}
 	prefix := rawToken[4:12]
 
-	token, err := store.FindByPrefix(r.Context(), prefix)
+	candidates, err := store.FindByPrefix(r.Context(), prefix)
 	if err != nil {
 		log.Error().Err(err).Msg("auth: token store lookup failed")
 		http.Error(w, "internal error", http.StatusInternalServerError)
 		return true
 	}
-	if token == nil {
+	if len(candidates) == 0 {
 		http.Error(w, "unauthorized", http.StatusUnauthorized)
 		return true
 	}
 
-	// Verify bcrypt hash
-	if err := bcrypt.CompareHashAndPassword([]byte(token.TokenHash), []byte(rawToken)); err != nil {
+	// Find the matching token by bcrypt comparison (handles prefix collisions).
+	var token *gormdb.APIToken
+	for i := range candidates {
+		if bcrypt.CompareHashAndPassword([]byte(candidates[i].TokenHash), []byte(rawToken)) == nil {
+			token = &candidates[i]
+			break
+		}
+	}
+	if token == nil {
 		http.Error(w, "unauthorized", http.StatusUnauthorized)
 		return true
 	}
diff --git a/internal/worker/token_stats.go b/internal/worker/token_stats.go
index 772ac6df..fc1d29e6 100644
--- a/internal/worker/token_stats.go
+++ b/internal/worker/token_stats.go
@@ -35,26 +35,27 @@ func (s *Service) startTokenStatsFlusher(ctx context.Context) {
 		for {
 			select {
 			case <-ctx.Done():
-				// Final flush on shutdown
-				s.flushTokenStats(pending)
+				// Final flush on shutdown: use a bounded timeout so the goroutine
+				// does not block indefinitely after cancellation.
+				flushCtx, cancel := context.WithTimeout(context.Background(), 3*time.Second)
+				s.flushTokenStats(flushCtx, pending)
+				cancel()
 				return
 
 			case tokenID := <-ch:
 				pending[tokenID]++
 
 			case <-ticker.C:
-				s.flushTokenStats(pending)
-				// Reset the map
-				for k := range pending {
-					delete(pending, k)
-				}
+				s.flushTokenStats(ctx, pending)
+				// Reset map by allocating a fresh one (cheaper than deleting in a loop).
+				pending = make(map[string]int)
 			}
 		}
 	}()
 }
 
 // flushTokenStats writes accumulated token usage counts to the database.
-func (s *Service) flushTokenStats(counts map[string]int) {
+func (s *Service) flushTokenStats(ctx context.Context, counts map[string]int) {
 	if len(counts) == 0 {
 		return
 	}
@@ -67,7 +68,7 @@ func (s *Service) flushTokenStats(counts map[string]int) {
 		return
 	}
 
-	if err := store.BatchIncrementStats(context.Background(), counts); err != nil {
+	if err := store.BatchIncrementStats(ctx, counts); err != nil {
 		log.Warn().Err(err).Int("tokens", len(counts)).Msg("auth: failed to flush token stats")
 	}
 }
diff --git a/ui/src/components/layout/AppSidebar.vue b/ui/src/components/layout/AppSidebar.vue
index 77dd54cf..746c32a6 100644
--- a/ui/src/components/layout/AppSidebar.vue
+++ b/ui/src/components/layout/AppSidebar.vue
@@ -43,12 +43,15 @@ function isActive(item: NavItem): boolean {
   if (item.path === '/') {
     return route.path === '/'
   }
-  return route.path.startsWith(item.path)
+  return route.path === item.path || route.path.startsWith(item.path + '/')
 }
 
 async function handleLogout() {
-  await logout()
-  router.push({ name: 'login' })
+  try {
+    await logout()
+  } finally {
+    router.push({ name: 'login' })
+  }
 }
 </script>
 
diff --git a/ui/src/components/layout/ConfirmDialog.vue b/ui/src/components/layout/ConfirmDialog.vue
index 279e06f6..d4019687 100644
--- a/ui/src/components/layout/ConfirmDialog.vue
+++ b/ui/src/components/layout/ConfirmDialog.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-defineProps<{
+import { ref, watch } from 'vue'
+
+const props = defineProps<{
   show: boolean
   title: string
   message: string
@@ -12,6 +14,22 @@ const emit = defineEmits<{
   confirm: []
   cancel: []
 }>()
+
+const cancelButtonRef = ref<HTMLButtonElement | null>(null)
+
+// Focus the cancel button when the dialog opens for keyboard accessibility.
+watch(() => props.show, (visible) => {
+  if (visible) {
+    // Defer to next tick so the DOM is rendered.
+    setTimeout(() => cancelButtonRef.value?.focus(), 0)
+  }
+})
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    emit('cancel')
+  }
+}
 </script>
 
 <template>
@@ -22,12 +40,19 @@ const emit = defineEmits<{
         <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" @click="emit('cancel')" />
 
         <!-- Dialog -->
-        <div class="relative glass border border-white/10 rounded-xl p-6 max-w-sm w-full shadow-2xl">
-          <h3 class="text-lg font-semibold text-white mb-2">{{ title }}</h3>
+        <div
+          role="dialog"
+          aria-modal="true"
+          :aria-labelledby="'confirm-dialog-title'"
+          class="relative glass border border-white/10 rounded-xl p-6 max-w-sm w-full shadow-2xl"
+          @keydown="handleKeydown"
+        >
+          <h3 id="confirm-dialog-title" class="text-lg font-semibold text-white mb-2">{{ title }}</h3>
           <p class="text-sm text-slate-400 mb-6">{{ message }}</p>
 
           <div class="flex items-center justify-end gap-3">
             <button
+              ref="cancelButtonRef"
               class="px-4 py-2 rounded-lg text-sm text-slate-400 hover:text-white hover:bg-slate-800/50 transition-colors"
               @click="emit('cancel')"
             >
diff --git a/ui/src/components/observation/ObservationEditor.vue b/ui/src/components/observation/ObservationEditor.vue
index 0ef71c52..8e08da4d 100644
--- a/ui/src/components/observation/ObservationEditor.vue
+++ b/ui/src/components/observation/ObservationEditor.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, watch, computed } from 'vue'
-import type { Observation, ObservationType, ObservationScope } from '@/types'
-import { TYPE_CONFIG, OBSERVATION_TYPES } from '@/types/observation'
+import type { Observation, ObservationScope } from '@/types'
 
 const props = defineProps<{
   observation: Observation
@@ -44,7 +43,7 @@ const hasChanges = computed(() => {
     subtitle.value !== (props.observation.subtitle || '') ||
     narrative.value !== (props.observation.narrative || '') ||
     scope.value !== (props.observation.scope || 'project') ||
-    JSON.stringify(concepts.value.sort()) !== JSON.stringify([...(props.observation.concepts || [])].sort())
+    JSON.stringify([...concepts.value].sort()) !== JSON.stringify([...(props.observation.concepts || [])].sort())
 })
 
 function handleSave() {
@@ -53,7 +52,7 @@ function handleSave() {
   if (subtitle.value !== (props.observation.subtitle || '')) updates.subtitle = subtitle.value
   if (narrative.value !== (props.observation.narrative || '')) updates.narrative = narrative.value
   if (scope.value !== (props.observation.scope || 'project')) updates.scope = scope.value
-  if (JSON.stringify(concepts.value.sort()) !== JSON.stringify([...(props.observation.concepts || [])].sort())) {
+  if (JSON.stringify([...concepts.value].sort()) !== JSON.stringify([...(props.observation.concepts || [])].sort())) {
     updates.concepts = concepts.value
   }
   emit('save', updates)
diff --git a/ui/src/components/observation/TagEditor.vue b/ui/src/components/observation/TagEditor.vue
new file mode 100644
index 00000000..8087d479
--- /dev/null
+++ b/ui/src/components/observation/TagEditor.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { CONCEPT_CONFIG, type ConceptType } from '@/types/observation'
+import { updateObservationTags } from '@/utils/api'
+import Badge from '@/components/Badge.vue'
+
+const props = defineProps<{
+  observationId: number
+  concepts: string[]
+}>()
+
+const emit = defineEmits<{
+  update: [concepts: string[]]
+}>()
+
+const newTag = ref('')
+const updating = ref(false)
+const error = ref<string | null>(null)
+
+function getConceptConfig(concept: string) {
+  return CONCEPT_CONFIG[concept as ConceptType] || { icon: 'fa-tag', colorClass: 'text-slate-300', bgClass: 'bg-slate-500/20', borderClass: 'border-slate-500/40' }
+}
+
+// Pre-compute concept configs to avoid repeated calls per render cycle.
+const conceptConfigs = computed(() =>
+  Object.fromEntries(props.concepts.map(c => [c, getConceptConfig(c)]))
+)
+
+async function addTag() {
+  const tag = newTag.value.trim().toLowerCase()
+  if (!tag || props.concepts.includes(tag)) {
+    newTag.value = ''
+    return
+  }
+
+  updating.value = true
+  error.value = null
+
+  try {
+    const result = await updateObservationTags(props.observationId, 'add', tag)
+    emit('update', result.concepts)
+    newTag.value = ''
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Failed to add tag'
+  } finally {
+    updating.value = false
+  }
+}
+
+async function removeTag(tag: string) {
+  updating.value = true
+  error.value = null
+
+  try {
+    const result = await updateObservationTags(props.observationId, 'remove', tag)
+    emit('update', result.concepts)
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Failed to remove tag'
+  } finally {
+    updating.value = false
+  }
+}
+</script>
+
+<template>
+  <div>
+    <h2 class="text-xs text-slate-500 uppercase tracking-wide mb-3">Concepts</h2>
+
+    <!-- Existing tags -->
+    <div class="flex flex-wrap gap-1.5 mb-3">
+      <span
+        v-for="concept in concepts"
+        :key="concept"
+        class="inline-flex items-center gap-1 group"
+      >
+        <Badge
+          :icon="conceptConfigs[concept].icon"
+          :color-class="conceptConfigs[concept].colorClass"
+          :bg-class="conceptConfigs[concept].bgClass"
+          :border-class="conceptConfigs[concept].borderClass"
+        >
+          {{ concept }}
+          <button
+            @click="removeTag(concept)"
+            :disabled="updating"
+            class="ml-0.5 opacity-0 group-hover:opacity-100 hover:text-red-400 transition-all"
+            title="Remove"
+          >
+            <i class="fas fa-times text-[8px]" />
+          </button>
+        </Badge>
+      </span>
+      <span v-if="concepts.length === 0" class="text-xs text-slate-600">No concepts</span>
+    </div>
+
+    <!-- Add tag input -->
+    <div class="flex items-center gap-2">
+      <input
+        v-model="newTag"
+        type="text"
+        placeholder="Add concept..."
+        :disabled="updating"
+        class="px-2 py-1 rounded-lg bg-slate-900/50 border border-slate-700/50 text-xs text-white placeholder-slate-600 focus:outline-none focus:ring-1 focus:ring-claude-500/50 w-40"
+        @keydown.enter="addTag"
+      />
+      <button
+        @click="addTag"
+        :disabled="updating || !newTag.trim()"
+        class="px-2 py-1 rounded-lg text-xs bg-slate-800/50 border border-slate-700/50 text-slate-400 hover:text-white hover:border-claude-500/50 transition-colors disabled:opacity-50"
+      >
+        <i class="fas fa-plus mr-0.5" />
+        Add
+      </button>
+    </div>
+
+    <div v-if="error" class="mt-2 text-xs text-red-400">{{ error }}</div>
+  </div>
+</template>
diff --git a/ui/src/components/search/SearchResults.vue b/ui/src/components/search/SearchResults.vue
index 85cc7139..d90fe545 100644
--- a/ui/src/components/search/SearchResults.vue
+++ b/ui/src/components/search/SearchResults.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useRouter } from 'vue-router'
 import type { SearchResultObservation, ObservationType } from '@/types'
 import { TYPE_CONFIG } from '@/types/observation'
 import { CONCEPT_CONFIG, type ConceptType } from '@/types/observation'
@@ -15,12 +14,6 @@ defineProps<{
   intent?: string
 }>()
 
-const router = useRouter()
-
-function navigateToDetail(id: number) {
-  router.push({ name: 'observation-detail', params: { id } })
-}
-
 function getTypeConfig(type: string) {
   return TYPE_CONFIG[type as ObservationType] || TYPE_CONFIG.change
 }
@@ -72,11 +65,11 @@ function formatSimilarity(score?: number): string {
     </p>
 
     <!-- Result cards -->
-    <div
+    <RouterLink
       v-for="obs in results"
       :key="obs.id"
-      @click="navigateToDetail(obs.id)"
-      class="group p-4 rounded-xl border-2 border-slate-700/50 bg-gradient-to-br from-slate-800/50 to-slate-900/50 hover:border-claude-500/30 cursor-pointer transition-all"
+      :to="{ name: 'observation-detail', params: { id: obs.id } }"
+      class="group block p-4 rounded-xl border-2 border-slate-700/50 bg-gradient-to-br from-slate-800/50 to-slate-900/50 hover:border-claude-500/30 cursor-pointer transition-all"
     >
       <div class="flex items-start gap-3">
         <!-- Type icon -->
@@ -158,6 +151,6 @@ function formatSimilarity(score?: number): string {
           </div>
         </div>
       </div>
-    </div>
+    </RouterLink>
   </div>
 </template>
diff --git a/ui/src/composables/index.ts b/ui/src/composables/index.ts
index a7d6af64..4d043fe8 100644
--- a/ui/src/composables/index.ts
+++ b/ui/src/composables/index.ts
@@ -8,3 +8,8 @@ export { useGraphMetrics } from './useGraphMetrics'
 export { useObservation } from './useObservation'
 export { usePagination } from './usePagination'
 export { useSearch } from './useSearch'
+export { useVault } from './useVault'
+export { useTokens } from './useTokens'
+export { useLogs } from './useLogs'
+export { usePatterns } from './usePatterns'
+export { useSessions } from './useSessions'
diff --git a/ui/src/composables/useAuth.ts b/ui/src/composables/useAuth.ts
index 218ba2ec..0c86a24a 100644
--- a/ui/src/composables/useAuth.ts
+++ b/ui/src/composables/useAuth.ts
@@ -8,7 +8,7 @@ export function useAuth() {
   async function checkAuth(): Promise<void> {
     loading.value = true
     try {
-      const res = await fetch('/api/auth/me')
+      const res = await fetch('/api/auth/me', { credentials: 'include' })
       authenticated.value = res.ok
     } catch {
       authenticated.value = false
@@ -18,18 +18,24 @@ export function useAuth() {
   }
 
   async function login(token: string): Promise<boolean> {
-    const res = await fetch('/api/auth/login', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ token }),
-    })
-    authenticated.value = res.ok
-    return res.ok
+    try {
+      const res = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ token }),
+        credentials: 'include',
+      })
+      authenticated.value = res.ok
+      return res.ok
+    } catch {
+      authenticated.value = false
+      return false
+    }
   }
 
   async function logout(): Promise<void> {
     try {
-      await fetch('/api/auth/logout', { method: 'POST' })
+      await fetch('/api/auth/logout', { method: 'POST', credentials: 'include' })
     } finally {
       authenticated.value = false
     }
diff --git a/ui/src/composables/useLogs.ts b/ui/src/composables/useLogs.ts
new file mode 100644
index 00000000..61fe4a61
--- /dev/null
+++ b/ui/src/composables/useLogs.ts
@@ -0,0 +1,168 @@
+import { ref, computed, onUnmounted } from 'vue'
+
+export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal'
+
+export interface LogEntry {
+  id: number
+  timestamp: string
+  level: LogLevel
+  message: string
+}
+
+const LOG_LEVELS: LogLevel[] = ['trace', 'debug', 'info', 'warn', 'error', 'fatal']
+const MAX_BUFFER = 1000
+
+let entryIdCounter = 0
+
+export function useLogs() {
+  const entries = ref<LogEntry[]>([])
+  const connected = ref(false)
+  const paused = ref(false)
+  const enabledLevels = ref<Set<LogLevel>>(new Set(LOG_LEVELS))
+  const searchText = ref('')
+
+  let eventSource: EventSource | null = null
+  let reconnectTimer: ReturnType<typeof setTimeout> | null = null
+  let allowAutoReconnect = true
+  // Buffer entries while paused
+  let pauseBuffer: LogEntry[] = []
+
+  const filteredEntries = computed(() => {
+    let items = entries.value.filter(e => enabledLevels.value.has(e.level))
+    if (searchText.value) {
+      const lower = searchText.value.toLowerCase()
+      items = items.filter(e => e.message.toLowerCase().includes(lower))
+    }
+    return items
+  })
+
+  function parseLogLine(line: string): LogEntry | null {
+    // Try to parse JSON log format
+    try {
+      const parsed = JSON.parse(line)
+      return {
+        id: ++entryIdCounter,
+        timestamp: parsed.time || parsed.timestamp || parsed.ts || new Date().toISOString(),
+        level: (parsed.level || parsed.lvl || 'info').toLowerCase() as LogLevel,
+        message: parsed.msg || parsed.message || line,
+      }
+    } catch {
+      // Fall back to plain text with level detection
+      const levelMatch = line.match(/\b(TRACE|DEBUG|INFO|WARN|ERROR|FATAL)\b/i)
+      const tsMatch = line.match(/^(\d{4}-\d{2}-\d{2}[T ]\d{2}:\d{2}:\d{2}[^\s]*)/)
+      return {
+        id: ++entryIdCounter,
+        timestamp: tsMatch?.[1] || new Date().toISOString(),
+        level: (levelMatch?.[1]?.toLowerCase() || 'info') as LogLevel,
+        message: line,
+      }
+    }
+  }
+
+  function addEntry(entry: LogEntry) {
+    if (paused.value) {
+      pauseBuffer.push(entry)
+      // Cap pause buffer too
+      if (pauseBuffer.length > MAX_BUFFER) {
+        pauseBuffer = pauseBuffer.slice(-MAX_BUFFER)
+      }
+      return
+    }
+
+    const updated = [...entries.value, entry]
+    entries.value = updated.length > MAX_BUFFER ? updated.slice(-MAX_BUFFER) : updated
+  }
+
+  function connect() {
+    if (eventSource) return
+    allowAutoReconnect = true
+
+    eventSource = new EventSource('/api/logs?follow=true')
+
+    eventSource.onopen = () => {
+      connected.value = true
+    }
+
+    eventSource.onmessage = (event) => {
+      const entry = parseLogLine(event.data)
+      if (entry) {
+        addEntry(entry)
+      }
+    }
+
+    eventSource.onerror = () => {
+      connected.value = false
+      eventSource?.close()
+      eventSource = null
+
+      // Reconnect after delay, only if not explicitly disconnected/unmounted.
+      if (allowAutoReconnect) {
+        reconnectTimer = setTimeout(() => {
+          reconnectTimer = null
+          if (allowAutoReconnect && !eventSource) connect()
+        }, 3000)
+      }
+    }
+  }
+
+  function disconnect() {
+    allowAutoReconnect = false
+    if (reconnectTimer !== null) {
+      clearTimeout(reconnectTimer)
+      reconnectTimer = null
+    }
+    if (eventSource) {
+      eventSource.close()
+      eventSource = null
+    }
+    connected.value = false
+  }
+
+  function togglePause() {
+    if (paused.value) {
+      // Resume: flush buffer
+      paused.value = false
+      if (pauseBuffer.length > 0) {
+        const updated = [...entries.value, ...pauseBuffer]
+        entries.value = updated.length > MAX_BUFFER ? updated.slice(-MAX_BUFFER) : updated
+        pauseBuffer = []
+      }
+    } else {
+      paused.value = true
+    }
+  }
+
+  function toggleLevel(level: LogLevel) {
+    const updated = new Set(enabledLevels.value)
+    if (updated.has(level)) {
+      updated.delete(level)
+    } else {
+      updated.add(level)
+    }
+    enabledLevels.value = updated
+  }
+
+  function clearEntries() {
+    entries.value = []
+    pauseBuffer = []
+  }
+
+  onUnmounted(() => {
+    disconnect()
+  })
+
+  return {
+    entries,
+    filteredEntries,
+    connected,
+    paused,
+    enabledLevels,
+    searchText,
+    connect,
+    disconnect,
+    togglePause,
+    toggleLevel,
+    clearEntries,
+    LOG_LEVELS,
+  }
+}
diff --git a/ui/src/composables/usePagination.ts b/ui/src/composables/usePagination.ts
index 22470b0d..da68fc8b 100644
--- a/ui/src/composables/usePagination.ts
+++ b/ui/src/composables/usePagination.ts
@@ -56,7 +56,9 @@ export function usePagination<T>(options: UsePaginationOptions<T>) {
   }
 
   function setOffset(newOffset: number) {
-    offset.value = newOffset
+    // Clamp to valid range: [0, max reachable offset].
+    const maxOffset = total.value > 0 ? Math.max(0, total.value - pageSize) : 0
+    offset.value = Math.min(Math.max(0, newOffset), maxOffset)
     fetchPage()
   }
 
diff --git a/ui/src/composables/usePatterns.ts b/ui/src/composables/usePatterns.ts
new file mode 100644
index 00000000..cf76047f
--- /dev/null
+++ b/ui/src/composables/usePatterns.ts
@@ -0,0 +1,88 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+import type { Pattern, PatternInsight } from '@/utils/api'
+import { fetchPatterns, fetchPatternInsight, deprecatePattern, deletePattern } from '@/utils/api'
+
+export function usePatterns() {
+  const patterns = ref<Pattern[]>([])
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  // Track loaded insights by pattern id
+  const insights = ref<Record<number, PatternInsight>>({})
+  const insightLoading = ref<Record<number, boolean>>({})
+
+  let abortController: AbortController | null = null
+
+  async function loadPatterns() {
+    abortController?.abort()
+    abortController = new AbortController()
+
+    loading.value = true
+    error.value = null
+
+    try {
+      patterns.value = await fetchPatterns(abortController.signal) || []
+    } catch (err) {
+      if (err instanceof Error && err.name === 'AbortError') return
+      error.value = err instanceof Error ? err.message : 'Failed to load patterns'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function loadInsight(id: number) {
+    if (insights.value[id]) return // Already loaded
+
+    insightLoading.value = { ...insightLoading.value, [id]: true }
+    try {
+      const insight = await fetchPatternInsight(id)
+      insights.value = { ...insights.value, [id]: insight }
+    } catch (err) {
+      error.value = err instanceof Error ? err.message : 'Failed to load insight'
+    } finally {
+      insightLoading.value = { ...insightLoading.value, [id]: false }
+    }
+  }
+
+  async function deprecate(id: number) {
+    try {
+      await deprecatePattern(id)
+      patterns.value = patterns.value.filter(p => p.id !== id)
+    } catch (err) {
+      error.value = err instanceof Error ? err.message : 'Failed to deprecate pattern'
+      throw err
+    }
+  }
+
+  async function remove(id: number) {
+    try {
+      await deletePattern(id)
+      patterns.value = patterns.value.filter(p => p.id !== id)
+      const { [id]: _, ...rest } = insights.value
+      insights.value = rest
+    } catch (err) {
+      error.value = err instanceof Error ? err.message : 'Failed to delete pattern'
+      throw err
+    }
+  }
+
+  onMounted(() => {
+    loadPatterns()
+  })
+
+  onUnmounted(() => {
+    abortController?.abort()
+  })
+
+  return {
+    patterns,
+    loading,
+    error,
+    insights,
+    insightLoading,
+    loadPatterns,
+    loadInsight,
+    deprecate,
+    remove,
+  }
+}
diff --git a/ui/src/composables/useSessions.ts b/ui/src/composables/useSessions.ts
new file mode 100644
index 00000000..f6dfea05
--- /dev/null
+++ b/ui/src/composables/useSessions.ts
@@ -0,0 +1,95 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+import type { IndexedSession } from '@/utils/api'
+import { fetchIndexedSessions, searchIndexedSessions, fetchProjects } from '@/utils/api'
+
+export function useSessions() {
+  const sessions = ref<IndexedSession[]>([])
+  const projects = ref<string[]>([])
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+  const searchQuery = ref('')
+  const filterProject = ref('')
+  const filterFrom = ref('')
+  const filterTo = ref('')
+
+  let abortController: AbortController | null = null
+
+  async function loadSessions() {
+    abortController?.abort()
+    abortController = new AbortController()
+
+    loading.value = true
+    error.value = null
+
+    try {
+      sessions.value = await fetchIndexedSessions(
+        {
+          project: filterProject.value || undefined,
+          from: filterFrom.value || undefined,
+          to: filterTo.value || undefined,
+        },
+        abortController.signal,
+      ) || []
+    } catch (err) {
+      if (err instanceof Error && err.name === 'AbortError') return
+      error.value = err instanceof Error ? err.message : 'Failed to load sessions'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function search() {
+    if (!searchQuery.value.trim()) {
+      await loadSessions()
+      return
+    }
+
+    abortController?.abort()
+    abortController = new AbortController()
+
+    loading.value = true
+    error.value = null
+
+    try {
+      sessions.value = await searchIndexedSessions(
+        searchQuery.value.trim(),
+        abortController.signal,
+      ) || []
+    } catch (err) {
+      if (err instanceof Error && err.name === 'AbortError') return
+      error.value = err instanceof Error ? err.message : 'Failed to search sessions'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function loadProjects() {
+    try {
+      projects.value = await fetchProjects()
+    } catch {
+      // Non-critical
+    }
+  }
+
+  onMounted(() => {
+    loadSessions()
+    loadProjects()
+  })
+
+  onUnmounted(() => {
+    abortController?.abort()
+  })
+
+  return {
+    sessions,
+    projects,
+    loading,
+    error,
+    searchQuery,
+    filterProject,
+    filterFrom,
+    filterTo,
+    loadSessions,
+    search,
+  }
+}
diff --git a/ui/src/composables/useTokens.ts b/ui/src/composables/useTokens.ts
new file mode 100644
index 00000000..33b2a8aa
--- /dev/null
+++ b/ui/src/composables/useTokens.ts
@@ -0,0 +1,69 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+import type { ApiToken, CreateTokenResponse } from '@/utils/api'
+import { fetchTokens, createToken, revokeToken } from '@/utils/api'
+
+export function useTokens() {
+  const tokens = ref<ApiToken[]>([])
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  let abortController: AbortController | null = null
+
+  async function loadTokens() {
+    abortController?.abort()
+    abortController = new AbortController()
+
+    loading.value = true
+    error.value = null
+
+    try {
+      tokens.value = await fetchTokens(abortController.signal) || []
+    } catch (err) {
+      if (err instanceof Error && err.name === 'AbortError') return
+      error.value = err instanceof Error ? err.message : 'Failed to load tokens'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function create(name: string, scope: string): Promise<CreateTokenResponse> {
+    error.value = null
+    try {
+      const result = await createToken({ name, scope }, abortController?.signal)
+      await loadTokens()
+      return result
+    } catch (err) {
+      if (err instanceof Error && err.name === 'AbortError') throw err
+      error.value = err instanceof Error ? err.message : 'Failed to create token'
+      throw err
+    }
+  }
+
+  async function revoke(id: string) {
+    error.value = null
+    try {
+      await revokeToken(id)
+      tokens.value = tokens.value.filter(t => t.id !== id)
+    } catch (err) {
+      error.value = err instanceof Error ? err.message : 'Failed to revoke token'
+      throw err
+    }
+  }
+
+  onMounted(() => {
+    loadTokens()
+  })
+
+  onUnmounted(() => {
+    abortController?.abort()
+  })
+
+  return {
+    tokens,
+    loading,
+    error,
+    loadTokens,
+    create,
+    revoke,
+  }
+}
diff --git a/ui/src/composables/useVault.ts b/ui/src/composables/useVault.ts
new file mode 100644
index 00000000..42e8b048
--- /dev/null
+++ b/ui/src/composables/useVault.ts
@@ -0,0 +1,111 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+import type { VaultCredential, VaultStatus } from '@/utils/api'
+import { fetchCredentials, fetchCredential, deleteCredential, fetchVaultStatus } from '@/utils/api'
+
+export function useVault() {
+  const credentials = ref<VaultCredential[]>([])
+  const vaultStatus = ref<VaultStatus | null>(null)
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  // Track revealed credentials: name -> { value, expiresAt }
+  const revealedValues = ref<Record<string, { value: string; expiresAt: number }>>({})
+  const revealTimers = new Map<string, ReturnType<typeof setTimeout>>()
+
+  let abortController: AbortController | null = null
+
+  async function loadCredentials() {
+    abortController?.abort()
+    abortController = new AbortController()
+
+    loading.value = true
+    error.value = null
+
+    try {
+      const [creds, status] = await Promise.all([
+        fetchCredentials(abortController.signal),
+        fetchVaultStatus(abortController.signal),
+      ])
+      credentials.value = creds || []
+      vaultStatus.value = status
+    } catch (err) {
+      if (err instanceof Error && err.name === 'AbortError') return
+      error.value = err instanceof Error ? err.message : 'Failed to load vault'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function revealCredential(name: string) {
+    try {
+      const result = await fetchCredential(name)
+      const expiresAt = Date.now() + 30000
+
+      revealedValues.value = {
+        ...revealedValues.value,
+        [name]: { value: result.value, expiresAt },
+      }
+
+      const existingTimer = revealTimers.get(name)
+      if (existingTimer) clearTimeout(existingTimer)
+
+      const timer = setTimeout(() => {
+        hideCredential(name)
+      }, 30000)
+      revealTimers.set(name, timer)
+    } catch (err) {
+      error.value = err instanceof Error ? err.message : 'Failed to reveal credential'
+    }
+  }
+
+  function hideCredential(name: string) {
+    const { [name]: _, ...rest } = revealedValues.value
+    revealedValues.value = rest
+    const timer = revealTimers.get(name)
+    if (timer) {
+      clearTimeout(timer)
+      revealTimers.delete(name)
+    }
+  }
+
+  async function removeCredential(name: string) {
+    try {
+      await deleteCredential(name)
+      hideCredential(name)
+      credentials.value = credentials.value.filter(c => c.name !== name)
+      if (vaultStatus.value) {
+        vaultStatus.value = {
+          ...vaultStatus.value,
+          credential_count: Math.max(0, vaultStatus.value.credential_count - 1),
+        }
+      }
+    } catch (err) {
+      error.value = err instanceof Error ? err.message : 'Failed to delete credential'
+      throw err
+    }
+  }
+
+  onMounted(() => {
+    loadCredentials()
+  })
+
+  onUnmounted(() => {
+    abortController?.abort()
+    for (const timer of revealTimers.values()) {
+      clearTimeout(timer)
+    }
+    revealTimers.clear()
+  })
+
+  return {
+    credentials,
+    vaultStatus,
+    loading,
+    error,
+    revealedValues,
+    loadCredentials,
+    revealCredential,
+    hideCredential,
+    removeCredential,
+  }
+}
diff --git a/ui/src/utils/api.ts b/ui/src/utils/api.ts
index bfc106a1..e04d9707 100644
--- a/ui/src/utils/api.ts
+++ b/ui/src/utils/api.ts
@@ -431,3 +431,247 @@ export async function searchDecisions(
 ): Promise<DecisionSearchResponse> {
   return postJson(`${API_BASE}/decisions/search`, params, { signal })
 }
+
+// DELETE helper (single attempt, no retry for mutations)
+async function deleteJson<T>(url: string, options: FetchOptions = {}): Promise<T> {
+  const { timeout = DEFAULT_TIMEOUT, signal } = options
+  const timeoutController = new AbortController()
+  const timeoutId = setTimeout(() => timeoutController.abort(), timeout)
+  const combinedSignal = signal
+    ? combineAbortSignals(signal, timeoutController.signal)
+    : timeoutController.signal
+
+  try {
+    const response = await fetch(url, {
+      method: 'DELETE',
+      signal: combinedSignal,
+    })
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+    }
+    const text = await response.text()
+    return text ? JSON.parse(text) : ({} as T)
+  } catch (err) {
+    if (err instanceof Error && err.name === 'AbortError') {
+      if (signal?.aborted) throw err
+      throw new Error('Request timed out')
+    }
+    throw err
+  } finally {
+    clearTimeout(timeoutId)
+  }
+}
+
+// ============================================================
+// Vault API
+// ============================================================
+
+export interface VaultCredential {
+  name: string
+  scope: string
+  created_at: string
+  updated_at?: string
+}
+
+export interface VaultStatus {
+  encrypted: boolean
+  key_fingerprint?: string
+  credential_count: number
+}
+
+export async function fetchVaultStatus(signal?: AbortSignal): Promise<VaultStatus> {
+  return fetchWithRetry<VaultStatus>(`${API_BASE}/vault/status`, { signal })
+}
+
+export async function fetchCredentials(signal?: AbortSignal): Promise<VaultCredential[]> {
+  return fetchWithRetry<VaultCredential[]>(`${API_BASE}/vault/credentials`, { signal })
+}
+
+export async function fetchCredential(name: string, signal?: AbortSignal): Promise<{ name: string; value: string }> {
+  return fetchWithRetry<{ name: string; value: string }>(`${API_BASE}/vault/credentials/${encodeURIComponent(name)}`, { signal })
+}
+
+export async function deleteCredential(name: string, signal?: AbortSignal): Promise<void> {
+  await deleteJson<Record<string, unknown>>(`${API_BASE}/vault/credentials/${encodeURIComponent(name)}`, { signal })
+}
+
+// ============================================================
+// Tokens API
+// ============================================================
+
+export interface ApiToken {
+  id: string
+  name: string
+  token_prefix: string
+  scope: string
+  created_at: string
+  last_used_at?: string
+  request_count: number
+  error_count?: number
+  revoked: boolean
+  revoked_at?: string
+}
+
+export interface CreateTokenResponse {
+  token: string
+  name: string
+  prefix: string
+}
+
+export async function fetchTokens(signal?: AbortSignal): Promise<ApiToken[]> {
+  const response = await fetchWithRetry<{ tokens: ApiToken[] }>(`${API_BASE}/auth/tokens`, { signal })
+  return response.tokens
+}
+
+export async function createToken(
+  params: { name: string; scope: string },
+  signal?: AbortSignal
+): Promise<CreateTokenResponse> {
+  return postJson<CreateTokenResponse>(`${API_BASE}/auth/tokens`, params, { signal })
+}
+
+export async function revokeToken(id: string, signal?: AbortSignal): Promise<void> {
+  await deleteJson<Record<string, unknown>>(`${API_BASE}/auth/tokens/${encodeURIComponent(id)}`, { signal })
+}
+
+// ============================================================
+// Analytics API
+// ============================================================
+
+export interface SearchMiss {
+  query: string
+  project?: string
+  frequency: number
+  last_seen: string
+}
+
+export async function fetchSearchMisses(signal?: AbortSignal): Promise<SearchMiss[]> {
+  return postJson<SearchMiss[]>(`${API_BASE}/analytics/search-misses`, {}, { signal })
+}
+
+export interface RetrievalStatsResponse {
+  total_requests: number
+  observations_served: number
+  search_requests: number
+  context_injections: number
+}
+
+export async function fetchRetrievalStats(project?: string, signal?: AbortSignal): Promise<RetrievalStatsResponse> {
+  const params = new URLSearchParams()
+  if (project) params.append('project', project)
+  const query = params.toString()
+  return fetchWithRetry<RetrievalStatsResponse>(`${API_BASE}/stats/retrieval${query ? '?' + query : ''}`, { signal })
+}
+
+// ============================================================
+// Patterns API
+// ============================================================
+
+export interface Pattern {
+  id: number
+  name: string
+  type: string
+  occurrences: number
+  confidence: number
+  created_at: string
+}
+
+export interface PatternInsight {
+  id: number
+  insight: string
+  examples?: string[]
+}
+
+export async function fetchPatterns(signal?: AbortSignal): Promise<Pattern[]> {
+  return fetchWithRetry<Pattern[]>(`${API_BASE}/patterns`, { signal })
+}
+
+export async function fetchPatternInsight(id: number, signal?: AbortSignal): Promise<PatternInsight> {
+  return fetchWithRetry<PatternInsight>(`${API_BASE}/patterns/${id}/insight`, { signal })
+}
+
+export async function deprecatePattern(id: number, signal?: AbortSignal): Promise<void> {
+  await postJson<Record<string, unknown>>(`${API_BASE}/patterns/${id}/deprecate`, {}, { signal })
+}
+
+export async function deletePattern(id: number, signal?: AbortSignal): Promise<void> {
+  await deleteJson<Record<string, unknown>>(`${API_BASE}/patterns/${id}`, { signal })
+}
+
+export async function mergePatterns(ids: number[], signal?: AbortSignal): Promise<void> {
+  await postJson<Record<string, unknown>>(`${API_BASE}/patterns/merge`, { ids }, { signal })
+}
+
+// ============================================================
+// Sessions Index API
+// ============================================================
+
+export interface IndexedSession {
+  id: string
+  workstation: string
+  project: string
+  date: string
+  message_count: number
+  created_at: string
+}
+
+export async function fetchIndexedSessions(
+  params?: { project?: string; from?: string; to?: string },
+  signal?: AbortSignal
+): Promise<IndexedSession[]> {
+  const searchParams = new URLSearchParams()
+  if (params?.project) searchParams.append('project', params.project)
+  if (params?.from) searchParams.append('from', params.from)
+  if (params?.to) searchParams.append('to', params.to)
+  const query = searchParams.toString()
+  return fetchWithRetry<IndexedSession[]>(`${API_BASE}/sessions-index${query ? '?' + query : ''}`, { signal })
+}
+
+export async function searchIndexedSessions(
+  query: string,
+  signal?: AbortSignal
+): Promise<IndexedSession[]> {
+  return fetchWithRetry<IndexedSession[]>(`${API_BASE}/sessions-index/search?query=${encodeURIComponent(query)}`, { signal })
+}
+
+// ============================================================
+// System / Maintenance API
+// ============================================================
+
+export async function triggerConsolidation(signal?: AbortSignal): Promise<{ message: string }> {
+  return postJson<{ message: string }>(`${API_BASE}/maintenance/consolidate`, {}, { signal })
+}
+
+export async function triggerMaintenance(signal?: AbortSignal): Promise<{ message: string }> {
+  return postJson<{ message: string }>(`${API_BASE}/maintenance/run`, {}, { signal })
+}
+
+export interface MaintenanceStats {
+  last_consolidation?: string
+  last_maintenance?: string
+  observations_consolidated?: number
+  stale_removed?: number
+}
+
+export async function fetchMaintenanceStats(signal?: AbortSignal): Promise<MaintenanceStats> {
+  return fetchWithRetry<MaintenanceStats>(`${API_BASE}/maintenance/stats`, { signal })
+}
+
+export async function checkForUpdate(signal?: AbortSignal): Promise<{
+  available: boolean
+  current_version: string
+  latest_version: string
+  release_notes?: string
+}> {
+  return fetchWithRetry(`${API_BASE}/update/check`, { signal })
+}
+
+// Observation tag management
+export async function updateObservationTags(
+  id: number,
+  action: 'add' | 'remove',
+  tag: string,
+  signal?: AbortSignal
+): Promise<{ concepts: string[] }> {
+  return postJson<{ concepts: string[] }>(`${API_BASE}/observations/${id}/tags`, { action, tags: [tag] }, { signal })
+}
diff --git a/ui/src/views/AnalyticsView.vue b/ui/src/views/AnalyticsView.vue
index 40505d97..1c4d20be 100644
--- a/ui/src/views/AnalyticsView.vue
+++ b/ui/src/views/AnalyticsView.vue
@@ -1,7 +1,263 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import {
+  fetchSearchAnalytics,
+  fetchRecentSearches,
+  fetchSearchMisses,
+  fetchRetrievalStats,
+  type SearchAnalytics,
+  type RecentQuery,
+  type SearchMiss,
+  type RetrievalStatsResponse,
+} from '@/utils/api'
+import { formatRelativeTime } from '@/utils/formatters'
+
+const analytics = ref<SearchAnalytics | null>(null)
+const recentQueries = ref<RecentQuery[]>([])
+const searchMisses = ref<SearchMiss[]>([])
+const retrievalStats = ref<RetrievalStatsResponse | null>(null)
+const loading = ref(false)
+const error = ref<string | null>(null)
+
+let abortController: AbortController | null = null
+
+async function loadAll() {
+  abortController?.abort()
+  abortController = new AbortController()
+
+  loading.value = true
+  error.value = null
+
+  try {
+    const [analyticsData, recent, misses, retrieval] = await Promise.all([
+      fetchSearchAnalytics(abortController.signal).catch(() => null),
+      fetchRecentSearches(20, abortController.signal).catch(() => []),
+      fetchSearchMisses(abortController.signal).catch(() => []),
+      fetchRetrievalStats(undefined, abortController.signal).catch(() => null),
+    ])
+    analytics.value = analyticsData
+    recentQueries.value = recent || []
+    searchMisses.value = misses || []
+    retrievalStats.value = retrieval
+  } catch (err) {
+    if (err instanceof Error && err.name === 'AbortError') return
+    error.value = err instanceof Error ? err.message : 'Failed to load analytics'
+  } finally {
+    loading.value = false
+  }
+}
+
+function barWidth(value: number, max: number): string {
+  if (max === 0) return '0%'
+  return `${Math.max(2, (value / max) * 100)}%`
+}
+
+onMounted(() => {
+  loadAll()
+})
+
+onUnmounted(() => {
+  abortController?.abort()
+})
+</script>
+
 <template>
-  <div class="text-slate-400 text-center mt-20">
-    <i class="fas fa-chart-line text-4xl mb-4 block" />
-    <h2 class="text-xl font-medium text-slate-300">Analytics</h2>
-    <p class="mt-2 text-sm">Usage analytics and trends. Coming in Phase 11.</p>
+  <div>
+    <!-- Header -->
+    <div class="flex items-center justify-between mb-6">
+      <div class="flex items-center gap-3">
+        <i class="fas fa-chart-line text-claude-400 text-xl" />
+        <h1 class="text-2xl font-bold text-white">Analytics</h1>
+      </div>
+      <button
+        @click="loadAll()"
+        :disabled="loading"
+        class="px-3 py-1.5 rounded-lg text-sm bg-slate-800/50 border border-slate-700/50 text-slate-300 hover:text-white hover:border-claude-500/50 transition-colors disabled:opacity-50"
+      >
+        <i :class="['fas fa-sync-alt mr-1.5', loading && 'fa-spin']" />
+        Refresh
+      </button>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="loading && !analytics" class="flex items-center justify-center py-20">
+      <i class="fas fa-circle-notch fa-spin text-claude-400 text-2xl" />
+    </div>
+
+    <!-- Error -->
+    <div v-else-if="error" class="text-center py-16">
+      <i class="fas fa-exclamation-triangle text-red-400 text-3xl mb-3 block" />
+      <p class="text-red-400 mb-2">{{ error }}</p>
+      <button @click="loadAll()" class="text-sm text-slate-400 hover:text-white transition-colors">
+        Try again
+      </button>
+    </div>
+
+    <template v-else>
+      <!-- Search Performance Stats -->
+      <div v-if="analytics" class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+        <div class="p-4 rounded-xl border-2 border-slate-700/50 bg-gradient-to-br from-slate-800/50 to-slate-900/50">
+          <span class="text-xs text-slate-500 block mb-1">Total Searches</span>
+          <span class="text-2xl font-bold text-white font-mono">{{ analytics.total_searches }}</span>
+        </div>
+        <div class="p-4 rounded-xl border-2 border-slate-700/50 bg-gradient-to-br from-slate-800/50 to-slate-900/50">
+          <span class="text-xs text-slate-500 block mb-1">Avg Latency</span>
+          <span class="text-2xl font-bold text-white font-mono">{{ (analytics.avg_latency_ms ?? 0).toFixed(1) }}<span class="text-sm text-slate-500">ms</span></span>
+        </div>
+        <div class="p-4 rounded-xl border-2 border-slate-700/50 bg-gradient-to-br from-slate-800/50 to-slate-900/50">
+          <span class="text-xs text-slate-500 block mb-1">Cache Hits</span>
+          <span class="text-2xl font-bold text-green-400 font-mono">{{ analytics.cache_hits }}</span>
+        </div>
+        <div class="p-4 rounded-xl border-2 border-slate-700/50 bg-gradient-to-br from-slate-800/50 to-slate-900/50">
+          <span class="text-xs text-slate-500 block mb-1">Errors</span>
+          <span :class="['text-2xl font-bold font-mono', analytics.search_errors > 0 ? 'text-red-400' : 'text-slate-400']">
+            {{ analytics.search_errors }}
+          </span>
+        </div>
+      </div>
+
+      <!-- Latency Breakdown -->
+      <div v-if="analytics" class="p-4 rounded-xl border-2 border-slate-700/50 bg-slate-800/30 mb-6">
+        <h2 class="text-xs text-slate-500 uppercase tracking-wide mb-3">Latency Breakdown</h2>
+        <div class="space-y-2">
+          <div class="flex items-center gap-3">
+            <span class="text-xs text-slate-400 w-24">Vector</span>
+            <div class="flex-1 bg-slate-900/50 rounded-full h-4 overflow-hidden">
+              <div
+                class="h-full bg-gradient-to-r from-blue-500 to-blue-400 rounded-full"
+                :style="{ width: barWidth(analytics.avg_vector_latency_ms ?? 0, (analytics.avg_latency_ms ?? 0) * 1.2) }"
+              />
+            </div>
+            <span class="text-xs font-mono text-slate-300 w-16 text-right">{{ (analytics.avg_vector_latency_ms ?? 0).toFixed(1) }}ms</span>
+          </div>
+          <div class="flex items-center gap-3">
+            <span class="text-xs text-slate-400 w-24">Filter</span>
+            <div class="flex-1 bg-slate-900/50 rounded-full h-4 overflow-hidden">
+              <div
+                class="h-full bg-gradient-to-r from-purple-500 to-purple-400 rounded-full"
+                :style="{ width: barWidth(analytics.avg_filter_latency_ms ?? 0, (analytics.avg_latency_ms ?? 0) * 1.2) }"
+              />
+            </div>
+            <span class="text-xs font-mono text-slate-300 w-16 text-right">{{ (analytics.avg_filter_latency_ms ?? 0).toFixed(1) }}ms</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Retrieval Stats -->
+      <div v-if="retrievalStats" class="p-4 rounded-xl border-2 border-slate-700/50 bg-slate-800/30 mb-6">
+        <h2 class="text-xs text-slate-500 uppercase tracking-wide mb-3">Retrieval Stats</h2>
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+          <div>
+            <span class="text-slate-600 text-xs block">Total Requests</span>
+            <span class="text-slate-300 font-mono">{{ retrievalStats.total_requests }}</span>
+          </div>
+          <div>
+            <span class="text-slate-600 text-xs block">Observations Served</span>
+            <span class="text-slate-300 font-mono">{{ retrievalStats.observations_served }}</span>
+          </div>
+          <div>
+            <span class="text-slate-600 text-xs block">Search Requests</span>
+            <span class="text-slate-300 font-mono">{{ retrievalStats.search_requests }}</span>
+          </div>
+          <div>
+            <span class="text-slate-600 text-xs block">Context Injections</span>
+            <span class="text-slate-300 font-mono">{{ retrievalStats.context_injections }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <!-- Search Misses -->
+        <div class="p-4 rounded-xl border-2 border-slate-700/50 bg-slate-800/30">
+          <h2 class="text-xs text-slate-500 uppercase tracking-wide mb-3">Search Misses</h2>
+          <div v-if="searchMisses.length === 0" class="text-xs text-slate-600 py-4 text-center">
+            No search misses recorded
+          </div>
+          <div v-else class="space-y-2 max-h-80 overflow-y-auto">
+            <div
+              v-for="(miss, idx) in searchMisses"
+              :key="idx"
+              class="flex items-center justify-between py-1.5 border-b border-slate-700/30 last:border-0"
+            >
+              <div class="flex-1 min-w-0">
+                <span class="text-xs text-slate-300 truncate block">{{ miss.query }}</span>
+                <span v-if="miss.project" class="text-[10px] text-slate-600">{{ miss.project }}</span>
+              </div>
+              <div class="flex items-center gap-3 flex-shrink-0">
+                <span class="text-[10px] text-slate-500">{{ miss.frequency }}x</span>
+                <span class="text-[10px] text-slate-600">{{ formatRelativeTime(miss.last_seen) }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Recent Queries -->
+        <div class="p-4 rounded-xl border-2 border-slate-700/50 bg-slate-800/30">
+          <h2 class="text-xs text-slate-500 uppercase tracking-wide mb-3">Recent Queries</h2>
+          <div v-if="recentQueries.length === 0" class="text-xs text-slate-600 py-4 text-center">
+            No recent queries
+          </div>
+          <div v-else class="space-y-2 max-h-80 overflow-y-auto">
+            <div
+              v-for="(q, idx) in recentQueries"
+              :key="idx"
+              class="flex items-center justify-between py-1.5 border-b border-slate-700/30 last:border-0"
+            >
+              <div class="flex-1 min-w-0">
+                <span class="text-xs text-slate-300 truncate block">{{ q.query }}</span>
+                <div class="flex items-center gap-2">
+                  <span v-if="q.project" class="text-[10px] text-slate-600">{{ q.project }}</span>
+                  <span v-if="q.type" class="text-[10px] text-slate-600">{{ q.type }}</span>
+                </div>
+              </div>
+              <div class="flex items-center gap-3 flex-shrink-0">
+                <span class="text-[10px] text-slate-500">{{ q.count }}x</span>
+                <span class="text-[10px] text-slate-600">{{ formatRelativeTime(q.last_used) }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Search Type Distribution -->
+      <div v-if="analytics" class="mt-6 p-4 rounded-xl border-2 border-slate-700/50 bg-slate-800/30">
+        <h2 class="text-xs text-slate-500 uppercase tracking-wide mb-3">Search Type Distribution</h2>
+        <div class="space-y-2">
+          <div class="flex items-center gap-3">
+            <span class="text-xs text-slate-400 w-28">Vector Searches</span>
+            <div class="flex-1 bg-slate-900/50 rounded-full h-5 overflow-hidden">
+              <div
+                class="h-full bg-gradient-to-r from-cyan-500 to-cyan-400 rounded-full flex items-center justify-end pr-2"
+                :style="{ width: barWidth(analytics.vector_searches, analytics.total_searches) }"
+              >
+                <span class="text-[10px] font-mono text-white">{{ analytics.vector_searches }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="flex items-center gap-3">
+            <span class="text-xs text-slate-400 w-28">Filter Searches</span>
+            <div class="flex-1 bg-slate-900/50 rounded-full h-5 overflow-hidden">
+              <div
+                class="h-full bg-gradient-to-r from-amber-500 to-amber-400 rounded-full flex items-center justify-end pr-2"
+                :style="{ width: barWidth(analytics.filter_searches, analytics.total_searches) }"
+              >
+                <span class="text-[10px] font-mono text-white">{{ analytics.filter_searches }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="flex items-center gap-3">
+            <span class="text-xs text-slate-400 w-28">Coalesced</span>
+            <div class="flex-1 bg-slate-900/50 rounded-full h-5 overflow-hidden">
+              <div
+                class="h-full bg-gradient-to-r from-green-500 to-green-400 rounded-full flex items-center justify-end pr-2"
+                :style="{ width: barWidth(analytics.coalesced_requests, analytics.total_searches) }"
+              >
+                <span class="text-[10px] font-mono text-white">{{ analytics.coalesced_requests }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
   </div>
 </template>
diff --git a/ui/src/views/GraphView.vue b/ui/src/views/GraphView.vue
index 997a4828..6c420116 100644
--- a/ui/src/views/GraphView.vue
+++ b/ui/src/views/GraphView.vue
@@ -1,7 +1,260 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import { Network } from 'vis-network'
+import { DataSet } from 'vis-data'
+import { TYPE_CONFIG } from '@/types/observation'
+import type { ObservationType } from '@/types'
+import { fetchObservationGraph, fetchGraphStats, fetchProjects } from '@/utils/api'
+import type { GraphStats, RelationGraph } from '@/types'
+import EmptyState from '@/components/layout/EmptyState.vue'
+
+const router = useRouter()
+
+const graphContainer = ref<HTMLElement | null>(null)
+const graphStats = ref<GraphStats | null>(null)
+const loading = ref(false)
+const error = ref<string | null>(null)
+const observationIdInput = ref('')
+const projects = ref<string[]>([])
+
+let network: Network | null = null
+
+// Type-based node colors
+const TYPE_COLORS: Record<string, { background: string; border: string }> = {
+  bugfix: { background: '#ef4444', border: '#dc2626' },
+  feature: { background: '#a855f7', border: '#9333ea' },
+  refactor: { background: '#3b82f6', border: '#2563eb' },
+  change: { background: '#64748b', border: '#475569' },
+  discovery: { background: '#06b6d4', border: '#0891b2' },
+  decision: { background: '#eab308', border: '#ca8a04' },
+}
+
+async function loadGraphStats() {
+  loading.value = true
+  error.value = null
+  try {
+    graphStats.value = await fetchGraphStats()
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Failed to load graph stats'
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadGraph(observationId: number) {
+  loading.value = true
+  error.value = null
+
+  try {
+    const graph: RelationGraph = await fetchObservationGraph(observationId, 2)
+    await nextTick()
+    renderGraph(graph, observationId)
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Failed to load graph'
+  } finally {
+    loading.value = false
+  }
+}
+
+function renderGraph(graph: RelationGraph, centerId: number) {
+  if (!graphContainer.value) return
+
+  // Collect unique nodes from relations
+  const nodeMap = new Map<number, { id: number; label: string; type: string }>()
+  for (const r of graph.relations) {
+    if (!nodeMap.has(r.relation.source_id)) {
+      nodeMap.set(r.relation.source_id, {
+        id: r.relation.source_id,
+        label: r.source_title || `#${r.relation.source_id}`,
+        type: r.source_type,
+      })
+    }
+    if (!nodeMap.has(r.relation.target_id)) {
+      nodeMap.set(r.relation.target_id, {
+        id: r.relation.target_id,
+        label: r.target_title || `#${r.relation.target_id}`,
+        type: r.target_type,
+      })
+    }
+  }
+
+  // Ensure center node exists
+  if (!nodeMap.has(centerId)) {
+    nodeMap.set(centerId, { id: centerId, label: `#${centerId}`, type: 'change' })
+  }
+
+  const nodes = new DataSet(
+    Array.from(nodeMap.values()).map(n => ({
+      id: n.id,
+      label: n.label.length > 30 ? n.label.slice(0, 27) + '...' : n.label,
+      title: n.label,
+      color: {
+        background: TYPE_COLORS[n.type]?.background || '#64748b',
+        border: TYPE_COLORS[n.type]?.border || '#475569',
+        highlight: {
+          background: '#d4a0ff',
+          border: '#a855f7',
+        },
+      },
+      borderWidth: n.id === centerId ? 3 : 1,
+      size: n.id === centerId ? 30 : 20,
+      font: { color: '#e2e8f0', size: 11 },
+    }))
+  )
+
+  const edges = new DataSet(
+    graph.relations.map((r, i) => ({
+      id: i,
+      from: r.relation.source_id,
+      to: r.relation.target_id,
+      label: r.relation.relation_type.replace(/_/g, ' '),
+      arrows: 'to',
+      color: { color: '#475569', highlight: '#a855f7' },
+      font: { color: '#64748b', size: 9, strokeWidth: 0 },
+      width: Math.max(1, r.relation.confidence * 3),
+    }))
+  )
+
+  // Destroy existing network
+  if (network) {
+    network.destroy()
+    network = null
+  }
+
+  network = new Network(graphContainer.value, { nodes, edges }, {
+    physics: {
+      stabilization: { iterations: 100 },
+      barnesHut: { gravitationalConstant: -3000, springLength: 150 },
+    },
+    interaction: {
+      hover: true,
+      tooltipDelay: 200,
+    },
+    nodes: {
+      shape: 'dot',
+    },
+    edges: {
+      smooth: { type: 'continuous' },
+    },
+  })
+
+  // Click handler: navigate to observation detail
+  network.on('click', (params) => {
+    if (params.nodes.length > 0) {
+      const nodeId = params.nodes[0]
+      router.push({ name: 'observation-detail', params: { id: nodeId } })
+    }
+  })
+}
+
+function handleExplore() {
+  const id = parseInt(observationIdInput.value, 10)
+  if (isNaN(id) || id <= 0) return
+  loadGraph(id)
+}
+
+async function loadProjects() {
+  try {
+    projects.value = await fetchProjects()
+  } catch {
+    // Non-critical
+  }
+}
+
+onMounted(() => {
+  loadGraphStats()
+  loadProjects()
+})
+
+onUnmounted(() => {
+  if (network) {
+    network.destroy()
+    network = null
+  }
+})
+</script>
+
 <template>
-  <div class="text-slate-400 text-center mt-20">
-    <i class="fas fa-diagram-project text-4xl mb-4 block" />
-    <h2 class="text-xl font-medium text-slate-300">Knowledge Graph</h2>
-    <p class="mt-2 text-sm">Interactive graph visualization. Coming in Phase 8.</p>
+  <div class="flex flex-col h-full">
+    <!-- Header -->
+    <div class="flex items-center justify-between mb-4">
+      <div class="flex items-center gap-3">
+        <i class="fas fa-diagram-project text-claude-400 text-xl" />
+        <h1 class="text-2xl font-bold text-white">Knowledge Graph</h1>
+      </div>
+
+      <!-- Observation ID input -->
+      <div class="flex items-center gap-2">
+        <input
+          v-model="observationIdInput"
+          type="number"
+          placeholder="Observation ID"
+          class="px-3 py-1.5 rounded-lg bg-slate-800/50 border border-slate-700/50 text-sm text-white placeholder-slate-600 focus:outline-none focus:ring-1 focus:ring-claude-500/50 w-36"
+          @keydown.enter="handleExplore"
+        />
+        <button
+          @click="handleExplore"
+          :disabled="loading || !observationIdInput"
+          class="px-3 py-1.5 rounded-lg text-sm bg-claude-500 text-white hover:bg-claude-400 transition-colors disabled:opacity-50"
+        >
+          <i class="fas fa-search mr-1.5" />
+          Explore
+        </button>
+      </div>
+    </div>
+
+    <!-- Graph Stats (when no graph loaded) -->
+    <div v-if="graphStats && !graphContainer?.querySelector('canvas')" class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
+      <div class="p-3 rounded-xl border-2 border-slate-700/50 bg-gradient-to-br from-slate-800/50 to-slate-900/50">
+        <span class="text-xs text-slate-500 block">Nodes</span>
+        <span class="text-lg font-bold text-white font-mono">{{ graphStats.nodeCount }}</span>
+      </div>
+      <div class="p-3 rounded-xl border-2 border-slate-700/50 bg-gradient-to-br from-slate-800/50 to-slate-900/50">
+        <span class="text-xs text-slate-500 block">Edges</span>
+        <span class="text-lg font-bold text-white font-mono">{{ graphStats.edgeCount }}</span>
+      </div>
+      <div class="p-3 rounded-xl border-2 border-slate-700/50 bg-gradient-to-br from-slate-800/50 to-slate-900/50">
+        <span class="text-xs text-slate-500 block">Avg Degree</span>
+        <span class="text-lg font-bold text-white font-mono">{{ graphStats.avgDegree.toFixed(1) }}</span>
+      </div>
+      <div class="p-3 rounded-xl border-2 border-slate-700/50 bg-gradient-to-br from-slate-800/50 to-slate-900/50">
+        <span class="text-xs text-slate-500 block">Max Degree</span>
+        <span class="text-lg font-bold text-white font-mono">{{ graphStats.maxDegree }}</span>
+      </div>
+    </div>
+
+    <!-- Type Legend -->
+    <div class="flex items-center gap-3 mb-4 flex-wrap">
+      <span class="text-[10px] text-slate-600 uppercase">Legend:</span>
+      <div v-for="(config, type) in TYPE_CONFIG" :key="type" class="flex items-center gap-1">
+        <span class="w-2.5 h-2.5 rounded-full" :style="{ backgroundColor: TYPE_COLORS[type]?.background || '#64748b' }" />
+        <span class="text-[10px] text-slate-500">{{ type }}</span>
+      </div>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="loading" class="flex items-center justify-center py-20">
+      <i class="fas fa-circle-notch fa-spin text-claude-400 text-2xl" />
+    </div>
+
+    <!-- Error -->
+    <div v-else-if="error" class="text-center py-16">
+      <i class="fas fa-exclamation-triangle text-red-400 text-3xl mb-3 block" />
+      <p class="text-red-400 mb-2">{{ error }}</p>
+    </div>
+
+    <!-- Graph container -->
+    <div
+      ref="graphContainer"
+      class="flex-1 rounded-xl border-2 border-slate-700/50 bg-slate-950/50 min-h-[500px]"
+    >
+      <EmptyState
+        v-if="!loading && !error"
+        icon="fa-diagram-project"
+        title="Select an observation to explore"
+        description="Enter an observation ID above to visualize its relationship graph."
+      />
+    </div>
   </div>
 </template>
diff --git a/ui/src/views/HomeView.vue b/ui/src/views/HomeView.vue
index 2aaaa0a1..35cb8d0b 100644
--- a/ui/src/views/HomeView.vue
+++ b/ui/src/views/HomeView.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { useStats, useTimeline, useHealth } from '@/composables'
+import { useStats, useTimeline, useHealth, useSSE } from '@/composables'
 import StatsCards from '@/components/StatsCards.vue'
 import Sidebar from '@/components/Sidebar.vue'
 import FilterTabs from '@/components/FilterTabs.vue'
 import Timeline from '@/components/Timeline.vue'
-import { useSSE } from '@/composables'
 
 const { queueDepth } = useSSE()
 const { health } = useHealth()
diff --git a/ui/src/views/LogsView.vue b/ui/src/views/LogsView.vue
index 7c177852..dfdb3855 100644
--- a/ui/src/views/LogsView.vue
+++ b/ui/src/views/LogsView.vue
@@ -1,7 +1,178 @@
+<script setup lang="ts">
+import { ref, watch, nextTick, onMounted } from 'vue'
+import { useLogs, type LogLevel } from '@/composables/useLogs'
+
+const {
+  filteredEntries,
+  connected,
+  paused,
+  enabledLevels,
+  searchText,
+  connect,
+  togglePause,
+  toggleLevel,
+  clearEntries,
+  LOG_LEVELS,
+} = useLogs()
+
+const logContainer = ref<HTMLElement | null>(null)
+const autoScroll = ref(true)
+
+const LEVEL_COLORS: Record<LogLevel, { text: string; bg: string; border: string }> = {
+  trace: { text: 'text-slate-500', bg: 'bg-slate-500/10', border: 'border-slate-500/30' },
+  debug: { text: 'text-blue-400', bg: 'bg-blue-500/10', border: 'border-blue-500/30' },
+  info: { text: 'text-green-400', bg: 'bg-green-500/10', border: 'border-green-500/30' },
+  warn: { text: 'text-yellow-400', bg: 'bg-yellow-500/10', border: 'border-yellow-500/30' },
+  error: { text: 'text-red-400', bg: 'bg-red-500/10', border: 'border-red-500/30' },
+  fatal: { text: 'text-red-300', bg: 'bg-red-500/20', border: 'border-red-500/50' },
+}
+
+function scrollToBottom() {
+  if (logContainer.value) {
+    logContainer.value.scrollTop = logContainer.value.scrollHeight
+  }
+}
+
+function handleScroll() {
+  if (!logContainer.value) return
+  const { scrollTop, scrollHeight, clientHeight } = logContainer.value
+  autoScroll.value = scrollHeight - scrollTop - clientHeight < 50
+}
+
+// Auto-scroll when new entries arrive
+watch(
+  () => filteredEntries.value.length,
+  () => {
+    if (autoScroll.value) {
+      nextTick(scrollToBottom)
+    }
+  }
+)
+
+function formatTimestamp(ts: string): string {
+  try {
+    const d = new Date(ts)
+    return d.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' })
+      + '.' + String(d.getMilliseconds()).padStart(3, '0')
+  } catch {
+    return ts
+  }
+}
+
+onMounted(() => {
+  connect()
+})
+</script>
+
 <template>
-  <div class="text-slate-400 text-center mt-20">
-    <i class="fas fa-terminal text-4xl mb-4 block" />
-    <h2 class="text-xl font-medium text-slate-300">Logs</h2>
-    <p class="mt-2 text-sm">Server log viewer. Coming in Phase 7.</p>
+  <div class="flex flex-col h-full">
+    <!-- Header -->
+    <div class="flex items-center justify-between mb-4">
+      <div class="flex items-center gap-3">
+        <i class="fas fa-terminal text-claude-400 text-xl" />
+        <h1 class="text-2xl font-bold text-white">Logs</h1>
+        <span :class="[
+          'flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[10px] font-medium border',
+          connected
+            ? 'bg-green-500/10 text-green-400 border-green-500/30'
+            : 'bg-red-500/10 text-red-400 border-red-500/30'
+        ]">
+          <span :class="['w-1.5 h-1.5 rounded-full', connected ? 'bg-green-400' : 'bg-red-400']" />
+          {{ connected ? 'Connected' : 'Disconnected' }}
+        </span>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <button
+          @click="togglePause()"
+          :class="[
+            'px-3 py-1.5 rounded-lg text-sm border transition-colors',
+            paused
+              ? 'bg-amber-500/20 text-amber-300 border-amber-500/30'
+              : 'bg-slate-800/50 text-slate-300 border-slate-700/50 hover:text-white hover:border-claude-500/50'
+          ]"
+        >
+          <i :class="['fas mr-1.5', paused ? 'fa-play' : 'fa-pause']" />
+          {{ paused ? 'Resume' : 'Pause' }}
+        </button>
+        <button
+          v-if="!autoScroll"
+          @click="autoScroll = true; scrollToBottom()"
+          class="px-3 py-1.5 rounded-lg text-sm bg-claude-500/20 text-claude-300 border border-claude-500/30 hover:bg-claude-500/30 transition-colors"
+        >
+          <i class="fas fa-arrow-down mr-1.5" />
+          Jump to latest
+        </button>
+        <button
+          @click="clearEntries()"
+          class="px-3 py-1.5 rounded-lg text-sm bg-slate-800/50 border border-slate-700/50 text-slate-400 hover:text-white hover:border-slate-600 transition-colors"
+        >
+          <i class="fas fa-eraser mr-1.5" />
+          Clear
+        </button>
+      </div>
+    </div>
+
+    <!-- Filters -->
+    <div class="flex items-center gap-3 mb-4">
+      <!-- Level filter buttons -->
+      <div class="flex items-center gap-1">
+        <button
+          v-for="level in LOG_LEVELS"
+          :key="level"
+          @click="toggleLevel(level)"
+          :class="[
+            'px-2 py-1 rounded text-[10px] font-medium uppercase border transition-colors',
+            enabledLevels.has(level)
+              ? `${LEVEL_COLORS[level].bg} ${LEVEL_COLORS[level].text} ${LEVEL_COLORS[level].border}`
+              : 'bg-slate-800/20 text-slate-600 border-slate-700/30 hover:text-slate-400'
+          ]"
+        >
+          {{ level }}
+        </button>
+      </div>
+
+      <!-- Search -->
+      <div class="relative flex-1 max-w-xs">
+        <i class="fas fa-search absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-600 text-xs" />
+        <input
+          v-model="searchText"
+          type="text"
+          placeholder="Filter logs..."
+          class="w-full pl-8 pr-3 py-1.5 rounded-lg bg-slate-800/50 border border-slate-700/50 text-xs text-slate-200 placeholder-slate-600 focus:outline-none focus:ring-1 focus:ring-claude-500/50"
+        />
+      </div>
+
+      <span class="text-xs text-slate-600">{{ filteredEntries.length }} entries</span>
+    </div>
+
+    <!-- Log entries -->
+    <div
+      ref="logContainer"
+      @scroll="handleScroll"
+      class="flex-1 overflow-y-auto rounded-xl border-2 border-slate-700/50 bg-slate-950/80 font-mono text-xs p-3 min-h-[400px]"
+    >
+      <div v-if="filteredEntries.length === 0" class="flex items-center justify-center h-full text-slate-600">
+        <span v-if="connected">Waiting for log entries...</span>
+        <span v-else>Not connected to log stream</span>
+      </div>
+      <div
+        v-for="entry in filteredEntries"
+        :key="entry.id"
+        class="flex items-start gap-2 py-0.5 hover:bg-slate-800/30 px-1 rounded"
+      >
+        <span class="text-slate-600 whitespace-nowrap flex-shrink-0">{{ formatTimestamp(entry.timestamp) }}</span>
+        <span
+          :class="[
+            'px-1.5 py-0 rounded text-[10px] font-bold uppercase flex-shrink-0 min-w-[3rem] text-center',
+            LEVEL_COLORS[entry.level]?.bg || 'bg-slate-500/10',
+            LEVEL_COLORS[entry.level]?.text || 'text-slate-400',
+          ]"
+        >
+          {{ entry.level }}
+        </span>
+        <span class="text-slate-300 break-all">{{ entry.message }}</span>
+      </div>
+    </div>
   </div>
 </template>
diff --git a/ui/src/views/ObservationDetailView.vue b/ui/src/views/ObservationDetailView.vue
index 2f987ecc..f70d916f 100644
--- a/ui/src/views/ObservationDetailView.vue
+++ b/ui/src/views/ObservationDetailView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, onBeforeUnmount } from 'vue'
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
 import type { ObservationType } from '@/types'
 import { TYPE_CONFIG } from '@/types/observation'
diff --git a/ui/src/views/ObservationsView.vue b/ui/src/views/ObservationsView.vue
index 59082fc7..0667539c 100644
--- a/ui/src/views/ObservationsView.vue
+++ b/ui/src/views/ObservationsView.vue
@@ -3,11 +3,12 @@ import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import type { Observation, ObservationType } from '@/types'
 import { TYPE_CONFIG, OBSERVATION_TYPES } from '@/types/observation'
-import { fetchObservationsPaginated, fetchProjects } from '@/utils/api'
+import { fetchObservationsPaginated, fetchProjects, archiveObservations } from '@/utils/api'
 import { formatRelativeTime } from '@/utils/formatters'
 import Pagination from '@/components/layout/Pagination.vue'
 import EmptyState from '@/components/layout/EmptyState.vue'
 import Badge from '@/components/Badge.vue'
+import ConfirmDialog from '@/components/layout/ConfirmDialog.vue'
 
 const router = useRouter()
 
@@ -25,6 +26,59 @@ const currentType = ref<ObservationType | null>(null)
 const currentConcept = ref('')
 const projects = ref<string[]>([])
 
+// Bulk selection state
+const selectedIds = ref<Set<number>>(new Set())
+const showBatchConfirm = ref(false)
+const batchAction = ref<'archive' | null>(null)
+const batchProcessing = ref(false)
+
+const allSelected = computed(() =>
+  filteredObservations.value.length > 0 &&
+  filteredObservations.value.every(o => selectedIds.value.has(o.id))
+)
+
+function toggleSelect(id: number, event: Event) {
+  event.stopPropagation()
+  const updated = new Set(selectedIds.value)
+  if (updated.has(id)) {
+    updated.delete(id)
+  } else {
+    updated.add(id)
+  }
+  selectedIds.value = updated
+}
+
+function toggleSelectAll() {
+  if (allSelected.value) {
+    selectedIds.value = new Set()
+  } else {
+    selectedIds.value = new Set(filteredObservations.value.map(o => o.id))
+  }
+}
+
+function startBatchAction(action: 'archive') {
+  batchAction.value = action
+  showBatchConfirm.value = true
+}
+
+async function executeBatchAction() {
+  showBatchConfirm.value = false
+  if (!batchAction.value || selectedIds.value.size === 0) return
+
+  batchProcessing.value = true
+  try {
+    const ids = Array.from(selectedIds.value)
+    await archiveObservations(ids, 'Batch archive from dashboard')
+    selectedIds.value = new Set()
+    await fetchPage()
+  } catch {
+    // Error will show in page reload
+  } finally {
+    batchProcessing.value = false
+    batchAction.value = null
+  }
+}
+
 // Unique concepts from current page for quick filter
 const availableConcepts = computed(() => {
   const conceptSet = new Set<string>()
@@ -101,10 +155,14 @@ function setProject(project: string | null) {
 
 function setType(type: ObservationType | null) {
   currentType.value = currentType.value === type ? null : type
+  offset.value = 0
+  fetchPage()
 }
 
 function setConcept(concept: string) {
   currentConcept.value = currentConcept.value === concept ? '' : concept
+  offset.value = 0
+  fetchPage()
 }
 
 function navigateToDetail(id: number) {
@@ -190,6 +248,31 @@ onUnmounted(() => {
       </div>
     </div>
 
+    <!-- Batch Actions Toolbar -->
+    <div
+      v-if="selectedIds.size > 0"
+      class="flex items-center gap-3 mb-4 p-3 rounded-lg bg-claude-500/10 border border-claude-500/30"
+    >
+      <span class="text-sm text-claude-300">
+        <i class="fas fa-check-square mr-1" />
+        {{ selectedIds.size }} selected
+      </span>
+      <button
+        @click="startBatchAction('archive')"
+        :disabled="batchProcessing"
+        class="px-3 py-1 rounded-lg text-xs bg-amber-500/20 text-amber-300 border border-amber-500/30 hover:bg-amber-500/30 transition-colors disabled:opacity-50"
+      >
+        <i class="fas fa-archive mr-1" />
+        Archive
+      </button>
+      <button
+        @click="selectedIds = new Set()"
+        class="ml-auto text-xs text-slate-400 hover:text-white transition-colors"
+      >
+        Clear selection
+      </button>
+    </div>
+
     <!-- Loading State -->
     <div v-if="loading && observations.length === 0" class="flex items-center justify-center py-20">
       <i class="fas fa-circle-notch fa-spin text-claude-400 text-2xl" />
@@ -219,12 +302,36 @@ onUnmounted(() => {
 
     <!-- Observations List -->
     <div v-else class="space-y-2">
+      <!-- Select all header -->
+      <div class="flex items-center gap-2 px-4 py-1">
+        <input
+          type="checkbox"
+          :checked="allSelected"
+          @change="toggleSelectAll()"
+          class="w-3.5 h-3.5 rounded border-slate-600 bg-slate-800 text-claude-500 focus:ring-claude-500/50 cursor-pointer"
+        />
+        <span class="text-[10px] text-slate-600 uppercase tracking-wide">Select all</span>
+      </div>
+
       <div
         v-for="obs in filteredObservations"
         :key="obs.id"
         @click="navigateToDetail(obs.id)"
-        class="group flex items-center gap-4 p-4 rounded-xl border-2 border-slate-700/50 bg-gradient-to-br from-slate-800/50 to-slate-900/50 hover:border-claude-500/30 hover:from-slate-800/70 hover:to-slate-900/70 cursor-pointer transition-all"
+        :class="[
+          'group flex items-center gap-4 p-4 rounded-xl border-2 bg-gradient-to-br cursor-pointer transition-all',
+          selectedIds.has(obs.id)
+            ? 'border-claude-500/40 from-claude-500/5 to-slate-900/50'
+            : 'border-slate-700/50 from-slate-800/50 to-slate-900/50 hover:border-claude-500/30 hover:from-slate-800/70 hover:to-slate-900/70'
+        ]"
       >
+        <!-- Checkbox -->
+        <input
+          type="checkbox"
+          :checked="selectedIds.has(obs.id)"
+          @click="toggleSelect(obs.id, $event)"
+          class="w-3.5 h-3.5 rounded border-slate-600 bg-slate-800 text-claude-500 focus:ring-claude-500/50 cursor-pointer flex-shrink-0"
+        />
+
         <!-- Type icon -->
         <div
           class="w-10 h-10 flex items-center justify-center rounded-lg bg-gradient-to-br flex-shrink-0"
@@ -290,5 +397,16 @@ onUnmounted(() => {
         @update:offset="handleOffsetUpdate"
       />
     </div>
+
+    <!-- Batch Action Confirmation -->
+    <ConfirmDialog
+      :show="showBatchConfirm"
+      :title="`Archive ${selectedIds.size} Observations`"
+      :message="`Are you sure you want to archive ${selectedIds.size} observation(s)? Archived observations can be restored.`"
+      confirm-label="Archive"
+      :danger="true"
+      @confirm="executeBatchAction"
+      @cancel="showBatchConfirm = false"
+    />
   </div>
 </template>
diff --git a/ui/src/views/PatternsView.vue b/ui/src/views/PatternsView.vue
index 058049d2..a2d6c773 100644
--- a/ui/src/views/PatternsView.vue
+++ b/ui/src/views/PatternsView.vue
@@ -1,7 +1,229 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { usePatterns } from '@/composables/usePatterns'
+import { formatRelativeTime } from '@/utils/formatters'
+import EmptyState from '@/components/layout/EmptyState.vue'
+import ConfirmDialog from '@/components/layout/ConfirmDialog.vue'
+import Badge from '@/components/Badge.vue'
+
+const {
+  patterns,
+  loading,
+  error,
+  insights,
+  insightLoading,
+  loadPatterns,
+  loadInsight,
+  deprecate,
+  remove,
+} = usePatterns()
+
+const expandedId = ref<number | null>(null)
+const deleteTarget = ref<number | null>(null)
+const showDeleteConfirm = ref(false)
+const deprecateTarget = ref<number | null>(null)
+const showDeprecateConfirm = ref(false)
+
+const PATTERN_TYPE_CONFIG: Record<string, { colorClass: string; bgClass: string; borderClass: string; icon: string }> = {
+  workflow: { colorClass: 'text-violet-300', bgClass: 'bg-violet-500/20', borderClass: 'border-violet-500/30', icon: 'fa-diagram-project' },
+  best_practice: { colorClass: 'text-emerald-300', bgClass: 'bg-emerald-500/20', borderClass: 'border-emerald-500/30', icon: 'fa-check-circle' },
+  anti_pattern: { colorClass: 'text-red-300', bgClass: 'bg-red-500/20', borderClass: 'border-red-500/30', icon: 'fa-ban' },
+}
+
+function getPatternTypeConfig(type: string) {
+  return PATTERN_TYPE_CONFIG[type] || { colorClass: 'text-slate-300', bgClass: 'bg-slate-500/20', borderClass: 'border-slate-500/30', icon: 'fa-puzzle-piece' }
+}
+
+function toggleExpand(id: number) {
+  if (expandedId.value === id) {
+    expandedId.value = null
+  } else {
+    expandedId.value = id
+    loadInsight(id)
+  }
+}
+
+function confirmDeprecate(id: number) {
+  deprecateTarget.value = id
+  showDeprecateConfirm.value = true
+}
+
+async function handleDeprecate() {
+  if (deprecateTarget.value === null) return
+  showDeprecateConfirm.value = false
+  try {
+    await deprecate(deprecateTarget.value)
+  } catch {
+    // Error in composable
+  }
+  deprecateTarget.value = null
+}
+
+function confirmDelete(id: number) {
+  deleteTarget.value = id
+  showDeleteConfirm.value = true
+}
+
+async function handleDelete() {
+  if (deleteTarget.value === null) return
+  showDeleteConfirm.value = false
+  try {
+    await remove(deleteTarget.value)
+  } catch {
+    // Error in composable
+  }
+  deleteTarget.value = null
+}
+</script>
+
 <template>
-  <div class="text-slate-400 text-center mt-20">
-    <i class="fas fa-puzzle-piece text-4xl mb-4 block" />
-    <h2 class="text-xl font-medium text-slate-300">Patterns</h2>
-    <p class="mt-2 text-sm">Learned patterns and insights. Coming in Phase 9.</p>
+  <div>
+    <!-- Header -->
+    <div class="flex items-center justify-between mb-6">
+      <div class="flex items-center gap-3">
+        <i class="fas fa-puzzle-piece text-claude-400 text-xl" />
+        <h1 class="text-2xl font-bold text-white">Patterns</h1>
+        <span v-if="patterns.length > 0" class="text-sm text-slate-500">({{ patterns.length }})</span>
+      </div>
+      <button
+        @click="loadPatterns()"
+        :disabled="loading"
+        class="px-3 py-1.5 rounded-lg text-sm bg-slate-800/50 border border-slate-700/50 text-slate-300 hover:text-white hover:border-claude-500/50 transition-colors disabled:opacity-50"
+      >
+        <i :class="['fas fa-sync-alt mr-1.5', loading && 'fa-spin']" />
+        Refresh
+      </button>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="loading && patterns.length === 0" class="flex items-center justify-center py-20">
+      <i class="fas fa-circle-notch fa-spin text-claude-400 text-2xl" />
+    </div>
+
+    <!-- Error -->
+    <div v-else-if="error" class="text-center py-16">
+      <i class="fas fa-exclamation-triangle text-red-400 text-3xl mb-3 block" />
+      <p class="text-red-400 mb-2">{{ error }}</p>
+      <button @click="loadPatterns()" class="text-sm text-slate-400 hover:text-white transition-colors">
+        Try again
+      </button>
+    </div>
+
+    <!-- Empty State -->
+    <EmptyState
+      v-else-if="patterns.length === 0 && !loading"
+      icon="fa-puzzle-piece"
+      title="No patterns detected"
+      description="Patterns will appear here as the system learns from your observations."
+    />
+
+    <!-- Patterns List -->
+    <div v-else class="space-y-2">
+      <div
+        v-for="pattern in patterns"
+        :key="pattern.id"
+        class="rounded-xl border-2 border-slate-700/50 bg-gradient-to-br from-slate-800/50 to-slate-900/50 overflow-hidden"
+      >
+        <!-- Pattern row -->
+        <div class="flex items-center gap-4 p-4">
+          <div
+            class="w-10 h-10 flex items-center justify-center rounded-lg flex-shrink-0"
+            :class="getPatternTypeConfig(pattern.type).bgClass"
+          >
+            <i :class="['fas', getPatternTypeConfig(pattern.type).icon, getPatternTypeConfig(pattern.type).colorClass]" />
+          </div>
+
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center gap-2 mb-0.5">
+              <h3 class="text-sm font-medium text-white truncate">{{ pattern.name }}</h3>
+              <Badge
+                :icon="getPatternTypeConfig(pattern.type).icon"
+                :color-class="getPatternTypeConfig(pattern.type).colorClass"
+                :bg-class="getPatternTypeConfig(pattern.type).bgClass"
+                :border-class="getPatternTypeConfig(pattern.type).borderClass"
+              >
+                {{ pattern.type.replace(/_/g, ' ') }}
+              </Badge>
+            </div>
+            <div class="flex items-center gap-3 text-xs text-slate-500">
+              <span>{{ pattern.occurrences }} occurrences</span>
+              <span>{{ (pattern.confidence * 100).toFixed(0) }}% confidence</span>
+              <span>{{ formatRelativeTime(pattern.created_at) }}</span>
+            </div>
+          </div>
+
+          <div class="flex items-center gap-1.5 flex-shrink-0">
+            <button
+              @click="toggleExpand(pattern.id)"
+              class="px-2.5 py-1.5 rounded-lg text-xs bg-slate-800/50 border border-slate-700/50 text-slate-300 hover:text-white hover:border-claude-500/50 transition-colors"
+            >
+              <i :class="['fas mr-1', expandedId === pattern.id ? 'fa-chevron-up' : 'fa-lightbulb']" />
+              {{ expandedId === pattern.id ? 'Hide' : 'Insight' }}
+            </button>
+            <button
+              @click="confirmDeprecate(pattern.id)"
+              class="px-2 py-1.5 rounded-lg text-xs text-slate-500 hover:text-amber-400 hover:bg-amber-500/10 transition-colors"
+              title="Deprecate"
+            >
+              <i class="fas fa-archive" />
+            </button>
+            <button
+              @click="confirmDelete(pattern.id)"
+              class="px-2 py-1.5 rounded-lg text-xs text-slate-500 hover:text-red-400 hover:bg-red-500/10 transition-colors"
+              title="Delete"
+            >
+              <i class="fas fa-trash" />
+            </button>
+          </div>
+        </div>
+
+        <!-- Expanded insight panel -->
+        <div v-if="expandedId === pattern.id" class="px-4 pb-4 border-t border-slate-700/30">
+          <div v-if="insightLoading[pattern.id]" class="py-4 text-center">
+            <i class="fas fa-circle-notch fa-spin text-claude-400" />
+          </div>
+          <div v-else-if="insights[pattern.id]" class="pt-3">
+            <p class="text-sm text-slate-300 whitespace-pre-wrap leading-relaxed mb-3">
+              {{ insights[pattern.id].insight }}
+            </p>
+            <div v-if="insights[pattern.id].examples?.length" class="space-y-1">
+              <span class="text-[10px] text-slate-600 uppercase">Examples:</span>
+              <div
+                v-for="(ex, idx) in insights[pattern.id].examples"
+                :key="idx"
+                class="text-xs text-slate-400 pl-3 border-l-2 border-slate-700"
+              >
+                {{ ex }}
+              </div>
+            </div>
+          </div>
+          <div v-else class="py-4 text-xs text-slate-600 text-center">
+            No insight available
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Deprecate Confirmation -->
+    <ConfirmDialog
+      :show="showDeprecateConfirm"
+      title="Deprecate Pattern"
+      message="This pattern will be marked as deprecated and hidden from active results."
+      confirm-label="Deprecate"
+      :danger="false"
+      @confirm="handleDeprecate"
+      @cancel="showDeprecateConfirm = false"
+    />
+
+    <!-- Delete Confirmation -->
+    <ConfirmDialog
+      :show="showDeleteConfirm"
+      title="Delete Pattern"
+      message="Are you sure you want to permanently delete this pattern? This action cannot be undone."
+      confirm-label="Delete"
+      :danger="true"
+      @confirm="handleDelete"
+      @cancel="showDeleteConfirm = false"
+    />
   </div>
 </template>
diff --git a/ui/src/views/SearchView.vue b/ui/src/views/SearchView.vue
index 6ec6ad8c..e192ac53 100644
--- a/ui/src/views/SearchView.vue
+++ b/ui/src/views/SearchView.vue
@@ -7,7 +7,7 @@ import SearchBar from '@/components/search/SearchBar.vue'
 import SearchResults from '@/components/search/SearchResults.vue'
 
 const route = useRoute()
-const { query, project, results, totalCount, loading, error, decisionMode, intent, search, clear } = useSearch()
+const { query, project, results, totalCount, loading, error, decisionMode, intent, search } = useSearch()
 
 const projects = ref<string[]>([])
 
diff --git a/ui/src/views/SessionsView.vue b/ui/src/views/SessionsView.vue
index d323ecc3..8808a213 100644
--- a/ui/src/views/SessionsView.vue
+++ b/ui/src/views/SessionsView.vue
@@ -1,7 +1,158 @@
+<script setup lang="ts">
+import { useSessions } from '@/composables/useSessions'
+import { formatRelativeTime } from '@/utils/formatters'
+import EmptyState from '@/components/layout/EmptyState.vue'
+
+const {
+  sessions,
+  projects,
+  loading,
+  error,
+  searchQuery,
+  filterProject,
+  filterFrom,
+  filterTo,
+  loadSessions,
+  search,
+} = useSessions()
+
+function shortProject(project: string): string {
+  const parts = project.split('/')
+  return parts[parts.length - 1] || project
+}
+
+function handleSearch() {
+  search()
+}
+
+function setProject(project: string) {
+  filterProject.value = project
+  search()
+}
+</script>
+
 <template>
-  <div class="text-slate-400 text-center mt-20">
-    <i class="fas fa-clock-rotate-left text-4xl mb-4 block" />
-    <h2 class="text-xl font-medium text-slate-300">Sessions</h2>
-    <p class="mt-2 text-sm">Session history and timeline. Coming in Phase 10.</p>
+  <div>
+    <!-- Header -->
+    <div class="flex items-center justify-between mb-6">
+      <div class="flex items-center gap-3">
+        <i class="fas fa-clock-rotate-left text-claude-400 text-xl" />
+        <h1 class="text-2xl font-bold text-white">Sessions</h1>
+        <span v-if="sessions.length > 0" class="text-sm text-slate-500">({{ sessions.length }})</span>
+      </div>
+      <button
+        @click="loadSessions()"
+        :disabled="loading"
+        class="px-3 py-1.5 rounded-lg text-sm bg-slate-800/50 border border-slate-700/50 text-slate-300 hover:text-white hover:border-claude-500/50 transition-colors disabled:opacity-50"
+      >
+        <i :class="['fas fa-sync-alt mr-1.5', loading && 'fa-spin']" />
+        Refresh
+      </button>
+    </div>
+
+    <!-- Filters -->
+    <div class="flex flex-wrap items-center gap-3 mb-6">
+      <!-- Search -->
+      <div class="relative flex-1 max-w-sm">
+        <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-600 text-xs" />
+        <input
+          v-model="searchQuery"
+          type="text"
+          placeholder="Search across transcripts..."
+          class="w-full pl-9 pr-3 py-2 rounded-lg bg-slate-800/50 border border-slate-700/50 text-sm text-slate-200 placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-claude-500/50"
+          @keydown.enter="handleSearch"
+        />
+      </div>
+
+      <!-- Project filter -->
+      <div class="relative">
+        <select
+          :value="filterProject"
+          @change="setProject(($event.target as HTMLSelectElement).value)"
+          class="appearance-none pl-8 pr-8 py-2 rounded-lg bg-slate-800/50 border border-slate-700/50 text-sm text-slate-200 focus:outline-none focus:ring-2 focus:ring-claude-500/50 cursor-pointer"
+        >
+          <option value="">All Projects</option>
+          <option v-for="p in projects" :key="p" :value="p">{{ shortProject(p) }}</option>
+        </select>
+        <i class="fas fa-folder absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-500 text-xs pointer-events-none" />
+        <i class="fas fa-chevron-down absolute right-2.5 top-1/2 -translate-y-1/2 text-slate-500 text-xs pointer-events-none" />
+      </div>
+
+      <!-- Date range -->
+      <input
+        v-model="filterFrom"
+        type="date"
+        class="px-3 py-2 rounded-lg bg-slate-800/50 border border-slate-700/50 text-sm text-slate-200 focus:outline-none focus:ring-1 focus:ring-claude-500/50"
+        @change="loadSessions()"
+      />
+      <span class="text-slate-600 text-xs">to</span>
+      <input
+        v-model="filterTo"
+        type="date"
+        class="px-3 py-2 rounded-lg bg-slate-800/50 border border-slate-700/50 text-sm text-slate-200 focus:outline-none focus:ring-1 focus:ring-claude-500/50"
+        @change="loadSessions()"
+      />
+    </div>
+
+    <!-- Loading -->
+    <div v-if="loading && sessions.length === 0" class="flex items-center justify-center py-20">
+      <i class="fas fa-circle-notch fa-spin text-claude-400 text-2xl" />
+    </div>
+
+    <!-- Error -->
+    <div v-else-if="error" class="text-center py-16">
+      <i class="fas fa-exclamation-triangle text-red-400 text-3xl mb-3 block" />
+      <p class="text-red-400 mb-2">{{ error }}</p>
+      <button @click="loadSessions()" class="text-sm text-slate-400 hover:text-white transition-colors">
+        Try again
+      </button>
+    </div>
+
+    <!-- Empty State -->
+    <EmptyState
+      v-else-if="sessions.length === 0 && !loading"
+      icon="fa-clock-rotate-left"
+      title="No sessions found"
+      :description="searchQuery || filterProject
+        ? 'Try adjusting your filters.'
+        : 'Sessions will appear here as agents connect.'"
+    />
+
+    <!-- Sessions List -->
+    <div v-else class="space-y-2">
+      <div
+        v-for="session in sessions"
+        :key="session.id"
+        class="p-4 rounded-xl border-2 border-slate-700/50 bg-gradient-to-br from-slate-800/50 to-slate-900/50"
+      >
+        <div class="flex items-center justify-between">
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center gap-2 mb-1">
+              <i class="fas fa-desktop text-slate-500 text-sm" />
+              <h3 class="text-sm font-medium text-white truncate">{{ session.workstation }}</h3>
+              <span v-if="session.project" class="flex items-center gap-1 text-xs text-slate-500">
+                <i class="fas fa-folder text-slate-600 text-[10px]" />
+                <span class="text-amber-600/80 font-mono">{{ shortProject(session.project) }}</span>
+              </span>
+            </div>
+            <div class="flex items-center gap-3 text-xs text-slate-500">
+              <span>
+                <i class="fas fa-calendar text-slate-600 mr-1" />
+                {{ session.date }}
+              </span>
+              <span>
+                <i class="fas fa-comments text-slate-600 mr-1" />
+                {{ session.message_count }} messages
+              </span>
+              <span>{{ formatRelativeTime(session.created_at) }}</span>
+            </div>
+          </div>
+
+          <code class="text-[10px] font-mono text-slate-600 flex-shrink-0">
+            {{ session.id.slice(0, 8) }}
+          </code>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
diff --git a/ui/src/views/SystemView.vue b/ui/src/views/SystemView.vue
index b6dc7144..3aafcfc3 100644
--- a/ui/src/views/SystemView.vue
+++ b/ui/src/views/SystemView.vue
@@ -1,7 +1,360 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import {
+  fetchSystemHealth,
+  fetchVectorMetrics,
+  fetchGraphStats,
+  triggerConsolidation,
+  triggerMaintenance,
+  checkForUpdate,
+  type SystemHealth,
+  type VectorMetrics,
+  type GraphStats,
+} from '@/utils/api'
+import { formatUptime } from '@/utils/formatters'
+
+const health = ref<SystemHealth | null>(null)
+const vectorMetrics = ref<VectorMetrics | null>(null)
+const graphStats = ref<GraphStats | null>(null)
+const loading = ref(false)
+const error = ref<string | null>(null)
+
+// Maintenance
+const consolidating = ref(false)
+const maintaining = ref(false)
+const maintenanceMessage = ref<string | null>(null)
+
+// Update check
+const updateChecking = ref(false)
+const updateResult = ref<{ available: boolean; current_version: string; latest_version: string; release_notes?: string } | null>(null)
+
+let abortController: AbortController | null = null
+
+async function loadAll() {
+  abortController?.abort()
+  abortController = new AbortController()
+
+  loading.value = true
+  error.value = null
+
+  const signal = abortController.signal
+
+  try {
+    const [h, v, g] = await Promise.allSettled([
+      fetchSystemHealth(signal),
+      fetchVectorMetrics(signal),
+      fetchGraphStats(signal),
+    ])
+
+    // Bail out if this request was superseded by a newer one.
+    if (signal.aborted) return
+
+    health.value = h.status === 'fulfilled' ? h.value : null
+    vectorMetrics.value = v.status === 'fulfilled' ? v.value : null
+    graphStats.value = g.status === 'fulfilled' ? g.value : null
+
+    // Surface real errors (not AbortErrors for the current signal).
+    const failures = [h, v, g]
+      .filter(r => r.status === 'rejected')
+      .map(r => (r as PromiseRejectedResult).reason)
+      .filter(e => !(e instanceof Error && e.name === 'AbortError'))
+    if (failures.length > 0) {
+      error.value = failures.map((e: unknown) => e instanceof Error ? e.message : String(e)).join('; ')
+    }
+  } catch (err) {
+    if (err instanceof Error && err.name === 'AbortError') return
+    error.value = err instanceof Error ? err.message : 'Failed to load system info'
+  } finally {
+    if (!signal.aborted) {
+      loading.value = false
+    }
+  }
+}
+
+function statusColor(status: string): string {
+  switch (status) {
+    case 'healthy': return 'text-green-400'
+    case 'degraded': return 'text-yellow-400'
+    case 'unhealthy': return 'text-red-400'
+    default: return 'text-slate-400'
+  }
+}
+
+function statusBg(status: string): string {
+  switch (status) {
+    case 'healthy': return 'bg-green-500/10 border-green-500/30'
+    case 'degraded': return 'bg-yellow-500/10 border-yellow-500/30'
+    case 'unhealthy': return 'bg-red-500/10 border-red-500/30'
+    default: return 'bg-slate-500/10 border-slate-500/30'
+  }
+}
+
+function statusIcon(status: string): string {
+  switch (status) {
+    case 'healthy': return 'fa-check-circle'
+    case 'degraded': return 'fa-exclamation-triangle'
+    case 'unhealthy': return 'fa-times-circle'
+    default: return 'fa-question-circle'
+  }
+}
+
+async function handleConsolidate() {
+  consolidating.value = true
+  maintenanceMessage.value = null
+  try {
+    const result = await triggerConsolidation()
+    maintenanceMessage.value = result.message || 'Consolidation started'
+  } catch (err) {
+    maintenanceMessage.value = err instanceof Error ? err.message : 'Failed to start consolidation'
+  } finally {
+    consolidating.value = false
+  }
+}
+
+async function handleMaintenance() {
+  maintaining.value = true
+  maintenanceMessage.value = null
+  try {
+    const result = await triggerMaintenance()
+    maintenanceMessage.value = result.message || 'Maintenance started'
+  } catch (err) {
+    maintenanceMessage.value = err instanceof Error ? err.message : 'Failed to start maintenance'
+  } finally {
+    maintaining.value = false
+  }
+}
+
+async function handleCheckUpdate() {
+  updateChecking.value = true
+  try {
+    updateResult.value = await checkForUpdate()
+  } catch (err) {
+    updateResult.value = null
+    maintenanceMessage.value = err instanceof Error ? err.message : 'Failed to check for updates'
+  } finally {
+    updateChecking.value = false
+  }
+}
+
+onMounted(() => {
+  loadAll()
+})
+
+onUnmounted(() => {
+  abortController?.abort()
+})
+</script>
+
 <template>
-  <div class="text-slate-400 text-center mt-20">
-    <i class="fas fa-server text-4xl mb-4 block" />
-    <h2 class="text-xl font-medium text-slate-300">System</h2>
-    <p class="mt-2 text-sm">System health and configuration. Coming in Phase 12.</p>
+  <div>
+    <!-- Header -->
+    <div class="flex items-center justify-between mb-6">
+      <div class="flex items-center gap-3">
+        <i class="fas fa-server text-claude-400 text-xl" />
+        <h1 class="text-2xl font-bold text-white">System</h1>
+        <span v-if="health" :class="['text-sm font-medium', statusColor(health.status)]">
+          {{ health.status }}
+        </span>
+      </div>
+      <button
+        @click="loadAll()"
+        :disabled="loading"
+        class="px-3 py-1.5 rounded-lg text-sm bg-slate-800/50 border border-slate-700/50 text-slate-300 hover:text-white hover:border-claude-500/50 transition-colors disabled:opacity-50"
+      >
+        <i :class="['fas fa-sync-alt mr-1.5', loading && 'fa-spin']" />
+        Refresh
+      </button>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="loading && !health" class="flex items-center justify-center py-20">
+      <i class="fas fa-circle-notch fa-spin text-claude-400 text-2xl" />
+    </div>
+
+    <!-- Error -->
+    <div v-else-if="error && !health" class="text-center py-16">
+      <i class="fas fa-exclamation-triangle text-red-400 text-3xl mb-3 block" />
+      <p class="text-red-400 mb-2">{{ error }}</p>
+      <button @click="loadAll()" class="text-sm text-slate-400 hover:text-white transition-colors">
+        Try again
+      </button>
+    </div>
+
+    <template v-else>
+      <!-- Overall Health -->
+      <div v-if="health" class="mb-6">
+        <div class="flex items-center gap-4 mb-4">
+          <span class="text-xs text-slate-500">Version: <span class="text-slate-300 font-mono">{{ health.version }}</span></span>
+        </div>
+
+        <!-- Component Health Cards -->
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
+          <div
+            v-for="comp in health.components"
+            :key="comp.name"
+            :class="[
+              'p-3 rounded-xl border-2',
+              statusBg(comp.status)
+            ]"
+          >
+            <div class="flex items-center gap-2 mb-1">
+              <i :class="['fas', statusIcon(comp.status), statusColor(comp.status)]" />
+              <span class="text-sm font-medium text-white">{{ comp.name }}</span>
+            </div>
+            <div :class="['text-xs', statusColor(comp.status)]">{{ comp.status }}</div>
+            <div v-if="comp.message" class="text-[10px] text-slate-500 mt-1 truncate" :title="comp.message">
+              {{ comp.message }}
+            </div>
+            <div v-if="comp.latency_ms" class="text-[10px] text-slate-600 mt-0.5">
+              {{ comp.latency_ms.toFixed(1) }}ms
+            </div>
+          </div>
+        </div>
+
+        <!-- Warnings -->
+        <div v-if="health.warnings?.length" class="mt-4 p-3 rounded-lg bg-amber-500/10 border border-amber-500/30">
+          <div v-for="(warn, idx) in health.warnings" :key="idx" class="text-xs text-amber-400">
+            <i class="fas fa-triangle-exclamation mr-1" />
+            {{ warn }}
+          </div>
+        </div>
+      </div>
+
+      <!-- Vector Metrics -->
+      <div v-if="vectorMetrics" class="p-4 rounded-xl border-2 border-slate-700/50 bg-slate-800/30 mb-6">
+        <h2 class="text-xs text-slate-500 uppercase tracking-wide mb-3">Vector Metrics</h2>
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+          <div>
+            <span class="text-slate-600 text-xs block">Query Latency (avg)</span>
+            <span class="text-slate-300 font-mono">{{ vectorMetrics.latency.avg }}</span>
+          </div>
+          <div>
+            <span class="text-slate-600 text-xs block">Cache Hit Rate</span>
+            <span :class="[
+              'font-mono',
+              vectorMetrics.cache.hitRate > 0.5 ? 'text-green-400' : 'text-amber-400'
+            ]">
+              {{ (vectorMetrics.cache.hitRate * 100).toFixed(1) }}%
+            </span>
+          </div>
+          <div>
+            <span class="text-slate-600 text-xs block">Total Documents</span>
+            <span class="text-slate-300 font-mono">{{ vectorMetrics.storage.totalDocuments }}</span>
+          </div>
+          <div>
+            <span class="text-slate-600 text-xs block">Storage Savings</span>
+            <span class="text-slate-300 font-mono">{{ vectorMetrics.storage.savingsPercent.toFixed(1) }}%</span>
+          </div>
+        </div>
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm mt-3">
+          <div>
+            <span class="text-slate-600 text-xs block">P50 Latency</span>
+            <span class="text-slate-300 font-mono">{{ vectorMetrics.latency.p50 }}</span>
+          </div>
+          <div>
+            <span class="text-slate-600 text-xs block">P95 Latency</span>
+            <span class="text-slate-300 font-mono">{{ vectorMetrics.latency.p95 }}</span>
+          </div>
+          <div>
+            <span class="text-slate-600 text-xs block">P99 Latency</span>
+            <span class="text-slate-300 font-mono">{{ vectorMetrics.latency.p99 }}</span>
+          </div>
+          <div>
+            <span class="text-slate-600 text-xs block">Total Queries</span>
+            <span class="text-slate-300 font-mono">{{ vectorMetrics.queries.total }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Graph Stats -->
+      <div v-if="graphStats" class="p-4 rounded-xl border-2 border-slate-700/50 bg-slate-800/30 mb-6">
+        <h2 class="text-xs text-slate-500 uppercase tracking-wide mb-3">Graph Stats</h2>
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+          <div>
+            <span class="text-slate-600 text-xs block">Nodes</span>
+            <span class="text-slate-300 font-mono">{{ graphStats.nodeCount }}</span>
+          </div>
+          <div>
+            <span class="text-slate-600 text-xs block">Edges</span>
+            <span class="text-slate-300 font-mono">{{ graphStats.edgeCount }}</span>
+          </div>
+          <div>
+            <span class="text-slate-600 text-xs block">Avg Degree</span>
+            <span class="text-slate-300 font-mono">{{ graphStats.avgDegree.toFixed(1) }}</span>
+          </div>
+          <div>
+            <span class="text-slate-600 text-xs block">Max Degree</span>
+            <span class="text-slate-300 font-mono">{{ graphStats.maxDegree }}</span>
+          </div>
+        </div>
+        <div v-if="graphStats.edgeTypes" class="mt-3">
+          <span class="text-[10px] text-slate-600 uppercase">Edge Types:</span>
+          <div class="flex flex-wrap gap-2 mt-1">
+            <span
+              v-for="(count, type) in graphStats.edgeTypes"
+              :key="type"
+              class="text-[10px] px-2 py-0.5 rounded-full bg-slate-700/50 text-slate-400 border border-slate-600/50"
+            >
+              {{ type }}: {{ count }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Maintenance Controls -->
+      <div class="p-4 rounded-xl border-2 border-slate-700/50 bg-slate-800/30 mb-6">
+        <h2 class="text-xs text-slate-500 uppercase tracking-wide mb-3">Maintenance</h2>
+        <div class="flex flex-wrap items-center gap-3">
+          <button
+            @click="handleConsolidate"
+            :disabled="consolidating"
+            class="px-4 py-2 rounded-lg text-sm bg-slate-800/50 border border-slate-700/50 text-slate-300 hover:text-white hover:border-claude-500/50 transition-colors disabled:opacity-50"
+          >
+            <i :class="['fas mr-1.5', consolidating ? 'fa-circle-notch fa-spin' : 'fa-compress']" />
+            Run Consolidation
+          </button>
+          <button
+            @click="handleMaintenance"
+            :disabled="maintaining"
+            class="px-4 py-2 rounded-lg text-sm bg-slate-800/50 border border-slate-700/50 text-slate-300 hover:text-white hover:border-claude-500/50 transition-colors disabled:opacity-50"
+          >
+            <i :class="['fas mr-1.5', maintaining ? 'fa-circle-notch fa-spin' : 'fa-wrench']" />
+            Run Maintenance
+          </button>
+          <button
+            @click="handleCheckUpdate"
+            :disabled="updateChecking"
+            class="px-4 py-2 rounded-lg text-sm bg-slate-800/50 border border-slate-700/50 text-slate-300 hover:text-white hover:border-claude-500/50 transition-colors disabled:opacity-50"
+          >
+            <i :class="['fas mr-1.5', updateChecking ? 'fa-circle-notch fa-spin' : 'fa-cloud-arrow-down']" />
+            Check for Updates
+          </button>
+        </div>
+
+        <!-- Maintenance message -->
+        <div v-if="maintenanceMessage" class="mt-3 p-2 rounded-lg bg-slate-900/50 text-xs text-slate-400">
+          <i class="fas fa-info-circle mr-1 text-claude-400" />
+          {{ maintenanceMessage }}
+        </div>
+
+        <!-- Update result -->
+        <div v-if="updateResult" class="mt-3 p-3 rounded-lg border" :class="updateResult.available ? 'bg-green-500/10 border-green-500/30' : 'bg-slate-900/50 border-slate-700/50'">
+          <div v-if="updateResult.available" class="text-sm">
+            <span class="text-green-400 font-medium">
+              <i class="fas fa-arrow-up mr-1" />
+              Update available: {{ updateResult.latest_version }}
+            </span>
+            <span class="text-slate-500 ml-2">(current: {{ updateResult.current_version }})</span>
+            <p v-if="updateResult.release_notes" class="text-xs text-slate-400 mt-2 whitespace-pre-wrap">
+              {{ updateResult.release_notes }}
+            </p>
+          </div>
+          <div v-else class="text-sm text-slate-400">
+            <i class="fas fa-check mr-1 text-green-400" />
+            You are on the latest version ({{ updateResult.current_version }})
+          </div>
+        </div>
+      </div>
+    </template>
   </div>
 </template>
diff --git a/ui/src/views/TokensView.vue b/ui/src/views/TokensView.vue
index b6104f72..a70af021 100644
--- a/ui/src/views/TokensView.vue
+++ b/ui/src/views/TokensView.vue
@@ -1,7 +1,290 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useTokens } from '@/composables/useTokens'
+import { formatRelativeTime } from '@/utils/formatters'
+import EmptyState from '@/components/layout/EmptyState.vue'
+import ConfirmDialog from '@/components/layout/ConfirmDialog.vue'
+
+const { tokens, loading, error, loadTokens, create, revoke } = useTokens()
+
+// Create token modal
+const showCreateModal = ref(false)
+const newTokenName = ref('')
+const newTokenScope = ref('read-write')
+const creating = ref(false)
+const createError = ref<string | null>(null)
+
+// Newly created token (show once)
+const createdToken = ref<string | null>(null)
+const copyFeedback = ref(false)
+
+// Revoke confirmation
+const revokeTarget = ref<string | null>(null)
+const showRevokeConfirm = ref(false)
+
+function openCreateModal() {
+  newTokenName.value = ''
+  newTokenScope.value = 'read-write'
+  createError.value = null
+  createdToken.value = null
+  showCreateModal.value = true
+}
+
+async function handleCreate() {
+  if (!newTokenName.value.trim()) {
+    createError.value = 'Token name is required'
+    return
+  }
+  creating.value = true
+  createError.value = null
+  try {
+    const result = await create(newTokenName.value.trim(), newTokenScope.value)
+    createdToken.value = result.token
+    newTokenName.value = ''
+  } catch (err) {
+    createError.value = err instanceof Error ? err.message : 'Failed to create token'
+  } finally {
+    creating.value = false
+  }
+}
+
+function closeCreateModal() {
+  showCreateModal.value = false
+  createdToken.value = null
+}
+
+async function copyToken() {
+  if (!createdToken.value) return
+  try {
+    await navigator.clipboard.writeText(createdToken.value)
+    copyFeedback.value = true
+    setTimeout(() => { copyFeedback.value = false }, 2000)
+  } catch {
+    // Ignored
+  }
+}
+
+function confirmRevoke(id: string) {
+  revokeTarget.value = id
+  showRevokeConfirm.value = true
+}
+
+async function handleRevoke() {
+  if (!revokeTarget.value) return
+  showRevokeConfirm.value = false
+  try {
+    await revoke(revokeTarget.value)
+  } catch {
+    // Error handled by composable
+  }
+  revokeTarget.value = null
+}
+</script>
+
 <template>
-  <div class="text-slate-400 text-center mt-20">
-    <i class="fas fa-key text-4xl mb-4 block" />
-    <h2 class="text-xl font-medium text-slate-300">API Tokens</h2>
-    <p class="mt-2 text-sm">Manage API tokens. Coming in Phase 13.</p>
+  <div>
+    <!-- Header -->
+    <div class="flex items-center justify-between mb-6">
+      <div class="flex items-center gap-3">
+        <i class="fas fa-key text-claude-400 text-xl" />
+        <h1 class="text-2xl font-bold text-white">API Tokens</h1>
+        <span v-if="tokens.length > 0" class="text-sm text-slate-500">({{ tokens.length }})</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <button
+          @click="loadTokens()"
+          :disabled="loading"
+          class="px-3 py-1.5 rounded-lg text-sm bg-slate-800/50 border border-slate-700/50 text-slate-300 hover:text-white hover:border-claude-500/50 transition-colors disabled:opacity-50"
+        >
+          <i :class="['fas fa-sync-alt mr-1.5', loading && 'fa-spin']" />
+          Refresh
+        </button>
+        <button
+          @click="openCreateModal()"
+          class="px-3 py-1.5 rounded-lg text-sm bg-claude-500 text-white hover:bg-claude-400 transition-colors"
+        >
+          <i class="fas fa-plus mr-1.5" />
+          Create Token
+        </button>
+      </div>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="loading && tokens.length === 0" class="flex items-center justify-center py-20">
+      <i class="fas fa-circle-notch fa-spin text-claude-400 text-2xl" />
+    </div>
+
+    <!-- Error -->
+    <div v-else-if="error" class="text-center py-16">
+      <i class="fas fa-exclamation-triangle text-red-400 text-3xl mb-3 block" />
+      <p class="text-red-400 mb-2">{{ error }}</p>
+      <button @click="loadTokens()" class="text-sm text-slate-400 hover:text-white transition-colors">
+        Try again
+      </button>
+    </div>
+
+    <!-- Empty State -->
+    <EmptyState
+      v-else-if="tokens.length === 0 && !loading"
+      icon="fa-key"
+      title="No API tokens"
+      description="Create a token to authenticate API requests."
+    />
+
+    <!-- Tokens List -->
+    <div v-else class="space-y-2">
+      <div
+        v-for="token in tokens"
+        :key="token.id"
+        class="p-4 rounded-xl border-2 border-slate-700/50 bg-gradient-to-br from-slate-800/50 to-slate-900/50"
+      >
+        <div class="flex items-center justify-between">
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center gap-2 mb-1">
+              <h3 class="text-sm font-medium text-white">{{ token.name }}</h3>
+              <code class="px-1.5 py-0.5 text-[10px] font-mono rounded bg-slate-900 border border-slate-700 text-slate-400">
+                {{ token.token_prefix }}...
+              </code>
+              <span :class="[
+                'px-2 py-0.5 text-[10px] font-medium rounded-full border',
+                token.scope === 'read-write'
+                  ? 'bg-amber-500/20 text-amber-300 border-amber-500/30'
+                  : 'bg-blue-500/20 text-blue-300 border-blue-500/30'
+              ]">
+                {{ token.scope }}
+              </span>
+            </div>
+            <div class="flex items-center gap-3 text-xs text-slate-500">
+              <span>Created {{ formatRelativeTime(token.created_at) }}</span>
+              <span v-if="token.last_used_at">
+                <i class="fas fa-clock text-slate-600 mr-0.5" />
+                Last used {{ formatRelativeTime(token.last_used_at) }}
+              </span>
+              <span>
+                <i class="fas fa-arrow-right-arrow-left text-slate-600 mr-0.5" />
+                {{ token.request_count }} requests
+              </span>
+              <span v-if="token.error_count" class="text-red-400/70">
+                <i class="fas fa-exclamation-circle mr-0.5" />
+                {{ token.error_count }} errors
+              </span>
+            </div>
+          </div>
+
+          <button
+            @click="confirmRevoke(token.id)"
+            class="px-3 py-1.5 rounded-lg text-xs text-slate-400 hover:text-red-400 hover:bg-red-500/10 border border-slate-700/50 hover:border-red-500/30 transition-colors flex-shrink-0"
+          >
+            <i class="fas fa-ban mr-1" />
+            Revoke
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Create Token Modal -->
+    <Teleport to="body">
+      <Transition name="fade">
+        <div v-if="showCreateModal" class="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" @click="closeCreateModal" />
+          <div class="relative glass border border-white/10 rounded-xl p-6 max-w-md w-full shadow-2xl">
+            <!-- Created token display -->
+            <template v-if="createdToken">
+              <h3 class="text-lg font-semibold text-white mb-2">Token Created</h3>
+              <div class="p-3 rounded-lg bg-amber-500/10 border border-amber-500/30 mb-4">
+                <p class="text-xs text-amber-400 mb-2">
+                  <i class="fas fa-triangle-exclamation mr-1" />
+                  Copy this token now. It will not be shown again.
+                </p>
+                <div class="flex items-center gap-2">
+                  <code class="flex-1 px-2 py-1.5 rounded bg-slate-900 border border-slate-700 text-xs text-green-400 font-mono break-all select-all">
+                    {{ createdToken }}
+                  </code>
+                  <button
+                    @click="copyToken"
+                    class="px-3 py-1.5 rounded-lg text-sm bg-slate-800/50 border border-slate-700/50 text-slate-300 hover:text-white transition-colors flex-shrink-0"
+                  >
+                    <i :class="['fas', copyFeedback ? 'fa-check text-green-400' : 'fa-copy']" />
+                  </button>
+                </div>
+              </div>
+              <div class="flex justify-end">
+                <button @click="closeCreateModal" class="px-4 py-2 rounded-lg text-sm bg-claude-500 text-white hover:bg-claude-400 transition-colors">
+                  Done
+                </button>
+              </div>
+            </template>
+
+            <!-- Create form -->
+            <template v-else>
+              <h3 class="text-lg font-semibold text-white mb-4">Create API Token</h3>
+              <div class="space-y-4">
+                <div>
+                  <label class="block text-xs text-slate-400 mb-1">Token Name</label>
+                  <input
+                    v-model="newTokenName"
+                    type="text"
+                    placeholder="e.g., my-workstation"
+                    class="w-full px-3 py-2 rounded-lg bg-slate-900/50 border border-slate-700/50 text-sm text-white placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-claude-500/50 focus:border-claude-500"
+                    @keydown.enter="handleCreate"
+                  />
+                </div>
+                <div>
+                  <label class="block text-xs text-slate-400 mb-2">Scope</label>
+                  <div class="flex gap-3">
+                    <label class="flex items-center gap-2 cursor-pointer">
+                      <input type="radio" v-model="newTokenScope" value="read-write" class="text-claude-500 focus:ring-claude-500" />
+                      <span class="text-sm text-slate-300">Read-Write</span>
+                    </label>
+                    <label class="flex items-center gap-2 cursor-pointer">
+                      <input type="radio" v-model="newTokenScope" value="read-only" class="text-claude-500 focus:ring-claude-500" />
+                      <span class="text-sm text-slate-300">Read-Only</span>
+                    </label>
+                  </div>
+                </div>
+                <div v-if="createError" class="p-2 rounded-lg bg-red-500/10 border border-red-500/30 text-xs text-red-400">
+                  {{ createError }}
+                </div>
+              </div>
+              <div class="flex items-center justify-end gap-3 mt-6">
+                <button @click="closeCreateModal" class="px-4 py-2 rounded-lg text-sm text-slate-400 hover:text-white hover:bg-slate-800/50 transition-colors">
+                  Cancel
+                </button>
+                <button
+                  @click="handleCreate"
+                  :disabled="creating || !newTokenName.trim()"
+                  class="px-4 py-2 rounded-lg text-sm font-medium bg-claude-500 text-white hover:bg-claude-400 transition-colors disabled:opacity-50"
+                >
+                  <i v-if="creating" class="fas fa-circle-notch fa-spin mr-1.5" />
+                  Create
+                </button>
+              </div>
+            </template>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- Revoke Confirmation -->
+    <ConfirmDialog
+      :show="showRevokeConfirm"
+      title="Revoke Token"
+      :message="`Are you sure you want to revoke '${revokeTarget}'? Any clients using this token will lose access.`"
+      confirm-label="Revoke"
+      :danger="true"
+      @confirm="handleRevoke"
+      @cancel="showRevokeConfirm = false"
+    />
   </div>
 </template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/ui/src/views/VaultView.vue b/ui/src/views/VaultView.vue
index cc755dae..5b71f4eb 100644
--- a/ui/src/views/VaultView.vue
+++ b/ui/src/views/VaultView.vue
@@ -1,7 +1,229 @@
+<script setup lang="ts">
+import { ref, computed, watch, onUnmounted } from 'vue'
+import { useVault } from '@/composables/useVault'
+import { formatRelativeTime } from '@/utils/formatters'
+import EmptyState from '@/components/layout/EmptyState.vue'
+import ConfirmDialog from '@/components/layout/ConfirmDialog.vue'
+
+const {
+  credentials,
+  vaultStatus,
+  loading,
+  error,
+  revealedValues,
+  loadCredentials,
+  revealCredential,
+  hideCredential,
+  removeCredential,
+} = useVault()
+
+const deleteTarget = ref<string | null>(null)
+const showDeleteConfirm = ref(false)
+const copyFeedback = ref<string | null>(null)
+
+// Countdown tick for revealed values
+const now = ref(Date.now())
+let tickInterval: ReturnType<typeof setInterval> | null = null
+
+function startTick() {
+  if (tickInterval) return
+  tickInterval = setInterval(() => {
+    now.value = Date.now()
+  }, 1000)
+}
+
+function stopTick() {
+  if (tickInterval) {
+    clearInterval(tickInterval)
+    tickInterval = null
+  }
+}
+
+const hasRevealed = computed(() => Object.keys(revealedValues.value).length > 0)
+
+watch(hasRevealed, (val) => {
+  if (val) startTick()
+  else stopTick()
+})
+
+let isMounted = true
+onUnmounted(() => {
+  isMounted = false
+  stopTick()
+})
+
+function remainingSeconds(name: string): number {
+  const entry = revealedValues.value[name]
+  if (!entry) return 0
+  return Math.max(0, Math.ceil((entry.expiresAt - now.value) / 1000))
+}
+
+async function copyToClipboard(value: string, name: string) {
+  try {
+    await navigator.clipboard.writeText(value)
+    copyFeedback.value = name
+    setTimeout(() => { copyFeedback.value = null }, 2000)
+  } catch {
+    // Fallback ignored
+  }
+}
+
+function confirmDelete(name: string) {
+  deleteTarget.value = name
+  showDeleteConfirm.value = true
+}
+
+async function handleDelete() {
+  if (!deleteTarget.value) return
+  showDeleteConfirm.value = false
+  try {
+    await removeCredential(deleteTarget.value)
+  } catch {
+    // Error handled by composable
+  }
+  if (isMounted) {
+    deleteTarget.value = null
+  }
+}
+</script>
+
 <template>
-  <div class="text-slate-400 text-center mt-20">
-    <i class="fas fa-vault text-4xl mb-4 block" />
-    <h2 class="text-xl font-medium text-slate-300">Vault</h2>
-    <p class="mt-2 text-sm">Manage encrypted credentials. Coming in Phase 6.</p>
+  <div>
+    <!-- Header -->
+    <div class="flex items-center justify-between mb-6">
+      <div class="flex items-center gap-3">
+        <i class="fas fa-vault text-claude-400 text-xl" />
+        <h1 class="text-2xl font-bold text-white">Vault</h1>
+      </div>
+      <button
+        @click="loadCredentials()"
+        :disabled="loading"
+        class="px-3 py-1.5 rounded-lg text-sm bg-slate-800/50 border border-slate-700/50 text-slate-300 hover:text-white hover:border-claude-500/50 transition-colors disabled:opacity-50"
+      >
+        <i :class="['fas fa-sync-alt mr-1.5', loading && 'fa-spin']" />
+        Refresh
+      </button>
+    </div>
+
+    <!-- Vault Status Card -->
+    <div v-if="vaultStatus" class="p-4 rounded-xl border-2 border-slate-700/50 bg-gradient-to-br from-slate-800/50 to-slate-900/50 mb-6">
+      <div class="grid grid-cols-3 gap-4">
+        <div>
+          <span class="text-xs text-slate-500 block">Encryption</span>
+          <span :class="vaultStatus.encrypted ? 'text-green-400' : 'text-red-400'" class="text-sm font-medium">
+            <i :class="['fas mr-1', vaultStatus.encrypted ? 'fa-lock' : 'fa-lock-open']" />
+            {{ vaultStatus.encrypted ? 'Enabled' : 'Disabled' }}
+          </span>
+        </div>
+        <div>
+          <span class="text-xs text-slate-500 block">Key Fingerprint</span>
+          <span class="text-sm font-mono text-slate-300">{{ vaultStatus.key_fingerprint || 'N/A' }}</span>
+        </div>
+        <div>
+          <span class="text-xs text-slate-500 block">Credentials</span>
+          <span class="text-sm font-mono text-slate-300">{{ vaultStatus.credential_count }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="loading && credentials.length === 0" class="flex items-center justify-center py-20">
+      <i class="fas fa-circle-notch fa-spin text-claude-400 text-2xl" />
+    </div>
+
+    <!-- Error -->
+    <div v-else-if="error" class="text-center py-16">
+      <i class="fas fa-exclamation-triangle text-red-400 text-3xl mb-3 block" />
+      <p class="text-red-400 mb-2">{{ error }}</p>
+      <button @click="loadCredentials()" class="text-sm text-slate-400 hover:text-white transition-colors">
+        Try again
+      </button>
+    </div>
+
+    <!-- Empty State -->
+    <EmptyState
+      v-else-if="credentials.length === 0 && !loading"
+      icon="fa-vault"
+      title="No credentials stored"
+      description="Credentials will appear here when stored via MCP tools."
+    />
+
+    <!-- Credentials List -->
+    <div v-else class="space-y-2">
+      <div
+        v-for="cred in credentials"
+        :key="cred.name"
+        class="p-4 rounded-xl border-2 border-slate-700/50 bg-gradient-to-br from-slate-800/50 to-slate-900/50"
+      >
+        <div class="flex items-center justify-between">
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center gap-2 mb-1">
+              <i class="fas fa-key text-amber-500/70 text-sm" />
+              <h3 class="text-sm font-medium text-white truncate">{{ cred.name }}</h3>
+              <span class="px-2 py-0.5 text-[10px] font-medium rounded-full bg-slate-700/50 text-slate-400 border border-slate-600/50">
+                {{ cred.scope }}
+              </span>
+            </div>
+            <span class="text-xs text-slate-500">Created {{ formatRelativeTime(cred.created_at) }}</span>
+          </div>
+
+          <div class="flex items-center gap-2 flex-shrink-0">
+            <!-- Revealed value -->
+            <div v-if="revealedValues[cred.name]" class="flex items-center gap-2">
+              <code class="px-2 py-1 rounded bg-slate-900 border border-slate-700 text-xs text-green-400 font-mono max-w-xs truncate">
+                {{ revealedValues[cred.name].value }}
+              </code>
+              <span class="text-[10px] text-amber-400 whitespace-nowrap">
+                Hides in {{ remainingSeconds(cred.name) }}s
+              </span>
+              <button
+                @click="copyToClipboard(revealedValues[cred.name].value, cred.name)"
+                class="px-2 py-1 rounded text-xs text-slate-400 hover:text-white hover:bg-slate-700/50 transition-colors"
+                :title="copyFeedback === cred.name ? 'Copied!' : 'Copy'"
+              >
+                <i :class="['fas', copyFeedback === cred.name ? 'fa-check text-green-400' : 'fa-copy']" />
+              </button>
+              <button
+                @click="hideCredential(cred.name)"
+                class="px-2 py-1 rounded text-xs text-slate-400 hover:text-white hover:bg-slate-700/50 transition-colors"
+                title="Hide"
+              >
+                <i class="fas fa-eye-slash" />
+              </button>
+            </div>
+
+            <!-- Action buttons (when not revealed) -->
+            <template v-else>
+              <button
+                @click="revealCredential(cred.name)"
+                class="px-3 py-1.5 rounded-lg text-xs bg-slate-800/50 border border-slate-700/50 text-slate-300 hover:text-white hover:border-claude-500/50 transition-colors"
+              >
+                <i class="fas fa-eye mr-1" />
+                Reveal
+              </button>
+            </template>
+
+            <button
+              @click="confirmDelete(cred.name)"
+              class="px-2 py-1.5 rounded-lg text-xs text-slate-500 hover:text-red-400 hover:bg-red-500/10 transition-colors"
+              title="Delete"
+            >
+              <i class="fas fa-trash" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Delete Confirmation -->
+    <ConfirmDialog
+      :show="showDeleteConfirm"
+      title="Delete Credential"
+      :message="`Are you sure you want to delete '${deleteTarget}'? This action cannot be undone.`"
+      confirm-label="Delete"
+      :danger="true"
+      @confirm="handleDelete"
+      @cancel="showDeleteConfirm = false"
+    />
   </div>
 </template>