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>

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
-    onsubmit={(e) => {
-      e.preventDefault()
-      search()
-    }}
-    class="flex gap-2"
-  >
+  <!-- Learning stats: the system getting smarter, made visible -->
+  <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
+    <Card.Root>
+      <Card.Header class="p-3">
+        <Card.Description class="text-xs">Total notes</Card.Description>
+        <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
-        placeholder="Search documents, runbooks, investigations…"
-        bind:value={query}
-        class="pl-8"
-      />
+      <Input placeholder="Search documents, runbooks, investigations…" bind:value={query} class="pl-8" />
     </div>
-    <Button type="submit" disabled={loading || !query.trim()}>
-      {loading ? 'Searching…' : 'Search'}
-    </Button>
+    <Button type="submit" disabled={loading || !query.trim()}>{loading ? 'Searching…' : 'Search'}</Button>
+    {#if searched}
+      <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>
-  {/if}
-
-  <ScrollArea class="flex-1">
-    <div class="flex flex-col gap-3 pr-4">
-      {#each results as hit (hit.id)}
-        <Card.Root class="cursor-pointer transition-colors hover:bg-muted/50">
-          <Card.Header>
-            <div class="flex items-center gap-2">
-              <Card.Title class="text-sm">{hit.title}</Card.Title>
-              <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}
+    <!-- Search results mode -->
+    <p class="text-sm text-muted-foreground">{results.length} result{results.length === 1 ? '' : 's'} for "{query}"</p>
+    <ScrollArea class="flex-1">
+      <div class="flex flex-col gap-3 pr-4">
+        {#each results as hit (hit.id)}
+          <Card.Root class="transition-colors hover:bg-muted/50">
+            <Card.Header>
+              <div class="flex items-center gap-2">
+                <Card.Title class="text-sm">{hit.title}</Card.Title>
+                <Badge variant={typeVariant(hit.type)}>{hit.type}</Badge>
               </div>
-            {/if}
-          </Card.Header>
-        </Card.Root>
-      {:else}
-        {#if searched && !loading}
-          <p class="py-12 text-center text-muted-foreground">No results found.</p>
-        {/if}
-      {/each}
+              {#if hit.snippet}
+                <!-- eslint-disable-next-line svelte/no-at-html-tags — server-sanitized ts_headline -->
+                <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={() => 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>