feat(tasks): task board UI — chat window becomes Tasks + card grid

Reframes the chat surface as tasks:
- New Tasks.svelte: a card grid of tasks, each showing status (Running /
  Needs input / Done / Failed), the goal as title, the outcome summary, and
  relative time; filterable by status with live counts; delete on hover;
  "New task" and per-card click open the conversation.
- Board updates LIVE off the events stream (goal.set / task.status /
  question.*) via an explicit liveEvents.subscribe with a debounced refetch —
  scanning all events newer than the last seen, since entity.touched bursts
  bury task events below index 0.
- App shell: primary nav "Chat" → "Tasks" (board is now the home route),
  "New chat" → "New task", conversation header gets a Tasks / Conversation
  breadcrumb. Removed the superseded Sessions page.
- api.ts Session type carries the task fields (goal/status/outcome/summary).

Also fixes a pre-existing SSE bug that blocked ALL live updates app-wide:
writeSSE emitted `event: <type>`, which EventSource only delivers to
addEventListener(type) handlers — but stores/events.ts (and every page reading
liveEvents) consumes via onmessage, which never fires for named events. So the
live stream delivered nothing to the UI. Dropped the event-name line; the type
is already in the JSON payload, and new event types now need zero client
changes. SSE test still green (it parses data: lines).

Verified in the browser against the live stack: the board renders 50 tasks
with correct status buckets; a goal-driven task appears and flips to a Done
card with its summary in real time without a reload; Events page confirms the
stream now delivers to onmessage.

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

web/src/pages/Tasks.svelte

