feat(web): adopt @vincjo/datatables for all tables, standardize shared components

- Add DataTable.svelte: declarative columns, built-in sorting, sticky headers,
  text truncation, column alignment, configurable widths, optional pagination/search
- 12 built-in renderers: BadgeRenderer, StatusBadgeRenderer (unified risk/severity/
  execution/state/type variant mapping), HealthDotRenderer, RelativeTimeRenderer,
  DateRenderer, DurationRenderer, StatusDotRenderer, SignalActions, ApprovalActions,
  ActivityAction, ActivityCancel
- Migrate Overview (task board), Signals, Ops (3 tables) to DataTable
- Refactor EntityTable treegrid to use shared SortHeader, EmptyState, HealthDotRenderer
- Create shared components: EmptyState, StatusBadge, FilterTabs
- Clean up Knowledge.svelte: replace inline relTime() and typeVariant() with shared utils
- Add width, align, truncate column props; table-fixed layout; rounded-xl borders
- Bump version to 0.11.0

web/src/pages/Knowledge.svelte

@@ -7,6 +7,8 @@
   import { Button } from '$lib/components/ui/button'
   import { ScrollArea } from '$lib/components/ui/scroll-area'
   import { openEntityWindow } from '$lib/stores/windows'
+  import { relativeTime } from '$lib/utils'
+  import StatusBadge from '$lib/components/StatusBadge.svelte'
   import SearchIcon from '@lucide/svelte/icons/search'
   import SparklesIcon from '@lucide/svelte/icons/sparkles'
   import BotIcon from '@lucide/svelte/icons/bot'
@@ -39,23 +41,6 @@
     loading = false
     searched = true
   }
-
-  function typeVariant(type: string): 'default' | 'secondary' | 'outline' {
-    if (type === 'runbook') return 'secondary'
-    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`
-  }
-
 </script>
 
 <div class="flex h-full flex-col gap-4 p-4 md:p-6">
@@ -113,7 +98,7 @@
             <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>
+                <StatusBadge kind="type" value={hit.type} />
               </div>
               {#if hit.snippet}
                 <!-- eslint-disable-next-line svelte/no-at-html-tags — sanitized below, ts_headline only ever emits <b> -->
@@ -153,7 +138,7 @@
             <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>
+                <StatusBadge kind="type" value={it.kind} class="text-[10px]" />
                 {#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}
@@ -162,7 +147,7 @@
                 </div>
               {/if}
             </div>
-            <span class="shrink-0 text-xs text-muted-foreground">{relTime(it.updated_at)}</span>
+            <span class="shrink-0 text-xs text-muted-foreground">{relativeTime(it.updated_at)}</span>
           </div>
         {:else}
           {#if !loadingRecent}