feat(ui): M4 — agent activity, knowledge search, audit, correlation grouping

Add three new pages completing the control-room web UI:
- Agent activity: polls /agent-activity every 5s, filterable by type/agent
- Knowledge search: FTS over /knowledge/search with snippet + entity links
- Audit trail: browseable audit log with actor/action/entity filters

Enhanced live events page with correlation-id clustering (Groups toggle).
Added fetchAgentActivity/searchKnowledge/fetchAudit to the API client.
11 nav items now cover all planned control-room views.

web/src/pages/Ops.svelte

@@ -0,0 +1,203 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import {
+    fetchApprovals,
+    decideApproval,
+    fetchExecutions,
+    cancelExecution,
+    type Approval,
+    type Execution
+  } from '$lib/api'
+  import { liveEvents, subscribeEvents } from '$lib/stores/events'
+  import * as Tabs from '$lib/components/ui/tabs'
+  import * as Table from '$lib/components/ui/table'
+  import { Badge } from '$lib/components/ui/badge'
+  import { Button } from '$lib/components/ui/button'
+  import { toast } from 'svelte-sonner'
+
+  let approvals = $state<Approval[]>([])
+  let executions = $state<Execution[]>([])
+  let deciding = $state<string | null>(null)
+
+  async function loadApprovals() {
+    approvals = await fetchApprovals()
+  }
+  async function loadExecutions() {
+    executions = await fetchExecutions()
+  }
+
+  onMount(() => {
+    loadApprovals()
+    loadExecutions()
+    const unsubscribe = subscribeEvents()
+    return unsubscribe
+  })
+
+  $effect(() => {
+    const ev = $liveEvents[0]
+    if (!ev) return
+    if (ev.type.startsWith('approval.')) loadApprovals()
+    if (ev.type.startsWith('execution.')) loadExecutions()
+  })
+
+  async function decide(id: string, decision: 'approve' | 'deny') {
+    deciding = id
+    const result = await decideApproval(id, decision)
+    deciding = null
+    if (result) {
+      toast.success(`Approval ${decision === 'approve' ? 'approved' : 'denied'}`)
+      loadApprovals()
+    } else {
+      toast.error('Decision failed')
+    }
+  }
+
+  async function cancel(id: string) {
+    const result = await cancelExecution(id)
+    if (result) {
+      toast.success('Execution cancelled')
+      loadExecutions()
+    } else {
+      toast.error('Cancel failed')
+    }
+  }
+
+  function riskVariant(risk: string): 'default' | 'secondary' | 'destructive' {
+    if (risk === 'high' || risk === 'critical') return 'destructive'
+    if (risk === 'medium') return 'secondary'
+    return 'default'
+  }
+
+  function execStatusVariant(status: string): 'default' | 'secondary' | 'destructive' | 'outline' {
+    if (['failed', 'timed_out', 'rollback_failed', 'denied'].includes(status)) return 'destructive'
+    if (['verified', 'auto_approved'].includes(status)) return 'default'
+    if (['executing', 'verifying'].includes(status)) return 'secondary'
+    return 'outline'
+  }
+
+  const pendingApprovals = $derived(approvals.filter((a) => a.status === 'pending'))
+  const decidedApprovals = $derived(approvals.filter((a) => a.status !== 'pending'))
+</script>
+
+<div class="flex h-full flex-col gap-4 p-6">
+  <h1 class="text-lg font-semibold">Operations ledger</h1>
+
+  <Tabs.Root value="approvals" class="flex flex-1 flex-col overflow-hidden">
+    <Tabs.List>
+      <Tabs.Trigger value="approvals">
+        Approvals {#if pendingApprovals.length}<Badge variant="destructive" class="ml-1">{pendingApprovals.length}</Badge>{/if}
+      </Tabs.Trigger>
+      <Tabs.Trigger value="executions">Executions</Tabs.Trigger>
+    </Tabs.List>
+
+    <Tabs.Content value="approvals" class="flex-1 overflow-auto">
+      <div class="rounded-md border">
+        <Table.Root>
+          <Table.Header>
+            <Table.Row>
+              <Table.Head>Subject</Table.Head>
+              <Table.Head>Action</Table.Head>
+              <Table.Head>Risk</Table.Head>
+              <Table.Head>Status</Table.Head>
+              <Table.Head>Expires</Table.Head>
+              <Table.Head class="text-right">Decision</Table.Head>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {#each pendingApprovals as approval (approval.id)}
+              <Table.Row>
+                <Table.Cell class="font-mono text-xs">{approval.subject ?? '—'}</Table.Cell>
+                <Table.Cell>{approval.action}</Table.Cell>
+                <Table.Cell><Badge variant={riskVariant(approval.risk_class)}>{approval.risk_class}</Badge></Table.Cell>
+                <Table.Cell><Badge variant="outline">{approval.status}</Badge></Table.Cell>
+                <Table.Cell class="text-xs text-muted-foreground"
+                  >{new Date(approval.expires_at).toLocaleString()}</Table.Cell
+                >
+                <Table.Cell class="flex justify-end gap-2">
+                  <Button
+                    size="sm"
+                    disabled={deciding === approval.id}
+                    onclick={() => decide(approval.id, 'approve')}
+                  >
+                    Approve
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="destructive"
+                    disabled={deciding === approval.id}
+                    onclick={() => decide(approval.id, 'deny')}
+                  >
+                    Deny
+                  </Button>
+                </Table.Cell>
+              </Table.Row>
+            {:else}
+              <Table.Row>
+                <Table.Cell colspan={6} class="text-center text-muted-foreground">No pending approvals.</Table.Cell>
+              </Table.Row>
+            {/each}
+          </Table.Body>
+        </Table.Root>
+      </div>
+
+      {#if decidedApprovals.length}
+        <p class="mt-4 text-xs text-muted-foreground">Recently decided</p>
+        <div class="mt-1 rounded-md border">
+          <Table.Root>
+            <Table.Body>
+              {#each decidedApprovals.slice(0, 20) as approval (approval.id)}
+                <Table.Row>
+                  <Table.Cell class="font-mono text-xs">{approval.subject ?? '—'}</Table.Cell>
+                  <Table.Cell>{approval.action}</Table.Cell>
+                  <Table.Cell><Badge variant="outline">{approval.status}</Badge></Table.Cell>
+                  <Table.Cell class="text-xs text-muted-foreground"
+                    >{approval.decided_at ? new Date(approval.decided_at).toLocaleString() : '—'}</Table.Cell
+                  >
+                </Table.Row>
+              {/each}
+            </Table.Body>
+          </Table.Root>
+        </div>
+      {/if}
+    </Tabs.Content>
+
+    <Tabs.Content value="executions" class="flex-1 overflow-auto">
+      <div class="rounded-md border">
+        <Table.Root>
+          <Table.Header>
+            <Table.Row>
+              <Table.Head>Target</Table.Head>
+              <Table.Head>Action</Table.Head>
+              <Table.Head>Status</Table.Head>
+              <Table.Head>Correlation</Table.Head>
+              <Table.Head>Started</Table.Head>
+              <Table.Head class="text-right">Actions</Table.Head>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {#each executions as execution (execution.id)}
+              <Table.Row>
+                <Table.Cell class="font-mono text-xs">{execution.target ?? '—'}</Table.Cell>
+                <Table.Cell>{execution.action}</Table.Cell>
+                <Table.Cell><Badge variant={execStatusVariant(execution.status)}>{execution.status}</Badge></Table.Cell>
+                <Table.Cell class="font-mono text-xs text-muted-foreground">{execution.correlation_id}</Table.Cell>
+                <Table.Cell class="text-xs text-muted-foreground"
+                  >{execution.started_at ? new Date(execution.started_at).toLocaleString() : '—'}</Table.Cell
+                >
+                <Table.Cell class="text-right">
+                  {#if ['proposed', 'approved', 'auto_approved', 'executing'].includes(execution.status)}
+                    <Button size="sm" variant="outline" onclick={() => cancel(execution.id)}>Cancel</Button>
+                  {/if}
+                </Table.Cell>
+              </Table.Row>
+            {:else}
+              <Table.Row>
+                <Table.Cell colspan={6} class="text-center text-muted-foreground">No executions yet.</Table.Cell>
+              </Table.Row>
+            {/each}
+          </Table.Body>
+        </Table.Root>
+      </div>
+    </Tabs.Content>
+  </Tabs.Root>
+</div>