@@ -0,0 +1,213 @@
+<script lang="ts">
+  import { sessions, loadSessions, loadSessionMessages, deleteSession, newChat } from '$lib/stores/chat'
+  import { liveEvents, subscribeEvents } from '$lib/stores/events'
+  import type { Session } from '$lib/api'
+  import { relativeTime } from '$lib/utils'
+  import { Badge } from '$lib/components/ui/badge'
+  import { Button } from '$lib/components/ui/button'
+  import * as Card from '$lib/components/ui/card'
+  import PlusIcon from '@lucide/svelte/icons/plus'
+  import Trash2Icon from '@lucide/svelte/icons/trash-2'
+  import { onMount } from 'svelte'
+
+  // Live board: refetch when a task's lifecycle changes anywhere (the agent set
+  // a goal, advanced status, raised/answered a question, finished). We subscribe
+  // to the event store directly rather than via $effect so delivery is
+  // deterministic. We must scan ALL events newer than the last we saw, not just
+  // liveEvents[0]: entity.touched fires on every tool call, so a task.status
+  // event is usually buried below several touches by the time we're notified. A
+  // short debounce coalesces one task's goal.set + plan.proposed + task.status
+  // burst into a single refetch.
+  const TASK_EVENTS = new Set(['task.status', 'goal.set', 'question.raised', 'question.answered'])
+
+  onMount(() => {
+    loadSessions()
+    const unsubStream = subscribeEvents() // keep the global stream open while the board is up
+    let lastSeenId = 0
+    let refreshTimer: ReturnType<typeof setTimeout> | null = null
+    const unsub = liveEvents.subscribe((evs) => {
+      if (evs.length === 0) return
+      const maxId = evs[0].id // newest-first
+      if (maxId <= lastSeenId) return
+      const relevant = evs.some((e) => e.id > lastSeenId && TASK_EVENTS.has(e.type))
+      lastSeenId = maxId
+      if (relevant) {
+        if (refreshTimer) clearTimeout(refreshTimer)
+        refreshTimer = setTimeout(() => loadSessions(), 400)
+      }
+    })
+    return () => {
+      unsub()
+      unsubStream()
+    }
+  })
+
+  // ── Status → display ────────────────────────────────────────────────
+  type Bucket = 'running' | 'input' | 'done' | 'failed'
+  function bucket(s: Session): Bucket {
+    switch (s.status) {
+      case 'awaiting_input':
+        return 'input'
+      case 'done':
+        return s.outcome === 'failure' ? 'failed' : 'done'
+      case 'failed':
+        return 'failed'
+      default:
+        return 'running' // active | planning | executing | undefined
+    }
+  }
+
+  interface StatusStyle {
+    label: string
+    dot: string
+    pulse: boolean
+    variant: 'default' | 'secondary' | 'destructive' | 'outline'
+  }
+  function statusStyle(s: Session): StatusStyle {
+    switch (bucket(s)) {
+      case 'input':
+        return { label: 'Needs input', dot: 'bg-warning', pulse: true, variant: 'secondary' }
+      case 'done':
+        return { label: s.outcome === 'partial' ? 'Done · partial' : 'Done', dot: 'bg-success', pulse: false, variant: 'default' }
+      case 'failed':
+        return { label: 'Failed', dot: 'bg-destructive', pulse: false, variant: 'destructive' }
+      default:
+        return { label: 'Running', dot: 'bg-primary', pulse: true, variant: 'secondary' }
+    }
+  }
+
+  const FILTERS: { id: 'all' | Bucket; label: string }[] = [
+    { id: 'all', label: 'All' },
+    { id: 'running', label: 'Running' },
+    { id: 'input', label: 'Needs input' },
+    { id: 'done', label: 'Done' },
+    { id: 'failed', label: 'Failed' }
+  ]
+  let filter = $state<'all' | Bucket>('all')
+
+  const counts = $derived.by(() => {
+    const c: Record<string, number> = { all: $sessions.length, running: 0, input: 0, done: 0, failed: 0 }
+    for (const s of $sessions) c[bucket(s)]++
+    return c
+  })
+
+  const visible = $derived(
+    filter === 'all' ? $sessions : $sessions.filter((s) => bucket(s) === filter)
+  )
+
+  function heading(s: Session): string {
+    return s.goal || s.title || 'Untitled task'
+  }
+
+  function openTask(id: string) {
+    loadSessionMessages(id)
+    location.hash = '#/chat'
+  }
+
+  function startTask() {
+    newChat()
+    location.hash = '#/chat'
+  }
+
+  let confirmDelete = $state<string | null>(null)
+  function handleDelete(e: MouseEvent, id: string) {
+    e.stopPropagation()
+    if (confirmDelete === id) {
+      deleteSession(id)
+      confirmDelete = null
+    } else {
+      confirmDelete = id
+      setTimeout(() => { if (confirmDelete === id) confirmDelete = null }, 3000)
+    }
+  }
+</script>
+
+<div class="mx-auto flex h-full min-h-0 max-w-6xl flex-col p-4 sm:p-6">
+  <div class="mb-4 flex items-center justify-between gap-3">
+    <div>
+      <h2 class="text-lg font-semibold">Tasks</h2>
+      <p class="text-sm text-muted-foreground">Every task is a goal Nomos works to completion.</p>
+    </div>
+    <Button onclick={startTask} class="gap-1.5">
+      <PlusIcon class="size-4" />
+      New task
+    </Button>
+  </div>
+
+  <!-- Filter chips -->
+  <div class="mb-4 flex flex-wrap gap-1.5">
+    {#each FILTERS as f}
+      <button
+        type="button"
+        onclick={() => (filter = f.id)}
+        class="rounded-full border px-2.5 py-1 text-xs transition-colors {filter === f.id
+          ? 'border-primary bg-primary/10 text-foreground'
+          : 'border-border text-muted-foreground hover:bg-muted/50'}"
+      >
+        {f.label}
+        <span class="ml-1 opacity-60">{counts[f.id] ?? 0}</span>
+      </button>
+    {/each}
+  </div>
+
+  <div class="min-h-0 flex-1 overflow-y-auto">
+    {#if visible.length === 0}
+      <div class="flex flex-col items-center gap-4 pt-20 text-center">
+        <p class="max-w-sm text-sm text-muted-foreground">
+          {filter === 'all'
+            ? 'No tasks yet. Start one and Nomos will plan it, execute it, and report the outcome.'
+            : `No ${FILTERS.find((f) => f.id === filter)?.label.toLowerCase()} tasks.`}
+        </p>
+        {#if filter === 'all'}
+          <Button onclick={startTask} variant="outline" class="gap-1.5">
+            <PlusIcon class="size-4" /> Start your first task
+          </Button>
+        {/if}
+      </div>
+    {:else}
+      <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        {#each visible as s (s.id)}
+          {@const st = statusStyle(s)}
+          <div class="group relative">
+            <button type="button" class="block w-full text-left" onclick={() => openTask(s.id)}>
+              <Card.Root class="h-full transition-colors hover:border-primary/50">
+                <Card.Header class="pb-2">
+                  <div class="flex items-center justify-between gap-2">
+                    <span class="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
+                      <span class="size-2 rounded-full {st.dot} {st.pulse ? 'animate-pulse' : ''}"></span>
+                      {st.label}
+                    </span>
+                    <span class="text-[11px] text-muted-foreground">{relativeTime(s.last_active_at)}</span>
+                  </div>
+                  <Card.Title class="line-clamp-2 text-sm leading-snug">{heading(s)}</Card.Title>
+                </Card.Header>
+                <Card.Content class="pt-0">
+                  {#if s.summary}
+                    <p class="line-clamp-3 text-xs text-muted-foreground">{s.summary}</p>
+                  {:else if s.goal && s.title && s.goal !== s.title}
+                    <p class="line-clamp-2 text-xs text-muted-foreground">{s.title}</p>
+                  {:else}
+                    <p class="text-xs italic text-muted-foreground/60">No summary yet.</p>
+                  {/if}
+                </Card.Content>
+              </Card.Root>
+            </button>
+            <button
+              type="button"
+              class="absolute right-2 top-2 flex size-7 items-center justify-center rounded-md text-muted-foreground opacity-0 transition-opacity hover:bg-destructive/10 hover:text-destructive group-hover:opacity-100"
+              onclick={(e) => handleDelete(e, s.id)}
+              title={confirmDelete === s.id ? 'Click again to confirm' : 'Delete task'}
+              aria-label="Delete task"
+            >
+              {#if confirmDelete === s.id}
+                <span class="text-[10px] font-bold text-destructive">Del?</span>
+              {:else}
+                <Trash2Icon class="size-4" />
+              {/if}
+            </button>
+          </div>
+        {/each}
+      </div>
+    {/if}
+  </div>
+</div>