feat: learning view — make the growing knowledge base visible

First slice of the observability/learning UI (the "see the system come alive
and learn" ask). The Knowledge page was search-only — blank until you typed —
so the knowledge Nomos now writes via upsert_knowledge was invisible unless
you knew to search for it. Now the page LEADS with what the system knows and
is learning:

- internal/httpapi/knowledge.go: GET /api/v1/knowledge/recent — recency-ordered
  knowledge + a stats header (total, agent-authored, learned-this-week,
  by-kind). Custom route (not OpenAPI-generated), same auth as the rest.
- web Knowledge page rewrite: stat cards up top (Total / Written by Nomos /
  Learned this week / runbooks-investigations), then a "Recently learned" feed
  with agent-authored notes highlighted and badged "learned by Nomos", tags,
  and relative timestamps. A toggle filters to Nomos-only. Search still works,
  now as a mode you enter/clear rather than the whole page.

This turns "the system is getting smarter" from a claim into something you
watch fill up: every gotcha the agent records shows here within seconds.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

internal/httpapi/knowledge.go

@@ -2,10 +2,103 @@ package httpapi
 
 import (
 	"context"
+	"encoding/json"
+	"net/http"
+	"strconv"
 
 	"github.com/dtoro/oikos/internal/httpapi/gen"
 )
 
+// serveRecentKnowledge backs the Knowledge page's "what the system knows / has
+// learned" view (a custom route, not part of the generated OpenAPI surface).
+// It returns recency-ordered knowledge with a small stats header so the
+// operator can literally watch the knowledge base grow — especially the notes
+// Nomos writes itself via upsert_knowledge (source='nomos-agent'), which is
+// the concrete evidence of "the system is getting better." Optional ?source=
+// and ?limit= query params.
+func (s *Server) serveRecentKnowledge(w http.ResponseWriter, req *http.Request) {
+	ctx := req.Context()
+	limit := 50
+	if l := req.URL.Query().Get("limit"); l != "" {
+		if n, err := strconv.Atoi(l); err == nil && n > 0 && n <= 200 {
+			limit = n
+		}
+	}
+	source := req.URL.Query().Get("source") // "" = all, "nomos-agent" = agent-authored only
+
+	type item struct {
+		Slug          string   `json:"slug"`
+		Title         string   `json:"title"`
+		Kind          string   `json:"kind"`
+		Source        string   `json:"source"`
+		Tags          []string `json:"tags"`
+		UpdatedAt     string   `json:"updated_at"`
+		AgentAuthored bool     `json:"agent_authored"`
+	}
+
+	rows, err := s.pool.Query(ctx, `
+		SELECT e.slug, ke.title, e.type, COALESCE(ke.source,''), ke.tags, ke.updated_at
+		FROM knowledge_entities ke
+		JOIN entities e ON e.id = ke.entity_id
+		WHERE ($1 = '' OR ke.source = $1)
+		ORDER BY ke.updated_at DESC
+		LIMIT $2`, source, limit)
+	if err != nil {
+		writeProblem(w, req, http.StatusInternalServerError, "query failed", err.Error())
+		return
+	}
+	defer rows.Close()
+	items := []item{}
+	for rows.Next() {
+		var it item
+		var src string
+		if err := rows.Scan(&it.Slug, &it.Title, &it.Kind, &src, &it.Tags, &it.UpdatedAt); err != nil {
+			continue
+		}
+		it.Source = src
+		it.AgentAuthored = src == "nomos-agent"
+		if it.Tags == nil {
+			it.Tags = []string{}
+		}
+		items = append(items, it)
+	}
+
+	// Stats header: total, by kind, agent-authored, and how many changed in the
+	// last 7 days (the "still learning" signal).
+	var total, agentAuthored, last7d int
+	byKind := map[string]int{}
+	srows, err := s.pool.Query(ctx, `
+		SELECT e.type, COUNT(*),
+		       COUNT(*) FILTER (WHERE ke.source = 'nomos-agent'),
+		       COUNT(*) FILTER (WHERE ke.updated_at > now() - interval '7 days')
+		FROM knowledge_entities ke JOIN entities e ON e.id = ke.entity_id
+		GROUP BY e.type`)
+	if err == nil {
+		defer srows.Close()
+		for srows.Next() {
+			var kind string
+			var c, a, l int
+			if srows.Scan(&kind, &c, &a, &l) == nil {
+				byKind[kind] = c
+				total += c
+				agentAuthored += a
+				last7d += l
+			}
+		}
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(map[string]any{
+		"stats": map[string]any{
+			"total":          total,
+			"by_kind":        byKind,
+			"agent_authored": agentAuthored,
+			"last_7d":        last7d,
+		},
+		"items": items,
+	})
+}
+
 func (s *Server) SearchKnowledge(ctx context.Context, request gen.SearchKnowledgeRequestObject) (gen.SearchKnowledgeResponseObject, error) {
 	q := request.Params.Q
 	limit := clampLimit(request.Params.Limit)

internal/httpapi/server.go

@@ -139,6 +139,11 @@ func NewHandler(ctx context.Context, pool *db.Pool, cfg config.Config, uiHandler
 	// inherits the router's base middleware and applies auth via With().
 	r.With(combinedAuth(cfg)).Get("/api/v1/events/stream", s.serveSSE)
 
+	// Custom (non-OpenAPI) route: recency-ordered knowledge + stats for the
+	// Knowledge page's "what the system has learned" view. Registered after
+	// HandlerWithOptions so it wins over any generated catch-all.
+	r.With(combinedAuth(cfg)).Get("/api/v1/knowledge/recent", s.serveRecentKnowledge)
+
 	// Mount MCP at /mcp (plan R3-10)
 	nomosAgentID := uuid.Nil
 	if cfg.NomosAgentID != "" {

web/src/lib/api.ts

@@ -378,6 +378,36 @@ export interface KnowledgeHit {
   slug: string
   type: 'document' | 'runbook' | 'investigation'
   title: string
+  snippet?: string
+  linked_entities?: string[]
+}
+
+export interface KnowledgeItem {
+  slug: string
+  title: string
+  kind: 'document' | 'runbook' | 'investigation'
+  source: string
+  tags: string[]
+  updated_at: string
+  agent_authored: boolean
+}
+
+export interface RecentKnowledge {
+  stats: {
+    total: number
+    by_kind: Record<string, number>
+    agent_authored: number
+    last_7d: number
+  }
+  items: KnowledgeItem[]
+}
+
+export async function fetchRecentKnowledge(source?: string): Promise<RecentKnowledge> {
+  const params = new URLSearchParams()
+  if (source) params.set('source', source)
+  const res = await fetch(`${API}/knowledge/recent?${params}`)
+  if (!res.ok) return { stats: { total: 0, by_kind: {}, agent_authored: 0, last_7d: 0 }, items: [] }
+  return res.json()
 }
 
 export async function fetchEntityKnowledge(entityId: string): Promise<KnowledgeHit[]> {

web/src/pages/Knowledge.svelte

@@ -1,19 +1,37 @@
 <script lang="ts">
-  import { searchKnowledge, type KnowledgeHit } from '$lib/api'
+  import { searchKnowledge, fetchRecentKnowledge, type KnowledgeHit, type RecentKnowledge, type KnowledgeItem } from '$lib/api'
   import * as Card from '$lib/components/ui/card'
   import { Badge } from '$lib/components/ui/badge'
   import { Input } from '$lib/components/ui/input'
   import { Button } from '$lib/components/ui/button'
   import { ScrollArea } from '$lib/components/ui/scroll-area'
   import SearchIcon from '@lucide/svelte/icons/search'
+  import SparklesIcon from '@lucide/svelte/icons/sparkles'
+  import BotIcon from '@lucide/svelte/icons/bot'
 
   let query = $state('')
   let results = $state<KnowledgeHit[]>([])
   let loading = $state(false)
   let searched = $state(false)
 
+  let recent = $state<RecentKnowledge>({ stats: { total: 0, by_kind: {}, agent_authored: 0, last_7d: 0 }, items: [] })
+  let agentOnly = $state(false)
+  let loadingRecent = $state(true)
+
+  async function loadRecent() {
+    loadingRecent = true
+    recent = await fetchRecentKnowledge(agentOnly ? 'nomos-agent' : undefined)
+    loadingRecent = false
+  }
+  loadRecent()
+
+  function toggleAgentOnly() {
+    agentOnly = !agentOnly
+    loadRecent()
+  }
+
   async function search() {
-    if (!query.trim()) return
+    if (!query.trim()) { searched = false; return }
     loading = true
     results = await searchKnowledge(query)
     loading = false
@@ -25,67 +43,134 @@
     if (type === 'investigation') return 'default'
     return 'outline'
   }
+
+  function relTime(iso: string): string {
+    const d = new Date(iso).getTime()
+    if (!d) return ''
+    const s = Math.round((Date.now() - d) / 1000)
+    if (s < 60) return 'just now'
+    if (s < 3600) return `${Math.floor(s / 60)}m ago`
+    if (s < 86400) return `${Math.floor(s / 3600)}h ago`
+    return `${Math.floor(s / 86400)}d ago`
+  }
+
+  function openEntity(slug: string) {
+    location.hash = '#/entity/' + encodeURIComponent(slug)
+  }
 </script>
 
 <div class="flex h-full flex-col gap-4 p-4 md:p-6">
-  <h1 class="text-lg font-semibold">Knowledge search</h1>
+  <div class="flex items-center justify-between">
+    <h1 class="text-lg font-semibold">Knowledge</h1>
+  </div>
 
-  <form
+  <!-- Learning stats: the system getting smarter, made visible -->
-    onsubmit={(e) => {
+  <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
-      e.preventDefault()
+    <Card.Root>
-      search()
+      <Card.Header class="p-3">
-    }}
+        <Card.Description class="text-xs">Total notes</Card.Description>
-    class="flex gap-2"
+        <Card.Title class="text-2xl">{recent.stats.total}</Card.Title>
-  >
+      </Card.Header>
+    </Card.Root>
+    <Card.Root class="border-primary/30 bg-primary/5">
+      <Card.Header class="p-3">
+        <Card.Description class="flex items-center gap-1 text-xs"><BotIcon class="size-3" /> Written by Nomos</Card.Description>
+        <Card.Title class="text-2xl text-primary">{recent.stats.agent_authored}</Card.Title>
+      </Card.Header>
+    </Card.Root>
+    <Card.Root class="border-success/30 bg-success/5">
+      <Card.Header class="p-3">
+        <Card.Description class="flex items-center gap-1 text-xs"><SparklesIcon class="size-3" /> Learned this week</Card.Description>
+        <Card.Title class="text-2xl text-success">{recent.stats.last_7d}</Card.Title>
+      </Card.Header>
+    </Card.Root>
+    <Card.Root>
+      <Card.Header class="p-3">
+        <Card.Description class="text-xs">Runbooks / investigations</Card.Description>
+        <Card.Title class="text-2xl">{(recent.stats.by_kind.runbook ?? 0)} / {(recent.stats.by_kind.investigation ?? 0)}</Card.Title>
+      </Card.Header>
+    </Card.Root>
+  </div>
+
+  <!-- Search -->
+  <form onsubmit={(e) => { e.preventDefault(); search() }} class="flex gap-2">
     <div class="relative flex-1 max-w-lg">
       <SearchIcon class="absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-      <Input
+      <Input placeholder="Search documents, runbooks, investigations…" bind:value={query} class="pl-8" />
-        placeholder="Search documents, runbooks, investigations…"
-        bind:value={query}
-        class="pl-8"
-      />
     </div>
-    <Button type="submit" disabled={loading || !query.trim()}>
+    <Button type="submit" disabled={loading || !query.trim()}>{loading ? 'Searching…' : 'Search'}</Button>
-      {loading ? 'Searching…' : 'Search'}
+    {#if searched}
-    </Button>
+      <Button type="button" variant="ghost" onclick={() => { query = ''; searched = false }}>Clear</Button>
+    {/if}
   </form>
 
   {#if searched}
-    <p class="text-sm text-muted-foreground">{results.length} result{results.length === 1 ? '' : 's'}{query ? ` for "${query}"` : ''}</p>
+    <!-- Search results mode -->
-  {/if}
+    <p class="text-sm text-muted-foreground">{results.length} result{results.length === 1 ? '' : 's'} for "{query}"</p>
-
+    <ScrollArea class="flex-1">
-  <ScrollArea class="flex-1">
+      <div class="flex flex-col gap-3 pr-4">
-    <div class="flex flex-col gap-3 pr-4">
+        {#each results as hit (hit.id)}
-      {#each results as hit (hit.id)}
+          <Card.Root class="transition-colors hover:bg-muted/50">
-        <Card.Root class="cursor-pointer transition-colors hover:bg-muted/50">
+            <Card.Header>
-          <Card.Header>
+              <div class="flex items-center gap-2">
-            <div class="flex items-center gap-2">
+                <Card.Title class="text-sm">{hit.title}</Card.Title>
-              <Card.Title class="text-sm">{hit.title}</Card.Title>
+                <Badge variant={typeVariant(hit.type)}>{hit.type}</Badge>
-              <Badge variant={typeVariant(hit.type)}>{hit.type}</Badge>
-            </div>
-            {#if hit.snippet}
-              <Card.Description class="text-xs">{@html hit.snippet}</Card.Description>
-            {/if}
-            {#if hit.linked_entities?.length}
-              <div class="mt-1 flex flex-wrap gap-1">
-                {#each hit.linked_entities as slug}
-                  <button
-                    type="button"
-                    class="font-mono text-xs text-muted-foreground underline"
-                    onclick={() => (location.hash = '#/entity/' + encodeURIComponent(slug))}
-                  >
-                    {slug}
-                  </button>
-                {/each}
               </div>
-            {/if}
+              {#if hit.snippet}
-          </Card.Header>
+                <!-- eslint-disable-next-line svelte/no-at-html-tags — server-sanitized ts_headline -->
-        </Card.Root>
+                <Card.Description class="text-xs">{@html hit.snippet}</Card.Description>
-      {:else}
+              {/if}
-        {#if searched && !loading}
+              {#if hit.linked_entities?.length}
-          <p class="py-12 text-center text-muted-foreground">No results found.</p>
+                <div class="mt-1 flex flex-wrap gap-1">
-        {/if}
+                  {#each hit.linked_entities as slug}
-      {/each}
+                    <button type="button" class="font-mono text-xs text-muted-foreground underline" onclick={() => openEntity(slug)}>{slug}</button>
+                  {/each}
+                </div>
+              {/if}
+            </Card.Header>
+          </Card.Root>
+        {:else}
+          {#if !loading}<p class="py-12 text-center text-muted-foreground">No results found.</p>{/if}
+        {/each}
+      </div>
+    </ScrollArea>
+  {:else}
+    <!-- Recently learned mode (default) -->
+    <div class="flex items-center justify-between">
+      <h2 class="text-sm font-medium text-muted-foreground">Recently learned</h2>
+      <Button size="sm" variant={agentOnly ? 'default' : 'outline'} class="h-7 gap-1 text-xs" onclick={toggleAgentOnly}>
+        <BotIcon class="size-3" /> {agentOnly ? 'Nomos only' : 'All sources'}
+      </Button>
     </div>
-  </ScrollArea>
+    <ScrollArea class="flex-1">
+      <div class="flex flex-col gap-2 pr-4">
+        {#each recent.items as it (it.slug)}
+          <div class="flex items-start gap-3 rounded-lg border px-3 py-2 transition-colors hover:bg-muted/40 {it.agent_authored ? 'border-primary/30 bg-primary/[0.03]' : ''}">
+            <div class="mt-0.5">
+              {#if it.agent_authored}<BotIcon class="size-4 text-primary" />{:else}<SearchIcon class="size-4 text-muted-foreground" />{/if}
+            </div>
+            <div class="min-w-0 flex-1">
+              <div class="flex flex-wrap items-center gap-2">
+                <span class="text-sm font-medium">{it.title}</span>
+                <Badge variant={typeVariant(it.kind)} class="text-[10px]">{it.kind}</Badge>
+                {#if it.agent_authored}<Badge variant="outline" class="border-primary/40 text-[10px] text-primary">learned by Nomos</Badge>{/if}
+              </div>
+              {#if it.tags.length}
+                <div class="mt-1 flex flex-wrap gap-1">
+                  {#each it.tags as t}<span class="rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">{t}</span>{/each}
+                </div>
+              {/if}
+            </div>
+            <span class="shrink-0 text-xs text-muted-foreground">{relTime(it.updated_at)}</span>
+          </div>
+        {:else}
+          {#if !loadingRecent}
+            <p class="py-12 text-center text-sm text-muted-foreground">
+              {agentOnly ? 'Nomos hasn’t recorded any learnings yet — it will write them here as it solves problems.' : 'No knowledge yet.'}
+            </p>
+          {/if}
+        {/each}
+      </div>
+    </ScrollArea>
+  {/if}
 </div>